@luxfi/ui 7.4.12 → 7.4.13

package/dist/strategy-builder.js

@@ -1,12 +1,8 @@
 "use client";
+import { YStack, XStack, Text, View } 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 findATM(strikes, spot) {
   if (strikes.length === 0) return spot;
   return strikes.reduce(
@@ -115,84 +111,145 @@ var STRATEGY_PRESETS = [
     ]
   }
 ];
+var MONO = "monospace";
+var CONTROL_BOX = {
+  backgroundColor: "var(--color-input-bg)",
+  borderWidth: 1,
+  borderColor: "var(--color-input-border)",
+  outlineWidth: 0,
+  focusStyle: { borderColor: "var(--color-input-border-focus)" }
+};
+var CONTROL_INK = { color: "var(--color-input-fg)" };
 function LegRow({ leg, index, strikes, expirations, removable, onChange, onRemove }) {
   const update = (patch) => {
     onChange(index, { ...leg, ...patch });
   };
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-md bg-zinc-800/50 px-2 py-1.5", children: [
-    /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-zinc-500 w-4 shrink-0", children: index + 1 }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "px-2 py-0.5 rounded text-xs font-semibold transition-colors",
-          leg.action === "buy" ? "bg-emerald-900/60 text-emerald-400" : "bg-red-900/60 text-red-400"
+  return /* @__PURE__ */ jsxs(
+    XStack,
+    {
+      alignItems: "center",
+      gap: 8,
+      borderRadius: 6,
+      backgroundColor: "var(--color-tag-subtle-bg)",
+      paddingHorizontal: 8,
+      paddingVertical: 6,
+      children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: 10, style: { fontFamily: MONO }, flexShrink: 0, width: 16, color: "var(--color-text-secondary)", children: index + 1 }),
+        /* @__PURE__ */ jsx(
+          XStack,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("button", { type: "button" }),
+            onClick: () => update({ action: leg.action === "buy" ? "sell" : "buy" }),
+            paddingHorizontal: 8,
+            paddingVertical: 2,
+            borderRadius: 4,
+            borderWidth: 0,
+            cursor: "pointer",
+            transition: "quick",
+            backgroundColor: leg.action === "buy" ? "color-mix(in srgb, var(--color-status-good) 20%, transparent)" : "color-mix(in srgb, var(--color-status-bad) 20%, transparent)",
+            children: /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", color: leg.action === "buy" ? "var(--color-status-good)" : "var(--color-status-bad)", children: leg.action === "buy" ? "BUY" : "SELL" })
+          }
         ),
-        onClick: () => update({ action: leg.action === "buy" ? "sell" : "buy" }),
-        children: leg.action === "buy" ? "BUY" : "SELL"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: cn(
-          "px-2 py-0.5 rounded text-xs font-medium transition-colors",
-          // Call vs put is a rank difference, not a hue difference.
-          leg.type === "call" ? "bg-[var(--secondary)] text-[var(--foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"
+        /* @__PURE__ */ jsx(
+          XStack,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("button", { type: "button" }),
+            onClick: () => update({ type: leg.type === "call" ? "put" : "call" }),
+            paddingHorizontal: 8,
+            paddingVertical: 2,
+            borderRadius: 4,
+            borderWidth: 0,
+            cursor: "pointer",
+            transition: "quick",
+            backgroundColor: leg.type === "call" ? "var(--secondary)" : "var(--muted)",
+            children: /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "500", color: leg.type === "call" ? "var(--foreground)" : "var(--muted-foreground)", children: leg.type === "call" ? "CALL" : "PUT" })
+          }
         ),
