@luxfi/ui 7.0.0 → 7.1.0

package/dist/button.js

@@ -1,6 +1,5 @@
 "use client";
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
+import { styled, View } from '@hanzogui/core';
 import * as React2 from 'react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -10,272 +9,137 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var SPACING_SCALE = 4;
-function toStylePx(value) {
-  if (value === void 0) return void 0;
-  if (typeof value === "string") return value;
-  return `${value * SPACING_SCALE}px`;
+var SHIM_PROPS = [
+  "w",
+  "h",
+  "minW",
+  "maxW",
+  "display",
+  "flexGrow",
+  "flexShrink",
+  "flexBasis",
+  "fontWeight",
+  "textStyle",
+  "borderRadius",
+  "alignSelf",
+  "alignItems",
+  "justifyContent",
+  "color",
+  "mt",
+  "mb",
+  "ml",
+  "mr",
+  "height",
+  "overflow",
+  "whiteSpace",
+  "textOverflow",
+  "textTransform",
+  "gap",
+  "gridTemplateColumns",
+  "minWidth",
+  "boxSize",
+  "py",
+  "px",
+  "p",
+  "hideBelow",
+  "fontSize",
+  "flexWrap",
+  "wordBreak",
+  "lineHeight",
+  "marginRight",
+  "position",
+  "background"
+];
+var S = 4;
+function dim(v) {
+  if (v == null) return void 0;
+  if (typeof v === "number") return `${v * S}px`;
+  if (typeof v === "string") return v;
+  if (typeof v === "object") {
+    const o = v;
+    return o.base ?? o.lg ?? o.xl ?? Object.values(o)[0];
+  }
+  return void 0;
 }
-function extractSkeletonStyleProps(props) {
-  const style = {};
-  const rest = {};
-  function resolveDimension(value) {
-    if (value === void 0 || value === null) return void 0;
-    if (typeof value === "number") return `${value * SPACING_SCALE}px`;
-    if (typeof value === "string") return value;
-    if (typeof value === "object") {
-      const obj = value;
-      return obj.base ?? obj.lg ?? obj.xl ?? Object.values(obj)[0];
-    }
-    return void 0;
+function sp(v) {
+  if (v === void 0) return void 0;
+  return typeof v === "number" ? `${v * S}px` : v;
+}
+function shimToStyle(props) {
+  const s = {};
+  if (props.w !== void 0) s.width = dim(props.w);
+  if (props.h !== void 0) s.height = dim(props.h);
+  if (props.minW !== void 0) s.minWidth = dim(props.minW);
+  if (props.maxW !== void 0) s.maxWidth = dim(props.maxW);
+  if (props.display !== void 0) s.display = props.display;
+  if (props.flexGrow !== void 0) s.flexGrow = props.flexGrow;
+  if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
+  if (props.flexBasis !== void 0) s.flexBasis = props.flexBasis;
+  if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
+  if (props.borderRadius !== void 0) s.borderRadius = props.borderRadius;
+  if (props.alignSelf !== void 0) s.alignSelf = props.alignSelf;
+  if (props.alignItems !== void 0) s.alignItems = props.alignItems;
+  if (props.justifyContent !== void 0) s.justifyContent = props.justifyContent;
+  if (props.color !== void 0) s.color = props.color;
+  if (props.mt !== void 0) s.marginTop = sp(props.mt);
+  if (props.mb !== void 0) s.marginBottom = sp(props.mb);
+  if (props.ml !== void 0) s.marginLeft = sp(props.ml);
+  if (props.mr !== void 0) s.marginRight = sp(props.mr);
+  if (props.height !== void 0) s.height = props.height;
+  if (props.overflow !== void 0) s.overflow = props.overflow;
+  if (props.whiteSpace !== void 0) s.whiteSpace = props.whiteSpace;
+  if (props.textOverflow !== void 0) s.textOverflow = props.textOverflow;
+  if (props.textTransform !== void 0) s.textTransform = props.textTransform;
+  if (props.gap !== void 0) s.gap = sp(props.gap);
+  if (props.gridTemplateColumns !== void 0) s.gridTemplateColumns = props.gridTemplateColumns;
+  if (props.minWidth !== void 0) s.minWidth = props.minWidth;
+  if (props.boxSize !== void 0) {
+    const v = typeof props.boxSize === "number" ? `${props.boxSize * S}px` : props.boxSize;
+    s.width = v;
+    s.height = v;
   }
-  for (const [key, value] of Object.entries(props)) {
-    if (value === void 0) continue;
-    switch (key) {
-      case "w": {
-        const v = resolveDimension(value);
-        if (v) style.width = v;
-        break;
-      }
-      case "h": {
-        const v = resolveDimension(value);
-        if (v) style.height = v;
-        break;
-      }
-      case "minW": {
-        const v = resolveDimension(value);
-        if (v) style.minWidth = v;
-        break;
-      }
-      case "maxW": {
-        const v = resolveDimension(value);
-        if (v) style.maxWidth = v;
-        break;
-      }
-      case "height":
-        style.height = value;
-        break;
-      case "display":
-        style.display = value;
-        break;
-      case "flexGrow":
-        style.flexGrow = value;
-        break;
-      case "flexShrink":
-        style.flexShrink = value;
-        break;
-      case "flexBasis":
-        style.flexBasis = value;
-        break;
-      case "fontWeight":
-        style.fontWeight = value;
-        break;
-      case "borderRadius":
-        style.borderRadius = value;
-        break;
-      case "alignSelf":
-        style.alignSelf = value;
-        break;
-      case "alignItems":
-        style.alignItems = value;
-        break;
-      case "justifyContent":
-        style.justifyContent = value;
-        break;
-      case "color":
-        style.color = value;
-        break;
-      case "mt":
-        style.marginTop = toStylePx(value);
-        break;
-      case "mb":
-        style.marginBottom = toStylePx(value);
-        break;
-      case "ml":
-        style.marginLeft = toStylePx(value);
-        break;
-      case "mr":
-        style.marginRight = toStylePx(value);
-        break;
-      case "overflow":
-        style.overflow = value;
-        break;
-      case "whiteSpace":
-        style.whiteSpace = value;
-        break;
-      case "textOverflow":
-        style.textOverflow = value;
-        break;
-      case "textTransform":
-        style.textTransform = value;
-        break;
-      case "gap":
-        style.gap = typeof value === "number" ? `${value * SPACING_SCALE}px` : value;
-        break;
-      case "gridTemplateColumns":
-        style.gridTemplateColumns = value;
-        break;
-      case "minWidth":
-        style.minWidth = value;
-        break;
-      case "boxSize": {
-        const s = typeof value === "number" ? `${value * SPACING_SCALE}px` : value;
-        style.width = s;
-        style.height = s;
-        break;
-      }
-      case "py": {
-        const v = toStylePx(value);
-        style.paddingTop = v;
-        style.paddingBottom = v;
-        break;
-      }
-      case "px": {
-        const v = toStylePx(value);
-        style.paddingLeft = v;
-        style.paddingRight = v;
-        break;
-      }
-      case "p": {
-        const v = toStylePx(value);
-        style.padding = v;
-        break;
-      }
-      case "hideBelow":
-        break;
-      // handled via className
-      case "textStyle":
-        break;
-      // drop textStyle, not directly applicable
-      case "fontSize":
-        style.fontSize = value;
-        break;
-      case "flexWrap":
-        style.flexWrap = value;
-        break;
-      case "wordBreak":
-        style.wordBreak = value;
-        break;
-      case "lineHeight":
-        style.lineHeight = value;
-        break;
-      case "marginRight":
-        style.marginRight = value;
-        break;
-      case "position":
-        style.position = value;
-        break;
-      case "background":
-        style.background = value;
-        break;
-      default:
-        rest[key] = value;
-        break;
-    }
+  if (props.py !== void 0) {
+    const v = sp(props.py);
+    s.paddingTop = v;
+    s.paddingBottom = v;
   }
-  return { style, rest };
+  if (props.px !== void 0) {
+    const v = sp(props.px);
+    s.paddingLeft = v;
+    s.paddingRight = v;
+  }
+  if (props.p !== void 0) s.padding = sp(props.p);
+  if (props.fontSize !== void 0) s.fontSize = props.fontSize;
+  if (props.flexWrap !== void 0) s.flexWrap = props.flexWrap;
+  if (props.wordBreak !== void 0) s.wordBreak = props.wordBreak;
+  if (props.lineHeight !== void 0) s.lineHeight = props.lineHeight;
+  if (props.marginRight !== void 0) s.marginRight = props.marginRight;
+  if (props.position !== void 0) s.position = props.position;
+  if (props.background !== void 0) s.background = props.background;
+  return s;
+}
+function stripShims(props) {
+  const out = { ...props };
+  for (const k of SHIM_PROPS) delete out[k];
+  return out;
 }
+var SKELETON_CLASSES = [
+  "animate-skeleton-shimmer rounded-sm",
+  "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
+  "bg-[length:200%_100%]"
+].join(" ");
+var HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
 var Skeleton = React2.forwardRef(
   function Skeleton2(props, ref) {
-    const {
-      loading = false,
-      asChild,
-      className,
-      children,
-      style: styleProp,
-      // Destructure style-prop shims so they don't leak into DOM
-      w: _w,
-      h: _h,
-      minW: _minW,
-      maxW: _maxW,
-      display: _display,
-      flexGrow: _flexGrow,
-      flexShrink: _flexShrink,
-      flexBasis: _flexBasis,
-      fontWeight: _fontWeight,
-      textStyle: _textStyle,
-      borderRadius: _borderRadius,
-      alignSelf: _alignSelf,
-      alignItems: _alignItems,
-      justifyContent: _justifyContent,
-      color: _color,
-      mt: _mt,
-      mb: _mb,
-      ml: _ml,
-      mr: _mr,
-      height: _height,
-      overflow: _overflow,
-      whiteSpace: _whiteSpace,
-      textOverflow: _textOverflow,
-      textTransform: _textTransform,
-      gap: _gap,
-      gridTemplateColumns: _gridTemplateColumns,
-      minWidth: _minWidth,
-      boxSize: _boxSize,
-      py: _py,
-      px: _px,
-      p: _p,
-      hideBelow: _hideBelow,
-      fontSize: _fontSize,
-      flexWrap: _flexWrap,
-      wordBreak: _wordBreak,
-      lineHeight: _lineHeight,
-      marginRight: _marginRight,
-      position: _position,
-      background: _background,
-      as: Component = "div",
-      ...htmlRest
-    } = props;
-    const { style: shimStyle } = extractSkeletonStyleProps({
-      w: _w,
-      h: _h,
-      minW: _minW,
-      maxW: _maxW,
-      display: _display,
-      flexGrow: _flexGrow,
-      flexShrink: _flexShrink,
-      flexBasis: _flexBasis,
-      fontWeight: _fontWeight,
-      textStyle: _textStyle,
-      borderRadius: _borderRadius,
-      alignSelf: _alignSelf,
-      alignItems: _alignItems,
-      justifyContent: _justifyContent,
-      color: _color,
-      mt: _mt,
-      mb: _mb,
-      ml: _ml,
-      mr: _mr,
-      height: _height,
-      overflow: _overflow,
-      whiteSpace: _whiteSpace,
-      textOverflow: _textOverflow,
-      textTransform: _textTransform,
-      gap: _gap,
-      gridTemplateColumns: _gridTemplateColumns,
-      minWidth: _minWidth,
-      boxSize: _boxSize,
-      py: _py,
-      px: _px,
-      p: _p,
-      hideBelow: _hideBelow,
-      fontSize: _fontSize,
-      flexWrap: _flexWrap,
-      wordBreak: _wordBreak,
-      lineHeight: _lineHeight,
-      marginRight: _marginRight,
-      position: _position,
-      background: _background
-    });
+    const { loading = false, asChild, className, children, style: styleProp, as: Component = "div", ...allRest } = props;
+    const shimStyle = shimToStyle(props);
     const mergedStyle = Object.keys(shimStyle).length > 0 || styleProp ? { ...shimStyle, ...styleProp } : void 0;
-    const HIDE_BELOW_MAP = { lg: "lg:hidden", md: "md:hidden", sm: "sm:hidden" };
-    const hideBelowClass = _hideBelow ? HIDE_BELOW_MAP[_hideBelow] : void 0;
-    const finalClassName = hideBelowClass ? cn(className, hideBelowClass) : className;
+    const hideBelowClass = props.hideBelow ? HIDE_BELOW_MAP[props.hideBelow] : void 0;
+    const cls = hideBelowClass ? cn(className, hideBelowClass) : className;
+    const htmlRest = stripShims(allRest);
     if (!loading) {
-      if (asChild && React2.isValidElement(children)) {
-        return children;
-      }
-      return /* @__PURE__ */ jsx(Component, { ref, className: finalClassName, style: mergedStyle, ...htmlRest, children });
+      if (asChild && React2.isValidElement(children)) return children;
+      return /* @__PURE__ */ jsx(Component, { ref, className: cls, style: mergedStyle, ...htmlRest, children });
     }
     if (asChild && React2.isValidElement(children)) {
       return /* @__PURE__ */ jsx(
@@ -283,13 +147,7 @@ var Skeleton = React2.forwardRef(
         {
           ref,
           "data-loading": true,
-          className: cn(
-            "animate-skeleton-shimmer rounded-sm",
-            "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-            "bg-[length:200%_100%]",
-            "text-transparent [&_*]:invisible",
-            finalClassName
-          ),
+          className: cn(SKELETON_CLASSES, "text-transparent [&_*]:invisible", cls),
           style: mergedStyle,
           ...htmlRest,
           children
@@ -301,13 +159,7 @@ var Skeleton = React2.forwardRef(
       {
         ref,
         "data-loading": true,
-        className: cn(
-          "animate-skeleton-shimmer rounded-sm",
-          "bg-[linear-gradient(90deg,var(--color-skeleton-start)_0%,var(--color-skeleton-end)_50%,var(--color-skeleton-start)_100%)]",
-          "bg-[length:200%_100%]",
-          children ? "text-transparent [&_*]:invisible" : "min-h-5",
-          finalClassName
-        ),
+        className: cn(SKELETON_CLASSES, children ? "text-transparent [&_*]:invisible" : "min-h-5", cls),
         style: mergedStyle,
         ...htmlRest,
         children
@@ -344,171 +196,202 @@ React2.forwardRef(
     )) });
   }
 );
-var buttonVariants = cva(
-  // base styles (shared across all variants)
-  [
-    "inline-flex items-center justify-center",
-    "gap-0 font-semibold overflow-hidden rounded-md",
-    "cursor-pointer select-none whitespace-nowrap",
-    "transition-colors duration-150",
-    "disabled:opacity-[0.2] disabled:cursor-not-allowed"
-  ],
-  {
-    variants: {
-      variant: {
-        // --- Solid ---
-        solid: [
-          "bg-[var(--color-button-solid-bg)] text-[var(--color-button-solid-text)]",
-          "hover:bg-[var(--color-hover)]",
-          "data-[expanded]:bg-[var(--color-hover)]"
-        ],
-        // --- Solid Danger ---
-        solid_danger: [
-          "bg-red-600 text-[var(--color-button-solid-text)]",
-          "hover:bg-red-500",
-          "data-[expanded]:bg-red-500"
-        ],
-        // --- Outline ---
-        outline: [
-          "border-2 border-solid bg-transparent",
-          "text-[var(--color-button-outline-fg)] border-[var(--color-button-outline-fg)]",
-          "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]"
-        ],
-        // --- Outline Danger ---
-        outline_danger: [
-          "border-2 border-solid bg-transparent",
-          "text-red-600 border-red-600",
-          "hover:bg-transparent hover:text-red-500 hover:border-red-500"
-        ],
-        // --- Dropdown ---
-        dropdown: [
-          "border-2 border-solid bg-transparent",
-          "text-[var(--color-button-dropdown-fg)] border-[var(--color-button-dropdown-border)]",
-          "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
-          "data-[expanded]:bg-transparent data-[expanded]:text-[var(--color-hover)] data-[expanded]:border-[var(--color-hover)]",
-          "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)] data-[selected]:border-transparent",
-          "data-[selected]:hover:bg-[var(--color-selected-control-bg)]",
-          "data-[selected]:hover:text-[var(--color-hover)] data-[selected]:hover:border-transparent",
-          "data-[selected]:data-[expanded]:text-[var(--color-hover)]"
-        ],
-        // --- Header ---
-        header: [
-          "bg-transparent border-2 border-solid",
-          "text-[var(--color-button-header-fg)] border-[var(--color-button-header-border)]",
-          "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
-          // selected
-          "data-[selected]:bg-[var(--color-button-header-bg-selected)]",
-          "data-[selected]:text-[var(--color-button-header-fg-selected)] data-[selected]:border-transparent data-[selected]:border-0",
-          "data-[selected]:hover:bg-[var(--color-button-header-bg-selected)] data-[selected]:hover:text-[var(--color-hover)]",
-          "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
-          // selected + highlighted
-          "data-[selected]:data-[highlighted]:bg-[var(--color-button-header-bg-highlighted)]",
-          "data-[selected]:data-[highlighted]:text-[var(--color-button-header-fg-highlighted)]",
-          "data-[selected]:data-[highlighted]:border-transparent data-[selected]:data-[highlighted]:border-0",
-          "data-[selected]:data-[highlighted]:hover:bg-[var(--color-button-header-bg-highlighted)]",
-          "data-[selected]:data-[highlighted]:hover:text-[var(--color-hover)]",
-          "data-[selected]:data-[highlighted]:data-[expanded]:text-[var(--color-hover)]"
-        ],
-        // --- Hero ---
-        hero: [
-          "bg-[var(--color-button-hero-bg)] text-[var(--color-button-hero-fg)]",
-          "hover:bg-[var(--color-button-hero-bg-hover)] hover:text-[var(--color-button-hero-fg-hover)]",
-          "data-[selected]:bg-[var(--color-button-hero-bg-selected)] data-[selected]:text-[var(--color-button-hero-fg-selected)]",
-          "data-[selected]:hover:bg-[var(--color-button-hero-bg-selected)] data-[selected]:hover:text-[var(--color-hover)]",
-          "data-[selected]:data-[expanded]:text-[var(--color-hover)]"
-        ],
-        // --- Segmented ---
-        segmented: [
-          "bg-transparent border-2 border-solid rounded-none",
-          "text-[var(--color-button-segmented-fg)] border-[var(--color-selected-control-bg)]",
-          "hover:text-[var(--color-hover)]",
-          // selected
-          "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
-          "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-selected-control-text)]",
-          // border collapse: hide right border except when selected; first/last get rounded
-          "[&:not(:last-child)]:border-r-0 data-[selected]:[&:not(:last-child)]:border-r-2",
-          "data-[selected]+*:border-l-0",
-          "first:rounded-l-md last:rounded-r-md"
-        ],
-        // --- Plain ---
-        plain: [
-          "bg-transparent text-inherit border-none",
-          "hover:bg-transparent"
-        ],
-        // --- Subtle ---
-        subtle: [
-          "bg-[var(--color-button-subtle-bg)] text-[var(--color-button-subtle-fg)]",
-          "hover:bg-[var(--color-button-subtle-bg)] hover:text-[var(--color-hover)]",
-          "disabled:bg-[var(--color-button-subtle-bg)] disabled:text-[var(--color-button-subtle-fg)]"
-        ],
-        // --- Link ---
-        link: [
-          "bg-transparent text-[var(--color-link-primary)] border-none font-normal",
-          "px-0 h-auto",
-          "hover:bg-transparent hover:text-[var(--color-link-primary-hover)]",
-          "disabled:text-[var(--color-text-secondary)]"
-        ],
-        // --- Icon Secondary ---
-        icon_secondary: [
-          "bg-transparent text-[var(--color-icon-secondary)] border-none",
-          "hover:text-[var(--color-hover)]",
-          "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
-          "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-hover)]",
-          "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
-          "data-[expanded]:text-[var(--color-hover)]"
-        ],
-        // --- Icon Background ---
-        icon_background: [
-          "bg-[var(--color-button-icon-background-bg)] text-[var(--color-icon-secondary)] border-none",
-          "hover:text-[var(--color-hover)]",
-          "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
-          "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-hover)]",
-          "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
-          "data-[expanded]:text-[var(--color-hover)]"
-        ],
-        // --- Pagination ---
-        pagination: [
-          "border-2 border-solid bg-transparent",
-          "text-[var(--color-button-pagination-fg)] border-[var(--color-button-pagination-border)]",
-          "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
-          "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)] data-[selected]:border-transparent",
-          "data-[selected]:hover:bg-[var(--color-selected-control-bg)]",
-          "data-[selected]:hover:text-[var(--color-selected-control-text)] data-[selected]:hover:border-transparent"
-        ]
-      },
-      size: {
-        "2xs": "px-2 h-5 min-w-5 text-xs rounded-sm gap-1",
-        xs: "px-2 h-6 min-w-6 text-sm rounded-sm gap-1",
-        sm: "px-3 h-8 min-w-8 text-sm rounded-md gap-1",
-        md: "px-3 h-10 min-w-10 text-base rounded-md gap-2"
-      }
-    },
-    defaultVariants: {
-      variant: "solid",
-      size: "md"
-    }
-  }
-);
+var SpinnerFrame = styled(View, {
+  name: "ButtonSpinner",
+  render: /* @__PURE__ */ jsx("span", {}),
+  width: 16,
+  height: 16,
+  borderRadius: 1e3,
+  borderWidth: 2,
+  borderColor: "currentColor",
+  borderBottomColor: "transparent",
+  borderLeftColor: "transparent"
+});
 function Spinner({ className }) {
   return /* @__PURE__ */ jsx(
-    "span",
+    SpinnerFrame,
     {
-      className: cn(
-        "inline-block h-4 w-4 animate-spin rounded-full",
-        "border-2 border-current border-b-transparent border-l-transparent",
-        className
-      ),
       role: "status",
-      "aria-label": "Loading"
+      "aria-label": "Loading",
+      className: [
+        "animate-spin",
+        className
+      ].filter(Boolean).join(" ")
     }
   );
 }
+var ButtonFrame = styled(View, {
+  name: "LuxButton",
+  render: /* @__PURE__ */ jsx("button", { type: "button" }),
+  role: "button",
+  tabIndex: 0,
+  cursor: "pointer",
+  userSelect: "none",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: 0,
+  overflow: "hidden",
+  borderRadius: 6,
+  // Whitespace nowrap via className since hanzogui doesn't have a direct token
+  // Transition via className
+  variants: {
+    size: {
+      "2xs": { paddingHorizontal: 8, height: 20, minWidth: 20, fontSize: 12, borderRadius: 4, gap: 4 },
+      xs: { paddingHorizontal: 8, height: 24, minWidth: 24, fontSize: 14, borderRadius: 4, gap: 4 },
+      sm: { paddingHorizontal: 12, height: 32, minWidth: 32, fontSize: 14, borderRadius: 6, gap: 4 },
+      md: { paddingHorizontal: 12, height: 40, minWidth: 40, fontSize: 16, borderRadius: 6, gap: 8 }
+    },
+    disabled: {
+      true: {
+        opacity: 0.2,
+        cursor: "not-allowed",
+        pointerEvents: "none"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var VARIANT_CLASSES = {
+  solid: [
+    "bg-[var(--color-button-solid-bg)] text-[var(--color-button-solid-text)]",
+    "hover:bg-[var(--color-hover)]",
+    "data-[expanded]:bg-[var(--color-hover)]"
+  ].join(" "),
+  solid_danger: [
+    "bg-red-600 text-[var(--color-button-solid-text)]",
+    "hover:bg-red-500",
+    "data-[expanded]:bg-red-500"
+  ].join(" "),
+  outline: [
+    "border-2 border-solid bg-transparent",
+    "text-[var(--color-button-outline-fg)] border-[var(--color-button-outline-fg)]",
+    "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]"
+  ].join(" "),
+  outline_danger: [
+    "border-2 border-solid bg-transparent",
+    "text-red-600 border-red-600",
+    "hover:bg-transparent hover:text-red-500 hover:border-red-500"
+  ].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-[var(--color-hover)] hover:border-[var(--color-hover)]",
+    "data-[expanded]:bg-transparent data-[expanded]:text-[var(--color-hover)] data-[expanded]:border-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)] data-[selected]:border-transparent",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)]",
+    "data-[selected]:hover:text-[var(--color-hover)] data-[selected]:hover:border-transparent",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  header: [
+    "bg-transparent border-2 border-solid",
+    "text-[var(--color-button-header-fg)] border-[var(--color-button-header-border)]",
+    "hover:bg-transparent hover:text-[var(--color-hover)] hover:border-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-button-header-bg-selected)]",
+    "data-[selected]:text-[var(--color-button-header-fg-selected)] data-[selected]:border-transparent data-[selected]:border-0",
+    "data-[selected]:hover:bg-[var(--color-button-header-bg-selected)] data-[selected]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
+    "data-[selected]:data-[highlighted]:bg-[var(--color-button-header-bg-highlighted)]",
+    "data-[selected]:data-[highlighted]:text-[var(--color-button-header-fg-highlighted)]",
+    "data-[selected]:data-[highlighted]:border-transparent data-[selected]:data-[highlighted]:border-0",
+    "data-[selected]:data-[highlighted]:hover:bg-[var(--color-button-header-bg-highlighted)]",
+    "data-[selected]:data-[highlighted]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[highlighted]:data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  hero: [
+    "bg-[var(--color-button-hero-bg)] text-[var(--color-button-hero-fg)]",
+    "hover:bg-[var(--color-button-hero-bg-hover)] hover:text-[var(--color-button-hero-fg-hover)]",
+    "data-[selected]:bg-[var(--color-button-hero-bg-selected)] data-[selected]:text-[var(--color-button-hero-fg-selected)]",
+    "data-[selected]:hover:bg-[var(--color-button-hero-bg-selected)] data-[selected]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  segmented: [
+    "bg-transparent border-2 border-solid rounded-none",
+    "text-[var(--color-button-segmented-fg)] border-[var(--color-selected-control-bg)]",
+    "hover:text-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-selected-control-text)]",
+    "[&:not(:last-child)]:border-r-0 data-[selected]:[&:not(:last-child)]:border-r-2",
+    "data-[selected]+*:border-l-0",
+    "first:rounded-l-md last:rounded-r-md"
+  ].join(" "),
+  plain: "bg-transparent text-inherit border-none hover:bg-transparent",
+  subtle: [
+    "bg-[var(--color-button-subtle-bg)] text-[var(--color-button-subtle-fg)]",
+    "hover:bg-[var(--color-button-subtle-bg)] hover:text-[var(--color-hover)]",
+    "disabled:bg-[var(--color-button-subtle-bg)] disabled:text-[var(--color-button-subtle-fg)]"
+  ].join(" "),
+  link: [
+    "bg-transparent text-[var(--color-link-primary)] border-none font-normal",
+    "px-0 h-auto",
+    "hover:bg-transparent hover:text-[var(--color-link-primary-hover)]",
+    "disabled:text-[var(--color-text-secondary)]"
+  ].join(" "),
+  icon_secondary: [
+    "bg-transparent text-[var(--color-icon-secondary)] border-none",
+    "hover:text-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
+    "data-[expanded]:text-[var(--color-hover)]"
+  ].join(" "),
+  icon_background: [
+    "bg-[var(--color-button-icon-background-bg)] text-[var(--color-icon-secondary)] border-none",
+    "hover:text-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)]",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)] data-[selected]:hover:text-[var(--color-hover)]",
+    "data-[selected]:data-[expanded]:text-[var(--color-hover)]",
+    "data-[expanded]:text-[var(--color-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-[var(--color-hover)] hover:border-[var(--color-hover)]",
+    "data-[selected]:bg-[var(--color-selected-control-bg)] data-[selected]:text-[var(--color-selected-control-text)] data-[selected]:border-transparent",
+    "data-[selected]:hover:bg-[var(--color-selected-control-bg)]",
+    "data-[selected]:hover:text-[var(--color-selected-control-text)] data-[selected]:hover:border-transparent"
+  ].join(" ")
+};
+var BASE_CLASSES = "font-semibold whitespace-nowrap transition-colors duration-150";
+var SP = 4;
+function buildShimStyle(props) {
+  const s = { ...props.style };
+  if (props.mt !== void 0) s.marginTop = typeof props.mt === "number" ? `${props.mt * SP}px` : props.mt;
+  if (props.ml !== void 0) s.marginLeft = typeof props.ml === "number" ? `${props.ml * SP}px` : props.ml;
+  if (props.mr !== void 0) s.marginRight = typeof props.mr === "number" ? `${props.mr * SP}px` : props.mr;
+  if (props.px !== void 0) {
+    const v = typeof props.px === "number" ? `${props.px * SP}px` : props.px;
+    s.paddingLeft = v;
+    s.paddingRight = v;
+  }
+  if (props.py !== void 0) {
+    const v = typeof props.py === "number" ? `${props.py * SP}px` : props.py;
+    s.paddingTop = v;
+    s.paddingBottom = v;
+  }
+  if (props.fontWeight !== void 0) s.fontWeight = props.fontWeight;
+  if (props.gap !== void 0) s.gap = typeof props.gap === "number" ? `${props.gap * SP}px` : props.gap;
+  if (props.flexShrink !== void 0) s.flexShrink = props.flexShrink;
+  if (props.columnGap !== void 0) s.columnGap = typeof props.columnGap === "number" ? `${props.columnGap * SP}px` : props.columnGap;
+  if (props.gridColumn !== void 0) s.gridColumn = typeof props.gridColumn === "number" ? String(props.gridColumn) : props.gridColumn;
+  if (props.gridRow) s.gridRow = props.gridRow;
+  if (props.justifySelf) s.justifySelf = props.justifySelf;
+  if (props.alignSelf) s.alignSelf = props.alignSelf;
+  if (props.h) s.height = props.h;
+  if (props.w) s.width = props.w;
+  if (props.display) s.display = props.display;
+  if (props.borderBottomRightRadius !== void 0) s.borderBottomRightRadius = typeof props.borderBottomRightRadius === "number" ? `${props.borderBottomRightRadius}px` : props.borderBottomRightRadius;
+  if (props.borderTopRightRadius !== void 0) s.borderTopRightRadius = typeof props.borderTopRightRadius === "number" ? `${props.borderTopRightRadius}px` : props.borderTopRightRadius;
+  return Object.keys(s).length > 0 ? s : void 0;
+}
 var Button = React2.forwardRef(
   function Button2(props, ref) {
     const {
       className,
-      variant,
-      size,
+      variant = "solid",
+      size = "md",
       asChild = false,
       loading = false,
       loadingText,
@@ -520,57 +403,48 @@ var Button = React2.forwardRef(
       children,
       style: styleProp,
       // Strip Chakra style props
-      mt: _mt,
-      ml: _ml,
-      mr: _mr,
-      px: _px,
-      py: _py,
-      fontWeight: _fontWeight,
-      gap: _gap,
-      flexShrink: _flexShrink,
-      columnGap: _columnGap,
-      gridColumn: _gridColumn,
-      gridRow: _gridRow,
-      justifySelf: _justifySelf,
-      alignSelf: _alignSelf,
+      mt,
+      ml,
+      mr,
+      px,
+      py,
+      fontWeight,
+      gap,
+      flexShrink,
+      columnGap,
+      gridColumn,
+      gridRow,
+      justifySelf,
+      alignSelf,
       textStyle: _textStyle,
-      h: _h,
-      w: _w,
-      display: _display,
-      borderBottomRightRadius: _bbrr,
-      borderTopRightRadius: _btrr,
+      h,
+      w,
+      display,
+      borderBottomRightRadius,
+      borderTopRightRadius,
       ...rest
     } = props;
-    const SP = 4;
-    const shimStyle = { ...styleProp };
-    if (_mt !== void 0) shimStyle.marginTop = typeof _mt === "number" ? `${_mt * SP}px` : _mt;
-    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;
-    if (_px !== void 0) {
-      const v = typeof _px === "number" ? `${_px * SP}px` : _px;
-      shimStyle.paddingLeft = v;
-      shimStyle.paddingRight = v;
-    }
-    if (_py !== void 0) {
-      const v = typeof _py === "number" ? `${_py * SP}px` : _py;
-      shimStyle.paddingTop = v;
-      shimStyle.paddingBottom = v;
-    }
-    if (_fontWeight !== void 0) shimStyle.fontWeight = _fontWeight;
-    if (_gap !== void 0) shimStyle.gap = typeof _gap === "number" ? `${_gap * SP}px` : _gap;
-    if (_flexShrink !== void 0) shimStyle.flexShrink = _flexShrink;
-    if (_columnGap !== void 0) shimStyle.columnGap = typeof _columnGap === "number" ? `${_columnGap * SP}px` : _columnGap;
-    if (_gridColumn !== void 0) shimStyle.gridColumn = typeof _gridColumn === "number" ? String(_gridColumn) : _gridColumn;
-    if (_gridRow) shimStyle.gridRow = _gridRow;
-    if (_justifySelf) shimStyle.justifySelf = _justifySelf;
-    if (_alignSelf) shimStyle.alignSelf = _alignSelf;
-    if (_h) shimStyle.height = _h;
-    if (_w) shimStyle.width = _w;
-    if (_display) shimStyle.display = _display;
-    if (_bbrr !== void 0) shimStyle.borderBottomRightRadius = typeof _bbrr === "number" ? `${_bbrr}px` : _bbrr;
-    if (_btrr !== void 0) shimStyle.borderTopRightRadius = typeof _btrr === "number" ? `${_btrr}px` : _btrr;
-    const mergedStyle = Object.keys(shimStyle).length > 0 ? shimStyle : void 0;
-    const Comp = asChild ? Slot : "button";
+    const mergedStyle = buildShimStyle({
+      style: styleProp,
+      mt,
+      ml,
+      mr,
+      px,
+      py,
+      fontWeight,
+      gap,
+      flexShrink,
+      columnGap,
+      gridColumn,
+      gridRow,
+      justifySelf,
+      alignSelf,
+      h,
+      w,
+      display,
+      borderBottomRightRadius,
+      borderTopRightRadius
+    });
     const dataAttrs = {};
     if (expanded) dataAttrs["data-expanded"] = true;
     if (selected) dataAttrs["data-selected"] = true;
@@ -579,15 +453,19 @@ var Button = React2.forwardRef(
     const isDisabled = !loadingSkeleton && (loading || disabled);
     const inner = loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Spinner, {}),
-      loadingText != null && /* @__PURE__ */ jsx("span", { className: "ml-2", children: loadingText })
+      loadingText != null && /* @__PURE__ */ jsx("span", { style: { marginLeft: 8 }, children: loadingText })
     ] }) : children;
+    const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.solid;
+    const combinedClassName = [BASE_CLASSES, variantClass, className].filter(Boolean).join(" ");
     const button = /* @__PURE__ */ jsx(
-      Comp,
+      ButtonFrame,
       {
         ref,
-        className: cn(buttonVariants({ variant, size }), className),
-        style: mergedStyle,
+        size,
         disabled: isDisabled || void 0,
+        asChild: asChild || void 0,
+        className: combinedClassName,
+        style: mergedStyle,
         ...dataAttrs,
         ...rest,
         children: inner
@@ -599,6 +477,17 @@ var Button = React2.forwardRef(
     return button;
   }
 );
+var SIZE_CLASSES = {
+  "2xs": "px-2 h-5 min-w-5 text-xs rounded-sm gap-1",
+  xs: "px-2 h-6 min-w-6 text-sm rounded-sm gap-1",
+  sm: "px-3 h-8 min-w-8 text-sm rounded-md gap-1",
+  md: "px-3 h-10 min-w-10 text-base rounded-md gap-2"
+};
+function buttonVariants(opts) {
+  const v = opts?.variant ?? "solid";
+  const s = opts?.size ?? "md";
+  return [BASE_CLASSES, VARIANT_CLASSES[v] ?? "", SIZE_CLASSES[s] ?? ""].filter(Boolean).join(" ");
+}
 var ButtonGroup = React2.forwardRef(
   function ButtonGroup2(props, ref) {
     const { className, ...rest } = props;
@@ -606,7 +495,7 @@ var ButtonGroup = React2.forwardRef(
       "div",
       {
         ref,
-        className: cn("inline-flex", className),
+        className: ["inline-flex", className].filter(Boolean).join(" "),
         role: "group",
         ...rest
       }
@@ -647,11 +536,11 @@ var ButtonGroupRadio = React2.forwardRef(
       "div",
       {
         ref,
-        className: cn(
+        className: [
           "inline-flex gap-0",
-          equalWidth && "grid",
+          equalWidth ? "grid" : "",
           className
-        ),
+        ].filter(Boolean).join(" "),
         style: equalWidth ? { gridTemplateColumns: `repeat(${childrenLength}, 1fr)` } : void 0,
         role: "group",
         ...rest,