@luxfi/ui 5.6.0 → 6.1.0

package/src/badge.tsx

@@ -1,158 +0,0 @@
-import { cva } from 'class-variance-authority';
-import type { VariantProps } from 'class-variance-authority';
-import React from 'react';
-
-import { cn } from './utils';
-
-import { Skeleton } from './skeleton';
-import { Tooltip } from './tooltip';
-
-// Inline truncation tooltip (replaces explorer's TruncatedTextTooltip)
-function TruncatedTextTooltip({ label, children }: { readonly label: React.ReactNode; readonly children: React.ReactNode }) {
-  return (
-    <Tooltip content={ label } positioning={{ placement: 'top' }}>
-      { children }
-    </Tooltip>
-  );
-}
-
-type ColorPalette =
-  'gray' | 'green' | 'red' | 'purple' | 'orange' | 'blue' | 'yellow' |
-  'teal' | 'cyan' | 'pink' | 'purple_alt' | 'blue_alt' |
-  'bright_gray' | 'bright_green' | 'bright_red' | 'bright_blue' |
-  'bright_yellow' | 'bright_teal' | 'bright_cyan' | 'bright_orange' |
-  'bright_purple' | 'bright_pink';
-
-const badgeVariants = cva(
-  'inline-flex items-center rounded-sm gap-1 font-medium w-fit max-w-full whitespace-nowrap select-text',
-  {
-    variants: {
-      variant: {
-        subtle: '',
-        solid: '',
-      },
-      size: {
-        sm: 'text-xs p-1 h-[18px] min-h-[18px]',
-        md: 'text-sm px-1 py-0.5 min-h-6',
-        lg: 'text-sm px-2 py-1 min-h-7 font-semibold',
-      },
-    },
-    defaultVariants: {
-      variant: 'subtle',
-      size: 'md',
-    },
-  },
-);
-
-const COLOR_PALETTE_CLASSES: Record<ColorPalette, string> = {
-  gray: 'bg-badge-gray-bg text-badge-gray-fg',
-  green: 'bg-badge-green-bg text-badge-green-fg',
-  red: 'bg-badge-red-bg text-badge-red-fg',
-  purple: 'bg-badge-purple-bg text-badge-purple-fg',
-  orange: 'bg-badge-orange-bg text-badge-orange-fg',
-  blue: 'bg-badge-blue-bg text-badge-blue-fg',
-  yellow: 'bg-badge-yellow-bg text-badge-yellow-fg',
-  teal: 'bg-badge-teal-bg text-badge-teal-fg',
-  cyan: 'bg-badge-cyan-bg text-badge-cyan-fg',
-  pink: 'bg-badge-pink-bg text-badge-pink-fg',
-  purple_alt: 'bg-badge-purple-alt-bg text-badge-purple-alt-fg',
-  blue_alt: 'bg-badge-blue-alt-bg text-badge-blue-alt-fg',
-  bright_gray: 'bg-badge-bright-gray-bg text-badge-bright-gray-fg',
-  bright_green: 'bg-badge-bright-green-bg text-badge-bright-green-fg',
-  bright_red: 'bg-badge-bright-red-bg text-badge-bright-red-fg',
-  bright_blue: 'bg-badge-bright-blue-bg text-badge-bright-blue-fg',
-  bright_yellow: 'bg-badge-bright-yellow-bg text-badge-bright-yellow-fg',
-  bright_teal: 'bg-badge-bright-teal-bg text-badge-bright-teal-fg',
-  bright_cyan: 'bg-badge-bright-cyan-bg text-badge-bright-cyan-fg',
-  bright_orange: 'bg-badge-bright-orange-bg text-badge-bright-orange-fg',
-  bright_purple: 'bg-badge-bright-purple-bg text-badge-bright-purple-fg',
-  bright_pink: 'bg-badge-bright-pink-bg text-badge-bright-pink-fg',
-};
-
-export interface BadgeProps
-  extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>,
-  VariantProps<typeof badgeVariants> {
-  readonly loading?: boolean;
-  readonly startElement?: React.ReactNode;
-  readonly endElement?: React.ReactNode;
-  readonly truncated?: boolean;
-  readonly colorPalette?: ColorPalette;
-  // Legacy Chakra style-prop shims
-  readonly flexShrink?: number;
-  readonly gap?: number | string;
-  readonly ml?: number | string | Record<string, number>;
-  readonly mr?: number | string;
-}
-
-export const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(
-  function Badge(props, ref) {
-    const {
-      loading,
-      startElement,
-      children,
-      truncated = false,
-      endElement,
-      variant,
-      size,
-      colorPalette = 'gray',
-      className,
-      flexShrink: _flexShrink,
-      gap: _gap,
-      ml: _ml,
-      mr: _mr,
-      style: styleProp,
-      ...rest
-    } = props;
-
-    const shimStyle: React.CSSProperties = { ...styleProp };
-    if (_flexShrink !== undefined) shimStyle.flexShrink = _flexShrink;
-    if (_gap !== undefined) shimStyle.gap = typeof _gap === 'number' ? `${ _gap * 4 }px` : _gap;
-    if (_ml !== undefined) {
-      if (typeof _ml === 'object') {
-        const obj = _ml as Record<string, number>;
-        shimStyle.marginLeft = `${ (obj.base ?? obj.lg ?? 0) * 4 }px`;
-      } else {
-        shimStyle.marginLeft = typeof _ml === 'number' ? `${ _ml * 4 }px` : _ml;
-      }
-    }
-    if (_mr !== undefined) shimStyle.marginRight = typeof _mr === 'number' ? `${ _mr * 4 }px` : _mr;
-    const badgeStyle = Object.keys(shimStyle).length > 0 ? shimStyle : undefined;
-
-    const child = children ? (
-      <span className="overflow-hidden text-ellipsis">{ children }</span>
-    ) : null;
-
-    const childrenElement = truncated ? (
-      <TruncatedTextTooltip label={ children }>
-        { child }
-      </TruncatedTextTooltip>
-    ) : child;
-
-    const badgeElement = (
-      <span
-        ref={ ref as React.Ref<HTMLSpanElement> }
-        className={ cn(
-          badgeVariants({ variant, size }),
-          COLOR_PALETTE_CLASSES[colorPalette],
-          className,
-        ) }
-        style={ badgeStyle }
-        { ...rest }
-      >
-        { startElement }
-        { childrenElement }
-        { endElement }
-      </span>
-    );
-
-    if (loading) {
-      return (
-        <Skeleton loading={ loading } asChild>
-          { badgeElement }
-        </Skeleton>
-      );
-    }
-
-    return badgeElement;
-  },
-);

