import React from 'react';
import { States, ElementProps } from '../../core/types';
import { NumberFieldProps as ReactAriaNumberFieldProps } from 'react-aria-components';
import './NumberField.scss';
export type NumberFieldProps = ReactAriaNumberFieldProps & ElementProps & {
    disabled?: boolean;
    errorMessage?: string;
    isSmall?: boolean;
    onChange?: (v: number) => void;
    placeholder?: string;
    value?: number;
    supportValue?: number | string;
    step?: number;
    nudge?: number | number[];
    isDecimalPercentage?: boolean;
    state?: States;
    title?: string;
    supportTitle?: string;
    children?: React.ReactNode;
    leftIcon?: React.ReactNode | string;
    rightIcon?: React.ReactNode | string;
    bgColor?: string;
    ariaLabel?: string;
    inputStyle?: React.CSSProperties;
};
/**
 * NumberField component
 * @param props
 * @param {React.CSSProperties} props.inputStyle - The style of the input box inside, which is used to center the number
 * @param {boolean} props.disabled - Whether the input field is disabled
 * @param {string} props.errorMessage - The error message for the input field
 * @param {boolean} props.isSmall - Whether the input field is small
 * @param {function} props.onChange - The function to call when the input field changes
 * @param {function} props.onBlur - The function to call when the input field is blurred
 * @param {string} props.placeholder - The placeholder text for the input field
 * @param {number} props.value - The value of the input field. If it's percentage, the value should be between 0 and 100.
 * @param {number | string} props.supportValue - The support value of the input field, located on the right side the value
 * @param {number} props.step - The accuracy of the number displayed. e.g if step is set to be `100`, and the value is `7890`, the final displayed value will be `7800`. If step is set to be `0.01`, and the value is `3.14159`, the final displayed value will be `3.14`
 * @param {number | number[]} props.nudge - The amount to be added or subtracted when the user presses `UP` or `DOWN` arrow key. If an array is provided, the first value is used for normal arrow keys and the second value is used for `Shift+Arrow` or `PageUp/PageDown`.
 * @param {boolean} props.isDecimalPercentage - Whether the value is a decimal percentage, if true, the value will be divided by 100.
 * @param {States} props.state - The state of the input field, including DARK, ACTIVE, ALERT, WARNING, SUCCESS, DISCOVERY, OUTPUT, LIGHT, DISABLED
 * @param {string} props.ariaLabel - The aria label of the input field
 * @param {string} props.title - The title of the input field
 * @param {string} props.supportTitle - The support title of the input field
 * @param {string} props.bgColor - The background color of the input field
 * @param {React.ReactNode} props.children - The children of the input field
 * @param {ReactAriaNumberFieldProps} props.rest - The rest props of the input field, including formatOptions, defaultValue
 * @returns {JSX.Element}
 * @category Component
 */
export declare const NumberField: (props: NumberFieldProps) => import("react/jsx-runtime").JSX.Element;
export default NumberField;