Alert

1import * as React from 'react';
2 
3// @interlace/alert v1.1.0 — Interlace design system.
4// Docs, props and live preview: https://ds.interlace.tools/c/alert
5// What changed since: https://ds.interlace.tools/c/alert#history
6// Generated banner — keep it, the upgrade diff reads this version.
7 
8/**
9 * @interlace/ui — Alert
10 *
11 * A bordered in-page message with `role="alert"`, an optional leading icon, a
12 * title and a description, in two tones (default and destructive).
13 *
14 * The icon column exists only when a direct `<svg>` child does — `has-[>svg]`
15 * switches the grid from `[0_1fr]` to two columns — so a text-only alert has
16 * no empty gutter.
17 *
18 * ## Anatomy
19 *
20 *   Alert                            (div — role=alert, CSS grid)
21 *     ├─ <svg>                       (optional, any icon; sizing is imposed here)
22 *     ├─ AlertTitle                  (div — col-start-2)
23 *     └─ AlertDescription            (div — col-start-2)
24 *
25 * The icon is styled by descendant selectors on the root (`[&>svg]:size-4`,
26 * `translate-y-0.5`, `text-current`), so it must be a DIRECT child — an icon
27 * wrapped in a span gets neither the sizing nor the grid column.
28 *
29 * ## Two things to know before reaching for it
30 *
31 *   - `role="alert"` is unconditional. It is an assertive live region, so this
32 *     component is for a message that APPEARS in response to something. One
33 *     rendered with the page competes with the page's own announcement.
34 *   - `AlertTitle` is `line-clamp-1`. A title longer than one line is cut, not
35 *     wrapped; the sentence belongs in `AlertDescription`.
36 *
37 * | Rule | Concept                          | Where in this file                                          |
38 * | ---- | -------------------------------- | ----------------------------------------------------------- |
39 * | R4   | Extends native el                | `React.ComponentProps<'div'>` on all three parts            |
40 * | R6   | data-slot per part               | alert / alert-title / alert-description                     |
41 * | R7   | cva + cn + ...rest               | `cn(alertVariants({ variant }), className)` + `{...props}`  |
42 * | R8   | Enum for tone                    | `variant = default | destructive` — no `isError` boolean    |
43 * | R19  | Tokens only                      | `bg-card`, `text-card-foreground`, `text-destructive`       |
44 * | R25  | Server component                 | No hooks → no `'use client'`                                |
45// … truncated