@luxfi/ui 7.4.11 → 7.4.13

package/dist/option-position.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,13 +25,11 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 function formatDate(date) {
   const d = new Date(date);
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
 }
+var MONO = { fontFamily: "monospace" };
 var OptionPositionCard = React__namespace.forwardRef(
   function OptionPositionCard2(props, ref) {
     const {
@@ -46,64 +43,76 @@ var OptionPositionCard = React__namespace.forwardRef(
     const isLong = position.quantity > 0;
     const isCall = position.type === "call";
     const isProfitable = position.pnl >= 0;
+    const pnlColor = isProfitable ? "var(--color-status-good)" : "var(--color-status-bad)";
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      gui.YStack,
       {
         ref,
-        className: cn(
-          "flex flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3",
-          className
-        ),
+        gap: 8,
+        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", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
-              "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-semibold",
-              // Call vs put is a rank difference, not a hue difference.
-              isCall ? "bg-[var(--secondary)] text-[var(--foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"
-            ), children: [
-              position.underlying,
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-mono tabular-nums", children: position.strike }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "uppercase", children: position.type === "call" ? "C" : "P" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-zinc-500 font-normal", children: formatDate(position.expiration) })
-            ] }) }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
-              "text-xs font-semibold font-mono tabular-nums",
-              isLong ? "text-emerald-400" : "text-red-400"
-            ), children: [
-              isLong ? "+" : "",
-              position.quantity
-            ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { alignItems: "center", gap: 8, children: /* @__PURE__ */ jsxRuntime.jsxs(
+              gui.XStack,
+              {
+                alignItems: "center",
+                gap: 4,
+                borderRadius: 4,
+                paddingHorizontal: 6,
+                paddingVertical: 2,
+                backgroundColor: isCall ? "var(--secondary)" : "var(--muted)",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 12, fontWeight: "600", color: isCall ? "var(--foreground)" : "var(--muted-foreground)", children: position.underlying }),
+                  /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 12, fontWeight: "600", style: MONO, fontVariant: ["tabular-nums"], color: isCall ? "var(--foreground)" : "var(--muted-foreground)", children: position.strike }),
+                  /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 12, fontWeight: "600", textTransform: "uppercase", color: isCall ? "var(--foreground)" : "var(--muted-foreground)", children: position.type === "call" ? "C" : "P" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 12, fontWeight: "400", color: "var(--color-text-secondary)", children: formatDate(position.expiration) })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              gui.Text,
+              {
+                fontSize: 12,
+                fontWeight: "600",
+                style: MONO,
+                fontVariant: ["tabular-nums"],
+                color: isLong ? "var(--color-status-good)" : "var(--color-status-bad)",
+                children: [
+                  isLong ? "+" : "",
+                  position.quantity
+                ]
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-3", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] uppercase tracking-wider text-zinc-500", children: "Avg Cost" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono tabular-nums text-xs text-zinc-300", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { gap: 12, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { flex: 1, gap: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 10, textTransform: "uppercase", letterSpacing: 0.5, color: "var(--color-text-secondary)", children: "Avg Cost" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(gui.Text, { fontSize: 12, style: MONO, fontVariant: ["tabular-nums"], color: "var(--color-text-primary)", children: [
                 "$",
                 position.avgCost.toFixed(2)
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] uppercase tracking-wider text-zinc-500", children: "Value" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono tabular-nums text-xs text-zinc-300", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { flex: 1, gap: 2, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 10, textTransform: "uppercase", letterSpacing: 0.5, color: "var(--color-text-secondary)", children: "Value" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(gui.Text, { fontSize: 12, style: MONO, fontVariant: ["tabular-nums"], color: "var(--color-text-primary)", children: [
                 "$",
                 position.currentValue.toFixed(2)
               ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] uppercase tracking-wider text-zinc-500", children: "P/L" }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
-                  "font-mono tabular-nums text-xs font-semibold",
-                  isProfitable ? "text-emerald-400" : "text-red-400"
-                ), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { flex: 1, gap: 2, alignItems: "flex-end", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 10, textTransform: "uppercase", letterSpacing: 0.5, color: "var(--color-text-secondary)", children: "P/L" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", gap: 4, children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(gui.Text, { fontSize: 12, fontWeight: "600", style: MONO, fontVariant: ["tabular-nums"], color: pnlColor, children: [
                   isProfitable ? "+" : "",
                   position.pnl.toFixed(2)
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
-                  "font-mono tabular-nums text-[10px]",
-                  isProfitable ? "text-emerald-500/70" : "text-red-500/70"
-                ), children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(gui.Text, { fontSize: 10, style: MONO, fontVariant: ["tabular-nums"], color: pnlColor, opacity: 0.7, children: [
                   "(",
                   isProfitable ? "+" : "",
                   position.pnlPercent.toFixed(1),
@@ -112,53 +121,47 @@ var OptionPositionCard = React__namespace.forwardRef(
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 border-t border-zinc-800/60 pt-2", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(GreekPill, { label: "\u0394", value: position.greeks.delta, color: "text-blue-400" }),
-            /* @__PURE__ */ jsxRuntime.jsx(GreekPill, { label: "\u0393", value: position.greeks.gamma, color: "text-purple-400" }),
-            /* @__PURE__ */ jsxRuntime.jsx(GreekPill, { label: "\u0398", value: position.greeks.theta, color: "text-red-400" }),
-            /* @__PURE__ */ jsxRuntime.jsx(GreekPill, { label: "\u03BD", value: position.greeks.vega, color: "text-emerald-400" })
+          /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", gap: 12, borderTopWidth: 1, borderColor: "var(--color-border-divider)", paddingTop: 8, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(GreekPill, { label: "\u0394", value: position.greeks.delta, color: "var(--foreground)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(GreekPill, { label: "\u0393", value: position.greeks.gamma, color: "var(--chart-1)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(GreekPill, { label: "\u0398", value: position.greeks.theta, color: "var(--chart-4)" }),
+            /* @__PURE__ */ jsxRuntime.jsx(GreekPill, { label: "\u03BD", value: position.greeks.vega, color: "var(--chart-2)" })
           ] }),
-          (onClose || onExercise || onRoll) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 border-t border-zinc-800/60 pt-2", children: [
-            onClose && /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onClose(position),
-                className: "flex-1 rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100 transition-colors",
-                children: "Close"
-              }
-            ),
-            onExercise && /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onExercise(position),
-                className: "flex-1 rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100 transition-colors",
-                children: "Exercise"
-              }
-            ),
-            onRoll && /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onRoll(position),
-                className: "flex-1 rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100 transition-colors",
-                children: "Roll"
-              }
-            )
+          (onClose || onExercise || onRoll) && /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", gap: 8, borderTopWidth: 1, borderColor: "var(--color-border-divider)", paddingTop: 8, children: [
+            onClose && /* @__PURE__ */ jsxRuntime.jsx(ActionButton, { onClick: () => onClose(position), children: "Close" }),
+            onExercise && /* @__PURE__ */ jsxRuntime.jsx(ActionButton, { onClick: () => onExercise(position), children: "Exercise" }),
+            onRoll && /* @__PURE__ */ jsxRuntime.jsx(ActionButton, { onClick: () => onRoll(position), children: "Roll" })
           ] })
         ]
       }
     );
   }
 );
