{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-8",
  "type": "registry:component",
  "title": "Checkbox 8",
  "description": "Checkbox 8. A checkbox component for selecting options.",
  "dependencies": [],
  "registryDependencies": [
    "checkbox",
    "label"
  ],
  "files": [
    {
      "path": "components/watermelon/checkbox-8.tsx",
      "type": "registry:component",
      "content": "'use client'\n\nimport { useState } from 'react'\n\nimport { Checkbox } from '@/components/base-ui/checkbox'\nimport { Label } from '@/components/base-ui/label'\n\nconst technologies = ['Design', 'Marketing', 'Product'] as const\n\ntype Technology = (typeof technologies)[number]\n\nconst Checkbox8 = () => {\n  const [selectedTechnologies, setSelectedTechnologies] = useState<Technology[]>(\n    []\n  )\n\n  const handleCheckedChange = (technology: Technology, checked: boolean) => {\n    setSelectedTechnologies((previousSelectedTechnologies) =>\n      checked\n        ? previousSelectedTechnologies.includes(technology)\n          ? previousSelectedTechnologies\n          : [...previousSelectedTechnologies, technology]\n        : previousSelectedTechnologies.filter(\n            (selectedTechnology) => selectedTechnology !== technology\n          )\n    )\n  }\n\n  return (\n    <div className='space-y-4'>\n      <Label className='font-semibold'>Team roles</Label>\n      <div className='flex flex-wrap items-center gap-x-5 gap-y-2.5'>\n        {technologies.map((technology) => (\n          <div key={technology} className='flex items-center gap-2'>\n            <Checkbox\n              id={technology}\n              checked={selectedTechnologies.includes(technology)}\n              onCheckedChange={(checked) =>\n                handleCheckedChange(technology, checked === true)\n              }\n              className='data-checked:border-sky-600 data-checked:bg-sky-600 dark:data-checked:border-sky-500 dark:data-checked:bg-sky-500'\n            />\n            <Label htmlFor={technology} className='text-sm'>\n              {technology}\n            </Label>\n          </div>\n        ))}\n      </div>\n    </div>\n  )\n}\n\nexport default Checkbox8\n"
    }
  ]
}