/**
 * Input — a text field with a label, a description and an error line.
 *
 * The field's focus state is animated rather than switched. A border that
 * snaps between two colours reads as a redraw; one that crosses over in
 * 150ms reads as the field responding to you. The interpolation runs on the
 * UI thread, so it costs nothing and keeps up with a fast tab through a form.
 *
 * Two backgrounds, because a field's job changes with what surrounds it:
 * `outline` sits on the page and draws its own edge; `filled` sits inside a
 * card or a sheet, where a second border next to the container's own reads as
 * a seam.
 *
 * ```tsx
 * <Input label="Email" placeholder="you@example.com" />
 * <Input variant="filled" size="lg" label="Name" isRequired />
 * <Input label="Note" startContent={<PencilIcon size={18} />} />
 * ```
 *
 * ## An icon inside the field, and why it lives here
 *
 * `startContent` and `endContent` are measured and turned into padding on the
 * text, so a value never runs underneath them however wide they turn out to
 * be. They are positioned against the *field box* rather than against the
 * component, which is the whole reason they are a prop rather than something
 * you compose: a label and a description are laid out above and below the
 * field, so anything centred on the component as a whole drifts upward the
 * moment a label is added.
 *
 * Both are pressable. A button dropped in there — a clear ✕, a show-password
 * eye — gets its own touches, while the padding around it stays transparent so
 * a tap that misses still lands on the field and puts the caret in it. An icon
 * that is only decoration should say so with `interactiveContent={false}`,
 * which gives the whole field back to the caret and takes the icon out of the
 * accessibility tree.
 *
 * `InputGroup` is still the right answer for a decorator that is not part of
 * the field — a button attached to its end, a select bolted to its start, an
 * addon with its own background. It measures the same way; it just spans a
 * different box.
 */
import { type ReactNode } from 'react';
import { TextInput, type TextInputProps } from 'react-native';
import { type VariantProps } from 'tailwind-variants';
import type { KeyboardAvoidanceMode } from '../../hooks/use-keyboard-avoidance.js';
declare const inputVariants: import("tailwind-variants").TVReturnType<{
    variant: {
        outline: {
            field: string;
        };
        filled: {
            field: string;
        };
    };
    size: {
        sm: {
            field: string;
            startContent: string;
            endContent: string;
        };
        md: {
            field: string;
            startContent: string;
            endContent: string;
        };
        lg: {
            field: string;
            startContent: string;
            endContent: string;
        };
    };
    multiline: {
        true: {
            field: string;
            startContent: string;
            endContent: string;
        };
    };
    disabled: {
        true: {
            field: string;
            startContent: string;
            endContent: string;
        };
    };
}, {
    container: string;
    field: string;
    description: string;
    error: string;
    fieldBox: string;
    startContent: string;
    endContent: string;
}, undefined, {
    variant: {
        outline: {
            field: string;
        };
        filled: {
            field: string;
        };
    };
    size: {
        sm: {
            field: string;
            startContent: string;
            endContent: string;
        };
        md: {
            field: string;
            startContent: string;
            endContent: string;
        };
        lg: {
            field: string;
            startContent: string;
            endContent: string;
        };
    };
    multiline: {
        true: {
            field: string;
            startContent: string;
            endContent: string;
        };
    };
    disabled: {
        true: {
            field: string;
            startContent: string;
            endContent: string;
        };
    };
}, {
    container: string;
    field: string;
    description: string;
    error: string;
    fieldBox: string;
    startContent: string;
    endContent: string;
}, import("tailwind-variants").TVReturnType<{
    variant: {
        outline: {
            field: string;
        };
        filled: {
            field: string;
        };
    };
    size: {
        sm: {
            field: string;
            startContent: string;
            endContent: string;
        };
        md: {
            field: string;
            startContent: string;
            endContent: string;
        };
        lg: {
            field: string;
            startContent: string;
            endContent: string;
        };
    };
    multiline: {
        true: {
            field: string;
            startContent: string;
            endContent: string;
        };
    };
    disabled: {
        true: {
            field: string;
            startContent: string;
            endContent: string;
        };
    };
}, {
    container: string;
    field: string;
    description: string;
    error: string;
    fieldBox: string;
    startContent: string;
    endContent: string;
}, undefined, unknown, unknown, undefined>>;
type InputVariantProps = VariantProps<typeof inputVariants>;
export interface InputProps extends TextInputProps, Omit<InputVariantProps, 'disabled' | 'multiline'> {
    className?: string;
    containerClassName?: string;
    label?: string;
    description?: string;
    /** Error message. When set, the field renders in its invalid state. */
    errorMessage?: string;
    /** Marks the field required — an asterisk on the label, and the a11y state. */
    isRequired?: boolean;
    disabled?: boolean;
    /**
     * Content inside the field, before the text — usually an icon. Measured, so
     * the text is padded clear of it however wide it is.
     *
     * `start`, not `left`: it follows the reading direction, and swaps sides
     * under `Direction dir="rtl"` along with the text it introduces.
     */
    startContent?: ReactNode;
    /** Content inside the field, after the text — an icon, a unit, a count. */
    endContent?: ReactNode;
    /**
     * Whether touches reach the content.
     *
     * On by default, so a button placed in the field — a clear ✕, a
     * show-password eye, a unit picker — is pressable without anything else
     * being passed. Only the content itself takes those touches: the padding
     * around it is transparent, so a tap that misses the button still lands on
     * the field and puts the caret in it.
     *
     * Turn it off for pure decoration, where the icon should not be a target at
     * all and every pixel of the field should focus it. That also drops the
     * content from the accessibility tree, which is right for an icon that only
     * restates the label.
     */
    interactiveContent?: boolean;
    /**
     * Keep the field clear of the software keyboard. Moves by exactly the
     * overlap, and not at all when the field is already clear — or when the
     * keyboard belongs to a different field. The overlap is re-read every frame
     * while the field is focused, so the field keeps its place in the page as it
     * scrolls under and back out of the keyboard.
     *
     * Install `react-native-keyboard-controller` for this to behave on Android.
     *
     * Do not toggle this at runtime — it changes which component renders the
     * container, which would remount the field and drop focus.
     */
    avoidKeyboard?: boolean;
    /**
     * How the field gets clear. `lift` moves it up by its overlap and follows
     * the scroll — right for a field in the flow of a page. `dock` makes it
     * travel with the keyboard, for a composer already pinned near the bottom
     * edge; pair it with `keyboardBottomInset`.
     */
    keyboardMode?: KeyboardAvoidanceMode;
    /** Gap kept between the field and the keyboard. `keyboardMode="lift"` only. */
    keyboardOffset?: number;
    /**
     * How far above the bottom edge the field already sits — usually the safe
     * area inset. `keyboardMode="dock"` only.
     */
    keyboardBottomInset?: number;
}
export declare const Input: import("react").ForwardRefExoticComponent<InputProps & import("react").RefAttributes<TextInput>>;
export {};
//# sourceMappingURL=index.d.ts.map