@trading-game/design-intelligence-layer 0.12.4 → 0.13.1

package/dist/index.js

@@ -227,12 +227,12 @@ var buttonVariants = cva2(
     variants: {
       variant: {
         // Primary brand blue (#2323FF)
-        primary: "bg-primary text-on-prominent-static-inverse hover:bg-primary-hover",
+        primary: "bg-primary text-on-primary hover:bg-primary-hover",
         // Primary Inverse — white bg + blue text; for use on dark/coloured surfaces
-        "primary-inverse": "bg-on-prominent-static-inverse text-primary hover:bg-on-prominent-static-inverse/80",
+        "primary-inverse": "bg-primary-inverse text-on-primary-inverse hover:bg-primary-inverse/80",
         secondary: "bg-transparent border-[1.5px] border-border-prominent text-on-prominent hover:bg-secondary-hover",
         // Secondary Inverse — white border + white text; for use on dark/coloured surfaces
-        "secondary-inverse": "bg-transparent border-[1.5px] border-on-prominent-static-inverse text-on-prominent-static-inverse hover:bg-on-prominent-static-inverse/10",
+        "secondary-inverse": "bg-transparent border-[1.5px] border-primary-inverse text-on-prominent-inverse hover:bg-primary-inverse/10",
         tertiary: "bg-transparent text-primary hover:bg-primary/[0.08]"
       },
       size: {
@@ -542,7 +542,7 @@ function AvatarBadge(_a) {
     __spreadValues({
       "data-slot": "avatar-badge",
       className: cn(
-        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-on-prominent-static-inverse ring-2 ring-prominent select-none",
+        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-on-primary ring-2 ring-prominent select-none",
         "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
         "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
         "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
@@ -593,16 +593,16 @@ var badgeVariants = cva3(
     variants: {
       variant: {
         // Default (solid)
-        default: "bg-primary text-on-prominent-static-inverse [a&]:hover:bg-primary/90",
-        "default-success": "bg-semantic-win text-on-prominent-static-inverse [a&]:hover:bg-semantic-win/90",
-        "default-fail": "bg-semantic-loss text-on-prominent-static-inverse [a&]:hover:bg-semantic-loss/90",
-        "default-warning": "bg-semantic-warning text-on-prominent-static-inverse [a&]:hover:bg-semantic-warning/90",
+        default: "bg-primary text-on-primary [a&]:hover:bg-primary/90",
+        "default-success": "bg-semantic-win text-on-semantic-win [a&]:hover:bg-semantic-win/90",
+        "default-fail": "bg-semantic-loss text-on-semantic-loss [a&]:hover:bg-semantic-loss/90",
+        "default-warning": "bg-semantic-warning text-on-semantic-warning [a&]:hover:bg-semantic-warning/90",
         // Fill (tint)
         fill: "bg-primary/10 border-transparent text-primary",
         "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",
+        "fill-boost": "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",
@@ -1491,7 +1491,7 @@ function Checkbox(_a) {
     __spreadProps(__spreadValues({
       "data-slot": "checkbox",
       className: cn(
-        "peer size-4 shrink-0 rounded-[2px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-on-prominent-static-inverse",
+        "peer size-4 shrink-0 rounded-[2px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-on-primary",
         className
       )
     }, props), {
@@ -1549,7 +1549,7 @@ var inputVariants = cva4(
   [
     "w-full min-w-0 rounded-sm border border-border-subtle bg-white/5",
     "text-on-prominent font-body shadow-xs transition-[color,box-shadow] outline-none",
-    "selection:bg-primary selection:text-on-prominent-static-inverse",
+    "selection:bg-primary selection:text-on-primary",
     "file:inline-flex file:border-0 file:bg-transparent file:font-medium file:text-on-prominent",
     "placeholder:text-on-subtle",
     "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
@@ -4109,7 +4109,7 @@ function NativeSelect(_a) {
             "data-slot": "native-select",
             "data-size": size,
             className: cn(
-              "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-on-prominent-static-inverse placeholder:text-on-subtle disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
+              "h-9 w-full min-w-0 appearance-none rounded-md border border-input bg-transparent px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-on-primary placeholder:text-on-subtle disabled:pointer-events-none disabled:cursor-not-allowed data-[size=sm]:h-8 data-[size=sm]:py-1",
               "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
               className
             )
@@ -5034,7 +5034,7 @@ function SheetDescription(_a) {
 }
 
 // components/ui/sidebar.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import { cva as cva12 } from "class-variance-authority";
 import { PanelLeftIcon } from "lucide-react";
 import { Slot as Slot8 } from "radix-ui";
@@ -5070,8 +5070,10 @@ function Skeleton(_a) {
 }
 
 // components/ui/tooltip.tsx
+import * as React9 from "react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
 import { jsx as jsx49, jsxs as jsxs23 } from "react/jsx-runtime";
+var TooltipModeContext = React9.createContext("tooltip");
 function TooltipProvider(_a) {
   var _b = _a, {
     delayDuration = 0
@@ -5087,36 +5089,71 @@ function TooltipProvider(_a) {
   );
 }
 function Tooltip2(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx49(TooltipPrimitive.Root, __spreadValues({ "data-slot": "tooltip" }, props));
+  var _b = _a, {
+    children
+  } = _b, props = __objRest(_b, [
+    "children"
+  ]);
+  const isMobile = useIsMobile();
+  const mode = isMobile ? "drawer" : "tooltip";
+  if (mode === "drawer") {
+    return /* @__PURE__ */ jsx49(TooltipModeContext.Provider, { value: "drawer", children: /* @__PURE__ */ jsx49(Drawer, { children }) });
+  }
+  return /* @__PURE__ */ jsx49(TooltipModeContext.Provider, { value: "tooltip", children: /* @__PURE__ */ jsx49(TooltipPrimitive.Root, __spreadProps(__spreadValues({ "data-slot": "tooltip" }, props), { children })) });
 }
 function TooltipTrigger(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ jsx49(TooltipPrimitive.Trigger, __spreadValues({ "data-slot": "tooltip-trigger" }, props));
+  var _b = _a, {
+    children
+  } = _b, props = __objRest(_b, [
+    "children"
+  ]);
+  const mode = React9.useContext(TooltipModeContext);
+  if (mode === "drawer") {
+    return /* @__PURE__ */ jsx49(DrawerTrigger, __spreadProps(__spreadValues({ "data-slot": "tooltip-trigger" }, props), { children }));
+  }
+  return /* @__PURE__ */ jsx49(TooltipPrimitive.Trigger, __spreadProps(__spreadValues({ "data-slot": "tooltip-trigger" }, props), { children }));
 }
 function TooltipContent(_a) {
   var _b = _a, {
     className,
     sideOffset = 6,
+    variant = "default",
+    title = "Title",
+    closeLabel = "Label",
     children
   } = _b, props = __objRest(_b, [
     "className",
     "sideOffset",
+    "variant",
+    "title",
+    "closeLabel",
     "children"
   ]);
+  const mode = React9.useContext(TooltipModeContext);
+  if (mode === "drawer") {
+    return /* @__PURE__ */ jsxs23(DrawerContent, { "data-slot": "tooltip-content", "data-variant": variant, children: [
+      /* @__PURE__ */ jsx49(DrawerTitle, { className: "px-5 pt-2 text-left text-base font-bold text-on-prominent", children: title }),
+      /* @__PURE__ */ jsx49("div", { className: cn("px-5 pt-2 pb-2 text-sm font-medium text-on-prominent", className), children }),
+      /* @__PURE__ */ jsx49(DrawerFooter, { children: /* @__PURE__ */ jsx49(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx49(Button, { variant: "primary", size: "md", children: closeLabel }) }) })
+    ] });
+  }
+  const surfaceClasses = variant === "inverse" ? "bg-prominent text-on-prominent shadow-sm" : "bg-primary text-on-primary";
+  const arrowClasses = variant === "inverse" ? "fill-prominent" : "fill-primary";
   return /* @__PURE__ */ jsx49(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs23(
     TooltipPrimitive.Content,
     __spreadProps(__spreadValues({
       "data-slot": "tooltip-content",
+      "data-variant": variant,
       sideOffset,
       className: cn(
-        "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-primary border-0 px-3 py-1.5 text-xs font-medium text-balance text-on-prominent-static-inverse fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        "z-50 w-fit origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md border-0 px-3 py-1.5 text-sm font-medium text-balance fade-in-0 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        surfaceClasses,
         className
       )
     }, props), {
       children: [
         children,
-        /* @__PURE__ */ jsx49(TooltipPrimitive.Arrow, { className: "fill-primary" })
+        /* @__PURE__ */ jsx49(TooltipPrimitive.Arrow, { className: arrowClasses })
       ]
     })
   ) });
@@ -5130,9 +5167,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React9.createContext(null);
+var SidebarContext = React10.createContext(null);
 function useSidebar() {
-  const context = React9.useContext(SidebarContext);
+  const context = React10.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -5155,10 +5192,10 @@ function SidebarProvider(_a) {
     "children"
   ]);
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React9.useState(false);
-  const [_open, _setOpen] = React9.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React10.useState(false);
+  const [_open, _setOpen] = React10.useState(defaultOpen);
   const open = openProp != null ? openProp : _open;
-  const setOpen = React9.useCallback(
+  const setOpen = React10.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -5170,10 +5207,10 @@ function SidebarProvider(_a) {
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React9.useCallback(() => {
+  const toggleSidebar = React10.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React9.useEffect(() => {
+  React10.useEffect(() => {
     const handleKeyDown = (event) => {
       if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
         event.preventDefault();
@@ -5184,7 +5221,7 @@ function SidebarProvider(_a) {
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React9.useMemo(
+  const contextValue = React10.useMemo(
     () => ({
       state,
       open,
@@ -5762,7 +5799,7 @@ function SidebarMenuSubButton(_a) {
 }
 
 // components/ui/slider.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { Slider as SliderPrimitive } from "radix-ui";
 import { jsx as jsx51, jsxs as jsxs25 } from "react/jsx-runtime";
 function Slider(_a) {
@@ -5779,7 +5816,7 @@ function Slider(_a) {
     "min",
     "max"
   ]);
-  const _values = React10.useMemo(
+  const _values = React11.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -5828,7 +5865,7 @@ function Slider(_a) {
   );
 }
 
-// components/ui/sonner.tsx
+// components/ui/toast.tsx
 import {
   CircleCheckIcon,
   InfoIcon,
@@ -5837,7 +5874,7 @@ import {
   TriangleAlertIcon
 } from "lucide-react";
 import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner";
+import { Toaster as Sonner, toast } from "sonner";
 import { jsx as jsx52 } from "react/jsx-runtime";
 var Toaster = (_a) => {
   var props = __objRest(_a, []);
@@ -5860,15 +5897,15 @@ var Toaster = (_a) => {
       },
       toastOptions: {
         classNames: {
-          toast: "!bg-[var(--on-prominent)] !border-none",
-          title: "!text-[var(--on-prominent-static-inverse)] !font-display !font-bold",
-          description: "!text-[var(--on-prominent-static-inverse)] !opacity-60 !font-body",
-          actionButton: "!bg-[var(--primary)] !text-[var(--on-prominent-static-inverse)]"
+          toast: "!bg-[var(--prominent-inverse)] !border-none",
+          title: "!text-[var(--on-prominent-inverse)] !font-display !font-bold",
+          description: "!text-[var(--on-prominent-inverse)] !opacity-60 !font-body",
+          actionButton: "!bg-[var(--primary-inverse)] !text-[var(--on-primary-inverse)]"
         }
       },
       style: {
-        "--normal-bg": "var(--on-prominent)",
-        "--normal-text": "var(--on-prominent-static-inverse)",
+        "--normal-bg": "var(--prominent-inverse)",
+        "--normal-text": "var(--on-prominent-inverse)",
         "--normal-border": "transparent",
         "--border-radius": "var(--radius)"
       }
@@ -5877,7 +5914,7 @@ var Toaster = (_a) => {
 };
 
 // components/ui/stepper.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { Minus, Plus } from "lucide-react";
 import { jsx as jsx53, jsxs as jsxs26 } from "react/jsx-runtime";
 function clamp(value, min, max) {
@@ -5913,16 +5950,16 @@ function Stepper({
 }) {
   const { container, buttonSize, iconClass } = stepperSizeConfig[size];
   const isControlled = controlledValue !== void 0;
-  const [internalValue, setInternalValue] = React11.useState(
+  const [internalValue, setInternalValue] = React12.useState(
     clamp(defaultValue, min, max)
   );
   const currentValue = isControlled ? controlledValue : internalValue;
   const decimalPlaces = getDecimalPlaces(step);
-  const [displayString, setDisplayString] = React11.useState(
+  const [displayString, setDisplayString] = React12.useState(
     formatValue(currentValue, decimalPlaces)
   );
-  const [isFocused, setIsFocused] = React11.useState(false);
-  React11.useEffect(() => {
+  const [isFocused, setIsFocused] = React12.useState(false);
+  React12.useEffect(() => {
     if (!isFocused) {
       setDisplayString(formatValue(currentValue, decimalPlaces));
     }
@@ -6280,7 +6317,7 @@ function TabsContent(_a) {
 }
 
 // components/ui/ticket-card.tsx
-import { ArrowRight as ArrowRight2, TicketPlus } from "lucide-react";
+import { ArrowRight as ArrowRight2, Info, Rocket } from "lucide-react";
 import { Fragment as Fragment3, jsx as jsx57, jsxs as jsxs27 } from "react/jsx-runtime";
 function TicketCard({
   className,
@@ -6344,14 +6381,14 @@ function TicketCard({
               }
             }
           ),
-          /* @__PURE__ */ jsx57(ArrowRight2, { className: "size-4 text-on-prominent-static-inverse" }),
-          /* @__PURE__ */ jsx57("span", { className: "text-sm font-semibold text-on-prominent-static-inverse", children: stubLabel })
+          /* @__PURE__ */ jsx57(ArrowRight2, { className: "size-4 text-on-primary" }),
+          /* @__PURE__ */ jsx57("span", { className: "text-sm font-semibold text-on-primary", children: stubLabel })
         ]
       }
     )
   ] }) });
 }
-function CreditTicketCard({
+function BoostTicketCard({
   className,
   icon,
   label,
@@ -6360,8 +6397,9 @@ function CreditTicketCard({
   stubLabel,
   onStubClick,
   stubDisabled = false,
-  creditAmount = "0.00",
-  creditCurrency = "USDT",
+  boostAmount = "0.00",
+  boostCurrency = "USDT",
+  boostInfo,
   compact = false
 }) {
   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: [
@@ -6378,12 +6416,24 @@ function CreditTicketCard({
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs27(Badge, { variant: "fill-credit", size: "sm", className: "!gap-1 !font-medium !tracking-normal", children: [
-          /* @__PURE__ */ jsx57(TicketPlus, { className: "!size-3.5", strokeWidth: 2 }),
-          "Credit: ",
-          creditAmount,
+        /* @__PURE__ */ jsxs27(Badge, { variant: "fill-boost", size: "sm", className: "!gap-1 !font-medium !tracking-normal", children: [
+          /* @__PURE__ */ jsx57(Rocket, { className: "!size-3.5", strokeWidth: 2 }),
+          "Boost: ",
+          boostAmount,
           " ",
-          creditCurrency
+          boostCurrency,
+          boostInfo && /* @__PURE__ */ jsx57(TooltipProvider, { children: /* @__PURE__ */ jsxs27(Tooltip2, { children: [
+            /* @__PURE__ */ jsx57(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx57(
+              "button",
+              {
+                type: "button",
+                "aria-label": "More info about boost",
+                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__ */ jsx57(Info, { className: "!size-3.5", strokeWidth: 2 })
+              }
+            ) }),
+            /* @__PURE__ */ jsx57(TooltipContent, { side: "top", variant: "inverse", className: "max-w-xs whitespace-normal", children: boostInfo })
+          ] }) })
         ] })
       ] })
     ] }),
@@ -6424,8 +6474,8 @@ function CreditTicketCard({
               }
             }
           ),
-          /* @__PURE__ */ jsx57(ArrowRight2, { className: "size-4 text-on-prominent-static-inverse" }),
-          /* @__PURE__ */ jsx57("span", { className: "text-sm font-semibold text-on-prominent-static-inverse", children: stubLabel })
+          /* @__PURE__ */ jsx57(ArrowRight2, { className: "size-4 text-on-primary" }),
+          /* @__PURE__ */ jsx57("span", { className: "text-sm font-semibold text-on-primary", children: stubLabel })
         ]
       }
     )
@@ -6477,10 +6527,10 @@ function Toggle(_a) {
 }
 
 // components/ui/toggle-group.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 import { jsx as jsx59 } from "react/jsx-runtime";
-var ToggleGroupContext = React12.createContext({
+var ToggleGroupContext = React13.createContext({
   size: "default",
   variant: "default",
   spacing: 0
@@ -6528,7 +6578,7 @@ function ToggleGroupItem(_a) {
     "variant",
     "size"
   ]);
-  const context = React12.useContext(ToggleGroupContext);
+  const context = React13.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx59(
     ToggleGroupPrimitive.Item,
     __spreadProps(__spreadValues({
@@ -6578,6 +6628,7 @@ export {
   AvatarGroupCount,
   AvatarImage,
   Badge,
+  BoostTicketCard,
   Breadcrumb,
   BreadcrumbEllipsis,
   BreadcrumbItem,
@@ -6649,7 +6700,6 @@ export {
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
-  CreditTicketCard,
   Dialog,
   DialogClose,
   DialogContent,
@@ -6865,6 +6915,7 @@ export {
   navigationButtonVariants,
   navigationMenuTriggerStyle,
   tabsListVariants,
+  toast,
   toggleVariants,
   useComboboxAnchor,
   useDirection,