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

package/dist/index.d.cts

@@ -62,7 +62,7 @@ interface AlertProps extends Omit<React$1.ComponentProps<"div">, "title">, Varia
 declare function Alert({ variant, layout, title, description, icon, action, actions, onDismiss, dismissLabel, className, ...props }: AlertProps): react_jsx_runtime.JSX.Element | null;
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "primary-inverse" | "secondary" | "secondary-inverse" | "tertiary" | null | undefined;
+    variant?: "primary" | "primary-inverse" | "primary-shimmer" | "primary-inverse-shimmer" | "secondary" | "secondary-inverse" | "tertiary" | null | undefined;
     size?: "lg" | "md" | "sm" | "xs" | "icon" | "icon-lg" | "icon-md" | "icon-sm" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, loading, children, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
@@ -454,7 +454,17 @@ declare function InputOTPSeparator({ ...props }: React$1.ComponentProps<"div">):
 
 declare function Separator({ className, orientation, decorative, ...props }: React$1.ComponentProps<typeof Separator$1.Root>): react_jsx_runtime.JSX.Element;
 
-declare function ItemGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ItemGroup({ className, divider, ...props }: React$1.ComponentProps<"div"> & {
+    /**
+     * Auto-divide consecutive default-variant `Item`s with a bottom border
+     * (`border-border-subtle`). The last item's bottom border is suppressed,
+     * and non-default variants (`outline`, `muted`) are left untouched so
+     * they don't double up with their own borders. Defaults to `true`; pass
+     * `false` to opt out when the design wants flush items or uses
+     * `<ItemSeparator />` manually.
+     */
+    divider?: boolean;
+}): react_jsx_runtime.JSX.Element;
 declare function ItemSeparator({ className, ...props }: React$1.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
 declare const itemVariants: (props?: ({
     variant?: "default" | "outline" | "muted" | null | undefined;

package/dist/index.d.ts

@@ -62,7 +62,7 @@ interface AlertProps extends Omit<React$1.ComponentProps<"div">, "title">, Varia
 declare function Alert({ variant, layout, title, description, icon, action, actions, onDismiss, dismissLabel, className, ...props }: AlertProps): react_jsx_runtime.JSX.Element | null;
 
 declare const buttonVariants: (props?: ({
-    variant?: "primary" | "primary-inverse" | "secondary" | "secondary-inverse" | "tertiary" | null | undefined;
+    variant?: "primary" | "primary-inverse" | "primary-shimmer" | "primary-inverse-shimmer" | "secondary" | "secondary-inverse" | "tertiary" | null | undefined;
     size?: "lg" | "md" | "sm" | "xs" | "icon" | "icon-lg" | "icon-md" | "icon-sm" | "icon-xs" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, loading, children, ...props }: React$1.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
@@ -454,7 +454,17 @@ declare function InputOTPSeparator({ ...props }: React$1.ComponentProps<"div">):
 
 declare function Separator({ className, orientation, decorative, ...props }: React$1.ComponentProps<typeof Separator$1.Root>): react_jsx_runtime.JSX.Element;
 
-declare function ItemGroup({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
+declare function ItemGroup({ className, divider, ...props }: React$1.ComponentProps<"div"> & {
+    /**
+     * Auto-divide consecutive default-variant `Item`s with a bottom border
+     * (`border-border-subtle`). The last item's bottom border is suppressed,
+     * and non-default variants (`outline`, `muted`) are left untouched so
+     * they don't double up with their own borders. Defaults to `true`; pass
+     * `false` to opt out when the design wants flush items or uses
+     * `<ItemSeparator />` manually.
+     */
+    divider?: boolean;
+}): react_jsx_runtime.JSX.Element;
 declare function ItemSeparator({ className, ...props }: React$1.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
 declare const itemVariants: (props?: ({
     variant?: "default" | "outline" | "muted" | null | undefined;

package/dist/index.js

@@ -173,6 +173,14 @@ var buttonVariants = 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",
@@ -207,6 +215,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,
@@ -224,7 +239,7 @@ function Button(_a) {
     "children"
   ]);
   const Comp = asChild ? Slot.Root : "button";
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs3(
     Comp,
     __spreadProps(__spreadValues({
       "data-slot": "button",
@@ -237,10 +252,20 @@ function Button(_a) {
       ),
       "aria-busy": loading || void 0
     }, props), {
-      children: loading ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-        /* @__PURE__ */ jsx3("span", { className: "invisible inline-flex items-center gap-[inherit]", "aria-hidden": true, children }),
-        /* @__PURE__ */ jsx3("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx3(Spinner, { className: spinnerSizeMap[size != null ? size : "lg"] }) })
-      ] }) : children
+      children: [
+        variant && shimmerGradients[variant] && !loading && !props.disabled ? /* @__PURE__ */ jsx3(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-0 [animation:button-shimmer_4s_linear_infinite]",
+            style: { background: shimmerGradients[variant] }
+          }
+        ) : null,
+        loading ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsx3("span", { className: "invisible inline-flex items-center gap-[inherit]", "aria-hidden": true, children }),
+          /* @__PURE__ */ jsx3("span", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsx3(Spinner, { className: spinnerSizeMap[size != null ? size : "lg"] }) })
+        ] }) : children
+      ]
     })
   );
 }
@@ -456,7 +481,7 @@ function Alert(_a) {
     }, props), {
       children: [
         iconColumn,
-        /* @__PURE__ */ jsx4("div", { className: "col-span-2 col-start-2 row-start-1", children: body }),
+        /* @__PURE__ */ jsx4("div", { className: "col-start-2 row-start-1 min-w-0", children: body }),
         /* @__PURE__ */ jsx4("div", { className: "col-start-3 row-start-1", children: closeButton }),
         actions && actions.length > 0 ? /* @__PURE__ */ jsx4("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__ */ jsx4(React.Fragment, { children: wrapAction(node, buttonVariant) }, i)) }) : null
       ]
@@ -771,7 +796,7 @@ var badgeVariants = cva3(
         "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.
@@ -821,9 +846,9 @@ function Badge(_a) {
 import * as React2 from "react";
 import { Gift, X as X2 } from "lucide-react";
 import { jsx as jsx9, jsxs as jsxs6 } from "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__ */ jsx9("span", { className: "inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-on-primary", children: glyph });
+  return /* @__PURE__ */ jsx9("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, {
@@ -933,7 +958,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,
@@ -958,8 +987,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
       )
@@ -3960,13 +3991,37 @@ import { cva as cva9 } from "class-variance-authority";
 import { Slot as Slot5 } from "radix-ui";
 import { jsx as jsx35 } from "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__ */ jsx35(
     "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)
   );
 }