/**
 * @usevyre/react — OTPInput
 *
 * AI CONTEXT:
 * ┌──────────────────────────────────────────────────────────────────┐
 * │ Component:  OTPInput                                              │
 * │ Import:     import { OTPInput } from "@usevyre/react"              │
 * │                                                                   │
 * │ Segmented one-time-code input (verification / 2FA). CONTROLLED.   │
 * │ onChange emits the STRING value (not an event) — drops into       │
 * │ <FormField>. Paste-aware, auto-advance/backspace, arrow keys.     │
 * │                                                                   │
 * │   value      = string   (controlled, length ≤ `length`)           │
 * │   onChange   = (value: string) => void                            │
 * │   onComplete?= (value: string) => void  (all slots filled)        │
 * │   length     = number   (default 6)                               │
 * │   type       = "numeric"(default) | "alphanumeric"                │
 * │   mask       = boolean  (dots instead of chars, like a password)  │
 * │   size       = "sm" | "md"(default) | "lg"                        │
 * │   disabled   = boolean   autoFocus = boolean                      │
 * │                                                                   │
 * │ Pasting a full code fills every slot. Backspace on an empty slot  │
 * │ moves to the previous one.                                         │
 * └──────────────────────────────────────────────────────────────────┘
 *
 * @example
 * const [code, setCode] = useState("");
 * <OTPInput value={code} onChange={setCode} onComplete={verify} />
 *
 * @example
 * <FormField name="otp" label="Verification code"
 *            rules={{ required: true, minLength: 6 }}>
 *   <OTPInput length={6} />
 * </FormField>
 */
import React from "react";
import type { BaseProps } from "../../types";
export interface OTPInputProps extends BaseProps {
    value?: string;
    defaultValue?: string;
    onChange?: (value: string) => void;
    /** Fired once when every slot is filled */
    onComplete?: (value: string) => void;
    length?: number;
    type?: "numeric" | "alphanumeric";
    /** Render dots instead of characters */
    mask?: boolean;
    size?: "sm" | "md" | "lg";
    disabled?: boolean;
    autoFocus?: boolean;
    /** Forwarded to FormField wiring (used as the field name) */
    name?: string;
    onBlur?: React.FocusEventHandler<HTMLInputElement>;
}
export declare const OTPInput: React.ForwardRefExoticComponent<OTPInputProps & React.RefAttributes<HTMLDivElement>>;