{
  "name": "rhf-number-field",
  "type": "registry:ui",
  "dependencies": [
    "@hookform/lenses",
    "lucide-react",
    "react",
    "react-hook-form"
  ],
  "registryDependencies": [
    "field",
    "input-group",
    "tooltip"
  ],
  "files": [
    {
      "path": "./items/react-hook-form/number-field/component.tsx",
      "type": "registry:ui",
      "target": "./components/ui/shuip/react-hook-form/number-field.tsx",
      "content": "'use client';\n\nimport type { Lens } from '@hookform/lenses';\nimport { InfoIcon } from 'lucide-react';\nimport type * as React from 'react';\nimport { useController } from 'react-hook-form';\nimport { Field, FieldDescription, FieldError, FieldLabel } from '@/components/ui/field';\nimport { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group';\nimport { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';\n\nexport interface NumberFieldProps\n  extends Omit<React.ComponentProps<typeof InputGroupInput>, 'value' | 'onChange' | 'type'> {\n  lens: Lens<number>;\n  label?: string;\n  description?: string;\n  tooltip?: React.ReactNode;\n  type?: 'number' | 'range';\n}\n\nexport function NumberField({ lens, label, description, tooltip, type = 'number', ...props }: NumberFieldProps) {\n  const { field, fieldState } = useController(lens.interop());\n  const id = props.id ?? field.name;\n\n  const value = field.value == null || Number.isNaN(field.value) ? '' : field.value;\n\n  return (\n    <Field className='gap-2' data-invalid={fieldState.invalid}>\n      {label && <FieldLabel htmlFor={id}>{label}</FieldLabel>}\n      <InputGroup>\n        <InputGroupInput\n          {...field}\n          {...props}\n          id={id}\n          type={type}\n          value={value}\n          onChange={(e) => field.onChange(e.target.valueAsNumber)}\n          aria-invalid={fieldState.invalid}\n        />\n        {tooltip && (\n          <InputGroupAddon align='inline-end'>\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <InputGroupButton aria-label='Info' size='icon-xs'>\n                  <InfoIcon />\n                </InputGroupButton>\n              </TooltipTrigger>\n              <TooltipContent>{tooltip}</TooltipContent>\n            </Tooltip>\n          </InputGroupAddon>\n        )}\n      </InputGroup>\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"
}