{"name":"rhf-otp-field","title":"RHF OTP Field","description":"OTP/PIN input field with React Hook Form integration.","type":"registry:ui","docs":"/components/rhf-otp-field","categories":["forms"],"registryDependencies":["https://pb-ui-five.vercel.app/registry/rhf-base-controller","https://pb-ui-five.vercel.app/registry/input-otp"],"dependencies":["react-hook-form"],"files":[{"path":"components/ui/rhf-inputs/otp-field.tsx","target":"components/ui/rhf-inputs/otp-field.tsx","type":"registry:ui","content":"\"use client\";\n\nimport { FieldValues } from \"react-hook-form\";\nimport { InputOTP, InputOTPGroup, InputOTPSlot } from \"../input-otp\";\nimport { BaseController, BaseControllerProps } from \"./base-controller\";\n\ntype OTPFieldProps<T extends FieldValues> = Omit<\n  BaseControllerProps<T>,\n  \"children\"\n> & {\n  /** Number of OTP digits */\n  length?: number;\n  /** Pattern for input validation (e.g., /^[0-9]*$/) */\n  pattern?: RegExp;\n  disabled?: boolean;\n  className?: string;\n};\n\nexport function OTPField<T extends FieldValues>({\n  control,\n  name,\n  label,\n  description,\n  required,\n  disableFieldError = false,\n  length = 6,\n  pattern,\n  disabled = false,\n  className,\n}: OTPFieldProps<T>) {\n  return (\n    <BaseController\n      control={control}\n      name={name}\n      label={label}\n      required={required}\n      description={description}\n      disableFieldError={disableFieldError}\n    >\n      {({ field, fieldState, ariaDescribedBy }) => (\n        <InputOTP\n          id={field.name}\n          maxLength={length}\n          value={field.value ?? \"\"}\n          onChange={(value) => field.onChange(value)}\n          disabled={disabled}\n          pattern={pattern?.source}\n          aria-invalid={!!fieldState.error}\n          aria-describedby={ariaDescribedBy}\n          className={className}\n        >\n          <InputOTPGroup>\n            {Array.from({ length }, (_, index) => (\n              <InputOTPSlot\n                key={index}\n                index={index}\n                aria-invalid={!!fieldState.error}\n              />\n            ))}\n          </InputOTPGroup>\n        </InputOTP>\n      )}\n    </BaseController>\n  );\n}\n"}]}