@luxfi/ui 7.4.10 → 7.4.12

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/pnl-diagram.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 calcLegPnl(leg, price, multiplier) {
   const premium = leg.premium ?? 0;
   let intrinsic;
@@ -160,19 +156,21 @@ var PnlDiagram = React__namespace.forwardRef(
       chartH
     );
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      gui.View,
       {
         ref,
-        className: cn("w-full", className),
+        unstyled: true,
+        width: "100%",
+        className,
         ...rest,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: "w-full h-full min-h-[200px]", children: /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(gui.View, { unstyled: true, ref: containerRef, width: "100%", height: "100%", minHeight: 200, children: /* @__PURE__ */ jsxRuntime.jsxs(
             "svg",
             {
               width,
               height,
               viewBox: `0 0 ${width} ${height}`,
-              className: "select-none",
+              style: { userSelect: "none" },
               onMouseMove: handleMouseMove,
               onMouseLeave: handleMouseLeave,
               children: [
@@ -411,16 +409,18 @@ var PnlDiagram = React__namespace.forwardRef(
               ]
             }
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-4 px-2 pt-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-0.5 w-4 bg-zinc-200 rounded" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-zinc-400", children: "Combined" })
+          /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { flexWrap: "wrap", alignItems: "center", gap: 16, paddingHorizontal: 8, paddingTop: 4, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", gap: 6, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(gui.View, { height: 2, width: 16, borderRadius: 4, backgroundColor: "var(--color-gray-200)" }),
+              /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 10, color: "var(--color-text-secondary)", children: "Combined" })
             ] }),
-            legs.map((leg, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+            legs.map((leg, i) => /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", gap: 6, children: [
               /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+                gui.View,
                 {
-                  className: "h-0.5 w-4 rounded",
+                  height: 2,
+                  width: 16,
+                  borderRadius: 4,
                   style: {
                     backgroundColor: LEG_COLORS[i % LEG_COLORS.length],
                     opacity: 0.6,
@@ -428,7 +428,7 @@ var PnlDiagram = React__namespace.forwardRef(
                   }
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(gui.Text, { fontSize: 10, color: "var(--color-text-secondary)", children: [
                 leg.action === "buy" ? "B" : "S",
                 " ",
                 leg.quantity,
@@ -438,9 +438,9 @@ var PnlDiagram = React__namespace.forwardRef(
                 leg.type === "call" ? "C" : "P"
               ] })
             ] }, i)),
-            breakevens.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-1.5 rounded-full", style: { background: BREAKEVEN_COLOR } }),
-              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+            breakevens.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", gap: 6, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(gui.View, { width: 6, height: 6, borderRadius: 9999, style: { background: BREAKEVEN_COLOR } }),
+              /* @__PURE__ */ jsxRuntime.jsxs(gui.Text, { fontSize: 10, color: "var(--color-text-secondary)", children: [
                 "BE: ",
                 breakevens.map((b) => b.toFixed(1)).join(", ")
               ] })