import { type RefObject } from 'react';
import { getInteraction } from '@instructure/ui-react-utils';
import { Renderable } from '@instructure/shared-types';
/**
---
category: components
id: NumberInput
---
**/
declare const NumberInput: import("react").ForwardRefExoticComponent<import("@instructure/shared-types").PickPropsWithExceptions<import("@instructure/ui-form-field/latest").FormFieldOwnProps, "id" | "label" | "inline" | "elementRef"> & {
    renderLabel: Renderable;
    id?: string;
    interaction?: import("@instructure/ui-react-utils").InteractionType;
    messages?: import("@instructure/ui-form-field/latest").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;
} & import("@instructure/emotion").NewThemeOverrideProp<import("@instructure/ui-themes/types/themes/newThemeTokens/componentTypes/textInput.js").TextInput> & Omit<import("react").InputHTMLAttributes<{
    renderLabel: Renderable;
    id?: string;
    interaction?: import("@instructure/ui-react-utils").InteractionType;
    messages?: import("@instructure/ui-form-field/latest").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;
} & Element>, keyof {
    renderLabel: Renderable;
    id?: string;
    interaction?: import("@instructure/ui-react-utils").InteractionType;
    messages?: import("@instructure/ui-form-field/latest").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;
} | "dir"> & {
    dir?: "ltr" | "rtl";
} & import("@instructure/ui-react-utils").WithDeterministicIdProps & import("react").RefAttributes<NumberInputHandle>>;
export interface NumberInputHandle {
    focus: () => void;
    readonly id: string | undefined;
    readonly invalid: boolean;
    readonly interaction: ReturnType<typeof getInteraction>;
    readonly value: string | undefined;
    readonly ref: RefObject<Element | null>;
}
export default NumberInput;
export { NumberInput };
//# sourceMappingURL=index.d.ts.map