{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group-9",
  "type": "registry:component",
  "title": "ButtonGroup 9",
  "description": "ButtonGroup 9. A group of buttons that are displayed together.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "components/watermelon/button-group-9.tsx",
      "type": "registry:component",
      "content": "import type { LucideIcon } from 'lucide-react';\nimport { ArchiveIcon, CopyPlusIcon, PencilRulerIcon } 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: PencilRulerIcon, label: 'Customize' },\n  { icon: CopyPlusIcon, label: 'Clone' },\n  { icon: ArchiveIcon, label: 'Archive' },\n] as const;\n\nconst ButtonGroup9 = () => {\n  return (\n    <div className=\"inline-flex w-fit -space-x-px rounded-full shadow-xs rtl:space-x-reverse\">\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            variant=\"outline\"\n            className={[\n              'border-border/70 bg-background text-foreground hover:[&_svg]:text-muted-foreground h-7 gap-1.5 rounded-none px-2.5 text-[0.8rem] shadow-none focus-visible:z-10 sm:h-8 sm:gap-2 sm:px-3 sm:text-sm',\n              isFirst ? 'rounded-l-full' : '',\n              isLast ? 'rounded-r-full' : '',\n            ].join(' ')}\n          >\n            <Icon className=\"text-muted-foreground size-3.5 transition-colors sm:size-4\" />\n            {action.label}\n          </Button>\n        );\n      })}\n    </div>\n  );\n};\n\nexport default ButtonGroup9;\n"
    }
  ]
}