@catalystsoftware/ui 1.0.5 → 1.0.7

package/components/catalyst-ui/x/icon-x.tsx

@@ -1,840 +0,0 @@
-
-import React, { useState } from 'react';
-import { motion } from 'motion/react';
-import { cn } from '~/components/catalyst-ui';
-
-/**
- * # IconX/MotionIcons Component Props Documentation
-
-### ============================ ICONX (Main Selector) ============================
-- **icon**: "Burger" | "Close" | "Plus" | "Chevron" | "Arrow" | "Check" | "Dots" | "Play" | "Heart" (default: "Burger")
-- **opened**: boolean (default: false) - controls the animated state of the icon
-- **size**: "sm" | "md" | "lg" | "xl" (default: "md")
-- **color**: string (default: "currentColor") - CSS color value
-- **className**: string - additional CSS classes
-- **...props**: additional HTML div props
-
-**Size Reference:**
-- `sm`: 16px (w-4 h-4)
-- `md`: 24px (w-6 h-6)
-- `lg`: 32px (w-8 h-8)
-- `xl`: 40px (w-10 h-10)
-
-**Line Height by Size:**
-- `sm`: 2px
-- `md`: 2px
-- `lg`: 3px
-- `xl`: 3px
-
----
-
-### ============================ Burger =============================================
-- **opened**: boolean (default: false) - when true, transforms to X shape
-- **size**: "sm" | "md" | "lg" | "xl" (default: "md")
-- **color**: string (default: "currentColor")
-- **className**: string
-
-**Animation:** Three horizontal lines transform into an X (cross) shape
-- Top line: rotates 45° and moves to center
-- Middle line: fades out (opacity 0)
-- Bottom line: rotates -45° and moves to center
-
-**Transition:** 0.3s with easeInOut
-
----
-
-### ============================ Burger2 =================================================
-- **opened**: boolean (default: false) - when true, transforms to X shape
-- **size**: "sm" | "md" | "lg" | "xl" (default: "md")
-- **color**: string (default: "currentColor")
-- **className**: string
-- **onToggle**: function(opened: boolean) - callback when state changes
-- **aria-label**: string - accessibility label
-- **disabled**: boolean - disables interaction
-
-**Animation:** CSS-only version (no Framer Motion) - same visual effect as Burger
-**Transition:** 0.3s with ease-in-out
-
----
-
-## ============================ Close ===================================================================
-- **opened**: boolean (default: false) - when true, rotates the X shape
-- **size**: "sm" | "md" | "lg" | "xl" (default: "md")
-- **color**: string (default: "currentColor")
-- **className**: string
-
-**Animation:** Two intersecting lines that rotate
-- Line 1: rotates from 0° to 45° when opened
-- Line 2: rotates from 0° to -45° when opened
-- Creates an X shape that can spin
-
-**Transition:** 0.3s with easeInOut
-
----
-
-## ============================ Plus ====================================================================
-- **opened**: boolean (default: false) - when true, rotates 90°
-- **size**: "sm" | "md" | "lg" | "xl" (default: "md")
-- **color**: string (default: "currentColor")
-- **className**: string
-
-**Animation:** Plus sign that rotates
-- Horizontal line: rotates 90° (becomes vertical)
-- Vertical line: rotates 90° (becomes horizontal)
-- Creates a rotation effect
-
-**Transition:** 0.3s with easeInOut
-
----
-
-## ============================ Chevron =================================================================
-- **opened**: boolean (default: false) - when true, changes direction from down to up
-- **size**: "sm" | "md" | "lg" | "xl" (default: "md")
-- **color**: string (default: "currentColor")
-- **className**: string
-
-**Animation:** V-shaped chevron that flips direction
-- Left line: rotates from -45° to 45° when opened
-- Right line: rotates from 45° to -45° when opened
-- Chevron down (∨) becomes chevron up (∧)
-
-- **Transition:** 0.3s with easeInOut
-- **Transform Origin:** Right center for left line, left center for right line
-
----
-
-## ============================ Arrow ===================================================================
-- **opened**: boolean (default: false) - when true, arrow points backward
-- **size**: "sm" | "md" | "lg" | "xl" (default: "md")
-- **color**: string (default: "currentColor")
-- **className**: string
-
-**Animation:** Right-pointing arrow that flips to left
-- Shaft: moves 30% to the right when opened
-- Upper arrowhead: rotates from -45° to -135° when opened
-- Lower arrowhead: rotates from 45° to 135° when opened
-- Arrow right (→) becomes arrow left (←)
-
-- **Transition:** 0.3s with easeInOut
-- **Transform Origin:** Right center for arrowhead lines
-
----
-
-## ============================ Check ===================================================================
-- **opened**: boolean (default: false) - when true, draws checkmark
-- **size**: "sm" | "md" | "lg" | "xl" (default: "md")
-- **color**: string (default: "currentColor")
-- **className**: string
-
-**Animation:** Checkmark that draws in sequentially
-- Short line: scales from 0 to 1 (draws in)
-- Long line: scales from 0 to 1 with 0.1s delay (draws in after short line)
-- Creates classic checkmark (✓) drawing effect
-
-- **Transition:** 0.3s with easeOut, second line has 0.1s delay
-- **Transform Origin:** Left center for both lines
-- **Initial State:** scaleX: 0 (invisible)
-
----
-
-## ============================ Dots ====================================================================
-- **opened**: boolean (default: false) - when true, dots animate
-- **size**: "sm" | "md" | "lg" | "xl" (default: "md")
-- **color**: string (default: "currentColor")
-- **className**: string
-
-**Animation:** Three dots that bounce in sequence (loading animation)
-- Each dot: scales to 1.5x and moves up 4px, then returns
-- Sequential animation with 0.1s delay between each dot
-- Creates wave/bounce loading effect
-
-- **Transition:** 0.5s with easeInOut
-- **Delays:** Dot 1: 0s, Dot 2: 0.1s, Dot 3: 0.2s
-
-**Dot Sizes by Size:**
-- `sm`: 3px
-- `md`: 4px
-- `lg`: 5px
-- `xl`: 6px
-
----
-
-## ============================ Play ====================================================================
-- **opened**: boolean (default: false) - when true, changes to pause
-- **size**: "sm" | "md" | "lg" | "xl" (default: "md")
-- **color**: string (default: "currentColor")
-- **className**: string
-
-**Animation:** Play triangle morphs into pause bars
-- Play state: Single triangle path (▶)
-- Pause state: Two vertical bars (⏸)
-- Smooth SVG path morphing
-
-- **Transition:** 0.3s with easeInOut
-- **Implementation:** Uses SVG with animated path data
-
----
-
-## ============================ Heart ===================================================================
-- **opened**: boolean (default: false) - when true, fills the heart
-- **size**: "sm" | "md" | "lg" | "xl" (default: "md")
-- **color**: string (default: "currentColor")
-- **className**: string
-
-**Animation:** Heart outline that fills and scales
-- Closed state: Outline only (stroke)
-- Opened state: Filled heart with scale animation [1, 1.2, 1]
-- Creates "like" animation effect
-
-- **Transition:** 0.3s with easeInOut
-- **Implementation:** Uses SVG with stroke and fill animation
-- **Scale Effect:** Brief 20% increase when filling
-
----
-
-## Usage Examples
-
-### Basic Usage
-```jsx
-import { IconX } from './icon-x';
-
-// Using IconX selector
-<IconX icon="Burger" opened={isOpen} size="md" />
-<IconX icon="Heart" opened={isLiked} color="#ff0000" />
-<IconX icon="Play" opened={isPlaying} size="lg" />
-```
-
-### With State Management
-```jsx
-const [isOpen, setIsOpen] = useState(false);
-
-<button onClick={() => setIsOpen(!isOpen)}>
-  <IconX icon="Burger" opened={isOpen} size="md" />
-</button>
-```
-
-### Direct Component Import
-```jsx
-import { Burger, Heart, Play, Check } from './icon-x';
-
-<Burger opened={isMenuOpen} size="lg" color="blue" />
-<Heart opened={isLiked} color="red" />
-<Play opened={isPlaying} />
-<Check opened={isComplete} size="sm" />
-```
-
-### With Custom Styling
-```jsx
-<IconX 
-  icon="Chevron" 
-  opened={isExpanded}
-  size="md"
-  color="currentColor"
-  className="text-blue-500 hover:text-blue-700"
-/>
-```
-
-### All Sizes Demo
-```jsx
-<div className="flex gap-4">
-  <IconX icon="Burger" opened={isOpen} size="sm" />
-  <IconX icon="Burger" opened={isOpen} size="md" />
-  <IconX icon="Burger" opened={isOpen} size="lg" />
-  <IconX icon="Burger" opened={isOpen} size="xl" />
-</div>
-```
-
-### Toggle Button Pattern
-```jsx
-const [states, setStates] = useState({
-  menu: false,
-  liked: false,
-  playing: false,
-});
-
-<button onClick={() => setStates(s => ({ ...s, menu: !s.menu }))}>
-  <IconX icon="Burger" opened={states.menu} />
-</button>
-
-<button onClick={() => setStates(s => ({ ...s, liked: !s.liked }))}>
-  <IconX icon="Heart" opened={states.liked} color="red" />
-</button>
-
-<button onClick={() => setStates(s => ({ ...s, playing: !s.playing }))}>
-  <IconX icon="Play" opened={states.playing} />
-</button>
-```
-
----
-
-## Animation States Reference
-
-| Icon | Closed State | Opened State | Use Case |
-|------|--------------|--------------|----------|
-| Burger | ≡ (three lines) | ✕ (X shape) | Menu toggle |
-| Burger2 | ≡ (three lines) | ✕ (X shape) | Menu toggle (CSS only) |
-| Close | ✕ (upright X) | ✕ (rotated X) | Close/dismiss with rotation |
-| Plus | + (plus) | + (rotated 90°) | Add/expand toggle |
-| Chevron | ∨ (down) | ∧ (up) | Dropdown/accordion |
-| Arrow | → (right) | ← (left) | Navigation/back |
-| Check | (empty) | ✓ (checkmark) | Task completion |
-| Dots | ··· (static) | ··· (bouncing) | Loading indicator |
-| Play | ▶ (play) | ⏸ (pause) | Media control |
-| Heart | ♡ (outline) | ♥ (filled) | Like/favorite |
-
----
-
-## Technical Notes
-
-1. **Dependencies:**
-   - Framer Motion (`motion/react`) for all components except Burger2
-   - Burger2 uses pure CSS transitions (no motion dependency)
-
-2. **Performance:**
-   - All animations use transform/opacity for GPU acceleration
-   - 60fps smooth animations
-   - Lightweight (~2-3 KB per icon)
-
-3. **Accessibility:**
-   - Icons inherit currentColor by default
-   - Works with focus states
-   - Burger2 supports aria-label and disabled props
-
-4. **Customization:**
-   - All icons respect CSS color inheritance
-   - Sizes are responsive (rem-based)
-   - Can override with className prop
-   - Supports dark mode via color prop
-
-5. **Browser Support:**
-   - Modern browsers (Chrome, Firefox, Safari, Edge)
-   - Requires CSS transforms and CSS transitions support
-   - SVG support required for Play and Heart icons
- */
-
-export function IconX({ icon, ...props }) {
-  switch (icon) {
-    case 'Burger':
-      return <Burger {...props} />;
-    case 'Close':
-      return <Close {...props} />;
-    case 'Plus':
-      return <Plus {...props} />;
-    case 'Chevron':
-      return <Chevron {...props} />;
-    case 'Arrow':
-      return <Arrow {...props} />;
-    case 'Check':
-      return <Check {...props} />;
-    case 'Dots':
-      return <Dots {...props} />;
-    case 'Play':
-      return <Play {...props} />;
-    case 'Heart':
-      return <Heart {...props} />;
-    default:
-      return <Burger2 {...props} />;
-  }
-}
-
-// Shared props interface
-interface IconProps {
-  opened?: boolean;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  color?: string;
-  className?: string;
-}
-
-const sizeClasses = {
-  sm: 'w-4 h-4',
-  md: 'w-6 h-6',
-  lg: 'w-8 h-8',
-  xl: 'w-10 h-10'
-};
-
-const lineHeight = {
-  sm: '2px',
-  md: '2px',
-  lg: '3px',
-  xl: '3px'
-};
-
-interface BurgerMenuProps {
-  opened?: boolean;
-  onToggle?: (opened: boolean) => void;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  color?: string;
-  className?: string;
-  'aria-label'?: string;
-  disabled?: boolean;
-}
-
-function Burger2({ opened = false, size = 'md', color = 'currentColor', }: BurgerMenuProps) {
-  const isOpened = opened
-
-  const sizeClasses = {
-    sm: 'w-4 h-4',
-    md: 'w-6 h-6',
-    lg: 'w-8 h-8',
-    xl: 'w-10 h-10'
-  };
-
-  const lineHeight = {
-    sm: '2px',
-    md: '2px',
-    lg: '3px',
-    xl: '3px'
-  };
-
-  return (
-    <div className={cn("relative", sizeClasses[size])}>
-      <span
-        className={cn("absolute left-0 block transition-all duration-300 ease-in-out rounded-full", "bg-current")}
-        style={{
-          width: '100%',
-          height: lineHeight[size],
-          color: color,
-          top: isOpened ? '50%' : '20%',
-          transform: isOpened ? 'translateY(-50%) rotate(45deg)' : 'translateY(-50%) rotate(0deg)'
-        }}
-      />
-      <span
-        className={cn(
-          "absolute left-0 block transition-all duration-300 ease-in-out rounded-full",
-          "bg-current"
-        )}
-        style={{
-          width: '100%',
-          height: lineHeight[size],
-          color: color,
-          top: '50%',
-          opacity: isOpened ? 0 : 1,
-          transform: 'translateY(-50%)'
-        }}
-      />
-      <span
-        className={cn(
-          "absolute left-0 block transition-all duration-300 ease-in-out rounded-full",
-          "bg-current"
-        )}
-        style={{
-          width: '100%',
-          height: lineHeight[size],
-          color: color,
-          bottom: isOpened ? '50%' : '20%',
-          transform: isOpened ? 'translateY(50%) rotate(-45deg)' : 'translateY(50%) rotate(0deg)'
-        }}
-      />
-    </div>
-  );
-}
-function Burger({ opened = false, size = 'md', color = 'currentColor', className }: IconProps) {
-  return (
-    <div className={cn("relative", sizeClasses[size], className)}>
-      <motion.span
-        className="absolute left-0 block rounded-full bg-current"
-        style={{ width: '100%', height: lineHeight[size], color }}
-        animate={{
-          top: opened ? '50%' : '20%',
-          rotate: opened ? 45 : 0,
-          y: '-50%'
-        }}
-        transition={{ duration: 0.3, ease: 'easeInOut' }}
-      />
-      <motion.span
-        className="absolute left-0 top-1/2 block rounded-full bg-current"
-        style={{ width: '100%', height: lineHeight[size], color, y: '-50%' }}
-        animate={{ opacity: opened ? 0 : 1 }}
-        transition={{ duration: 0.3, ease: 'easeInOut' }}
-      />
-      <motion.span
-        className="absolute left-0 block rounded-full bg-current"
-        style={{ width: '100%', height: lineHeight[size], color }}
-        animate={{
-          bottom: opened ? '50%' : '20%',
-          rotate: opened ? -45 : 0,
-          y: '50%'
-        }}
-        transition={{ duration: 0.3, ease: 'easeInOut' }}
-      />
-    </div>
-  );
-}
-
-function Close({ opened = false, size = 'md', color = 'currentColor', className }: IconProps) {
-  return (
-    <div className={cn("relative", sizeClasses[size], className)}>
-      <motion.span
-        className="absolute left-0 top-1/2 block rounded-full bg-current"
-        style={{ width: '100%', height: lineHeight[size], color }}
-        animate={{ rotate: opened ? 45 : 0, y: '-50%' }}
-        transition={{ duration: 0.3, ease: 'easeInOut' }}
-      />
-      <motion.span
-        className="absolute left-0 top-1/2 block rounded-full bg-current"
-        style={{ width: '100%', height: lineHeight[size], color }}
-        animate={{ rotate: opened ? -45 : 0, y: '-50%' }}
-        transition={{ duration: 0.3, ease: 'easeInOut' }}
-      />
-    </div>
-  );
-}
-
-function Plus({ opened = false, size = 'md', color = 'currentColor', className }: IconProps) {
-  return (
-    <div className={cn("relative", sizeClasses[size], className)}>
-      <motion.span
-        className="absolute left-0 top-1/2 block rounded-full bg-current"
-        style={{ width: '100%', height: lineHeight[size], color }}
-        animate={{ rotate: opened ? 90 : 0, y: '-50%' }}
-        transition={{ duration: 0.3, ease: 'easeInOut' }}
-      />
-      <motion.span
-        className="absolute left-1/2 top-0 block rounded-full bg-current"
-        style={{ width: lineHeight[size], height: '100%', color }}
-        animate={{ rotate: opened ? 90 : 0, x: '-50%' }}
-        transition={{ duration: 0.3, ease: 'easeInOut' }}
-      />
-    </div>
-  );
-}
-
-function Chevron({ opened = false, size = 'md', color = 'currentColor', className }: IconProps) {
-  return (
-    <div className={cn("relative", sizeClasses[size], className)}>
-      <motion.span
-        className="absolute block rounded-full bg-current"
-        style={{
-          width: '50%',
-          height: lineHeight[size],
-          color,
-          left: '10%',
-          top: '50%',
-          transformOrigin: 'right center'
-        }}
-        animate={{
-          rotate: opened ? 45 : -45,
-          y: '-50%'
-        }}
-        transition={{ duration: 0.3, ease: 'easeInOut' }}
-      />
-      <motion.span
-        className="absolute block rounded-full bg-current"
-        style={{
-          width: '50%',
-          height: lineHeight[size],
-          color,
-          right: '10%',
-          top: '50%',
-          transformOrigin: 'left center'
-        }}
-        animate={{
-          rotate: opened ? -45 : 45,
-          y: '-50%'
-        }}
-        transition={{ duration: 0.3, ease: 'easeInOut' }}
-      />
-    </div>
-  );
-}
-
-function Arrow({ opened = false, size = 'md', color = 'currentColor', className }: IconProps) {
-  return (
-    <div className={cn("relative", sizeClasses[size], className)}>
-      <motion.span
-        className="absolute left-0 top-1/2 block rounded-full bg-current"
-        style={{ width: '70%', height: lineHeight[size], color }}
-        animate={{
-          x: opened ? '30%' : '0%',
-          y: '-50%'
-        }}
-        transition={{ duration: 0.3, ease: 'easeInOut' }}
-      />
-      <motion.span
-        className="absolute block rounded-full bg-current"
-        style={{
-          width: '40%',
-          height: lineHeight[size],
-          color,
-          right: '5%',
-          top: '50%',
-          transformOrigin: 'right center'
-        }}
-        animate={{
-          rotate: opened ? -135 : -45,
-          y: '-50%'
-        }}
-        transition={{ duration: 0.3, ease: 'easeInOut' }}
-      />
-      <motion.span
-        className="absolute block rounded-full bg-current"
-        style={{
-          width: '40%',
-          height: lineHeight[size],
-          color,
-          right: '5%',
-          top: '50%',
-          transformOrigin: 'right center'
-        }}
-        animate={{
-          rotate: opened ? 135 : 45,
-          y: '-50%'
-        }}
-        transition={{ duration: 0.3, ease: 'easeInOut' }}
-      />
-    </div>
-  );
-}
-
-function Check({ opened = false, size = 'md', color = 'currentColor', className }: IconProps) {
-  return (
-    <div className={cn("relative", sizeClasses[size], className)}>
-      <motion.span
-        className="absolute block rounded-full bg-current"
-        style={{
-          width: '40%',
-          height: lineHeight[size],
-          color,
-          left: '10%',
-          top: '60%',
-          transformOrigin: 'left center'
-        }}
-        initial={{ rotate: -45, scaleX: 0 }}
-        animate={{
-          rotate: -45,
-          scaleX: opened ? 1 : 0,
-          y: '-50%'
-        }}
-        transition={{ duration: 0.3, ease: 'easeOut' }}
-      />
-      <motion.span
-        className="absolute block rounded-full bg-current"
-        style={{
-          width: '60%',
-          height: lineHeight[size],
-          color,
-          left: '27%',
-          top: '50%',
-          transformOrigin: 'left center'
-        }}
-        initial={{ rotate: 45, scaleX: 0 }}
-        animate={{
-          rotate: 45,
-          scaleX: opened ? 1 : 0,
-          y: '-50%'
-        }}
-        transition={{ duration: 0.3, ease: 'easeOut', delay: 0.1 }}
-      />
-    </div>
-  );
-}
-
-function Dots({ opened = false, size = 'md', color = 'currentColor', className }: IconProps) {
-  const dotSize = {
-    sm: '3px',
-    md: '4px',
-    lg: '5px',
-    xl: '6px'
-  };
-
-  return (
-    <div className={cn("relative flex items-center justify-center gap-1", sizeClasses[size], className)}>
-      <motion.span
-        className="block rounded-full bg-current"
-        style={{
-          width: dotSize[size],
-          height: dotSize[size],
-          color
-        }}
-        animate={{
-          scale: opened ? [1, 1.5, 1] : 1,
-          y: opened ? [0, -4, 0] : 0
-        }}
-        transition={{ duration: 0.5, ease: 'easeInOut' }}
-      />
-      <motion.span
-        className="block rounded-full bg-current"
-        style={{
-          width: dotSize[size],
-          height: dotSize[size],
-          color
-        }}
-        animate={{
-          scale: opened ? [1, 1.5, 1] : 1,
-          y: opened ? [0, -4, 0] : 0
-        }}
-        transition={{ duration: 0.5, ease: 'easeInOut', delay: 0.1 }}
-      />
-      <motion.span
-        className="block rounded-full bg-current"
-        style={{
-          width: dotSize[size],
-          height: dotSize[size],
-          color
-        }}
-        animate={{
-          scale: opened ? [1, 1.5, 1] : 1,
-          y: opened ? [0, -4, 0] : 0
-        }}
-        transition={{ duration: 0.5, ease: 'easeInOut', delay: 0.2 }}
-      />
-    </div>
-  );
-}
-
-function Play({ opened = false, size = 'md', color = 'currentColor', className }: IconProps) {
-  return (
-    <div className={cn("relative", sizeClasses[size], className)}>
-      <svg viewBox="0 0 24 24" className="w-full h-full" style={{ color }}>
-        <motion.path
-          d={opened ? "M6 4h4v16H6V4zm8 0h4v16h-4V4z" : "M8 5v14l11-7z"}
-          fill="currentColor"
-          animate={{ d: opened ? "M6 4h4v16H6V4zm8 0h4v16h-4V4z" : "M8 5v14l11-7z" }}
-          transition={{ duration: 0.3, ease: 'easeInOut' }}
-        />
-      </svg>
-    </div>
-  );
-}
-
-function Heart({ opened = false, size = 'md', color = 'currentColor', className }: IconProps) {
-  return (
-    <div className={cn("relative", sizeClasses[size], className)}>
-      <svg viewBox="0 0 24 24" className="w-full h-full" style={{ color }}>
-        <motion.path
-          d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"
-          fill={opened ? 'currentColor' : 'none'}
-          stroke="currentColor"
-          strokeWidth="2"
-          animate={{
-            scale: opened ? [1, 1.2, 1] : 1,
-            fill: opened ? 'currentColor' : 'none'
-          }}
-          transition={{ duration: 0.3, ease: 'easeInOut' }}
-        />
-      </svg>
-    </div>
-  );
-}
-
-
-export function MotionIconsDemo() {
-  const [states, setStates] = useState({
-    burger: false,
-    close: false,
-    plus: false,
-    chevron: false,
-    arrow: false,
-    check: false,
-    dots: false,
-    play: false,
-    heart: false
-  });
-
-  const toggleIcon = (icon) => {
-    setStates(prev => ({ ...prev, [icon]: !prev[icon] }));
-  };
-
-  const icons = [
-    { name: 'burger', label: 'Burger Menu' },
-    { name: 'close', label: 'Close (X)' },
-    { name: 'plus', label: 'Plus' },
-    { name: 'chevron', label: 'Chevron' },
-    { name: 'arrow', label: 'Arrow' },
-    { name: 'check', label: 'Check' },
-    { name: 'dots', label: 'Loading Dots' },
-    { name: 'play', label: 'Play/Pause' },
-    { name: 'heart', label: 'Heart' }
-  ];
-
-  return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 p-8">
-      <div className="max-w-6xl mx-auto space-y-8">
-        <div className="text-center space-y-2">
-          <h1 className="text-4xl font-bold text-slate-900 dark:text-white">
-            MotionIcons
-          </h1>
-          <p className="text-lg text-slate-600 dark:text-slate-400">
-            Animated icon components built with Motion/React
-          </p>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          {icons.map(({ name, label }) => (
-            <div
-              key={name}
-              className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 space-y-4 border border-slate-200 dark:border-slate-700"
-            >
-              <div className="flex items-center justify-between">
-                <h3 className="text-lg font-semibold text-slate-900 dark:text-white">
-                  {label}
-                </h3>
-                <code className="text-xs bg-slate-100 dark:bg-slate-700 px-2 py-1 rounded text-slate-600 dark:text-slate-300">
-                  {name}
-                </code>
-              </div>
-
-              <div className="flex items-center justify-center gap-8 py-8">
-                {['sm', 'md', 'lg', 'xl'].map(size => (
-                  <div key={size} className="flex flex-col items-center gap-2">
-                    <button
-                      onClick={() => toggleIcon(name)}
-                      className="p-4 rounded-lg bg-slate-100 dark:bg-slate-700 hover:bg-slate-200 dark:hover:bg-slate-600 transition-colors"
-                      aria-label={`Toggle ${label}`}
-                    >
-                      <MotionIcons
-                        icon={name}
-                        opened={states[name]}
-                        size={size}
-                        color="currentColor"
-                        className="text-slate-900 dark:text-white"
-                      />
-                    </button>
-                    <span className="text-xs text-slate-500 dark:text-slate-400">
-                      {size}
-                    </span>
-                  </div>
-                ))}
-              </div>
-
-              <div className="text-center">
-                <button
-                  onClick={() => toggleIcon(name)}
-                  className="text-sm text-blue-600 dark:text-blue-400 hover:underline"
-                >
-                  Click icons to toggle
-                </button>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 border border-slate-200 dark:border-slate-700">
-          <h2 className="text-xl font-bold text-slate-900 dark:text-white mb-4">
-            Usage Example
-          </h2>
-          <pre className="bg-slate-100 dark:bg-slate-900 p-4 rounded-lg overflow-x-auto text-sm">
-            <code className="text-slate-900 dark:text-slate-100">{`import { MotionIcons } from './motion-icons';
-
-// Use any icon with the icon prop
-<MotionIcons 
-  icon="burger" 
-  opened={isOpen} 
-  size="md" 
-  color="currentColor" 
-/>
-
-// Or import specific icons
-import { Burger, Close, Plus, Heart } from './motion-icons';
-
-<Burger opened={isOpen} size="lg" />
-<Close opened={isOpen} />
-<Plus opened={isOpen} size="sm" />
-<Heart opened={isLiked} color="red" />`}</code>
-          </pre>
-        </div>
-      </div>
-    </div>
-  );
-}
-