@trading-game/design-intelligence-layer 0.15.0 → 0.15.2

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`, `BoostTicketCard` |
+| Ticket Card | `TicketCard`, `CreditTicketCard` |
 | Toast | `Toaster` |
 | Toggle | `Toggle, toggleVariants` |
 | Toggle Group | `ToggleGroup, ToggleGroupItem` |
@@ -233,7 +233,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" />    // Orange tint
-<Badge variant="fill-boost" />      // Amber-orange tint — boost/bonus labels (pair with a Rocket icon)
+<Badge variant="fill-credit" />     // Amber-orange tint — credit/bonus labels
 
 // Outline (black border, secondary-hover on hover)
 <Badge variant="outline" />

package/dist/index.cjs

@@ -88,7 +88,6 @@ __export(index_exports, {
   AvatarGroupCount: () => AvatarGroupCount,
   AvatarImage: () => AvatarImage,
   Badge: () => Badge,
-  BoostTicketCard: () => BoostTicketCard,
   Breadcrumb: () => Breadcrumb,
   BreadcrumbEllipsis: () => BreadcrumbEllipsis,
   BreadcrumbItem: () => BreadcrumbItem,
@@ -160,6 +159,7 @@ __export(index_exports, {
   ContextMenuSubContent: () => ContextMenuSubContent,
   ContextMenuSubTrigger: () => ContextMenuSubTrigger,
   ContextMenuTrigger: () => ContextMenuTrigger,
+  CreditTicketCard: () => CreditTicketCard,
   Dialog: () => Dialog,
   DialogClose: () => DialogClose,
   DialogContent: () => DialogContent,
@@ -965,7 +965,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-boost": "bg-semantic-boost/16 border-transparent text-on-semantic-boost !text-xs !font-semibold",
+        "fill-credit": "bg-semantic-boost/16 border-transparent text-on-semantic-boost !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",
@@ -6741,7 +6741,7 @@ function TicketCard({
     )
   ] }) });
 }
-function BoostTicketCard({
+function CreditTicketCard({
   className,
   icon,
   label,
@@ -6750,37 +6750,37 @@ function BoostTicketCard({
   stubLabel,
   onStubClick,
   stubDisabled = false,
-  boostAmount = "0.00",
-  boostCurrency = "USDT",
-  boostInfo,
-  boostInfoSide = "top",
-  boostInfoAlign = "center",
-  boostInfoTitle,
-  boostInfoCloseLabel,
+  badgeIcon,
+  badgeLabel = "Label",
+  badgeValue = "0.00",
+  badgeCurrency = "USDT",
+  badgeInfo,
+  badgeInfoSide = "top",
+  badgeInfoAlign = "center",
+  badgeInfoTitle,
+  badgeInfoCloseLabel,
   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: [
     (() => {
-      const boostBadge = /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Badge, { variant: "fill-boost", size: "sm", className: "!gap-1 !font-medium !tracking-normal", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.Rocket, { className: "!size-3.5", strokeWidth: 2 }),
-        "Boost: ",
-        boostAmount,
-        " ",
-        boostCurrency,
-        boostInfo && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Tooltip2, { children: [
+      const badgeText = badgeValue || badgeCurrency ? `${badgeLabel}: ${badgeValue}${badgeCurrency ? ` ${badgeCurrency}` : ""}` : badgeLabel;
+      const creditBadge = /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Badge, { variant: "fill-credit", size: "sm", className: "!gap-1 !font-medium !tracking-normal", children: [
+        badgeIcon,
+        badgeText,
+        badgeInfo && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Tooltip2, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
             "button",
             {
               type: "button",
-              "aria-label": "More info about boost",
+              "aria-label": `More info about ${badgeLabel.toLowerCase()}`,
               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__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.Info, { className: "!size-3.5", strokeWidth: 2 })
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipContent, { side: boostInfoSide, align: boostInfoAlign, title: boostInfoTitle, closeLabel: boostInfoCloseLabel, variant: "inverse", className: "max-w-xs whitespace-normal", children: boostInfo })
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(TooltipContent, { side: badgeInfoSide, align: badgeInfoAlign, title: badgeInfoTitle, closeLabel: badgeInfoCloseLabel, variant: "inverse", className: "max-w-xs whitespace-normal", children: badgeInfo })
         ] }) })
       ] });
-      const labelValue = /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
+      const labelValue = /* @__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: formatBalanceValue(value) }),
@@ -6790,31 +6790,37 @@ function BoostTicketCard({
           ] })
         ] })
       ] });
-      return /* @__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 }),
-        compact ? (
-          /* Mobile / compact: badge stacked under the value */
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col gap-2 whitespace-nowrap", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex flex-col gap-1", children: labelValue }),
-            boostBadge
-          ] })
-        ) : (
-          /* Desktop: badge inline next to the value (16px gap = gap-4) */
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-col 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)("div", { className: "flex items-center gap-4", children: [
-              /* @__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: formatBalanceValue(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 })
-                ] })
-              ] }),
-              boostBadge
+      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+        "div",
+        {
+          className: cn(
+            "flex flex-1 overflow-hidden",
+            compact ? "flex-col gap-2 px-2 py-4" : "items-center gap-4 px-4 py-4"
+          ),
+          children: compact ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center gap-2", 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 }),
+              labelValue
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex", children: icon ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex w-10 shrink-0 justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "w-max", children: creditBadge }) }) : creditBadge })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { 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-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)("div", { className: "flex items-center gap-4", children: [
+                /* @__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: formatBalanceValue(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 })
+                  ] })
+                ] }),
+                creditBadge
+              ] })
             ] })
           ] })
-        )
-      ] });
+        }
+      );
     })(),
     /* @__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" }),
@@ -7499,7 +7505,6 @@ function DefaultEmptyState({ onViewHistory }) {
   AvatarGroupCount,
   AvatarImage,
   Badge,
-  BoostTicketCard,
   Breadcrumb,
   BreadcrumbEllipsis,
   BreadcrumbItem,
@@ -7571,6 +7576,7 @@ function DefaultEmptyState({ onViewHistory }) {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
+  CreditTicketCard,
   Dialog,
   DialogClose,
   DialogContent,