{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group-2",
  "type": "registry:component",
  "title": "ButtonGroup 2",
  "description": "ButtonGroup 2. A group of buttons that are displayed together.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "components/watermelon/button-group-2.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport type { LucideIcon } from 'lucide-react';\nimport { BookmarkIcon } from 'lucide-react';\n\nimport { Button } from '@/components/base-ui/button';\n\nimport { cn } from '@/lib/utils';\n\ntype ButtonGroupData = {\n  activeCount: number;\n  inactiveCount: number;\n  actionLabel: string;\n  icon: LucideIcon;\n};\n\nconst buttonGroup: ButtonGroupData = {\n  activeCount: 19,\n  inactiveCount: 18,\n  actionLabel: 'Save',\n  icon: BookmarkIcon,\n};\n\nconst ButtonGroup2 = () => {\n  const [isSaved, setIsSaved] = useState(true);\n  const Icon = buttonGroup.icon;\n\n  return (\n    <div className=\"inline-flex w-fit -space-x-px rounded-md shadow-xs rtl:space-x-reverse\">\n      <Button\n        variant=\"outline\"\n        className=\"border-border/70 gap-2 rounded-none rounded-l-md shadow-none focus-visible:z-10\"\n        onClick={() => setIsSaved((current) => !current)}\n      >\n        <Icon\n          className={cn('size-4', {\n            'fill-foreground stroke-foreground': isSaved,\n          })}\n        />\n        {buttonGroup.actionLabel}\n      </Button>\n      <span className=\"border-border/70 bg-muted/20 text-muted-foreground flex items-center rounded-r-md border px-3 text-sm font-medium\">\n        {isSaved ? buttonGroup.activeCount : buttonGroup.inactiveCount}\n      </span>\n    </div>\n  );\n};\n\nexport default ButtonGroup2;\n"
    }
  ]
}