import { ReactNode } from "react";
import { VoidFunc, VoidFuncNoParam } from "../../../fd-toolbox/functions/internal-getter-setter-functions";
import { VariantProps } from "class-variance-authority";
import type { ChangeEventType, FocusEventType } from "../../../fd-toolbox/types/react-types";
import { booleanStringValues } from "@base-repo/constants/type-string-values";
import { accessibilityAttributeNames, componentVariantNames } from "../../../fd-toolbox/constants/html-constants";
/**
 * Props of {@link Input}
 */
export interface InputProps extends VariantProps<typeof inputVariants> {
    min?: string | number;
    max?: string | number;
    placeholder?: string;
    required?: boolean;
    readOnly?: boolean;
    onClick?: React.MouseEventHandler<HTMLInputElement>;
    type?: string;
    defaultValue?: string;
    style?: React.CSSProperties;
    onChangeCapture?: VoidFunc<ChangeEventType<HTMLInputElement>>;
    maxLength?: number;
    onFocus?: VoidFuncNoParam;
    disabled?: boolean;
    /** Unique identifier for the input element. */
    inputId?: string;
    /** The current value of the input. */
    value: string;
    /** Event handler called when the input value changes. */
    onChange?: VoidFunc<string>;
    /** Event handler called when the clear icon is clicked. */
    onClear?: VoidFuncNoParam;
    /** Whether to display the clear icon when the input is not empty. */
    showClearIcon?: boolean;
    /** Additional CSS class for custom styling. */
    className?: string;
    /** Label text displayed above or next to the input. */
    label?: string;
    /** Disables input animation for the first render. */
    skipAnimationOnce?: boolean;
    /**
     * Event handler called when the input loses focus.
     * @param value The current input value when blur occurs.
     */
    onBlur?: VoidFunc<string, FocusEventType<HTMLInputElement>>;
    /** React children rendered inside the input container. */
    children?: ReactNode;
    /** Disables focusing behavior. */
    disableFocus?: boolean;
    [accessibilityAttributeNames.ariaInvalid]?: boolean | typeof booleanStringValues.false | typeof booleanStringValues.true | "grammar" | "spelling";
    id?: string;
}
/** @monorepo-internal */
export type InputVariants = typeof componentVariantNames.bordered | typeof componentVariantNames.float | undefined;
/**
 * Using {@link https:/cva.style/docs/getting-started/variants class-variance-authority}
 */
export declare const inputVariants: (props?: {
    variant?: "float" | "bordered";
} & import("class-variance-authority/types").ClassProp) => string;
/**
 * Customizable input component with floating label, clear functionality, and support for additional action buttons
 *
 * @param InputProps {@link InputProps}
 *
 * @example
 * ```tsx
    function MyComponent() {
        const form = useForm<FormValues>({
            defaultValues: {
                search: "",
            },
        });

        return (
            <FormField
                control={form.control}
                name="search"
                render={({ field }) => (
                    <Input
                        {...field}
                        type="text"
                        label="Label"
                        placeholder="Placeholder"
                        showClearIcon={true}
                    />
                )}
            />
        );
    }
 * ```
 */
export declare function Input({ className, inputId, showClearIcon, value, onChange, onClear, onBlur, label, skipAnimationOnce, variant, children: icons, disableFocus, ref, defaultValue, disabled, [accessibilityAttributeNames.ariaInvalid]: ariaInvalid, readOnly, required, placeholder, onClick, style, onChangeCapture, min, max, maxLength, onFocus, type, id, }: InputProps & {
    ref?: React.Ref<HTMLInputElement>;
}): import("react").JSX.Element;
export declare namespace Input {
    var displayName: "Input";
}
