@luxfi/ui 7.0.0 → 7.1.0

package/src/close-button.tsx

@@ -1,11 +1,48 @@
+import { styled, View } from '@hanzogui/core';
 import * as React from 'react';
 
-import { cn } from './utils';
-
 // eslint-disable-next-line max-len
 const CLOSE_ICON_PATH = 'M9.44 8.035a.791.791 0 0 0 1.12 0l3.802-3.803a.791.791 0 0 1 1.119 0l.287.287a.79.79 0 0 1 0 1.119L11.965 9.44a.79.79 0 0 0 0 1.118l3.803 3.803a.791.791 0 0 1 0 1.119l-.287.287a.791.791 0 0 1-1.119 0l-3.803-3.803a.79.79 0 0 0-1.118 0l-3.803 3.803a.79.79 0 0 1-1.119 0l-.287-.287a.791.791 0 0 1 0-1.119l3.803-3.803a.791.791 0 0 0 0-1.118L4.232 5.638a.791.791 0 0 1 0-1.119l.287-.287a.791.791 0 0 1 1.119 0L9.44 8.035Z';
 
-export interface CloseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+const CloseButtonFrame = styled(View, {
+  name: 'LuxCloseButton',
+  render: <button type="button" aria-label="Close" />,
+  role: 'button',
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  width: 20,
+  height: 20,
+  minWidth: 0,
+  flexShrink: 1,
+  padding: 0,
+  borderRadius: 4,
+  borderWidth: 0,
+  overflow: 'hidden',
+  backgroundColor: 'transparent',
+
+  hoverStyle: {
+    backgroundColor: 'transparent',
+  },
+
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.4,
+        pointerEvents: 'none',
+      },
+    },
+  } as const,
+});
+
+const CLOSE_BUTTON_CLASSES = [
+  'text-[var(--closeButton-fg,currentColor)]',
+  'hover:text-[var(--hover-color,currentColor)]',
+  'disabled:opacity-40',
+].join(' ');
+
+export interface CloseButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
   readonly variant?: 'plain';
   readonly size?: 'md';
 }
@@ -17,23 +54,12 @@ export const CloseButton = React.forwardRef<
   const { variant: _variant, size: _size, className, children, ...rest } = props;
 
   return (
-    <button
-      type="button"
-      aria-label="Close"
-      ref={ ref }
-      className={ cn(
-        'inline-flex items-center justify-center',
-        'size-5 min-w-0 shrink-0 p-0',
-        'rounded-sm border-0 overflow-hidden',
-        'bg-transparent text-[var(--closeButton-fg,currentColor)]',
-        'hover:bg-transparent hover:text-[var(--hover-color,currentColor)]',
-        'disabled:opacity-40',
-        'cursor-pointer',
-        className,
-      ) }
-      { ...rest }
+    <CloseButtonFrame
+      ref={ref as any}
+      className={[CLOSE_BUTTON_CLASSES, className].filter(Boolean).join(' ')}
+      {...(rest as any)}
     >
-      { children ?? (
+      {children ?? (
         <svg
           className="size-5"
           viewBox="0 0 20 20"
@@ -41,11 +67,11 @@ export const CloseButton = React.forwardRef<
           aria-hidden="true"
         >
           <path
-            d={ CLOSE_ICON_PATH }
+            d={CLOSE_ICON_PATH}
             fill="currentColor"
           />
         </svg>
-      ) }
-    </button>
+      )}
+    </CloseButtonFrame>
   );
 });

package/src/dialog.tsx

@@ -1,4 +1,4 @@
-import * as RadixDialog from '@radix-ui/react-dialog';
+import { Dialog as GuiDialog } from '@hanzogui/dialog';
 import * as React from 'react';
 
 import { cn } from './utils';
@@ -35,14 +35,14 @@ type DialogSize = 'sm' | 'md' | 'full' | 'cover';
  */
 type ResponsiveSize = DialogSize | { base?: DialogSize; lgDown?: DialogSize; lg?: DialogSize };
 
