import { Component } from 'react';
import type { NumberInputProps, NumberInputState, NumberInputStyleProps } from './props';
import { Renderable } from '@instructure/shared-types';
/**
---
category: components
id: NumberInput
---
**/
declare class NumberInput extends Component<NumberInputProps, NumberInputState> {
    static readonly componentId = "NumberInput";
    static allowedProps: readonly (keyof {
        renderLabel: Renderable;
        id?: string;
        interaction?: import("@instructure/ui-react-utils").InteractionType;
        messages?: import("@instructure/ui-form-field").FormMessage[];
        placeholder?: string;
        isRequired?: boolean;
        showArrows?: boolean;
        size?: "medium" | "large";
        value?: string | number;
        width?: string;
        display?: "inline-block" | "block";
        inputRef?: (element: HTMLInputElement | null) => void;
        onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
        onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
        onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
        onDecrement?: (event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => void;
        onIncrement?: (event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => void;
        onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
        inputMode?: "numeric" | "decimal" | "tel";
        textAlign?: "start" | "center";
        allowStringValue?: boolean;
        renderIcons?: {
            increase: Renderable;
            decrease: Renderable;
        };
        margin?: import("@instructure/emotion").Spacing;
    })[];
    static propTypes: import("@instructure/shared-types").PropValidators<keyof {
        renderLabel: Renderable;
        id?: string;
        interaction?: import("@instructure/ui-react-utils").InteractionType;
        messages?: import("@instructure/ui-form-field").FormMessage[];
        placeholder?: string;
        isRequired?: boolean;
        showArrows?: boolean;
        size?: "medium" | "large";
        value?: string | number;
        width?: string;
        display?: "inline-block" | "block";
        inputRef?: (element: HTMLInputElement | null) => void;
        onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
        onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
        onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
        onDecrement?: (event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => void;
        onIncrement?: (event: React.KeyboardEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => void;
        onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
        inputMode?: "numeric" | "decimal" | "tel";
        textAlign?: "start" | "center";
        allowStringValue?: boolean;
        renderIcons?: {
            increase: Renderable;
            decrease: Renderable;
        };
        margin?: import("@instructure/emotion").Spacing;
    }>;
    static defaultProps: {
        interaction: undefined;
        messages: never[];
        isRequired: boolean;
        showArrows: boolean;
        size: string;
        display: string;
        textAlign: string;
        inputMode: string;
        allowStringValue: boolean;
    };
    state: NumberInputState;
    ref: Element | null;
    private _input;
    private _id?;
    handleRef: (el: Element | null) => void;
    get id(): string;
    get invalid(): boolean;
    get interaction(): import("@instructure/ui-react-utils").InteractionType;
    componentDidMount(): void;
    componentDidUpdate(): void;
    get makeStyleVariables(): NumberInputStyleProps;
    handleInputRef: (element: HTMLInputElement | null) => void;
    handleFocus: (event: React.FocusEvent<HTMLInputElement>) => void;
    handleBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
    handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
    handleKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
    handleClickUpArrow: (event: React.MouseEvent<HTMLButtonElement>) => void;
    handleClickDownArrow: (event: React.MouseEvent<HTMLButtonElement>) => void;
    arrowClicked(event: React.MouseEvent<HTMLButtonElement>, callback: NumberInputProps['onIncrement'] | NumberInputProps['onDecrement']): void;
    renderArrows(customIcons?: {
        increase: Renderable;
        decrease: Renderable;
    }): import("@emotion/react/jsx-runtime").JSX.Element;
    render(): import("@emotion/react/jsx-runtime").JSX.Element;
}
export default NumberInput;
export { NumberInput };
//# sourceMappingURL=index.d.ts.map