@luxfi/ui 7.4.11 → 7.4.13

package/dist/empty-state.js

@@ -1,18 +1,15 @@
 "use client";
+import { XStack, YStack, Text } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 // src/empty-state.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var apos = "\u2019";
 function upperFirst(str) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 var ICONS = {};
+var MUTED = "var(--color-text-secondary)";
 var EmptyState = React.forwardRef(
   function EmptyState2(props, ref) {
     const { title, description, term, type = "query", icon, children, className, ...rest } = props;
@@ -50,17 +47,20 @@ var EmptyState = React.forwardRef(
       return icon;
     })();
     return /* @__PURE__ */ jsx(
-      "div",
+      XStack,
       {
         ref,
-        className: cn("flex items-center justify-center py-10", className),
+        alignItems: "center",
+        justifyContent: "center",
+        paddingVertical: 40,
+        className,
         ...rest,
-        children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-5", children: [
-          iconContent && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: iconContent }),
-          descriptionContent ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-text-secondary", children: titleContent }),
-            /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary", children: descriptionContent })
-          ] }) : /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold text-text-secondary", children: titleContent }),
+        children: /* @__PURE__ */ jsxs(YStack, { alignItems: "center", gap: 20, children: [
+          iconContent && /* @__PURE__ */ jsx(XStack, { alignItems: "center", justifyContent: "center", children: iconContent }),
+          descriptionContent ? /* @__PURE__ */ jsxs(YStack, { alignItems: "center", gap: 8, children: [
+            /* @__PURE__ */ jsx(Text, { fontSize: 18, fontWeight: "600", textAlign: "center", color: MUTED, children: titleContent }),
+            /* @__PURE__ */ jsx(Text, { fontSize: 14, textAlign: "center", color: MUTED, children: descriptionContent })
+          ] }) : /* @__PURE__ */ jsx(Text, { fontSize: 18, fontWeight: "600", textAlign: "center", color: MUTED, children: titleContent }),
           children
         ] })
       }

package/dist/expiration-selector.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 formatExpDate(date) {
   const d = new Date(date);
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
@@ -39,28 +35,53 @@ var GROUP_LABELS = {
   monthly: "Monthly",
   quarterly: "Quarterly"
 };
+var SHAPE = {
+  selected: {
+    borderColor: "transparent",
+    backgroundColor: "var(--color-selected-control-bg)",
+    color: "var(--color-selected-control-text)"
+  },
+  resting: {
+    borderColor: "var(--color-border-divider)",
+    backgroundColor: "var(--card)",
+    color: "var(--color-text-secondary)",
+    hoverStyle: { borderColor: "var(--color-hover)", color: "var(--color-hover)" }
+  }
+};
 function ExpirationPill({ exp, isSelected, onClick }) {
+  const shape = isSelected ? SHAPE.selected : SHAPE.resting;
+  const dteColor = exp.dte <= 7 && !isSelected ? "var(--color-status-warn)" : isSelected ? "var(--color-selected-control-text)" : "var(--muted-foreground)";
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
+    gui.YStack,
     {
-      type: "button",
+      unstyled: true,
+      render: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button" }),
       onClick,
-      className: cn(
-        "flex flex-col items-center gap-0.5 rounded-md px-3 py-1.5 transition-colors shrink-0",
-        "border text-xs",
-        isSelected ? "border-blue-500/60 bg-blue-900/30 text-blue-300" : "border-zinc-800 bg-zinc-900/50 text-zinc-400 hover:border-zinc-600 hover:text-zinc-200"
-      ),
+      alignItems: "center",
+      gap: 2,
+      borderRadius: 6,
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      flexShrink: 0,
+      borderWidth: 1,
+      borderStyle: "solid",
+      cursor: "pointer",
+      ...shape,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium whitespace-nowrap", children: formatExpDate(exp.date) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(
-          "font-mono tabular-nums text-[10px]",
-          isSelected ? "text-[var(--foreground)]" : "text-[var(--muted-foreground)]",
-          // Near expiry is a notice, and a notice in Lux is the loudest neutral.
-          exp.dte <= 7 && !isSelected && "text-[var(--color-status-warn)]"
-        ), children: [
-          exp.dte,
-          "d"
-        ] })
+        /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { unstyled: true, fontSize: 12, fontWeight: "500", style: { whiteSpace: "nowrap" }, children: formatExpDate(exp.date) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          gui.Text,
+          {
+            fontVariant: ["tabular-nums"],
+            style: { fontFamily: "monospace" },
+            fontSize: 10,
+            color: dteColor,
+            children: [
+              exp.dte,
+              "d"
+            ]
+          }
+        )
       ]
     }
   );
