`) — hand-rolled callouts diverge across teams in colour scale, iconography, accessibility hooks, and dark-mode treatment. The chassis renders `role="alert"` on the root so screen-readers announce the message. The `variant` axis swaps semantic colour pairs for four rungs (`default` / `destructive` / `success` / `warning`), and `` selects the matching lucide-react icon (`InfoIcon` / `AlertCircleIcon` / `CheckCircle2Icon` / `AlertTriangleIcon`) for the variant. ## Features - Four colour variants via the `variant` axis (`default` / `destructive` / `success` / `warning`). - Four composition primitives — `Alert`, `AlertTitle`, `AlertDescription`, `AlertIcon`. - `role="alert"` automatically applied so screen-readers announce the message. - `data-variant` attribute on the rendered root so tests / consumer CSS can target alerts by variant. - `[&>svg]:` Tailwind arbitrary modifiers position any direct svg child as an inline icon — no consumer flex setup required. - `` renders as `

` so it nests under page-level headings without disrupting the document outline. - `` renders as `
` so consumers can compose paragraphs / lists / inline elements without nesting block elements inside a `
`. - All sub-components forward refs to their underlying DOM nodes. ## Usage: Basic Example ```tsx import { Alert, AlertDescription, AlertIcon, AlertTitle, } from "@suaveplan/react-ui"; export function PolicyChange() { return ( Policy update Your team's retention policy has been updated. ); } ``` ## Usage: Advanced Example ```tsx import { Alert, AlertDescription, AlertTitle, Button, } from "@suaveplan/react-ui"; import { ZapIcon } from "lucide-react"; export function CustomIconAlert() { return (
523 records synchronised in 1.4 seconds.
); } ``` ## API Reference ### `` `forwardRef` — root container. Renders `role="alert"` and `data-variant`. | Prop | Type | Default | Description | |---|---|---|---| | `variant` | `"default" \| "destructive" \| "success" \| "warning"` | `"default"` | Colour palette. | | _all_ `HTMLAttributes` | _native_ | _native_ | Forwarded as-is. | ### `` `forwardRef` — heading rendered as `
`. ### `` `forwardRef` — body text. Rendered as `
` to allow nested block elements. ### `` `function (props: AlertIconProps): ReactElement` — convenience wrapper that renders the lucide-react icon for the supplied `variant`. Marked `aria-hidden="true"` so the visible title / description carries the accessible name. Not a `forwardRef` (icons are stateless and the parent `` reaches them via the cva `[&>svg]:` modifiers, not via ref-based DOM access). | Prop | Type | Default | Description | |---|---|---|---| | `variant` | same as `` | `"default"` | Variant whose default icon to render. | | `className` | `string` | _undefined_ | Optional className passed to the rendered icon. | #### Errors The Alert components do NOT call `useTranslation()` so they do not interact with the i18n provider. Children carrying user-perceivable text must be resolved at the call site with `t('react-ui.alert.policy.title')` or similar. ## Implementation Notes - `role="alert"` is unconditionally applied. This may produce verbose announcements when many alerts mount at once (e.g. a list of validation errors); consumers in that scenario should wrap the whole list in `
` and pass `role="presentation"` to each `` to suppress duplicate announcements (or use `` purely for visual styling and let the parent live region carry the accessibility semantics). - The `[&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4` rules in the cva position any direct SVG child as the inline icon. This means consumers can drop any icon — ``, ``, `` — directly inside the alert root and it lands correctly without a wrapper element. - `` is a convenience wrapper, not a required slot. Alerts without any icon (just title + description) render correctly — the magic-modifier rules only fire when a direct SVG child exists. - `` defaults to `
` because alerts typically appear inside a section that already has its own `
` / `
` heading. Consumers needing a different heading level should compose their own heading element with `alertTitleVariants()`. - `` renders as `
` (not `
`) so consumers can compose nested block elements (paragraphs, lists, buttons) without invalid HTML — paragraphs cannot contain block elements.

` because alerts typically appear inside a section that already has its own `

` / `

` heading. Consumers needing a different heading level should compose their own heading element with `alertTitleVariants()`. - `` renders as `` (not ``) so consumers can compose nested block elements (paragraphs, lists, buttons) without invalid HTML — paragraphs cannot contain block elements.

` heading. Consumers needing a different heading level should compose their own heading element with `alertTitleVariants()`. - `` renders as `
` (not `
`) so consumers can compose nested block elements (paragraphs, lists, buttons) without invalid HTML — paragraphs cannot contain block elements.