@trading-game/design-intelligence-layer 0.17.0 → 0.17.2

package/README.md

@@ -103,7 +103,7 @@ npm install react react-dom tailwindcss
 | Aspect Ratio | `AspectRatio` |
 | Avatar | `Avatar, AvatarImage, AvatarFallback, AvatarBadge, AvatarGroup` |
 | Badge | `Badge, badgeVariants` |
-| Banner | `Banner` — dismissible promotional surface on a tinted primary surface. Brand-blue circular `IconBadge` (40 px) with a swappable `glyph` (or pass `icon` to override the badge entirely). Layouts: `inline`, `card`. Slots: `title`, `description`, `icon`/`glyph`, `action`, `actions`, `onDismiss`, `onClick` (whole-banner clickable). |
+| Banner | `Banner` — dismissible promotional surface on a tinted primary surface. Brand-blue square `IconBadge` (40 px, `rounded-xs`) with a swappable `glyph` (or pass `icon` to override the badge entirely). Layouts: `inline`, `card`. Slots: `title`, `description`, `icon`/`glyph`, `action`, `actions`, `onDismiss`, `onClick` (whole-banner clickable). |
 | Breadcrumb | `Breadcrumb, BreadcrumbList, BreadcrumbItem, ...` |
 | Button | `Button, buttonVariants` |
 | Calendar | `Calendar, CalendarDayButton` |
