@trading-game/design-intelligence-layer 0.16.0 → 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` — dismissible in-page notification. Variants: `default`, `brand`, `info`, `warning`, `danger`, `success`. Layouts: `inline`, `card`. Slots: `title`, `description`, `icon`, `action`, `actions`, `onDismiss`. |
+| 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,12 +253,10 @@ 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.
+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="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
@@ -290,9 +290,55 @@ Dismissible, in-page notification surface. Six variants × two layouts × option
 
 **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.
+- 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 the rest.
+- `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
+// 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
 

package/dist/index.cjs

@@ -606,8 +606,6 @@ var alertVariants = (0, import_class_variance_authority2.cva)(
   {
     variants: {
       variant: {
-        default: "bg-prominent border border-border-subtle",
-        brand: "bg-primary",
         info: "bg-semantic-info/10",
         warning: "bg-semantic-warning/10",
         danger: "bg-semantic-error/10",
@@ -629,32 +627,24 @@ var alertVariants = (0, import_class_variance_authority2.cva)(
 );
 var SINGLE_LINE_CLASSES = "items-center min-h-12 py-2 gap-y-0";
 var TITLE_CLASSES = {
-  default: "text-on-prominent",
-  brand: "text-on-primary",
   info: "text-on-prominent",
   warning: "text-on-prominent",
   danger: "text-on-prominent",
   success: "text-on-prominent"
 };
 var ICON_CLASSES = {
-  default: "text-on-prominent",
-  brand: "text-on-primary",
   info: "text-semantic-info",
   warning: "text-semantic-warning",
   danger: "text-semantic-error",
   success: "text-semantic-win"
 };
 var DESC_CLASSES = {
-  default: "text-on-subtle",
-  brand: "text-on-primary opacity-80",
   info: "text-on-subtle",
   warning: "text-on-subtle",
   danger: "text-on-subtle",
   success: "text-on-subtle"
 };
 var CLOSE_CLASSES = {
-  default: "text-on-subtle opacity-70",
-  brand: "text-on-primary opacity-70",
   info: "text-on-subtle opacity-70",
   warning: "text-on-subtle opacity-70",
   danger: "text-on-subtle opacity-70",
@@ -662,10 +652,6 @@ var CLOSE_CLASSES = {
 };
 function defaultIconForVariant(variant) {
   switch (variant) {
-    case "default":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Info, {});
-    case "brand":
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Sparkles, {});
     case "info":
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Info, {});
     case "warning":
@@ -676,9 +662,6 @@ function defaultIconForVariant(variant) {
       return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.CheckCircle2, {});
   }
 }
-function actionButtonVariantFor(variant) {
-  return variant === "brand" ? "primary-inverse" : "secondary";
-}
 function Alert(_a) {
   var _b = _a, {
     variant = "info",
@@ -716,7 +699,7 @@ function Alert(_a) {
   const showIcon = icon !== null;
   const resolvedIcon = icon === void 0 ? defaultIconForVariant(variant) : icon;
   const showCloseButton = typeof onDismiss === "function";
-  const buttonVariant = actionButtonVariantFor(variant);
+  const buttonVariant = "secondary";
   const isAssertive = variant === "danger" || variant === "warning";
   const role = isAssertive ? "alert" : "status";
   const ariaLive = isAssertive ? "assertive" : "polite";
@@ -778,9 +761,10 @@ function Alert(_a) {
       "aria-hidden": true,
       className: cn(
         "inline-flex shrink-0 size-4 [&_svg]:size-full",
-        // 2px nudge (mt-0.5) aligns the 16px icon with the title cap-height
-        // in multi-line / card layouts. This is the one exception to the
-        // 8-point grid — required for optical typography alignment.
+        // Single-line: grid is items-center so the icon centers automatically.
+        // Multi-line / card: top-aligned with the title cap-height via a 2px
+        // (mt-0.5) optical nudge so the icon reads as introducing the message
+        // header, not floating between title and description.
         isSingleLine ? "" : "mt-0.5",
         ICON_CLASSES[variant]
       ),
@@ -1142,6 +1126,10 @@ var badgeVariants = (0, import_class_variance_authority3.cva)(
         "fill-fail": "bg-semantic-loss/10 border-transparent text-semantic-loss",
         "fill-warning": "bg-semantic-warning/10 border-transparent text-semantic-warning",
         "fill-credit": "bg-semantic-boost-surface border-transparent text-on-semantic-boost !text-xs !font-semibold",
+        // Demo / test-mode flag — opaque light-peach surface + red-orange text.
+        // Uses --semantic-demo-surface (a solid color-mix of demo @ 10% with white)
+        // so the badge looks identical on any background.
+        "fill-demo": "bg-semantic-demo-surface border-transparent text-semantic-demo",
         // Ghost (transparent)
         ghost: "bg-transparent border-transparent text-primary [a&]:hover:bg-secondary-hover [a&]:hover:text-primary",
         "ghost-success": "bg-transparent border-transparent text-semantic-win [a&]:hover:bg-semantic-win/10 [a&]:hover:text-semantic-win",
@@ -7255,7 +7243,7 @@ function HeaderNavigationBlock({
   actions
 }) {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "w-full min-w-80 max-w-layout-diagram-small border border-border-subtle rounded-md overflow-hidden bg-prominent", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("header", { className: "flex items-center gap-2 border-b border-border-subtle bg-prominent px-layout-margin-inline py-3", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "w-full min-w-80 max-w-layout-diagram-small rounded-md overflow-hidden bg-prominent", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("header", { className: "flex items-center gap-2 border-b border-border-subtle bg-prominent px-layout-margin-inline py-3", children: [
     onBack && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(NavigationButton, { type: "button", size: "md", "aria-label": "Back", onClick: onBack, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_lucide_react25.ArrowLeft, { className: "size-5" }) }),
     /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: "flex min-w-0 flex-1 items-center justify-center gap-2", children: [
       badge && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Badge, { variant: (_a = badge.variant) != null ? _a : "fill-warning", size: "sm", children: badge.label }),