{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-6",
  "type": "registry:component",
  "title": "Checkbox 6",
  "description": "Checkbox 6. A checkbox component for selecting options.",
  "dependencies": [],
  "registryDependencies": [
    "badge",
    "checkbox"
  ],
  "files": [
    {
      "path": "components/watermelon/checkbox-6.tsx",
      "type": "registry:component",
      "content": "'use client'\n\nimport { useState } from 'react'\n\nimport { Badge } from '@/components/base-ui/badge'\nimport { Checkbox } from '@/components/base-ui/checkbox'\n\nconst snacks = ['Salad', 'Wrap', 'Juice'] as const\n\ntype Snack = (typeof snacks)[number]\n\nconst Checkbox6 = () => {\n  const [selectedSnacks, setSelectedSnacks] = useState<Snack[]>([\n    'Salad',\n    'Wrap'\n  ])\n\n  const handleCheckedChange = (snack: Snack, checked: boolean) => {\n    setSelectedSnacks((previousSelectedSnacks) =>\n      checked\n        ? previousSelectedSnacks.includes(snack)\n          ? previousSelectedSnacks\n          : [...previousSelectedSnacks, snack]\n        : previousSelectedSnacks.filter((selectedSnack) => selectedSnack !== snack)\n    )\n  }\n\n  return (\n    <div className='flex items-center gap-2.5'>\n      {snacks.map((snack) => (\n        <Badge\n          key={snack}\n          variant='secondary'\n          className='relative rounded-lg px-3 py-4'\n        >\n          <Checkbox\n            id={snack}\n            checked={selectedSnacks.includes(snack)}\n            onCheckedChange={(checked) =>\n              handleCheckedChange(snack, checked === true)\n            }\n            className={`pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 data-checked:border-sky-600 data-checked:bg-sky-600 dark:data-checked:border-sky-500 dark:data-checked:bg-sky-500 ${\n              selectedSnacks.includes(snack)\n                ? 'opacity-100'\n                : 'opacity-0'\n            }`}\n          />\n          <label\n            htmlFor={snack}\n            className={`cursor-pointer select-none text-sm after:absolute after:inset-0 ${\n              selectedSnacks.includes(snack) ? 'pl-5' : ''\n            }`}\n          >\n            {snack}\n          </label>\n        </Badge>\n      ))}\n    </div>\n  )\n}\n\nexport default Checkbox6\n"
    }
  ]
}