@luxfi/ui 5.5.3 → 5.6.0

package/dist/button.js

@@ -0,0 +1,664 @@
+"use client";
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import * as React2 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/button.tsx
+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`;
+}
+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;
+  }
+  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;
+    }
+  }
+  return { style, rest };
+}
+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 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;
+    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 /* @__PURE__ */ jsx(
+        Component,
+        {
+          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
+          ),
+          style: mergedStyle,
+          ...htmlRest,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Component,
+      {
+        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
+        ),
+        style: mergedStyle,
+        ...htmlRest,
+        children
+      }
+    );
+  }
+);
+React2.forwardRef(
+  function SkeletonCircle2(props, ref) {
+    const { size = 40, loading = true, className, ...rest } = props;
+    const dimension = typeof size === "number" ? `${size}px` : size;
+    return /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        ref,
+        loading,
+        className: cn("rounded-full shrink-0", className),
+        style: { width: dimension, height: dimension, ...rest.style },
+        ...rest
+      }
+    );
+  }
+);
+React2.forwardRef(
+  function SkeletonText2(props, ref) {
+    const { noOfLines = 3, loading = true, className, ...rest } = props;
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex w-full flex-col gap-2", className), ...rest, children: Array.from({ length: noOfLines }).map((_, index) => /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        loading,
+        className: cn("h-4", index === noOfLines - 1 && "max-w-[80%]")
+      },
+      index
+    )) });
+  }
+);
+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"
+    }
+  }
+);
+function Spinner({ className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      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"
+    }
+  );
+}
+var Button = React2.forwardRef(
+  function Button2(props, ref) {
+    const {
+      className,
+      variant,
+      size,
+      asChild = false,
+      loading = false,
+      loadingText,
+      loadingSkeleton = false,
+      expanded,
+      selected,
+      highlighted,
+      disabled,
+      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,
+      textStyle: _textStyle,
+      h: _h,
+      w: _w,
+      display: _display,
+      borderBottomRightRadius: _bbrr,
+      borderTopRightRadius: _btrr,
+      ...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 dataAttrs = {};
+    if (expanded) dataAttrs["data-expanded"] = true;
+    if (selected) dataAttrs["data-selected"] = true;
+    if (highlighted) dataAttrs["data-highlighted"] = true;
+    if (loadingSkeleton) dataAttrs["data-loading-skeleton"] = true;
+    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 })
+    ] }) : children;
+    const button = /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(buttonVariants({ variant, size }), className),
+        style: mergedStyle,
+        disabled: isDisabled || void 0,
+        ...dataAttrs,
+        ...rest,
+        children: inner
+      }
+    );
+    if (loadingSkeleton) {
+      return /* @__PURE__ */ jsx(Skeleton, { loading: loadingSkeleton, asChild: true, ref, children: button });
+    }
+    return button;
+  }
+);
+var ButtonGroup = React2.forwardRef(
+  function ButtonGroup2(props, ref) {
+    const { className, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("inline-flex", className),
+        role: "group",
+        ...rest
+      }
+    );
+  }
+);
+var ButtonGroupRadio = React2.forwardRef(
+  function ButtonGroupRadio2(props, ref) {
+    const {
+      children,
+      onChange,
+      variant = "segmented",
+      defaultValue,
+      loading = false,
+      equalWidth = false,
+      className,
+      ...rest
+    } = props;
+    const firstChildValue = React2.useMemo(() => {
+      const firstChild = Array.isArray(children) ? children[0] : void 0;
+      return typeof firstChild?.props.value === "string" ? firstChild.props.value : void 0;
+    }, [children]);
+    const [value, setValue] = React2.useState(defaultValue ?? firstChildValue);
+    const handleItemClick = React2.useCallback((event) => {
+      const v = event.currentTarget.value;
+      setValue(v);
+      onChange?.(v);
+    }, [onChange]);
+    const clonedChildren = React2.Children.map(children, (child) => {
+      return React2.cloneElement(child, {
+        onClick: handleItemClick,
+        selected: value === child.props.value,
+        variant
+      });
+    });
+    const childrenLength = React2.Children.count(children);
+    return /* @__PURE__ */ jsx(Skeleton, { loading, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "inline-flex gap-0",
+          equalWidth && "grid",
+          className
+        ),
+        style: equalWidth ? { gridTemplateColumns: `repeat(${childrenLength}, 1fr)` } : void 0,
+        role: "group",
+        ...rest,
+        children: clonedChildren
+      }
+    ) });
+  }
+);
+
+export { Button, ButtonGroup, ButtonGroupRadio, buttonVariants };