Callout

1import * as React from 'react';
2 
3// @interlace/callout v1.0.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/callout
5// What changed since: https://ds.interlace.tools/c/callout#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — Callout
10 *
11 * Inline-prose annotation. The "stop and read this" surface that punctuates
12 * long-form content (docs, MDX, READMEs). Distinct from `Alert` — Alert is
13 * an out-of-band runtime banner ("your save failed"), Callout is an in-band
14 * authored aside ("note: this rule is type-aware"). Both can share pigment
15 * but they live at different altitudes in the system.
16 *
17 * Five tones, each fixed to a lucide icon + a semantic-token border-tint:
18 *
19 *   - info     Info             — neutral context, parallel to the body
20 *   - note     Lightbulb        — author tip / suggestion
21 *   - success  CircleCheck      — confirmation / positive outcome
22 *   - warn     TriangleAlert    — non-blocking caution
23 *   - danger   OctagonAlert     — destructive / blocking consequence
24 *
25 * ## Anatomy
26 *
27 *   Callout                            (div — role="note" — data-min-viewport=320)
28 *     ├─ {icon}                        (lucide, decorative — aria-hidden)
29 *     └─ <div>                         (text column)
30 *         ├─ {title?}                  (Typography variant=ui font-medium)
31 *         └─ {children}                (free-form prose)
32 *
33 * ## MIN_VIEWPORT — 320
34 *
35 * Callouts live inside body prose; they MUST work on the narrowest reading
36 * viewport (320 CSS-px). The icon-left + text-column flex layout reflows
37 * naturally — no horizontal scroll, no truncation.
38 *
39 * | Rule | Concept                          | Where in this file                                          |
40 * | ---- | -------------------------------- | ----------------------------------------------------------- |
41 * | R4   | Extends native el + VariantProps | `React.ComponentProps<'div'> & VariantProps<...>` + props   |
42 * | R6   | data-slot on root                | `data-slot="callout"` + data-tone                           |
43 * | R7   | className merged + ...rest + ref | `cn(calloutVariants(...), className)` + `{...props}`        |
44 * | R8   | No `isXxx`; enum for tone        | `tone` is a 5-way enum, never a boolean                     |
45// … truncated