-        onClick: () => update({ type: leg.type === "call" ? "put" : "call" }),
-        children: leg.type === "call" ? "CALL" : "PUT"
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "select",
-      {
-        value: leg.strike,
-        onChange: (e) => update({ strike: Number(e.target.value) }),
-        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs font-mono text-zinc-200 outline-none focus:border-zinc-500 min-w-[72px]",
-        children: strikes.map((s) => /* @__PURE__ */ jsx("option", { value: s, children: s.toFixed(2) }, s))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "select",
-      {
-        value: leg.expiration,
-        onChange: (e) => update({ expiration: e.target.value }),
-        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs text-zinc-200 outline-none focus:border-zinc-500 min-w-[80px]",
-        children: expirations.map((exp) => /* @__PURE__ */ jsx("option", { value: exp, children: exp }, exp))
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "number",
-        min: 1,
-        max: 999,
-        value: leg.quantity,
-        onChange: (e) => update({ quantity: Math.max(1, parseInt(e.target.value, 10) || 1) }),
-        className: "bg-zinc-900 border border-zinc-700 rounded px-1.5 py-0.5 text-xs font-mono text-zinc-200 outline-none focus:border-zinc-500 w-[48px] text-center"
-      }
-    ),
-    leg.premium !== void 0 && /* @__PURE__ */ jsxs("span", { className: cn(
-      "font-mono tabular-nums text-xs ml-auto",
-      leg.premium >= 0 ? "text-emerald-400" : "text-red-400"
-    ), children: [
-      leg.premium >= 0 ? "+" : "",
-      leg.premium.toFixed(2)
-    ] }),
-    removable && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => onRemove(index),
-        className: "ml-auto p-0.5 text-zinc-500 hover:text-red-400 transition-colors",
-        "aria-label": "Remove leg",
-        children: /* @__PURE__ */ jsx("svg", { className: "h-3.5 w-3.5", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
-      }
-    )
-  ] });
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("select", { value: leg.strike, onChange: (e) => update({ strike: Number(e.target.value) }) }),
+            ...CONTROL_BOX,
+            borderRadius: 4,
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+            minWidth: 72,
+            style: { ...CONTROL_INK, fontFamily: MONO, fontSize: 12 },
+            children: strikes.map((s) => /* @__PURE__ */ jsx("option", { value: s, children: s.toFixed(2) }, s))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("select", { value: leg.expiration, onChange: (e) => update({ expiration: e.target.value }) }),
+            ...CONTROL_BOX,
+            borderRadius: 4,
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+            minWidth: 80,
+            style: { ...CONTROL_INK, fontSize: 12 },
+            children: expirations.map((exp) => /* @__PURE__ */ jsx("option", { value: exp, children: exp }, exp))
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          View,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                max: 999,
+                value: leg.quantity,
+                onChange: (e) => update({ quantity: Math.max(1, parseInt(e.target.value, 10) || 1) })
+              }
+            ),
+            ...CONTROL_BOX,
+            borderRadius: 4,
+            paddingHorizontal: 6,
+            paddingVertical: 2,
+            width: 48,
+            style: { ...CONTROL_INK, fontFamily: MONO, fontSize: 12, textAlign: "center" }
+          }
+        ),
+        leg.premium !== void 0 && /* @__PURE__ */ jsxs(
+          Text,
+          {
+            fontSize: 12,
+            style: { fontFamily: MONO },
+            fontVariant: ["tabular-nums"],
+            marginLeft: "auto",
+            color: leg.premium >= 0 ? "var(--color-status-good)" : "var(--color-status-bad)",
+            children: [
+              leg.premium >= 0 ? "+" : "",
+              leg.premium.toFixed(2)
+            ]
+          }
+        ),
+        removable && /* @__PURE__ */ jsx(
+          XStack,
+          {
+            unstyled: true,
+            render: /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Remove leg" }),
+            onClick: () => onRemove(index),
+            marginLeft: "auto",
+            padding: 2,
+            borderWidth: 0,
+            cursor: "pointer",
+            transition: "quick",
+            style: { color: "var(--color-text-secondary)" },
+            hoverStyle: { opacity: 0.7 },
+            children: /* @__PURE__ */ jsx("svg", { width: 14, height: 14, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) })
+          }
+        )
+      ]
+    }
+  );
 }
 var StrategyBuilder = React.forwardRef(
   function StrategyBuilder2(props, ref) {
@@ -262,37 +319,46 @@ var StrategyBuilder = React.forwardRef(
       });
     }, [onSubmit, strategyType, legs, netPremium]);
     const currentPreset = STRATEGY_PRESETS.find((p) => p.value === strategyType);
