@thangnqdev/ui 0.1.2 → 0.2.0

package/src/bento/BentoGrid.tsx

@@ -1,50 +1,50 @@
-import React from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-const bentoGridVariants = cva('grid w-full auto-rows-[minmax(240px,auto)]', {
-  variants: {
-    cols: {
-      1: 'grid-cols-1',
-      2: 'grid-cols-1 md:grid-cols-2',
-      3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
-      4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
-    },
-    gap: {
-      sm: 'gap-4',
-      md: 'gap-6',
-      lg: 'gap-8',
-    },
-    flow: {
-      row: 'grid-flow-row',
-      col: 'grid-flow-col',
-      dense: 'grid-flow-dense',
-      'row-dense': 'grid-flow-row-dense',
-      'col-dense': 'grid-flow-col-dense',
-    },
-  },
-  defaultVariants: {
-    cols: 3,
-    gap: 'md',
-    flow: 'row',
-  },
-});
-
-export interface BentoGridProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof bentoGridVariants> {}
-
-export const BentoGrid: React.FC<BentoGridProps> = ({
-  className,
-  cols,
-  gap,
-  flow,
-  children,
-  ...props
-}) => {
-  return (
-    <div className={cn(bentoGridVariants({ cols, gap, flow, className }))} {...props}>
-      {children}
-    </div>
-  );
-};
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+const bentoGridVariants = cva('grid w-full auto-rows-[minmax(240px,auto)]', {
+  variants: {
+    cols: {
+      1: 'grid-cols-1',
+      2: 'grid-cols-1 md:grid-cols-2',
+      3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
+      4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',
+    },
+    gap: {
+      sm: 'gap-4',
+      md: 'gap-6',
+      lg: 'gap-8',
+    },
+    flow: {
+      row: 'grid-flow-row',
+      col: 'grid-flow-col',
+      dense: 'grid-flow-dense',
+      'row-dense': 'grid-flow-row-dense',
+      'col-dense': 'grid-flow-col-dense',
+    },
+  },
+  defaultVariants: {
+    cols: 3,
+    gap: 'md',
+    flow: 'row',
+  },
+});
+
+export interface BentoGridProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof bentoGridVariants> {}
+
+export const BentoGrid: React.FC<BentoGridProps> = ({
+  className,
+  cols,
+  gap,
+  flow,
+  children,
+  ...props
+}) => {
+  return (
+    <div className={cn(bentoGridVariants({ cols, gap, flow, className }))} {...props}>
+      {children}
+    </div>
+  );
+};

package/src/bento/index.ts

@@ -1,2 +1,2 @@
-export * from './BentoGrid';
-export * from './BentoCard';
+export * from './BentoGrid';
+export * from './BentoCard';

package/src/bento/tokens.css