@@ -90,49 +111,23 @@ var ExpirationSelector = React__namespace.forwardRef(
         label: GROUP_LABELS[type],
         items: expirations.filter((e) => e.type === type)
       })).filter((g) => g.items.length > 0);
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          ref,
-          className: cn("flex flex-col gap-2", className),
-          ...rest,
-          children: grouped.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-zinc-600 px-1", children: group.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1.5 overflow-x-auto no-scrollbar", children: group.items.map((exp) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
-              ExpirationPill,
-              {
-                exp,
-                isSelected: exp.date === selected,
-                onClick: () => onSelect(exp.date)
-              }
-            ) }, exp.date)) })
-          ] }, group.type))
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex items-center gap-1", className),
-        ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+      return /* @__PURE__ */ jsxRuntime.jsx(gui.YStack, { ref, gap: 8, className, ...rest, children: grouped.map((group) => /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { gap: 4, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          gui.Text,
           {
-            ref: scrollRef,
-            className: "flex gap-1.5 overflow-x-auto no-scrollbar",
-            children: expirations.map((exp) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
-              ExpirationPill,
-              {
-                exp,
-                isSelected: exp.date === selected,
-                onClick: () => onSelect(exp.date)
-              }
-            ) }, exp.date))
+            fontSize: 10,
+            fontWeight: "600",
+            textTransform: "uppercase",
+            letterSpacing: 0.5,
+            paddingHorizontal: 4,
+            color: "var(--color-text-secondary)",
+            children: group.label
           }
-        )
-      }
-    );
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { gap: 6, overflowX: "auto", overflowY: "hidden", className: "lux-no-scrollbar", children: group.items.map((exp) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(ExpirationPill, { exp, isSelected: exp.date === selected, onClick: () => onSelect(exp.date) }) }, exp.date)) })
+      ] }, group.type)) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { ref, alignItems: "center", gap: 4, className, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(gui.XStack, { ref: scrollRef, gap: 6, overflowX: "auto", overflowY: "hidden", className: "lux-no-scrollbar", children: expirations.map((exp) => /* @__PURE__ */ jsxRuntime.jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsxRuntime.jsx(ExpirationPill, { exp, isSelected: exp.date === selected, onClick: () => onSelect(exp.date) }) }, exp.date)) }) });
   }
 );
 

package/dist/expiration-selector.js

@@ -1,12 +1,8 @@
 "use client";