@@ -186,11 +186,13 @@ See [`AGENTS.md`](./AGENTS.md#blocks) for full usage examples per block.
 ## Button variants and sizes
 
 ```tsx
-<Button variant="primary" />           // Blue filled — main CTA (light surfaces)
-<Button variant="primary-inverse" />   // White filled + blue text — main CTA on dark/coloured surfaces
-<Button variant="secondary" />         // Black outline — secondary actions (light surfaces)
-<Button variant="secondary-inverse" /> // White outline + white text — secondary actions on dark/coloured surfaces
-<Button variant="tertiary" />          // Text only — minimal (light surfaces)
+<Button variant="primary" />                  // Blue filled — main CTA (light surfaces)
+<Button variant="primary-inverse" />          // White filled + blue text — main CTA on dark/coloured surfaces
+<Button variant="primary-shimmer" />          // Same as `primary` + sweeping diagonal shimmer (headline CTAs that need to draw the eye)
+<Button variant="primary-inverse-shimmer" />  // Same as `primary-inverse` + brand-blue shimmer over the white surface
+<Button variant="secondary" />                // Black outline — secondary actions (light surfaces)
+<Button variant="secondary-inverse" />        // White outline + white text — secondary actions on dark/coloured surfaces
+<Button variant="tertiary" />                 // Text only — minimal (light surfaces)
 
 // Sizes
 <Button size="lg" />      // 48px height (default)
@@ -236,7 +238,7 @@ States: hover (`bg-secondary-hover`), focus (3px `ring-ring/50`), active (`opaci
 <Badge variant="fill-success" />    // Green tint
 <Badge variant="fill-fail" />       // Red tint
 <Badge variant="fill-warning" />    // Yellow tint — status/warning
-<Badge variant="fill-credit" />     // Deep peach (#FDCA8A) + bold deep-amber (#521900) text — Welcome credit / bonus labels
+<Badge variant="fill-credit" />     // Frosted-glass surface (`--semantic-boost-surface` = `oklch(1 0 0 / 0.22)`) + white text + `backdrop-blur-md` — Welcome credit / bonus chip. Only readable on coloured surfaces (e.g. a brand-blue hero card); blends into white surfaces by design.
 <Badge variant="fill-demo" />       // Peach surface + red-orange text — demo/test-mode flags
 
 // Outline (black border, secondary-hover on hover)
@@ -337,8 +339,9 @@ Dismissible **promotional / marketing** surface — for feature launches, offers
 ```
 
 **Visual:**
-- Surface: tinted primary surface — `bg-primary/[0.08]` with `border-primary/[0.16]` edge, `rounded-md`.
-- Default icon: 40 px brand-blue **circle** (`rounded-full bg-primary`) with a white `Gift` glyph inside. Swap just the glyph via the `glyph` prop (e.g. `<Sparkles className="size-5" />`); replace the entire badge via the `icon` prop; or `icon={null}` to omit the column entirely.
+- Surface: tinted primary surface — `bg-primary/[0.08]` with `border-primary/[0.16]` edge, `rounded-sm` (6 px — matches Card and Alert).
+- Default icon: 40 px brand-blue **square** (`rounded-xs bg-primary`, 4 px corners) with a white `Gift` glyph inside. Swap just the glyph via the `glyph` prop (e.g. `<Sparkles className="size-5" />`); replace the entire badge via the `icon` prop; or `icon={null}` to omit the column entirely.
+- **Multi-line layout** (description set, or `layout="card"`): the leading icon top-aligns with the title (grid uses `items-start`) so it sits beside the headline rather than floating mid-body. Single-line banners stay vertically centred (`items-center`).
 - Default action button: `Button variant="secondary"` size `sm` for every slot (inline `action` and both `actions[]` in card). Pass `<Button>` elements explicitly to override variant/size.
 - Title supports `<b>` children styled with `text-primary` for in-line brand-blue accent.
 - Close X (32 px): vertically-centred in the grid for single-line banners; pinned to the **top-right corner** (`absolute top-3 right-3`) when the banner is multi-line (`description` set) or `layout="card"` — so it reads as a true corner dismiss instead of floating mid-body. Hovers to `bg-secondary-hover`.
@@ -711,6 +714,10 @@ Design tokens are managed in Figma and exported as CSS variables. To update:
 ## Changelog
 
 ### Unreleased
+- **Button — two new shimmer variants for headline CTAs:** `primary-shimmer` and `primary-inverse-shimmer`. Same surface tokens as their non-shimmer cousins, plus `relative overflow-hidden` to anchor an absolutely-positioned shimmer overlay. The overlay sweeps a diagonal (`110deg`) gradient driven by a new `button-shimmer` keyframe — two quick back-to-back sweeps every cycle, then a ~3 s pause off-screen, so it reads as an occasional glint rather than a continuous loader. Peak opacity is tuned per-surface (white at 32 % over brand blue; brand-blue at 22 % over white) and falls off into transparent edges. Suppressed automatically when the button is `loading` or `disabled`.
+- **Button — `button-shimmer` keyframe:** new `@keyframes button-shimmer` in both `src/styles.css` and `app/globals.css`. Pattern: `0%, 10% → 30%, 100%` translateX, with an opacity fade at the seam between the two sweeps so the reset between flashes is invisible.
+- **Badge — `fill-credit` is now a frosted glass chip:** `bg-semantic-boost-surface` was repurposed from the old peach (`#FDCA8A`) to `oklch(1 0 0 / 0.22)` — a translucent white surface that composes over whatever sits behind it. Paired with `backdrop-blur-md` and `text-on-primary` (white). Custom `!font-bold` / `!text-xs` overrides removed — the variant now only sets surface tokens, so font weight / size match every other badge (`font-semibold`, `text-xs` from the base). Border override removed too. The variant is intentionally invisible on white surfaces — designed to live on coloured surfaces (e.g. a brand-blue hero card / wallet card), matching the wallet mock's `.c-hero-wc`.
+- **Item — auto-divider in `ItemGroup`:** new `divider` prop (default `true`) adds a 1 px `bg-border-subtle` divider between consecutive default-variant `Item`s. The line is drawn via `::after` (not a border on the item itself), sitting in a 4 px `gap-1` between items with `inset-x-4` so it aligns with the item content padding. The last item's `::after` is suppressed; non-default variants (`outline`, `muted`) are untouched. Pass `divider={false}` to opt out for flush items or manual `<ItemSeparator />` usage.
 - **Tooltip — black surface by default:** `variant="default"` switched from brand-blue to black (`bg-prominent-inverse` + `text-on-prominent-inverse`). The arrow follows. `variant="inverse"` (white) is unchanged. Default primitive now bakes in `max-w-xs whitespace-normal`, so consumers no longer pass these classes.
 - **Tooltip — keyboard-shortcut breathing room:** when the tooltip contains a `Kbd` (detected via `:has([data-slot=kbd])`), padding bumps to `px-3.5 py-2` and child elements get `space-y-1.5` so the title / kbd-row pair doesn't crowd.
 - **Switch — pill + white circle knob:** track switched from `rounded-[6px]` to `rounded-full`, thumb from `rounded-[3px]` to `rounded-full`. Thumb is always `bg-prominent` (white) in both states. Checked track: `bg-primary`. Unchecked track: `bg-input`. No API change.
@@ -722,7 +729,10 @@ Design tokens are managed in Figma and exported as CSS variables. To update:
 ### v0.16.7
 - **Credit badge readability pass:** `<Badge variant="fill-credit">` and the credit pill inside `CreditTicketCard` now sit on a deeper peach surface and use a bold deep-amber text for crisper read on the grey `bg-subtle` ticket card and on white / brand-blue surfaces alike. Token chain: `--primitive-amber-100` (#FEEBD9) → `--primitive-amber-300` (#FDCA8A) and `--primitive-amber-800` (#713813) → `--primitive-amber-900` (#521900). `--semantic-boost-surface` and `--on-semantic-boost` are repointed automatically. Variant class also bumps to `!font-bold`.
 - **CreditTicketCard — responsive compact layout:** Compact variant now keeps the credit badge inline next to the value when there's room and only wraps to a second line when balance + badge would overflow into the deposit stub (`flex-wrap` on the value/badge row, with `whitespace-nowrap` on the value so the number itself never splits). Non-compact keeps the existing inline behavior.
-- **Banner — brand `IconBadge` is now a circle:** The 40 px brand-blue icon badge (visible when the consumer passes a `glyph` prop) is now `rounded-full` instead of `rounded-xs`. No API change.
+- **Banner — outer corner radius unified with Card / Alert:** outer surface `rounded-md` (8 px) → `rounded-sm` (6 px). Brand `IconBadge` reverted to `rounded-xs` (4 px square) after a brief detour through `rounded-full` — the square reads better against the surface.
+- **Banner — multi-line icon top-alignment:** when a description is present (or `layout="card"`), the grid switches from `items-center` to `items-start` so the leading icon aligns with the title's top instead of sliding to the middle of the body block as it wraps.
+- **Banner — class-order fix for `pr-12`:** in the card branch, `pr-12` was being merged before `SURFACE_CLASSES`'s `px-4`, so tailwind-merge kept the smaller right padding and long descriptions wrapped under the absolute-positioned close X. Re-ordering the `cn()` arguments puts `pr-12` after `SURFACE_CLASSES` so it wins (48 px right padding).
+- **Alert — card layout body/close cell overlap fixed:** card body changed from `col-span-2 col-start-2` to `col-start-2 min-w-0`. Previously the body spanned cols 2-3 (same cell as the close X), so long descriptions slid under the close. Now the body lives in col 2 only and the close owns col 3.
 - **Tooltip — `max-w-xs` + `whitespace-normal` built into the primitive:** Desktop tooltips now cap at 320 px by default with natural-word wrapping; consumers no longer need to pass these classes. Mobile drawers (the responsive Tooltip mode) keep the full sheet width — the consumer `className` is no longer applied to the drawer's inner content wrapper, so passing `max-w-xs` on `TooltipContent` for desktop tuning no longer leaks into and shrinks the mobile drawer text.
 - **Naming note:** the v0.14.0 entry below claimed a `fill-credit` → `fill-boost` and `CreditTicketCard` → `BoostTicketCard` rename. **Those renames were not landed** — the current shipped names are still `fill-credit`, `CreditTicketCard`, and `--semantic-boost-surface` / `--on-semantic-boost` (the boost tokens stayed, the variant/component names didn't get renamed alongside them).
 

package/dist/index.cjs

@@ -530,6 +530,14 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
         primary: "bg-primary text-on-primary hover:bg-primary-hover",
         // Primary Inverse — white bg + blue text; for use on dark/coloured surfaces
         "primary-inverse": "bg-primary-inverse text-on-primary-inverse hover:bg-primary-inverse/80",
+        // Primary Shimmer — same surface as `primary` plus a sweeping
+        // white shimmer overlay (same animation as the TicketCard deposit
+        // stub). Use for headline CTAs that need to draw the eye.
+        "primary-shimmer": "relative overflow-hidden bg-primary text-on-primary hover:bg-primary-hover",
+        // Primary Inverse Shimmer — same surface as `primary-inverse` plus
+        // a sweeping brand-blue shimmer (white shimmer would be invisible
+        // on the white surface). For headline CTAs on dark/coloured pages.
+        "primary-inverse-shimmer": "relative overflow-hidden bg-primary-inverse text-on-primary-inverse hover:bg-primary-inverse/80",
         secondary: "bg-transparent border-[1.5px] border-border-prominent text-on-prominent hover:bg-secondary-hover",
         // Secondary Inverse — white border + white text; for use on dark/coloured surfaces
         "secondary-inverse": "bg-transparent border-[1.5px] border-primary-inverse text-on-prominent-inverse hover:bg-primary-inverse/10",
@@ -564,6 +572,13 @@ var spinnerSizeMap = {
   "icon-sm": "size-3.5",
   "icon-xs": "size-3"
 };
+var shimmerGradients = {
+  // 110° tilts the bright band forward so the sweep reads as a diagonal
+  // shine. Three stops around 50% (soft → mid → soft) shape the highlight
+  // like a polished-metal gleam without going too bright at the peak.
+  "primary-shimmer": "linear-gradient(110deg, transparent 20%, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0.20) 50%, rgba(255,255,255,0.10) 60%, transparent 80%)",
+  "primary-inverse-shimmer": "linear-gradient(110deg, transparent 20%, rgba(35,35,255,0.07) 40%, rgba(35,35,255,0.14) 50%, rgba(35,35,255,0.07) 60%, transparent 80%)"
+};
 function Button(_a) {
   var _b = _a, {
     className,
@@ -581,7 +596,7 @@ function Button(_a) {
     "children"
   ]);
   const Comp = asChild ? import_radix_ui2.Slot.Root : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     Comp,
     __spreadProps(__spreadValues({
       "data-slot": "button",
@@ -594,10 +609,20 @@ function Button(_a) {
       ),
       "aria-busy": loading || void 0
     }, props), {
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "invisible inline-flex items-center gap-[inherit]", "aria-hidden": true, children }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { className: spinnerSizeMap[size != null ? size : "lg"] }) })
-      ] }) : children
+      children: [
+        variant && shimmerGradients[variant] && !loading && !props.disabled ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 [animation:button-shimmer_4s_linear_infinite]",
+            style: { background: shimmerGradients[variant] }
+          }
+        ) : null,
+        loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "invisible inline-flex items-center gap-[inherit]", "aria-hidden": true, children }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Spinner, { className: spinnerSizeMap[size != null ? size : "lg"] }) })
+        ] }) : children
+      ]
     })
   );
 }