-interface DialogContextValue {
+interface DialogSizeContextValue {
   size: ResponsiveSize;
 }
 
-const DialogContext = React.createContext<DialogContextValue>({ size: 'md' });
+const DialogSizeContext = React.createContext<DialogSizeContextValue>({ size: 'md' });
 
-function useDialogContext(): DialogContextValue {
-  return React.useContext(DialogContext);
+function useDialogSizeContext(): DialogSizeContextValue {
+  return React.useContext(DialogSizeContext);
 }
 
 // ---------------------------------------------------------------------------
@@ -61,7 +61,7 @@ const CONTENT_SIZE_MAP: Record<DialogSize, string> = {
  *
  * For a plain value we return the matching static class.  For a breakpoint
  * object we compose mobile-first responsive classes.  The Tailwind config in
- * this project defines `lg: 1000px` as breakpoint — that aligns with Chakra's
+ * this project defines `lg: 1000px` as breakpoint -- that aligns with Chakra's
  * `lgDown` / `lg` pattern.
  */
 function sizeClasses(size: ResponsiveSize): string {
@@ -100,7 +100,7 @@ export interface DialogRootProps {
   onOpenChange?: (details: { open: boolean }) => void;
   size?: ResponsiveSize;
 
-  /** Accepted for API compat but not implemented — animations are CSS-only. */
+  /** Accepted for API compat but not implemented -- animations are CSS-only. */
   motionPreset?: string;
   modal?: boolean;
 }
@@ -112,7 +112,7 @@ export const DialogRoot: React.FC<DialogRootProps> = ({
   onOpenChange,
   size = 'md',
   modal = true,
-  // motionPreset is intentionally unused — kept for API compat
+  // motionPreset is intentionally unused -- kept for API compat
 }) => {
   const handleOpenChange = React.useCallback(
     (nextOpen: boolean) => {
@@ -121,19 +121,19 @@ export const DialogRoot: React.FC<DialogRootProps> = ({
     [ onOpenChange ],
   );
 
-  const ctx = React.useMemo<DialogContextValue>(() => ({ size }), [ size ]);
+  const ctx = React.useMemo<DialogSizeContextValue>(() => ({ size }), [ size ]);
 
   return (
-    <DialogContext.Provider value={ ctx }>
-      <RadixDialog.Root
+    <DialogSizeContext.Provider value={ ctx }>
+      <GuiDialog
         open={ open }
         defaultOpen={ defaultOpen }
         onOpenChange={ handleOpenChange }
         modal={ modal }
       >
         { children }
-      </RadixDialog.Root>
-    </DialogContext.Provider>
+      </GuiDialog>
+    </DialogSizeContext.Provider>
   );
 };
 
@@ -155,8 +155,8 @@ export const DialogContent = React.forwardRef<
 >(function DialogContent(props, ref) {
   const {
     children,
-    portalled = true,
-    portalRef,
+    portalled: _portalled = true,
+    portalRef: _portalRef,
     backdrop = true,
     className,
     paddingTop: _paddingTop,
@@ -169,29 +169,17 @@ export const DialogContent = React.forwardRef<
     ...(_paddingTop !== undefined ? { paddingTop: typeof _paddingTop === 'number' ? `${ _paddingTop * 4 }px` : _paddingTop } : {}),
   };
 
-  const { size } = useDialogContext();
-
-  let portalProps: RadixDialog.DialogPortalProps;
-  if (!portalled) {
-    portalProps = { container: undefined };
-  } else if (portalRef) {
-    portalProps = { container: portalRef.current };
-  } else {
-    portalProps = {};
-  }
-
-  // When portalled=false we skip the Radix Portal wrapper entirely
-  const Wrapper = portalled ? RadixDialog.Portal : React.Fragment;
-  const wrapperProps = portalled ? portalProps : {};
+  const { size } = useDialogSizeContext();
 
   return (
-    <Wrapper { ...wrapperProps }>
+    <GuiDialog.Portal>
       { backdrop && (
-        <RadixDialog.Overlay
+        <GuiDialog.Overlay
+          unstyled
           className="fixed inset-0 z-[1400] bg-black/80"
         />
       ) }
-      { /* Positioner — centers the content panel */ }
+      { /* Positioner -- centers the content panel */ }
       <div
         className={ cn(
           'fixed inset-0 z-[1400] flex w-screen h-dvh',
@@ -199,8 +187,9 @@ export const DialogContent = React.forwardRef<
           'overflow-hidden',
         ) }
       >
-        <RadixDialog.Content
+        <GuiDialog.Content
           ref={ ref }
+          unstyled
           className={ cn(
             // Base content styles
             'relative flex flex-col w-full p-6 outline-none text-base',
@@ -213,12 +202,12 @@ export const DialogContent = React.forwardRef<
             className,
           ) }
           style={ Object.keys(contentInlineStyle).length > 0 ? contentInlineStyle : undefined }
-          { ...rest }
+          { ...rest as any }
         >
           { children }
-        </RadixDialog.Content>
+        </GuiDialog.Content>
       </div>
-    </Wrapper>
+    </GuiDialog.Portal>
   );
 });
 
@@ -235,11 +224,11 @@ export const DialogCloseTrigger = React.forwardRef<
   const { className, ...rest } = props;
 
   return (
-    <RadixDialog.Close asChild>
+    <GuiDialog.Close asChild>
       <CloseButton ref={ ref } className={ className } { ...rest }>
         { props.children }
       </CloseButton>
-    </RadixDialog.Close>
+    </GuiDialog.Close>
   );
 });
 
@@ -271,14 +260,15 @@ export const DialogHeader = React.forwardRef<
       { ...rest }
     >
       { startElement }
-      <RadixDialog.Title
+      <GuiDialog.Title
+        unstyled
         className={ cn(
           'text-base lg:text-lg font-medium',
           'whitespace-nowrap overflow-hidden text-ellipsis',
         ) }
       >
         { children }
-      </RadixDialog.Title>
+      </GuiDialog.Title>
       <DialogCloseTrigger className="ml-auto"/>
     </div>
   );
@@ -335,22 +325,22 @@ export const DialogFooter = React.forwardRef<
 });
 
 // ---------------------------------------------------------------------------
-// Simple wrappers that re-export Radix primitives under the old names
+// Simple wrappers that re-export @hanzogui primitives under the old names
 // ---------------------------------------------------------------------------
 
-export const DialogBackdrop = RadixDialog.Overlay;
+export const DialogBackdrop = GuiDialog.Overlay;
 
-export const DialogTitle = RadixDialog.Title;
+export const DialogTitle = GuiDialog.Title;
 
-export const DialogDescription = RadixDialog.Description;
+export const DialogDescription = GuiDialog.Description;
 
-export interface DialogTriggerProps extends React.ComponentPropsWithoutRef<typeof RadixDialog.Trigger> {}
+export interface DialogTriggerProps extends React.ComponentPropsWithoutRef<'button'> {}
 
-export const DialogTrigger = RadixDialog.Trigger;
+export const DialogTrigger = GuiDialog.Trigger;
 
 /**
  * `DialogActionTrigger` renders its child and closes the dialog on click.
  * This mirrors the Chakra `Dialog.ActionTrigger` behavior which wraps
  * children in a close action.
  */
-export const DialogActionTrigger = RadixDialog.Close;
+export const DialogActionTrigger = GuiDialog.Close;

package/src/heading.tsx

@@ -9,25 +9,13 @@ export interface HeadingProps extends React.ComponentPropsWithoutRef<'h1'> {
   size?: string;
 }
 
-const LEVEL_TAG = {
-  '1': 'h1',
-  '2': 'h2',
-  '3': 'h3',
-} as const;
+const LEVEL_TAG = { '1': 'h1', '2': 'h2', '3': 'h3' } as const;
 
 // base (mobile) + lg (desktop) responsive text styles per level
 //
-// Level 1: heading.md -> heading.xl
-//   base: 18px/24px font-500
-//   lg:   32px/40px font-500 tracking=-0.5px
-//
-// Level 2: heading.sm -> heading.lg
-//   base: 16px/24px font-500
-//   lg:   24px/32px font-500
-//
-// Level 3: heading.xs -> heading.md
-//   base: 14px/20px font-600
-//   lg:   18px/24px font-500
+// Level 1: 18px/24px font-500 -> 32px/40px font-500 tracking=-0.5px
+// Level 2: 16px/24px font-500 -> 24px/32px font-500
+// Level 3: 14px/20px font-600 -> 18px/24px font-500
 const 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]',
@@ -40,14 +28,15 @@ export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
   function Heading({ level, className, mb, size: _size, style: styleProp, ...rest }, ref) {
     const Tag = level ? LEVEL_TAG[level] : 'h2';
     const levelClasses = level ? LEVEL_CLASSES[level] : undefined;
-    const shimStyle: React.CSSProperties = { ...styleProp };
-    if (mb !== undefined) shimStyle.marginBottom = typeof mb === 'number' ? `${ mb * 4 }px` : mb;
+    const mergedStyle = mb !== undefined
+      ? { ...styleProp, marginBottom: typeof mb === 'number' ? `${ mb * 4 }px` : mb }
+      : styleProp;
 
     return (
       <Tag
         ref={ ref }
         className={ cn(BASE_CLASSES, levelClasses, className) }
-        style={ Object.keys(shimStyle).length > 0 ? shimStyle : undefined }
+        style={ mergedStyle }
         { ...rest }
       />
     );

package/src/icon-button.tsx

@@ -1,105 +1,120 @@
-import { cva } from 'class-variance-authority';
-import React from 'react';
-
-import { cn } from './utils';
+import { styled, View } from '@hanzogui/core';
+import * as React from 'react';
 
 import { Skeleton } from './skeleton';
 
-/* -------------------------------------------------------------------------- */
-/*  CVA variant definitions                                                   */
-/* -------------------------------------------------------------------------- */
-
-const iconButtonVariants = cva(
-  // base
-  [
-    'inline-flex items-center justify-center',
-    'p-0 min-w-auto shrink-0',
-    'cursor-pointer border-0 bg-transparent',
-    'disabled:opacity-[var(--opacity-control-disabled,0.4)] disabled:cursor-not-allowed',
-  ],
-  {
-    variants: {
-      variant: {
-        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',
-        ],
-        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',
-        ],
-        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',
-        ],
-        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',
-        ],
-        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',
-        ],
-      },
-      size: {
-        '2xs': 'size-5 rounded-sm [&_svg]:size-5',
-        '2xs_alt': 'size-5 rounded-sm [&_svg]:size-3',
-        md: 'size-8 rounded-[var(--radius-base,8px)] [&_svg]:size-5',
-      },
+// ---------------------------------------------------------------------------
+// IconButtonFrame — styled base
+// ---------------------------------------------------------------------------
+
+const IconButtonFrame = styled(View, {
+  name: 'LuxIconButton',
+  render: <button type="button" />,
+  role: 'button',
+  cursor: 'pointer',
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 0,
+  minWidth: 'auto' as any,
+  flexShrink: 1,
+  backgroundColor: 'transparent',
+  borderWidth: 0,
+
+  variants: {
+    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)' as any },
     },
-    defaultVariants: {
-      variant: 'plain',
-    },
-  },
-);
 
