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

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

import type { ReactNode, Ref } from "react";
import { TextInput as RNTextInput, type TextInputProps as RNTextInputProps } from "react-native";
import { type VariantProps } from "tailwind-variants";
declare const inputVariants: import("tailwind-variants").TVReturnType<{
    multiline: {
        false: {
            input: string;
            startSlot: string;
            endSlot: string;
        };
        true: {
            input: string;
            startSlot: string;
            endSlot: string;
        };
    };
    withStartSlot: {
        true: {
            input: string;
        };
        false: {};
    };
    withEndSlot: {
        true: {
            input: string;
        };
        false: {};
    };
    forceStyle: {
        undefined: {
            input: string;
        };
        hover: {
            input: string;
        };
        focus: {
            input: string;
        };
        press: {
            input: string;
        };
    };
}, {
    input: string;
    frame: string;
    startSlot: string;
    endSlot: string;
}, undefined, {
    multiline: {
        false: {
            input: string;
            startSlot: string;
            endSlot: string;
        };
        true: {
            input: string;
            startSlot: string;
            endSlot: string;
        };
    };
    withStartSlot: {
        true: {
            input: string;
        };
        false: {};
    };
    withEndSlot: {
        true: {
            input: string;
        };
        false: {};
    };
    forceStyle: {
        undefined: {
            input: string;
        };
        hover: {
            input: string;
        };
        focus: {
            input: string;
        };
        press: {
            input: string;
        };
    };
}, {
    input: string;
    frame: string;
    startSlot: string;
    endSlot: string;
}, import("tailwind-variants").TVReturnType<{
    multiline: {
        false: {
            input: string;
            startSlot: string;
            endSlot: string;
        };
        true: {
            input: string;
            startSlot: string;
            endSlot: string;
        };
    };
    withStartSlot: {
        true: {
            input: string;
        };
        false: {};
    };
    withEndSlot: {
        true: {
            input: string;
        };
        false: {};
    };
    forceStyle: {
        undefined: {
            input: string;
        };
        hover: {
            input: string;
        };
        focus: {
            input: string;
        };
        press: {
            input: string;
        };
    };
}, {
    input: string;
    frame: string;
    startSlot: string;
    endSlot: string;
}, undefined, unknown, unknown, undefined>>;
type InputVariantProps = Pick<VariantProps<typeof inputVariants>, "forceStyle" | "multiline">;
declare const MODE_PROPS: {
    readonly password: {
        readonly secureTextEntry: true;
        readonly autoComplete: "current-password";
    };
    readonly number: {
        readonly inputMode: "numeric";
        readonly keyboardType: "numeric";
    };
    readonly tel: {
        readonly inputMode: "tel";
        readonly autoComplete: "tel";
        readonly keyboardType: "phone-pad";
    };
    readonly email: {
        readonly inputMode: "email";
        readonly autoComplete: "email";
        readonly keyboardType: "email-address";
    };
    readonly url: {
        readonly inputMode: "url";
        readonly keyboardType: "url";
    };
    readonly search: {
        readonly inputMode: "search";
    };
    readonly webSearch: {
        readonly inputMode: "search";
        readonly keyboardType: "web-search";
    };
};
export type InputTextMode = keyof typeof MODE_PROPS;
export interface InputTextProps extends Omit<RNTextInputProps, "editable">, InputVariantProps {
    /**
     * On the input itself. With a `startSlot` / `endSlot`, on the frame around
     * it instead: that frame is then the box the parent lays out, and the input
     * stretches to it.
     */
    className?: string;
    disabled?: boolean;
    /**
     * Overlaid on the field's leading 44px, the text padded past it. Fixed-width
     * content only: an `Icon` (which carries its own `text-*` ink) or a `sm`
     * `IconButton`. A tap on it reaches the input unless the content takes it.
     */
    startSlot?: ReactNode;
    /** Same as `startSlot`, on the trailing 44px. */
    endSlot?: ReactNode;
    /**
     * The field is in error: its border takes the danger accent (through the
     * `interactive-outlined-*` tokens, so hover and focus stay on it) and it is
     * `aria-invalid`. From `FormItem`'s render params, next to `describedBy`.
     */
    invalid?: boolean;
    mode?: InputTextMode;
    ref?: Ref<RNTextInput>;
    /**
     * react-native's types have no `aria-describedby` / `aria-required`, but
     * react-native-web forwards both and native ignores unknown props. Web only
     * in effect: neither platform has an equivalent.
     */
    "aria-describedby"?: string;
    "aria-required"?: boolean;
}
export declare function InputText({ className, disabled, invalid, mode, multiline, forceStyle, startSlot, endSlot, ...props }: InputTextProps): ReactNode;
export {};
//# sourceMappingURL=InputText.d.ts.map