{
  "name": "rhf-checkbox-field",
  "type": "registry:ui",
  "dependencies": [
    "@hookform/lenses",
    "react",
    "react-hook-form"
  ],
  "registryDependencies": [
    "checkbox",
    "field"
  ],
  "files": [
    {
      "path": "./items/react-hook-form/checkbox-field/component.tsx",
      "type": "registry:ui",
      "target": "./components/ui/shuip/react-hook-form/checkbox-field.tsx",
      "content": "'use client';\n\nimport type { Lens } from '@hookform/lenses';\nimport type * as React from 'react';\nimport { useController } from 'react-hook-form';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';\n\nexport interface CheckboxFieldProps extends Omit<React.ComponentProps<typeof Checkbox>, 'checked' | 'onCheckedChange'> {\n  lens: Lens<boolean>;\n  label: string;\n  description?: string;\n}\n\nexport function CheckboxField({ lens, label, description, ...props }: CheckboxFieldProps) {\n  const { field, fieldState } = useController(lens.interop());\n  const id = props.id ?? field.name;\n\n  return (\n    <Field className='gap-2' data-invalid={fieldState.invalid}>\n      <div className='flex items-center gap-2'>\n        <Checkbox\n          {...props}\n          id={id}\n          name={field.name}\n          checked={field.value ?? false}\n          onCheckedChange={(checked) => field.onChange(checked === true)}\n          onBlur={field.onBlur}\n          aria-invalid={fieldState.invalid}\n        />\n        <FieldLabel htmlFor={id} className='text-sm cursor-pointer'>\n          {label}\n        </FieldLabel>\n      </div>\n      {fieldState.invalid && <FieldError className='text-xs text-left' errors={[fieldState.error]} />}\n      {description && <FieldDescription className='text-xs'>{description}</FieldDescription>}\n    </Field>\n  );\n}\n"
    }
  ],
  "$schema": "https://ui.shadcn.com/schema/registry-item.json"
}