{
  "name": "rhf-select-field",
  "type": "registry:ui",
  "dependencies": [
    "@hookform/lenses",
    "@radix-ui/react-select",
    "react-hook-form"
  ],
  "registryDependencies": [
    "field",
    "select"
  ],
  "files": [
    {
      "path": "./items/react-hook-form/select-field/component.tsx",
      "type": "registry:ui",
      "target": "./components/ui/shuip/react-hook-form/select-field.tsx",
      "content": "'use client';\n\nimport type { Lens } from '@hookform/lenses';\nimport type { SelectProps } from '@radix-ui/react-select';\nimport { useController } from 'react-hook-form';\nimport { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';\n\nexport type SelectFieldOption = Record<string, string>;\n\nexport interface SelectFieldProps extends Omit<SelectProps, 'value' | 'defaultValue' | 'onValueChange'> {\n  lens: Lens<string>;\n  options: SelectFieldOption;\n  label?: string;\n  placeholder?: string;\n  description?: string;\n}\n\nexport function SelectField({ lens, options, label, description, placeholder, ...props }: SelectFieldProps) {\n  const { field, fieldState } = useController(lens.interop());\n\n  return (\n    <Field className='gap-2' data-invalid={fieldState.invalid}>\n      {label && <FieldLabel htmlFor={field.name}>{label}</FieldLabel>}\n      <Select name={field.name} value={field.value ?? ''} onValueChange={field.onChange} {...props}>\n        <SelectTrigger id={field.name} aria-invalid={fieldState.invalid} className='w-full'>\n          <SelectValue placeholder={placeholder} />\n        </SelectTrigger>\n        <SelectContent>\n          {Object.entries(options).map(([optionLabel, value]) => (\n            <SelectItem key={optionLabel} value={value}>\n              {optionLabel}\n            </SelectItem>\n          ))}\n        </SelectContent>\n      </Select>\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"
}
