{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-5",
  "type": "registry:component",
  "title": "Checkbox 5",
  "description": "Checkbox 5. A checkbox component for selecting options.",
  "dependencies": [],
  "registryDependencies": [
    "checkbox"
  ],
  "files": [
    {
      "path": "components/watermelon/checkbox-5.tsx",
      "type": "registry:component",
      "content": "'use client'\n\nimport { useState } from 'react'\n\nimport { Checkbox } from '@/components/base-ui/checkbox'\n\ntype CheckboxSizeOption = {\n  ariaLabel: string\n  className?: string\n  id: string\n}\n\nconst checkboxSizeOptions: readonly CheckboxSizeOption[] = [\n  {\n    id: 'default',\n    ariaLabel: 'Default checkbox size'\n  },\n  {\n    id: 'medium',\n    ariaLabel: 'Medium checkbox size',\n    className: 'size-5'\n  },\n  {\n    id: 'large',\n    ariaLabel: 'Large checkbox size',\n    className: 'size-6'\n  }\n]\n\nconst Checkbox5 = () => {\n  const [checkedSizes, setCheckedSizes] = useState<Record<string, boolean>>({\n    default: true,\n    medium: true,\n    large: true\n  })\n\n  const handleCheckedChange = (id: CheckboxSizeOption['id'], checked: boolean) => {\n    setCheckedSizes(previousState => ({\n      ...previousState,\n      [id]: checked\n    }))\n  }\n\n  return (\n    <div className='flex items-center gap-3'>\n      {checkboxSizeOptions.map(option => (\n        <Checkbox\n          key={option.id}\n          checked={checkedSizes[option.id]}\n          onCheckedChange={(checked) =>\n            handleCheckedChange(option.id, checked === true)\n          }\n          aria-label={option.ariaLabel}\n          className={`${option.className ?? ''} data-checked:border-sky-600 data-checked:bg-sky-600 dark:data-checked:border-sky-500 dark:data-checked:bg-sky-500`.trim()}\n        />\n      ))}\n    </div>\n  )\n}\n\nexport default Checkbox5\n"
    }
  ]
}