{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group-4",
  "type": "registry:component",
  "title": "ButtonGroup 4",
  "description": "ButtonGroup 4. A group of buttons that are displayed together.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button",
    "tooltip"
  ],
  "files": [
    {
      "path": "components/watermelon/button-group-4.tsx",
      "type": "registry:component",
      "content": "import type { LucideIcon } from 'lucide-react';\nimport {\n  ListRestartIcon,\n  PauseIcon,\n  PlayIcon,\n  SkipForwardIcon,\n} from 'lucide-react';\n\nimport { Button } from '@/components/base-ui/button';\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '@/components/base-ui/tooltip';\n\ntype ControlAction = {\n  icon: LucideIcon;\n  label: string;\n};\n\nconst actions: readonly ControlAction[] = [\n  { icon: ListRestartIcon, label: 'Restart' },\n  { icon: PlayIcon, label: 'Play' },\n  { icon: PauseIcon, label: 'Pause' },\n  { icon: SkipForwardIcon, label: 'Next' },\n] as const;\n\nconst ButtonGroup4 = () => {\n  return (\n    <TooltipProvider>\n      <div className=\"divide-primary-foreground/20 inline-flex w-fit divide-x overflow-hidden rounded-full shadow-sm\">\n        {actions.map((action, index) => {\n          const Icon = action.icon;\n          const isFirst = index === 0;\n          const isLast = index === actions.length - 1;\n\n          return (\n            <Tooltip key={action.label}>\n              <TooltipTrigger>\n                <Button\n                  className={[\n                    'rounded-none px-4 py-3 shadow-none focus-visible:z-10',\n                    isFirst ? 'rounded-l-full' : '',\n                    isLast ? 'rounded-r-full' : '',\n                  ].join(' ')}\n                >\n                  <Icon className=\"size-4\" />\n                  <span className=\"sr-only\">{action.label}</span>\n                </Button>\n              </TooltipTrigger>\n              <TooltipContent className=\"px-2 py-1 text-xs\">\n                {action.label}\n              </TooltipContent>\n            </Tooltip>\n          );\n        })}\n      </div>\n    </TooltipProvider>\n  );\n};\n\nexport default ButtonGroup4;\n"
    }
  ]
}