@@ -1,46 +1,46 @@
-:root {
-  /* ==========================================================================
-     AETHER BENTO TOKENS — LIGHT MODE (ARCHITECTURAL ALABASTER)
-     ========================================================================== */
-  --ui-bento-bg-surface: #f6f8fb;
-  --ui-bento-bg-card: #ffffff;
-  --ui-bento-bg-card-hover: #f9fafc;
-  --ui-bento-bg-elevated: linear-gradient(180deg, #ffffff 0%, #f1f4f9 100%);
-
-  --ui-bento-border: rgba(15, 23, 42, 0.08);
-  --ui-bento-border-hover: rgba(15, 23, 42, 0.20);
-
-  --ui-bento-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 1);
-  --ui-bento-shadow-elevated: 0 16px 40px -6px rgba(15, 23, 42, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 1);
-
-  --ui-bento-text-title: #0a0c10;
-  --ui-bento-text-desc: #4b5563;
-  --ui-bento-text-tag: #6b7280;
-  --ui-bento-icon-bg: rgba(15, 23, 42, 0.04);
-  --ui-bento-icon-border: rgba(15, 23, 42, 0.08);
-
-  --ui-bento-radius-md: 1.25rem; /* 20px */
-  --ui-bento-radius-lg: 1.75rem; /* 28px */
-}
-
-.dark {
-  /* ==========================================================================
-     AETHER BENTO TOKENS — DARK MODE (OBSIDIAN & SMOKED QUARTZ)
-     ========================================================================== */
-  --ui-bento-bg-surface: #07080b;
-  --ui-bento-bg-card: #0d1017;
-  --ui-bento-bg-card-hover: #121620;
-  --ui-bento-bg-elevated: linear-gradient(180deg, #131722 0%, #0a0c11 100%);
-
-  --ui-bento-border: rgba(255, 255, 255, 0.07);
-  --ui-bento-border-hover: rgba(255, 255, 255, 0.20);
-
-  --ui-bento-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
-  --ui-bento-shadow-elevated: 0 24px 60px -8px rgba(0, 0, 0, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
-
-  --ui-bento-text-title: #f2f5f9;
-  --ui-bento-text-desc: #94a1b2;
-  --ui-bento-text-tag: #6b7a90;
-  --ui-bento-icon-bg: rgba(255, 255, 255, 0.05);
-  --ui-bento-icon-border: rgba(255, 255, 255, 0.10);
-}
+:root {
+  /* ==========================================================================
+     AETHER BENTO TOKENS — LIGHT MODE (ARCHITECTURAL ALABASTER)
+     ========================================================================== */
+  --ui-bento-bg-surface: #f6f8fb;
+  --ui-bento-bg-card: #ffffff;
+  --ui-bento-bg-card-hover: #f9fafc;
+  --ui-bento-bg-elevated: linear-gradient(180deg, #ffffff 0%, #f1f4f9 100%);
+
+  --ui-bento-border: rgba(15, 23, 42, 0.08);
+  --ui-bento-border-hover: rgba(15, 23, 42, 0.20);
+
+  --ui-bento-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), inset 0 1px 0 0 rgba(255, 255, 255, 1);
+  --ui-bento-shadow-elevated: 0 16px 40px -6px rgba(15, 23, 42, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 1);
+
+  --ui-bento-text-title: #0a0c10;
+  --ui-bento-text-desc: #4b5563;
+  --ui-bento-text-tag: #6b7280;
+  --ui-bento-icon-bg: rgba(15, 23, 42, 0.04);
+  --ui-bento-icon-border: rgba(15, 23, 42, 0.08);
+
+  --ui-bento-radius-md: 1.25rem; /* 20px */
+  --ui-bento-radius-lg: 1.75rem; /* 28px */
+}
+
+.dark {
+  /* ==========================================================================
+     AETHER BENTO TOKENS — DARK MODE (OBSIDIAN & SMOKED QUARTZ)
+     ========================================================================== */
+  --ui-bento-bg-surface: #07080b;
+  --ui-bento-bg-card: #0d1017;
+  --ui-bento-bg-card-hover: #121620;
+  --ui-bento-bg-elevated: linear-gradient(180deg, #131722 0%, #0a0c11 100%);
+
+  --ui-bento-border: rgba(255, 255, 255, 0.07);
+  --ui-bento-border-hover: rgba(255, 255, 255, 0.20);
+
+  --ui-bento-shadow: 0 10px 30px -4px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
+  --ui-bento-shadow-elevated: 0 24px 60px -8px rgba(0, 0, 0, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.14);
+
+  --ui-bento-text-title: #f2f5f9;
+  --ui-bento-text-desc: #94a1b2;
+  --ui-bento-text-tag: #6b7a90;
+  --ui-bento-icon-bg: rgba(255, 255, 255, 0.05);
+  --ui-bento-icon-border: rgba(255, 255, 255, 0.10);
+}

package/src/buttons/Button.tsx

@@ -1,104 +1,104 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Loader2 } from 'lucide-react';
-import { cn } from '../utils/cn';
-
-export const buttonVariants = cva(
-  'relative inline-flex items-center justify-center font-medium transition-all duration-200 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--ui-primary)]/30 active:scale-[0.97] overflow-hidden',
-  {
-    variants: {
-      variant: {
-        primary:
-          'bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] text-white shadow-sm hover:shadow-[0_4px_16px_rgba(0,113,227,0.35)] border border-white/20',
-        secondary:
-          'bg-[var(--ui-bg-tertiary)] hover:bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] border border-[var(--ui-border-subtle)] shadow-sm',
-        outline:
-          'border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)]/60 backdrop-blur-xl text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] hover:border-[var(--ui-border-strong)] shadow-sm',
-        ghost:
-          'bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]/70',
-        danger:
-          'bg-[var(--ui-error)] hover:bg-[var(--ui-error)]/90 text-white shadow-sm hover:shadow-[0_4px_16px_rgba(255,59,48,0.35)] border border-white/15',
-        link:
-          'bg-transparent text-[var(--ui-primary)] underline-offset-4 hover:underline p-0 h-auto active:scale-100 font-normal',
-        glass:
-          'bg-white/10 dark:bg-white/10 backdrop-blur-2xl border border-white/20 dark:border-white/15 text-[var(--ui-text-primary)] hover:bg-white/20 dark:hover:bg-white/15 shadow-[0_8px_32px_rgba(0,0,0,0.12)] hover:shadow-[0_8px_32px_rgba(0,113,227,0.25)]',
-      },
-      size: {
-        xs: 'h-7 px-2.5 text-xs rounded-[var(--ui-radius-sm)] gap-1',
-        sm: 'h-8.5 px-3.5 text-xs rounded-[var(--ui-radius-md)] gap-1.5',
-        md: 'h-10 px-4.5 text-sm rounded-[var(--ui-radius-md)] gap-2 font-semibold',
-        lg: 'h-12 px-6 text-base rounded-[var(--ui-radius-lg)] gap-2.5 font-semibold',
-        xl: 'h-14 px-8 text-lg rounded-[var(--ui-radius-xl)] gap-3 font-bold',
-      },
-      fullWidth: {
-        true: 'w-full',
-        false: '',
-      },
-    },
-    defaultVariants: {
-      variant: 'primary',
-      size: 'md',
-      fullWidth: false,
-    },
-  }
-);
-
-export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  loading?: boolean;
-  loadingText?: string;
-  leftIcon?: React.ReactNode;
-  rightIcon?: React.ReactNode;
-}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      className,
-      variant,
-      size,
-      fullWidth,
-      loading = false,
-      loadingText,
-      leftIcon,
-      rightIcon,
-      disabled,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const isDisabled = disabled || loading;
-
-    return (
-      <button
-        ref={ref}
-        disabled={isDisabled}
-        className={cn(buttonVariants({ variant, size, fullWidth }), className)}
-        {...props}
-      >
-        {/* Apple subtle top specular highlight */}
-        <span
-          aria-hidden="true"
-          className="absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-white/35 to-transparent pointer-events-none"
-        />
-
-        {loading ? (
-          <>
-            <Loader2 className="w-4 h-4 animate-spin" />
-            <span>{loadingText || children}</span>
-          </>
-        ) : (
-          <>
-            {leftIcon && <span className="flex-shrink-0 inline-flex items-center">{leftIcon}</span>}
-            <span>{children}</span>
-            {rightIcon && <span className="flex-shrink-0 inline-flex items-center">{rightIcon}</span>}
-          </>
-        )}
-      </button>
-    );
-  }
-);
-
-Button.displayName = 'Button';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Loader2 } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export const buttonVariants = cva(
+  'relative inline-flex items-center justify-center font-medium transition-all duration-200 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-40 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[var(--ui-primary)]/30 active:scale-[0.97] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        primary:
+          'bg-[var(--ui-primary)] hover:bg-[var(--ui-primary-hover)] text-white shadow-sm hover:shadow-[0_4px_16px_rgba(0,113,227,0.35)] border border-white/20',
+        secondary:
+          'bg-[var(--ui-bg-tertiary)] hover:bg-[var(--ui-bg-surface)] text-[var(--ui-text-primary)] border border-[var(--ui-border-subtle)] shadow-sm',
+        outline:
+          'border border-[var(--ui-border-default)] bg-[var(--ui-bg-surface)]/60 backdrop-blur-xl text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)] hover:border-[var(--ui-border-strong)] shadow-sm',
+        ghost:
+          'bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]/70',
+        danger:
+          'bg-[var(--ui-error)] hover:bg-[var(--ui-error)]/90 text-white shadow-sm hover:shadow-[0_4px_16px_rgba(255,59,48,0.35)] border border-white/15',
+        link:
+          'bg-transparent text-[var(--ui-primary)] underline-offset-4 hover:underline p-0 h-auto active:scale-100 font-normal',
+        glass:
+          'bg-white/10 dark:bg-white/10 backdrop-blur-2xl border border-white/20 dark:border-white/15 text-[var(--ui-text-primary)] hover:bg-white/20 dark:hover:bg-white/15 shadow-[0_8px_32px_rgba(0,0,0,0.12)] hover:shadow-[0_8px_32px_rgba(0,113,227,0.25)]',
+      },
+      size: {
+        xs: 'h-7 px-2.5 text-xs rounded-[var(--ui-radius-sm)] gap-1',
+        sm: 'h-8.5 px-3.5 text-xs rounded-[var(--ui-radius-md)] gap-1.5',
+        md: 'h-10 px-4.5 text-sm rounded-[var(--ui-radius-md)] gap-2 font-semibold',
+        lg: 'h-12 px-6 text-base rounded-[var(--ui-radius-lg)] gap-2.5 font-semibold',
+        xl: 'h-14 px-8 text-lg rounded-[var(--ui-radius-xl)] gap-3 font-bold',
+      },
+      fullWidth: {
+        true: 'w-full',
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'primary',
+      size: 'md',
+      fullWidth: false,
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  loading?: boolean;
+  loadingText?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      fullWidth,
+      loading = false,
+      loadingText,
+      leftIcon,
+      rightIcon,
+      disabled,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const isDisabled = disabled || loading;
+
+    return (
+      <button
+        ref={ref}
+        disabled={isDisabled}
+        className={cn(buttonVariants({ variant, size, fullWidth }), className)}
+        {...props}
+      >
+        {/* Apple subtle top specular highlight */}
+        <span
+          aria-hidden="true"
+          className="absolute inset-x-0 top-0 h-[1px] bg-gradient-to-r from-transparent via-white/35 to-transparent pointer-events-none"
+        />
+
+        {loading ? (
+          <>
+            <Loader2 className="w-4 h-4 animate-spin" />
+            <span>{loadingText || children}</span>
+          </>
+        ) : (
+          <>
+            {leftIcon && <span className="flex-shrink-0 inline-flex items-center">{leftIcon}</span>}
+            <span>{children}</span>
+            {rightIcon && <span className="flex-shrink-0 inline-flex items-center">{rightIcon}</span>}
+          </>
+        )}
+      </button>
+    );
+  }
+);
+
+Button.displayName = 'Button';

