import React from 'react';
import type { InputHTMLAttributes } from 'react';
import type { PropValidators, NumberInputTheme, OtherHTMLAttributes, PickPropsWithExceptions } from '@instructure/shared-types';
import type { WithStyleProps, ComponentStyle, Spacing } from '@instructure/emotion';
import type { FormFieldOwnProps, FormMessage } from '@instructure/ui-form-field';
import type { InteractionType, WithDeterministicIdProps } from '@instructure/ui-react-utils';
import { Renderable } from '@instructure/shared-types';
type NumberInputOwnProps = {
    /**
     * The form field label.
     */
    renderLabel: Renderable;
    /**
     * The id of the input. One is generated if not supplied.
     */
    id?: string;
    /**
     * Specifies if interaction with the input is enabled, disabled, or readonly.
     * When "disabled", the input changes visibly to indicate that it cannot
     * receive user interactions. When "readonly" the input still cannot receive
     * user interactions but it keeps the same styles as if it were enabled.
     */
    interaction?: InteractionType;
    /**
     * Array of objects with shape: `{
     *   text: ReactNode,
     *   type: One of: ['newError', 'error', 'hint', 'success', 'screenreader-only']
     * }`
     */
    messages?: FormMessage[];
    /**
     * Html placeholder text to display when the input has no value. This
     * should be hint text, not a label replacement.
     */
    placeholder?: string;
    /**
     * Whether or not the text input is required.
     */
    isRequired?: boolean;
    /**
     * Whether or not to display the up/down arrow buttons.
     */
    showArrows?: boolean;
    /**
     * The size of the input.
     */
    size?: 'medium' | 'large';
    /**
     * The value of the input (should be accompanied by an `onChange` prop).
     */
    value?: string | number;
    /**
     * The width of the input.
     */
    width?: string;
    /**
     * The display of the root element.
     */
    display?: 'inline-block' | 'block';
    /**
     * A function that provides a reference to the actual input element.
     */
    inputRef?: (element: HTMLInputElement | null) => void;
    /**
     * Callback fired when input receives focus.
     */
    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * Callback fired when the input loses focus.
     */
    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
    /**
     * Callback executed when the input fires a change event.
     * @param {Object} event - the event object
     * @param {string} value - the string value of the input
     */
    onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
    /**
     * Called when the down arrow button is clicked, or the down arrow key is
     * pressed.
     */
    onDecrement?: (event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => void;
    /**
     * Called when the up arrow button is clicked, or the up arrow key is
     * pressed.
     */
    onIncrement?: (event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => void;
    /**
     * Callback fired when a key is pressed.
     */
    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
    /**
     * The inputMode attribute of the underlying `input` element can be one of ['numeric', 'decimal', 'tel']
     */
    inputMode?: 'numeric' | 'decimal' | 'tel';
    /**
     * The text alignment of the input.
     */
    textAlign?: 'start' | 'center';
    /**
     * sets the input type to string and allows string as value
     */
    allowStringValue?: boolean;
    /**
     * Sets the icons to be rendered for increase and decrease buttons
     */
    renderIcons?: {
        increase: Renderable;
        decrease: Renderable;
    };
    /**
     * Margin around the component. Accepts a `Spacing` token. See token values and example usage in [this guide](https://instructure.design/#layout-spacing).
     */
    margin?: Spacing;
};
type NumberInputState = {
    hasFocus: boolean;
};
type NumberInputStyleProps = NumberInputState & {
    interaction: InteractionType;
    invalid: boolean;
};
type PropKeys = keyof NumberInputOwnProps;
type AllowedPropKeys = Readonly<Array<PropKeys>>;
type NumberInputProps = PickPropsWithExceptions<FormFieldOwnProps, 'label' | 'inline' | 'id' | 'elementRef'> & NumberInputOwnProps & WithStyleProps<NumberInputTheme, NumberInputStyle> & OtherHTMLAttributes<NumberInputOwnProps, InputHTMLAttributes<NumberInputOwnProps & Element>> & WithDeterministicIdProps;
type NumberInputStyle = ComponentStyle<'numberInput' | 'arrowContainer' | 'arrow' | 'inputWidth' | 'inputContainer' | 'input' | 'requiredInvalid'>;
declare const propTypes: PropValidators<PropKeys>;
declare const allowedProps: AllowedPropKeys;
export type { NumberInputProps, NumberInputState, NumberInputStyleProps, NumberInputStyle };
export { propTypes, allowedProps };
//# sourceMappingURL=props.d.ts.map