-/* -------------------------------------------------------------------------- */
-/*  Types                                                                     */
-/* -------------------------------------------------------------------------- */
+    disabled: {
+      true: {
+        opacity: 0.4,
+        cursor: 'not-allowed',
+        pointerEvents: 'none',
+      },
+    },
+  } as const,
+});
+
+// ---------------------------------------------------------------------------
+// Variant class maps (CSS custom properties via Tailwind)
+// ---------------------------------------------------------------------------
+
+const VARIANT_CLASSES: Record<string, string> = {
+  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(' '),
+};
+
+// SVG icon size classes per size variant
+const ICON_SIZE_CLASSES: Record<string, string> = {
+  '2xs': '[&_svg]:size-5',
+  '2xs_alt': '[&_svg]:size-3',
+  md: '[&_svg]:size-5',
+};
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
 
 type Variant = 'plain' | 'icon_secondary' | 'icon_background' | 'link' | 'dropdown' | 'pagination';
 type Size = '2xs' | '2xs_alt' | 'md';
 
-export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-
+export interface IconButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'size'> {
   /** Visual variant */
   variant?: Variant;
-
   /** Icon-button size */
   size?: Size;
-
   /** Show a loading spinner (disables button) */
   loading?: boolean;
-
   /** Render a skeleton placeholder instead of the button */
   loadingSkeleton?: boolean;
-
   /** Maps to data-expanded for popover trigger styling */
   expanded?: boolean;
-
   /** Maps to data-selected for toggle styling */
   selected?: boolean;
-
   /** Maps to data-highlighted */
   highlighted?: boolean;
-
   /** Polymorphic element type (e.g. "div") */
   as?: React.ElementType;
-
   // Legacy Chakra style-prop shims
   boxSize?: number | string;
   color?: string;
@@ -111,9 +126,11 @@ export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonEl
   _expanded?: Record<string, string>;
 }
 
