import { Value } from '@tempots/dom';
import { ControlSize } from '../../theme';
import { ThemeColorName } from '../../../tokens';
/**
 * Configuration options for the {@link OTPInput} component.
 */
export interface OTPInputOptions {
    /** Number of input digits/characters. @default 6 */
    length?: number;
    /** The current OTP value as a string */
    value?: Value<string>;
    /** Callback invoked on every input change */
    onChange?: (value: string) => void;
    /** Callback invoked when all digits have been entered */
    onComplete?: (value: string) => void;
    /** Whether the input is disabled. @default false */
    disabled?: Value<boolean>;
    /**
     * Whether to mask the input characters (like a password).
     * @default false
     */
    mask?: boolean;
    /**
     * Allowed input type.
     * - `'numeric'` allows only digits 0-9
     * - `'alphanumeric'` allows letters and digits
     * @default 'numeric'
     */
    type?: 'numeric' | 'alphanumeric';
    /** Visual size of the input cells. @default 'md' */
    size?: Value<ControlSize>;
    /** Theme color for the focused input border. @default 'primary' */
    color?: Value<ThemeColorName>;
    /** Placeholder character shown in empty cells. @default '' */
    placeholder?: string;
    /** Whether to auto-focus the first cell on mount. @default false */
    autoFocus?: boolean;
}
/**
 * A one-time password (OTP) / PIN input component.
 *
 * Renders a row of individual input cells for entering verification codes,
 * PINs, or any fixed-length token. Features automatic focus advancement
 * between cells, paste support, keyboard navigation (arrow keys, backspace),
 * and optional character masking.
 *
 * @param options - Configuration for the OTP input
 * @returns A row of input cells for OTP entry
 *
 * @example
 * ```ts
 * import { prop } from '@tempots/dom'
 * import { OTPInput } from '@tempots/beatui'
 *
 * const code = prop('')
 * OTPInput({
 *   value: code,
 *   onChange: code.set,
 *   onComplete: (v) => console.log('Code entered:', v),
 *   length: 6,
 * })
 * ```
 *
 * @example
 * ```ts
 * // Masked 4-digit PIN
 * OTPInput({
 *   value: prop(''),
 *   onChange: (v) => console.log(v),
 *   length: 4,
 *   mask: true,
 *   type: 'numeric',
 *   size: 'lg',
 * })
 * ```
 */
export declare function OTPInput({ length, value, onChange, onComplete, disabled, mask, type, size, color, placeholder, autoFocus, }?: OTPInputOptions): import("@tempots/dom").Renderable;
