@catalystsoftware/ui 1.0.2 → 1.0.5

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

@@ -0,0 +1,2857 @@
+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;
+};