alouette/dist/definitions/ui/inputs/InputCode.d.ts

A modern, customizable design system built on top of NativeWind v5 with configurable defaults

import { type ReactNode, type Ref } from "react";
import { TextInput as RNTextInput, type TextInputProps as RNTextInputProps } from "react-native";
import { type VariantProps } from "tailwind-variants";
declare const inputCodeVariants: import("tailwind-variants").TVReturnType<{
    disabled: {
        true: {
            cell: string;
            char: string;
            input: string;
        };
        false: {
            cell: string;
            char: string;
            input: string;
        };
    };
    focused: {
        true: {};
        false: {};
    };
    active: {
        true: {};
        false: {};
    };
    forceStyle: {
        undefined: {
            cell: string;
        };
        hover: {
            cell: string;
        };
        focus: {};
        press: {
            cell: string;
        };
    };
}, {
    root: string;
    cells: string;
    cell: string;
    char: string;
    caret: string;
    input: string;
}, undefined, {
    disabled: {
        true: {
            cell: string;
            char: string;
            input: string;
        };
        false: {
            cell: string;
            char: string;
            input: string;
        };
    };
    focused: {
        true: {};
        false: {};
    };
    active: {
        true: {};
        false: {};
    };
    forceStyle: {
        undefined: {
            cell: string;
        };
        hover: {
            cell: string;
        };
        focus: {};
        press: {
            cell: string;
        };
    };
}, {
    root: string;
    cells: string;
    cell: string;
    char: string;
    caret: string;
    input: string;
}, import("tailwind-variants").TVReturnType<{
    disabled: {
        true: {
            cell: string;
            char: string;
            input: string;
        };
        false: {
            cell: string;
            char: string;
            input: string;
        };
    };
    focused: {
        true: {};
        false: {};
    };
    active: {
        true: {};
        false: {};
    };
    forceStyle: {
        undefined: {
            cell: string;
        };
        hover: {
            cell: string;
        };
        focus: {};
        press: {
            cell: string;
        };
    };
}, {
    root: string;
    cells: string;
    cell: string;
    char: string;
    caret: string;
    input: string;
}, undefined, unknown, unknown, undefined>>;
export type InputCodeMode = "alphanumeric" | "numeric";
export interface InputCodeProps extends Pick<VariantProps<typeof inputCodeVariants>, "forceStyle"> {
    /** Number of characters, one cell each. */
    length?: number;
    /** The code's alphabet: digits, or digits and uppercase letters. */
    mode?: InputCodeMode;
    value?: string;
    defaultValue?: string;
    onValueChange?: (code: string) => void;
    /** Fires once each time the last cell is filled, with the full code. */
    onComplete?: (code: string) => void;
    onBlur?: RNTextInputProps["onBlur"];
    disabled?: boolean;
    /**
     * The field is in error: the cells take the danger accent (through the
     * `interactive-outlined-*` tokens) and the input is `aria-invalid`. From
     * `FormItem`'s render params, next to `describedBy`.
     */
    invalid?: boolean;
    autoFocus?: boolean;
    /** On the row the parent lays out; the cells and the input are inside it. */
    className?: string;
    ref?: Ref<RNTextInput>;
    testID?: string;
    "aria-label"?: string;
    "aria-labelledby"?: string;
    /**
     * react-native's types have no `aria-describedby` / `aria-required`, but
     * react-native-web forwards both and native ignores unknown props.
     */
    "aria-describedby"?: string;
    "aria-required"?: boolean;
}
export declare function InputCode({ length, mode, value, defaultValue, onValueChange, onComplete, onBlur, disabled, invalid, autoFocus, className, forceStyle, ref, testID, ...ariaProps }: InputCodeProps): ReactNode;
export {};
//# sourceMappingURL=InputCode.d.ts.map