@luxfi/ui 7.4.10 → 7.4.12

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,

package/dist/heading.cjs

@@ -3,8 +3,6 @@
 
 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 _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -12,28 +10,23 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 // src/heading.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
-var LEVEL_TAG = { "1": gui.H1, "2": gui.H2, "3": gui.H3 };
-var LEVEL_CLASSES = {
-  "1": "text-[18px] leading-[24px] font-medium lg:text-[32px] lg:leading-[40px] lg:tracking-[-0.5px]",
-  "2": "text-[16px] leading-[24px] font-medium lg:text-[24px] lg:leading-[32px]",
-  "3": "text-[14px] leading-[20px] font-semibold lg:text-[18px] lg:leading-[24px] lg:font-medium"
+var TAG = { "1": gui.H1, "2": gui.H2, "3": gui.H3 };
+var RAMP = {
+  "1": { fontSize: 18, lineHeight: 24, fontWeight: "500", $lg: { fontSize: 32, lineHeight: 40, letterSpacing: -0.5 } },
+  "2": { fontSize: 16, lineHeight: 24, fontWeight: "500", $lg: { fontSize: 24, lineHeight: 32 } },
+  "3": { fontSize: 14, lineHeight: 20, fontWeight: "600", $lg: { fontSize: 18, lineHeight: 24, fontWeight: "500" } }
 };
-var BASE_CLASSES = "font-heading text-heading";
 var Heading = React__default.default.forwardRef(
-  function Heading2({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
-    const Tag = level ? LEVEL_TAG[level] : gui.H2;
-    const levelClasses = level ? LEVEL_CLASSES[level] : void 0;
-    const mergedStyle = mb !== void 0 ? { ...styleProp, marginBottom: typeof mb === "number" ? `${mb * 4}px` : mb } : styleProp;
+  function Heading2({ level, ...rest }, ref) {
+    const Tag = level ? TAG[level] : gui.H2;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Tag,
       {
         ref,
         unstyled: true,
-        className: cn(BASE_CLASSES, levelClasses, className),
-        style: mergedStyle,
+        fontFamily: "$heading",
+        color: "var(--color-heading)",
+        ...level ? RAMP[level] : null,
         ...rest
       }
     );

package/dist/heading.d.cts

@@ -2,8 +2,6 @@ import React__default from 'react';
 
 interface HeadingProps extends React__default.ComponentPropsWithoutRef<'h1'> {
     level?: '1' | '2' | '3';
-    mb?: number | string;
-    size?: string;
 }
 declare const Heading: React__default.ForwardRefExoticComponent<HeadingProps & React__default.RefAttributes<HTMLHeadingElement>>;
 

package/dist/heading.d.ts

@@ -2,8 +2,6 @@ import React__default from 'react';
 
 interface HeadingProps extends React__default.ComponentPropsWithoutRef<'h1'> {
     level?: '1' | '2' | '3';
-    mb?: number | string;
-    size?: string;
 }
 declare const Heading: React__default.ForwardRefExoticComponent<HeadingProps & React__default.RefAttributes<HTMLHeadingElement>>;
 

package/dist/heading.js

@@ -1,33 +1,26 @@
 "use client";
 import { H3, H2, H1 } from '@hanzo/gui';
 import React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsx } from 'react/jsx-runtime';
 
 // src/heading.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var LEVEL_TAG = { "1": H1, "2": H2, "3": H3 };
-var LEVEL_CLASSES = {
-  "1": "text-[18px] leading-[24px] font-medium lg:text-[32px] lg:leading-[40px] lg:tracking-[-0.5px]",
-  "2": "text-[16px] leading-[24px] font-medium lg:text-[24px] lg:leading-[32px]",
-  "3": "text-[14px] leading-[20px] font-semibold lg:text-[18px] lg:leading-[24px] lg:font-medium"
+var TAG = { "1": H1, "2": H2, "3": H3 };
+var RAMP = {
+  "1": { fontSize: 18, lineHeight: 24, fontWeight: "500", $lg: { fontSize: 32, lineHeight: 40, letterSpacing: -0.5 } },
+  "2": { fontSize: 16, lineHeight: 24, fontWeight: "500", $lg: { fontSize: 24, lineHeight: 32 } },
+  "3": { fontSize: 14, lineHeight: 20, fontWeight: "600", $lg: { fontSize: 18, lineHeight: 24, fontWeight: "500" } }
 };
-var BASE_CLASSES = "font-heading text-heading";
 var Heading = React.forwardRef(
-  function Heading2({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
-    const Tag = level ? LEVEL_TAG[level] : H2;
-    const levelClasses = level ? LEVEL_CLASSES[level] : void 0;
-    const mergedStyle = mb !== void 0 ? { ...styleProp, marginBottom: typeof mb === "number" ? `${mb * 4}px` : mb } : styleProp;
+  function Heading2({ level, ...rest }, ref) {
+    const Tag = level ? TAG[level] : H2;
     return /* @__PURE__ */ jsx(
       Tag,
       {
         ref,
         unstyled: true,
-        className: cn(BASE_CLASSES, levelClasses, className),
-        style: mergedStyle,
+        fontFamily: "$heading",
+        color: "var(--color-heading)",
+        ...level ? RAMP[level] : null,
         ...rest
       }
     );

package/dist/icon-button.cjs

@@ -231,59 +231,74 @@ var IconButtonFrame = gui.styled(gui.View, {
     size: {
       "2xs": { width: 20, height: 20, borderRadius: 4 },
       "2xs_alt": { width: 20, height: 20, borderRadius: 4 },
-      md: { width: 32, height: 32, borderRadius: "var(--radius-base, 8px)" }
+      md: { width: 32, height: 32, borderRadius: 8 }
     },
     disabled: {
-      true: {
-        opacity: 0.4,
-        cursor: "not-allowed",
-        pointerEvents: "none"
-      }
+      true: { opacity: 0.4, cursor: "not-allowed", pointerEvents: "none" }
     }
   }
 });
-var VARIANT_CLASSES = {
-  plain: "bg-transparent text-inherit border-none hover:bg-transparent",
-  icon_secondary: [
-    "bg-transparent text-icon-secondary border-none",
-    "hover:text-hover",
-    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text",
-    "data-[selected]:hover:text-hover",
-    "data-[expanded]:text-hover"
-  ].join(" "),
-  icon_background: [
-    "bg-[var(--color-button-icon-background-bg)] text-icon-secondary border-none",
-    "hover:text-hover",
-    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text",
-    "data-[selected]:hover:text-hover",
-    "data-[expanded]:text-hover"
-  ].join(" "),
-  link: [
-    "bg-transparent text-link-primary border-none font-normal px-0 h-auto",
-    "hover:bg-transparent hover:text-link-primary-hover",
-    "disabled:text-text-secondary"
-  ].join(" "),
-  dropdown: [
-    "border-2 border-solid bg-transparent",
-    "text-[var(--color-button-dropdown-fg)] border-[var(--color-button-dropdown-border)]",
-    "hover:bg-transparent hover:text-hover hover:border-hover",
-    "data-[expanded]:bg-transparent data-[expanded]:text-hover data-[expanded]:border-hover",
-    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text data-[selected]:border-transparent",
-    "data-[selected]:hover:text-hover"
-  ].join(" "),
-  pagination: [
-    "border-2 border-solid bg-transparent",
-    "text-[var(--color-button-pagination-fg)] border-[var(--color-button-pagination-border)]",
-    "hover:bg-transparent hover:text-hover hover:border-hover",
-    "data-[selected]:bg-selected-control-bg data-[selected]:text-selected-control-text data-[selected]:border-transparent"
-  ].join(" ")
-};
-var ICON_SIZE_CLASSES = {
-  "2xs": "[&_svg]:size-5",
-  "2xs_alt": "[&_svg]:size-3",
-  md: "[&_svg]:size-5"
+var HOVER = "var(--color-hover)";
+var SELECTED_BG = "var(--color-selected-control-bg)";
+var SELECTED_FG = "var(--color-selected-control-text)";
+var VARIANT = {
+  plain: {
+    rest: { backgroundColor: "transparent", hoverStyle: { backgroundColor: "transparent" } }
+  },
+  icon_secondary: {
+    rest: {
+      backgroundColor: "transparent",
+      color: "var(--color-icon-secondary)",
+      hoverStyle: { color: HOVER }
+    },
+    selected: { backgroundColor: SELECTED_BG, color: SELECTED_FG, hoverStyle: { color: HOVER } },
+    expanded: { color: HOVER }
+  },
+  icon_background: {
+    rest: {
+      backgroundColor: "var(--color-button-icon-background-bg)",
+      color: "var(--color-icon-secondary)",
+      hoverStyle: { color: HOVER }
+    },
+    selected: { backgroundColor: SELECTED_BG, color: SELECTED_FG, hoverStyle: { color: HOVER } },
+    expanded: { color: HOVER }
+  },
+  link: {
+    rest: {
+      backgroundColor: "transparent",
+      color: "var(--color-link-primary)",
+      fontWeight: "400",
+      paddingHorizontal: 0,
+      height: "auto",
+      hoverStyle: { backgroundColor: "transparent", color: "var(--color-link-primary-hover)" },
+      disabledStyle: { color: "var(--color-text-secondary)" }
+    }
+  },
+  dropdown: {
+    rest: {
+      borderWidth: 2,
+      borderStyle: "solid",
+      backgroundColor: "transparent",
+      color: "var(--color-button-dropdown-fg)",
+      borderColor: "var(--color-button-dropdown-border)",
+      hoverStyle: { backgroundColor: "transparent", color: HOVER, borderColor: HOVER }
+    },
+    selected: { backgroundColor: SELECTED_BG, color: SELECTED_FG, borderColor: "transparent", hoverStyle: { color: HOVER } },
+    expanded: { backgroundColor: "transparent", color: HOVER, borderColor: HOVER }
+  },
+  pagination: {
+    rest: {
+      borderWidth: 2,
+      borderStyle: "solid",
+      backgroundColor: "transparent",
+      color: "var(--color-button-pagination-fg)",
+      borderColor: "var(--color-button-pagination-border)",
+      hoverStyle: { backgroundColor: "transparent", color: HOVER, borderColor: HOVER }
+    },
+    selected: { backgroundColor: SELECTED_BG, color: SELECTED_FG, borderColor: "transparent" }
+  }
 };
-var SP = 4;
+var ICON_SIZE = { "2xs": 20, "2xs_alt": 12, md: 20 };
 var IconButton = React__namespace.forwardRef(
   function IconButton2(props, ref) {
     const {
@@ -297,58 +312,43 @@ var IconButton = React__namespace.forwardRef(
       disabled,
       className,
       children,
-      as: _as,
+      as: asProp,
       style: styleProp,
-      // Strip Chakra style props
-      boxSize: _boxSize,
-      color: _color,
-      px: _px,
-      borderRadius: _borderRadius,
-      ml: _ml,
-      mr: _mr,
-      _hover,
-      _expanded,
       ...rest
     } = props;
-    const shimStyle = { ...styleProp };
-    if (_boxSize !== void 0) {
-      const bs = typeof _boxSize === "number" ? `${_boxSize * SP}px` : _boxSize;
-      shimStyle.width = bs;
-      shimStyle.height = bs;
-    }
-    if (_color) shimStyle.color = _color;
-    if (_px !== void 0) {
-      const v = typeof _px === "number" ? `${_px * SP}px` : _px;
-      shimStyle.paddingLeft = v;
-      shimStyle.paddingRight = v;
-    }
-    if (_borderRadius) shimStyle.borderRadius = _borderRadius;
-    if (_ml !== void 0) shimStyle.marginLeft = typeof _ml === "number" ? `${_ml * SP}px` : _ml;
-    if (_mr !== void 0) shimStyle.marginRight = typeof _mr === "number" ? `${_mr * SP}px` : _mr;
-    const mergedStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
-    const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.plain;
-    const iconSizeClass = size ? ICON_SIZE_CLASSES[size] ?? "" : "";
-    const combinedClassName = [variantClass, iconSizeClass, className].filter(Boolean).join(" ");
+    const look = VARIANT[variant] ?? VARIANT.plain;
+    const iconSize = size ? ICON_SIZE[size] : void 0;
     const button = /* @__PURE__ */ jsxRuntime.jsx(
       IconButtonFrame,
       {
         ref,
         size,
         disabled: !loadingSkeleton && (loading || disabled) || void 0,
-        render: _as ? React__namespace.createElement(_as) : void 0,
-        className: combinedClassName,
-        style: mergedStyle,
+        render: asProp ? React__namespace.createElement(asProp) : void 0,
+        className: ["lux-icon", className].filter(Boolean).join(" "),
+        style: { ...styleProp, ...iconSize ? { "--icon-size": `${iconSize}px` } : null },
+        ...look.rest,
+        ...selected ? look.selected : null,
+        ...expanded ? look.expanded : null,
         ...expanded ? { "data-expanded": true } : {},
         ...selected ? { "data-selected": true } : {},
         ...highlighted ? { "data-highlighted": true } : {},
         ...loadingSkeleton ? { "data-loading-skeleton": true } : {},
         ...rest,
         children: loading ? /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+          gui.View,
           {
-            className: "inline-block size-5 animate-spin rounded-full border-2 border-current border-b-transparent border-l-transparent",
+            className: "lux-spin",
+            render: /* @__PURE__ */ jsxRuntime.jsx("span", {}),
             role: "status",
-            "aria-label": "Loading"
+            "aria-label": "Loading",
+            width: 20,
+            height: 20,
+            borderRadius: 1e3,
+            borderWidth: 2,
+            borderColor: "currentColor",
+            borderBottomColor: "transparent",
+            borderLeftColor: "transparent"
           }
         ) : children
       }

package/dist/icon-button.d.cts

@@ -1,6 +1,18 @@
 import * as React from 'react';
 
-type Variant = 'plain' | 'icon_secondary' | 'icon_background' | 'link' | 'dropdown' | 'pagination';
+type Style = Record<string, unknown>;
+/**
+ * Resting look, and the looks that replace it while selected or expanded.
+ * Merged in that order, so a key set in two of them resolves to the later —
+ * which is why `selected` and `expanded` are objects rather than `hoverStyle`
+ * entries that would fight the resting value.
+ */
+declare const VARIANT: Record<string, {
+    rest: Style;
+    selected?: Style;
+    expanded?: Style;
+}>;
+type Variant = keyof typeof VARIANT;
 type Size = '2xs' | '2xs_alt' | 'md';
 interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
     /** Visual variant */
@@ -11,22 +23,14 @@ interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
     loading?: boolean;
     /** Render a skeleton placeholder instead of the button */
     loadingSkeleton?: boolean;
-    /** Maps to data-expanded for popover trigger styling */
+    /** Also emitted as data-expanded for consumer styling */
     expanded?: boolean;
-    /** Maps to data-selected for toggle styling */
+    /** Also emitted as data-selected for consumer styling */
     selected?: boolean;
-    /** Maps to data-highlighted */
+    /** Also emitted as data-highlighted */
     highlighted?: boolean;
     /** Polymorphic element type (e.g. "div") */
     as?: React.ElementType;
-    boxSize?: number | string;
-    color?: string;
-    px?: string | number;
-    borderRadius?: string;
-    ml?: number | string;
-    mr?: number | string;
-    _hover?: Record<string, string>;
-    _expanded?: Record<string, string>;
 }
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
 

package/dist/icon-button.d.ts

@@ -1,6 +1,18 @@
 import * as React from 'react';
 
-type Variant = 'plain' | 'icon_secondary' | 'icon_background' | 'link' | 'dropdown' | 'pagination';
+type Style = Record<string, unknown>;
+/**
+ * Resting look, and the looks that replace it while selected or expanded.
+ * Merged in that order, so a key set in two of them resolves to the later —
+ * which is why `selected` and `expanded` are objects rather than `hoverStyle`
+ * entries that would fight the resting value.
+ */
+declare const VARIANT: Record<string, {
+    rest: Style;
+    selected?: Style;
+    expanded?: Style;
+}>;
+type Variant = keyof typeof VARIANT;
 type Size = '2xs' | '2xs_alt' | 'md';
 interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
     /** Visual variant */
@@ -11,22 +23,14 @@ interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElem
     loading?: boolean;
     /** Render a skeleton placeholder instead of the button */
     loadingSkeleton?: boolean;
-    /** Maps to data-expanded for popover trigger styling */
+    /** Also emitted as data-expanded for consumer styling */
     expanded?: boolean;
-    /** Maps to data-selected for toggle styling */
+    /** Also emitted as data-selected for consumer styling */
     selected?: boolean;
-    /** Maps to data-highlighted */
+    /** Also emitted as data-highlighted */
     highlighted?: boolean;
     /** Polymorphic element type (e.g. "div") */
     as?: React.ElementType;
-    boxSize?: number | string;
-    color?: string;
-    px?: string | number;
-    borderRadius?: string;
-    ml?: number | string;
-    mr?: number | string;
-    _hover?: Record<string, string>;
-    _expanded?: Record<string, string>;
 }
 declare const IconButton: React.ForwardRefExoticComponent<IconButtonProps & React.RefAttributes<HTMLButtonElement>>;