@trading-game/design-intelligence-layer 0.16.5 → 0.16.7

package/dist/index.js

@@ -771,7 +771,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-semibold",
+        "fill-credit": "bg-semantic-boost-surface border-transparent text-on-semantic-boost !text-xs !font-bold",
         // 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.
@@ -823,7 +823,7 @@ 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";
 function IconBadge({ 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 });
+  return /* @__PURE__ */ jsx9("span", { className: "inline-flex size-10 shrink-0 items-center justify-center rounded-full bg-primary text-on-primary", children: glyph });
 }
 function Banner(_a) {
   var _b = _a, {
@@ -6753,7 +6753,7 @@ function CreditTicketCard({
   return /* @__PURE__ */ jsx58("div", { className: cn("flex w-full flex-col gap-2", className), children: /* @__PURE__ */ jsxs29("div", { className: "relative flex w-full items-stretch justify-between rounded-sm bg-subtle", children: [
     (() => {
       const badgeText = badgeValue ? `${badgeValue}${badgeCurrency ? ` ${badgeCurrency}` : ""}` : badgeLabel;
-      const creditBadge = /* @__PURE__ */ jsxs29(Badge, { variant: "fill-credit", size: "sm", className: "!gap-1 !font-medium !tracking-normal", children: [
+      const creditBadge = /* @__PURE__ */ jsxs29(Badge, { variant: "fill-credit", size: "sm", className: "!gap-1 !tracking-normal", children: [
         badgeIcon,
         badgeText,
         badgeInfo && /* @__PURE__ */ jsx58(TooltipProvider, { children: /* @__PURE__ */ jsxs29(Tooltip2, { children: [
@@ -6769,39 +6769,39 @@ function CreditTicketCard({
           /* @__PURE__ */ jsx58(TooltipContent, { side: badgeInfoSide, align: badgeInfoAlign, title: badgeInfoTitle, closeLabel: badgeInfoCloseLabel, variant: "inverse", className: "max-w-xs whitespace-normal", children: badgeInfo })
         ] }) })
       ] });
-      const valueText = /* @__PURE__ */ jsxs29("p", { className: "leading-none", children: [
+      const valueText = /* @__PURE__ */ jsxs29("p", { className: "leading-none whitespace-nowrap", children: [
         /* @__PURE__ */ jsx58("span", { className: "text-[20px] font-bold text-on-prominent", children: formatBalanceValue(value) }),
         currency && /* @__PURE__ */ jsxs29(Fragment5, { children: [
           " ",
           /* @__PURE__ */ jsx58("span", { className: "text-sm text-on-subtle", children: currency })
         ] })
       ] });
-      return /* @__PURE__ */ jsx58(
+      return /* @__PURE__ */ jsxs29(
         "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"
+            "flex flex-1 items-center overflow-hidden",
+            compact ? "gap-2 px-2 py-4" : "gap-4 px-4 py-4"
           ),
-          children: compact ? /* @__PURE__ */ jsxs29(Fragment5, { children: [
-            /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
-              icon && /* @__PURE__ */ jsx58("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-primary text-primary", children: icon }),
-              /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-1 whitespace-nowrap", children: [
-                /* @__PURE__ */ jsx58("p", { className: "text-xs text-on-subtle", children: label }),
-                valueText
-              ] })
-            ] }),
-            /* @__PURE__ */ jsx58("div", { className: cn("flex", icon && "pl-12"), children: creditBadge })
-          ] }) : /* @__PURE__ */ jsxs29(Fragment5, { children: [
+          children: [
             icon && /* @__PURE__ */ jsx58("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-full border-2 border-primary text-primary", children: icon }),
-            /* @__PURE__ */ jsxs29("div", { className: "flex flex-col gap-1 whitespace-nowrap", children: [
-              /* @__PURE__ */ jsx58("p", { className: "text-xs text-on-subtle", children: label }),
-              /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-4", children: [
-                valueText,
-                creditBadge
-              ] })
+            /* @__PURE__ */ jsxs29("div", { className: "flex min-w-0 flex-col gap-1", children: [
+              /* @__PURE__ */ jsx58("p", { className: "text-xs text-on-subtle whitespace-nowrap", children: label }),
+              /* @__PURE__ */ jsxs29(
+                "div",
+                {
+                  className: cn(
+                    "flex items-center",
+                    compact ? "flex-wrap gap-x-2 gap-y-1" : "gap-4"
+                  ),
+                  children: [
+                    valueText,
+                    creditBadge
+                  ]
+                }
+              )
             ] })
-          ] })
+          ]
         }
       );
     })(),