Accessible alert component with three style variants (`default`, `destructive`, `warning`) built using `class-variance-authority` and React's `forwardRef`. ## Key Components | Export | Type | Description | |--------|------|-------------| | `Alert` | `React.forwardRef` | Root container with `role="alert"`, accepts `variant` prop and optional SVG icon child | | `AlertTitle` | `React.forwardRef` | Renders as `

` for the alert heading | | `AlertDescription` | `React.forwardRef` | Body text container with relaxed line-height for paragraph children | | `alertVariants` | `cva` config | CVA variant map driving Tailwind classes for each alert style | ### Variants | Variant | Use Case | |---------|----------| | `default` | General informational messages | | `destructive` | Errors or dangerous actions | | `warning` | Cautionary notices (uses ODS warning tokens) | ## Usage Example ```typescript import { Alert, AlertTitle, AlertDescription } from "./components/ui/alert" import { AlertTriangle } from "lucide-react" // Default Heads up Your session will expire in 5 minutes. // Destructive with icon Error Failed to sync device inventory. // Warning License expiring Renew within 7 days to avoid service interruption. ``` > Icon support: Placing an SVG/icon as a direct child of `Alert` automatically positions it absolutely at top-left and offsets sibling content via the `[&>svg~*]:pl-7` selector — no extra wrapper needed. Source: [`alert.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/alert.tsx)