+function ActionButton({ onClick, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    gui.XStack,
+    {
+      unstyled: true,
+      render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
+      onClick,
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: 6,
+      borderWidth: 0,
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      backgroundColor: "var(--color-button-subtle-bg)",
+      cursor: "pointer",
+      hoverStyle: { color: "var(--color-hover)" },
+      children: /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 12, fontWeight: "500", color: "var(--color-button-subtle-fg)", children })
+    }
+  );
+}
 function GreekPill({ label, value, color }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px] font-semibold", color), children: label }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-      "font-mono tabular-nums text-[11px]",
-      value < 0 ? "text-red-400" : "text-zinc-400"
-    ), children: value.toFixed(4) })
+  return /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", gap: 4, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 10, fontWeight: "600", color, children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 11, style: MONO, fontVariant: ["tabular-nums"], color: value < 0 ? "var(--color-status-bad)" : "var(--color-text-secondary)", children: value.toFixed(4) })
   ] });
 }
 

package/dist/option-position.js

@@ -1,16 +1,13 @@
 "use client";
+import { YStack, XStack, Text } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 function formatDate(date) {
   const d = new Date(date);
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
 }
+var MONO = { fontFamily: "monospace" };
 var OptionPositionCard = React.forwardRef(
   function OptionPositionCard2(props, ref) {
     const {
@@ -24,64 +21,76 @@ var OptionPositionCard = React.forwardRef(
     const isLong = position.quantity > 0;
     const isCall = position.type === "call";
     const isProfitable = position.pnl >= 0;
+    const pnlColor = isProfitable ? "var(--color-status-good)" : "var(--color-status-bad)";
     return /* @__PURE__ */ jsxs(
-      "div",
+      YStack,
       {
         ref,
-        className: cn(
-          "flex flex-col gap-2 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3",
-          className
-        ),
+        gap: 8,
+        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", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs("span", { className: cn(
-              "inline-flex items-center gap-1 rounded px-1.5 py-0.5 text-xs font-semibold",
-              // Call vs put is a rank difference, not a hue difference.
-              isCall ? "bg-[var(--secondary)] text-[var(--foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"
-            ), children: [
-              position.underlying,
-              /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums", children: position.strike }),
-              /* @__PURE__ */ jsx("span", { className: "uppercase", children: position.type === "call" ? "C" : "P" }),
-              /* @__PURE__ */ jsx("span", { className: "text-zinc-500 font-normal", children: formatDate(position.expiration) })
-            ] }) }),
-            /* @__PURE__ */ jsxs("span", { className: cn(
-              "text-xs font-semibold font-mono tabular-nums",
-              isLong ? "text-emerald-400" : "text-red-400"
-            ), children: [
-              isLong ? "+" : "",
-              position.quantity
-            ] })
+          /* @__PURE__ */ jsxs(XStack, { alignItems: "center", justifyContent: "space-between", children: [
+            /* @__PURE__ */ jsx(XStack, { alignItems: "center", gap: 8, children: /* @__PURE__ */ jsxs(
+              XStack,
+              {
+                alignItems: "center",
+                gap: 4,
+                borderRadius: 4,
+                paddingHorizontal: 6,
+                paddingVertical: 2,
+                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", 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) })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(
+              Text,
+              {
+                fontSize: 12,
+                fontWeight: "600",
+                style: MONO,
+                fontVariant: ["tabular-nums"],
+                color: isLong ? "var(--color-status-good)" : "var(--color-status-bad)",
+                children: [
+                  isLong ? "+" : "",
+                  position.quantity
+                ]
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-zinc-500", children: "Avg Cost" }),
-              /* @__PURE__ */ jsxs("span", { className: "font-mono tabular-nums text-xs text-zinc-300", children: [
+          /* @__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: [
                 "$",
                 position.avgCost.toFixed(2)
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-zinc-500", children: "Value" }),
-              /* @__PURE__ */ jsxs("span", { className: "font-mono tabular-nums text-xs text-zinc-300", 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: "Value" }),
+              /* @__PURE__ */ jsxs(Text, { fontSize: 12, style: MONO, fontVariant: ["tabular-nums"], color: "var(--color-text-primary)", children: [
                 "$",
                 position.currentValue.toFixed(2)
               ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] uppercase tracking-wider text-zinc-500", children: "P/L" }),
-              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsxs("span", { className: cn(
-                  "font-mono tabular-nums text-xs font-semibold",
-                  isProfitable ? "text-emerald-400" : "text-red-400"
-                ), children: [
+            /* @__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: [
                   isProfitable ? "+" : "",
                   position.pnl.toFixed(2)
                 ] }),
-                /* @__PURE__ */ jsxs("span", { className: cn(
-                  "font-mono tabular-nums text-[10px]",
-                  isProfitable ? "text-emerald-500/70" : "text-red-500/70"
-                ), children: [
+                /* @__PURE__ */ jsxs(Text, { fontSize: 10, style: MONO, fontVariant: ["tabular-nums"], color: pnlColor, opacity: 0.7, children: [
                   "(",
                   isProfitable ? "+" : "",
                   position.pnlPercent.toFixed(1),
@@ -90,53 +99,47 @@ var OptionPositionCard = React.forwardRef(
               ] })
             ] })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 border-t border-zinc-800/60 pt-2", children: [
-            /* @__PURE__ */ jsx(GreekPill, { label: "\u0394", value: position.greeks.delta, color: "text-blue-400" }),
-            /* @__PURE__ */ jsx(GreekPill, { label: "\u0393", value: position.greeks.gamma, color: "text-purple-400" }),
-            /* @__PURE__ */ jsx(GreekPill, { label: "\u0398", value: position.greeks.theta, color: "text-red-400" }),
-            /* @__PURE__ */ jsx(GreekPill, { label: "\u03BD", value: position.greeks.vega, color: "text-emerald-400" })
+          /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 12, borderTopWidth: 1, borderColor: "var(--color-border-divider)", paddingTop: 8, children: [
+            /* @__PURE__ */ jsx(GreekPill, { label: "\u0394", value: position.greeks.delta, color: "var(--foreground)" }),
+            /* @__PURE__ */ jsx(GreekPill, { label: "\u0393", value: position.greeks.gamma, color: "var(--chart-1)" }),
+            /* @__PURE__ */ jsx(GreekPill, { label: "\u0398", value: position.greeks.theta, color: "var(--chart-4)" }),
+            /* @__PURE__ */ jsx(GreekPill, { label: "\u03BD", value: position.greeks.vega, color: "var(--chart-2)" })
           ] }),
-          (onClose || onExercise || onRoll) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-t border-zinc-800/60 pt-2", children: [
-            onClose && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onClose(position),
-                className: "flex-1 rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100 transition-colors",
-                children: "Close"
-              }
-            ),
-            onExercise && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onExercise(position),
-                className: "flex-1 rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100 transition-colors",
-                children: "Exercise"
-              }
-            ),
-            onRoll && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                onClick: () => onRoll(position),
-                className: "flex-1 rounded-md bg-zinc-800 px-2 py-1 text-xs font-medium text-zinc-300 hover:bg-zinc-700 hover:text-zinc-100 transition-colors",
-                children: "Roll"
-              }
-            )
+          (onClose || onExercise || onRoll) && /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 8, borderTopWidth: 1, borderColor: "var(--color-border-divider)", paddingTop: 8, children: [
+            onClose && /* @__PURE__ */ jsx(ActionButton, { onClick: () => onClose(position), children: "Close" }),
+            onExercise && /* @__PURE__ */ jsx(ActionButton, { onClick: () => onExercise(position), children: "Exercise" }),
+            onRoll && /* @__PURE__ */ jsx(ActionButton, { onClick: () => onRoll(position), children: "Roll" })
           ] })
         ]
       }
     );
   }
 );
+function ActionButton({ onClick, children }) {
+  return /* @__PURE__ */ jsx(
+    XStack,
+    {
+      unstyled: true,
+      render: /* @__PURE__ */ jsx("button", { type: "button" }),
+      onClick,
+      flex: 1,
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: 6,
+      borderWidth: 0,
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      backgroundColor: "var(--color-button-subtle-bg)",
+      cursor: "pointer",
+      hoverStyle: { color: "var(--color-hover)" },
+      children: /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "500", color: "var(--color-button-subtle-fg)", children })
+    }
+  );
+}
 function GreekPill({ label, value, color }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-    /* @__PURE__ */ jsx("span", { className: cn("text-[10px] font-semibold", color), children: label }),
-    /* @__PURE__ */ jsx("span", { className: cn(
-      "font-mono tabular-nums text-[11px]",
-      value < 0 ? "text-red-400" : "text-zinc-400"
-    ), children: value.toFixed(4) })
+  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) })
   ] });
 }
 

package/dist/pin-input.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) {
@@ -27,23 +26,26 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/pin-input.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-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 = React__namespace.forwardRef(
   function PinInput2(props, ref) {
     const {
@@ -135,8 +137,8 @@ var PinInput = React__namespace.forwardRef(
     const onKeyDownAtIndex = React__namespace.useCallback((index) => (e) => {
       handleKeyDown(index, e);
     }, [handleKeyDown]);
-    const bgStyle = bgColor ? { backgroundColor: `var(--color-${bgColor.replace(/\./g, "-")})` } : void 0;
-    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(gui.XStack, { ref: rootRef, alignItems: "center", gap: attached ? 0 : 8, className, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
@@ -148,9 +150,10 @@ var PinInput = React__namespace.forwardRef(
         }
       ),
       Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
+        gui.Input,
         {
           ref: setInputRef(index),
+          unstyled: true,
           type: "text",
           inputMode: "numeric",
           autoComplete: otp ? "one-time-code" : "off",
@@ -159,14 +162,12 @@ var PinInput = React__namespace.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,