@trading-game/design-intelligence-layer 0.11.0 → 0.12.0

package/README.md

@@ -149,7 +149,7 @@ npm install react react-dom tailwindcss
 | Table | `Table, TableHeader, TableBody, TableRow, TableHead, TableCell` |
 | Tabs | `Tabs, TabsList, TabsTrigger, TabsContent` |
 | Textarea | `Textarea` |
-| Ticket Card | `TicketCard` |
+| Ticket Card | `TicketCard`, `CreditTicketCard` |
 | Toast | `Toaster` |
 | Toggle | `Toggle, toggleVariants` |
 | Toggle Group | `ToggleGroup, ToggleGroupItem` |
@@ -215,6 +215,8 @@ States: hover (`bg-secondary-hover`), focus (3px `ring-ring/50`), active (`opaci
 <Badge variant="fill" />            // Blue tint
 <Badge variant="fill-success" />    // Green tint
 <Badge variant="fill-fail" />       // Red tint
+<Badge variant="fill-warning" />    // Orange tint
+<Badge variant="fill-credit" />     // Amber-orange tint — credit/bonus labels (pair with TicketPlus icon)
 
 // Outline (black border, secondary-hover on hover)
 <Badge variant="outline" />
@@ -293,6 +295,7 @@ All tokens are CSS custom properties, loaded automatically via `@trading-game/de
 | `bg-secondary-hover` | `--secondary-hover` | `#EEEEEE` | Outline/secondary hover (light grey) |
 | `bg-semantic-win` | `--semantic-win` | green | Profit / positive state |
 | `bg-semantic-loss` | `--semantic-loss` | red | Loss / negative state |
+| `bg-semantic-credit` | `--semantic-credit` | `#F9840F` amber-orange | Credit / bonus badge background |
 
 ### Text tokens
 
@@ -306,6 +309,7 @@ All tokens are CSS custom properties, loaded automatically via `@trading-game/de
 | `text-primary` | `#2323FF` | Brand blue inline text |
 | `text-semantic-win` | green | Profit / positive text |
 | `text-semantic-loss` | red | Loss / negative text |
+| `text-semantic-credit-text` | `#713813` dark amber | Credit / bonus badge foreground |
 
 ### Border & focus tokens
 
@@ -577,6 +581,14 @@ Design tokens are managed in Figma and exported as CSS variables. To update:
 
 ## Changelog
 
+### v0.12.0
+- **New semantic tokens — credit:** `--semantic-credit` (`#F9840F` amber-orange) and `--semantic-credit-text` (`#713813` dark amber) added to both `src/styles.css` and `app/globals.css`. Tailwind utilities: `bg-semantic-credit`, `text-semantic-credit-text`.
+- **Badge — `fill-credit` variant:** New `fill-credit` variant for credit/bonus labels — `bg-semantic-credit/16` background with `text-semantic-credit-text` foreground. Pair with a `TicketPlus` icon. Badge base class no longer applies `tracking-wide`; letter spacing is default on all badge variants.
+- **New `CreditTicketCard` component:** Exported alongside `TicketCard`. Renders the same ticket shell (notches, tear-line, shimmer stub) but with a variable-height card body and an inline `<Badge variant="fill-credit">` below the value for credit/bonus display. Props: `icon`, `label`, `value`, `currency`, `stubLabel`, `onStubClick`, `stubDisabled`, `creditAmount` (default `"0.00"`), `creditCurrency` (default `"USDT"`), `compact`.
+- **`TicketCard` — `compact` prop:** New boolean prop (default `false`). When `true`, reduces left-content padding from `px-4 gap-4` to `px-2 gap-2` for mobile layouts.
+- **`TicketCard` — welcome-credit props removed:** `welcomeCredit`, `freeCredit` (deprecated alias), `creditUsed`, `creditTotal`, `creditCurrency`, `creditLabel`, `creditFullWidth`, and the `Progress`-based credit bar have been removed. Use `CreditTicketCard` for the credit use case.
+- **`tracking-wide` / `tracking-widest` removed from several components:** Badge base class, `Link` base class, `PaginationLink`, `CommandShortcut`, `ContextMenuShortcut`, `DropdownMenuShortcut`, and `MenubarShortcut` no longer apply letter-spacing overrides. All render with default tracking.
+
 ### v0.10.1
 - **TicketCard — Wallet icon:** Default icon in the circular badge is now a `Wallet` icon (replaces `CircleDollarSign`).
 - **TicketCard — sentence case labels:** The label above the value (e.g. "Total balance") and the stub label (e.g. "Deposit") no longer apply `uppercase` or `tracking-widest`. Both render in sentence case with default letter spacing.

package/dist/index.cjs

@@ -158,6 +158,7 @@ __export(index_exports, {
   ContextMenuSubContent: () => ContextMenuSubContent,
   ContextMenuSubTrigger: () => ContextMenuSubTrigger,
   ContextMenuTrigger: () => ContextMenuTrigger,
+  CreditTicketCard: () => CreditTicketCard,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
   DialogContent: () => DialogContent,
@@ -356,6 +357,7 @@ __export(index_exports, {
   TabsTrigger: () => TabsTrigger,
   Textarea: () => Textarea,
   TicketCard: () => TicketCard,
+  TicketCardDesktop: () => TicketCardDesktop,
   Toaster: () => Toaster,
   Toggle: () => Toggle,
   ToggleGroup: () => ToggleGroup,
@@ -934,7 +936,7 @@ var import_class_variance_authority3 = require("class-variance-authority");
 var import_radix_ui6 = require("radix-ui");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority3.cva)(
-  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent text-xs font-display font-semibold tracking-wide whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:pointer-events-none [&>svg]:size-3",
+  "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent text-xs font-display font-semibold whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:pointer-events-none [&>svg]:size-3",
   {
     variants: {
       variant: {
@@ -948,6 +950,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-credit/16 border-transparent text-semantic-credit-text !text-xs !font-semibold",
         // Ghost (transparent)
         ghost: "bg-transparent border-transparent text-primary [a&]:hover:bg-secondary-hover [a&]:hover:text-primary",
         "ghost-success": "bg-transparent border-transparent text-semantic-win [a&]:hover:bg-semantic-win/10 [a&]:hover:text-semantic-win",
@@ -2743,7 +2746,7 @@ function CommandShortcut(_a) {
     __spreadValues({
       "data-slot": "command-shortcut",
       className: cn(
-        "ml-auto text-xs tracking-widest text-on-subtle",
+        "ml-auto text-xs text-on-subtle",
         className
       )
     }, props)
@@ -2963,7 +2966,7 @@ function ContextMenuShortcut(_a) {
     __spreadValues({
       "data-slot": "context-menu-shortcut",
       className: cn(
-        "ml-auto text-xs tracking-widest text-on-subtle",
+        "ml-auto text-xs text-on-subtle",
         className
       )
     }, props)
@@ -3274,7 +3277,7 @@ function DropdownMenuShortcut(_a) {
     __spreadValues({
       "data-slot": "dropdown-menu-shortcut",
       className: cn(
-        "ml-auto text-xs tracking-widest text-on-subtle",
+        "ml-auto text-xs text-on-subtle",
         className
       )
     }, props)
@@ -4130,7 +4133,7 @@ var import_class_variance_authority9 = require("class-variance-authority");
 var import_radix_ui19 = require("radix-ui");
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var linkVariants = (0, import_class_variance_authority9.cva)(
-  "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:inline font-display font-bold normal-case tracking-wide text-primary hover:underline decoration-2 underline-offset-4",
+  "inline-flex shrink-0 items-center gap-1.5 whitespace-nowrap transition-all outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 active:opacity-60 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:inline font-display font-bold normal-case text-primary hover:underline decoration-2 underline-offset-4",
   {
     variants: {
       size: {
@@ -4364,7 +4367,7 @@ function MenubarShortcut(_a) {
     __spreadValues({
       "data-slot": "menubar-shortcut",
       className: cn(
-        "ml-auto text-xs tracking-widest text-on-subtle",
+        "ml-auto text-xs text-on-subtle",
         className
       )
     }, props)
@@ -4748,7 +4751,7 @@ function PaginationLink(_a) {
       "data-slot": "pagination-link",
       "data-active": isActive,
       className: cn(
-        "inline-flex shrink-0 items-center justify-center size-10 rounded-xs text-sm font-display font-bold uppercase tracking-wide whitespace-nowrap transition-[color,background-color,border-color] outline-none border",
+        "inline-flex shrink-0 items-center justify-center size-10 rounded-xs text-sm font-display font-bold uppercase whitespace-nowrap transition-[color,background-color,border-color] outline-none border",
         isActive ? "bg-primary/10 border-primary text-primary" : "bg-transparent border-transparent text-on-prominent hover:bg-secondary-hover",
         className
       )
@@ -6606,92 +6609,155 @@ function TabsContent(_a) {
 var import_lucide_react23 = require("lucide-react");
 var import_jsx_runtime57 = require("react/jsx-runtime");
 function TicketCard({
+  className,
   icon,
   label,
   value,
-  stubIcon,
+  currency,
   stubLabel,
   onStubClick,
   stubDisabled = false,
-  className
+  compact = false
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-    "div",
-    {
-      "data-slot": "ticket-card",
-      className: cn(
-        "relative flex w-full items-stretch rounded-sm",
-        "bg-subtle",
-        className
-      ),
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "relative flex min-w-0 flex-1 items-center gap-3 px-4 py-4 sm:gap-4 sm:px-5", children: [
-          icon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex shrink-0 size-11 rounded-full border-2 border-primary items-center justify-center text-primary sm:size-12", children: icon }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5 overflow-hidden", children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-on-subtle text-xs font-semibold", children: label }),
-            value && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "truncate text-lg font-bold text-on-prominent sm:text-xl", children: value })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-            "div",
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: cn("flex w-full flex-col gap-2", className), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "relative flex h-20 w-full items-stretch justify-between rounded-sm bg-subtle", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn("flex flex-1 items-center overflow-hidden", compact ? "gap-2 px-2" : "gap-4 px-4"), children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-primary text-primary", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex h-11 flex-col justify-center gap-1 whitespace-nowrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-xs text-on-subtle", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("p", { className: "leading-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-[20px] font-bold text-on-prominent", children: value }),
+          currency && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm text-on-subtle", children: currency })
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { "aria-hidden": true, className: "pointer-events-none absolute right-[88px] top-[-12px] z-10 size-6 rounded-full bg-prominent" }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { "aria-hidden": true, className: "pointer-events-none absolute right-[88px] top-[68px] z-10 size-6 rounded-full bg-prominent" }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute bottom-[12px] top-[12px] z-10 w-1 -translate-x-1/2",
+        style: {
+          right: 96,
+          backgroundImage: "repeating-linear-gradient(to bottom, color-mix(in oklch, var(--border-subtle) 80%, black) 0px, color-mix(in oklch, var(--border-subtle) 80%, black) 3px, transparent 3px, transparent 6px)"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: onStubClick,
+        disabled: stubDisabled,
+        "aria-label": stubLabel,
+        className: cn(
+          "relative flex h-20 w-[100px] shrink-0 flex-col items-center justify-center gap-1 overflow-hidden rounded-r-sm bg-primary",
+          "transition-colors duration-fast ease-standard",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          stubDisabled ? "cursor-not-allowed opacity-50" : "hover:bg-primary-hover"
+        ),
+        children: [
+          !stubDisabled && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            "span",
             {
               "aria-hidden": true,
-              className: "pointer-events-none absolute right-0 top-0 z-10 size-5 -translate-y-1/2 translate-x-1/2 rounded-full bg-prominent"
+              className: "pointer-events-none absolute inset-0 [animation:stub-shimmer_1.5s_linear_infinite]",
+              style: {
+                background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.30) 50%, transparent 100%)"
+              }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-            "div",
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.ArrowRight, { className: "size-4 text-on-prominent-static-inverse" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-semibold text-on-prominent-static-inverse", children: stubLabel })
+        ]
+      }
+    )
+  ] }) });
+}
+function CreditTicketCard({
+  className,
+  icon,
+  label,
+  value,
+  currency,
+  stubLabel,
+  onStubClick,
+  stubDisabled = false,
+  creditAmount = "0.00",
+  creditCurrency = "USDT",
+  compact = false
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: cn("flex w-full flex-col gap-2", className), children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "relative flex w-full items-stretch justify-between rounded-sm bg-subtle", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn("flex flex-1 items-center overflow-hidden py-4", compact ? "gap-2 px-2" : "gap-4 px-4"), children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-primary text-primary", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-2 whitespace-nowrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "text-xs text-on-subtle", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("p", { className: "leading-none", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-[20px] font-bold text-on-prominent", children: value }),
+            currency && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm text-on-subtle", children: currency })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Badge, { variant: "fill-credit", size: "sm", className: "!gap-1 !font-bold !tracking-normal", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.TicketPlus, { className: "!size-3.5" }),
+          "Credit: ",
+          creditAmount,
+          " ",
+          creditCurrency
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { "aria-hidden": true, className: "pointer-events-none absolute right-[88px] top-[-12px] z-10 size-6 rounded-full bg-prominent" }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { "aria-hidden": true, className: "pointer-events-none absolute right-[88px] bottom-[-12px] z-10 size-6 rounded-full bg-prominent" }),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+      "div",
+      {
+        "aria-hidden": true,
+        className: "pointer-events-none absolute bottom-[12px] top-[12px] z-10 w-1 -translate-x-1/2",
+        style: {
+          right: 96,
+          backgroundImage: "repeating-linear-gradient(to bottom, color-mix(in oklch, var(--border-subtle) 80%, black) 0px, color-mix(in oklch, var(--border-subtle) 80%, black) 3px, transparent 3px, transparent 6px)"
+        }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
+      "button",
+      {
+        type: "button",
+        onClick: onStubClick,
+        disabled: stubDisabled,
+        "aria-label": stubLabel,
+        className: cn(
+          "relative flex w-[100px] shrink-0 self-stretch flex-col items-center justify-center gap-1 overflow-hidden rounded-r-sm bg-primary",
+          "transition-colors duration-fast ease-standard",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          stubDisabled ? "cursor-not-allowed opacity-50" : "hover:bg-primary-hover"
+        ),
+        children: [
+          !stubDisabled && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+            "span",
             {
               "aria-hidden": true,
-              className: "pointer-events-none absolute bottom-0 right-0 z-10 size-5 translate-x-1/2 translate-y-1/2 rounded-full bg-prominent"
+              className: "pointer-events-none absolute inset-0 [animation:stub-shimmer_1.5s_linear_infinite]",
+              style: {
+                background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.30) 50%, transparent 100%)"
+              }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-            "div",
-            {
-              "aria-hidden": true,
-              className: "pointer-events-none absolute bottom-4 right-0 top-4 -translate-x-1/2 border-l-2 border-dashed border-primary/30"
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          "div",
-          {
-            className: cn(
-              "relative z-[1] inline-flex max-w-[72%] shrink-0 self-stretch sm:max-w-[44%]"
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
-              "button",
-              {
-                type: "button",
-                onClick: stubDisabled ? void 0 : onStubClick,
-                disabled: stubDisabled,
-                className: cn(
-                  "relative box-border inline-flex h-full min-h-[3.25rem] min-w-[5.75rem] flex-col items-center justify-center gap-1.5 rounded-r-sm px-4 py-3 transition-colors sm:min-h-0 sm:gap-1.5 sm:px-5",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                  stubDisabled ? "bg-primary/30 cursor-not-allowed opacity-50 pointer-events-none" : "bg-primary cursor-pointer hover:bg-primary-hover"
-                ),
-                children: [
-                  !stubDisabled && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-                    "span",
-                    {
-                      "aria-hidden": true,
-                      className: "absolute inset-0 pointer-events-none [animation:stub-shimmer_1.5s_linear_infinite]",
-                      style: {
-                        background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.30) 50%, transparent 100%)"
-                      }
-                    }
-                  ),
-                  stubIcon != null ? stubIcon : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.ArrowRight, { className: "relative size-5 shrink-0 text-on-prominent-static-inverse" }),
-                  stubLabel && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "max-w-full text-balance text-center text-xs font-bold leading-tight tracking-wide text-on-prominent-static-inverse sm:tracking-widest", children: stubLabel })
-                ]
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.ArrowRight, { className: "size-4 text-on-prominent-static-inverse" }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-sm font-semibold text-on-prominent-static-inverse", children: stubLabel })
+        ]
+      }
+    )
+  ] }) });
 }
+var TicketCardDesktop = TicketCard;
 
 // components/ui/toggle.tsx
 var import_class_variance_authority14 = require("class-variance-authority");
@@ -6910,6 +6976,7 @@ function ToggleGroupItem(_a) {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  CreditTicketCard,
   Dialog,
   DialogClose,
   DialogContent,
@@ -7108,6 +7175,7 @@ function ToggleGroupItem(_a) {
   TabsTrigger,
   Textarea,
   TicketCard,
+  TicketCardDesktop,
   Toaster,
   Toggle,
   ToggleGroup,