@luxfi/ui 7.4.12 → 7.4.13

package/dist/strategy-builder.cjs

@@ -1,9 +1,8 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -26,9 +25,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 function findATM(strikes, spot) {
   if (strikes.length === 0) return spot;
   return strikes.reduce(
@@ -137,84 +133,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 update = (patch) => {
     onChange(index, { ...leg, ...patch });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 rounded-md bg-zinc-800/50 px-2 py-1.5", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-mono text-zinc-500 w-4 shrink-0", children: index + 1 }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    gui.XStack,
+    {
+      alignItems: "center",
+      gap: 8,
+      borderRadius: 6,
+      backgroundColor: "var(--color-tag-subtle-bg)",
+      paddingHorizontal: 8,
+      paddingVertical: 6,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 10, style: { fontFamily: MONO }, flexShrink: 0, width: 16, color: "var(--color-text-secondary)", children: index + 1 }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          gui.XStack,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
+            onClick: () => update({ 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__ */ jsxRuntime.jsx(gui.Text, { fontSize: 12, fontWeight: "600", color: leg.action === "buy" ? "var(--color-status-good)" : "var(--color-status-bad)", children: leg.action === "buy" ? "BUY" : "SELL" })
+          }
         ),
-        onClick: () => update({ action: leg.action === "buy" ? "sell" : "buy" }),
-        children: leg.action === "buy" ? "BUY" : "SELL"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          gui.XStack,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
+            onClick: () => update({ 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__ */ jsxRuntime.jsx(gui.Text, { fontSize: 12, fontWeight: "500", color: leg.type === "call" ? "var(--foreground)" : "var(--muted-foreground)", children: leg.type === "call" ? "CALL" : "PUT" })
+          }
         ),
-        onClick: () => update({ type: leg.type === "call" ? "put" : "call" }),
-        children: leg.type === "call" ? "CALL" : "PUT"
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "select",
-      {
-        value: leg.strike,
-        onChange: (e) => update({ 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__ */ jsxRuntime.jsx("option", { value: s, children: s.toFixed(2) }, s))
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "select",
-      {
-        value: leg.expiration,
-        onChange: (e) => update({ 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__ */ jsxRuntime.jsx("option", { value: exp, children: exp }, exp))
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        type: "number",
-        min: 1,
-        max: 999,
-        value: leg.quantity,
-        onChange: (e) => update({ 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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
-      }
-    )
-  ] });
+        /* @__PURE__ */ jsxRuntime.jsx(
+          gui.View,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsxRuntime.jsx("select", { value: leg.strike, onChange: (e) => update({ 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__ */ jsxRuntime.jsx("option", { value: s, children: s.toFixed(2) }, s))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          gui.View,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsxRuntime.jsx("select", { value: leg.expiration, onChange: (e) => update({ expiration: e.target.value }) }),
+            ...CONTROL_BOX,
+            borderRadius: 4,
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+            minWidth: 80,
+            style: { ...CONTROL_INK, fontSize: 12 },
+            children: expirations.map((exp) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: exp, children: exp }, exp))
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          gui.View,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                max: 999,
+                value: leg.quantity,
+                onChange: (e) => update({ 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__ */ jsxRuntime.jsxs(
+          gui.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__ */ jsxRuntime.jsx(
+          gui.XStack,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+          }
+        )
+      ]
+    }
+  );
 }
 var StrategyBuilder = React__namespace.forwardRef(
   function StrategyBuilder2(props, ref) {
@@ -284,37 +341,46 @@ var StrategyBuilder = React__namespace.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__ */ jsxRuntime.jsxs(
-      "div",
+      gui.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-zinc-500", children: "Strategy" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-zinc-200", children: underlying })
+          /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", justifyContent: "space-between", gap: 12, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", gap: 8, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 12, fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.6, color: "var(--color-text-secondary)", children: "Strategy" }),
+              /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 14, fontWeight: "500", color: "var(--color-text-primary)", children: underlying })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(gui.Text, { fontSize: 10, color: "var(--color-text-secondary)", children: [
               "Spot: ",
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono tabular-nums text-zinc-300", children: spotPrice.toFixed(2) })
+              /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { style: { fontFamily: MONO }, fontVariant: ["tabular-nums"], color: "var(--color-text-primary)", children: spotPrice.toFixed(2) })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(
-            "select",
+          /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { alignItems: "center", gap: 8, children: /* @__PURE__ */ jsxRuntime.jsx(
+            gui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("option", { value: preset.value, children: preset.label }, preset.value))
             }
           ) }),
-          currentPreset && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[11px] text-zinc-500 -mt-1", children: currentPreset.description }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1.5", children: legs.map((leg, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          currentPreset && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 11, marginTop: -4, color: "var(--color-text-secondary)", children: currentPreset.description }),
+          /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { gap: 6, children: legs.map((leg, i) => /* @__PURE__ */ jsxRuntime.jsx(
             LegRow,
             {
               leg,
@@ -328,40 +394,53 @@ var StrategyBuilder = React__namespace.forwardRef(
             i
           )) }),
           strategyType === "custom" && legs.length < 4 && /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
+            gui.XStack,
             {
-              type: "button",
+              unstyled: true,
+              render: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
-                "Add Leg"
+                /* @__PURE__ */ jsxRuntime.jsx("svg", { width: 12, height: 12, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 12, color: "var(--color-text-secondary)", children: "Add Leg" })
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pt-1 border-t border-zinc-800", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-zinc-500", children: "Net:" }),
-              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", justifyContent: "space-between", paddingTop: 4, borderTopWidth: 1, borderColor: "var(--color-border-divider)", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", gap: 8, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 12, color: "var(--color-text-secondary)", children: "Net:" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(gui.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__ */ jsxRuntime.jsx(
-              "button",
+              gui.XStack,
               {
-                type: "button",
+                unstyled: true,
+                render: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(gui.Text, { fontSize: 12, fontWeight: "600", color: "var(--color-button-solid-text)", children: "Review Order" })
               }
             )
           ] })