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

package/dist/index.cjs

@@ -356,6 +356,7 @@ __export(index_exports, {
   TabsTrigger: () => TabsTrigger,
   Textarea: () => Textarea,
   TicketCard: () => TicketCard,
+  TicketCardDesktop: () => TicketCardDesktop,
   Toaster: () => Toaster,
   Toggle: () => Toggle,
   ToggleGroup: () => ToggleGroup,
@@ -6606,92 +6607,111 @@ 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
+  welcomeCredit,
+  freeCredit,
+  creditUsed = "10.00",
+  creditTotal = "10.00",
+  creditCurrency = "USDT",
+  creditLabel = "Welcome credit",
+  creditFullWidth = 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
+  var _a;
+  const showCredit = (_a = welcomeCredit != null ? welcomeCredit : freeCredit) != null ? _a : false;
+  const creditPct = Math.min(
+    100,
+    Math.max(0, parseFloat(creditUsed) / parseFloat(creditTotal) * 100)
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("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: "flex flex-1 items-center gap-4 overflow-hidden 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)"
+          }
+        }
       ),
-      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",
-            {
-              "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"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-            "div",
-            {
-              "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"
-            }
+      /* @__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"
           ),
-          /* @__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"
-            }
-          )
+          children: [
+            !stubDisabled && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+              "span",
+              {
+                "aria-hidden": true,
+                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)(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 })
+          ]
+        }
+      )
+    ] }),
+    showCredit && /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cn(
+      "flex items-center gap-2 rounded-sm bg-subtle p-2",
+      creditFullWidth ? "w-full" : "w-[calc(100%-112px)]"
+    ), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.TicketPlus, { className: "size-6 shrink-0", style: { color: "#713813" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex items-center justify-between whitespace-nowrap text-[10px] font-semibold", style: { color: "#713813" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { children: creditLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "text-on-prominent", children: creditUsed }),
+            ` / ${creditTotal} ${creditCurrency}`
+          ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
-          "div",
+          Progress,
           {
-            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 })
-                ]
-              }
-            )
+            value: creditPct,
+            className: "h-1 bg-black/8 [&>[data-slot=progress-indicator]]:bg-[#ef9f00]"
           }
         )
-      ]
-    }
-  );
+      ] })
+    ] })
+  ] });
 }
+var TicketCardDesktop = TicketCard;
 
 // components/ui/toggle.tsx
 var import_class_variance_authority14 = require("class-variance-authority");
@@ -7108,6 +7128,7 @@ function ToggleGroupItem(_a) {
   TabsTrigger,
   Textarea,
   TicketCard,
+  TicketCardDesktop,
   Toaster,
   Toggle,
   ToggleGroup,