+import { YStack, Text, XStack } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 function formatExpDate(date) {
   const d = new Date(date);
   return d.toLocaleDateString("en-US", { month: "short", day: "numeric" });
@@ -17,28 +13,53 @@ var GROUP_LABELS = {
   monthly: "Monthly",
   quarterly: "Quarterly"
 };
+var SHAPE = {
+  selected: {
+    borderColor: "transparent",
+    backgroundColor: "var(--color-selected-control-bg)",
+    color: "var(--color-selected-control-text)"
+  },
+  resting: {
+    borderColor: "var(--color-border-divider)",
+    backgroundColor: "var(--card)",
+    color: "var(--color-text-secondary)",
+    hoverStyle: { borderColor: "var(--color-hover)", color: "var(--color-hover)" }
+  }
+};
 function ExpirationPill({ exp, isSelected, onClick }) {
+  const shape = isSelected ? SHAPE.selected : SHAPE.resting;
+  const dteColor = exp.dte <= 7 && !isSelected ? "var(--color-status-warn)" : isSelected ? "var(--color-selected-control-text)" : "var(--muted-foreground)";
   return /* @__PURE__ */ jsxs(
-    "button",
+    YStack,
     {
-      type: "button",
+      unstyled: true,
+      render: /* @__PURE__ */ jsx("button", { type: "button" }),
       onClick,
-      className: cn(
-        "flex flex-col items-center gap-0.5 rounded-md px-3 py-1.5 transition-colors shrink-0",
-        "border text-xs",
-        isSelected ? "border-blue-500/60 bg-blue-900/30 text-blue-300" : "border-zinc-800 bg-zinc-900/50 text-zinc-400 hover:border-zinc-600 hover:text-zinc-200"
-      ),
+      alignItems: "center",
+      gap: 2,
+      borderRadius: 6,
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      flexShrink: 0,
+      borderWidth: 1,
+      borderStyle: "solid",
+      cursor: "pointer",
+      ...shape,
       children: [
-        /* @__PURE__ */ jsx("span", { className: "font-medium whitespace-nowrap", children: formatExpDate(exp.date) }),
-        /* @__PURE__ */ jsxs("span", { className: cn(
-          "font-mono tabular-nums text-[10px]",
-          isSelected ? "text-[var(--foreground)]" : "text-[var(--muted-foreground)]",
-          // Near expiry is a notice, and a notice in Lux is the loudest neutral.
-          exp.dte <= 7 && !isSelected && "text-[var(--color-status-warn)]"
-        ), children: [
-          exp.dte,
-          "d"
-        ] })
+        /* @__PURE__ */ jsx(Text, { unstyled: true, fontSize: 12, fontWeight: "500", style: { whiteSpace: "nowrap" }, children: formatExpDate(exp.date) }),
+        /* @__PURE__ */ jsxs(
+          Text,
+          {
+            fontVariant: ["tabular-nums"],
+            style: { fontFamily: "monospace" },
+            fontSize: 10,
+            color: dteColor,
+            children: [
+              exp.dte,
+              "d"
+            ]
+          }
+        )
       ]
     }
   );
@@ -68,49 +89,23 @@ var ExpirationSelector = React.forwardRef(
         label: GROUP_LABELS[type],
         items: expirations.filter((e) => e.type === type)
       })).filter((g) => g.items.length > 0);
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          ref,
-          className: cn("flex flex-col gap-2", className),
-          ...rest,
-          children: grouped.map((group) => /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-wider text-zinc-600 px-1", children: group.label }),
-            /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 overflow-x-auto no-scrollbar", children: group.items.map((exp) => /* @__PURE__ */ jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsx(
-              ExpirationPill,
-              {
-                exp,
-                isSelected: exp.date === selected,
-                onClick: () => onSelect(exp.date)
-              }
-            ) }, exp.date)) })
-          ] }, group.type))
-        }
-      );
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn("flex items-center gap-1", className),
-        ...rest,
-        children: /* @__PURE__ */ jsx(
-          "div",
+      return /* @__PURE__ */ jsx(YStack, { ref, gap: 8, className, ...rest, children: grouped.map((group) => /* @__PURE__ */ jsxs(YStack, { gap: 4, children: [
+        /* @__PURE__ */ jsx(
+          Text,
           {
-            ref: scrollRef,
-            className: "flex gap-1.5 overflow-x-auto no-scrollbar",
-            children: expirations.map((exp) => /* @__PURE__ */ jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsx(
-              ExpirationPill,
-              {
-                exp,
-                isSelected: exp.date === selected,
-                onClick: () => onSelect(exp.date)
-              }
-            ) }, exp.date))
+            fontSize: 10,
+            fontWeight: "600",
+            textTransform: "uppercase",
+            letterSpacing: 0.5,
+            paddingHorizontal: 4,
+            color: "var(--color-text-secondary)",
+            children: group.label
           }
-        )
-      }
-    );
+        ),
+        /* @__PURE__ */ jsx(XStack, { gap: 6, overflowX: "auto", overflowY: "hidden", className: "lux-no-scrollbar", children: group.items.map((exp) => /* @__PURE__ */ jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsx(ExpirationPill, { exp, isSelected: exp.date === selected, onClick: () => onSelect(exp.date) }) }, exp.date)) })
+      ] }, group.type)) });
+    }
+    return /* @__PURE__ */ jsx(XStack, { ref, alignItems: "center", gap: 4, className, ...rest, children: /* @__PURE__ */ jsx(XStack, { ref: scrollRef, gap: 6, overflowX: "auto", overflowY: "hidden", className: "lux-no-scrollbar", children: expirations.map((exp) => /* @__PURE__ */ jsx("div", { "data-selected": exp.date === selected || void 0, children: /* @__PURE__ */ jsx(ExpirationPill, { exp, isSelected: exp.date === selected, onClick: () => onSelect(exp.date) }) }, exp.date)) }) });
   }
 );
 

