/** * Configuration options for the useNumberField hook */ export type UseNumberFieldConfig = { /** * The label for the number field. * Important for accessibility and button labeling. */ label?: string; /** * The minimum value for the number field. * @default 0 */ minValue?: number; /** * The maximum value for the number field. * @default 100000000000000 */ maxValue?: number; /** * The step value for the number field. * @default 1 */ step?: number; /** * The controlled value for the number field. */ value?: number | null; /** * The default (uncontrolled) value for the number field. */ defaultValue?: number | null; /** * The maximum number of decimal places for the number field. * @default 0 */ maximumFractionDigits?: number; /** * The minimum number of decimal places for the number field. * @default 0 */ minimumFractionDigits?: number; /** * A callback that is called when the value changes. * @param value The new numeric value or null if invalid/empty */ onChange?: (value: number | null) => void; }; /** * Return value from the useNumberField hook */ export type UseNumberFieldReturnValue = { /** The current numeric value of the number field. */ value: number | null; /** A ref that should be attached to the input element. */ inputRef: React.RefObject; /** The props to pass to the input element. */ inputProps: Pick, "value" | "onChange" | "inputMode" | "aria-valuenow" | "aria-valuemin" | "aria-valuemax" | "min" | "max" | "step" | "role" | "pattern" | "type" | "autoComplete">; /** The props to pass to the increment button. */ incrementButtonProps: React.ButtonHTMLAttributes; /** The props to pass to the decrement button. */ decrementButtonProps: React.ButtonHTMLAttributes; }; /** * Custom hook that provides the functionality for number input fields with increment and decrement controls. * * This hook handles: * - Precise decimal arithmetic using Big.js * - Number formatting with thousand separators and decimal precision * - Input validation and value clamping * - Keyboard navigation (arrows, PageUp/Down, Home/End) * - Platform-specific input modes for mobile devices * - Accessibility attributes and button states * - Controlled and uncontrolled value management * * @param config - Configuration options for the number field * @returns Object containing the current value, input ref, and props for input and buttons * * @example * const { value, inputRef, inputProps, incrementButtonProps, decrementButtonProps } = useNumberField({ * label: "Quantity", * minValue: 0, * maxValue: 100, * step: 1, * onChange: (value) => console.log(value) * }); */ export declare const useNumberField: (config: UseNumberFieldConfig) => { value: number | null; inputRef: import('react').RefCallback | null; inputProps: { value: string; onChange: (e: React.ChangeEvent) => void; inputMode: import('./internal/useNumberFieldInputMode').InputMode; "aria-valuenow": number | undefined; "aria-valuemin": number; "aria-valuemax": number; min: number; max: number; step: number; role: string; pattern: string; type: string; autoComplete: string; }; incrementButtonProps: { onClick: () => void; disabled: boolean | undefined; tabIndex: number; "aria-label": string; }; decrementButtonProps: { onClick: () => void; disabled: boolean | undefined; tabIndex: number; "aria-label": string; }; };