{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-16",
  "type": "registry:component",
  "title": "Checkbox 16",
  "description": "Checkbox 16. A checkbox component for selecting options.",
  "dependencies": [],
  "registryDependencies": [
    "button",
    "checkbox",
    "label"
  ],
  "files": [
    {
      "path": "components/watermelon/checkbox-16.tsx",
      "type": "registry:component",
      "content": "'use client'\n\nimport { useId, useState } from 'react'\n\nimport { Button } from '@/components/base-ui/button'\nimport { Checkbox } from '@/components/base-ui/checkbox'\nimport { Label } from '@/components/base-ui/label'\n\ntype CheckboxCopy = {\n  description: string\n  label: string\n}\n\nconst checkboxCopy: CheckboxCopy = {\n  label: 'Receive email notifications',\n  description: 'You confirm that you have read and accepted the current usage guidelines.'\n}\n\nconst Checkbox16 = () => {\n  const id = useId()\n  const [isChecked, setIsChecked] = useState<boolean>(true)\n\n  const handleReset = () => {\n    setIsChecked(false)\n  }\n\n  return (\n    <div className='flex max-w-sm items-start gap-3.5'>\n      <Checkbox\n        id={id}\n        checked={isChecked}\n        onCheckedChange={(checked) => setIsChecked(checked === true)}\n        className='mt-0.5 data-checked:border-sky-600 data-checked:bg-sky-600 dark:data-checked:border-sky-500 dark:data-checked:bg-sky-500'\n      />\n      <div className='grid gap-2.5'>\n        <Label htmlFor={id} className='text-sm leading-4 font-medium'>\n          {checkboxCopy.label}\n        </Label>\n        <p className='text-muted-foreground text-[13px] leading-5'>\n          {checkboxCopy.description}\n        </p>\n        <div className='flex flex-wrap gap-2'>\n          <Button variant='outline' size='sm' onClick={handleReset}>\n            Reset\n          </Button>\n          <Button\n            size='sm'\n            disabled={!isChecked}\n            className='bg-sky-600 text-white hover:bg-sky-700 dark:bg-sky-500 dark:text-slate-950 dark:hover:bg-sky-400'\n          >\n            Continue\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport default Checkbox16\n"
    }
  ]
}