package/dist/greeks-display.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,44 +25,55 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 var GREEKS = [
-  { key: "delta", label: "Delta", symbol: "\u0394", color: "text-[var(--foreground)]", barColor: "bg-[var(--foreground)]", decimals: 4, maxMagnitude: 1 },
-  { key: "gamma", label: "Gamma", symbol: "\u0393", color: "text-[var(--chart-1)]", barColor: "bg-[var(--chart-1)]", decimals: 4, maxMagnitude: 0.1 },
-  { key: "theta", label: "Theta", symbol: "\u0398", color: "text-[var(--chart-4)]", barColor: "bg-[var(--chart-4)]", decimals: 4, maxMagnitude: 1 },
-  { key: "vega", label: "Vega", symbol: "\u03BD", color: "text-[var(--chart-2)]", barColor: "bg-[var(--chart-2)]", decimals: 4, maxMagnitude: 1 },
-  { key: "rho", label: "Rho", symbol: "\u03C1", color: "text-[var(--chart-3)]", barColor: "bg-[var(--chart-3)]", decimals: 4, maxMagnitude: 1 },
-  { key: "iv", label: "IV", symbol: "\u03C3", color: "text-[var(--chart-5)]", barColor: "bg-[var(--chart-5)]", decimals: 1, maxMagnitude: 100 }
+  { key: "delta", label: "Delta", symbol: "\u0394", color: "var(--foreground)", barColor: "var(--foreground)", decimals: 4, maxMagnitude: 1 },
+  { key: "gamma", label: "Gamma", symbol: "\u0393", color: "var(--chart-1)", barColor: "var(--chart-1)", decimals: 4, maxMagnitude: 0.1 },
+  { key: "theta", label: "Theta", symbol: "\u0398", color: "var(--chart-4)", barColor: "var(--chart-4)", decimals: 4, maxMagnitude: 1 },
+  { key: "vega", label: "Vega", symbol: "\u03BD", color: "var(--chart-2)", barColor: "var(--chart-2)", decimals: 4, maxMagnitude: 1 },
+  { key: "rho", label: "Rho", symbol: "\u03C1", color: "var(--chart-3)", barColor: "var(--chart-3)", decimals: 4, maxMagnitude: 1 },
+  { key: "iv", label: "IV", symbol: "\u03C3", color: "var(--chart-5)", barColor: "var(--chart-5)", decimals: 1, maxMagnitude: 100 }
 ];
 function GreekItem({ def, value, compact }) {
   const magnitude = Math.min(Math.abs(value) / def.maxMagnitude, 1);
   const displayValue = def.key === "iv" ? `${(value * 100).toFixed(def.decimals)}%` : value.toFixed(def.decimals);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center gap-1.5",
-        compact ? "min-w-0" : "min-w-[100px]"
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-[10px] font-semibold shrink-0", def.color), children: def.symbol }),
-        !compact && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-zinc-500 shrink-0 w-[34px]", children: def.label }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(
-          "font-mono tabular-nums text-xs text-zinc-200 shrink-0",
-          value < 0 && "text-red-400"
-        ), children: displayValue }),
-        !compact && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-1 rounded-full bg-zinc-800 min-w-[24px] max-w-[48px] overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+  return /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", gap: 6, minWidth: compact ? 0 : 100, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 10, fontWeight: "600", flexShrink: 0, color: def.color, children: def.symbol }),
+    !compact && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 10, flexShrink: 0, width: 34, color: "var(--color-text-secondary)", children: def.label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      gui.Text,
+      {
+        fontSize: 12,
+        flexShrink: 0,
+        style: { fontFamily: "monospace" },
+        fontVariant: ["tabular-nums"],
+        color: value < 0 ? "var(--color-status-bad)" : "var(--color-text-primary)",
+        children: displayValue
+      }
+    ),
+    !compact && /* @__PURE__ */ jsxRuntime.jsx(
+      gui.View,
+      {
+        flex: 1,
+        height: 4,
+        borderRadius: 9999,
+        minWidth: 24,
+        maxWidth: 48,
+        overflow: "hidden",
+        backgroundColor: "var(--color-progress-track)",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          gui.View,
           {
-            className: cn("h-full rounded-full transition-all", def.barColor),
-            style: { width: `${magnitude * 100}%`, opacity: 0.7 }
+            height: "100%",
+            borderRadius: 9999,
+            transition: "quick",
+            width: `${magnitude * 100}%`,
+            opacity: 0.7,
+            backgroundColor: def.barColor
           }
-        ) })
-      ]
-    }
-  );
+        )
+      }
+    )
+  ] });
 }
 var GreeksDisplay = React__namespace.forwardRef(
   function GreeksDisplay2(props, ref) {
@@ -88,14 +98,13 @@ var GreeksDisplay = React__namespace.forwardRef(
     };
     const activeGreeks = GREEKS.filter((g) => values[g.key] !== void 0);
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      gui.XStack,
       {
         ref,
-        className: cn(
-          "flex flex-wrap items-center",
-          compact ? "gap-3" : "gap-4",
-          className
-        ),
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: compact ? 12 : 16,
+        className,
         ...rest,
         children: activeGreeks.map((g) => /* @__PURE__ */ jsxRuntime.jsx(
           GreekItem,

package/dist/greeks-display.js

@@ -1,47 +1,57 @@
 "use client";
+import { XStack, Text, View } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var GREEKS = [
-  { key: "delta", label: "Delta", symbol: "\u0394", color: "text-[var(--foreground)]", barColor: "bg-[var(--foreground)]", decimals: 4, maxMagnitude: 1 },
-  { key: "gamma", label: "Gamma", symbol: "\u0393", color: "text-[var(--chart-1)]", barColor: "bg-[var(--chart-1)]", decimals: 4, maxMagnitude: 0.1 },
-  { key: "theta", label: "Theta", symbol: "\u0398", color: "text-[var(--chart-4)]", barColor: "bg-[var(--chart-4)]", decimals: 4, maxMagnitude: 1 },
-  { key: "vega", label: "Vega", symbol: "\u03BD", color: "text-[var(--chart-2)]", barColor: "bg-[var(--chart-2)]", decimals: 4, maxMagnitude: 1 },
-  { key: "rho", label: "Rho", symbol: "\u03C1", color: "text-[var(--chart-3)]", barColor: "bg-[var(--chart-3)]", decimals: 4, maxMagnitude: 1 },
-  { key: "iv", label: "IV", symbol: "\u03C3", color: "text-[var(--chart-5)]", barColor: "bg-[var(--chart-5)]", decimals: 1, maxMagnitude: 100 }
+  { key: "delta", label: "Delta", symbol: "\u0394", color: "var(--foreground)", barColor: "var(--foreground)", decimals: 4, maxMagnitude: 1 },
+  { key: "gamma", label: "Gamma", symbol: "\u0393", color: "var(--chart-1)", barColor: "var(--chart-1)", decimals: 4, maxMagnitude: 0.1 },
+  { key: "theta", label: "Theta", symbol: "\u0398", color: "var(--chart-4)", barColor: "var(--chart-4)", decimals: 4, maxMagnitude: 1 },
+  { key: "vega", label: "Vega", symbol: "\u03BD", color: "var(--chart-2)", barColor: "var(--chart-2)", decimals: 4, maxMagnitude: 1 },
+  { key: "rho", label: "Rho", symbol: "\u03C1", color: "var(--chart-3)", barColor: "var(--chart-3)", decimals: 4, maxMagnitude: 1 },
+  { key: "iv", label: "IV", symbol: "\u03C3", color: "var(--chart-5)", barColor: "var(--chart-5)", decimals: 1, maxMagnitude: 100 }
 ];
 function GreekItem({ def, value, compact }) {
   const magnitude = Math.min(Math.abs(value) / def.maxMagnitude, 1);
   const displayValue = def.key === "iv" ? `${(value * 100).toFixed(def.decimals)}%` : value.toFixed(def.decimals);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "flex items-center gap-1.5",
-        compact ? "min-w-0" : "min-w-[100px]"
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: cn("text-[10px] font-semibold shrink-0", def.color), children: def.symbol }),
-        !compact && /* @__PURE__ */ jsx("span", { className: "text-[10px] text-zinc-500 shrink-0 w-[34px]", children: def.label }),
-        /* @__PURE__ */ jsx("span", { className: cn(
-          "font-mono tabular-nums text-xs text-zinc-200 shrink-0",
-          value < 0 && "text-red-400"
-        ), children: displayValue }),
-        !compact && /* @__PURE__ */ jsx("div", { className: "flex-1 h-1 rounded-full bg-zinc-800 min-w-[24px] max-w-[48px] overflow-hidden", children: /* @__PURE__ */ jsx(
-          "div",
+  return /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 6, minWidth: compact ? 0 : 100, children: [
+    /* @__PURE__ */ jsx(Text, { fontSize: 10, fontWeight: "600", flexShrink: 0, color: def.color, children: def.symbol }),
+    !compact && /* @__PURE__ */ jsx(Text, { fontSize: 10, flexShrink: 0, width: 34, color: "var(--color-text-secondary)", children: def.label }),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        fontSize: 12,
+        flexShrink: 0,
+        style: { fontFamily: "monospace" },
+        fontVariant: ["tabular-nums"],
+        color: value < 0 ? "var(--color-status-bad)" : "var(--color-text-primary)",
+        children: displayValue
+      }
+    ),
+    !compact && /* @__PURE__ */ jsx(
+      View,
+      {
+        flex: 1,
+        height: 4,
+        borderRadius: 9999,
+        minWidth: 24,
+        maxWidth: 48,
+        overflow: "hidden",
+        backgroundColor: "var(--color-progress-track)",
+        children: /* @__PURE__ */ jsx(
+          View,
           {
-            className: cn("h-full rounded-full transition-all", def.barColor),
-            style: { width: `${magnitude * 100}%`, opacity: 0.7 }
+            height: "100%",
+            borderRadius: 9999,
+            transition: "quick",
+            width: `${magnitude * 100}%`,
+            opacity: 0.7,
+            backgroundColor: def.barColor
           }
-        ) })
-      ]
-    }
-  );
+        )
+      }
+    )
+  ] });
 }
 var GreeksDisplay = React.forwardRef(
   function GreeksDisplay2(props, ref) {
@@ -66,14 +76,13 @@ var GreeksDisplay = React.forwardRef(
     };
     const activeGreeks = GREEKS.filter((g) => values[g.key] !== void 0);
     return /* @__PURE__ */ jsx(
-      "div",
+      XStack,
       {
         ref,
-        className: cn(
-          "flex flex-wrap items-center",
-          compact ? "gap-3" : "gap-4",
-          className
-        ),
+        flexWrap: "wrap",
+        alignItems: "center",
+        gap: compact ? 12 : 16,
+        className,
         ...rest,
         children: activeGreeks.map((g) => /* @__PURE__ */ jsx(
           GreekItem,