@luxfi/ui 7.4.12 → 7.4.13

package/dist/index.js

@@ -1636,7 +1636,6 @@ var Avatar = React32.forwardRef(
       Avatar$1,
       {
         ref,
-        unstyled: true,
         position: "relative",
         display: "inline-flex",
         flexShrink: 0,
@@ -3743,22 +3742,30 @@ var InputGroup = React32.forwardRef(
     const { className: startClassName, ...startRest } = startElementProps ?? {};
     const { className: endClassName, ...endRest } = endElementProps ?? {};
     return /* @__PURE__ */ jsxs(
-      "div",
+      XStack,
       {
         ref: combinedRef,
-        className: cn("relative flex w-full items-center", className),
+        position: "relative",
+        width: "100%",
+        alignItems: "center",
+        className,
         ...rest,
         children: [
           startElement && /* @__PURE__ */ jsx(
-            "div",
+            XStack,
             {
               ref: startElementRef,
-              className: cn(
-                "pointer-events-none absolute inset-y-0 left-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]",
-                startClassName
-              ),
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: 0,
+              zIndex: 1,
+              alignItems: "center",
+              pointerEvents: "none",
+              style: { color: "var(--color-icon-secondary)" },
+              className: startClassName,
               ...startRest,
-              children: startElement
+              children: ink(startElement)
             }
           ),
           React32.Children.map(children, (child) => {
@@ -3777,15 +3784,20 @@ var InputGroup = React32.forwardRef(
             });
           }),
           endElement && /* @__PURE__ */ jsx(
-            "div",
+            XStack,
             {
               ref: endElementRef,
-              className: cn(
-                "pointer-events-none absolute inset-y-0 right-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]",
-                endClassName
-              ),
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              right: 0,
+              zIndex: 1,
+              alignItems: "center",
+              pointerEvents: "none",
+              style: { color: "var(--color-icon-secondary)" },
+              className: endClassName,
               ...endRest,
-              children: endElement
+              children: ink(endElement)
             }
           )
         ]
@@ -3794,20 +3806,26 @@ var InputGroup = React32.forwardRef(
   }
 );
 InputGroup.displayName = "InputGroup";
-var INPUT_BASE = [
-  "w-10 h-10",
-  "text-center text-sm font-medium",
-  "border-2 rounded-md",
-  "outline-none appearance-none",
-  "bg-[var(--color-input-bg)] text-[var(--color-input-fg)]",
-  "border-[var(--color-input-border)]",
-  "placeholder:text-[var(--color-input-placeholder)]",
-  "hover:border-[var(--color-input-border-hover)]",
-  "focus:border-[var(--color-input-border-focus)] focus:shadow-md",
-  "disabled:opacity-40"
-].join(" ");
-var INPUT_FILLED = "border-[var(--color-input-border)]";
-var INPUT_INVALID = "border-[var(--color-border-error)] hover:border-[var(--color-border-error)]";
+var BOX = {
+  width: 40,
+  height: 40,
+  textAlign: "center",
+  fontSize: 14,
+  fontWeight: 500,
+  borderRadius: 6,
+  borderWidth: 2,
+  borderStyle: "solid",
+  outlineWidth: 0,
+  backgroundColor: "var(--color-input-bg)",
+  color: "var(--color-input-fg)",
+  borderColor: "var(--color-input-border)",
+  hoverStyle: { borderColor: "var(--color-input-border-hover)" },
+  focusStyle: {
+    borderColor: "var(--color-input-border-focus)",
+    boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
+  },
+  disabledStyle: { opacity: 0.4 }
+};
 var PinInput = React32.forwardRef(
   function PinInput2(props, ref) {
     const {
@@ -3899,8 +3917,8 @@ var PinInput = React32.forwardRef(
     const onKeyDownAtIndex = React32.useCallback((index) => (e) => {
       handleKeyDown(index, e);
     }, [handleKeyDown]);
-    const bgStyle = bgColor ? { backgroundColor: `var(--color-${bgColor.replace(/\./g, "-")})` } : void 0;
-    return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("inline-flex items-center", attached ? "gap-0" : "gap-2", className), children: [
+    const boxBackground = bgColor ? `var(--color-${bgColor.replace(/\./g, "-")})` : BOX.backgroundColor;
+    return /* @__PURE__ */ jsxs(XStack, { ref: rootRef, alignItems: "center", gap: attached ? 0 : 8, className, children: [
       /* @__PURE__ */ jsx(
         "input",
         {
@@ -3912,9 +3930,10 @@ var PinInput = React32.forwardRef(
         }
       ),
       Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
-        "input",
+        Input$1,
         {
           ref: setInputRef(index),
+          unstyled: true,
           type: "text",
           inputMode: "numeric",
           autoComplete: otp ? "one-time-code" : "off",
@@ -3923,14 +3942,12 @@ var PinInput = React32.forwardRef(
           placeholder,
           disabled,
           "aria-invalid": invalid || void 0,
+          "data-invalid": invalid || void 0,
           value: values[index] || "",
-          className: cn(
-            INPUT_BASE,
-            values[index] && INPUT_FILLED,
-            invalid && INPUT_INVALID,
-            attached && index > 0 && "-ml-0.5"
-          ),
-          style: bgStyle,
+          className: "lux-control",
+          ...BOX,
+          backgroundColor: boxBackground,
+          marginLeft: attached && index > 0 ? -2 : void 0,
           onInput: onInputAtIndex(index),
           onKeyDown: onKeyDownAtIndex(index),
           onPaste: handlePaste,
@@ -4258,11 +4275,11 @@ var Progress = React32.forwardRef(
   }
 );
 var SIZE_MAP = {
-  xs: { size: 24, thickness: 4, textClass: "text-[10px]" },
-  sm: { size: 32, thickness: 5, textClass: "text-[10px]" },
-  md: { size: 40, thickness: 6, textClass: "text-xs" },
-  lg: { size: 48, thickness: 7, textClass: "text-sm" },
-  xl: { size: 64, thickness: 8, textClass: "text-sm" }
+  xs: { size: 24, thickness: 4, fontSize: 10 },
+  sm: { size: 32, thickness: 5, fontSize: 10 },
+  md: { size: 40, thickness: 6, fontSize: 12 },
+  lg: { size: 48, thickness: 7, fontSize: 14 },
+  xl: { size: 64, thickness: 8, fontSize: 14 }
 };
 var Ctx = React32.createContext({
   value: 0,
@@ -4283,16 +4300,18 @@ var ProgressCircleRoot = React32.forwardRef(function ProgressCircleRoot2(props,
     [value, size, colorPalette]
   );
   return /* @__PURE__ */ jsx(Ctx.Provider, { value: ctx, children: /* @__PURE__ */ jsx(
-    "div",
+    View,
     {
       ref,
       role: "progressbar",
       "aria-valuenow": value ?? void 0,
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      className: cn("relative inline-flex text-sm", className),
+      position: "relative",
+      style: { display: "inline-flex", fontSize: 14 },
+      className,
       ...rest,
-      children
+      children: ink(children)
     }
   ) });
 });
@@ -4311,10 +4330,7 @@ var ProgressCircleRing = React32.forwardRef(function ProgressCircleRing2(props,
       width: size,
       height: size,
       viewBox: `0 0 ${size} ${size}`,
-      className: cn(
-        value === null && "animate-spin",
-        className
-      ),
+      className: value === null ? cn("lux-spin", className) : className,
       ...rest,
       children: [
         /* @__PURE__ */ jsx(
@@ -4326,7 +4342,7 @@ var ProgressCircleRing = React32.forwardRef(function ProgressCircleRing2(props,
             fill: "transparent",
             strokeWidth: thickness,
             stroke: trackColor ?? "currentColor",
-            className: !trackColor ? "opacity-20" : void 0
+            opacity: !trackColor ? 0.2 : void 0
           }
         ),
         /* @__PURE__ */ jsx(
@@ -4356,20 +4372,30 @@ var ProgressCircleRing = React32.forwardRef(function ProgressCircleRing2(props,
 var ProgressCircleValueText = React32.forwardRef(function ProgressCircleValueText2(props, ref) {
   const { className, children, ...rest } = props;
   const { value, size: sizeKey } = React32.useContext(Ctx);
-  const { textClass } = SIZE_MAP[sizeKey];
+  const { fontSize } = SIZE_MAP[sizeKey];
   return /* @__PURE__ */ jsx(
-    "div",
+    View,
     {
       ref,
       "aria-live": "polite",
-      className: cn(
-        "absolute inset-0 flex items-center justify-center",
-        "font-medium tracking-tight tabular-nums leading-none",
-        textClass,
-        className
-      ),
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      style: {
+        fontWeight: 500,
+        fontSize,
+        lineHeight: `${fontSize}px`,
+        letterSpacing: fontSize * -0.025,
+        fontVariantNumeric: "tabular-nums"
+      },
+      className,
       ...rest,
-      children: children ?? `${Math.round(value ?? 0)}%`
+      children: ink(children ?? `${Math.round(value ?? 0)}%`)
     }
   );
 });
@@ -4411,7 +4437,6 @@ var RadioGroupBase = React32.forwardRef(
       RadioGroup,
       {
         ref,
-        unstyled: true,
         name,
         required,
         disabled: disabled || readOnly,
@@ -4489,8 +4514,8 @@ var RadioBase = React32.forwardRef(
   }
 );
 var Radio2 = RadioBase;
-var StarFilledIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
-var StarOutlineIcon = ({ className }) => /* @__PURE__ */ jsx("svg", { className, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z", strokeWidth: "1.5" }) });
+var StarFilledIcon = () => /* @__PURE__ */ jsx("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" }) });
+var StarOutlineIcon = () => /* @__PURE__ */ jsx("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { d: "M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z", strokeWidth: "1.5" }) });
 var Rating = React32.forwardRef(
   function Rating2(props, ref) {
     const { count = 5, label: labelProp, defaultValue = 0, onValueChange, readOnly, className, ...rest } = props;
@@ -4510,28 +4535,30 @@ var Rating = React32.forwardRef(
     const handleMouseLeave = React32.useCallback(() => {
       setHoveredIndex(-1);
     }, []);
-    return /* @__PURE__ */ jsxs("div", { ref, className: cn("inline-flex items-center gap-1", className), ...rest, children: [
-      /* @__PURE__ */ jsx("div", { className: "inline-flex items-center", onMouseLeave: handleMouseLeave, children: Array.from({ length: count }).map((_, index) => {
+    return /* @__PURE__ */ jsxs(XStack, { ref, display: "inline-flex", alignItems: "center", gap: 4, className, ...rest, children: [
+      /* @__PURE__ */ jsx(XStack, { display: "inline-flex", alignItems: "center", onMouseLeave: handleMouseLeave, children: Array.from({ length: count }).map((_, index) => {
         const filled = index < highlightedIndex;
         const starIndex = index + 1;
         return /* @__PURE__ */ jsx(
-          "button",
+          View,
           {
-            type: "button",
+            render: /* @__PURE__ */ jsx("button", { type: "button" }),
             tabIndex: readOnly ? -1 : 0,
             "aria-label": `Rate ${starIndex} of ${count}`,
-            className: cn(
-              "inline-flex items-center justify-center w-5 h-5 text-current",
-              readOnly ? "cursor-default" : "cursor-pointer"
-            ),
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: 20,
+            height: 20,
+            cursor: readOnly ? "default" : "pointer",
             onClick: handleClick(starIndex),
             onMouseEnter: handleMouseEnter(index),
-            children: filled ? /* @__PURE__ */ jsx(StarFilledIcon, { className: "w-5 h-5" }) : /* @__PURE__ */ jsx(StarOutlineIcon, { className: "w-5 h-5" })
+            children: filled ? /* @__PURE__ */ jsx(StarFilledIcon, {}) : /* @__PURE__ */ jsx(StarOutlineIcon, {})
           },
           index
         );
       }) }),
-      label && /* @__PURE__ */ jsx("span", { className: "text-sm", children: label })
+      label && /* @__PURE__ */ jsx(Text, { fontSize: 14, children: label })
     ] });
   }
 );
@@ -5014,7 +5041,6 @@ var Slider = React32.forwardRef(
         Slider$1,
         {
           ref,
-          unstyled: true,
           position: "relative",
           flexDirection: "row",
           width: "100%",
@@ -5764,21 +5790,24 @@ var Tag = React32.forwardRef(
       ":",
       nbsp
     ] }) : null;
-    const labelSpan = /* @__PURE__ */ jsxs(
-      Text,
-      {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        fontWeight: "500",
-        fontSize: TAG_SIZE_FONT[resolvedSize],
-        color,
-        hoverStyle: textHoverColor ? { color: textHoverColor } : void 0,
-        children: [
-          labelElement,
-          children
-        ]
-      }
+    const labelSpan = (
+      // `ellipsis` is Text's own built-in single-line-truncation variant —
+      // the same rule Tailwind's `line-clamp-1`/`text-ellipsis` drew, through
+      // the component's variants rather than three separate style props.
+      /* @__PURE__ */ jsxs(
+        Text,
+        {
+          ellipsis: true,
+          fontWeight: "500",
+          fontSize: TAG_SIZE_FONT[resolvedSize],
+          color,
+          hoverStyle: textHoverColor ? { color: textHoverColor } : void 0,
+          children: [
+            labelElement,
+            children
+          ]
+        }
+      )
     );
     const contentElement = truncated ? /* @__PURE__ */ jsx(TruncatedTextTooltip2, { label: children, children: labelSpan }) : labelSpan;
     return /* @__PURE__ */ jsx(Skeleton, { loading, asChild: true, children: /* @__PURE__ */ jsxs(
@@ -6364,84 +6393,145 @@ var STRATEGY_PRESETS = [
     ]
   }
 ];
+var MONO = "monospace";
+var CONTROL_BOX = {
+  backgroundColor: "var(--color-input-bg)",
+  borderWidth: 1,
+  borderColor: "var(--color-input-border)",
+  outlineWidth: 0,
+  focusStyle: { borderColor: "var(--color-input-border-focus)" }
+};
+var CONTROL_INK = { color: "var(--color-input-fg)" };
 function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemove }) {
   const update2 = (patch) => {
     onChange(index, { ...leg, ...patch });
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md bg-zinc-800/50 px-2 py-1.5", children: [
-    /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-zinc-500 w-4 shrink-0", children: index + 1 }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "px-2 py-0.5 rounded text-xs font-semibold transition-colors",
-          leg.action === "buy" ? "bg-emerald-900/60 text-emerald-400" : "bg-red-900/60 text-red-400"
+  return /* @__PURE__ */ jsxs(
+    XStack,
+    {
+      alignItems: "center",
+      gap: 8,
+      borderRadius: 6,
+      backgroundColor: "var(--color-tag-subtle-bg)",
+      paddingHorizontal: 8,
+      paddingVertical: 6,
+      children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: 10, style: { fontFamily: MONO }, flexShrink: 0, width: 16, color: "var(--color-text-secondary)", children: index + 1 }),
+        /* @__PURE__ */ jsx(
+          XStack,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("button", { type: "button" }),
+            onClick: () => update2({ action: leg.action === "buy" ? "sell" : "buy" }),
+            paddingHorizontal: 8,
+            paddingVertical: 2,
+            borderRadius: 4,
+            borderWidth: 0,
+            cursor: "pointer",
+            transition: "quick",
+            backgroundColor: leg.action === "buy" ? "color-mix(in srgb, var(--color-status-good) 20%, transparent)" : "color-mix(in srgb, var(--color-status-bad) 20%, transparent)",
+            children: /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", color: leg.action === "buy" ? "var(--color-status-good)" : "var(--color-status-bad)", children: leg.action === "buy" ? "BUY" : "SELL" })
+          }
         ),
-        onClick: () => update2({ action: leg.action === "buy" ? "sell" : "buy" }),
-        children: leg.action === "buy" ? "BUY" : "SELL"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "px-2 py-0.5 rounded text-xs font-medium transition-colors",
-          // Call vs put is a rank difference, not a hue difference.
-          leg.type === "call" ? "bg-[var(--secondary)] text-[var(--foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"
+        /* @__PURE__ */ jsx(
+          XStack,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("button", { type: "button" }),
+            onClick: () => update2({ type: leg.type === "call" ? "put" : "call" }),
+            paddingHorizontal: 8,
+            paddingVertical: 2,
+            borderRadius: 4,
+            borderWidth: 0,
+            cursor: "pointer",
+            transition: "quick",
+            backgroundColor: leg.type === "call" ? "var(--secondary)" : "var(--muted)",
+            children: /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "500", color: leg.type === "call" ? "var(--foreground)" : "var(--muted-foreground)", children: leg.type === "call" ? "CALL" : "PUT" })
+          }
         ),
-        onClick: () => update2({ type: leg.type === "call" ? "put" : "call" }),
-        children: leg.type === "call" ? "CALL" : "PUT"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "select",
-      {
-        value: leg.strike,
-        onChange: (e) => update2({ strike: Number(e.target.value) }),
-        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs font-mono text-zinc-200 outline-none focus:border-zinc-500 min-w-[72px]",
-        children: strikes.map((s) => /* @__PURE__ */ jsx("option", { value: s, children: s.toFixed(2) }, s))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "select",
-      {
-        value: leg.expiration,
-        onChange: (e) => update2({ expiration: e.target.value }),
-        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs text-zinc-200 outline-none focus:border-zinc-500 min-w-[80px]",
-        children: expirations.map((exp) => /* @__PURE__ */ jsx("option", { value: exp, children: exp }, exp))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "number",
-        min: 1,
-        max: 999,
-        value: leg.quantity,
-        onChange: (e) => update2({ quantity: Math.max(1, parseInt(e.target.value, 10) || 1) }),
-        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs font-mono text-zinc-200 outline-none focus:border-zinc-500 w-[48px] text-center"
-      }
-    ),
-    leg.premium !== void 0 && /* @__PURE__ */ jsxs("span", { className: cn(
-      "font-mono tabular-nums text-xs ml-auto",
-      leg.premium >= 0 ? "text-emerald-400" : "text-red-400"
-    ), children: [
-      leg.premium >= 0 ? "+" : "",
-      leg.premium.toFixed(2)
-    ] }),
-    removable && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => onRemove(index),
-        className: "ml-auto p-0.5 text-zinc-500 hover:text-red-400 transition-colors",
-        "aria-label": "Remove leg",
-        children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
-      }
-    )
-  ] });
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("select", { value: leg.strike, onChange: (e) => update2({ strike: Number(e.target.value) }) }),
+            ...CONTROL_BOX,
+            borderRadius: 4,
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+            minWidth: 72,
+            style: { ...CONTROL_INK, fontFamily: MONO, fontSize: 12 },
+            children: strikes.map((s) => /* @__PURE__ */ jsx("option", { value: s, children: s.toFixed(2) }, s))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("select", { value: leg.expiration, onChange: (e) => update2({ expiration: e.target.value }) }),
+            ...CONTROL_BOX,
+            borderRadius: 4,
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+            minWidth: 80,
+            style: { ...CONTROL_INK, fontSize: 12 },
+            children: expirations.map((exp) => /* @__PURE__ */ jsx("option", { value: exp, children: exp }, exp))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                max: 999,
+                value: leg.quantity,
+                onChange: (e) => update2({ quantity: Math.max(1, parseInt(e.target.value, 10) || 1) })
+              }
+            ),
+            ...CONTROL_BOX,
+            borderRadius: 4,
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+            width: 48,
+            style: { ...CONTROL_INK, fontFamily: MONO, fontSize: 12, textAlign: "center" }
+          }
+        ),
+        leg.premium !== void 0 && /* @__PURE__ */ jsxs(
+          Text,
+          {
+            fontSize: 12,
+            style: { fontFamily: MONO },
+            fontVariant: ["tabular-nums"],
+            marginLeft: "auto",
+            color: leg.premium >= 0 ? "var(--color-status-good)" : "var(--color-status-bad)",
+            children: [
+              leg.premium >= 0 ? "+" : "",
+              leg.premium.toFixed(2)
+            ]
+          }
+        ),
+        removable && /* @__PURE__ */ jsx(
+          XStack,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Remove leg" }),
+            onClick: () => onRemove(index),
+            marginLeft: "auto",
+            padding: 2,
+            borderWidth: 0,
+            cursor: "pointer",
+            transition: "quick",
+            style: { color: "var(--color-text-secondary)" },
+            hoverStyle: { opacity: 0.7 },
+            children: /* @__PURE__ */ jsx("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+          }
+        )
+      ]
+    }
+  );
 }
 var StrategyBuilder = React32.forwardRef(
   function StrategyBuilder2(props, ref) {
@@ -6511,37 +6601,46 @@ var StrategyBuilder = React32.forwardRef(
       });
     }, [onSubmit, strategyType, legs, netPremium]);
     const currentPreset = STRATEGY_PRESETS.find((p) => p.value === strategyType);
+    const netColor = netPremium > 0 ? "var(--color-status-good)" : netPremium < 0 ? "var(--color-status-bad)" : "var(--color-text-secondary)";
     return /* @__PURE__ */ jsxs(
-      "div",
+      YStack,
       {
         ref,
-        className: cn(
-          "flex flex-col gap-3 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3",
-          className
-        ),
+        gap: 12,
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: "var(--color-border-divider)",
+        backgroundColor: "var(--card)",
+        padding: 12,
+        className,
         ...rest,
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-zinc-500", children: "Strategy" }),
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-200", children: underlying })
+          /* @__PURE__ */ jsxs(XStack, { alignItems: "center", justifyContent: "space-between", gap: 12, children: [
+            /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 8, children: [
+              /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.6, color: "var(--color-text-secondary)", children: "Strategy" }),
+              /* @__PURE__ */ jsx(Text, { fontSize: 14, fontWeight: "500", color: "var(--color-text-primary)", children: underlying })
             ] }),
-            /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+            /* @__PURE__ */ jsxs(Text, { fontSize: 10, color: "var(--color-text-secondary)", children: [
               "Spot: ",
-              /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums text-zinc-300", children: spotPrice.toFixed(2) })
+              /* @__PURE__ */ jsx(Text, { style: { fontFamily: MONO }, fontVariant: ["tabular-nums"], color: "var(--color-text-primary)", children: spotPrice.toFixed(2) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(
-            "select",
+          /* @__PURE__ */ jsx(XStack, { alignItems: "center", gap: 8, children: /* @__PURE__ */ jsx(
+            View,
             {
-              value: strategyType,
-              onChange: handleStrategyChange,
-              className: "flex-1 bg-zinc-900 border border-zinc-700 rounded-md px-2.5 py-1.5 text-sm text-zinc-200 outline-none focus:border-zinc-500",
+              unstyled: true,
+              render: /* @__PURE__ */ jsx("select", { value: strategyType, onChange: handleStrategyChange }),
+              flex: 1,
+              ...CONTROL_BOX,
+              borderRadius: 6,
+              paddingHorizontal: 10,
+              paddingVertical: 6,
+              style: { ...CONTROL_INK, fontSize: 14 },
               children: STRATEGY_PRESETS.map((preset) => /* @__PURE__ */ jsx("option", { value: preset.value, children: preset.label }, preset.value))
             }
           ) }),
-          currentPreset && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-zinc-500 -mt-1", children: currentPreset.description }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: legs.map((leg, i) => /* @__PURE__ */ jsx(
+          currentPreset && /* @__PURE__ */ jsx(Text, { fontSize: 11, marginTop: -4, color: "var(--color-text-secondary)", children: currentPreset.description }),
+          /* @__PURE__ */ jsx(YStack, { gap: 6, children: legs.map((leg, i) => /* @__PURE__ */ jsx(
             LegRow,
             {
               leg,
@@ -6555,40 +6654,53 @@ var StrategyBuilder = React32.forwardRef(
             i
           )) }),
           strategyType === "custom" && legs.length < 4 && /* @__PURE__ */ jsxs(
-            "button",
+            XStack,
             {
-              type: "button",
+              unstyled: true,
+              render: /* @__PURE__ */ jsx("button", { type: "button" }),
               onClick: handleAddLeg,
-              className: "flex items-center justify-center gap-1 rounded-md border border-dashed border-zinc-700 py-1 text-xs text-zinc-500 hover:text-zinc-300 hover:border-zinc-500 transition-colors",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 4,
+              borderRadius: 6,
+              borderWidth: 1,
+              paddingVertical: 4,
+              cursor: "pointer",
+              transition: "quick",
+              borderColor: "var(--color-border-divider)",
+              hoverStyle: { borderColor: "var(--color-hover)" },
+              style: { color: "var(--color-text-secondary)", borderStyle: "dashed" },
               children: [
-                /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
-                "Add Leg"
+                /* @__PURE__ */ jsx("svg", { width: 12, height: 12, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
+                /* @__PURE__ */ jsx(Text, { fontSize: 12, color: "var(--color-text-secondary)", children: "Add Leg" })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-1 border-t border-zinc-800", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500", children: "Net:" }),
-              /* @__PURE__ */ jsxs("span", { className: cn(
-                "font-mono tabular-nums text-sm font-semibold",
-                netPremium > 0 ? "text-emerald-400" : netPremium < 0 ? "text-red-400" : "text-zinc-400"
-              ), children: [
+          /* @__PURE__ */ jsxs(XStack, { alignItems: "center", justifyContent: "space-between", paddingTop: 4, borderTopWidth: 1, borderColor: "var(--color-border-divider)", children: [
+            /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 8, children: [
+              /* @__PURE__ */ jsx(Text, { fontSize: 12, color: "var(--color-text-secondary)", children: "Net:" }),
+              /* @__PURE__ */ jsxs(Text, { fontSize: 14, fontWeight: "600", style: { fontFamily: MONO }, fontVariant: ["tabular-nums"], color: netColor, children: [
                 netPremium > 0 ? "Credit " : netPremium < 0 ? "Debit " : "",
                 netPremium !== 0 ? `$${Math.abs(netPremium).toFixed(2)}` : "-"
               ] })
             ] }),
             /* @__PURE__ */ jsx(
-              "button",
+              XStack,
               {
-                type: "button",
+                unstyled: true,
+                render: /* @__PURE__ */ jsx("button", { type: "button" }),
                 onClick: handleSubmit,
                 disabled: legs.length === 0,
-                className: cn(
-                  "px-4 py-1.5 rounded-md text-xs font-semibold transition-colors",
-                  "bg-blue-600 text-white hover:bg-blue-500",
-                  "disabled:opacity-40 disabled:cursor-not-allowed"
-                ),
-                children: "Review Order"
+                paddingHorizontal: 16,
+                paddingVertical: 6,
+                borderRadius: 6,
+                borderWidth: 0,
+                cursor: "pointer",
+                transition: "quick",
+                backgroundColor: "var(--color-button-solid-bg)",
+                hoverStyle: { backgroundColor: "var(--color-hover)" },
+                disabledStyle: { opacity: 0.4, cursor: "not-allowed" },
+                children: /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", color: "var(--color-button-solid-text)", children: "Review Order" })
               }
             )
           ] })
@@ -7027,7 +7139,7 @@ function formatDate(date) {
   const d = new Date(date);
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
 }
-var MONO = { fontFamily: "monospace" };
+var MONO2 = { fontFamily: "monospace" };
 var OptionPositionCard = React32.forwardRef(
   function OptionPositionCard2(props, ref) {
     const {
@@ -7067,7 +7179,7 @@ var OptionPositionCard = React32.forwardRef(
                 backgroundColor: isCall ? "var(--secondary)" : "var(--muted)",
                 children: [
                   /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", color: isCall ? "var(--foreground)" : "var(--muted-foreground)", children: position.underlying }),
-                  /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", style: MONO, fontVariant: ["tabular-nums"], color: isCall ? "var(--foreground)" : "var(--muted-foreground)", children: position.strike }),
+                  /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", style: MONO2, fontVariant: ["tabular-nums"], color: isCall ? "var(--foreground)" : "var(--muted-foreground)", children: position.strike }),
                   /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", textTransform: "uppercase", color: isCall ? "var(--foreground)" : "var(--muted-foreground)", children: position.type === "call" ? "C" : "P" }),
                   /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "400", color: "var(--color-text-secondary)", children: formatDate(position.expiration) })
                 ]
@@ -7078,7 +7190,7 @@ var OptionPositionCard = React32.forwardRef(
               {
                 fontSize: 12,
                 fontWeight: "600",
-                style: MONO,
+                style: MONO2,
                 fontVariant: ["tabular-nums"],
                 color: isLong ? "var(--color-status-good)" : "var(--color-status-bad)",
                 children: [
@@ -7091,14 +7203,14 @@ var OptionPositionCard = React32.forwardRef(
           /* @__PURE__ */ jsxs(XStack, { gap: 12, children: [
             /* @__PURE__ */ jsxs(YStack, { flex: 1, gap: 2, children: [
               /* @__PURE__ */ jsx(Text, { fontSize: 10, textTransform: "uppercase", letterSpacing: 0.5, color: "var(--color-text-secondary)", children: "Avg Cost" }),
-              /* @__PURE__ */ jsxs(Text, { fontSize: 12, style: MONO, fontVariant: ["tabular-nums"], color: "var(--color-text-primary)", children: [
+              /* @__PURE__ */ jsxs(Text, { fontSize: 12, style: MONO2, fontVariant: ["tabular-nums"], color: "var(--color-text-primary)", children: [
                 "$",
                 position.avgCost.toFixed(2)
               ] })
             ] }),
             /* @__PURE__ */ jsxs(YStack, { flex: 1, gap: 2, children: [
               /* @__PURE__ */ jsx(Text, { fontSize: 10, textTransform: "uppercase", letterSpacing: 0.5, color: "var(--color-text-secondary)", children: "Value" }),
-              /* @__PURE__ */ jsxs(Text, { fontSize: 12, style: MONO, fontVariant: ["tabular-nums"], color: "var(--color-text-primary)", children: [
+              /* @__PURE__ */ jsxs(Text, { fontSize: 12, style: MONO2, fontVariant: ["tabular-nums"], color: "var(--color-text-primary)", children: [
                 "$",
                 position.currentValue.toFixed(2)
               ] })
@@ -7106,11 +7218,11 @@ var OptionPositionCard = React32.forwardRef(
             /* @__PURE__ */ jsxs(YStack, { flex: 1, gap: 2, alignItems: "flex-end", children: [
               /* @__PURE__ */ jsx(Text, { fontSize: 10, textTransform: "uppercase", letterSpacing: 0.5, color: "var(--color-text-secondary)", children: "P/L" }),
               /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 4, children: [
-                /* @__PURE__ */ jsxs(Text, { fontSize: 12, fontWeight: "600", style: MONO, fontVariant: ["tabular-nums"], color: pnlColor, children: [
+                /* @__PURE__ */ jsxs(Text, { fontSize: 12, fontWeight: "600", style: MONO2, fontVariant: ["tabular-nums"], color: pnlColor, children: [
                   isProfitable ? "+" : "",
                   position.pnl.toFixed(2)
                 ] }),
-                /* @__PURE__ */ jsxs(Text, { fontSize: 10, style: MONO, fontVariant: ["tabular-nums"], color: pnlColor, opacity: 0.7, children: [
+                /* @__PURE__ */ jsxs(Text, { fontSize: 10, style: MONO2, fontVariant: ["tabular-nums"], color: pnlColor, opacity: 0.7, children: [
                   "(",
                   isProfitable ? "+" : "",
                   position.pnlPercent.toFixed(1),
@@ -7159,7 +7271,7 @@ function ActionButton({ onClick, children }) {
 function GreekPill({ label, value, color }) {
   return /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 4, children: [
     /* @__PURE__ */ jsx(Text, { fontSize: 10, fontWeight: "600", color, children: label }),
-    /* @__PURE__ */ jsx(Text, { fontSize: 11, style: MONO, fontVariant: ["tabular-nums"], color: value < 0 ? "var(--color-status-bad)" : "var(--color-text-secondary)", children: value.toFixed(4) })
+    /* @__PURE__ */ jsx(Text, { fontSize: 11, style: MONO2, fontVariant: ["tabular-nums"], color: value < 0 ? "var(--color-status-bad)" : "var(--color-text-secondary)", children: value.toFixed(4) })
   ] });
 }
 function formatExpDate(date) {