import { ChangeEvent, MouseEvent, KeyboardEvent, FocusEvent, ForwardRefExoticComponent, ReactNode, HTMLProps, InputHTMLAttributes } from 'react';
import { ChangeEvent as CleaveChangeEvent } from 'cleave.js/react/props';
import { ResponsiveProp, UnknownPropertiesObjType } from '../../types';
import { BoxProps } from '../Box/Box';
export declare type InputMaskType = ('phone' | 'creditCard' | 'date') | UnknownPropertiesObjType;
export declare type TextInputSize = 'sm' | 'md' | 'lg';
export interface TextInputProps {
    /**
     * The input's id attribute. Used to programmatically tie the input with its label.
     */
    id: string;
    /**
     * Custom content to be displayed above the input. If the label is hidden, will be used to set aria-label attribute.
     */
    label: string;
    /**
     * Callback function to call on change event.
     */
    onChange: (event: ChangeEvent<HTMLInputElement> | CleaveChangeEvent<HTMLInputElement>) => void;
    /**
     * The text value of the input. Required since our Input is a controlled component.
     */
    value: InputHTMLAttributes<HTMLInputElement>['value'];
    /**
     * Automatically focus the input when the page is loaded.
     */
    autoFocus?: boolean;
    /**
     * Custom class to be added to standard input classes.
     */
    className?: string;
    /**
     * Mark the input field as invalid and display a validation message.
     * Pass a string or node to render a validation message below the input.
     */
    error?: ReactNode;
    /**
     * Visually hide the label.
     */
    hideLabel?: boolean;
    /**
     * Additional clarifying text to help describe the input
     */
    helpText?: ReactNode;
    /**
     * Pass a value to apply a mask to the input value.
     * Can be one of the existing present strings, or a custom object with options.
     * For options object formats See https://github.com/nosir/cleave.js.
     */
    inputMask?: InputMaskType;
    /**
     * Props passed directly to the input element of the component
     */
    inputProps?: BoxProps & HTMLProps<HTMLInputElement>;
    /**
     * The input's disabled attribute
     */
    isDisabled?: boolean;
    /**
     * The required and aria-required attributes on the input
     */
    isRequired?: boolean;
    /**
     * The input's 'maxlength' attribute.
     * NOTE: initializing the input with a value longer than the desired maxlength will not trim this value.
     */
    maxLength?: number;
    /**
     * The input's 'name' attribute.
     */
    name?: string;
    /**
     * Callback function to call on blur event.
     */
    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
    /**
     * Callback function to call when input us cleared. When this is passed,
     * the input will display an icon on the right side, for triggering this callback.
     */
    onClear?: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
    /**
     * Callback function to call on focus event.
     */
    onFocus?: (event: FocusEvent<HTMLInputElement>) => void;
    /**
     * The input placeholder attribute.
     */
    placeholder?: string;
    /**
     * An input helper rendered before the input field value
     */
    prefix?: ReactNode;
    /**
     * Visual indicator that the field is required, that gets appended to the label
     */
    requiredIndicator?: ReactNode;
    /**
     * The size of the text input.
     */
    size?: TextInputSize | ResponsiveProp<TextInputSize>;
    /**
     * An input helper rendered after the input field value
     */
    suffix?: ReactNode;
    /**
     * The input 'type' value. Defaults to type 'text'.
     */
    type?: InputHTMLAttributes<HTMLInputElement>['type'];
    /**
     * Additional props to be spread to rendered element
     */
    [x: string]: any;
}
export declare const TextInput: ForwardRefExoticComponent<TextInputProps>;