-/* -------------------------------------------------------------------------- */
-/*  Component                                                                 */
-/* -------------------------------------------------------------------------- */
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+const SP = 4;
 
 export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
   function IconButton(props, ref) {
@@ -128,7 +145,7 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
       disabled,
       className,
       children,
-      as: Comp = 'button',
+      as: _as,
       style: styleProp,
       // Strip Chakra style props
       boxSize: _boxSize,
@@ -142,47 +159,55 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
       ...rest
     } = props;
 
-    const SP = 4;
     const shimStyle: React.CSSProperties = { ...styleProp };
     if (_boxSize !== undefined) {
-      const bs = typeof _boxSize === 'number' ? `${ _boxSize * SP }px` : _boxSize;
+      const bs = typeof _boxSize === 'number' ? `${_boxSize * SP}px` : _boxSize;
       shimStyle.width = bs;
       shimStyle.height = bs;
     }
     if (_color) shimStyle.color = _color;
     if (_px !== undefined) {
-      const v = typeof _px === 'number' ? `${ _px * SP }px` : _px;
+      const v = typeof _px === 'number' ? `${_px * SP}px` : _px;
       shimStyle.paddingLeft = v;
       shimStyle.paddingRight = v;
     }
     if (_borderRadius) shimStyle.borderRadius = _borderRadius;