+    const netColor = netPremium > 0 ? "var(--color-status-good)" : netPremium < 0 ? "var(--color-status-bad)" : "var(--color-text-secondary)";
     return /* @__PURE__ */ jsxs(
-      "div",
+      YStack,
       {
         ref,
-        className: cn(
-          "flex flex-col gap-3 rounded-lg border border-zinc-800 bg-zinc-900/50 p-3",
-          className
-        ),
+        gap: 12,
+        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 gap-3", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs font-semibold uppercase tracking-wider text-zinc-500", children: "Strategy" }),
-              /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-zinc-200", children: underlying })
+          /* @__PURE__ */ jsxs(XStack, { alignItems: "center", justifyContent: "space-between", gap: 12, children: [
+            /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 8, children: [
+              /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.6, color: "var(--color-text-secondary)", children: "Strategy" }),
+              /* @__PURE__ */ jsx(Text, { fontSize: 14, fontWeight: "500", color: "var(--color-text-primary)", children: underlying })
             ] }),
-            /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-zinc-500", children: [
+            /* @__PURE__ */ jsxs(Text, { fontSize: 10, color: "var(--color-text-secondary)", children: [
               "Spot: ",
-              /* @__PURE__ */ jsx("span", { className: "font-mono tabular-nums text-zinc-300", children: spotPrice.toFixed(2) })
+              /* @__PURE__ */ jsx(Text, { style: { fontFamily: MONO }, fontVariant: ["tabular-nums"], color: "var(--color-text-primary)", children: spotPrice.toFixed(2) })
             ] })
           ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsx(
-            "select",
+          /* @__PURE__ */ jsx(XStack, { alignItems: "center", gap: 8, children: /* @__PURE__ */ jsx(
+            View,
             {
-              value: strategyType,
-              onChange: handleStrategyChange,
-              className: "flex-1 bg-zinc-900 border border-zinc-700 rounded-md px-2.5 py-1.5 text-sm text-zinc-200 outline-none focus:border-zinc-500",
+              unstyled: true,
+              render: /* @__PURE__ */ jsx("select", { value: strategyType, onChange: handleStrategyChange }),
+              flex: 1,
+              ...CONTROL_BOX,
+              borderRadius: 6,
+              paddingHorizontal: 10,
+              paddingVertical: 6,
+              style: { ...CONTROL_INK, fontSize: 14 },
               children: STRATEGY_PRESETS.map((preset) => /* @__PURE__ */ jsx("option", { value: preset.value, children: preset.label }, preset.value))
             }
           ) }),
-          currentPreset && /* @__PURE__ */ jsx("p", { className: "text-[11px] text-zinc-500 -mt-1", children: currentPreset.description }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5", children: legs.map((leg, i) => /* @__PURE__ */ jsx(
+          currentPreset && /* @__PURE__ */ jsx(Text, { fontSize: 11, marginTop: -4, color: "var(--color-text-secondary)", children: currentPreset.description }),
+          /* @__PURE__ */ jsx(YStack, { gap: 6, children: legs.map((leg, i) => /* @__PURE__ */ jsx(
             LegRow,
             {
               leg,
@@ -306,40 +372,53 @@ var StrategyBuilder = React.forwardRef(
             i
           )) }),
           strategyType === "custom" && legs.length < 4 && /* @__PURE__ */ jsxs(
-            "button",
+            XStack,
             {
-              type: "button",
+              unstyled: true,
+              render: /* @__PURE__ */ jsx("button", { type: "button" }),
               onClick: handleAddLeg,
-              className: "flex items-center justify-center gap-1 rounded-md border border-dashed border-zinc-700 py-1 text-xs text-zinc-500 hover:text-zinc-300 hover:border-zinc-500 transition-colors",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 4,
+              borderRadius: 6,
+              borderWidth: 1,
+              paddingVertical: 4,
+              cursor: "pointer",
+              transition: "quick",
+              borderColor: "var(--color-border-divider)",
+              hoverStyle: { borderColor: "var(--color-hover)" },
+              style: { color: "var(--color-text-secondary)", borderStyle: "dashed" },
               children: [
-                /* @__PURE__ */ jsx("svg", { className: "h-3 w-3", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
-                "Add Leg"
+                /* @__PURE__ */ jsx("svg", { width: 12, height: 12, viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M12 5v14M5 12h14", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
+                /* @__PURE__ */ jsx(Text, { fontSize: 12, color: "var(--color-text-secondary)", children: "Add Leg" })
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between pt-1 border-t border-zinc-800", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500", children: "Net:" }),
-              /* @__PURE__ */ jsxs("span", { className: cn(
-                "font-mono tabular-nums text-sm font-semibold",
-                netPremium > 0 ? "text-emerald-400" : netPremium < 0 ? "text-red-400" : "text-zinc-400"
-              ), children: [
+          /* @__PURE__ */ jsxs(XStack, { alignItems: "center", justifyContent: "space-between", paddingTop: 4, borderTopWidth: 1, borderColor: "var(--color-border-divider)", children: [
+            /* @__PURE__ */ jsxs(XStack, { alignItems: "center", gap: 8, children: [
+              /* @__PURE__ */ jsx(Text, { fontSize: 12, color: "var(--color-text-secondary)", children: "Net:" }),
+              /* @__PURE__ */ jsxs(Text, { fontSize: 14, fontWeight: "600", style: { fontFamily: MONO }, fontVariant: ["tabular-nums"], color: netColor, children: [
                 netPremium > 0 ? "Credit " : netPremium < 0 ? "Debit " : "",
                 netPremium !== 0 ? `$${Math.abs(netPremium).toFixed(2)}` : "-"
               ] })
             ] }),
             /* @__PURE__ */ jsx(
-              "button",
+              XStack,
               {
-                type: "button",
+                unstyled: true,
+                render: /* @__PURE__ */ jsx("button", { type: "button" }),
                 onClick: handleSubmit,
                 disabled: legs.length === 0,
-                className: cn(
-                  "px-4 py-1.5 rounded-md text-xs font-semibold transition-colors",
-                  "bg-blue-600 text-white hover:bg-blue-500",
-                  "disabled:opacity-40 disabled:cursor-not-allowed"
-                ),
-                children: "Review Order"
+                paddingHorizontal: 16,
+                paddingVertical: 6,
+                borderRadius: 6,
+                borderWidth: 0,
+                cursor: "pointer",
+                transition: "quick",
+                backgroundColor: "var(--color-button-solid-bg)",
+                hoverStyle: { backgroundColor: "var(--color-hover)" },
+                disabledStyle: { opacity: 0.4, cursor: "not-allowed" },
+                children: /* @__PURE__ */ jsx(Text, { fontSize: 12, fontWeight: "600", color: "var(--color-button-solid-text)", children: "Review Order" })
               }
             )
           ] })

package/dist/tag.cjs

@@ -476,21 +476,24 @@ var Tag = React4__namespace.forwardRef(
       ":",
       nbsp
     ] }) : null;
-    const labelSpan = /* @__PURE__ */ jsxRuntime.jsxs(
-      gui.Text,
-      {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        fontWeight: "500",
-        fontSize: TAG_SIZE_FONT[resolvedSize],
-        color,
-        hoverStyle: textHoverColor ? { color: textHoverColor } : void 0,
-        children: [
-          labelElement,
-          children
-        ]
-      }
+    const labelSpan = (
+      // `ellipsis` is Text's own built-in single-line-truncation variant —
+      // the same rule Tailwind's `line-clamp-1`/`text-ellipsis` drew, through
+      // the component's variants rather than three separate style props.
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        gui.Text,
+        {
+          ellipsis: true,
+          fontWeight: "500",
+          fontSize: TAG_SIZE_FONT[resolvedSize],
+          color,
+          hoverStyle: textHoverColor ? { color: textHoverColor } : void 0,
+          children: [
+            labelElement,
+            children
+          ]
+        }
+      )
     );
     const contentElement = truncated ? /* @__PURE__ */ jsxRuntime.jsx(TruncatedTextTooltip, { label: children, children: labelSpan }) : labelSpan;
     return /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { loading, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/tag.js

@@ -455,21 +455,24 @@ var Tag = React4.forwardRef(
       ":",
       nbsp
     ] }) : null;
-    const labelSpan = /* @__PURE__ */ jsxs(
-      Text,
-      {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        fontWeight: "500",
-        fontSize: TAG_SIZE_FONT[resolvedSize],
-        color,
-        hoverStyle: textHoverColor ? { color: textHoverColor } : void 0,
-        children: [
-          labelElement,
-          children
-        ]
-      }
+    const labelSpan = (
+      // `ellipsis` is Text's own built-in single-line-truncation variant —
+      // the same rule Tailwind's `line-clamp-1`/`text-ellipsis` drew, through
+      // the component's variants rather than three separate style props.
+      /* @__PURE__ */ jsxs(
+        Text,
+        {
+          ellipsis: true,
+          fontWeight: "500",
+          fontSize: TAG_SIZE_FONT[resolvedSize],
+          color,
+          hoverStyle: textHoverColor ? { color: textHoverColor } : void 0,
+          children: [
+            labelElement,
+            children
+          ]
+        }
+      )
     );
     const contentElement = truncated ? /* @__PURE__ */ jsx(TruncatedTextTooltip, { label: children, children: labelSpan }) : labelSpan;
     return /* @__PURE__ */ jsx(Skeleton, { loading, asChild: true, children: /* @__PURE__ */ jsxs(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luxfi/ui",
-  "version": "7.4.12",
+  "version": "7.4.13",
   "description": "Cross-platform UI components on @hanzo/gui. Native mobile + web.",
   "type": "module",
   "license": "MIT",

package/src/avatar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Avatar as GuiAvatar, View, XStack } from '@hanzo/gui';
+import { Avatar as GuiAvatar, XStack } from '@hanzo/gui';
 import * as React from 'react';
 
 import { ink } from './ink';
@@ -94,7 +94,6 @@ export const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
     return (
       <GuiAvatar
         ref={ ref as never }
-        unstyled
         position="relative"
         display="inline-flex"
         flexShrink={ 0 }

package/src/expiration-selector.tsx

@@ -49,24 +49,24 @@ interface ExpirationPillProps {
 
 // Resting and selected are the same two states every selectable pill in this
 // package uses (tabs, menu rows): a solid fill when selected, a bordered card
-// otherwise. The date label sets no colour of its own — it inherits the
-// button's, so `hoverStyle` here is what brightens it on hover, in one place.
+// otherwise. Stacks carry no `color` of their own (only Text does — same
+// reason they carry no `fontSize`), so ink is computed per-state below and
+// set directly on each Text rather than left to cascade from the button.
 const 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)' },
+    hoverStyle: { borderColor: 'var(--color-hover)' },
   },
 } as const;
 
 function ExpirationPill({ exp, isSelected, onClick }: ExpirationPillProps) {
   const shape = isSelected ? SHAPE.selected : SHAPE.resting;
+  const dateColor = isSelected ? 'var(--color-selected-control-text)' : 'var(--color-text-secondary)';
 
   // Near-expiry is a notice, and a notice in Lux is the loudest neutral — it
   // only shows while resting; a selected pill's own fill already carries the
@@ -91,7 +91,7 @@ function ExpirationPill({ exp, isSelected, onClick }: ExpirationPillProps) {
       cursor="pointer"
       { ...(shape as object) }
     >
-      <Text unstyled fontSize={ 12 } fontWeight="500" style={ { whiteSpace: 'nowrap' } as never }>
+      <Text fontSize={ 12 } fontWeight="500" style={ { whiteSpace: 'nowrap' } as never } color={ dateColor as never }>
         { formatExpDate(exp.date) }
       </Text>
       <Text

package/src/input-group.tsx

@@ -129,7 +129,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
             zIndex={ 1 }
             alignItems="center"
             pointerEvents="none"
-            color={ 'var(--color-icon-secondary)' as never }
+            style={{ color: 'var(--color-icon-secondary)' }}
             className={ startClassName }
             { ...(startRest as object) }
           >
@@ -167,7 +167,7 @@ export const InputGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(
             zIndex={ 1 }
             alignItems="center"
             pointerEvents="none"
-            color={ 'var(--color-icon-secondary)' as never }
+            style={{ color: 'var(--color-icon-secondary)' }}
             className={ endClassName }
             { ...(endRest as object) }
           >

package/src/option-position.tsx

@@ -189,9 +189,16 @@ function ActionButton({ onClick, children }: ActionButtonProps) {
       paddingVertical={ 4 }
       backgroundColor={ 'var(--color-button-subtle-bg)' as never }
       cursor="pointer"
-      hoverStyle={ { color: 'var(--color-hover)' } as never }
     >
-      <Text fontSize={ 12 } fontWeight="500" color={ 'var(--color-button-subtle-fg)' as never }>
+      {/* `hoverStyle` lives on the Text, not the button frame — Stacks carry
+          no `color` (same reason they carry no `fontSize`), so the hover
+          re-tint has to be the text's own state, not the button's. */}
+      <Text
+        fontSize={ 12 }
+        fontWeight="500"
+        color={ 'var(--color-button-subtle-fg)' as never }
+        hoverStyle={ { color: 'var(--color-hover)' } as never }
+      >
         { children }
       </Text>
     </XStack>