{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group-10",
  "type": "registry:component",
  "title": "ButtonGroup 10",
  "description": "ButtonGroup 10. A group of buttons that are displayed together.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "components/watermelon/button-group-10.tsx",
      "type": "registry:component",
      "content": "import type { LucideIcon } from 'lucide-react';\nimport { RotateCcwIcon, RotateCwIcon } from 'lucide-react';\n\nimport { Button } from '@/components/base-ui/button';\n\ntype ActionButton = {\n  icon: LucideIcon;\n  label: string;\n};\n\nconst actions: readonly ActionButton[] = [\n  { icon: RotateCcwIcon, label: 'Rotate Left' },\n  { icon: RotateCwIcon, label: 'Rotate Right' },\n] as const;\n\nconst ButtonGroup10 = () => {\n  return (\n    <div className=\"inline-flex w-fit divide-x divide-white/10 overflow-hidden rounded-full bg-slate-900 text-white dark:divide-black/10 dark:bg-slate-100 dark:text-slate-900\">\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          <Button\n            key={action.label}\n            size=\"icon\"\n            variant=\"outline\"\n            className={[\n              'rounded-none border-0 bg-transparent text-white shadow-none hover:bg-white/10 hover:text-white focus-visible:z-10 dark:text-slate-900 dark:hover:bg-black/5 dark:hover:text-slate-900 hover:[&_svg]:text-white dark:hover:[&_svg]:text-slate-900',\n              isFirst ? 'rounded-l-full' : '',\n              isLast ? 'rounded-r-full' : '',\n            ].join(' ')}\n          >\n            <Icon className=\"size-4 text-white dark:text-slate-900\" />\n            <span className=\"sr-only\">{action.label}</span>\n          </Button>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default ButtonGroup10;\n"
    }
  ]
}