@catalystsoftware/ui 1.0.2 → 1.0.5

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

@@ -0,0 +1,847 @@
+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>
+  )
+}