@trading-game/design-intelligence-layer 0.13.0 → 0.13.2

package/dist/index.cjs

@@ -5371,7 +5371,7 @@ function SheetDescription(_a) {
 }
 
 // components/ui/sidebar.tsx
-var React9 = __toESM(require("react"), 1);
+var React10 = __toESM(require("react"), 1);
 var import_class_variance_authority12 = require("class-variance-authority");
 var import_lucide_react20 = require("lucide-react");
 var import_radix_ui30 = require("radix-ui");
@@ -5407,8 +5407,10 @@ function Skeleton(_a) {
 }
 
 // components/ui/tooltip.tsx
+var React9 = __toESM(require("react"), 1);
 var import_radix_ui29 = require("radix-ui");
 var import_jsx_runtime49 = require("react/jsx-runtime");
+var TooltipModeContext = React9.createContext("tooltip");
 function TooltipProvider(_a) {
   var _b = _a, {
     delayDuration = 0
@@ -5424,36 +5426,71 @@ function TooltipProvider(_a) {
   );
 }
 function Tooltip2(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui29.Tooltip.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__ */ (0, import_jsx_runtime49.jsx)(TooltipModeContext.Provider, { value: "drawer", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Drawer, { children }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(TooltipModeContext.Provider, { value: "tooltip", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui29.Tooltip.Root, __spreadProps(__spreadValues({ "data-slot": "tooltip" }, props), { children })) });
 }
 function TooltipTrigger(_a) {
-  var props = __objRest(_a, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui29.Tooltip.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__ */ (0, import_jsx_runtime49.jsx)(DrawerTrigger, __spreadProps(__spreadValues({ "data-slot": "tooltip-trigger" }, props), { children }));
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui29.Tooltip.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__ */ (0, import_jsx_runtime49.jsxs)(DrawerContent, { "data-slot": "tooltip-content", "data-variant": variant, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DrawerTitle, { className: "px-5 pt-2 text-left text-base font-bold text-on-prominent", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn("px-5 pt-2 pb-2 text-sm font-medium text-on-prominent", className), children }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DrawerFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DrawerClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(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__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui29.Tooltip.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     import_radix_ui29.Tooltip.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-primary 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__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui29.Tooltip.Arrow, { className: "fill-primary" })
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_radix_ui29.Tooltip.Arrow, { className: arrowClasses })
       ]
     })
   ) });
@@ -5467,9 +5504,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.");
   }
@@ -5492,10 +5529,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) {
@@ -5507,10 +5544,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();
@@ -5521,7 +5558,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,
@@ -6099,7 +6136,7 @@ function SidebarMenuSubButton(_a) {
 }
 
 // components/ui/slider.tsx
-var React10 = __toESM(require("react"), 1);
+var React11 = __toESM(require("react"), 1);
 var import_radix_ui31 = require("radix-ui");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function Slider(_a) {
@@ -6116,7 +6153,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]
   );
@@ -6208,7 +6245,7 @@ var Toaster = (_a) => {
 };
 
 // components/ui/stepper.tsx
-var React11 = __toESM(require("react"), 1);
+var React12 = __toESM(require("react"), 1);
 var import_lucide_react22 = require("lucide-react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
 function clamp(value, min, max) {
@@ -6244,16 +6281,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));
     }
@@ -6693,6 +6730,9 @@ function BoostTicketCard({
   stubDisabled = false,
   boostAmount = "0.00",
   boostCurrency = "USDT",
+  boostInfo,
+  boostInfoSide = "top",
+  boostInfoAlign = "center",
   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: [
@@ -6715,7 +6755,18 @@ function BoostTicketCard({
           boostAmount,
           " ",
           boostCurrency,
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react23.Info, { className: "!size-3.5", strokeWidth: 2, "aria-label": "More info about boost" })
+          boostInfo && /* @__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",
+                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, variant: "inverse", className: "max-w-xs whitespace-normal", children: boostInfo })
+          ] }) })
         ] })
       ] })
     ] }),
@@ -6809,10 +6860,10 @@ function Toggle(_a) {
 }
 
 // components/ui/toggle-group.tsx
-var React12 = __toESM(require("react"), 1);
+var React13 = __toESM(require("react"), 1);
 var import_radix_ui35 = require("radix-ui");
 var import_jsx_runtime59 = require("react/jsx-runtime");
-var ToggleGroupContext = React12.createContext({
+var ToggleGroupContext = React13.createContext({
   size: "default",
   variant: "default",
   spacing: 0
@@ -6860,7 +6911,7 @@ function ToggleGroupItem(_a) {
     "variant",
     "size"
   ]);
-  const context = React12.useContext(ToggleGroupContext);
+  const context = React13.useContext(ToggleGroupContext);
   return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     import_radix_ui35.ToggleGroup.Item,
     __spreadProps(__spreadValues({