@trading-game/design-intelligence-layer 0.15.3 → 0.16.0

package/README.md

@@ -98,7 +98,7 @@ npm install react react-dom tailwindcss
 | Component | Import |
 |---|---|
 | Accordion | `Accordion, AccordionItem, AccordionTrigger, AccordionContent` |
-| Alert | `Alert, AlertTitle, AlertDescription` |
+| Alert | `Alert` — dismissible in-page notification. Variants: `default`, `brand`, `info`, `warning`, `danger`, `success`. Layouts: `inline`, `card`. Slots: `title`, `description`, `icon`, `action`, `actions`, `onDismiss`. |
 | Alert Dialog | `AlertDialog, AlertDialogTrigger, AlertDialogContent, ...` |
 | Avatar | `Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup` |
 | Badge | `Badge, badgeVariants` |
@@ -251,11 +251,49 @@ States: hover (`bg-secondary-hover`), focus (3px `ring-ring/50`), active (`opaci
 
 ## Alert variants
 
+Dismissible, in-page notification surface. Six variants × two layouts × optional title / description / icon / action / dismiss slots.
+
 ```tsx
-<Alert variant="info" />    // blue — informational (default)
-<Alert variant="error" />   // red — error state
+// Variant — controls the surface tint and icon accent
+<Alert variant="default" />   // white surface + subtle border (neutral)
+<Alert variant="brand" />     // solid brand-blue surface, white text
+<Alert variant="info" />      // sky-blue tint
+<Alert variant="warning" />   // yellow tint
+<Alert variant="danger" />    // red tint
+<Alert variant="success" />   // green tint
+
+// Layout — controls the shape
+<Alert layout="inline" />     // single row: icon · body · optional action · close X (default)
+<Alert layout="card" />       // taller: icon · body · close X top-right, up to 2 buttons bottom-left
+
+// Slots — all optional (at least one of title or description is required)
+<Alert
+  variant="info"
+  layout="inline"
+  title="Verify your email"
+  description="We sent a confirmation link to example@email.com."
+  icon={<MyIcon />}                 // pass null to omit; omit to use the variant default
+  action="Resend"                   // inline only — string is wrapped in Button automatically
+  onDismiss={() => setOpen(false)}  // when provided, close X is rendered
+  dismissLabel="Dismiss"            // aria-label for the close X
+/>
+
+<Alert
+  variant="info"
+  layout="card"
+  title="..."
+  description="..."
+  actions={["Learn more", "Open trading"]}  // card only — array of up to 2 buttons
+  onDismiss={() => setOpen(false)}
+/>
 ```
 
+**Behaviour:**
+- Dismissal is **controlled** — clicking the close X calls `onDismiss`; the parent owns visibility.
+- Brand variant's buttons use `Button variant="primary-inverse"`; every other variant's buttons use `Button variant="secondary"`. Pass a fully-styled `<Button>` to `action` / `actions` to override.
+- Inline + single-line content (only title OR only description) renders at a fixed 48px height with everything vertically centered. Inline + multi-line and card layouts grow to fit.
+- `role="alert"` + `aria-live="assertive"` for `danger` / `warning`; `role="status"` + `aria-live="polite"` for the rest.
+
 ## Component behaviour notes
 
 ### AlertDialog — button fill