@luxfi/ui 7.4.10 → 7.4.12

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" }),