@catalystsoftware/ui 1.0.5 → 1.0.7

package/components/catalyst-ui/x/button-X.tsx

@@ -1,2857 +0,0 @@
-import React, { useEffect, useState, useCallback, Children, cloneElement, ComponentPropsWithoutRef, createContext, CSSProperties, ReactElement, ReactNode, useContext, useRef } from 'react'
-import { AlertCircle, ArchiveX, ArrowRight, Ban, CheckIcon, ChevronDown, Command, CopyIcon, Download, LucideProps, Magnet, MousePointerClick, StarIcon, Trash2,  XCircle } from 'lucide-react'
-import { Instagram, Linkedin,Twitter,} from '@catalystsoftware/icons'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { attractButtonVariants, BurgerButton, buttonVariants, cn, commandButtonVariants, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, holdButtonVariants, LoaderProps, particleButtonVariants, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Transition, useCopyToClipboard, useExport } from '~/components/catalyst-ui'
-import { Slot } from "@radix-ui/react-slot"
-import { Link, useNavigation, useResolvedPath } from '@remix-run/react';
-import { SpinnerV4 } from '~/components/catalyst-ui'
-import { useControllableState } from '@radix-ui/react-use-controllable-state'
-import { motion, AnimatePresence, Variant, HTMLMotionProps } from 'framer-motion'
-
-// @devsearch app/components/catalyst-ui/data/primitive-data.tsx:buttonX
-
-/**
-============================ BUTTONX =====================================================================
-* **variant**: default | destructive | outline | secondary | ghost | link | elevated | filled | tonal | outlined | text | styled | reverted | dashed | gradient | soft | glass | success | warning | info | shine | pulse | violet | blue | green                                     
-* **size**: default | sm | lg | icon                                                                    
-* **align**: left | middle | right                                                                    
-* **effect**: expandIcon | ringHover | shine | shineHover | gooeyRight | gooeyLeft | underline | hoverUnderline | gradientSlideShow                          
-* **prefetch**: none | intent | render | viewport                                                         
-* **nav**: null | navlink | anchor                                                                      
-* **to**: string (navigation path)                                                                      
-* **iconPlacement**: left | right                                                                    
-* **icon**: React.ReactNode                                                                           
-* **newTab**: boolean                                                                                  
-* **onClick**: function                                                                                    
-* **className**: string                                                                                
-* **...props**: standard button props                                                                    
-*                                                                                                         
-============================ Attract =====================================================================
-* **particleCount**: number (default: 12)                                                                 
-* **attractRadius**: number (default: 50)                                                                 
-* **attractVariant**: default | violet | blue | green                                                    
-* **icon**: React.ReactNode                                                                               
-* **activeText**: string (default: "Attracting")                                                    
-* **inactiveText**: string (default: "Hover me")                                                    
-* **className**: string                                                                                
-* **...props**: standard button props                                                                
-*                                                                                                         
-============================ DEFAULT (Button) ============================================================
-* **className**: string                                                                             
-* **variant**: default | destructive | outline | secondary | ghost | link | elevated | filled | tonal | outlined | text | styled | reverted | dashed | gradient | soft | glass | success | warning | info | shine | pulse | violet | blue | green                               
-* **size**: default | sm | lg | icon                                                                   
-* **align**: left | middle | right                                                                   
-* **effect**: expandIcon | ringHover | shine | shineHover | gooeyRight | gooeyLeft | underline | hoverUnderline | gradientSlideShow            
-* **asChild**: boolean (default: false)                                                                   
-* **type**: string (default: null)                                                                   
-* **children**: React.ReactNode                                                                   
-* **...props**: standard button props                                                                   
-*                                                                                                           
-============================ Burger ======================================================================
-* **className**: string                                                                                   
-* **...props**: standard button props                                                                   
-* *(Uses BurgerButton component from catalyst-ui)*                                                       
-*                                                                                                       
-============================ Command =====================================================================
-* **className**: string                                                                                   
-* **variant**: default | primary | secondary                                                                   
-* **size**: sm | default | lg                                                                             
-* **children**: React.ReactNode (default: "CMD + K")                                                        
-* **...props**: standard button props                                                                   
-*                                                                                                        
-============================ Copy ========================================================================
-* **content**: string (text to copy)                                                                     
-* **className**: string                                                                   
-* **size**: default | sm | lg | icon                                                                   
-* **variant**: default | destructive | outline | secondary | ghost | link                                                                   
-* **delay**: number (default: 3000) - time in ms before icon resets                                                                   
-* **onClick**: function                                                                   
-* **onCopy**: function(content: string) - callback when copy succeeds                                                                   
-* **isCopied**: boolean - controlled copied state                                                                   
-* **onCopyChange**: function(isCopied: boolean) - controlled copied state handler                                                                   
-* **...props**: standard button props                                                                   
-*                                                                    
-============================ CopyText ====================================================================
-* **code**: string (text to copy)                                                                   
-* **className**: string                                                                   
-* **ttText**: string (default: 'Copy') - tooltip text                                                                   
-* **icon**: React.Component (default: CopyIcon)                                                                   
-* **size**: default | sm | lg | icon (default: 'icon')                                                                   
-* **variant**: default | destructive | outline | secondary | ghost | link (default: 'ghost')                                                                   
-* **...props**: standard button props                                                                   
-*                                                                    
-============================ Export ======================================================================
-* **code**: string (default: null) - content to export                                                                   
-* **filename**: string (default: 'MyComponent.tsx') - filename for download                              
-* **className**: string                                                                   
-* 
-============================ Flip ========================================================================
-* **frontText**: string (required) - text displayed on front                                              
-* **backText**: string (required) - text displayed on back                                              
-* **transition**: object (default: { type: 'spring', stiffness: 280, damping: 20 })                   
-* **className**: string                                              
-* **frontClassName**: string - styling for front face                                              
-* **backClassName**: string - styling for back face                                              
-* **from**: 'top' | 'bottom' | 'left' | 'right' (default: 'top') - flip direction                        
-* **...props**: standard motion button props                                              
-*                                               
-============================ Form ========================================================================
-* **primary**: true | false | "dashed" (default: true)                                              
-* **variant**: default | destructive | outline | secondary | ghost | link (default: "default")          
-* **align**: left | middle | right (default: "default")                                              
-* **size**: default | sm | lg | icon (default: 'sm')                                              
-* **loadingText**: string (default: "Submitting...")                                              
-* **className**: string                                                                        
-* **children**: React.ReactNode                                                                        
-* **...props**: standard button props                                                            
-*                                                                                                
-============================ Float =======================================================================
-* **icon**: React.ReactNode                                                                           
-* **description**: string - text description below icon                                              
-* **tooltip**: string - tooltip text on hover                                              
-* **type**: "default" | "primary" (default: "default")                                              
-* **shape**: "circle" | "square" (default: "circle")                                              
-* **size**: "small" | "default" | "large" (default: "default")                                              
-* **className**: string                                                                                  
-* **onClick**: function                                                                                
-* **children**: React.ReactNode                                                                      
-*                                                                                             
-============================ Hold ========================================================================
-* **holdDuration**: number (default: 3000) - time in ms to hold                                              
-* **onComplete**: function - callback when hold completes                                              
-* **icon**: React.ReactNode                                                                              
-* **holdText**: string (default: "Hold me")
-* **releaseText**: string (default: "Release")                                              
-* **holdVariant**: "red" | "green" | "blue" | "orange" | "grey" (default: "red")                          
-* **className**: string                                                                                            
-* **disabled**: boolean                                                                                            
-* **...props**: standard button props                                                                       
-*                                                                                             
-============================ Input =======================================================================
-* **placeholder**: string (default: "Enter text") - for InputButtonInput                          
-* **submitText**: string (default: "Submit") - for InputButtonSubmit                          
-* **className**: string                                                                              
-* **transition**: object (default: { type: 'spring', stiffness: 300, damping: 20 })                          
-* **showInput**: boolean - controlled input visibility                                                    
-* **setShowInput**: function - controlled input visibility handler                          
-* **id**: string - unique identifier                                                                          
-* **children**: React.ReactNode (or default structure)                                               
-* **...props**: standard div props                                                                   
-*                                                                                                         
-============================ Liquid ======================================================================
-* **className**: string                                                                              
-* **variant**: default | destructive | outline | secondary | ghost | link                          
-* **size**: default | sm | lg | icon                                                             
-* **children**: React.ReactNode                                                                              
-* **...props**: standard motion button props                                                    
-*                                                                                                         
-============================ Particle ====================================================================
-* **children**: React.ReactNode                                                                     
-* **onClick**: function                                                                     
-* **onSuccess**: function - callback on click                                              
-* **successDuration**: number (default: 1000) - particle animation duration                       
-* **particleCount**: number | "low" | "high" (default: 6) - number of particles (low=4, high=10)        
-* **showIcon**: boolean (default: true)                                                                     
-* **icon**: React.ReactNode                                                                     
-* **variant**: default | destructive | outline | secondary | ghost | link                       
-* **size**: default | sm | lg | icon                                                                     
-* **align**: left | middle | right                                                                     
-* **className**: string                                                                     
-* **disabled**: boolean                                                                     
-* **...props**: standard button props                                                                     
-*                                                                                            
-============================ Rate ========================================================================
-* **defaultValue**: number (default: 0) - initial rating value                                              
-* **value**: number - controlled rating value                                              
-* **onChange**: function(event, value) - callback on rating change                                              
-* **onValueChange**: function(value) - callback on rating value change                                    
-* **readOnly**: boolean (default: false)                                              
-* **className**: string                                                                     
-* **starSize**: number (default: 20) - size of star icons                       
-* **icon**: React.ReactNode (default: <StarIcon />)                       
-* **children**: React.ReactNode (or auto-generated 5 stars)                       
-*                                                                                             
-============================ Rate1 =======================================================================
-* **defaultValue**: number (default: 3) - initial rating value                       
-* **value**: number - controlled rating value                                              
-* **onChange**: function(event, value) - callback on rating change                       
-* **onValueChange**: function(value) - callback on rating value change                       
-* **readOnly**: boolean (default: false)                                              
-* **className**: string                                                                     
-* **showText**: boolean (default: true) - show rating text below                       
-* **text**: string - custom text to display                                                               
-* **children**: React.ReactNode (or auto-generated 5 stars)                                              
-* **...props**: standard div props                                                                     
-*                                                                                                         
-============================ Ripple ======================================================================
-* **ref**: React.Ref<HTMLButtonElement>                                                                     
-* **children**: React.ReactNode                                                                     
-* **onClick**: function                                                                                    
-* **className**: string                                                                     
-* **rippleClassName**: string - styling for ripple effect                                              
-* **variant**: default | destructive | outline | secondary | ghost | link                       
-* **size**: default | sm | lg | icon                                                                     
-* **scale**: number (default: 10) - ripple scale multiplier                                              
-* **transition**: object (default: { duration: 0.6, ease: 'easeOut' })                       
-* **...props**: standard motion button props                                                          
-*                                                                                                         
-============================ Social ======================================================================
-* **shareButtons**: array of { icon: Component, label: string, onClick?: function } (default: Twitter, Instagram, LinkedIn, Link)                       
-* **label**: string (default: "Hover me")                                                                     
-* **icon**: React.ReactNode                                                                     
-* **variant**: "light" | "dark" | "outline"                                                                     
-* **className**: string                                                                     
-* **...props**: standard button props                                                                     
-*                                                                                             
-============================ Split =======================================================================
-* **label**: string | null (default: null) - dropdown label or ChevronDown icon                       
-* **icon**: React.ReactNode                                              
-* **items**: array of { label: string, icon?: ReactNode, command?: function, separator?: boolean } (required)                          
-* **onClick**: function - main button click handler                                              
-* **className**: string                                                                     
-* **containerClassName**: string - wrapper styling                                              
-* **variant**: "default" | "destructive" | "outline" | "secondary" | "ghost" (default: "default")                                   
-* **align**: left | middle | right (default: "default")                                              
-* **size**: default | sm | lg | icon (default: "sm")                                              
-* **children**: React.ReactNode                                                                     
-* **...props**: standard button props
-*                                                                                             
-============================ Switch ======================================================================
-* **checked**: boolean (default: false) - switch state                                                    
-* **onCheckedChange**: function(checked: boolean) - callback on state change                       
-* **className**: string                                                                                  
-* **variant**: 'default' | 'primary' | 'secondary' | 'destructive' (default: 'default')                                         
-* **size**: 'sm' | 'md' | 'lg' (default: 'md')                                                             
-* **disabled**: boolean (default: false)                                                           
-* **labels**: { checked: string, unchecked: string } - optional labels for states                       
-*                                                                                             
-============================ Toggle ======================================================================
-* **checked**: boolean (default: false) - toggle state                                              
-* **onChange**: function(checked: boolean) - callback on state change                                              
-* **disabled**: boolean (default: false)                                                                     
-* **className**: string                                                                               
-* **variant**: "default" | "outline" | "ghost" (default: "default")                                       
-* **size**: "sm" | "md" | "lg" | "icon" (default: "md")                                              
-* **children**: React.ReactNode (default: "Toggle")                                              
-* **...props**: standard button props                                                                     
-*                                                                                             
-============================ Slide =======================================================================
-* **className**: string                                                                                
-* **variant**: string (slideTextButtonVariants)                                                           
-* **size**: "sm" | "default" | "lg" (default: "default")                                
-* **text**: string (default: "Browse Components") - default text                                
-* **hoverText**: string - text on hover (defaults to text if not provided)                                
-* **to**: string (default: "/") - navigation path                                
-* **prefetch**: "none" | "intent" | "render" | "viewport" (default: "intent")                                
-* **...props**: Link component props                                
-*                                                                                                 
-============================ TextReveal ==================================================================
-* **text**: string (default: "shadcn.io") - text to reveal                                
-* **revealColor**: string (default: "#37FF8B") - revealed text color                                
-* **strokeColor**: string (default: "rgba(100, 100, 100, 0.7)") - text stroke color                             
-* **className**: string                                
-* **style**: React.CSSProperties                                
-* **ref**: React.Ref<HTMLButtonElement>                                
-* **...props**: standard button props                                
-*                                                                                                 
-============================ Shimmer =====================================================================
-* **shimmerColor**: string (default: "#ffffff") - shimmer effect color                                
-* **shimmerSize**: string (default: "0.05em") - shimmer width                                
-* **shimmerDuration**: string (default: "3s") - animation duration                                
-* **borderRadius**: string (default: "100px") - button border radius                                
-* **background**: string (default: "rgba(0, 0, 0, 1)") - button background                                
-* **className**: string                                                                
-* **children**: React.ReactNode                                                                
-* **ref**: React.Ref<HTMLButtonElement>                                                                
-* **...props**: standard button props                                                                
-*                                                                                                 
-============================ TooltipButton ===============================================================
-* **icon**: React.ReactNode (required) - icon to display                                
-* **content**: string (required) - tooltip content                                
-* **onClick**: function (default: null) - click handler                                
-* **size**: "default" | "sm" | "lg" | "icon" (default: 'icon')                                
-* **variant**: default | destructive | outline | secondary | ghost | link (default: 'ghost')                          
-* **className**: string                                                                                                
-*                                                                                                 
- */
-
-
- function ButtonX({ button = 'default', children, ...props }: any) {
-    switch (button) {
-        case 'Attract':
-            return <AttractButton {...props}>{children}</AttractButton>;
-        case 'Burger':
-            return <BurgerButton {...props}>{children}</BurgerButton>;
-        case 'Command':
-            return <CommandButton {...props}>{children}</CommandButton>;
-        case 'Copy':
-            return <CopyButton {...props}>{children}</CopyButton>;
-        case 'CopyText':
-            return <CopyText {...props}>{children}</CopyText>;
-        case 'Export':
-            return <ExportFile {...props} />;
-        case 'Flip':
-            return <FlipButton {...props} />;
-        case 'Form':
-            return <FormButton {...props}>{children}</FormButton>;
-        case 'Float':
-            return <FloatButton {...props}>{children}</FloatButton>;
-        case 'Hold':
-            return <HoldButton {...props}>{children}</HoldButton>;
-        case 'Input':
-            return (
-                <InputButtonProvider {...props}>
-                    <InputButton>
-                        <InputButtonAction>{children || "Click me"}</InputButtonAction>
-                        <InputButtonInput placeholder={props.placeholder || "Enter text"} />
-                        <InputButtonSubmit>{props.submitText || "Submit"}</InputButtonSubmit>
-                    </InputButton>
-                </InputButtonProvider>
-            );
-        case 'Liquid':
-            return <LiquidButton {...props}>{children}</LiquidButton>;
-        case 'Particle':
-            return <ParticleButton {...props}>{children}</ParticleButton>;
-        case 'Rate':
-            return (
-                <Rating
-                    defaultValue={props.defaultValue || 0}
-                    value={props.value}
-                    onChange={props.onChange}
-                    onValueChange={props.onValueChange}
-                    readOnly={props.readOnly || false}
-                    className={props.className}
-                >
-                    {children || Array.from({ length: 5 }).map((_, index) => (
-                        <RatingButton
-                            key={index}
-                            index={index}
-                            size={props.starSize || 20}
-                            icon={props.icon || <StarIcon />}
-                        />
-                    ))}
-                </Rating>
-            );
-        case 'Rate1':
-            return (
-                <div>
-                    <Rate1 defaultValue={props.defaultValue || 3} {...props}>
-                        {children || Array.from({ length: 5 }).map((_, index) => (
-                            <RatingButton1 key={index} />
-                        ))}
-                    </Rate1>
-                    {props.showText !== false && (
-                        <p className="text-sm text-muted-foreground mt-2">
-                            {props.text || `Rating: ${props.defaultValue || 3} stars`}
-                        </p>
-                    )}
-                </div>
-            );
-        case 'Ripple':
-            return <RippleButton {...props}>{children}</RippleButton>;
-        case 'Social':
-            return <SocialButton {...props}>{children}</SocialButton>;
-        case 'Split':
-            return <SplitButton {...props}>{children}</SplitButton>;
-        case 'Switch':
-            return <SwitchButton {...props}>{children}</SwitchButton>;
-        case 'Toggle':
-            return <ToggleButton {...props}>{children || "Toggle"}</ToggleButton>;
-        case 'Slide':
-            return <SlideButton {...props}>{children}</SlideButton>;
-        case 'TextReveal':
-            return <TextRevealButton {...props}>{children}</TextRevealButton>;
-        case 'Shimmer':
-            return <ShimmerButton {...props}>{children}</ShimmerButton>;
-        case 'TooltipButton':
-            return <TooltipButton {...props} />;
-        case 'default':
-        default:
-            return <Button {...props}>{children}</Button>;
-    }
-}
-
-ButtonX.displayName = "ButtonX"
-
-export { ButtonX }
-
-function Button({
-    className,
-    variant,
-    size,
-    align,
-    effect,
-    icon: Icon,
-    iconPlacement = "left",
-    prefetch = "intent",
-    to = "/",
-    nav = null,
-    newTab = true,
-    asChild = false,
-    type = null,
-    children,
-    ...props
-}: React.ComponentProps<"button"> &
-    VariantProps<typeof buttonVariants> & {
-        asChild?: boolean
-    }) {
-    const Comp = asChild ? Slot : "button"
-    const n = useNavigation()
-    const resolvedTo = useResolvedPath(to);
-    const isSubmitting = n.state === 'submitting';
-    const isNavigating = n.state === 'loading' && n.location?.pathname === resolvedTo.pathname;
-    const isDisabled = isSubmitting && isNavigating;
-    let loadingText = 'Navigating...'
-    if (nav === 'navlink') {
-        return (
-            <Link
-                to={to}
-                prefetch={prefetch}
-                preventScrollReset
-                disabled={isDisabled}
-                {...props}>
-                <Comp
-                    data-slot="button"
-                    type={type || 'button'}
-                    className={cn(buttonVariants({ variant, effect, size, align, className }))}
-                    disabled={isDisabled}
-                >
-                    {isNavigating ? (
-                        <div className='flex items-center gap-3'>
-                            <SpinnerV4 title={loadingText} subtitle='' size='icon' />
-                        </div>
-                    ) : (
-                        children
-                    )}
-                </Comp>
-            </Link>
-        )
-    } else if (nav === 'anchor') {
-        const anchorProps = newTab ? {
-            target: "_blank",
-            rel: "noopener noreferrer"
-        } : {};
-        return (
-            <a
-                href={to}
-                preventScrollReset
-                disabled={isDisabled}
-                {...anchorProps}
-            >
-                <Comp
-                    data-slot="button"
-                    type={type || 'button'}
-                    className={cn(buttonVariants({ variant, effect, size, align, className }))}
-                    disabled={isDisabled}
-                    {...props}
-                >
-                    {isNavigating ? (
-                        <div className='flex items-center gap-3'>
-                            <SpinnerV4 title={loadingText} subtitle='' size='icon' />
-                        </div>
-                    ) : (
-                        children
-                    )}
-                </Comp>
-            </a>
-        )
-    } else if (effect) {
-        let loadingText = 'Submitting...'
-        return (
-            <Comp
-                data-slot="button"
-                type={type || 'submit'}
-                className={cn(buttonVariants({ variant, effect, size, align, className }))}
-                {...props}
-            >
-                {Icon &&
-                    iconPlacement === 'left' &&
-                    (effect === 'expandIcon' ? (
-                        <div className="w-0 translate-x-[0%] pr-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-100 group-hover:pr-2 group-hover:opacity-100">
-                            <Icon />
-                        </div>
-                    ) : (
-                        <Icon />
-                    ))}
-
-                {isNavigating ? (
-                    <div className='flex items-center gap-3'>
-                        <SpinnerV4 title={loadingText} subtitle='' size='icon' />
-                    </div>
-                ) : (
-                    children
-                )}
-                {Icon &&
-                    iconPlacement === 'right' &&
-                    (effect === 'expandIcon' ? (
-                        <div className="w-0 translate-x-[100%] pl-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-0 group-hover:pl-2 group-hover:opacity-100">
-                            <Icon />
-                        </div>
-                    ) : (
-                        <Icon />
-                    ))}
-            </Comp>
-        )
-    } else {
-        let loadingText = 'Submitting...'
-        return (
-            <Comp
-                data-slot="button"
-                type={type || 'submit'}
-                className={cn(buttonVariants({ variant, effect, size, align, className }))}
-                {...props}
-            >
-                {isNavigating ? (
-                    <div className='flex items-center gap-3'>
-                        <SpinnerV4 title={loadingText} subtitle='' size='icon' />
-                    </div>
-                ) : (
-                    children
-                )}
-            </Comp>
-        )
-    }
-
-}
-function AttractButton({
-    particleCount = 12,
-    attractRadius = 50,
-    attractVariant,
-    icon,
-    activeText = "Attracting",
-    inactiveText = "Hover me",
-    className,
-    ...props
-}: AttractButtonProps) {
-    const [isAttracting, setIsAttracting] = useState(false)
-    const [particles, setParticles] = useState<Particle[]>([])
-    const [particlePositions, setParticlePositions] = useState<{ [key: number]: { x: number; y: number } }>({})
-
-    useEffect(() => {
-        const newParticles = Array.from({ length: particleCount }, (_, i) => ({
-            id: i,
-            x: Math.random() * 360 - 180,
-            y: Math.random() * 360 - 180,
-        }))
-        setParticles(newParticles)
-
-        const initialPositions: { [key: number]: { x: number; y: number } } = {}
-        newParticles.forEach(p => {
-            initialPositions[p.id] = { x: p.x, y: p.y }
-        })
-        setParticlePositions(initialPositions)
-    }, [particleCount])
-
-    const handleInteractionStart = useCallback(() => {
-        setIsAttracting(true)
-        const attracted: { [key: number]: { x: number; y: number } } = {}
-        particles.forEach(p => {
-            attracted[p.id] = { x: 0, y: 0 }
-        })
-        setParticlePositions(attracted)
-    }, [particles])
-
-    const handleInteractionEnd = useCallback(() => {
-        setIsAttracting(false)
-        const scattered: { [key: number]: { x: number; y: number } } = {}
-        particles.forEach(p => {
-            scattered[p.id] = { x: p.x, y: p.y }
-        })
-        setParticlePositions(scattered)
-    }, [particles])
-
-    const particleColor = attractVariant === "violet"
-        ? "bg-violet-400 dark:bg-violet-300"
-        : attractVariant === "blue"
-            ? "bg-blue-400 dark:bg-blue-300"
-            : attractVariant === "green"
-                ? "bg-green-400 dark:bg-green-300"
-                : "bg-primary"
-
-    return (
-        <Button
-            className={cn(attractButtonVariants({ attractVariant }), className)}
-            onMouseEnter={handleInteractionStart}
-            onMouseLeave={handleInteractionEnd}
-            onTouchStart={handleInteractionStart}
-            onTouchEnd={handleInteractionEnd}
-            asChild={false}
-            {...props}
-        >
-            <>
-                {particles.map((particle) => (
-                    <div
-                        key={particle.id}
-                        className={cn(
-                            "absolute w-1.5 h-1.5 rounded-full transition-all duration-300",
-                            particleColor,
-                            isAttracting ? "opacity-100" : "opacity-40"
-                        )}
-                        style={{
-                            transform: `translate(${particlePositions[particle.id]?.x || particle.x}px, ${particlePositions[particle.id]?.y || particle.y}px)`,
-                        }}
-                    />
-                ))}
-                <span className="relative w-full flex items-center justify-center gap-2">
-                    {icon || (
-                        <Magnet
-                            className={cn(
-                                "w-4 h-4 transition-transform duration-300",
-                                isAttracting && "scale-110"
-                            )}
-                        />
-                    )}
-                    {isAttracting ? activeText : inactiveText}
-                </span>
-            </>
-        </Button>
-    )
-}
-function CommandButton({
-    className,
-    variant,
-    size,
-    children,
-    ...props
-}: React.ComponentProps<"button"> &
-    VariantProps<typeof commandButtonVariants> & {
-        children?: React.ReactNode
-    }) {
-    return (
-        <button
-            data-slot="command-button"
-            className={cn(commandButtonVariants({ variant, size, className }))}
-            {...props}
-        >
-            <Command
-                className={cn(
-                    "text-zinc-600 dark:text-zinc-400 transition-all duration-300 group-hover:scale-110 group-hover:rotate-[-4deg] group-active:scale-95",
-                    size === "sm" && "size-3",
-                    size === "default" && "size-4",
-                    size === "lg" && "size-5"
-                )}
-            />
-            <span className="text-zinc-600 dark:text-zinc-400">
-                {children || "CMD + K"}
-            </span>
-            <span
-                className={cn(
-                    "absolute inset-0 bg-gradient-to-r from-indigo-500/0 via-indigo-500/10 to-indigo-500/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-500 ease-out"
-                )}
-            />
-        </button>
-    )
-}
-function CopyButton({
-    content,
-    className,
-    size,
-    variant,
-    delay = 3000,
-    onClick,
-    onCopy,
-    isCopied,
-    onCopyChange,
-    ...props
-}: CopyButtonProps) {
-    const [localIsCopied, setLocalIsCopied] = React.useState(isCopied ?? false);
-    const Icon = localIsCopied ? CheckIcon : CopyIcon;
-
-    React.useEffect(() => {
-        setLocalIsCopied(isCopied ?? false);
-    }, [isCopied]);
-
-    const handleIsCopied = React.useCallback(
-        (isCopied: boolean) => {
-            setLocalIsCopied(isCopied);
-            onCopyChange?.(isCopied);
-        },
-        [onCopyChange],
-    );
-
-    const handleCopy = React.useCallback(
-        (e: React.MouseEvent<HTMLButtonElement>) => {
-            if (isCopied) return;
-            if (content) {
-                navigator.clipboard
-                    .writeText(content)
-                    .then(() => {
-                        handleIsCopied(true);
-                        setTimeout(() => handleIsCopied(false), delay);
-                        onCopy?.(content);
-                    })
-                    .catch((error) => {
-                        console.error('Error copying command', error);
-                    });
-            }
-            onClick?.(e);
-        },
-        [isCopied, content, delay, onClick, onCopy, handleIsCopied],
-    );
-
-    return (
-        <motion.button
-            data-slot="copy-button"
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            className={cn(buttonVariants({ variant, size }), className)}
-            onClick={handleCopy}
-            {...props}
-        >
-            <AnimatePresence mode="wait">
-                <motion.span
-                    key={localIsCopied ? 'check' : 'copy'}
-                    data-slot="copy-button-icon"
-                    initial={{ scale: 0 }}
-                    animate={{ scale: 1 }}
-                    exit={{ scale: 0 }}
-                    transition={{ duration: 0.15 }}
-                >
-                    <Icon />
-                </motion.span>
-            </AnimatePresence>
-        </motion.button>
-    );
-}
-function CopyText({
-    code,
-    className,
-    ttText = 'Copy',
-    icon = CopyIcon,
-    size = 'icon',
-    variant = 'ghost',
-    ...props
-}: CopyButtonProps) {
-    const { isCopied, copyToClipboard } = useCopyToClipboard()
-
-    const Icon = isCopied ? CheckIcon : icon;
-
-    return (
-        <Tooltip>
-            <TooltipTrigger>
-                <motion.button
-                    data-slot="copy-button"
-                    whileHover={{ scale: 1.05 }}
-                    whileTap={{ scale: 0.95 }}
-                    className={cn(buttonVariants({ variant, size }), className)}
-                    onClick={() => copyToClipboard(code)}
-                    {...props}
-                >
-                    <AnimatePresence mode="wait">
-                        <motion.span
-                            key={isCopied ? 'check' : 'copy'}
-                            data-slot="copy-button-icon"
-                            initial={{ scale: 0 }}
-                            animate={{ scale: 1 }}
-                            exit={{ scale: 0 }}
-                            transition={{ duration: 0.15 }}
-                        >
-                            <Icon />
-                        </motion.span>
-                    </AnimatePresence>
-                </motion.button>
-            </TooltipTrigger>
-            <TooltipContent>
-                <p>{ttText}</p>
-            </TooltipContent>
-        </Tooltip>
-
-    );
-}
-function ExportFile({ code = null, filename = 'MyComponent.tsx', className }) {
-    const exportFile = useExport();
-
-    const handleClick = () => {
-        if (!code || !filename) return null;
-        exportFile(code, filename);
-    };
-    return (
-        <TooltipButton icon={<Download />} onClick={handleClick} content="Export File" className={cn("h-8 w-8 cursor-pointer  hover:bg-background/80", className)} />
-    );
-}
-const DEFAULT_SPAN_CLASS_NAME = 'absolute inset-0 flex items-center justify-center rounded-lg';
-function FlipButton({
-    frontText,
-    backText,
-    transition = { type: 'spring', stiffness: 280, damping: 20 },
-    className,
-    frontClassName,
-    backClassName,
-    from = 'top',
-    ...props
-}: FlipButtonProps) {
-    const isVertical = from === 'top' || from === 'bottom';
-    const rotateAxis = isVertical ? 'rotateX' : 'rotateY';
-
-    const frontOffset = from === 'top' || from === 'left' ? '50%' : '-50%';
-    const backOffset = from === 'top' || from === 'left' ? '-50%' : '50%';
-
-    const buildVariant = (
-        opacity: number,
-        rotation: number,
-        offset: string | null = null,
-    ): Variant => ({
-        opacity,
-        [rotateAxis]: rotation,
-        ...(isVertical && offset !== null ? { y: offset } : {}),
-        ...(!isVertical && offset !== null ? { x: offset } : {}),
-    });
-
-    const frontVariants = {
-        initial: buildVariant(1, 0, '0%'),
-        hover: buildVariant(0, 90, frontOffset),
-    };
-
-    const backVariants = {
-        initial: buildVariant(0, 90, backOffset),
-        hover: buildVariant(1, 0, '0%'),
-    };
-
-    return (
-        <motion.button
-            data-slot="flip-button"
-            initial="initial"
-            whileHover="hover"
-            whileTap={{ scale: 0.95 }}
-            className={cn(
-                'relative inline-block h-10 px-4 py-2 text-sm font-medium cursor-pointer perspective-[1000px] focus:outline-none',
-                className,
-            )}
-            {...props}
-        >
-            <motion.span
-                data-slot="flip-button-front"
-                variants={frontVariants}
-                transition={transition}
-                className={cn(
-                    DEFAULT_SPAN_CLASS_NAME,
-                    'bg-muted text-black dark:text-white',
-                    frontClassName,
-                )}
-            >
-                {frontText}
-            </motion.span>
-            <motion.span
-                data-slot="flip-button-back"
-                variants={backVariants}
-                transition={transition}
-                className={cn(
-                    DEFAULT_SPAN_CLASS_NAME,
-                    'bg-primary text-primary-foreground',
-                    backClassName,
-                )}
-            >
-                {backText}
-            </motion.span>
-            <span className="invisible">{frontText}</span>
-        </motion.button>
-    );
-}
-function FormButton({
-    primary = true, // true | false | dashed
-    variant = "default",
-    align = "default",
-    size = 'sm',
-    loadingText = "Submitting...",
-    className,
-    children,
-    ...props
-}: ButtonNavLinkProps) {
-    const nav = useNavigation()
-
-    const isSubmitting = nav.state === 'submitting';
-
-    const baseClasses = cn(
-        "transition duration-300 border-2 border-border w-[95%] text-center mx-auto text-foreground px-6 py-3 rounded-none",
-        buttonVariants({ variant, size, className, align }),
-        className
-    );
-
-    const primaryClasses =
-        primary === true
-            ? "bg-[#2563eb] hover:bg-[#16171a]"
-            : primary === false
-                ? "bg-[#121212] hover:bg-[#2563eb]"
-                : primary === "dashed"
-                    ? "h-8 border-dashed"
-                    : "";
-    return (
-        <Button
-            type="submit"
-            className={cn(baseClasses, primaryClasses)}
-            disabled={isSubmitting}
-            {...props}
-        >
-            {isSubmitting ? (
-                <div className='flex items-center gap-3'>
-                    <div className="flex items-center justify-center h-full">
-                        <div className='animate-spin rounded-full h-6 w-6 border-t-4 border-primary border-solid'></div>
-                    </div>
-                    <p className='ml-3'>{loadingText}</p>
-                </div>
-            ) : (
-                children
-            )}
-        </Button>
-    );
-};
-function FloatButton({
-    icon,
-    description,
-    tooltip,
-    type = "default",
-    shape = "circle",
-    size = "default",
-    className,
-    onClick,
-    children
-}: FloatButtonProps) {
-    const sizeClasses = {
-        small: "h-10 w-10 text-sm",
-        default: "h-12 w-12 text-base",
-        large: "h-14 w-14 text-lg"
-    }
-
-    const shapeClasses = {
-        circle: "rounded-full",
-        square: "rounded-lg"
-    }
-
-    const typeClasses = {
-        default: "bg-background border-border hover:bg-accent hover:text-accent-foreground",
-        primary: "bg-primary text-primary-foreground hover:bg-primary/90"
-    }
-
-    const buttonContent = (
-        <Button
-            variant={type === "primary" ? "default" : "outline"}
-            size="icon"
-            className={cn(
-                "fixed bottom-6 right-6 shadow-lg border transition-all duration-200 hover:shadow-xl",
-                sizeClasses[size],
-                shapeClasses[shape],
-                type === "default" && typeClasses.default,
-                type === "primary" && typeClasses.primary,
-                className
-            )}
-            onClick={onClick}
-        >
-            <div className="flex flex-col items-center justify-center gap-1">
-                {icon && <span className="flex items-center justify-center">{icon}</span>}
-                {description && (
-                    <span className="text-xs font-medium truncate max-w-full">{description}</span>
-                )}
-            </div>
-            {children}
-        </Button>
-    )
-
-    if (tooltip) {
-        return (
-            <TooltipProvider>
-                <Tooltip>
-                    <TooltipTrigger asChild>{buttonContent}</TooltipTrigger>
-                    <TooltipContent side="left">
-                        <p>{tooltip}</p>
-                    </TooltipContent>
-                </Tooltip>
-            </TooltipProvider>
-        )
-    }
-
-    return buttonContent
-}
-function HoldButton({
-    holdDuration = 3000,
-    onComplete,
-    icon,
-    holdText = "Hold me",
-    releaseText = "Release",
-    holdVariant = "red",
-    className,
-    disabled,
-    ...props
-}: HoldButtonProps) {
-    const [isHolding, setIsHolding] = useState(false)
-    const [progress, setProgress] = useState(0)
-    const startTimeRef = useRef<number | null>(null)
-    const animationFrameRef = useRef<number | null>(null)
-
-    const progressColor = {
-        red: "bg-red-200/30 dark:bg-red-300/30",
-        green: "bg-green-200/30 dark:bg-green-300/30",
-        blue: "bg-blue-200/30 dark:bg-blue-300/30",
-        orange: "bg-orange-200/30 dark:bg-orange-300/30",
-        grey: "bg-gray-200/30 dark:bg-gray-300/30",
-    }[holdVariant || "red"]
-
-    const defaultIcon = {
-        red: <Trash2 className="w-4 h-4" />,
-        green: <ArchiveX className="w-4 h-4" />,
-        blue: <XCircle className="w-4 h-4" />,
-        orange: <AlertCircle className="w-4 h-4" />,
-        grey: <Ban className="w-4 h-4" />,
-    }[holdVariant || "red"]
-
-    useEffect(() => {
-        if (!isHolding) {
-            setProgress(0)
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current)
-            }
-            return
-        }
-
-        const animate = () => {
-            if (startTimeRef.current === null) {
-                startTimeRef.current = Date.now()
-            }
-
-            const elapsed = Date.now() - startTimeRef.current
-            const newProgress = Math.min((elapsed / holdDuration) * 100, 100)
-            setProgress(newProgress)
-
-            if (newProgress >= 100) {
-                setIsHolding(false)
-                startTimeRef.current = null
-                onComplete?.()
-            } else {
-                animationFrameRef.current = requestAnimationFrame(animate)
-            }
-        }
-
-        animationFrameRef.current = requestAnimationFrame(animate)
-
-        return () => {
-            if (animationFrameRef.current) {
-                cancelAnimationFrame(animationFrameRef.current)
-            }
-        }
-    }, [isHolding, holdDuration, onComplete])
-
-    const handleHoldStart = () => {
-        if (disabled) return
-        setIsHolding(true)
-        startTimeRef.current = null
-    }
-
-    const handleHoldEnd = () => {
-        setIsHolding(false)
-        startTimeRef.current = null
-    }
-
-    return (
-        <Button
-            className={cn(holdButtonVariants({ holdVariant }), className)}
-            onMouseDown={handleHoldStart}
-            onMouseUp={handleHoldEnd}
-            onMouseLeave={handleHoldEnd}
-            onTouchStart={handleHoldStart}
-            onTouchEnd={handleHoldEnd}
-            onTouchCancel={handleHoldEnd}
-            disabled={disabled}
-            asChild={false}
-            {...props}
-        >
-            <>
-                <div
-                    className={cn("absolute left-0 top-0 h-full transition-all duration-100", progressColor)}
-                    style={{ width: `${progress}%` }}
-                />
-                <span className="relative z-10 w-full flex items-center justify-center gap-2">
-                    {icon || defaultIcon}
-                    {isHolding ? releaseText : holdText}
-                </span>
-            </>
-        </Button>
-    )
-}
-const InputButtonContext = React.createContext<
-    InputButtonContextType | undefined
->(undefined);
-const useInputButton = (): InputButtonContextType => {
-    const context = React.useContext(InputButtonContext);
-    if (!context) {
-        throw new Error('useInputButton must be used within a InputButton');
-    }
-    return context;
-};
-function InputButtonProvider({
-    className,
-    transition = { type: 'spring', stiffness: 300, damping: 20 },
-    showInput,
-    setShowInput,
-    id,
-    children,
-    ...props
-}: InputButtonProviderProps) {
-    const localId = React.useId();
-    const [localShowInput, setLocalShowInput] = React.useState(false);
-
-    return (
-        <InputButtonContext.Provider
-            value={{
-                showInput: showInput ?? localShowInput,
-                setShowInput: setShowInput ?? setLocalShowInput,
-                transition,
-                id: id ?? localId,
-            }}
-        >
-            <div
-                data-slot="input-button-provider"
-                className={cn(
-                    'relative w-fit flex items-center justify-center h-10',
-                    (showInput || localShowInput) && 'w-full max-w-[400px]',
-                    className,
-                )}
-                {...props}
-            >
-                {children}
-            </div>
-        </InputButtonContext.Provider>
-    );
-}
-function InputButton({ className, ...props }: InputButtonProps) {
-    return (
-        <motion.div
-            data-slot="input-button"
-            className={cn('flex size-full', className)}
-            {...props}
-        />
-    );
-}
-function InputButtonAction({ className, ...props }: InputButtonActionProps) {
-    const { transition, setShowInput, id } = useInputButton();
-
-    return (
-        <motion.button
-            data-slot="input-button-action"
-            className={cn(
-                'bg-background text-sm whitespace-nowrap disabled:pointer-events-none disabled:opacity-50 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive rounded-full border text-background-foreground cursor-pointer pl-4 pr-12 size-full font-medium',
-                className,
-            )}
-            layoutId={`input-button-action-${id}`}
-            transition={transition}
-            onClick={() => setShowInput((prev) => !prev)}
-            {...props}
-        />
-    );
-}
-function InputButtonSubmit({
-    className,
-    children,
-    icon: Icon = ArrowRight,
-    ...props
-}: InputButtonSubmitProps) {
-    const { transition, showInput, setShowInput, id } = useInputButton();
-
-    return (
-        <motion.button
-            data-slot="input-button-submit"
-            layoutId={`input-button-submit-${id}`}
-            transition={transition}
-            className={cn(
-                "z-[1] [&_svg:not([class*='size-'])]:size-4 cursor-pointer disabled:pointer-events-none  disabled:opacity-50 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap bg-primary hover:bg-primary/90 transition-colors text-primary-foreground rounded-full text-sm flex items-center justify-center font-medium absolute inset-y-1 right-1",
-                showInput ? 'px-4' : 'aspect-square',
-                className,
-            )}
-            onClick={() => setShowInput((prev) => !prev)}
-            {...props}
-        >
-            {showInput ? (
-                <motion.span
-                    key="show-button"
-                    initial={{ opacity: 0, scale: 0 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    transition={{ duration: 0.2 }}
-                >
-                    {children}
-                </motion.span>
-            ) : (
-                <motion.span
-                    key="show-icon"
-                    initial={{ opacity: 0, scale: 0 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    transition={{ duration: 0.2 }}
-                >
-                    {React.createElement(Icon as React.ComponentType<any>, { className: "size-4" })}
-                </motion.span>
-            )}
-        </motion.button>
-    );
-}
-function InputButtonInput({ className, ...props }: InputButtonInputProps) {
-    const { transition, showInput, id } = useInputButton();
-
-    return (
-        <AnimatePresence>
-            {showInput && (
-                <div className="absolute inset-0 size-full flex items-center justify-center">
-                    <motion.div
-                        layoutId={`input-button-input-${id}`}
-                        className="size-full flex items-center bg-background rounded-full relative"
-                        transition={transition}
-                    >
-                        <input
-                            data-slot="input-button-input"
-                            className={cn(
-                                'size-full selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground inset-0 pl-4 focus-visible:border-ring border focus-visible:ring-ring/50 focus-visible:ring-[3px] pr-32 py-2 text-sm bg-background rounded-full focus:outline-none absolute shrink-0 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive disabled:pointer-events-none disabled:cursor-not-allowed',
-                                className,
-                            )}
-                            {...props}
-                        />
-                    </motion.div>
-                </div>
-            )}
-        </AnimatePresence>
-    );
-}
-function LiquidButton({
-    className,
-    variant,
-    size,
-    ...props
-}: LiquidButtonProps) {
-    return (
-        <motion.button
-            whileTap={{ scale: 0.95 }}
-            whileHover={{ scale: 1.05 }}
-            className={cn(buttonVariants({ variant, size, className }), "relative inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium cursor-pointer overflow-hidden disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive [background:_linear-gradient(var(--liquid-button-color)_0_0)_no-repeat_calc(200%-var(--liquid-button-fill,0%))_100%/200%_var(--liquid-button-fill,0.2em)] hover:[--liquid-button-fill:100%] hover:[--liquid-button-delay:0.3s] [transition:_background_0.3s_var(--liquid-button-delay,0s),_color_0.3s_var(--liquid-button-delay,0s),_background-position_0.3s_calc(0.3s_-_var(--liquid-button-delay,0s))] focus:outline-none  [--liquid-button-color:var(--primary)]",)}
-            {...props}
-        />
-    );
-}
-function SuccessParticles({ buttonRef, particleCount }: SuccessParticlesProps) {
-    const rect = buttonRef.current?.getBoundingClientRect()
-    if (!rect) return null
-
-    const centerX = rect.left + rect.width / 2
-    const centerY = rect.top + rect.height / 2
-
-    return (
-        <>
-            {[...Array(particleCount)].map((_, i) => (
-                <div
-                    key={i}
-                    className="fixed w-1 h-1 bg-foreground rounded-full pointer-events-none"
-                    style={{
-                        left: centerX,
-                        top: centerY,
-                        animation: `particle-${i} 0.6s ease-out forwards`,
-                        animationDelay: `${i * 0.1}s`,
-                    }}
-                />
-            ))}
-            <style>
-                {[...Array(particleCount)].map((_, i) => `
-          @keyframes particle-${i} {
-            0% {
-              transform: scale(0) translate(0, 0);
-              opacity: 1;
-            }
-            50% {
-              transform: scale(1) translate(${(i % 2 ? 1 : -1) * (Math.random() * 50 + 20)}px, ${-Math.random() * 50 - 20}px);
-              opacity: 1;
-            }
-            100% {
-              transform: scale(0) translate(${(i % 2 ? 1 : -1) * (Math.random() * 50 + 20)}px, ${-Math.random() * 50 - 20}px);
-              opacity: 0;
-            }
-          }
-        `).join('')}
-            </style>
-        </>
-    )
-}
-function ParticleButton({
-    children,
-    onClick,
-    onSuccess,
-    successDuration = 1000,
-    particleCount = 6,
-    showIcon = true,
-    icon,
-    variant,
-    size,
-    align,
-    className,
-    disabled,
-    ...props
-}: ParticleButtonProps) {
-    const [showParticles, setShowParticles] = useState(false)
-    const buttonRef = useRef<HTMLButtonElement>(null)
-
-    const handleClick = async (e: React.MouseEvent<HTMLButtonElement>) => {
-        if (disabled) return
-
-        setShowParticles(true)
-        onClick?.(e)
-        onSuccess?.()
-
-        setTimeout(() => {
-            setShowParticles(false)
-        }, successDuration)
-    }
-
-    const getParticleCount = () => {
-        if (typeof particleCount === 'number') return particleCount
-        switch (particleCount) {
-            case 'low':
-                return 4
-            case 'high':
-                return 10
-            default:
-                return 6
-        }
-    }
-
-    return (
-        <>
-            {showParticles && (
-                <SuccessParticles
-                    buttonRef={buttonRef}
-                    particleCount={getParticleCount()}
-                />
-            )}
-            <Button
-                ref={buttonRef}
-                onClick={handleClick}
-                variant={variant}
-                size={size}
-                align={align}
-                disabled={disabled}
-                className={cn(
-                    particleButtonVariants(), "relative transition-transform duration-100",
-                    showParticles && "scale-95",
-                    className
-                )}
-                {...props}
-            >
-                {children}
-                {showIcon && (icon || <MousePointerClick className="h-4 w-4" />)}
-            </Button>
-        </>
-    )
-}
-const RatingContext = createContext<RatingContextValue | null>(null);
-const useRating = () => {
-    const context = useContext(RatingContext);
-    if (!context) {
-        throw new Error('useRating must be used within a Rating1 component');
-    }
-    return context;
-};
-const RatingButton = ({
-    index: providedIndex,
-    size = 20,
-    className,
-    icon = <StarIcon />,
-}: RatingButtonProps) => {
-    const {
-        value,
-        readOnly,
-        hoverValue,
-        focusedStar,
-        handleValueChange,
-        handleKeyDown,
-        setHoverValue,
-        setFocusedStar,
-    } = useRating();
-
-    const index = providedIndex ?? 0;
-    const isActive = index < (hoverValue ?? focusedStar ?? value ?? 0);
-    let tabIndex = -1;
-
-    if (!readOnly) {
-        tabIndex = value === index + 1 ? 0 : -1;
-    }
-
-    const handleClick = useCallback(
-        (event: MouseEvent<HTMLButtonElement>) => {
-            handleValueChange(event, index + 1);
-        },
-        [handleValueChange, index]
-    );
-
-    const handleMouseEnter = useCallback(() => {
-        if (!readOnly) {
-            setHoverValue(index + 1);
-        }
-    }, [readOnly, setHoverValue, index]);
-
-    const handleFocus = useCallback(() => {
-        setFocusedStar(index + 1);
-    }, [setFocusedStar, index]);
-
-    const handleBlur = useCallback(() => {
-        setFocusedStar(null);
-    }, [setFocusedStar]);
-
-    return (
-        <button
-            className={cn(
-                'rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-                'p-0.5',
-                readOnly && 'cursor-default',
-                className
-            )}
-            disabled={readOnly}
-            onBlur={handleBlur}
-            onClick={handleClick}
-            onFocus={handleFocus}
-            onKeyDown={handleKeyDown}
-            onMouseEnter={handleMouseEnter}
-            tabIndex={tabIndex}
-            type="button"
-        >
-            {cloneElement(icon, {
-                size,
-                className: cn(
-                    'transition-colors duration-200',
-                    isActive && 'fill-current',
-                    !readOnly && 'cursor-pointer'
-                ),
-                'aria-hidden': 'true',
-            })}
-        </button>
-    );
-};
-const Rating = ({
-    value: controlledValue,
-    onValueChange: controlledOnValueChange,
-    defaultValue = 0,
-    onChange,
-    readOnly = false,
-    className,
-    children,
-    ...props
-}: RatingProps) => {
-    const [hoverValue, setHoverValue] = useState<number | null>(null);
-    const [focusedStar, setFocusedStar] = useState<number | null>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-    const [value, onValueChange] = useControllableState({
-        defaultProp: defaultValue,
-        prop: controlledValue,
-        onChange: controlledOnValueChange,
-    });
-
-    const handleValueChange = useCallback(
-        (
-            event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>,
-            newValue: number
-        ) => {
-            if (!readOnly) {
-                onChange?.(event, newValue);
-                onValueChange?.(newValue);
-            }
-        },
-        [readOnly, onChange, onValueChange]
-    );
-
-    const handleKeyDown = useCallback(
-        (event: KeyboardEvent<HTMLButtonElement>) => {
-            if (readOnly) {
-                return;
-            }
-
-            const total = Children.count(children);
-            let newValue = focusedStar !== null ? focusedStar : (value ?? 0);
-
-            switch (event.key) {
-                case 'ArrowRight':
-                    if (event.shiftKey || event.metaKey) {
-                        newValue = total;
-                    } else {
-                        newValue = Math.min(total, newValue + 1);
-                    }
-                    break;
-                case 'ArrowLeft':
-                    if (event.shiftKey || event.metaKey) {
-                        newValue = 1;
-                    } else {
-                        newValue = Math.max(1, newValue - 1);
-                    }
-                    break;
-                default:
-                    return;
-            }
-
-            event.preventDefault();
-            setFocusedStar(newValue);
-            handleValueChange(event, newValue);
-        },
-        [focusedStar, value, children, readOnly, handleValueChange]
-    );
-
-    useEffect(() => {
-        if (focusedStar !== null && containerRef.current) {
-            const buttons = containerRef.current.querySelectorAll('button');
-            buttons[focusedStar - 1]?.focus();
-        }
-    }, [focusedStar]);
-
-    const contextValue: RatingContextValue = {
-        value: value ?? 0,
-        readOnly,
-        hoverValue,
-        focusedStar,
-        handleValueChange,
-        handleKeyDown,
-        setHoverValue,
-        setFocusedStar,
-    };
-
-    return (
-        <RatingContext.Provider value={contextValue}>
-            <div
-                aria-label="Rating1"
-                className={cn('inline-flex items-center gap-0.5', className)}
-                onMouseLeave={() => setHoverValue(null)}
-                ref={containerRef}
-                role="radiogroup"
-                {...props}
-            >
-                {Children.map(children, (child, index) => {
-                    if (!child) {
-                        return null;
-                    }
-
-                    return cloneElement(child as ReactElement<RatingButtonProps>, {
-                        index,
-                    });
-                })}
-            </div>
-        </RatingContext.Provider>
-    );
-};
-function RippleButton({
-    ref,
-    children,
-    onClick,
-    className,
-    rippleClassName,
-    variant,
-    size,
-    scale = 10,
-    transition = { duration: 0.6, ease: 'easeOut' },
-    ...props
-}: RippleButtonProps) {
-    const [ripples, setRipples] = React.useState<Ripple[]>([]);
-    const buttonRef = React.useRef<HTMLButtonElement>(null);
-    React.useImperativeHandle(ref, () => buttonRef.current as HTMLButtonElement);
-
-    const createRipple = React.useCallback(
-        (event: React.MouseEvent<HTMLButtonElement>) => {
-            const button = buttonRef.current;
-            if (!button) return;
-
-            const rect = button.getBoundingClientRect();
-            const x = event.clientX - rect.left;
-            const y = event.clientY - rect.top;
-
-            const newRipple: Ripple = {
-                id: Date.now(),
-                x,
-                y,
-            };
-
-            setRipples((prev) => [...prev, newRipple]);
-
-            setTimeout(() => {
-                setRipples((prev) => prev.filter((r) => r.id !== newRipple.id));
-            }, 600);
-        },
-        [],
-    );
-
-    const handleClick = React.useCallback(
-        (event: React.MouseEvent<HTMLButtonElement>) => {
-            createRipple(event);
-            if (onClick) {
-                onClick(event);
-            }
-        },
-        [createRipple, onClick],
-    );
-
-    return (
-        <motion.button
-            ref={buttonRef}
-            data-slot="ripple-button"
-            onClick={handleClick}
-            whileTap={{ scale: 0.95 }}
-            whileHover={{ scale: 1.05 }}
-            className={cn(buttonVariants({ variant, size, className }))}
-            {...props}
-        >
-            {children}
-            {ripples.map((ripple) => (
-                <motion.span
-                    key={ripple.id}
-                    initial={{ scale: 0, opacity: 0.5 }}
-                    animate={{ scale, opacity: 0 }}
-                    transition={transition}
-                    className={cn(
-                        rippleVariants({ variant, className: rippleClassName }),
-                    )}
-                    style={{
-                        top: ripple.y - 10,
-                        left: ripple.x - 10,
-                    }}
-                />
-            ))}
-        </motion.button>
-    );
-}
-function SocialButton({
-    shareButtons = [
-        { icon: Twitter, label: "Share on Twitter" },
-        { icon: Instagram, label: "Share on Instagram" },
-        { icon: Linkedin, label: "Share on LinkedIn" },
-        { icon: Link, label: "Copy link" },
-    ],
-    label = "Hover me",
-    icon,
-    variant,
-    className,
-    ...props
-}: SocialButtonProps) {
-    const [isVisible, setIsVisible] = useState(false)
-    const [activeIndex, setActiveIndex] = useState<number | null>(null)
-
-    const handleShare = (index: number, onClick?: () => void) => {
-        setActiveIndex(index)
-        onClick?.()
-        setTimeout(() => setActiveIndex(null), 300)
-    }
-
-    const buttonBgClass = variant === "dark"
-        ? "bg-black dark:bg-white text-white dark:text-black hover:bg-gray-900 dark:hover:bg-gray-100"
-        : "bg-white dark:bg-black text-black dark:text-white hover:bg-gray-50 dark:hover:bg-gray-950"
-
-    return (
-        <div
-            className="relative"
-            onMouseEnter={() => setIsVisible(true)}
-            onMouseLeave={() => setIsVisible(false)}
-        >
-            <div
-                className="transition-opacity duration-200"
-                style={{ opacity: isVisible ? 0 : 1 }}
-            >
-                <Button
-                    className={cn(socialButtonVariants({ variant }), className)}
-                    asChild={false}
-                    {...props}
-                >
-                    <span className="flex items-center gap-2">
-                        {icon || <Link className="w-4 h-4" />}
-                        {label}
-                    </span>
-                </Button>
-            </div>
-
-            <div
-                className="absolute top-0 left-0 flex h-10 overflow-hidden transition-all duration-300"
-                style={{
-                    width: isVisible ? `${shareButtons.length * 40}px` : '0px',
-                }}
-            >
-                {shareButtons.map((button, i) => (
-                    <button
-                        type="button"
-                        key={`share-${button.label}`}
-                        aria-label={button.label}
-                        onClick={() => handleShare(i, button.onClick)}
-                        className={cn(
-                            "h-10 w-10 flex items-center justify-center",
-                            buttonBgClass,
-                            i === 0 && "rounded-l-md",
-                            i === shareButtons.length - 1 && "rounded-r-md",
-                            "border-r border-white/10 dark:border-black/10 last:border-r-0",
-                            "outline-none relative overflow-hidden transition-all duration-200"
-                        )}
-                        style={{
-                            opacity: isVisible ? 1 : 0,
-                            transform: isVisible ? 'translateX(0)' : 'translateX(-20px)',
-                            transitionDelay: isVisible ? `${i * 50}ms` : '0ms',
-                        }}
-                    >
-                        <div
-                            className="relative z-10 transition-transform duration-200"
-                            style={{
-                                transform: activeIndex === i ? 'scale(0.85)' : 'scale(1)',
-                            }}
-                        >
-                            <button.icon className="w-4 h-4" />
-                        </div>
-                        <div
-                            className="absolute inset-0 bg-white dark:bg-black transition-opacity duration-200"
-                            style={{
-                                opacity: activeIndex === i ? 0.15 : 0,
-                            }}
-                        />
-                    </button>
-                ))}
-            </div>
-        </div>
-    )
-}
-function SwitchButton({
-    checked = false,
-    onCheckedChange,
-    className,
-    variant = 'default',
-    size = 'md',
-    disabled = false,
-    labels
-}: SwitchButtonProps) {
-    const [isChecked, setIsChecked] = useState(checked);
-
-    const handleToggle = () => {
-        if (disabled) return;
-
-        const newChecked = !isChecked;
-        setIsChecked(newChecked);
-        onCheckedChange?.(newChecked);
-    };
-
-    const sizeClasses = {
-        sm: 'w-16 h-8',
-        md: 'w-20 h-10',
-        lg: 'w-24 h-12'
-    };
-
-    const knobSizeClasses = {
-        sm: 'w-6 h-6',
-        md: 'w-8 h-8',
-        lg: 'w-10 h-10'
-    };
-
-    const variantClasses = {
-        default: {
-            background: isChecked ? 'bg-muted-foreground' : 'bg-muted',
-            knob: 'bg-background',
-            text: 'text-background'
-        },
-        primary: {
-            background: isChecked ? 'bg-primary' : 'bg-muted',
-            knob: 'bg-background',
-            text: 'text-primary-foreground'
-        },
-        secondary: {
-            background: isChecked ? 'bg-secondary' : 'bg-muted',
-            knob: 'bg-background',
-            text: 'text-secondary-foreground'
-        },
-        destructive: {
-            background: isChecked ? 'bg-destructive' : 'bg-muted',
-            knob: 'bg-background',
-            text: 'text-destructive-foreground'
-        }
-    };
-
-    const variantConfig = variantClasses[variant];
-
-    return (
-        <button
-            type="button"
-            role="switch"
-            aria-checked={isChecked}
-            onClick={handleToggle}
-            disabled={disabled}
-            className={cn(
-                'relative inline-flex items-center rounded-full border-2 border-transparent transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-                sizeClasses[size],
-                variantConfig.background,
-                className
-            )}
-        >
-            <span
-                className={cn(
-                    'inline-block transform rounded-full shadow-lg transition-all duration-200',
-                    knobSizeClasses[size],
-                    variantConfig.knob,
-                    isChecked
-                        ? size === 'sm' ? 'translate-x-8' :
-                            size === 'md' ? 'translate-x-10' : 'translate-x-12'
-                        : 'translate-x-1'
-                )}
-            />
-
-            {labels && (
-                <>
-                    <span
-                        className={cn(
-                            'absolute left-1 text-xs font-medium transition-opacity duration-200',
-                            variantConfig.text,
-                            !isChecked ? 'opacity-100' : 'opacity-0'
-                        )}
-                    >
-                        {labels.unchecked}
-                    </span>
-                    <span
-                        className={cn(
-                            'absolute right-1 text-xs font-medium transition-opacity duration-200',
-                            variantConfig.text,
-                            isChecked ? 'opacity-100' : 'opacity-0'
-                        )}
-                    >
-                        {labels.checked}
-                    </span>
-                </>
-            )}
-        </button>
-    );
-}
-const SplitButton = ({
-    label = null,
-    icon,
-    items,
-    onClick,
-    className,
-    containerClassName,
-    variant = "default",
-    align = "default",
-    size = "sm",
-    children,
-    ...props
-}: SplitButtonProps) => {
-    return (
-        <div className={cn("inline-flex", containerClassName)}>
-            <Button
-                onClick={onClick}
-                className={cn("rounded-r-none border-r-0", buttonVariants({ variant, size, className, align }))}
-                {...props}
-            >
-                {children}
-            </Button>
-            <DropdownMenu>
-                <DropdownMenuTrigger asChild>
-                    <Button className={cn("rounded-l-none px-2", buttonVariants({ variant, size, className }))}  >
-                        {label !== null ? (
-                            <>
-                                {label}
-                            </>
-                        ) : (
-                            <ChevronDown className="h-4 w-4" />
-                        )}
-                    </Button>
-                </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="w-48">
-                    {items.map((item, index) => (
-                        <React.Fragment key={index}>
-                            {item.separator && <DropdownMenuSeparator />}
-                            <DropdownMenuItem
-                                onClick={item.command}
-                                className="cursor-pointer"
-
-                            >
-                                {item.icon && <span className="mr-2">{item.icon}</span>}
-                                {item.label}
-                            </DropdownMenuItem>
-                        </React.Fragment>
-                    ))}
-                </DropdownMenuContent>
-            </DropdownMenu>
-        </div>
-    );
-}
-function ToggleButton({
-    checked = false,
-    onChange,
-    disabled = false,
-    className,
-    variant = "default",
-    size = "md",
-    children,
-    ...props
-}: ButtonToggleProps) {
-    const handleClick = () => {
-        if (!disabled && onChange) {
-            onChange(!checked)
-        }
-    }
-
-    const handleKeyDown = (e: React.KeyboardEvent) => {
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault()
-            handleClick()
-        }
-    }
-
-    return (
-        <button
-            type="button"
-            className={cn(
-                toggleButtonVariants({
-                    variant,
-                    size,
-                    checked: checked ? "true" : "false"
-                }),
-                className
-            )}
-            onClick={handleClick}
-            onKeyDown={handleKeyDown}
-            disabled={disabled}
-            role="switch"
-            aria-checked={checked}
-            aria-disabled={disabled}
-            {...props}
-        >
-            {children}
-        </button>
-    )
-}
-SplitButton.displayName = "SplitButton"
-function SlideButton({
-    className,
-    variant,
-    size,
-    text = "Browse Components",
-    hoverText,
-    to = "/",
-    prefetch = "intent",
-    ...props
-}: Omit<React.ComponentProps<typeof Link>, 'to'> &
-    VariantProps<typeof slideTextButtonVariants> & {
-        text?: string
-        hoverText?: string
-        to?: string
-    }) {
-    const slideText = hoverText ?? text
-
-    return (
-        <Link
-            data-slot="slide-text-button"
-            className={cn(slideTextButtonVariants({ variant, size, className }))}
-            to={to}
-            prefetch={prefetch}
-            {...props}
-        >
-            <span className="group-hover:-translate-y-full relative inline-block transition-transform duration-300 ease-in-out">
-                <span className="flex items-center gap-2 opacity-100 transition-opacity duration-300 group-hover:opacity-0">
-                    <span className="font-medium">{text}</span>
-                </span>
-                <span className="absolute top-full left-0 flex items-center gap-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                    <span className="font-medium">{slideText}</span>
-                </span>
-            </span>
-        </Link>
-    )
-}
-const TextRevealButton = React.forwardRef<
-    HTMLButtonElement,
-    TextRevealButtonProps
->(({
-    text = "shadcn.io",
-    revealColor = "#37FF8B",
-    strokeColor = "rgba(100, 100, 100, 0.7)",
-    className,
-    style,
-    ...props
-}, ref) => {
-    return (
-        <button
-            ref={ref}
-            className={cn(
-                "group relative cursor-pointer bg-transparent border-none p-0 m-0 h-auto font-['Arial'] uppercase",
-                className
-            )}
-            style={{
-                fontSize: '2em',
-                letterSpacing: '3px',
-                color: 'transparent',
-                WebkitTextStroke: `1px ${strokeColor}`,
-                ...style,
-            }}
-            {...props}
-        >
-            <span>
-                &nbsp;{text}&nbsp;
-            </span>
-            <span
-                aria-hidden="true"
-                className="absolute inset-0 w-0 overflow-hidden transition-all duration-500 group-hover:w-full group-hover:[filter:drop-shadow(0_0_23px_#37FF8B)]"
-                style={{
-                    color: revealColor,
-                    borderRight: `6px solid ${revealColor}`,
-                    WebkitTextStroke: `1px ${revealColor}`,
-                }}
-            >
-                &nbsp;{text}&nbsp;
-            </span>
-        </button>
-    );
-});
-TextRevealButton.displayName = "TextRevealButton";
-const ShimmerButton = React.forwardRef<
-    HTMLButtonElement,
-    ShimmerButtonProps
->(
-    (
-        {
-            shimmerColor = "#ffffff",
-            shimmerSize = "0.05em",
-            shimmerDuration = "3s",
-            borderRadius = "100px",
-            background = "rgba(0, 0, 0, 1)",
-            className,
-            children,
-            ...props
-        },
-        ref
-    ) => {
-        return (
-            <button
-                style={
-                    {
-                        "--spread": "90deg",
-                        "--shimmer-color": shimmerColor,
-                        "--radius": borderRadius,
-                        "--speed": shimmerDuration,
-                        "--cut": shimmerSize,
-                        "--bg": background,
-                    } as CSSProperties
-                }
-                className={cn(
-                    "group relative z-0 flex cursor-pointer items-center justify-center overflow-hidden [border-radius:var(--radius)] border border-white/10 px-6 py-3 whitespace-nowrap text-white [background:var(--bg)]",
-                    "transform-gpu transition-transform duration-300 ease-in-out active:translate-y-px",
-                    className
-                )}
-                ref={ref}
-                {...props}
-            >
-                <div
-                    className={cn(
-                        "-z-30 blur-[2px]",
-                        "[container-type:size] absolute inset-0 overflow-visible"
-                    )}
-                >
-                    <div className="animate-shimmer-slide absolute inset-0 [aspect-ratio:1] h-[100cqh] [border-radius:0] [mask:none]">
-                        <div className="animate-spin-around absolute -inset-full w-auto [translate:0_0] rotate-0 [background:conic-gradient(from_calc(270deg-(var(--spread)*0.5)),transparent_0,var(--shimmer-color)_var(--spread),transparent_var(--spread))]" />
-                    </div>
-                </div>
-                {children}
-                <div
-                    className={cn(
-                        "absolute inset-0 size-full",
-                        "rounded-2xl px-4 py-1.5 text-sm font-medium shadow-[inset_0_-8px_10px_#ffffff1f]",
-                        "transform-gpu transition-all duration-300 ease-in-out",
-                        "group-hover:shadow-[inset_0_-6px_10px_#ffffff3f]",
-                        "group-active:shadow-[inset_0_-10px_10px_#ffffff3f]"
-                    )}
-                />
-                <div
-                    className={cn(
-                        "absolute [inset:var(--cut)] -z-20 [border-radius:var(--radius)] [background:var(--bg)]"
-                    )}
-                />
-            </button>
-        )
-    }
-)
-function TooltipButton({ icon, content, onClick = null, size = 'icon', variant = 'ghost', className }) {
-    return (
-        <TooltipProvider>
-            <Tooltip>
-                <TooltipTrigger asChild>
-                    <Button
-                        size={size}
-                        variant={variant}
-                        className={cn('', className)}
-                        onClick={onClick}
-                    >
-                        {icon}
-                    </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                    <p>{content}</p>
-                </TooltipContent>
-            </Tooltip>
-        </TooltipProvider>
-    );
-}
-const RatingContext1 = createContext<RatingContextValue | null>(null);
-const useRating1 = () => {
-    const context = useContext(RatingContext1);
-    if (!context) {
-        throw new Error('useRating1 must be used within a Rate component');
-    }
-    return context;
-};
-const RatingButton1 = ({
-    index: providedIndex,
-    size = 20,
-    className,
-    icon = <StarIcon />,
-}: RatingButtonProps) => {
-    const {
-        value,
-        readOnly,
-        hoverValue,
-        focusedStar,
-        handleValueChange,
-        handleKeyDown,
-        setHoverValue,
-        setFocusedStar,
-    } = useRating1();
-    const index = providedIndex ?? 0;
-    const isActive = index < (hoverValue ?? focusedStar ?? value ?? 0);
-    let tabIndex = -1;
-    if (!readOnly) {
-        tabIndex = value === index + 1 ? 0 : -1;
-    }
-    const handleClick = useCallback(
-        (event: MouseEvent<HTMLButtonElement>) => {
-            handleValueChange(event, index + 1);
-        },
-        [handleValueChange, index]
-    );
-    const handleMouseEnter = useCallback(() => {
-        if (!readOnly) {
-            setHoverValue(index + 1);
-        }
-    }, [readOnly, setHoverValue, index]);
-    const handleFocus = useCallback(() => {
-        setFocusedStar(index + 1);
-    }, [setFocusedStar, index]);
-    const handleBlur = useCallback(() => {
-        setFocusedStar(null);
-    }, [setFocusedStar]);
-    return (
-        <button
-            className={cn(
-                'rounded-full focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-                'p-0.5',
-                readOnly && 'cursor-default',
-                className
-            )}
-            disabled={readOnly}
-            onBlur={handleBlur}
-            onClick={handleClick}
-            onFocus={handleFocus}
-            onKeyDown={handleKeyDown}
-            onMouseEnter={handleMouseEnter}
-            tabIndex={tabIndex}
-            type="button"
-        >
-            {cloneElement(icon, {
-                size,
-                className: cn(
-                    'transition-colors duration-200',
-                    isActive && 'fill-current',
-                    !readOnly && 'cursor-pointer'
-                ),
-                'aria-hidden': 'true',
-            })}
-        </button>
-    );
-};
-const Rate1 = ({
-    value: controlledValue,
-    onValueChange: controlledOnValueChange,
-    defaultValue = 0,
-    onChange,
-    readOnly = false,
-    className,
-    children,
-    ...props
-}: RatingProps) => {
-    const [hoverValue, setHoverValue] = useState<number | null>(null);
-    const [focusedStar, setFocusedStar] = useState<number | null>(null);
-    const containerRef = useRef<HTMLDivElement>(null);
-    const [value, onValueChange] = useControllableState({
-        defaultProp: defaultValue,
-        prop: controlledValue,
-        onChange: controlledOnValueChange,
-    });
-    const handleValueChange = useCallback(
-        (
-            event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>,
-            newValue: number
-        ) => {
-            if (!readOnly) {
-                onChange?.(event, newValue);
-                onValueChange?.(newValue);
-            }
-        },
-        [readOnly, onChange, onValueChange]
-    );
-    const handleKeyDown = useCallback(
-        (event: KeyboardEvent<HTMLButtonElement>) => {
-            if (readOnly) {
-                return;
-            }
-            const total = Children.count(children);
-            let newValue = focusedStar !== null ? focusedStar : (value ?? 0);
-            switch (event.key) {
-                case 'ArrowRight':
-                    if (event.shiftKey || event.metaKey) {
-                        newValue = total;
-                    } else {
-                        newValue = Math.min(total, newValue + 1);
-                    }
-                    break;
-                case 'ArrowLeft':
-                    if (event.shiftKey || event.metaKey) {
-                        newValue = 1;
-                    } else {
-                        newValue = Math.max(1, newValue - 1);
-                    }
-                    break;
-                default:
-                    return;
-            }
-            event.preventDefault();
-            setFocusedStar(newValue);
-            handleValueChange(event, newValue);
-        },
-        [focusedStar, value, children, readOnly, handleValueChange]
-    );
-    useEffect(() => {
-        if (focusedStar !== null && containerRef.current) {
-            const buttons = containerRef.current.querySelectorAll('button');
-            buttons[focusedStar - 1]?.focus();
-        }
-    }, [focusedStar]);
-    const contextValue: RatingContextValue = {
-        value: value ?? 0,
-        readOnly,
-        hoverValue,
-        focusedStar,
-        handleValueChange,
-        handleKeyDown,
-        setHoverValue,
-        setFocusedStar,
-    };
-    return (
-        <RatingContext1.Provider value={contextValue}>
-            <div
-                aria-label="Rate"
-                className={cn('inline-flex items-center gap-0.5', className)}
-                onMouseLeave={() => setHoverValue(null)}
-                ref={containerRef}
-                role="radiogroup"
-                {...props}
-            >
-                {Children.map(children, (child, index) => {
-                    if (!child) {
-                        return null;
-                    }
-                    return cloneElement(child as ReactElement<RatingButtonProps>, {
-                        index,
-                    });
-                })}
-            </div>
-        </RatingContext1.Provider>
-    );
-};
-
-export function ButtonXDemo() {
-    const [clicked, setClicked] = useState("")
-    const [rating, setRating] = useState(0)
-    const [switchChecked, setSwitchChecked] = useState(false)
-    const [toggleChecked, setToggleChecked] = useState(false)
-
-    return (
-        <div className="flex flex-col space-y-8 p-6 max-w-6xl mx-auto">
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Button Variants</h2>
-                <div className="flex gap-4 flex-wrap items-center">
-                    <Button variant="default">Default</Button>
-                    <Button variant="destructive">Destructive</Button>
-                    <Button variant="outline">Outline</Button>
-                    <Button variant="secondary">Secondary</Button>
-                    <Button variant="ghost">Ghost</Button>
-                    <Button variant="link">Link</Button>
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Command Button Variants</h2>
-                <div className="flex gap-4 flex-wrap items-center">
-                    <CommandButton
-                        variant="default"
-                        onClick={() => setClicked("Default clicked")}
-                    >
-                        CMD + K
-                    </CommandButton>
-                    <CommandButton
-                        variant="primary"
-                        onClick={() => setClicked("Primary clicked")}
-                    >
-                        CMD + P
-                    </CommandButton>
-                    <CommandButton
-                        variant="secondary"
-                        onClick={() => setClicked("Secondary clicked")}
-                    >
-                        CMD + S
-                    </CommandButton>
-                </div>
-                {clicked && (
-                    <p className="mt-4 text-sm text-muted-foreground">{clicked}</p>
-                )}
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Attract Button</h2>
-                <div className="flex justify-center gap-4">
-                    <AttractButton attractVariant="default" />
-                    <AttractButton attractVariant="violet" />
-                    <AttractButton attractVariant="blue" />
-                    <AttractButton attractVariant="green" />
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Copy Button</h2>
-                <div className="flex justify-center gap-4">
-                    <CopyButton content="Hello World!" />
-                    <CopyButton content="Copy this text" variant="outline" />
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Flip Button</h2>
-                <div className="flex justify-center gap-4">
-                    <FlipButton frontText="Hover Me" backText="Flipped!" />
-                    <FlipButton frontText="Left Flip" backText="Success!" from="left" />
-                    <FlipButton frontText="Right Flip" backText="Nice!" from="right" />
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Float Button</h2>
-                <FloatButton
-                    icon={<MousePointerClick className="h-4 w-4" />}
-                    tooltip="Click me!"
-                    onClick={() => alert("Float button clicked!")}
-                />
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Hold Button</h2>
-                <div className="flex justify-center gap-4">
-                    <HoldButton
-                        holdVariant="red"
-                        onComplete={() => alert("Hold completed!")}
-                    />
-                    <HoldButton
-                        holdVariant="green"
-                        holdText="Hold to Archive"
-                        onComplete={() => alert("Archived!")}
-                    />
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Input Button</h2>
-                <div className="flex justify-center">
-                    <InputButtonProvider>
-                        <InputButton>
-                            <InputButtonAction>Enter your email</InputButtonAction>
-                            <InputButtonInput placeholder="email@example.com" />
-                            <InputButtonSubmit>Submit</InputButtonSubmit>
-                        </InputButton>
-                    </InputButtonProvider>
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Liquid Button</h2>
-                <div className="flex justify-center gap-4">
-                    <LiquidButton>Hover Me</LiquidButton>
-                    <LiquidButton variant="outline">Liquid Effect</LiquidButton>
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Particle Button</h2>
-                <div className="flex justify-center gap-4">
-                    <ParticleButton
-                        onSuccess={() => console.log("Success!")}
-                        particleCount="low"
-                    >
-                        Low Particles
-                    </ParticleButton>
-                    <ParticleButton
-                        onSuccess={() => console.log("Success!")}
-                        particleCount={6}
-                    >
-                        Medium Particles
-                    </ParticleButton>
-                    <ParticleButton
-                        onSuccess={() => console.log("Success!")}
-                        particleCount="high"
-                    >
-                        High Particles
-                    </ParticleButton>
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Rating Component</h2>
-                <div className="flex justify-center flex-col items-center gap-4">
-                    <Rating
-                        value={rating}
-                        onValueChange={(value) => setRating(value)}
-                    >
-                        {Array.from({ length: 5 }).map((_, index) => (
-                            <RatingButton key={index} />
-                        ))}
-                    </Rating>
-                    <p className="text-sm text-muted-foreground">
-                        Current rating: {rating} stars
-                    </p>
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Ripple Button</h2>
-                <div className="flex justify-center gap-4">
-                    <RippleButton>Click Me</RippleButton>
-                    <RippleButton variant="outline">Ripple Effect</RippleButton>
-                    <RippleButton variant="secondary">Secondary Ripple</RippleButton>
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Social Button</h2>
-                <div className="flex justify-center gap-4">
-                    <SocialButton variant="light" />
-                    <SocialButton variant="dark" />
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Split Button</h2>
-                <div className="flex justify-center">
-                    <SplitButton
-                        onClick={() => alert("Primary action")}
-                        items={[
-                            { label: "Action 1", command: () => alert("Action 1") },
-                            { label: "Action 2", command: () => alert("Action 2") },
-                            { separator: true },
-                            { label: "Delete", command: () => alert("Delete") },
-                        ]}
-                    >
-                        Primary Action
-                    </SplitButton>
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Switch Button</h2>
-                <div className="flex justify-center gap-4 flex-col items-center">
-                    <SwitchButton
-                        checked={switchChecked}
-                        onCheckedChange={setSwitchChecked}
-                        labels={{ checked: "ON", unchecked: "OFF" }}
-                    />
-                    <p className="text-sm text-muted-foreground">
-                        Switch is: {switchChecked ? "ON" : "OFF"}
-                    </p>
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Toggle Button</h2>
-                <div className="flex justify-center gap-4 flex-col items-center">
-                    <ToggleButton
-                        checked={toggleChecked}
-                        onChange={setToggleChecked}
-                    >
-                        Toggle Me
-                    </ToggleButton>
-                    <p className="text-sm text-muted-foreground">
-                        Toggle is: {toggleChecked ? "ON" : "OFF"}
-                    </p>
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Slide Button</h2>
-                <div className="flex justify-center gap-4">
-                    <SlideButton text="Hover Me" hoverText="Slide Effect!" />
-                    <SlideButton text="Components" hoverText="Browse Now!" variant="ghost" />
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Text Reveal Button</h2>
-                <div className="flex justify-center">
-                    <TextRevealButton text="HOVER ME" />
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Shimmer Button</h2>
-                <div className="flex justify-center gap-4">
-                    <ShimmerButton>Shimmer Effect</ShimmerButton>
-                    <ShimmerButton shimmerColor="#00ff00">Green Shimmer</ShimmerButton>
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Tooltip Button</h2>
-                <div className="flex justify-center gap-4">
-                    <TooltipButton
-                        icon={<MousePointerClick className="h-4 w-4" />}
-                        content="Click me!"
-                        onClick={() => alert("Clicked!")}
-                    />
-                    <TooltipButton
-                        icon={<Download className="h-4 w-4" />}
-                        content="Download"
-                        onClick={() => alert("Download clicked!")}
-                    />
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Button Effects</h2>
-                <div className="flex gap-4 flex-wrap items-center">
-                    <Button effect="ringHover">Ring Hover</Button>
-                    <Button effect="shine">Shine</Button>
-                    <Button effect="shineHover">Shine Hover</Button>
-                    <Button effect="gooeyRight">Gooey Right</Button>
-                    <Button effect="gooeyLeft">Gooey Left</Button>
-                    <Button effect="hoverUnderline">Hover Underline</Button>
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Button Sizes</h2>
-                <div className="flex gap-4 flex-wrap items-center">
-                    <Button size="sm">Small</Button>
-                    <Button size="default">Default</Button>
-                    <Button size="lg">Large</Button>
-                    <Button size="icon">
-                        <MousePointerClick className="h-4 w-4" />
-                    </Button>
-                </div>
-            </div>
-
-            <div>
-                <h2 className="text-2xl font-bold mb-4">Advanced Variants</h2>
-                <div className="flex gap-4 flex-wrap items-center">
-                    <Button variant="elevated">Elevated</Button>
-                    <Button variant="filled">Filled</Button>
-                    <Button variant="tonal">Tonal</Button>
-                    <Button variant="soft">Soft</Button>
-                    <Button variant="glass">Glass</Button>
-                    <Button variant="success">Success</Button>
-                    <Button variant="warning">Warning</Button>
-                    <Button variant="info">Info</Button>
-                    <Button variant="shine">Shine</Button>
-                    <Button variant="pulse">Pulse</Button>
-                </div>
-            </div>
-        </div>
-    )
-}
-
-
-
-const rippleVariants = cva('absolute rounded-full size-5 pointer-events-none', {
-    variants: {
-        variant: {
-            default: 'bg-primary-foreground',
-            destructive: 'bg-destructive',
-            outline: 'bg-input',
-            secondary: 'bg-secondary',
-            ghost: 'bg-accent',
-        },
-    },
-    defaultVariants: {
-        variant: 'default',
-    },
-});
-interface Particle {
-    id: number
-    x: number
-    y: number
-}
-type FlipDirection = 'top' | 'bottom' | 'left' | 'right';
-
-type FlipButtonProps = HTMLMotionProps<'button'> & {
-    frontText: string;
-    backText: string;
-    transition?: Transition;
-    frontClassName?: string;
-    backClassName?: string;
-    from?: FlipDirection;
-};
-type InputButtonContextType = {
-    showInput: boolean;
-    setShowInput: React.Dispatch<React.SetStateAction<boolean>>;
-    transition: Transition;
-    id: string;
-};
-type InputButtonProviderProps = React.ComponentProps<'div'> &
-    Partial<InputButtonContextType>;
-interface AttractButtonProps
-    extends Omit<React.ComponentProps<"button">, "children">,
-    VariantProps<typeof attractButtonVariants> {
-    particleCount?: number
-    attractRadius?: number
-    icon?: React.ReactNode
-    activeText?: string
-    inactiveText?: string
-}
-type CopyButtonProps = Omit<HTMLMotionProps<'button'>, 'children' | 'onCopy'> &
-    VariantProps<typeof buttonVariants> & {
-        content?: string;
-        delay?: number;
-        onCopy?: (content: string) => void;
-        isCopied?: boolean;
-        onCopyChange?: (isCopied: boolean) => void;
-    };
-
-interface FloatButtonProps {
-    icon?: React.ReactNode
-    description?: string
-    tooltip?: string
-    type?: "default" | "primary"
-    shape?: "circle" | "square"
-    size?: "small" | "default" | "large"
-    className?: string
-    onClick?: () => void
-    children?: React.ReactNode
-}
-type InputButtonInputProps = React.ComponentProps<'input'>;
-type InputButtonSubmitProps = HTMLMotionProps<'button'> & {
-    icon?: React.ElementType;
-};
-type InputButtonProps = HTMLMotionProps<'div'>;
-type InputButtonActionProps = HTMLMotionProps<'button'>;
-type LiquidButtonProps = HTMLMotionProps<'button'> &
-    VariantProps<typeof buttonVariants>;
-interface ParticleButtonProps
-    extends Omit<React.ComponentProps<"button">, "onClick">,
-    VariantProps<typeof buttonVariants> {
-    onSuccess?: () => void
-    successDuration?: number
-    particleCount?: number
-    showIcon?: boolean
-    icon?: React.ReactNode
-}
-interface SuccessParticlesProps {
-    buttonRef: React.RefObject<HTMLButtonElement>
-    particleCount: number
-}
-type RatingButtonProps = LucideProps & {
-    index?: number;
-    icon?: ReactElement<LucideProps>;
-};
-type RatingProps = {
-    defaultValue?: number;
-    value?: number;
-    onChange?: (
-        event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>,
-        value: number
-    ) => void;
-    onValueChange?: (value: number) => void;
-    readOnly?: boolean;
-    className?: string;
-    children?: ReactNode;
-};
-
-type Ripple = {
-    id: number;
-    x: number;
-    y: number;
-};
-
-type RippleButtonProps = HTMLMotionProps<'button'> & {
-    children: React.ReactNode;
-    rippleClassName?: string;
-    scale?: number;
-    transition?: Transition;
-} & VariantProps<typeof buttonVariants>;
-interface ShimmerButtonProps extends ComponentPropsWithoutRef<"button"> {
-    shimmerColor?: string
-    shimmerSize?: string
-    borderRadius?: string
-    shimmerDuration?: string
-    background?: string
-    className?: string
-    children?: React.ReactNode
-}
-const slideTextButtonVariants = cva(
-    "group relative inline-flex items-center justify-center overflow-hidden rounded-lg font-medium text-md tracking-tighter transition-all duration-300 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50",
-    {
-        variants: {
-            variant: {
-                default:
-                    "bg-black text-white hover:bg-black/90 dark:bg-white dark:text-black dark:hover:bg-white/90",
-                ghost:
-                    "border border-black/10 text-black hover:bg-black/5 dark:border-white/10 dark:text-white dark:hover:bg-white/5",
-            },
-            size: {
-                sm: "h-8 px-6 text-sm min-w-[180px]",
-                default: "h-10 px-8 md:min-w-56",
-                lg: "h-12 px-10 text-lg min-w-[280px]",
-            },
-        },
-        defaultVariants: {
-            variant: "default",
-            size: "default",
-        },
-    }
-)
-const socialButtonVariants = cva(
-    "min-w-40 relative transition-colors duration-200",
-    {
-        variants: {
-            variant: {
-                light: "bg-white dark:bg-black hover:bg-gray-50 dark:hover:bg-gray-950 text-black dark:text-white border border-black/10 dark:border-white/10",
-                dark: "bg-black dark:bg-white hover:bg-gray-900 dark:hover:bg-gray-100 text-white dark:text-black border border-white/10 dark:border-black/10",
-                outline: "bg-transparent hover:bg-accent text-foreground border border-border",
-            },
-        },
-        defaultVariants: {
-            variant: "light",
-        },
-    }
-)
-
-interface ShareButton {
-    icon: React.ComponentType<{ className?: string }>
-    label: string
-    onClick?: () => void
-}
-
-interface SocialButtonProps
-    extends Omit<React.ComponentProps<"button">, "children">,
-    VariantProps<typeof socialButtonVariants> {
-    shareButtons?: ShareButton[]
-    label?: string
-    icon?: React.ReactNode
-}
-interface SplitButtonItem {
-    label: string;
-    icon?: React.ReactNode;
-    command?: () => void;
-    separator?: boolean;
-}
-
-interface SplitButtonProps {
-    label: string;
-    icon?: React.ReactNode;
-    items: SplitButtonItem[];
-    onClick?: () => void;
-    className?: string;
-    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost";
-    size?: "default" | "sm" | "lg" | "icon";
-    disabled?: boolean;
-    align?: "left" | "middle" | "right"
-}
-interface SwitchButtonProps {
-    checked?: boolean;
-    onCheckedChange?: (checked: boolean) => void;
-    className?: string;
-    variant?: 'default' | 'primary' | 'secondary' | 'destructive';
-    size?: 'sm' | 'md' | 'lg';
-    disabled?: boolean;
-    labels?: {
-        checked: string;
-        unchecked: string;
-    };
-}
-interface TextRevealButtonProps
-    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    text?: string;
-    revealColor?: string;
-    strokeColor?: string;
-}
-interface ButtonToggleProps {
-    checked?: boolean
-    onChange?: (checked: boolean) => void
-    disabled?: boolean
-    className?: string
-    variant?: "default" | "outline" | "ghost"
-    size?: "sm" | "md" | "lg" | "icon"
-    children?: React.ReactNode
-}
-const toggleButtonVariants = cva(
-    "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-    {
-        variants: {
-            variant: {
-                default: "",
-                outline: "",
-                ghost: "",
-            },
-            size: {
-                sm: "h-8 px-3 text-xs",
-                md: "h-10 px-4 py-2 text-sm",
-                lg: "h-12 px-6 text-base",
-            },
-            checked: {
-                true: "",
-                false: "",
-            },
-        },
-        compoundVariants: [
-            // Default variant - checked state
-            {
-                variant: "default",
-                checked: true,
-                class: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-            },
-            // Default variant - unchecked state
-            {
-                variant: "default",
-                checked: false,
-                class: "bg-background text-foreground border border-input shadow-sm hover:bg-accent hover:text-accent-foreground",
-            },
-            // Outline variant - checked state
-            {
-                variant: "outline",
-                checked: true,
-                class: "border border-primary bg-background text-primary shadow-sm hover:bg-accent",
-            },
-            // Outline variant - unchecked state
-            {
-                variant: "outline",
-                checked: false,
-                class: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-            },
-            // Ghost variant - checked state
-            {
-                variant: "ghost",
-                checked: true,
-                class: "bg-accent text-accent-foreground hover:bg-accent/80",
-            },
-            // Ghost variant - unchecked state
-            {
-                variant: "ghost",
-                checked: false,
-                class: "hover:bg-accent hover:text-accent-foreground",
-            },
-        ],
-        defaultVariants: {
-            variant: "default",
-            size: "md",
-            checked: false,
-        },
-    }
-)
-
-type RatingContextValue = {
-    value: number;
-    readOnly: boolean;
-    hoverValue: number | null;
-    focusedStar: number | null;
-    handleValueChange: (
-        event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>,
-        value: number
-    ) => void;
-    handleKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
-    setHoverValue: (value: number | null) => void;
-    setFocusedStar: (value: number | null) => void;
-};