import { default as React } from 'react';
export declare const DEFAULT_TYPE = "text";
export declare const SUPPORTED_TYPES: string[];
export type MaskVisibility = 'always' | 'onFocus' | 'never';
export type MaskDefinition = {
    mask: string;
    definitions?: Record<string, string | RegExp>;
    startsWith?: string;
    [key: string]: any;
};
export type ClearableInputProps = {
    /**
     * Gives the input element the id.
     */
    id?: string;
    /**
     * Gives the input element a name.
     */
    name?: string;
    /**
     * The translated text that shall be shown when the input is empty.
     */
    placeholder?: string | React.ReactNode;
    /**
     * Defines the type of the input itself.
     *
     * There are three types supported:
     * `text`, `email`, `password`.
     *
     * @default 'text'
     */
    type?: 'text' | 'password' | 'email';
    /**
     * Initial value of the ClearableInput. Pass this prop if you want to use this
     * component as an uncontrolled component.
     */
    defaultValue?: string;
    /**
     * Value of the ClearableInput. Pass this prop if you want to use this
     * component as a controlled component.
     */
    value?: string;
    /**
     * Defines the maximum amount of characters that can be entered.
     */
    maxLength?: number;
    /**
     * Defines the tab index to be added to the input element.
     *
     * @default 0
     */
    tabIndex?: number;
    /**
     * Defined whether or not the input has the error styling.
     *
     * @default false
     */
    hasError?: boolean;
    /**
     * The callback ref for the underlying input. Alternatively, use can use a forward ref.
     */
    inputRef?: React.RefObject<HTMLInputElement>;
    /**
     * Sets autocomplete value for autosuggest forms.
     */
    autoComplete?: string;
    /**
     * Callback function for when the value changes. Receives new value as an argument.
     * @param newValue
     * @param event
     * @returns
     */
    onChange?: (newValue: string, event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>) => void;
    /**
     * Callback function which gets triggered when the input looses the focus.
     * @param event
     * @returns
     */
    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * Callback function which gets triggered when the input gains the focus.
     * @param event
     * @returns
     */
    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * Callback function for when the value is cleared via the clear button.
     * @param event
     * @returns
     */
    onClear?: (event: React.MouseEvent<HTMLSpanElement>) => void;
    /**
     * Callback function for every key pressed including `Enter` key.
     * @param event
     * @returns
     */
    onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
    /**
     * Callback triggered when clicked into the input to react on it like when using an auto suggest dropdown
     * @param event
     * @returns
     */
    onClick?: (event: React.MouseEvent<HTMLInputElement>) => void;
    /**
     * The mask prop will allow to use the component with an input mask.
     * It defines the pattern that should be followed.
     *
     * For more details on masking, checkout the third party documentation for the
     * input mask here: {@link https://imask.js.org/guide.html}
     *
     * Simple masks can be defined as strings.
     *
     * The following characters will define mask format:
     *
     * - "0" = allowed input: "0-9" (digit)
     * - "a" = allowed input: "a-z, A-Z" (letter)
     * - "*" = allowed input: any character
     * - "#" = allowed input: "0-9, a-z, A-Z" (digit or letter)
     *
     * Other chars which is not in custom definitions supposed to be fixed:
     *
     * - [] - make input optional
     * - {} - include fixed part in unmasked value
     * - ` - prevent symbols shift back
     *
     * If definition character should be treated as fixed it should be escaped by \\ (E.g. \\0).
     *
     * Additionally you can provide custom definitions.
     *
     * @example
     * '-- ### ### ###' or '+49 00 000 00'
     */
    mask?: string | (string | RegExp)[] | RegExp | DateConstructor | number | Function | MaskDefinition[];
    /**
     * Placeholder to cover unfilled parts of the mask.
     *
     * @default '_'
     */
    maskPlaceholder?: string | null;
    /**
     * Enable characters overwriting
     *
     * @default true
     */
    maskOverwrite?: boolean | 'shift' | undefined;
    /**
     * Chooses the mask for dynamic masking depending on input value.
     * Note, this function may not be an empty function, otherwise the mask selection won't work
     */
    maskDispatch?: (appended: string, dynamicMasked: any) => any;
    /**
     * Pattern used by IMask date masks.
     *
     * @example
     * 'Y-m-d'
     */
    pattern?: string;
    /**
     * Formats a typed date value to the masked string representation.
     */
    format?: (value: Date | null, masked: unknown) => string;
    /**
     * Parses the masked string representation back to a typed date value.
     */
    parse?: (value: string, masked: unknown) => Date | null;
    /**
     * Enables IMask autofix behavior for date and number masks.
     */
    autofix?: boolean | 'pad';
    /**
     * Controls when the mask pattern is visible.
     *
     * - 'always': Mask is always visible
     * - 'onFocus': Mask is hidden but shown when input is focused
     * - 'never': Mask is never shown
     *
     * @default 'always'
     */
    maskVisibility?: MaskVisibility;
    /**
     * Custom definitions to have more control over your mask. The defined character will be replaced in your mask.
     *
     * @example
     * mask='AAA AAA.AA'
     * maskDefinitions={{ A: /[A-Z0-9]/ }}
     */
    maskDefinitions?: Record<string, string | RegExp>;
    /**
     * Minimum value to be entered. This prop is extended to accept a Date
     * when used with an input mask.
     */
    min?: string | number | undefined | Date;
    /**
     * Maximum value to be entered. This prop is extended to accept a Date
     * when used with an input mask.
     */
    max?: string | number | undefined | Date;
    /**
     * Disabled the input component.
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * Makes the input read-only.
     */
    readOnly?: boolean;
    /**
     * Controls whether the clear button is rendered.
     * This might be useful to reuse this component for other use-cases.
     *
     * @default true
     */
    showClearButton?: boolean;
    /**
     * Additional classes to be set on the input element.
     */
    inputClassName?: string;
    /**
     * Additional classes to be set on the wrapper element.
     */
    className?: string;
    /**
     * Render-prop to customize the rendered input.
     *
     * The function gets the `inputProps` passed and is responsible for rendering the custom `<input>` component.
     *
     * Receives the computed `input` props so you can render your own field. See: {@link https://reactjs.org/docs/render-props.html}
     */
    children?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;
};
declare const ClearableInput: React.ForwardRefExoticComponent<ClearableInputProps & React.RefAttributes<HTMLInputElement>>;
export default ClearableInput;
