@luxfi/ui 7.4.11 → 7.4.13

package/dist/input-group.cjs

@@ -1,10 +1,9 @@
 "use client";
 'use strict';
 
+var gui = require('@hanzo/gui');
 var esToolkit = require('es-toolkit');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -28,9 +27,14 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/input-group.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
+var ink = (children, Wrap = gui.Text, props = {}) => {
+  let hasText = false;
+  React.Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return React.Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? React.createElement(Wrap, props, child) : child);
+};
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React__namespace.useLayoutEffect : React__namespace.useEffect;
 var InputGroup = React__namespace.forwardRef(
   function InputGroup2(props, ref) {
@@ -99,22 +103,30 @@ var InputGroup = React__namespace.forwardRef(
     const { className: startClassName, ...startRest } = startElementProps ?? {};
     const { className: endClassName, ...endRest } = endElementProps ?? {};
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+      gui.XStack,
       {
         ref: combinedRef,
-        className: cn("relative flex w-full items-center", className),
+        position: "relative",
+        width: "100%",
+        alignItems: "center",
+        className,
         ...rest,
         children: [
           startElement && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+            gui.XStack,
             {
               ref: startElementRef,
-              className: cn(
-                "pointer-events-none absolute inset-y-0 left-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]",
-                startClassName
-              ),
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: 0,
+              zIndex: 1,
+              alignItems: "center",
+              pointerEvents: "none",
+              style: { color: "var(--color-icon-secondary)" },
+              className: startClassName,
               ...startRest,
-              children: startElement
+              children: ink(startElement)
             }
           ),
           React__namespace.Children.map(children, (child) => {
@@ -133,15 +145,20 @@ var InputGroup = React__namespace.forwardRef(
             });
           }),
           endElement && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+            gui.XStack,
             {
               ref: endElementRef,
-              className: cn(
-                "pointer-events-none absolute inset-y-0 right-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]",
-                endClassName
-              ),
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              right: 0,
+              zIndex: 1,
+              alignItems: "center",
+              pointerEvents: "none",
+              style: { color: "var(--color-icon-secondary)" },
+              className: endClassName,
               ...endRest,
-              children: endElement
+              children: ink(endElement)
             }
           )
         ]

package/dist/input-group.js

@@ -1,14 +1,19 @@
 "use client";
+import { XStack, Text } from '@hanzo/gui';
 import { debounce } from 'es-toolkit';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { Children, createElement } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/input-group.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
+var ink = (children, Wrap = Text, props = {}) => {
+  let hasText = false;
+  Children.forEach(children, (child) => {
+    if (typeof child === "string" || typeof child === "number") hasText = true;
+  });
+  if (!hasText) return children;
+  return Children.map(children, (child) => typeof child === "string" || typeof child === "number" ? createElement(Wrap, props, child) : child);
+};
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
 var InputGroup = React.forwardRef(
   function InputGroup2(props, ref) {
@@ -77,22 +82,30 @@ var InputGroup = React.forwardRef(
     const { className: startClassName, ...startRest } = startElementProps ?? {};
     const { className: endClassName, ...endRest } = endElementProps ?? {};
     return /* @__PURE__ */ jsxs(
-      "div",
+      XStack,
       {
         ref: combinedRef,
-        className: cn("relative flex w-full items-center", className),
+        position: "relative",
+        width: "100%",
+        alignItems: "center",
+        className,
         ...rest,
         children: [
           startElement && /* @__PURE__ */ jsx(
-            "div",
+            XStack,
             {
               ref: startElementRef,
-              className: cn(
-                "pointer-events-none absolute inset-y-0 left-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]",
-                startClassName
-              ),
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              left: 0,
+              zIndex: 1,
+              alignItems: "center",
+              pointerEvents: "none",
+              style: { color: "var(--color-icon-secondary)" },
+              className: startClassName,
               ...startRest,
-              children: startElement
+              children: ink(startElement)
             }
           ),
           React.Children.map(children, (child) => {
@@ -111,15 +124,20 @@ var InputGroup = React.forwardRef(
             });
           }),
           endElement && /* @__PURE__ */ jsx(
-            "div",
+            XStack,
             {
               ref: endElementRef,
-              className: cn(
-                "pointer-events-none absolute inset-y-0 right-0 z-[1] flex items-center text-[var(--chakra-colors-input-element)]",
-                endClassName
-              ),
+              position: "absolute",
+              top: 0,
+              bottom: 0,
+              right: 0,
+              zIndex: 1,
+              alignItems: "center",
+              pointerEvents: "none",
+              style: { color: "var(--color-icon-secondary)" },
+              className: endClassName,
               ...endRest,
-              children: endElement
+              children: ink(endElement)
             }
           )
         ]

package/dist/option-chain.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 fmt(n, decimals = 2) {
   if (n === void 0 || n === null) return "-";
   return n.toFixed(decimals);
@@ -43,20 +39,55 @@ function fmtPct(n) {
   if (n === void 0 || n === null) return "-";
   return `${(n * 100).toFixed(1)}%`;
 }
+var justify = (align) => align === "right" ? "flex-end" : align === "left" ? "flex-start" : "center";
 function QuoteCell({ value, highlight, align = "right", onClick, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "td",
+    gui.View,
     {
-      className: cn(
-        "px-1.5 py-1 font-mono tabular-nums text-xs whitespace-nowrap",
-        align === "right" ? "text-right" : "text-left",
-        highlight && "text-zinc-100",
-        !highlight && "text-zinc-400",
-        onClick && "cursor-pointer hover:bg-zinc-700/50 transition-colors",
-        className
-      ),
+      unstyled: true,
+      render: /* @__PURE__ */ jsxRuntime.jsx("td", {}),
       onClick,
-      children: value
+      paddingHorizontal: 6,
+      paddingVertical: 4,
+      cursor: onClick ? "pointer" : void 0,
+      transition: "quick",
+      hoverStyle: onClick ? { backgroundColor: "var(--color-popover-item-hover)" } : void 0,
+      style: { display: "flex", alignItems: "center", justifyContent: justify(align) },
+      className,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        gui.Text,
+        {
+          fontSize: 12,
+          style: { fontFamily: "monospace", whiteSpace: "nowrap" },
+          fontVariant: ["tabular-nums"],
+          color: highlight ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+          children: value
+        }
+      )
+    }
+  );
+}
+function HeadCell({ children, colSpan, align = "center", size = "column", color }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    gui.View,
+    {
+      unstyled: true,
+      render: colSpan ? /* @__PURE__ */ jsxRuntime.jsx("th", { colSpan }) : /* @__PURE__ */ jsxRuntime.jsx("th", {}),
+      paddingHorizontal: size === "group" ? 8 : 6,
+      paddingVertical: size === "group" ? 6 : 4,
+      style: { display: "flex", alignItems: "center", justifyContent: justify(align) },
+      children: children != null && /* @__PURE__ */ jsxRuntime.jsx(
+        gui.Text,
+        {
+          fontSize: 10,
+          fontWeight: size === "group" ? "600" : "500",
+          textTransform: "uppercase",
+          letterSpacing: 0.5,
+          style: { whiteSpace: "nowrap" },
+          color: color ?? "var(--color-text-secondary)",
+          children
+        }
+      )
     }
   );
 }
@@ -87,71 +118,51 @@ var OptionChain = React__namespace.forwardRef(
       [onSelectContract]
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      gui.View,
       {
         ref,
-        className: cn("w-full overflow-x-auto", className),
+        unstyled: true,
+        width: "100%",
+        overflowX: "auto",
+        className,
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse text-xs", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("thead", { children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-zinc-800", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "th",
-                {
-                  colSpan: CALL_HEADERS.length,
-                  className: "px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-emerald-400",
-                  children: "Calls"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-zinc-500", children: "Strike" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "th",
-                {
-                  colSpan: PUT_HEADERS.length,
-                  className: "px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-red-400",
-                  children: "Puts"
-                }
-              )
+        children: /* @__PURE__ */ jsxRuntime.jsxs(gui.View, { unstyled: true, render: /* @__PURE__ */ jsxRuntime.jsx("table", {}), width: "100%", style: { borderCollapse: "collapse" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(gui.View, { unstyled: true, render: /* @__PURE__ */ jsxRuntime.jsx("thead", {}), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(gui.View, { unstyled: true, render: /* @__PURE__ */ jsxRuntime.jsx("tr", {}), borderBottomWidth: 1, borderColor: "var(--color-border-divider)", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(HeadCell, { colSpan: CALL_HEADERS.length, size: "group", color: "var(--color-status-good)", children: "Calls" }),
+              /* @__PURE__ */ jsxRuntime.jsx(HeadCell, { size: "group", children: "Strike" }),
+              /* @__PURE__ */ jsxRuntime.jsx(HeadCell, { colSpan: PUT_HEADERS.length, size: "group", color: "var(--color-status-bad)", children: "Puts" })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-b border-zinc-800/60", children: [
-              CALL_HEADERS.map((h) => /* @__PURE__ */ jsxRuntime.jsx(
-                "th",
-                {
-                  className: "px-1.5 py-1 text-right text-[10px] font-medium uppercase tracking-wider text-zinc-500",
-                  children: h
-                },
-                `call-${h}`
-              )),
-              /* @__PURE__ */ jsxRuntime.jsx("th", { className: "px-2 py-1 text-center text-[10px] font-medium uppercase tracking-wider text-zinc-500" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(gui.View, { unstyled: true, render: /* @__PURE__ */ jsxRuntime.jsx("tr", {}), borderBottomWidth: 1, borderColor: "var(--color-popover-item-hover)", children: [
+              CALL_HEADERS.map((h) => /* @__PURE__ */ jsxRuntime.jsx(HeadCell, { align: "right", children: h }, `call-${h}`)),
+              /* @__PURE__ */ jsxRuntime.jsx(HeadCell, {}),
               PUT_HEADERS.map((h) => /* @__PURE__ */ jsxRuntime.jsx(
-                "th",
+                HeadCell,
                 {
-                  className: cn(
-                    "px-1.5 py-1 text-[10px] font-medium uppercase tracking-wider text-zinc-500",
-                    h === "Bid" || h === "Ask" || h === "Last" ? "text-left" : "text-right"
-                  ),
+                  align: h === "Bid" || h === "Ask" || h === "Last" ? "left" : "right",
                   children: h
                 },
                 `put-${h}`
               ))
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: strikes.map((row) => {
+          /* @__PURE__ */ jsxRuntime.jsx(gui.View, { unstyled: true, render: /* @__PURE__ */ jsxRuntime.jsx("tbody", {}), children: strikes.map((row) => {
             const isATM = Math.abs(row.strike - spotPrice) <= (strikes.length > 1 ? Math.abs((strikes[1]?.strike ?? 0) - (strikes[0]?.strike ?? 0)) / 2 : 0.5);
             const callITM = row.strike < spotPrice;
             const putITM = row.strike > spotPrice;
             const c = row.call;
             const p = row.put;
+            const rowBg = isATM ? "var(--secondary)" : callITM ? "color-mix(in srgb, var(--color-status-good) 12%, transparent)" : putITM ? "color-mix(in srgb, var(--color-status-bad) 12%, transparent)" : "transparent";
             return /* @__PURE__ */ jsxRuntime.jsxs(
-              "tr",
+              gui.View,
               {
-                className: cn(
-                  "border-b border-zinc-800/30 transition-colors",
-                  isATM && "bg-zinc-800/60",
-                  !isATM && callITM && "bg-emerald-950/20",
-                  !isATM && putITM && "bg-red-950/20",
-                  !isATM && !callITM && !putITM && "hover:bg-zinc-800/30"
-                ),
+                unstyled: true,
+                render: /* @__PURE__ */ jsxRuntime.jsx("tr", {}),
+                borderBottomWidth: 1,
+                borderColor: "color-mix(in srgb, var(--color-border-divider) 50%, transparent)",
+                transition: "quick",
+                backgroundColor: rowBg,
+                hoverStyle: isATM || callITM || putITM ? void 0 : { backgroundColor: "var(--color-popover-item-hover)" },
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     QuoteCell,
@@ -175,13 +186,24 @@ var OptionChain = React__namespace.forwardRef(
                   /* @__PURE__ */ jsxRuntime.jsx(QuoteCell, { value: fmtPct(c?.iv) }),
                   /* @__PURE__ */ jsxRuntime.jsx(QuoteCell, { value: fmt(c?.delta, 3) }),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    "td",
+                    gui.View,
                     {
-                      className: cn(
-                        "px-2 py-1 text-center font-mono tabular-nums text-xs font-semibold",
-                        isATM ? "text-[var(--foreground)] bg-[var(--secondary)]" : "text-[var(--muted-foreground)]"
-                      ),
-                      children: fmt(row.strike)
+                      unstyled: true,
+                      render: /* @__PURE__ */ jsxRuntime.jsx("td", {}),
+                      paddingHorizontal: 8,
+                      paddingVertical: 4,
+                      style: { display: "flex", alignItems: "center", justifyContent: "center" },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        gui.Text,
+                        {
+                          fontSize: 12,
+                          fontWeight: "600",
+                          style: { fontFamily: "monospace" },
+                          fontVariant: ["tabular-nums"],
+                          color: isATM ? "var(--foreground)" : "var(--muted-foreground)",
+                          children: fmt(row.strike)
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(QuoteCell, { value: fmt(p?.delta, 3), align: "right" }),

package/dist/option-chain.js

@@ -1,12 +1,8 @@
 "use client";
+import { View, 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';
 
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 function fmt(n, decimals = 2) {
   if (n === void 0 || n === null) return "-";
   return n.toFixed(decimals);
@@ -21,20 +17,55 @@ function fmtPct(n) {
   if (n === void 0 || n === null) return "-";
   return `${(n * 100).toFixed(1)}%`;
 }
+var justify = (align) => align === "right" ? "flex-end" : align === "left" ? "flex-start" : "center";
 function QuoteCell({ value, highlight, align = "right", onClick, className }) {
   return /* @__PURE__ */ jsx(
-    "td",
+    View,
     {
-      className: cn(
-        "px-1.5 py-1 font-mono tabular-nums text-xs whitespace-nowrap",
-        align === "right" ? "text-right" : "text-left",
-        highlight && "text-zinc-100",
-        !highlight && "text-zinc-400",
-        onClick && "cursor-pointer hover:bg-zinc-700/50 transition-colors",
-        className
-      ),
+      unstyled: true,
+      render: /* @__PURE__ */ jsx("td", {}),
       onClick,
-      children: value
+      paddingHorizontal: 6,
+      paddingVertical: 4,
+      cursor: onClick ? "pointer" : void 0,
+      transition: "quick",
+      hoverStyle: onClick ? { backgroundColor: "var(--color-popover-item-hover)" } : void 0,
+      style: { display: "flex", alignItems: "center", justifyContent: justify(align) },
+      className,
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          fontSize: 12,
+          style: { fontFamily: "monospace", whiteSpace: "nowrap" },
+          fontVariant: ["tabular-nums"],
+          color: highlight ? "var(--color-text-primary)" : "var(--color-text-secondary)",
+          children: value
+        }
+      )
+    }
+  );
+}
+function HeadCell({ children, colSpan, align = "center", size = "column", color }) {
+  return /* @__PURE__ */ jsx(
+    View,
+    {
+      unstyled: true,
+      render: colSpan ? /* @__PURE__ */ jsx("th", { colSpan }) : /* @__PURE__ */ jsx("th", {}),
+      paddingHorizontal: size === "group" ? 8 : 6,
+      paddingVertical: size === "group" ? 6 : 4,
+      style: { display: "flex", alignItems: "center", justifyContent: justify(align) },
+      children: children != null && /* @__PURE__ */ jsx(
+        Text,
+        {
+          fontSize: 10,
+          fontWeight: size === "group" ? "600" : "500",
+          textTransform: "uppercase",
+          letterSpacing: 0.5,
+          style: { whiteSpace: "nowrap" },
+          color: color ?? "var(--color-text-secondary)",
+          children
+        }
+      )
     }
   );
 }
@@ -65,71 +96,51 @@ var OptionChain = React.forwardRef(
       [onSelectContract]
     );
     return /* @__PURE__ */ jsx(
-      "div",
+      View,
       {
         ref,
-        className: cn("w-full overflow-x-auto", className),
+        unstyled: true,
+        width: "100%",
+        overflowX: "auto",
+        className,
         ...rest,
-        children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-xs", children: [
-          /* @__PURE__ */ jsxs("thead", { children: [
-            /* @__PURE__ */ jsxs("tr", { className: "border-b border-zinc-800", children: [
-              /* @__PURE__ */ jsx(
-                "th",
-                {
-                  colSpan: CALL_HEADERS.length,
-                  className: "px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-emerald-400",
-                  children: "Calls"
-                }
-              ),
-              /* @__PURE__ */ jsx("th", { className: "px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-zinc-500", children: "Strike" }),
-              /* @__PURE__ */ jsx(
-                "th",
-                {
-                  colSpan: PUT_HEADERS.length,
-                  className: "px-2 py-1.5 text-center text-[10px] font-semibold uppercase tracking-wider text-red-400",
-                  children: "Puts"
-                }
-              )
+        children: /* @__PURE__ */ jsxs(View, { unstyled: true, render: /* @__PURE__ */ jsx("table", {}), width: "100%", style: { borderCollapse: "collapse" }, children: [
+          /* @__PURE__ */ jsxs(View, { unstyled: true, render: /* @__PURE__ */ jsx("thead", {}), children: [
+            /* @__PURE__ */ jsxs(View, { unstyled: true, render: /* @__PURE__ */ jsx("tr", {}), borderBottomWidth: 1, borderColor: "var(--color-border-divider)", children: [
+              /* @__PURE__ */ jsx(HeadCell, { colSpan: CALL_HEADERS.length, size: "group", color: "var(--color-status-good)", children: "Calls" }),
+              /* @__PURE__ */ jsx(HeadCell, { size: "group", children: "Strike" }),
+              /* @__PURE__ */ jsx(HeadCell, { colSpan: PUT_HEADERS.length, size: "group", color: "var(--color-status-bad)", children: "Puts" })
             ] }),
-            /* @__PURE__ */ jsxs("tr", { className: "border-b border-zinc-800/60", children: [
-              CALL_HEADERS.map((h) => /* @__PURE__ */ jsx(
-                "th",
-                {
-                  className: "px-1.5 py-1 text-right text-[10px] font-medium uppercase tracking-wider text-zinc-500",
-                  children: h
-                },
-                `call-${h}`
-              )),
-              /* @__PURE__ */ jsx("th", { className: "px-2 py-1 text-center text-[10px] font-medium uppercase tracking-wider text-zinc-500" }),
+            /* @__PURE__ */ jsxs(View, { unstyled: true, render: /* @__PURE__ */ jsx("tr", {}), borderBottomWidth: 1, borderColor: "var(--color-popover-item-hover)", children: [
+              CALL_HEADERS.map((h) => /* @__PURE__ */ jsx(HeadCell, { align: "right", children: h }, `call-${h}`)),
+              /* @__PURE__ */ jsx(HeadCell, {}),
               PUT_HEADERS.map((h) => /* @__PURE__ */ jsx(
-                "th",
+                HeadCell,
                 {
-                  className: cn(
-                    "px-1.5 py-1 text-[10px] font-medium uppercase tracking-wider text-zinc-500",
-                    h === "Bid" || h === "Ask" || h === "Last" ? "text-left" : "text-right"
-                  ),
+                  align: h === "Bid" || h === "Ask" || h === "Last" ? "left" : "right",
                   children: h
                 },
                 `put-${h}`
               ))
             ] })
           ] }),
-          /* @__PURE__ */ jsx("tbody", { children: strikes.map((row) => {
+          /* @__PURE__ */ jsx(View, { unstyled: true, render: /* @__PURE__ */ jsx("tbody", {}), children: strikes.map((row) => {
             const isATM = Math.abs(row.strike - spotPrice) <= (strikes.length > 1 ? Math.abs((strikes[1]?.strike ?? 0) - (strikes[0]?.strike ?? 0)) / 2 : 0.5);
             const callITM = row.strike < spotPrice;
             const putITM = row.strike > spotPrice;
             const c = row.call;
             const p = row.put;
+            const rowBg = isATM ? "var(--secondary)" : callITM ? "color-mix(in srgb, var(--color-status-good) 12%, transparent)" : putITM ? "color-mix(in srgb, var(--color-status-bad) 12%, transparent)" : "transparent";
             return /* @__PURE__ */ jsxs(
-              "tr",
+              View,
               {
-                className: cn(
-                  "border-b border-zinc-800/30 transition-colors",
-                  isATM && "bg-zinc-800/60",
-                  !isATM && callITM && "bg-emerald-950/20",
-                  !isATM && putITM && "bg-red-950/20",
-                  !isATM && !callITM && !putITM && "hover:bg-zinc-800/30"
-                ),
+                unstyled: true,
+                render: /* @__PURE__ */ jsx("tr", {}),
+                borderBottomWidth: 1,
+                borderColor: "color-mix(in srgb, var(--color-border-divider) 50%, transparent)",
+                transition: "quick",
+                backgroundColor: rowBg,
+                hoverStyle: isATM || callITM || putITM ? void 0 : { backgroundColor: "var(--color-popover-item-hover)" },
                 children: [
                   /* @__PURE__ */ jsx(
                     QuoteCell,
@@ -153,13 +164,24 @@ var OptionChain = React.forwardRef(
                   /* @__PURE__ */ jsx(QuoteCell, { value: fmtPct(c?.iv) }),
                   /* @__PURE__ */ jsx(QuoteCell, { value: fmt(c?.delta, 3) }),
                   /* @__PURE__ */ jsx(
-                    "td",
+                    View,
                     {
-                      className: cn(
-                        "px-2 py-1 text-center font-mono tabular-nums text-xs font-semibold",
-                        isATM ? "text-[var(--foreground)] bg-[var(--secondary)]" : "text-[var(--muted-foreground)]"
-                      ),
-                      children: fmt(row.strike)
+                      unstyled: true,
+                      render: /* @__PURE__ */ jsx("td", {}),
+                      paddingHorizontal: 8,
+                      paddingVertical: 4,
+                      style: { display: "flex", alignItems: "center", justifyContent: "center" },
+                      children: /* @__PURE__ */ jsx(
+                        Text,
+                        {
+                          fontSize: 12,
+                          fontWeight: "600",
+                          style: { fontFamily: "monospace" },
+                          fontVariant: ["tabular-nums"],
+                          color: isATM ? "var(--foreground)" : "var(--muted-foreground)",
+                          children: fmt(row.strike)
+                        }
+                      )
                     }
                   ),
                   /* @__PURE__ */ jsx(QuoteCell, { value: fmt(p?.delta, 3), align: "right" }),