{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "button-group-6",
  "type": "registry:component",
  "title": "ButtonGroup 6",
  "description": "ButtonGroup 6. A group of buttons that are displayed together.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "components/watermelon/button-group-6.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport { useState } from 'react';\n\nimport type { LucideIcon } from 'lucide-react';\nimport { MinusIcon, PlusIcon } from 'lucide-react';\n\nimport { Button } from '@/components/base-ui/button';\n\ntype ButtonGroupConfig = {\n  initialValue: number;\n  maxValue: number;\n  minValue: number;\n  step: number;\n  decrementIcon: LucideIcon;\n  decrementLabel: string;\n  incrementIcon: LucideIcon;\n  incrementLabel: string;\n};\n\nconst config: ButtonGroupConfig = {\n  initialValue: 2,\n  maxValue: 5,\n  minValue: 0,\n  step: 1,\n  decrementIcon: MinusIcon,\n  decrementLabel: 'Decrease quantity',\n  incrementIcon: PlusIcon,\n  incrementLabel: 'Increase quantity',\n};\n\nconst ButtonGroup6 = () => {\n  const [value, setValue] = useState<number>(config.initialValue);\n  const DecrementIcon = config.decrementIcon;\n  const IncrementIcon = config.incrementIcon;\n\n  const handleDecrease = () => {\n    setValue((current) => Math.max(config.minValue, current - config.step));\n  };\n\n  const handleIncrease = () => {\n    setValue((current) => Math.min(config.maxValue, current + config.step));\n  };\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        size=\"icon\"\n        className=\"border-border/70 rounded-none rounded-l-md shadow-none focus-visible:z-10\"\n        onClick={handleDecrease}\n        disabled={value === config.minValue}\n      >\n        <DecrementIcon className=\"size-4\" />\n        <span className=\"sr-only\">{config.decrementLabel}</span>\n      </Button>\n      <span className=\"border-border/70 bg-muted/20 flex min-w-12 items-center justify-center border px-3 text-sm font-medium\">\n        {value}\n      </span>\n      <Button\n        variant=\"outline\"\n        size=\"icon\"\n        className=\"border-border/70 rounded-none rounded-r-md shadow-none focus-visible:z-10\"\n        onClick={handleIncrease}\n        disabled={value === config.maxValue}\n      >\n        <IncrementIcon className=\"size-4\" />\n        <span className=\"sr-only\">{config.incrementLabel}</span>\n      </Button>\n    </div>\n  );\n};\n\nexport default ButtonGroup6;\n"
    }
  ]
}