package/src/button.tsx

@@ -1,411 +0,0 @@
-import { Slot } from '@radix-ui/react-slot';
-import { cva } from 'class-variance-authority';
-import type { VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from './utils';
-
-import { Skeleton } from './skeleton';
-
-// ---------------------------------------------------------------------------
-// CVA variant definition
-// ---------------------------------------------------------------------------
-// All colors reference CSS custom properties from styles/tokens.css so they
-// automatically adapt to light/dark mode via the .dark class.
-//
-// Sizes use Tailwind spacing utilities that match the old Chakra recipe values:
-//   2xs → h-5 (20px)  xs → h-6 (24px)  sm → h-8 (32px)  md → h-10 (40px)
-// ---------------------------------------------------------------------------
-
-const 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',
-    },
-  },
-);
-
-// ---------------------------------------------------------------------------
-// Spinner (replaces Chakra's built-in loading spinner)
-// ---------------------------------------------------------------------------
-
-interface SpinnerProps {
-  readonly className?: string;
-}
-
-function Spinner({ className }: SpinnerProps): React.ReactElement {
-  return (
-    <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"
-    />
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Button
-// ---------------------------------------------------------------------------
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-  VariantProps<typeof buttonVariants> {
-  readonly asChild?: boolean;
-  readonly loading?: boolean;
-  readonly loadingText?: React.ReactNode;
-  readonly loadingSkeleton?: boolean;
-  readonly expanded?: boolean;
-  readonly selected?: boolean;
-  readonly highlighted?: boolean;
-  // Legacy Chakra style-prop shims
-  readonly mt?: number | string;
-  readonly ml?: number | string;
-  readonly mr?: number | string;
-  readonly px?: number | string;
-  readonly py?: number | string;
-  readonly fontWeight?: number | string;
-  readonly gap?: number | string;
-  readonly flexShrink?: number;
-  readonly columnGap?: number | string;
-  readonly gridColumn?: number | string;
-  readonly gridRow?: string;
-  readonly justifySelf?: string;
-  readonly alignSelf?: string;
-  readonly textStyle?: string;
-  readonly h?: string;
-  readonly w?: string;
-  readonly display?: string;
-  readonly borderBottomRightRadius?: number | string;
-  readonly borderTopRightRadius?: number | string;
-  readonly 'data-call-strategy'?: string;
-}
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  function Button(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: React.CSSProperties = { ...styleProp };
-    if (_mt !== undefined) shimStyle.marginTop = typeof _mt === 'number' ? `${ _mt * SP }px` : _mt;
-    if (_ml !== undefined) shimStyle.marginLeft = typeof _ml === 'number' ? `${ _ml * SP }px` : _ml;
-    if (_mr !== undefined) shimStyle.marginRight = typeof _mr === 'number' ? `${ _mr * SP }px` : _mr;
-    if (_px !== undefined) { const v = typeof _px === 'number' ? `${ _px * SP }px` : _px; shimStyle.paddingLeft = v; shimStyle.paddingRight = v; }
-    if (_py !== undefined) { const v = typeof _py === 'number' ? `${ _py * SP }px` : _py; shimStyle.paddingTop = v; shimStyle.paddingBottom = v; }
-    if (_fontWeight !== undefined) shimStyle.fontWeight = _fontWeight;
-    if (_gap !== undefined) shimStyle.gap = typeof _gap === 'number' ? `${ _gap * SP }px` : _gap;
-    if (_flexShrink !== undefined) shimStyle.flexShrink = _flexShrink;
-    if (_columnGap !== undefined) shimStyle.columnGap = typeof _columnGap === 'number' ? `${ _columnGap * SP }px` : _columnGap;
-    if (_gridColumn !== undefined) 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 !== undefined) shimStyle.borderBottomRightRadius = typeof _bbrr === 'number' ? `${ _bbrr }px` : _bbrr;
-    if (_btrr !== undefined) shimStyle.borderTopRightRadius = typeof _btrr === 'number' ? `${ _btrr }px` : _btrr;
-    const mergedStyle = Object.keys(shimStyle).length > 0 ? shimStyle : undefined;
-
-    const Comp = asChild ? Slot : 'button';
-
-    // Build data-* attributes for state-driven variant styles
-    const dataAttrs: Record<string, true> = {};
-    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 ? (
-      <>
-        <Spinner/>
-        { loadingText != null && <span className="ml-2">{ loadingText }</span> }
-      </>
-    ) : (
-      children
-    );
-
-    const button = (
-      <Comp
-        ref={ ref }
-        className={ cn(buttonVariants({ variant, size }), className) }
-        style={ mergedStyle }
-        disabled={ isDisabled || undefined }
-        { ...dataAttrs }
-        { ...rest }
-      >
-        { inner }
-      </Comp>
-    );
-
-    if (loadingSkeleton) {
-      return (
-        <Skeleton loading={ loadingSkeleton } asChild ref={ ref as React.ForwardedRef<HTMLDivElement> }>
-          { button }
-        </Skeleton>
-      );
-    }
-
-    return button;
-  },
-);
-
-// ---------------------------------------------------------------------------
-// ButtonGroup
-// ---------------------------------------------------------------------------
-
-export interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
-  function ButtonGroup(props, ref) {
-    const { className, ...rest } = props;
-
-    return (
-      <div
-        ref={ ref }
-        className={ cn('inline-flex', className) }
-        role="group"
-        { ...rest }
-      />
-    );
-  },
-);
-
-// ---------------------------------------------------------------------------
-// ButtonGroupRadio
-// ---------------------------------------------------------------------------
-
-export interface ButtonGroupRadioProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
-  children: Array<React.ReactElement<ButtonProps>>;
-  onChange?: (value: string) => void;
-  defaultValue?: string;
-  loading?: boolean;
-  equalWidth?: boolean;
-  variant?: ButtonProps['variant'];
-}
-
-export const ButtonGroupRadio = React.forwardRef<HTMLDivElement, ButtonGroupRadioProps>(
-  function ButtonGroupRadio(props, ref) {
-    const {
-      children,
-      onChange,
-      variant = 'segmented',
-      defaultValue,
-      loading = false,
-      equalWidth = false,
-      className,
-      ...rest
-    } = props;
-
-    const firstChildValue = React.useMemo(() => {
-      const firstChild = Array.isArray(children) ? children[0] : undefined;
-      return typeof firstChild?.props.value === 'string' ? firstChild.props.value : undefined;
-    }, [ children ]);
-
-    const [ value, setValue ] = React.useState<string | undefined>(defaultValue ?? firstChildValue);
-
-    const handleItemClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
-      const v = event.currentTarget.value;
-      setValue(v);
-      onChange?.(v);
-    }, [ onChange ]);
-
-    const clonedChildren = React.Children.map(children, (child: React.ReactElement<ButtonProps>) => {
-      return React.cloneElement(child, {
-        onClick: handleItemClick,
-        selected: value === child.props.value,
-        variant,
-      });
-    });
-
-    const childrenLength = React.Children.count(children);
-
-    return (
-      <Skeleton loading={ loading }>
-        <div
-          ref={ ref }
-          className={ cn(
-            'inline-flex gap-0',
-            equalWidth && 'grid',
-            className,
-          ) }
-          style={ equalWidth ? { gridTemplateColumns: `repeat(${ childrenLength }, 1fr)` } : undefined }
-          role="group"
-          { ...rest }
-        >
-          { clonedChildren }
-        </div>
-      </Skeleton>
-    );
-  },
-);
-
-// Re-export the variant function for consumers that need it (e.g., IconButton)
-export { buttonVariants };