@@ -813,7 +838,7 @@ function Alert(_a) {
     }, props), {
       children: [
         iconColumn,
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col-span-2 col-start-2 row-start-1", children: body }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col-start-2 row-start-1 min-w-0", children: body }),
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col-start-3 row-start-1", children: closeButton }),
         actions && actions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col-span-3 col-start-2 row-start-2 mt-2 flex flex-wrap items-center justify-start gap-2", children: actions.slice(0, 2).map((node, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(React.Fragment, { children: wrapAction(node, buttonVariant) }, i)) }) : null
       ]
@@ -1128,7 +1153,7 @@ var badgeVariants = (0, import_class_variance_authority3.cva)(
         "fill-success": "bg-semantic-win/10 border-transparent text-semantic-win",
         "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-bold",
+        "fill-credit": "bg-semantic-boost-surface backdrop-blur-md text-on-primary",
         // 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.
@@ -1178,9 +1203,9 @@ function Badge(_a) {
 var React2 = __toESM(require("react"), 1);
 var import_lucide_react3 = require("lucide-react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var SURFACE_CLASSES = "w-full rounded-md border border-primary/[0.16] bg-primary/[0.08] px-4 py-3.5";
+var SURFACE_CLASSES = "w-full rounded-sm border border-primary/[0.16] bg-primary/[0.08] px-4 py-3.5";
 function IconBadge({ glyph }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-on-primary", children: glyph });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "inline-flex size-10 shrink-0 items-center justify-center rounded-xs bg-primary text-on-primary", children: glyph });
 }
 function Banner(_a) {
   var _b = _a, {
@@ -1290,7 +1315,11 @@ function Banner(_a) {
         "data-layout": "inline",
         "data-clickable": isClickable ? "true" : void 0,
         className: cn(
-          "grid items-center gap-x-4",
+          "grid gap-x-4",
+          // Single-line banners vertically-centre the row (icon + title);
+          // multi-line banners top-align so the leading icon sits next to
+          // the title instead of floating mid-body.
+          hasDescription ? "items-start" : "items-center",
           gridCols,
           rowTemplate,
           SURFACE_CLASSES,
@@ -1315,8 +1344,10 @@ function Banner(_a) {
       "data-layout": "card",
       "data-clickable": isClickable ? "true" : void 0,
       className: cn(
-        "relative grid grid-cols-[auto_1fr] grid-rows-[auto_auto] items-center gap-x-4 gap-y-3 pr-12",
+        // Card layout is always multi-row — top-align the icon with the title.
+        "relative grid grid-cols-[auto_1fr] grid-rows-[auto_auto] items-start gap-x-4 gap-y-3",
         SURFACE_CLASSES,
+        "pr-12",
         clickableClasses,
         className
       )
@@ -4305,13 +4336,37 @@ var import_class_variance_authority9 = require("class-variance-authority");
 var import_radix_ui18 = require("radix-ui");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 function ItemGroup(_a) {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+  var _b = _a, {
+    className,
+    divider = true
+  } = _b, props = __objRest(_b, [
+    "className",
+    "divider"
+  ]);
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     __spreadValues({
       role: "list",
       "data-slot": "item-group",
-      className: cn("group/item-group flex flex-col", className)
+      "data-divider": divider ? "true" : void 0,
+      className: cn(
+        "group/item-group flex flex-col",
+        // Divider mode: 4 px gap between items + a 1 px line drawn via
+        // ::after on each non-last default item, sitting in that gap.
+        // Item itself stays border-free — the line is a separate visual
+        // element rather than an outline on the item.
+        divider && [
+          "gap-1",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:relative",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:content-['']",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:absolute",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:-bottom-0.5",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:inset-x-4",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:h-px",
+          "[&>[data-slot=item][data-variant=default]:not(:last-child)]:after:bg-border-subtle"
+        ],
+        className
+      )
     }, props)
   );
 }