@trading-game/design-intelligence-layer 1.0.7 → 1.1.0

package/dist/index.d.cts

@@ -123,7 +123,7 @@ declare function AvatarGroupCount({ className, ...props }: React$1.ComponentProp
 
 declare const badgeVariants: (props?: ({
     variant?: "solid" | "solid-demo" | "solid-neutral" | "solid-success" | "solid-fail" | "solid-warning" | "tint" | "tint-demo" | "tint-neutral" | "tint-success" | "tint-fail" | "tint-warning" | null | undefined;
-    size?: "lg" | "md" | "sm" | "xs" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | "count" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
@@ -465,7 +465,7 @@ declare function ItemGroup({ className, divider, ...props }: React$1.ComponentPr
     /**
      * Auto-divide consecutive default-variant `Item`s with a bottom border
      * (`border-default-default`). The last item's bottom border is suppressed,
-     * and non-default variants (`outline`, `muted`) are left untouched so
+     * and non-default variants (`outline`, `fill`, `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.
@@ -474,7 +474,7 @@ declare function ItemGroup({ className, divider, ...props }: React$1.ComponentPr
 }): 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;
+    variant?: "fill" | "default" | "outline" | "muted" | null | undefined;
     size?: "sm" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Item({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {

package/dist/index.d.ts

@@ -123,7 +123,7 @@ declare function AvatarGroupCount({ className, ...props }: React$1.ComponentProp
 
 declare const badgeVariants: (props?: ({
     variant?: "solid" | "solid-demo" | "solid-neutral" | "solid-success" | "solid-fail" | "solid-warning" | "tint" | "tint-demo" | "tint-neutral" | "tint-success" | "tint-fail" | "tint-warning" | null | undefined;
-    size?: "lg" | "md" | "sm" | "xs" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xs" | "count" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
@@ -465,7 +465,7 @@ declare function ItemGroup({ className, divider, ...props }: React$1.ComponentPr
     /**
      * Auto-divide consecutive default-variant `Item`s with a bottom border
      * (`border-default-default`). The last item's bottom border is suppressed,
-     * and non-default variants (`outline`, `muted`) are left untouched so
+     * and non-default variants (`outline`, `fill`, `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.
@@ -474,7 +474,7 @@ declare function ItemGroup({ className, divider, ...props }: React$1.ComponentPr
 }): 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;
+    variant?: "fill" | "default" | "outline" | "muted" | null | undefined;
     size?: "sm" | "default" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Item({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {

package/dist/index.js

@@ -935,9 +935,11 @@ var badgeVariants = cva4(
         "solid-fail": "bg-background-error-solid text-text-on-status-static",
         "solid-warning": "bg-background-warning-solid text-text-on-status-static",
         // Tint — the Section Message surface tokens, coloured foreground.
-        // Brand tint = the static brand-container recipe (layered value,
-        // so it paints via `background`, not a bg-* utility).
-        tint: "[background:var(--background-brand-container)] border-transparent text-text-brand-container-static",
+        // Brand tint rides `brand-selected`, the theme-aware selection
+        // family, for the same reason Calendar's range band does: the
+        // static `brand-container` is one value in both themes and sits
+        // near-white on a dark surface.
+        tint: "bg-background-brand-selected border-transparent text-text-brand-selected",
         "tint-demo": "bg-background-demo-default border-transparent text-text-demo-default",
         "tint-neutral": "bg-background-secondary-surface border-transparent text-text-prominent-default",
         "tint-success": "bg-background-success-default border-transparent text-text-success-default",
@@ -948,7 +950,18 @@ var badgeVariants = cva4(
         xs: "type-badge-xs h-5 px-2 py-0.5",
         sm: "type-badge-sm h-6 px-2.5 py-0.5",
         md: "type-badge-md h-8 px-3 py-1",
-        lg: "type-badge-lg h-10 px-4 py-1.5"
+        lg: "type-badge-lg h-10 px-4 py-1.5",
+        /* `count` is a shape, not a step on the xs/sm/md/lg rail: an
+           18px disc that grows into a pill as digits are added. The
+           padding is deliberately tight (`px-1`): one digit then
+           measures under the 18px min-width, so min-width wins and the
+           disc is a true circle. Widen the padding and a single digit
+           overshoots 18px, turning it back into an oval. `tabular-nums` keeps every digit
+           the same width, so a ticking count only resizes when the
+           digit count changes, not on every update. Callers that pin
+           it over other chrome add their own knockout ring — Badge
+           cannot know what sits behind it. */
+        count: "type-badge-xs min-w-[1.125rem] h-[1.125rem] px-1 tabular-nums"
       }
     },
     defaultVariants: {
@@ -4281,12 +4294,21 @@ function ItemSeparator(_a) {
   );
 }
 var itemVariants = cva10(
-  "group/item type-item-description flex flex-wrap items-center rounded-md border border-transparent transition-colors duration-instant outline-none focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong [a]:transition-colors [a]:hover:bg-background-hover-default",
+  "group/item type-item-description flex flex-wrap items-center rounded-2xl border border-transparent transition-colors duration-instant outline-none focus-visible:border-ring-focus-default focus-visible:ring-[3px] focus-visible:ring-ring-focus-strong [a]:transition-colors [a]:hover:bg-background-hover-default",
   {
     variants: {
       variant: {
         default: "bg-transparent",
         outline: "border-border-default-default text-text-prominent-default hover:bg-background-hover-default",
+        /* `fill` is `outline` plus a solid surface: a bordered card that reads
+           as its own plane on the page canvas, the wallet-ledger pattern.
+           Its hover steps primary -> secondary surface like the default Chip,
+           because the shared `background-hover-default` glaze is translucent —
+           laid over a filled row it would let the canvas show through instead
+           of darkening the fill. The `[a]:` rule repeats for the same reason:
+           the base link hover is that same glaze and outranks a plain
+           `hover:` on an anchor. */
+        fill: "bg-background-primary-surface border-border-default-default text-text-prominent-default hover:bg-background-secondary-surface [a]:hover:bg-background-secondary-surface",
         muted: "bg-background-secondary-surface"
       },
       size: {
@@ -7851,10 +7873,11 @@ function HistoryButton({
   return /* @__PURE__ */ jsxs34("div", { className: "relative inline-flex", children: [
     /* @__PURE__ */ jsx61(NavigationButton, { type: "button", size: "md", "aria-label": ariaLabel, onClick, children: /* @__PURE__ */ jsx61(History, { className: "size-5" }) }),
     show && /* @__PURE__ */ jsx61(
-      "span",
+      Badge,
       {
         "aria-hidden": true,
-        className: "pointer-events-none absolute -top-0.5 -right-0.5 min-w-[1.125rem] h-[1.125rem] px-1 rounded-full bg-primary text-on-primary text-[10px] leading-none font-semibold tabular-nums inline-flex items-center justify-center ring-2 ring-prominent",
+        size: "count",
+        className: "pointer-events-none absolute -top-0.5 -right-0.5 ring-2 ring-background-primary-canvas",
         children: label
       }
     )