import { ChangeEvent, MouseEvent, KeyboardEvent, FocusEvent, ForwardRefExoticComponent, ReactNode, HTMLProps } from 'react';
import { ChangeEvent as CleaveChangeEvent } from 'cleave.js/react/props';
import { ResponsiveProp } from '../../types';
import { BoxProps } from '../Box/Box';
export declare type SelectInputInsetSize = 'md' | 'lg';
export interface SelectInputInsetProps {
    /**
     * 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;
    /**
     * List of options for the select input.
     */
    options: {
        value: string | number;
        label: string | number;
    }[];
    /**
     * Callback function to call on change event.
     */
    onChange: (event: ChangeEvent<HTMLInputElement> | CleaveChangeEvent<HTMLInputElement>) => void;
    /**
     * Value of selected option. Should match the value key in the option object.
     */
    value: string | number | null;
    /**
     * 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;
    /**
     * Additional clarifying text to help describe the input
     */
    helpText?: ReactNode;
    /**
     * 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 '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;
    /**
     * Visual indicator that the field is required, that gets appended to the label
     */
    requiredIndicator?: ReactNode;
    /**
     * The size of the text input.
     */
    size?: SelectInputInsetSize | ResponsiveProp<SelectInputInsetSize>;
    /**
     * Additional props to be spread to rendered element
     */
    [x: string]: any;
}
export declare const SelectInputInset: ForwardRefExoticComponent<SelectInputInsetProps>;