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

package/README.md

@@ -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)
@@ -712,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.

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
+      ]
     })
   );
 }
@@ -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.
@@ -4311,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)
   );
 }