package/src/buttons/ButtonGroup.tsx

@@ -1,43 +1,43 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { cn } from '../utils/cn';
-
-export const buttonGroupVariants = cva('inline-flex', {
-  variants: {
-    orientation: {
-      horizontal:
-        'flex-row [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none [&>*:not(:last-child)]:border-r-0',
-      vertical:
-        'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none [&>*:not(:last-child)]:border-b-0',
-    },
-    attached: {
-      true: '',
-      false: 'gap-2',
-    },
-  },
-  defaultVariants: {
-    orientation: 'horizontal',
-    attached: true,
-  },
-});
-
-export interface ButtonGroupProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof buttonGroupVariants> {}
-
-export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
-  ({ className, orientation, attached, children, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        role="group"
-        className={cn(buttonGroupVariants({ orientation, attached }), className)}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  }
-);
-
-ButtonGroup.displayName = 'ButtonGroup';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../utils/cn';
+
+export const buttonGroupVariants = cva('inline-flex', {
+  variants: {
+    orientation: {
+      horizontal:
+        'flex-row [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none [&>*:not(:last-child)]:border-r-0',
+      vertical:
+        'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none [&>*:not(:last-child)]:border-b-0',
+    },
+    attached: {
+      true: '',
+      false: 'gap-2',
+    },
+  },
+  defaultVariants: {
+    orientation: 'horizontal',
+    attached: true,
+  },
+});
+
+export interface ButtonGroupProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof buttonGroupVariants> {}
+
+export const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
+  ({ className, orientation, attached, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="group"
+        className={cn(buttonGroupVariants({ orientation, attached }), className)}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+ButtonGroup.displayName = 'ButtonGroup';

package/src/buttons/IconButton.tsx

@@ -1,79 +1,79 @@
-import React, { forwardRef } from 'react';
-import { cva, type VariantProps } from 'class-variance-authority';
-import { Loader2 } from 'lucide-react';
-import { cn } from '../utils/cn';
-
-export const iconButtonVariants = cva(
-  'inline-flex items-center justify-center font-medium transition-all duration-200 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] focus-visible:ring-offset-2 active:scale-95',
-  {
-    variants: {
-      variant: {
-        primary:
-          'bg-[var(--ui-primary)] text-[var(--ui-primary-fg)] hover:bg-[var(--ui-primary-hover)] shadow-sm',
-        secondary:
-          'bg-[var(--ui-secondary)] text-[var(--ui-secondary-fg)] hover:bg-[var(--ui-secondary-hover)] shadow-sm',
-        outline:
-          'border border-[var(--ui-border-default)] bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]',
-        ghost:
-          'bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]',
-        danger:
-          'bg-[var(--ui-error)] text-[var(--ui-error-fg)] hover:bg-[var(--ui-error)]/90 shadow-sm',
-      },
-      size: {
-        xs: 'w-7 h-7 text-xs rounded-[var(--ui-radius-sm)]',
-        sm: 'w-8 h-8 text-sm rounded-[var(--ui-radius-md)]',
-        md: 'w-10 h-10 text-base rounded-[var(--ui-radius-md)]',
-        lg: 'w-12 h-12 text-lg rounded-[var(--ui-radius-lg)]',
-      },
-      shape: {
-        rounded: '',
-        circle: 'rounded-full',
-      },
-    },
-    defaultVariants: {
-      variant: 'ghost',
-      size: 'md',
-      shape: 'rounded',
-    },
-  }
-);
-
-export interface IconButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof iconButtonVariants> {
-  'aria-label': string;
-  icon?: React.ReactNode;
-  loading?: boolean;
-}
-
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  (
-    {
-      className,
-      variant,
-      size,
-      shape,
-      icon,
-      loading = false,
-      disabled,
-      'aria-label': ariaLabel,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <button
-        ref={ref}
-        aria-label={ariaLabel}
-        disabled={disabled || loading}
-        className={cn(iconButtonVariants({ variant, size, shape }), className)}
-        {...props}
-      >
-        {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : icon || children}
-      </button>
-    );
-  }
-);
-
-IconButton.displayName = 'IconButton';
+import React, { forwardRef } from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Loader2 } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export const iconButtonVariants = cva(
+  'inline-flex items-center justify-center font-medium transition-all duration-200 select-none cursor-pointer disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ui-primary)] focus-visible:ring-offset-2 active:scale-95',
+  {
+    variants: {
+      variant: {
+        primary:
+          'bg-[var(--ui-primary)] text-[var(--ui-primary-fg)] hover:bg-[var(--ui-primary-hover)] shadow-sm',
+        secondary:
+          'bg-[var(--ui-secondary)] text-[var(--ui-secondary-fg)] hover:bg-[var(--ui-secondary-hover)] shadow-sm',
+        outline:
+          'border border-[var(--ui-border-default)] bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]',
+        ghost:
+          'bg-transparent text-[var(--ui-text-primary)] hover:bg-[var(--ui-bg-tertiary)]',
+        danger:
+          'bg-[var(--ui-error)] text-[var(--ui-error-fg)] hover:bg-[var(--ui-error)]/90 shadow-sm',
+      },
+      size: {
+        xs: 'w-7 h-7 text-xs rounded-[var(--ui-radius-sm)]',
+        sm: 'w-8 h-8 text-sm rounded-[var(--ui-radius-md)]',
+        md: 'w-10 h-10 text-base rounded-[var(--ui-radius-md)]',
+        lg: 'w-12 h-12 text-lg rounded-[var(--ui-radius-lg)]',
+      },
+      shape: {
+        rounded: '',
+        circle: 'rounded-full',
+      },
+    },
+    defaultVariants: {
+      variant: 'ghost',
+      size: 'md',
+      shape: 'rounded',
+    },
+  }
+);
+
+export interface IconButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof iconButtonVariants> {
+  'aria-label': string;
+  icon?: React.ReactNode;
+  loading?: boolean;
+}
+
+export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      className,
+      variant,
+      size,
+      shape,
+      icon,
+      loading = false,
+      disabled,
+      'aria-label': ariaLabel,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <button
+        ref={ref}
+        aria-label={ariaLabel}
+        disabled={disabled || loading}
+        className={cn(iconButtonVariants({ variant, size, shape }), className)}
+        {...props}
+      >
+        {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : icon || children}
+      </button>
+    );
+  }
+);
+
+IconButton.displayName = 'IconButton';