import { type TextInput as RNTextInput } from "react-native";
import { type ColorTokens, type StyleProp, type ViewStyle, type TextStyle } from "../../style/index.js";
export type Size = "small" | "base" | "large";
export interface InputOTPProps {
    /** Number of segment cells (and the max code length). Default 6. */
    length?: number;
    /** Current code (controlled). Only the typed characters, e.g. "123". Omit for
     *  uncontrolled use; a bare <InputOTP /> is typeable out of the box. */
    value?: string;
    /** Starting code for the uncontrolled field. Defaults to empty. */
    defaultValue?: string;
    /** Called with the new code (cleaned, sliced to `length`) on each change (both modes). */
    onChangeText?: (code: string) => void;
    /** Fired once when the code reaches `length` digits. */
    onComplete?: (code: string) => void;
    /** Split the run into groups of this many cells, separated by a dash: `length={6}`
     *  with `groups={3}` reads 123-456. Omit for one unbroken run. */
    groups?: number;
    /** Accept letters as well as digits, and ask for the text keyboard instead of the
     *  number pad. Off by default: a one-time code is digits only. */
    alphanumeric?: boolean;
    /** Focus the field on mount. */
    autoFocus?: boolean;
    /** Disable input and dim the cells. */
    disabled?: boolean;
    /** Render a bullet (●) instead of the character, for passcode entry. */
    masked?: boolean;
    small?: boolean;
    large?: boolean;
    /** E2E hook forwarded to the root element. */
    testID?: string;
    /** Outer layout composition only (width/flex within a parent), never a restyle hook. */
    style?: StyleProp<ViewStyle>;
}
export interface InputOTPSkin {
    /** Gap between cells. shadcn connects cells (gap 0, shared borders); iOS/M3 separate them. */
    gap: (size: Size) => number;
    /** Whether cells share borders as one connected group (web shadcn) — rounds only the outer corners. */
    connected: boolean;
    /** A single cell box: shape, fill, border, size. `groupStart`/`groupEnd` mark the ends of
     *  each connected run (the whole row, or one `groups` chunk) so the web skin rounds and
     *  closes a run's outer edges while its interior cells keep sharing borders. */
    cell: (t: ColorTokens, size: Size, state: {
        active: boolean;
        filled: boolean;
        groupStart: boolean;
        groupEnd: boolean;
    }) => ViewStyle;
    /** The digit (or bullet) text inside a cell. */
    digit: (t: ColorTokens, size: Size) => TextStyle;
    /** The dash drawn between two `groups`. */
    separator: (t: ColorTokens, size: Size) => TextStyle;
    /** The caret bar drawn in the active empty cell. */
    caret: (t: ColorTokens, size: Size) => ViewStyle;
    /** Whether the caret blinks (~1s cycle), the native insertion-point idiom on iOS/Android.
     *  The web skin keeps its established static bar. */
    caretBlink: boolean;
    /** Opacity applied to the whole control when disabled. */
    disabledOpacity: number;
}
/** Build an InputOTP component from a platform skin. */
export declare function createInputOTP(skin: InputOTPSkin): import("react").ForwardRefExoticComponent<InputOTPProps & import("react").RefAttributes<RNTextInput>>;
//# sourceMappingURL=input-otp.shared.d.ts.map