@yamada-ui/number-input/dist/number-input.d.mts

Yamada UI number input component

import * as _yamada_ui_core from '@yamada-ui/core';
import { HTMLUIProps, ThemeProps, ColorModeToken, CSS, PropGetter } from '@yamada-ui/core';
import * as react from 'react';
import { InputHTMLAttributes } from 'react';
import { UseFormControlProps } from '@yamada-ui/form-control';
import { UseCounterProps } from '@yamada-ui/use-counter';

type ValidityState = "rangeOverflow" | "rangeUnderflow";
interface UseNumberInputProps extends UseFormControlProps<HTMLInputElement>, UseCounterProps {
    /**
     * The HTML `name` attribute used for forms.
     */
    name?: string;
    /**
     * If `true`, the input's value will change based on mouse wheel.
     *
     * @default false
     */
    allowMouseWheel?: boolean;
    /**
     * This controls the value update when you blur out of the input.
     * - If `true` and the value is greater than `max`, the value will be reset to `max`.
     * - Else, the value remains the same.
     *
     * @default true
     */
    clampValueOnBlur?: boolean;
    /**
     * If `true`, the input will be focused as you increment or decrement the value with the stepper.
     *
     * @default true
     */
    focusInputOnChange?: boolean;
    /**
     * If using a custom display format, this converts the default format to the custom format.
     */
    format?: (value: number | string) => number | string;
    /**
     * This is used to format the value so that screen readers
     * can speak out a more human-friendly value.
     *
     * It is used to set the `aria-valuetext` property of the input.
     */
    getAriaValueText?: (value: number | string) => string | undefined;
    /**
     * Hints at the type of data that might be entered by the user.
     * It also determines the type of keyboard shown to the user on mobile devices.
     *
     * @default 'decimal'
     */
    inputMode?: InputHTMLAttributes<any>["inputMode"];
    /**
     * Whether the pressed key should be allowed in the input.
     * The default behavior is to allow DOM floating point characters defined by /^[Ee0-9+\-.]$/.
     */
    isValidCharacter?: (value: string) => boolean;
    /**
     * If using a custom display format, this converts the custom format to a format `parseFloat` understands.
     */
    parse?: (value: string) => string;
    /**
     * The pattern used to check the <input> element's value against on form submission.
     *
     * @default '[0-9]*(.[0-9]+)?'
     */
    pattern?: InputHTMLAttributes<any>["pattern"];
    /**
     * The callback invoked when invalid number is entered.
     */
    onInvalid?: (message: ValidityState, value: string, valueAsNumber: number) => void;
}
declare const useNumberInput: (props?: UseNumberInputProps) => {
    disabled: boolean | undefined;
    focused: boolean;
    /**
     * @deprecated Use `disabled` instead.
     */
    isDisabled: boolean | undefined;
    /**
     * @deprecated Use `readOnly` instead.
     */
    isReadOnly: boolean | undefined;
    /**
     * @deprecated Use `required` instead.
     */
    isRequired: boolean | undefined;
    props: {
        _active?: {} | undefined;
        _focus?: {} | undefined;
        _focusVisible?: {} | undefined;
        _hover?: {} | undefined;
        _invalid?: {} | undefined;
        "aria-disabled": boolean | undefined;
        "aria-invalid": boolean | undefined;
        "aria-readonly": boolean | undefined;
        "aria-required": boolean | undefined;
        "data-readonly": boolean | "false" | "true";
        disabled: boolean | undefined;
        readOnly: boolean | undefined;
        required: boolean | undefined;
        onBlur: (event: react.FocusEvent<HTMLInputElement, Element>) => void;
        onFocus: (event: react.FocusEvent<HTMLInputElement, Element>) => void;
    };
    readOnly: boolean | undefined;
    required: boolean | undefined;
    value: string;
    valueAsNumber: number;
    getDecrementProps: PropGetter<"button", undefined>;
    getIncrementProps: PropGetter<"button", undefined>;
    getInputProps: PropGetter<"input", undefined>;
};
type UseNumberInputReturn = ReturnType<typeof useNumberInput>;
interface NumberInputOptions {
    /**
     * The border color when the input is invalid.
     */
    errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
    /**
     * The border color when the input is focused.
     */
    focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
    /**
     * If `true`, display the addon for the number input.
     *
     * @deprecated Use `stepper` instead.
     */
    isStepper?: boolean;
    /**
     * If `true`, display the addon for the number input.
     */
    stepper?: boolean;
    /**
     * Props for addon component.
     */
    addonProps?: HTMLUIProps;
    /**
     * Props for container element.
     */
    containerProps?: HTMLUIProps;
    /**
     * Props for decrement component.
     */
    decrementProps?: NumberDecrementStepperProps;
    /**
     * Props for increment component.
     */
    incrementProps?: NumberIncrementStepperProps;
}
interface NumberInputProps extends Omit<HTMLUIProps<"input">, "defaultValue" | "max" | "min" | "onChange" | "onInvalid" | "size" | "step" | "value">, ThemeProps<"NumberInput">, UseNumberInputProps, NumberInputOptions {
}
/**
 * `NumberInput` is a component used to obtain numeric input from the user.
 *
 * @see Docs https://yamada-ui.com/components/forms/number-input
 */
declare const NumberInput: _yamada_ui_core.Component<"input", NumberInputProps>;
type NumberIncrementStepperProps = HTMLUIProps<"button">;
type NumberDecrementStepperProps = HTMLUIProps<"button">;

export { NumberInput, type NumberInputProps, type UseNumberInputProps, type UseNumberInputReturn, useNumberInput };