@trading-game/design-intelligence-layer 0.15.4 → 0.16.1

package/README.md

@@ -98,10 +98,11 @@ npm install react react-dom tailwindcss
 | Component | Import |
 |---|---|
 | Accordion | `Accordion, AccordionItem, AccordionTrigger, AccordionContent` |
-| Alert | `Alert, AlertTitle, AlertDescription` |
+| Alert | `Alert` — dismissible status notification. Variants: `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` |
+| Banner | `Banner` — dismissible promotional surface. Single visual treatment (light-blue diagonal gradient). Layouts: `inline`, `card`. Slots: `title`, `description`, `icon`, `action`, `actions`, `onDismiss`, `onClick` (whole-banner clickable). |
 | Breadcrumb | `Breadcrumb, BreadcrumbList, BreadcrumbItem, ...` |
 | Button | `Button, buttonVariants` |
 | Calendar | `Calendar, CalendarDayButton` |
@@ -232,8 +233,9 @@ States: hover (`bg-secondary-hover`), focus (3px `ring-ring/50`), active (`opaci
 <Badge variant="fill" />            // Blue tint
 <Badge variant="fill-success" />    // Green tint
 <Badge variant="fill-fail" />       // Red tint
-<Badge variant="fill-warning" />    // Orange tint
-<Badge variant="fill-credit" />     // Amber-orange tint — credit/bonus labels
+<Badge variant="fill-warning" />    // Yellow tint — status/warning
+<Badge variant="fill-credit" />     // Light peach — credit/bonus labels
+<Badge variant="fill-demo" />       // Red-orange tint — demo/test-mode flags
 
 // Outline (black border, secondary-hover on hover)
 <Badge variant="outline" />
@@ -251,11 +253,93 @@ States: hover (`bg-secondary-hover`), focus (3px `ring-ring/50`), active (`opaci
 
 ## Alert variants
 
+Dismissible **status** notification (info / warning / danger / success). For promotional / marketing surfaces, use **Banner** instead.
+
+```tsx
+// Variant — controls the surface tint and icon accent
+<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.
+- All variants' buttons default to `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 `info` / `success`.
+
+## Banner
+
+Dismissible **promotional / marketing** surface — for feature launches, offers, onboarding nudges, cross-promo. Single visual treatment (no severity variants); for status messages use **Alert** instead.
+
 ```tsx
-<Alert variant="info" />    // blue — informational (default)
-<Alert variant="error" />   // red — error state
+// Layout — controls the shape
+<Banner layout="inline" />    // single row: icon · body · optional action · close X (default)
+<Banner layout="card" />      // body on row 1, up to 2 action buttons on row 2 bottom-left
+
+// Slots — all optional (at least one of title or description is required)
+<Banner
+  layout="inline"
+  title={<>Spring release <b>is here.</b></>}        // wrap emphasis in <b> for brand-blue accent
+  description="New features just landed — take a look at what's changed."
+  icon={<MyIcon />}                                   // omit to use the default 40px brand-blue gift badge
+  action="Get started"                                // string wrapped in Button variant="primary"
+  onDismiss={() => setOpen(false)}                    // when provided, close X is rendered
+  dismissLabel="Dismiss"                              // aria-label for the close X
+/>
+
+<Banner
+  layout="card"
+  title="..."
+  description="..."
+  actions={["Learn more", "Get started"]}             // first = Secondary, second = Primary
+  onDismiss={() => setOpen(false)}
+/>
+
+// Whole-banner clickable — the surface itself is the CTA.
+// Mutually exclusive with action / actions (buttons dropped, dev warning).
+<Banner
+  layout="inline"
+  title="Tap anywhere on this banner"
+  description="Whole surface is the click target."
+  onClick={() => navigate("/promo")}
+  onDismiss={() => setOpen(false)}                    // close X still works independently
+/>
 ```
 
+**Visual:**
+- Surface: 135° diagonal gradient `#EBEBFF → #FFFFFF` with `border-primary/20` light-blue edge.
+- Default icon: 40px brand-blue circle with a white `Gift` glyph. Override via `icon` (pass any `ReactNode`) or `icon={null}` to omit.
+- Default action button: `Button variant="primary"` (single inline action) or `[Secondary, Primary]` pair (card actions). Pass `<Button>` elements explicitly to override variant/size.
+- Title supports `<b>` children styled with `text-primary` for in-line brand-blue accent.
+- Close X (32px) hovers to `bg-secondary-hover`.
+
 ## Component behaviour notes
 
 ### AlertDialog — button fill