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

package/dist/index.js

@@ -6424,13 +6424,10 @@ function CreditTicketCard({
 }) {
   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: [
     (() => {
+      const badgeText = badgeValue || badgeCurrency ? `${badgeLabel}: ${badgeValue}${badgeCurrency ? ` ${badgeCurrency}` : ""}` : badgeLabel;
       const creditBadge = /* @__PURE__ */ jsxs27(Badge, { variant: "fill-credit", size: "sm", className: "!gap-1 !font-medium !tracking-normal", children: [
         badgeIcon,
-        badgeLabel,
-        ": ",
-        badgeValue,
-        " ",
-        badgeCurrency,
+        badgeText,
         badgeInfo && /* @__PURE__ */ jsx57(TooltipProvider, { children: /* @__PURE__ */ jsxs27(Tooltip2, { children: [
           /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
             "button",
@@ -6444,7 +6441,7 @@ function CreditTicketCard({
           /* @__PURE__ */ jsx57(TooltipContent, { side: badgeInfoSide, align: badgeInfoAlign, title: badgeInfoTitle, closeLabel: badgeInfoCloseLabel, variant: "inverse", className: "max-w-xs whitespace-normal", children: badgeInfo })
         ] }) })
       ] });
-      const labelValue = /* @__PURE__ */ jsxs27(Fragment3, { children: [
+      const labelValue = /* @__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: formatBalanceValue(value) }),
@@ -6454,31 +6451,37 @@ function CreditTicketCard({
           ] })
         ] })
       ] });
-      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 }),
-            creditBadge
-          ] })
-        ) : (
-          /* 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 })
-                ] })
-              ] }),
-              creditBadge
+      return /* @__PURE__ */ jsx57(
+        "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__ */ jsxs27("div", { className: "flex flex-1 flex-col gap-2", children: [
+            /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", 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 }),
+              labelValue
+            ] }),
+            /* @__PURE__ */ jsx57("div", { className: "flex", children: icon ? /* @__PURE__ */ jsx57("div", { className: "flex w-10 shrink-0 justify-start", children: /* @__PURE__ */ jsx57("div", { className: "w-max", children: creditBadge }) }) : creditBadge })
+          ] }) : /* @__PURE__ */ jsxs27(Fragment3, { 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-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 })
+                  ] })
+                ] }),
+                creditBadge
+              ] })
             ] })
           ] })
-        )
-      ] });
+        }
+      );
     })(),
     /* @__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" }),