@luxfi/ui 7.4.10 → 7.4.11

package/dist/field.js

@@ -1,20 +1,26 @@
 "use client";
-import * as LabelPrimitive from '@radix-ui/react-label';
+import { YStack, Label, Text } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/field.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var space = String.fromCharCode(32);
 function getComponentDisplayName(type) {
   if (typeof type === "string") return void 0;
   if ("displayName" in type) return type.displayName;
   return void 0;
 }
+var ERROR = "var(--color-text-error)";
+var MUTED = "var(--color-text-secondary)";
+var Marks = ({ required, optionalText, errorText }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  required && /* @__PURE__ */ jsx(Text, { color: ERROR, "aria-hidden": true, children: "*" }),
+  !required && optionalText && /* @__PURE__ */ jsx(Text, { fontSize: 14, color: MUTED, children: optionalText }),
+  errorText && /* @__PURE__ */ jsxs(Text, { fontSize: 14, color: ERROR, children: [
+    "-",
+    space,
+    errorText
+  ] })
+] });
 var Field = React.forwardRef(
   function Field2(props, ref) {
     const {
@@ -33,127 +39,73 @@ var Field = React.forwardRef(
       className,
       style
     } = props;
+    const flags = {
+      "data-disabled": disabled || void 0,
+      "data-readonly": readOnly || void 0,
+      "data-invalid": invalid || void 0
+    };
     if (floating && label) {
-      const injectedProps2 = {
-        className: "peer",
-        placeholder: " ",
-        size,
-        floating,
-        disabled,
-        readOnly
-      };
+      const injectedProps = { className: "lux-field-control", placeholder: " ", size, floating, disabled, readOnly };
       const labelElement = /* @__PURE__ */ jsxs(
-        LabelPrimitive.Root,
+        Label,
         {
-          className: cn(
-            "absolute left-3 top-1/2 -translate-y-1/2",
-            "text-[var(--color-input-placeholder,theme(colors.gray.400))]",
-            "pointer-events-none select-none",
-            "origin-top-left transition-all duration-150",
-            "peer-focus:top-1 peer-focus:translate-y-0 peer-focus:scale-75",
-            "peer-[:not(:placeholder-shown)]:top-1 peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:scale-75"
-          ),
           htmlFor: id,
+          position: "absolute",
+          left: 12,
+          top: "50%",
+          pointerEvents: "none",
+          userSelect: "none",
+          flexDirection: "row",
+          gap: 4,
+          color: "var(--color-input-placeholder)",
+          className: "lux-field-float",
           children: [
             label,
-            required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
-            !required && optionalText && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm", children: optionalText }),
-            errorText && /* @__PURE__ */ jsxs("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))] text-sm", children: [
-              "-",
-              space,
-              errorText
-            ] })
+            /* @__PURE__ */ jsx(Marks, { required, optionalText, errorText })
           ]
         }
       );
-      const helperTextElement = helperText ? /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }) : null;
+      const helperTextElement = helperText ? /* @__PURE__ */ jsx(Text, { marginTop: 6, fontSize: 12, color: MUTED, children: helperText }) : null;
       const child2 = React.Children.only(children);
       const isInputGroup = getComponentDisplayName(child2.type) === "InputGroup";
       if (isInputGroup) {
-        const inputElement2 = React.cloneElement(
+        const inputElement = React.cloneElement(
           React.Children.only(child2.props.children),
-          injectedProps2
-        );
-        const groupInputElement = React.cloneElement(
-          child2,
-          {},
-          inputElement2,
-          labelElement
-        );
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref,
-            id,
-            className: cn("relative w-full", className),
-            style,
-            "data-disabled": disabled || void 0,
-            "data-readonly": readOnly || void 0,
-            "data-invalid": invalid || void 0,
-            children: [
-              groupInputElement,
-              helperTextElement
-            ]
-          }
+          injectedProps
         );
+        return /* @__PURE__ */ jsxs(YStack, { ref, id, position: "relative", width: "100%", className, style, ...flags, children: [
+          React.cloneElement(child2, {}, inputElement, labelElement),
+          helperTextElement
+        ] });
       }
-      const inputElement = React.cloneElement(child2, injectedProps2);
-      return /* @__PURE__ */ jsxs(
-        "div",
+      return /* @__PURE__ */ jsxs(YStack, { ref, id, position: "relative", width: "100%", className, style, ...flags, children: [
+        React.cloneElement(child2, injectedProps),
+        labelElement,
+        helperTextElement
+      ] });
+    }
+    const child = React.Children.only(children);
+    return /* @__PURE__ */ jsxs(YStack, { ref, id, gap: 4, className, style, ...flags, children: [
+      label && /* @__PURE__ */ jsxs(
+        Label,
         {
-          ref,
-          id,
-          className: cn("relative w-full", className),
-          style,
-          "data-disabled": disabled || void 0,
-          "data-readonly": readOnly || void 0,
-          "data-invalid": invalid || void 0,
+          htmlFor: id,
+          flexDirection: "row",
+          gap: 4,
+          fontSize: 14,
+          fontWeight: "500",
+          color: "var(--color-text-primary)",
+          opacity: disabled ? 0.4 : 1,
           children: [
-            inputElement,
-            labelElement,
-            helperTextElement
+            label,
+            /* @__PURE__ */ jsx(Marks, { required, optionalText })
           ]
         }
-      );
-    }
-    const injectedProps = {
-      size
-    };
-    const child = React.Children.only(children);
-    const clonedChild = React.cloneElement(child, injectedProps);
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref,
-        id,
-        className: cn("flex flex-col gap-1", className),
-        style,
-        "data-disabled": disabled || void 0,
-        "data-readonly": readOnly || void 0,
-        "data-invalid": invalid || void 0,
-        children: [
-          label && /* @__PURE__ */ jsxs(
-            LabelPrimitive.Root,
-            {
-              className: cn(
-                "text-sm font-medium text-[var(--color-field-label,theme(colors.gray.700))]",
-                "dark:text-[var(--color-field-label,theme(colors.gray.300))]",
-                disabled && "opacity-40"
-              ),
-              htmlFor: id,
-              children: [
-                label,
-                required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-[var(--color-fg-error,theme(colors.red.500))]", "aria-hidden": "true", children: "*" }),
-                !required && optionalText && /* @__PURE__ */ jsx("span", { className: "ml-1 text-[var(--color-text-secondary,theme(colors.gray.400))] text-sm font-normal", children: optionalText })
-              ]
-            }
-          ),
-          clonedChild,
-          helperText && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--color-text-secondary,theme(colors.gray.400))]", children: helperText }),
-          errorText && /* @__PURE__ */ jsx("p", { className: "text-xs text-[var(--color-fg-error,theme(colors.red.500))]", children: errorText })
-        ]
-      }
-    );
+      ),
+      React.cloneElement(child, { size }),
+      helperText && /* @__PURE__ */ jsx(Text, { fontSize: 12, color: MUTED, children: helperText }),
+      errorText && /* @__PURE__ */ jsx(Text, { fontSize: 12, color: ERROR, children: errorText })
+    ] });
   }
 );
 

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>>;