@trading-game/design-intelligence-layer 0.13.2 → 0.14.0

package/dist/index.d.cts

@@ -65,7 +65,7 @@ declare function AvatarGroup({ className, ...props }: React$1.ComponentProps<"di
 declare function AvatarGroupCount({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
 declare const badgeVariants: (props?: ({
-    variant?: "fill" | "default" | "default-success" | "default-fail" | "default-warning" | "fill-success" | "fill-fail" | "fill-warning" | "fill-boost" | "ghost" | "ghost-success" | "ghost-fail" | "ghost-warning" | null | undefined;
+    variant?: "fill" | "default" | "standard" | "default-success" | "default-fail" | "default-warning" | "fill-success" | "fill-fail" | "fill-warning" | "fill-boost" | "ghost" | "ghost-success" | "ghost-fail" | "ghost-warning" | null | undefined;
     size?: "lg" | "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
@@ -700,10 +700,23 @@ type BoostTicketCardProps = {
      * Defaults to `"center"`.
      */
     boostInfoAlign?: "start" | "center" | "end";
+    /**
+     * Heading shown at the top of the mobile drawer (forwarded to
+     * `TooltipContent.title`). Desktop tooltip ignores this. When omitted, the
+     * underlying `TooltipContent` falls back to its own `"Title"` placeholder.
+     */
+    boostInfoTitle?: string;
+    /**
+     * Label on the dismiss button at the bottom of the mobile drawer (forwarded
+     * to `TooltipContent.closeLabel`). Desktop tooltip ignores this. When
+     * omitted, the underlying `TooltipContent` falls back to its own `"Label"`
+     * placeholder.
+     */
+    boostInfoCloseLabel?: string;
     /** Compact (mobile) layout — reduces horizontal padding from 16px to 8px. */
     compact?: boolean;
 };
-declare function BoostTicketCard({ className, icon, label, value, currency, stubLabel, onStubClick, stubDisabled, boostAmount, boostCurrency, boostInfo, boostInfoSide, boostInfoAlign, compact, }: BoostTicketCardProps): react_jsx_runtime.JSX.Element;
+declare function BoostTicketCard({ className, icon, label, value, currency, stubLabel, onStubClick, stubDisabled, boostAmount, boostCurrency, boostInfo, boostInfoSide, boostInfoAlign, boostInfoTitle, boostInfoCloseLabel, compact, }: BoostTicketCardProps): react_jsx_runtime.JSX.Element;
 /** Alias for the Figma-named variant. */
 declare const TicketCardDesktop: typeof TicketCard;
 

package/dist/index.d.ts

@@ -65,7 +65,7 @@ declare function AvatarGroup({ className, ...props }: React$1.ComponentProps<"di
 declare function AvatarGroupCount({ className, ...props }: React$1.ComponentProps<"div">): react_jsx_runtime.JSX.Element;
 
 declare const badgeVariants: (props?: ({
-    variant?: "fill" | "default" | "default-success" | "default-fail" | "default-warning" | "fill-success" | "fill-fail" | "fill-warning" | "fill-boost" | "ghost" | "ghost-success" | "ghost-fail" | "ghost-warning" | null | undefined;
+    variant?: "fill" | "default" | "standard" | "default-success" | "default-fail" | "default-warning" | "fill-success" | "fill-fail" | "fill-warning" | "fill-boost" | "ghost" | "ghost-success" | "ghost-fail" | "ghost-warning" | null | undefined;
     size?: "lg" | "md" | "sm" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Badge({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
@@ -700,10 +700,23 @@ type BoostTicketCardProps = {
      * Defaults to `"center"`.
      */
     boostInfoAlign?: "start" | "center" | "end";
+    /**
+     * Heading shown at the top of the mobile drawer (forwarded to
+     * `TooltipContent.title`). Desktop tooltip ignores this. When omitted, the
+     * underlying `TooltipContent` falls back to its own `"Title"` placeholder.
+     */
+    boostInfoTitle?: string;
+    /**
+     * Label on the dismiss button at the bottom of the mobile drawer (forwarded
+     * to `TooltipContent.closeLabel`). Desktop tooltip ignores this. When
+     * omitted, the underlying `TooltipContent` falls back to its own `"Label"`
+     * placeholder.
+     */
+    boostInfoCloseLabel?: string;
     /** Compact (mobile) layout — reduces horizontal padding from 16px to 8px. */
     compact?: boolean;
 };
-declare function BoostTicketCard({ className, icon, label, value, currency, stubLabel, onStubClick, stubDisabled, boostAmount, boostCurrency, boostInfo, boostInfoSide, boostInfoAlign, compact, }: BoostTicketCardProps): react_jsx_runtime.JSX.Element;
+declare function BoostTicketCard({ className, icon, label, value, currency, stubLabel, onStubClick, stubDisabled, boostAmount, boostCurrency, boostInfo, boostInfoSide, boostInfoAlign, boostInfoTitle, boostInfoCloseLabel, compact, }: BoostTicketCardProps): react_jsx_runtime.JSX.Element;
 /** Alias for the Figma-named variant. */
 declare const TicketCardDesktop: typeof TicketCard;
 

package/dist/index.js

@@ -594,6 +594,8 @@ var badgeVariants = cva3(
       variant: {
         // Default (solid)
         default: "bg-primary text-on-primary [a&]:hover:bg-primary/90",
+        // Standard (neutral chip — for non-status meta like contract type, duration)
+        standard: "bg-subtle text-on-prominent [a&]:hover:bg-subtle/80",
         "default-success": "bg-semantic-win text-on-semantic-win [a&]:hover:bg-semantic-win/90",
         "default-fail": "bg-semantic-loss text-on-semantic-loss [a&]:hover:bg-semantic-loss/90",
         "default-warning": "bg-semantic-warning text-on-semantic-warning [a&]:hover:bg-semantic-warning/90",
@@ -6319,6 +6321,18 @@ function TabsContent(_a) {
 // components/ui/ticket-card.tsx
 import { ArrowRight as ArrowRight2, Info, Rocket } from "lucide-react";
 import { Fragment as Fragment3, jsx as jsx57, jsxs as jsxs27 } from "react/jsx-runtime";
+function formatBalanceValue(raw) {
+  const match = raw.match(/^(\D*)([\d,]+(?:\.\d+)?)(\D*)$/);
+  if (!match) return raw;
+  const [, prefix = "", numericPart, suffix = ""] = match;
+  const parsed = Number.parseFloat(numericPart.replace(/,/g, ""));
+  if (Number.isNaN(parsed)) return raw;
+  const formatted = parsed.toLocaleString("en-US", {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  });
+  return `${prefix}${formatted}${suffix}`;
+}
 function TicketCard({
   className,
   icon,
@@ -6336,7 +6350,7 @@ function TicketCard({
       /* @__PURE__ */ jsxs27("div", { className: "flex h-11 flex-col justify-center gap-1 whitespace-nowrap", children: [
         /* @__PURE__ */ jsx57("p", { className: "text-xs text-on-subtle", children: label }),
         /* @__PURE__ */ jsxs27("p", { className: "leading-none", children: [
-          /* @__PURE__ */ jsx57("span", { className: "text-[20px] font-bold text-on-prominent", children: value }),
+          /* @__PURE__ */ jsx57("span", { className: "text-[20px] font-bold text-on-prominent", children: formatBalanceValue(value) }),
           currency && /* @__PURE__ */ jsxs27(Fragment3, { children: [
             " ",
             /* @__PURE__ */ jsx57("span", { className: "text-sm text-on-subtle", children: currency })
@@ -6402,43 +6416,67 @@ function BoostTicketCard({
   boostInfo,
   boostInfoSide = "top",
   boostInfoAlign = "center",
+  boostInfoTitle,
+  boostInfoCloseLabel,
   compact = false
 }) {
   return /* @__PURE__ */ jsx57("div", { className: cn("flex w-full flex-col gap-2", className), children: /* @__PURE__ */ jsxs27("div", { className: "relative flex w-full items-stretch justify-between rounded-sm bg-subtle", children: [
-    /* @__PURE__ */ jsxs27("div", { className: cn("flex flex-1 items-center overflow-hidden py-4", compact ? "gap-2 px-2" : "gap-4 px-4"), children: [
-      icon && /* @__PURE__ */ jsx57("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-primary text-primary", children: icon }),
-      /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-2 whitespace-nowrap", children: [
-        /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-1", children: [
-          /* @__PURE__ */ jsx57("p", { className: "text-xs text-on-subtle", children: label }),
-          /* @__PURE__ */ jsxs27("p", { className: "leading-none", children: [
-            /* @__PURE__ */ jsx57("span", { className: "text-[20px] font-bold text-on-prominent", children: value }),
-            currency && /* @__PURE__ */ jsxs27(Fragment3, { children: [
-              " ",
-              /* @__PURE__ */ jsx57("span", { className: "text-sm text-on-subtle", children: currency })
-            ] })
+    (() => {
+      const boostBadge = /* @__PURE__ */ jsxs27(Badge, { variant: "fill-boost", size: "sm", className: "!gap-1 !font-medium !tracking-normal", children: [
+        /* @__PURE__ */ jsx57(Rocket, { className: "!size-3.5", strokeWidth: 2 }),
+        "Boost: ",
+        boostAmount,
+        " ",
+        boostCurrency,
+        boostInfo && /* @__PURE__ */ jsx57(TooltipProvider, { children: /* @__PURE__ */ jsxs27(Tooltip2, { children: [
+          /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
+            "button",
+            {
+              type: "button",
+              "aria-label": "More info about boost",
+              className: "inline-flex shrink-0 items-center justify-center rounded-full text-on-semantic-boost outline-none transition-opacity hover:opacity-70 focus-visible:opacity-70 focus-visible:ring-2 focus-visible:ring-on-semantic-boost/40 cursor-pointer",
+              children: /* @__PURE__ */ jsx57(Info, { className: "!size-3.5", strokeWidth: 2 })
+            }
+          ) }),
+          /* @__PURE__ */ jsx57(TooltipContent, { side: boostInfoSide, align: boostInfoAlign, title: boostInfoTitle, closeLabel: boostInfoCloseLabel, variant: "inverse", className: "max-w-xs whitespace-normal", children: boostInfo })
+        ] }) })
+      ] });
+      const labelValue = /* @__PURE__ */ jsxs27(Fragment3, { children: [
+        /* @__PURE__ */ jsx57("p", { className: "text-xs text-on-subtle", children: label }),
+        /* @__PURE__ */ jsxs27("p", { className: "leading-none", children: [
+          /* @__PURE__ */ jsx57("span", { className: "text-[20px] font-bold text-on-prominent", children: formatBalanceValue(value) }),
+          currency && /* @__PURE__ */ jsxs27(Fragment3, { children: [
+            " ",
+            /* @__PURE__ */ jsx57("span", { className: "text-sm text-on-subtle", children: currency })
           ] })
-        ] }),
-        /* @__PURE__ */ jsxs27(Badge, { variant: "fill-boost", size: "sm", className: "!gap-1 !font-medium !tracking-normal", children: [
-          /* @__PURE__ */ jsx57(Rocket, { className: "!size-3.5", strokeWidth: 2 }),
-          "Boost: ",
-          boostAmount,
-          " ",
-          boostCurrency,
-          boostInfo && /* @__PURE__ */ jsx57(TooltipProvider, { children: /* @__PURE__ */ jsxs27(Tooltip2, { children: [
-            /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
-              "button",
-              {
-                type: "button",
-                "aria-label": "More info about boost",
-                className: "inline-flex shrink-0 items-center justify-center rounded-full text-on-semantic-boost outline-none transition-opacity hover:opacity-70 focus-visible:opacity-70 focus-visible:ring-2 focus-visible:ring-on-semantic-boost/40 cursor-pointer",
-                children: /* @__PURE__ */ jsx57(Info, { className: "!size-3.5", strokeWidth: 2 })
-              }
-            ) }),
-            /* @__PURE__ */ jsx57(TooltipContent, { side: boostInfoSide, align: boostInfoAlign, variant: "inverse", className: "max-w-xs whitespace-normal", children: boostInfo })
-          ] }) })
         ] })
-      ] })
-    ] }),
+      ] });
+      return /* @__PURE__ */ jsxs27("div", { className: cn("flex flex-1 items-center overflow-hidden py-4", compact ? "gap-2 px-2" : "gap-4 px-4"), children: [
+        icon && /* @__PURE__ */ jsx57("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-primary text-primary", children: icon }),
+        compact ? (
+          /* Mobile / compact: badge stacked under the value */
+          /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-2 whitespace-nowrap", children: [
+            /* @__PURE__ */ jsx57("div", { className: "flex flex-col gap-1", children: labelValue }),
+            boostBadge
+          ] })
+        ) : (
+          /* Desktop: badge inline next to the value (16px gap = gap-4) */
+          /* @__PURE__ */ jsxs27("div", { className: "flex flex-col gap-1 whitespace-nowrap", children: [
+            /* @__PURE__ */ jsx57("p", { className: "text-xs text-on-subtle", children: label }),
+            /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-4", children: [
+              /* @__PURE__ */ jsxs27("p", { className: "leading-none", children: [
+                /* @__PURE__ */ jsx57("span", { className: "text-[20px] font-bold text-on-prominent", children: formatBalanceValue(value) }),
+                currency && /* @__PURE__ */ jsxs27(Fragment3, { children: [
+                  " ",
+                  /* @__PURE__ */ jsx57("span", { className: "text-sm text-on-subtle", children: currency })
+                ] })
+              ] }),
+              boostBadge
+            ] })
+          ] })
+        )
+      ] });
+    })(),
     /* @__PURE__ */ jsx57("div", { "aria-hidden": true, className: "pointer-events-none absolute right-[88px] top-[-12px] z-10 size-6 rounded-full bg-prominent" }),
     /* @__PURE__ */ jsx57("div", { "aria-hidden": true, className: "pointer-events-none absolute right-[88px] bottom-[-12px] z-10 size-6 rounded-full bg-prominent" }),
     /* @__PURE__ */ jsx57(