-    if (_ml !== undefined) shimStyle.marginLeft = typeof _ml === 'number' ? `${ _ml * SP }px` : _ml;
-    if (_mr !== undefined) shimStyle.marginRight = typeof _mr === 'number' ? `${ _mr * SP }px` : _mr;
-    const mergedBtnStyle = Object.keys(shimStyle).length > 0 ? shimStyle : undefined;
+    if (_ml !== undefined) shimStyle.marginLeft = typeof _ml === 'number' ? `${_ml * SP}px` : _ml;
+    if (_mr !== undefined) shimStyle.marginRight = typeof _mr === 'number' ? `${_mr * SP}px` : _mr;
+    const mergedStyle = Object.keys(shimStyle).length > 0 ? shimStyle : undefined;
+
+    const variantClass = VARIANT_CLASSES[variant] ?? VARIANT_CLASSES.plain;
+    const iconSizeClass = size ? (ICON_SIZE_CLASSES[size] ?? '') : '';
+    const combinedClassName = [variantClass, iconSizeClass, className].filter(Boolean).join(' ');
 
     const button = (
-      <Comp
-        ref={ ref }
-        type={ Comp === 'button' ? 'button' : undefined }
-        disabled={ !loadingSkeleton && (loading || disabled) }
-        className={ cn(iconButtonVariants({ variant, size }), className) }
-        style={ mergedBtnStyle }
-        { ...(expanded ? { 'data-expanded': true } : {}) }
-        { ...(selected ? { 'data-selected': true } : {}) }
-        { ...(highlighted ? { 'data-highlighted': true } : {}) }
-        { ...(loadingSkeleton ? { 'data-loading-skeleton': true } : {}) }
-        { ...rest }
+      <IconButtonFrame
+        ref={ref as any}
+        size={size as any}
+        disabled={(!loadingSkeleton && (loading || disabled)) || undefined}
+        render={_as ? (React.createElement(_as) as React.ReactElement) : undefined}
+        className={combinedClassName}
+        style={mergedStyle}
+        {...(expanded ? { 'data-expanded': true } : {})}
+        {...(selected ? { 'data-selected': true } : {})}
+        {...(highlighted ? { 'data-highlighted': true } : {})}
+        {...(loadingSkeleton ? { 'data-loading-skeleton': true } : {})}
+        {...(rest as any)}
       >
-        { loading ? (
-          <span className="inline-block size-5 animate-spin rounded-full border-2 border-current border-b-transparent border-l-transparent"/>
-        ) : children }
-      </Comp>
+        {loading ? (
+          <span
+            className="inline-block size-5 animate-spin rounded-full border-2 border-current border-b-transparent border-l-transparent"
+            role="status"
+            aria-label="Loading"
+          />
+        ) : children}
+      </IconButtonFrame>
     );
 
     if (loadingSkeleton) {
       return (
-        <Skeleton loading={ loadingSkeleton } asChild ref={ ref as React.ForwardedRef<HTMLDivElement> }>
-          { button }
+        <Skeleton loading={loadingSkeleton} asChild ref={ref as React.ForwardedRef<HTMLDivElement>}>
+          {button}
         </Skeleton>
       );
     }