@catalystsoftware/ui 1.0.5 → 1.0.7

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

@@ -1,847 +0,0 @@
-import React, { useState } from 'react'
-import { cva, type VariantProps } from 'class-variance-authority'
-import { cn } from '~/components/catalyst-ui'
-import { 
-  ButtonGroup,
-  ButtonGroupText,
-  ButtonGroupSeparator 
-} from '~/components/catalyst-ui'
-import { Button } from '~/components/catalyst-ui'
-import { 
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent 
-} from '~/components/catalyst-ui'
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem
-} from '~/components/catalyst-ui'
-import {
-  DownloadIcon,
-  HeartIcon,
-  MousePointerIcon,
-  SquareIcon,
-  CropIcon,
-  CopyIcon,
-  EllipsisVerticalIcon,
-  SkipBackIcon,
-  PlayIcon,
-  PauseIcon,
-  SkipForwardIcon,
-  ZoomOutIcon,
-  ZoomInIcon,
-  MinusIcon,
-  PlusIcon,
-  ExternalLinkIcon,
-  SquarePenIcon,
-  Trash2Icon,
-  FlipHorizontalIcon,
-  FlipVerticalIcon,
-  ChevronDownIcon,
-  SettingsIcon,
-  BoxIcon,
-  ChartBarBigIcon,
-  InboxIcon,
-  ArchiveIcon,
-  SendHorizonalIcon,
-  ThumbsUpIcon,
-  ThumbsDownIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-
-/**
-* ★ ━━━━ ☆ ━━━━ ButtonGroupX ━━━━ ☆ ━━━━ ★
-* type ButtonGroupXType = 
-*   | 'download' | 'like' | 'tooltip' | 'rounded' | 'social' | 'zoom'        // Interactive Groups
-*   | 'number' | 'preview' | 'actions' | 'basic' | 'dropdown'                // Functional Groups
-*   | 'ghost' | 'reveal' | 'shine'                                           // Visual Styles
-* 
-* ★ ━━━━ ☆ ━━━━ USAGE ━━━━ ☆ ━━━━ ★
-* 
-* ★ ━━━━━━━━━ Download Button Group ━━━━━━━━━ ★
-* ```jsx
-* <ButtonGroupX buttonGroup="download">
-*   <ButtonGroupXWrapper count="15k" />
-* </ButtonGroupX>
-* ```
-* 
-* ★ ━━━━━━━━━ Like Button Group ━━━━━━━━━ ★
-* ```jsx
-* <ButtonGroupX buttonGroup="like">
-*   <ButtonGroupXWrapper 
-*     isLiked={true}
-*     likedCount={46}
-*     unlikedCount={45}
-*     onLikeChange={(liked) => console.log('Liked:', liked)}
-*   />
-* </ButtonGroupX>
-* ```
-* 
-* ★ ━━━━━━━━━ Tooltip Button Group ━━━━━━━━━ ★
-* ```jsx
-* <ButtonGroupX buttonGroup="tooltip">
-*   <ButtonGroupXWrapper />
-* </ButtonGroupX>
-* ```
-* 
-* ★ ━━━━━━━━━ Rounded Button Group ━━━━━━━━━ ★
-* ```jsx
-* <ButtonGroupX buttonGroup="rounded">
-*   <ButtonGroupXWrapper />
-* </ButtonGroupX>
-* ```
-* 
-* ★ ━━━━━━━━━ Social Media Button Group ━━━━━━━━━ ★
-* ```jsx
-* <ButtonGroupX buttonGroup="social">
-*   <ButtonGroupXWrapper />
-* </ButtonGroupX>
-* ```
-* 
-* ★ ━━━━━━━━━ Zoom Button Group ━━━━━━━━━ ★
-* ```jsx
-* <ButtonGroupX buttonGroup="zoom">
-*   <ButtonGroupXWrapper 
-*     zoom={95}
-*     onZoomChange={(zoom) => console.log('Zoom:', zoom)}
-*   />
-* </ButtonGroupX>
-* ```
-* 
-* ★ ━━━━━━━━━ Number Button Group ━━━━━━━━━ ★
-* ```jsx
-* <ButtonGroupX buttonGroup="number">
-*   <ButtonGroupXWrapper 
-*     value={216}
-*     unit="px"
-*     onValueChange={(val) => console.log('Value:', val)}
-*   />
-* </ButtonGroupX>
-* ```
-* 
-* ★ ━━━━━━━━━ Preview Button Group ━━━━━━━━━ ★
-* ```jsx
-* <ButtonGroupX buttonGroup="preview">
-*   <ButtonGroupXWrapper />
-* </ButtonGroupX>
-* ```
-* 
-* ★ ━━━━━━━━━ Actions Button Group ━━━━━━━━━ ★
-* ```jsx
-* <ButtonGroupX buttonGroup="actions">
-*   <ButtonGroupXWrapper />
-* </ButtonGroupX>
-* ```
-* 
-* ★ ━━━━━━━━━ Basic Button Group ━━━━━━━━━ ★
-* ```jsx
-* <ButtonGroupX buttonGroup="basic">
-*   <ButtonGroupXWrapper />
-* </ButtonGroupX>
-* ```
-* 
-* ★ ━━━━━━━━━ Dropdown Button Group ━━━━━━━━━ ★
-* ```jsx
-* <ButtonGroupX buttonGroup="dropdown">
-*   <ButtonGroupXWrapper 
-*     options={[
-*       { label: 'Merge Pull Request', description: 'All commits will be added to the base branch' },
-*       { label: 'Squash and Merge', description: 'The commits will be combined into one commit' },
-*       { label: 'Rebase and Merge', description: 'The commits will be rebased and added' },
-*     ]}
-*     selectedIndex="0"
-*     onOptionChange={(index) => console.log('Selected:', index)}
-*   />
-* </ButtonGroupX>
-* ```
-* 
-* ★ ━━━━━━━━━ Ghost Button Group ━━━━━━━━━ ★
-* ```jsx
-* <ButtonGroupX buttonGroup="ghost">
-*   <ButtonGroupXWrapper />
-* </ButtonGroupX>
-* ```
-* 
-* ★ ━━━━━━━━━ Reveal Button Group ━━━━━━━━━ ★
-* ```jsx
-* <ButtonGroupX buttonGroup="reveal">
-*   <ButtonGroupXWrapper />
-* </ButtonGroupX>
-* ```
-* 
-* ★ ━━━━━━━━━ Shine Button Group ━━━━━━━━━ ★
-* ```jsx
-* <ButtonGroupX buttonGroup="shine">
-*   <ButtonGroupXWrapper shineButtons={['Upload', 'Download', 'Share']} />
-* </ButtonGroupX>
-* ```
-* 
-* ★ ━━━━━━━━━ Props ━━━━━━━━━ ★
-* 
-* ButtonGroupX Props:
-* - `buttonGroup`: ButtonGroupXType - Specifies which variant to use
-* - `className`: string - Additional CSS classes
-* - `children`: ReactNode - Must contain a ButtonGroupXWrapper component
-* 
-* ButtonGroupXWrapper Props:
-* - `count`: string - Display count (for download group)
-* - `isLiked`: boolean - Initial like state (for like group)
-* - `likedCount`: number - Number of likes (for like group)
-* - `unlikedCount`: number - Number of unlikes (for like group)
-* - `onLikeChange`: (liked: boolean) => void - Like state change callback
-* - `zoom`: number - Current zoom percentage (for zoom group)
-* - `onZoomChange`: (zoom: number) => void - Zoom change callback
-* - `value`: number - Current value (for number group)
-* - `unit`: string - Unit to display (e.g., 'px', '%') (for number group)
-* - `onValueChange`: (value: number) => void - Value change callback
-* - `options`: Array<{ label: string, description: string }> - Dropdown options
-* - `selectedIndex`: string - Initially selected option index
-* - `onOptionChange`: (index: string) => void - Option selection callback
-* - `shineButtons`: string[] - Button labels for shine group
-* 
-* ★ ━━━━━━━━━ Component Structure ━━━━━━━━━ ★
-* ```jsx
-* // All ButtonGroupX components follow this pattern:
-* <ButtonGroupX buttonGroup="variantName">
-*   <ButtonGroupXWrapper 
-*     // variant-specific props
-*   />
-* </ButtonGroupX>
-* ```
-* 
-* ★ ━━━━━━━━━ Basic Usage ━━━━━━━━━ ★
-* ```javascript
-* import { ButtonGroupX, ButtonGroupXWrapper } from "./ButtonGroupX";
-* 
-* // Basic usage pattern
-* <ButtonGroupX buttonGroup="download">
-*   <ButtonGroupXWrapper />
-* </ButtonGroupX>
-* 
-* // With props for interactive variants
-* <ButtonGroupX buttonGroup="like">
-*   <ButtonGroupXWrapper 
-*     isLiked={false}
-*     likedCount={0}
-*     onLikeChange={handleLike}
-*   />
-* </ButtonGroupX>
-* ```
-* 
-*/
-
-const TwitchIcon = ({ className }: { className?: string }) => (
-  <svg className={className} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-    <path d="M21 2H3v16h5v4l4-4h5l4-4V2zm-10 9V7m5 4V7" />
-  </svg>
-)
-const DribbbleIcon = ({ className }: { className?: string }) => (
-  <svg className={className} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-    <circle cx="12" cy="12" r="10" />
-    <path d="M19.13 5.09C15.22 9.14 10 10.44 2.25 10.94m17.5 2.12C15.89 13.53 10.83 14 7 14.5" />
-  </svg>
-)
-const InstagramIcon = ({ className }: { className?: string }) => (
-  <svg className={className} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-    <rect x="2" y="2" width="20" height="20" rx="5" ry="5" />
-    <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" />
-    <line x1="17.5" y1="6.5" x2="17.51" y2="6.5" />
-  </svg>
-)
-const FacebookIcon = ({ className }: { className?: string }) => (
-  <svg className={className} width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-    <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
-  </svg>
-)
-
-type ButtonGroupType = 
-  | 'default'
-  | 'download'
-  | 'like'
-  | 'tooltip'
-  | 'rounded'
-  | 'social'
-  | 'zoom'
-  | 'number'
-  | 'preview'
-  | 'actions'
-  | 'basic'
-  | 'dropdown'
-  | 'ghost'
-  | 'reveal'
-  | 'shine'
-
-const ButtonGroupXContext = React.createContext<ButtonGroupType>('default')
-
-export function ButtonGroupX({ buttonGroup = 'default', children, ...props }: any) {
-  return (
-    <ButtonGroupXContext.Provider value={buttonGroup}>
-      {children}
-    </ButtonGroupXContext.Provider>
-  )
-}
-
-export function ButtonGroupXWrapper({ ...props }: any) {
-  const buttonGroupType = React.useContext(ButtonGroupXContext)
-  
-  // State for interactive demos
-  const [isLiked, setIsLiked] = useState(props.isLiked ?? true)
-  const [zoom, setZoom] = useState(props.zoom ?? 95)
-  const [value, setValue] = useState(props.value ?? 216)
-  const [selectedIndex, setSelectedIndex] = useState(props.selectedIndex ?? '0')
-
-  const handleZoomIn = () => {
-    if (zoom < 100) {
-      setZoom(zoom + 5)
-      props.onZoomChange?.(zoom + 5)
-    }
-  }
-
-  const handleZoomOut = () => {
-    if (zoom > 0) {
-      setZoom(zoom - 5)
-      props.onZoomChange?.(zoom - 5)
-    }
-  }
-
-  const options = props.options || [
-    { label: 'Option 1', description: 'First option' },
-    { label: 'Option 2', description: 'Second option' },
-    { label: 'Option 3', description: 'Third option' },
-  ]
-
-  const tooltipButtons = props.tooltipButtons || [
-    { icon: MousePointerIcon, label: 'Select' },
-    { icon: SquareIcon, label: 'Shapes' },
-    { icon: CropIcon, label: 'Crop' },
-    { icon: CopyIcon, label: 'Duplicate' },
-    { icon: EllipsisVerticalIcon, label: 'More' },
-  ]
-
-  const roundedButtons = props.roundedButtons || [
-    { icon: SkipBackIcon, label: 'Skip Back' },
-    { icon: PlayIcon, label: 'Play' },
-    { icon: PauseIcon, label: 'Pause' },
-    { icon: SkipForwardIcon, label: 'Skip Forward' },
-  ]
-
-  const socialButtons = props.socialButtons || [
-    { icon: TwitchIcon, label: 'Twitch', color: '#9146ff' },
-    { icon: DribbbleIcon, label: 'Dribbble', color: '#EA4C89' },
-    { icon: InstagramIcon, label: 'Instagram', color: '#fb169a' },
-    { icon: FacebookIcon, label: 'Facebook', color: '#0866ff' },
-  ]
-
-  const actionButtons = props.actionButtons || [
-    { icon: SquarePenIcon, label: 'Edit' },
-    { icon: CopyIcon, label: 'Duplicate' },
-    { icon: Trash2Icon, label: 'Delete' },
-  ]
-
-  const ghostButtons = props.ghostButtons || [
-    { icon: SettingsIcon, label: 'Settings' },
-    { icon: BoxIcon, label: 'Dashboard' },
-    { icon: ChartBarBigIcon, label: 'Analytics' },
-  ]
-
-  const shineButtons = props.shineButtons || ['Upload', 'Download', 'Share']
-
-  switch (buttonGroupType) {
-    case 'download':
-      return (
-        <div className='inline-flex w-fit -space-x-px rounded-md shadow-xs rtl:space-x-reverse'>
-          <Button variant='outline' className='rounded-none rounded-l-md shadow-none focus-visible:z-10'>
-            <DownloadIcon />
-            Download
-          </Button>
-          <span className='bg-background dark:border-input dark:bg-input/30 flex items-center rounded-r-md border px-3 text-sm font-medium'>
-            {props.count || '15k'}
-          </span>
-        </div>
-      )
-
-    case 'like':
-      return (
-        <div className='inline-flex w-fit -space-x-px rounded-md shadow-xs rtl:space-x-reverse'>
-          <Button
-            variant='outline'
-            className='rounded-none rounded-l-md shadow-none focus-visible:z-10'
-            onClick={() => {
-              setIsLiked(!isLiked)
-              props.onLikeChange?.(!isLiked)
-            }}
-          >
-            <HeartIcon className={cn({ 'fill-destructive stroke-destructive': isLiked })} />
-            Like
-          </Button>
-          <span className='bg-background dark:border-input dark:bg-input/30 flex items-center rounded-r-md border px-3 text-sm font-medium'>
-            {isLiked ? (props.likedCount || 46) : (props.unlikedCount || 45)}
-          </span>
-        </div>
-      )
-
-    case 'tooltip':
-      return (
-        <div className='inline-flex w-fit -space-x-px rounded-md shadow-xs rtl:space-x-reverse'>
-          {tooltipButtons.map((btn: any, index: number) => {
-            const Icon = btn.icon
-            const isFirst = index === 0
-            const isLast = index === tooltipButtons.length - 1
-            
-            return (
-              <Tooltip key={index}>
-                <TooltipTrigger asChild>
-                  <Button 
-                    className={cn(
-                      'rounded-none shadow-none focus-visible:z-10',
-                      isFirst && 'rounded-l-md',
-                      isLast && 'rounded-r-md'
-                    )}
-                    variant='outline'
-                  >
-                    <Icon />
-                    <span className='sr-only'>{btn.label}</span>
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent className='px-2 py-1 text-xs'>{btn.label}</TooltipContent>
-              </Tooltip>
-            )
-          })}
-        </div>
-      )
-
-    case 'rounded':
-      return (
-        <div className='divide-primary-foreground/30 inline-flex w-fit divide-x rounded-full shadow-xs'>
-          {roundedButtons.map((btn: any, index: number) => {
-            const Icon = btn.icon
-            const isFirst = index === 0
-            const isLast = index === roundedButtons.length - 1
-            
-            return (
-              <Tooltip key={index}>
-                <TooltipTrigger asChild>
-                  <Button 
-                    className={cn(
-                      'rounded-none focus-visible:z-10',
-                      isFirst && 'rounded-l-full',
-                      isLast && 'rounded-r-full'
-                    )}
-                  >
-                    <Icon />
-                    <span className='sr-only'>{btn.label}</span>
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent className='px-2 py-1 text-xs'>{btn.label}</TooltipContent>
-              </Tooltip>
-            )
-          })}
-        </div>
-      )
-
-    case 'social':
-      return (
-        <div className='inline-flex w-fit -space-x-px rounded-md shadow-xs rtl:space-x-reverse'>
-          {socialButtons.map((btn: any, index: number) => {
-            const Icon = btn.icon
-            const isFirst = index === 0
-            const isLast = index === socialButtons.length - 1
-            
-            return (
-              <Button
-                key={index}
-                variant='outline'
-                className={cn(
-                  'rounded-none shadow-none focus-visible:z-10',
-                  isFirst && 'rounded-l-md',
-                  isLast && 'rounded-r-md'
-                )}
-                style={{
-                  ['--hover-bg' as any]: `${btn.color}1a`,
-                }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.backgroundColor = `${btn.color}1a`
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.backgroundColor = ''
-                }}
-                asChild
-              >
-                <a href='#' target='_blank' rel='noopener noreferrer'>
-                  <Icon className={`stroke-[${btn.color}]`} style={{ stroke: btn.color }} />
-                  <span className='sr-only'>{btn.label}</span>
-                </a>
-              </Button>
-            )
-          })}
-        </div>
-      )
-
-    case 'zoom':
-      return (
-        <div className='inline-flex w-fit -space-x-px rounded-md shadow-xs rtl:space-x-reverse'>
-          <Button
-            variant='outline'
-            size='icon'
-            className='rounded-none rounded-l-md shadow-none focus-visible:z-10'
-            onClick={handleZoomOut}
-            disabled={zoom === 0}
-          >
-            <ZoomOutIcon />
-            <span className='sr-only'>Zoom out</span>
-          </Button>
-          <span className='bg-background dark:border-input dark:bg-input/30 flex items-center border px-3 text-sm font-medium'>
-            {`${zoom}%`}
-          </span>
-          <Button
-            variant='outline'
-            size='icon'
-            className='rounded-none rounded-r-md shadow-none focus-visible:z-10'
-            onClick={handleZoomIn}
-            disabled={zoom === 100}
-          >
-            <ZoomInIcon />
-            <span className='sr-only'>Zoom in</span>
-          </Button>
-        </div>
-      )
-
-    case 'number':
-      return (
-        <div className='divide-primary-foreground/30 inline-flex w-fit divide-x rounded-md shadow-xs'>
-          <Button
-            size='icon'
-            className='rounded-none rounded-l-full focus-visible:z-10'
-            onClick={() => {
-              setValue(value - 1)
-              props.onValueChange?.(value - 1)
-            }}
-          >
-            <MinusIcon />
-            <span className='sr-only'>Minus</span>
-          </Button>
-          <span className='bg-primary text-primary-foreground inline-flex items-center px-3 py-2 text-sm font-medium'>
-            {`${value}${props.unit || 'px'}`}
-          </span>
-          <Button
-            size='icon'
-            className='rounded-none rounded-r-full focus-visible:z-10'
-            onClick={() => {
-              setValue(value + 1)
-              props.onValueChange?.(value + 1)
-            }}
-          >
-            <PlusIcon />
-            <span className='sr-only'>Plus</span>
-          </Button>
-        </div>
-      )
-
-    case 'preview':
-      return (
-        <div className='inline-flex w-fit -space-x-px rounded-md shadow-xs rtl:space-x-reverse'>
-          <Button variant='outline' className='rounded-none rounded-l-md shadow-none focus-visible:z-10' asChild>
-            <a href='#'>Live preview</a>
-          </Button>
-          <Button
-            variant='outline'
-            size='icon'
-            className='rounded-none rounded-r-md shadow-none focus-visible:z-10'
-            asChild
-          >
-            <a href='#' target='_blank' rel='noopener noreferrer'>
-              <ExternalLinkIcon />
-              <span className='sr-only'>External link</span>
-            </a>
-          </Button>
-        </div>
-      )
-
-    case 'actions':
-      return (
-        <div className='inline-flex w-fit -space-x-px rounded-md shadow-xs rtl:space-x-reverse'>
-          {actionButtons.map((btn: any, index: number) => {
-            const Icon = btn.icon
-            const isFirst = index === 0
-            const isLast = index === actionButtons.length - 1
-            
-            return (
-              <Button 
-                key={index}
-                variant='outline' 
-                className={cn(
-                  'rounded-none shadow-none focus-visible:z-10',
-                  isFirst && 'rounded-l-md',
-                  isLast && 'rounded-r-md'
-                )}
-              >
-                <Icon />
-                {btn.label}
-              </Button>
-            )
-          })}
-        </div>
-      )
-
-    case 'basic':
-      return (
-        <div className='divide-primary-foreground/30 inline-flex w-fit divide-x rounded-md shadow-xs'>
-          <Button size='icon' className='rounded-none rounded-l-md focus-visible:z-10'>
-            <FlipHorizontalIcon />
-            <span className='sr-only'>Flip Horizontal</span>
-          </Button>
-          <Button size='icon' className='rounded-none rounded-r-md focus-visible:z-10'>
-            <FlipVerticalIcon />
-            <span className='sr-only'>Flip Vertical</span>
-          </Button>
-        </div>
-      )
-
-    case 'dropdown':
-      return (
-        <div className='divide-primary-foreground/30 inline-flex w-fit divide-x rounded-md shadow-xs'>
-          <Button className='rounded-none rounded-l-md focus-visible:z-10'>
-            {options[Number(selectedIndex)].label}
-          </Button>
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button size='icon' className='rounded-none rounded-r-md focus-visible:z-10'>
-                <ChevronDownIcon />
-                <span className='sr-only'>Select option</span>
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent side='bottom' sideOffset={4} align='end' className='max-w-64 md:max-w-xs!'>
-              <DropdownMenuRadioGroup value={selectedIndex} onValueChange={(v) => {
-                setSelectedIndex(v)
-                props.onOptionChange?.(v)
-              }}>
-                {options.map((option: any, index: number) => (
-                  <DropdownMenuRadioItem 
-                    key={option.label} 
-                    value={String(index)} 
-                    className='items-start [&>span]:pt-1.5'
-                  >
-                    <div className='flex flex-col gap-1'>
-                      <span className='text-sm font-medium'>{option.label}</span>
-                      <span className='text-muted-foreground text-xs'>{option.description}</span>
-                    </div>
-                  </DropdownMenuRadioItem>
-                ))}
-              </DropdownMenuRadioGroup>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-      )
-
-    case 'ghost':
-      return (
-        <div className='inline-flex w-fit rounded-md rtl:space-x-reverse'>
-          {ghostButtons.map((btn: any, index: number) => {
-            const Icon = btn.icon
-            const isFirst = index === 0
-            const isLast = index === ghostButtons.length - 1
-            
-            return (
-              <Button 
-                key={index}
-                variant='ghost' 
-                className={cn(
-                  'rounded-none focus-visible:z-10',
-                  isFirst && 'rounded-l-md',
-                  isLast && 'rounded-r-md'
-                )}
-              >
-                <Icon />
-                {btn.label}
-              </Button>
-            )
-          })}
-        </div>
-      )
-
-    case 'reveal':
-      return (
-        <div className='inline-flex w-fit -space-x-px rounded-md shadow-xs rtl:space-x-reverse'>
-          <Button
-            variant='outline'
-            className='group w-20 justify-start gap-3 overflow-hidden rounded-none rounded-l-md shadow-none transition-all duration-200 not-hover:w-10 hover:bg-sky-500/10 hover:text-sky-500 focus-visible:z-10 dark:hover:bg-sky-400/10 dark:hover:text-sky-400'
-          >
-            <ThumbsUpIcon />
-            Like
-          </Button>
-          <Button
-            variant='outline'
-            className='hover:bg-destructive/10! group hover:text-destructive w-24.5 justify-end gap-3 overflow-hidden rounded-none rounded-r-md shadow-none transition-all duration-200 not-hover:w-10 focus-visible:z-10'
-          >
-            Dislike
-            <ThumbsDownIcon />
-          </Button>
-        </div>
-      )
-
-    case 'shine':
-      return (
-        <div className='divide-primary-foreground/30 inline-flex w-fit divide-x rounded-md shadow-xs'>
-          {shineButtons.map((label: string, index: number) => {
-            const isFirst = index === 0
-            const isLast = index === shineButtons.length - 1
-            
-            return (
-              <Button 
-                key={index}
-                className={cn(
-                  'relative overflow-hidden rounded-none focus-visible:z-10',
-                  'before:absolute before:inset-0 before:rounded-[inherit]',
-                  'before:bg-[linear-gradient(45deg,transparent_25%,rgba(255,255,255,0.35)_50%,transparent_75%,transparent_100%)]',
-                  'before:bg-[length:250%_250%,100%_100%] before:bg-[position:200%_0,0_0]',
-                  'before:bg-no-repeat before:transition-[background-position_0s_ease] before:duration-1000',
-                  'hover:before:bg-[position:-100%_0,0_0]',
-                  'dark:before:bg-[linear-gradient(45deg,transparent_25%,rgba(0,0,0,0.2)_50%,transparent_75%,transparent_100%)]',
-                  isFirst && 'rounded-l-md',
-                  isLast && 'rounded-r-md'
-                )}
-              >
-                {label}
-              </Button>
-            )
-          })}
-        </div>
-      )
-
-    default:
-      return (
-        <ButtonGroup {...props}>
-          {props.children}
-        </ButtonGroup>
-      )
-  }
-}
-
-export function ButtonGroupXDemo() {
-  return (
-    <div className="space-y-12 p-6 max-w-4xl mx-auto">
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Download Button Group</h3>
-        <ButtonGroupX buttonGroup="download">
-          <ButtonGroupXWrapper count="15k" />
-        </ButtonGroupX>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Like Button Group</h3>
-        <ButtonGroupX buttonGroup="like">
-          <ButtonGroupXWrapper 
-            isLiked={true}
-            likedCount={46}
-            unlikedCount={45}
-            onLikeChange={(liked) => console.log('Liked:', liked)}
-          />
-        </ButtonGroupX>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Tooltip Button Group</h3>
-        <ButtonGroupX buttonGroup="tooltip">
-          <ButtonGroupXWrapper />
-        </ButtonGroupX>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Rounded Button Group</h3>
-        <ButtonGroupX buttonGroup="rounded">
-          <ButtonGroupXWrapper />
-        </ButtonGroupX>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Social Media Button Group</h3>
-        <ButtonGroupX buttonGroup="social">
-          <ButtonGroupXWrapper />
-        </ButtonGroupX>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Zoom Button Group</h3>
-        <ButtonGroupX buttonGroup="zoom">
-          <ButtonGroupXWrapper 
-            zoom={95}
-            onZoomChange={(zoom) => console.log('Zoom:', zoom)}
-          />
-        </ButtonGroupX>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Number Button Group</h3>
-        <ButtonGroupX buttonGroup="number">
-          <ButtonGroupXWrapper 
-            value={216}
-            unit="px"
-            onValueChange={(val) => console.log('Value:', val)}
-          />
-        </ButtonGroupX>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Preview Button Group</h3>
-        <ButtonGroupX buttonGroup="preview">
-          <ButtonGroupXWrapper />
-        </ButtonGroupX>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Actions Button Group</h3>
-        <ButtonGroupX buttonGroup="actions">
-          <ButtonGroupXWrapper />
-        </ButtonGroupX>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Basic Button Group</h3>
-        <ButtonGroupX buttonGroup="basic">
-          <ButtonGroupXWrapper />
-        </ButtonGroupX>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Dropdown Button Group</h3>
-        <ButtonGroupX buttonGroup="dropdown">
-          <ButtonGroupXWrapper 
-            options={[
-              { label: 'Merge Pull Request', description: 'All commits will be added to the base branch' },
-              { label: 'Squash and Merge', description: 'The commits will be combined into one commit' },
-              { label: 'Rebase and Merge', description: 'The commits will be rebased and added' },
-            ]}
-            selectedIndex="0"
-            onOptionChange={(index) => console.log('Selected:', index)}
-          />
-        </ButtonGroupX>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Ghost Button Group</h3>
-        <ButtonGroupX buttonGroup="ghost">
-          <ButtonGroupXWrapper />
-        </ButtonGroupX>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Reveal Button Group</h3>
-        <ButtonGroupX buttonGroup="reveal">
-          <ButtonGroupXWrapper />
-        </ButtonGroupX>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold mb-4">Shine Button Group</h3>
-        <ButtonGroupX buttonGroup="shine">
-          <ButtonGroupXWrapper shineButtons={['Upload', 'Download', 'Share']} />
-        </ButtonGroupX>
-      </div>
-    </div>
-  )
-}