@vertigis/react-ui 11.29.1 → 11.30.0

package/FormLabelColorField/FormLabelColorField.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import type { TextFieldProps } from "@mui/material/TextField";
+import { type ColorInputProps } from "../ColorInput/ColorInput.js";
+import type { FormControlProps } from "../FormControl/index.js";
+export type FormLabelColorFieldProps = Omit<TextFieldProps, "variant" | "defaultValue" | "onFocus" | "onBlur" | "onChange" | "value" | "select" | "multiline" | "minRows" | "maxRows" | "SelectProps" | "rows"> & Pick<FormControlProps, "inlineHelpContent" | "inlineHelpUrl"> & {
+    defaultValue?: ColorInputProps["defaultValue"];
+    disabled?: ColorInputProps["disabled"];
+    onBlur?: ColorInputProps["onBlur"];
+    onChange?: ColorInputProps["onChange"];
+    onFocus?: ColorInputProps["onFocus"];
+    value: ColorInputProps["value"];
+    ColorInputProps?: ColorInputProps;
+};
+/**
+ * Like TextField, but uses a FormLabel instead of an InputLabel. Also allows
+ * for inline help.
+ */
+declare const FormLabelColorField: import("react").ForwardRefExoticComponent<Pick<FormLabelColorFieldProps, "error" | "id" | "label" | "slot" | "style" | "title" | "type" | "results" | "size" | "role" | "resource" | "key" | "value" | "className" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "sx" | "margin" | "fullWidth" | "autoFocus" | "name" | "autoComplete" | "inputProps" | "inputRef" | "required" | "hiddenLabel" | "focused" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "inlineHelpContent" | "inlineHelpUrl" | "ColorInputProps"> & import("react").RefAttributes<HTMLDivElement>>;
+export default FormLabelColorField;

package/FormLabelColorField/FormLabelColorField.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import ColorInput, {} from "../ColorInput/ColorInput.js";
+import FormControl from "../FormControl/index.js";
+import FormHelperText from "../FormHelperText/index.js";
+import FormLabel from "../FormLabel/index.js";
+import { useId } from "../utils/react.js";
+/**
+ * Like TextField, but uses a FormLabel instead of an InputLabel. Also allows
+ * for inline help.
+ */
+const FormLabelColorField = forwardRef(function FormLabelColorField(props, ref) {
+    const { defaultValue, FormHelperTextProps, fullWidth = false, helperText, id: idProp, label, onBlur, onChange, onFocus, placeholder, type, value, disabled, ColorInputProps, ...other } = props;
+    const id = useId(idProp);
+    const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+    const inputLabelId = label && id ? `${id}-label` : undefined;
+    return (_jsxs(FormControl, { fullWidth: fullWidth, ref: ref, disabled: disabled, ...other, children: [label && (_jsx(FormLabel, { htmlFor: id, id: inputLabelId, children: label })), helperText && (_jsx(FormHelperText, { id: helperTextId, ...FormHelperTextProps, children: helperText })), _jsx(ColorInput, { id: id, placeholder: placeholder, onBlur: onBlur, onFocus: onFocus, defaultValue: defaultValue, "aria-describedby": helperTextId, "aria-labelledby": inputLabelId, onChange: onChange, value: value, disabled: disabled, ...{
+                    ...ColorInputProps,
+                    // Workaround typings issue.
+                    ref: ColorInputProps?.ref,
+                } })] }));
+});
+export default FormLabelColorField;

package/FormLabelColorField/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FormLabelColorField.js";
+export { default } from "./FormLabelColorField.js";

package/FormLabelColorField/index.js

@@ -0,0 +1,2 @@
+export * from "./FormLabelColorField.js";
+export { default } from "./FormLabelColorField.js";

package/FormLabelNumberField/FormLabelNumberField.d.ts

@@ -0,0 +1,32 @@
+import type { TextFieldProps } from "@mui/material/TextField";
+import { type FC } from "react";
+import type { FormControlProps } from "../FormControl/index.js";
+import { type NumberInputProps } from "../NumberInput/index.js";
+/**
+ * Properties for FormLabelNumberField.
+ */
+export type FormLabelNumberFieldProps = Omit<TextFieldProps, "aria-label" | "value" | "onChange" | "InputProps" | "select" | "nativeSelect" | "multiline" | "minRows" | "maxRows" | "SelectProps" | "rows" | "type" | "title" | "onError"> & Pick<FormControlProps, "inlineHelpContent" | "inlineHelpUrl"> & NumberInputProps & {
+    InputProps?: Omit<NumberInputProps, "ref">;
+    NumberInputComponent?: FC<NumberInputProps>;
+    /**
+     * A label to display as helpText when the number input value is out of
+     * range, relative to the min and max properties.
+     */
+    numberOutOfRangeErrorText?: string;
+    /**
+     * A label to display as helpText when the number input value is invalid
+     * (ie. NaN).
+     */
+    invalidNumberErrorText?: string;
+    /**
+     * A label to display as helpText when the number input value has more
+     * than the configured maxDecimalPlaces.
+     */
+    maxDecimalPlacesErrorText?: string;
+};
+/**
+ * Like TextField, but uses a FormLabel instead of an InputLabel, and uses
+ * NumberInput instead of a normal input.
+ */
+declare const FormLabelNumberField: import("react").ForwardRefExoticComponent<Pick<FormLabelNumberFieldProps, "error" | "id" | "label" | "slot" | "style" | "title" | "results" | "size" | "role" | "resource" | "key" | "value" | "components" | "className" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "sx" | "margin" | "fullWidth" | "variant" | "autoFocus" | "name" | "autoComplete" | "componentsProps" | "disableInjectingGlobalStyles" | "endAdornment" | "inputComponent" | "inputProps" | "inputRef" | "multiline" | "readOnly" | "required" | "renderSuffix" | "rows" | "maxRows" | "minRows" | "slotProps" | "slots" | "startAdornment" | "hiddenLabel" | "disableUnderline" | "focused" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "max" | "min" | "inlineHelpContent" | "inlineHelpUrl" | "onErrorEnd" | "allowUndefined" | "maxDecimalPlaces" | "correctOnBlur" | "NumberInputComponent" | "numberOutOfRangeErrorText" | "invalidNumberErrorText" | "maxDecimalPlacesErrorText"> & import("react").RefAttributes<HTMLDivElement>>;
+export default FormLabelNumberField;

package/FormLabelNumberField/FormLabelNumberField.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useContext, useState } from "react";
+import { forwardRef } from "react";
+import FormControl from "../FormControl/index.js";
+import FormHelperText from "../FormHelperText/index.js";
+import FormLabel from "../FormLabel/index.js";
+import { NumberFormatContext } from "../NumberFormatContext/NumberFormatContext.js";
+import { DEFAULT_DECIMAL_PLACES, } from "../NumberInput/index.js";
+import NumberInput from "../NumberInput/index.js";
+import { useId } from "../utils/react.js";
+/**
+ * Like TextField, but uses a FormLabel instead of an InputLabel, and uses
+ * NumberInput instead of a normal input.
+ */
+const FormLabelNumberField = forwardRef(function FormLabelNumberField(props, ref) {
+    const { autoComplete, autoFocus = false, children, className, defaultValue, FormHelperTextProps, fullWidth = false, helperText, id: idProp, InputLabelProps, inputProps, InputProps, inputRef, label, name, NumberInputComponent, onBlur, onChange, onFocus, placeholder, value, min, max, numberOutOfRangeErrorText, invalidNumberErrorText, maxDecimalPlacesErrorText, error, onError, onErrorEnd, allowUndefined, maxDecimalPlaces = DEFAULT_DECIMAL_PLACES, correctOnBlur = true, ...other } = props;
+    const id = useId(idProp);
+    const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+    const inputLabelId = label && id ? `${id}-label` : undefined;
+    const FormNumberInput = NumberInputComponent ?? NumberInput;
+    const { parseNumber } = useContext(NumberFormatContext);
+    const [numberError, setNumberError] = useState();
+    const handleError = useCallback((numericValue, textValue, errorType) => {
+        if (errorType === "out-of-range") {
+            setNumberError(numberOutOfRangeErrorText ??
+                getNumberErrorText(parseNumber(textValue), min, max));
+        }
+        else if (errorType === "NaN") {
+            setNumberError(invalidNumberErrorText ?? "Value must be a valid number.");
+        }
+        else if (errorType === "max-decimals") {
+            setNumberError(maxDecimalPlacesErrorText ??
+                `Value must have at most ${maxDecimalPlaces} decimal places.`);
+        }
+        onError?.(numericValue, textValue, errorType);
+    }, [
+        onError,
+        max,
+        min,
+        parseNumber,
+        invalidNumberErrorText,
+        numberOutOfRangeErrorText,
+        maxDecimalPlaces,
+        maxDecimalPlacesErrorText,
+    ]);
+    const handleErrorEnd = useCallback((numericValue, textValue) => {
+        setNumberError(undefined);
+        onErrorEnd?.(numericValue, textValue);
+    }, [onErrorEnd]);
+    return (_jsxs(FormControl, { fullWidth: fullWidth, ref: ref, error: error || !!numberError, ...other, children: [label && (_jsx(FormLabel, { htmlFor: id, id: inputLabelId, children: label })), (helperText || numberError) && (_jsx(FormHelperText, { id: helperTextId, ...FormHelperTextProps, children: numberError ?? helperText })), _jsx(FormNumberInput, { "aria-describedby": helperTextId, autoComplete: autoComplete, 
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                autoFocus: autoFocus, defaultValue: defaultValue, fullWidth: fullWidth, name: name, value: value, id: id, inputRef: inputRef, onBlur: onBlur, onChange: onChange, onFocus: onFocus, placeholder: placeholder, inputProps: inputProps, error: error, onError: handleError, onErrorEnd: handleErrorEnd, min: min, max: max, allowUndefined: allowUndefined, maxDecimalPlaces: maxDecimalPlaces, correctOnBlur: correctOnBlur, ...InputProps })] }));
+});
+function getNumberErrorText(val, min, max) {
+    const hasMax = typeof max === "number" && !isNaN(max);
+    const hasMin = typeof min === "number" && !isNaN(min);
+    const isBelow = hasMin && val < min;
+    const isAbove = hasMax && val > max;
+    if (isNaN(val) || (!isAbove && !isBelow)) {
+        return undefined;
+    }
+    else if (hasMin && hasMax) {
+        return `Value must be between ${min} and ${max}.`;
+    }
+    else if (hasMin) {
+        return `Value must be greater than ${min}.`;
+    }
+    else if (hasMax) {
+        return `Value must be less than ${max}.`;
+    }
+    else {
+        return undefined;
+    }
+}
+export default FormLabelNumberField;

package/FormLabelNumberField/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FormLabelNumberField.js";
+export { default } from "./FormLabelNumberField.js";

package/FormLabelNumberField/index.js

@@ -0,0 +1,2 @@
+export * from "./FormLabelNumberField.js";
+export { default } from "./FormLabelNumberField.js";

package/FormLabelSliderField/FormLabelSliderField.d.ts

@@ -0,0 +1,43 @@
+import { type SliderProps } from "@mui/material";
+import type { TextFieldProps } from "@mui/material/TextField";
+import { type FC } from "react";
+import type { FormControlProps } from "../FormControl/index.js";
+import { type ErrorType, type NumberInputProps } from "../NumberInput/index.js";
+export type FormLabelSliderFieldProps = Omit<TextFieldProps, "variant" | "Value" | "onChange" | "defaultValue" | "type" | "select" | "multiline" | "minRows" | "maxRows" | "SelectProps" | "rows" | "InputProps" | "inputProps" | "onError"> & Pick<FormControlProps, "inlineHelpContent" | "inlineHelpUrl"> & {
+    value?: number;
+    onChange?: (value: number) => void;
+    SliderProps?: SliderProps;
+    NumberInputComponent?: FC<NumberInputProps>;
+    InputProps?: Omit<NumberInputProps, "allowUndefined">;
+    inputProps?: NumberInputProps["inputProps"];
+    defaultValue?: number;
+    /**
+     * A label to display as helpText when the number input value is out of
+     * range, relative to the min and max properties.
+     */
+    numberOutOfRangeErrorText?: string;
+    /**
+     * A label to display as helpText when the number input value is invalid
+     * (ie. NaN).
+     */
+    invalidNumberErrorText?: string;
+    /**
+     * A label to display as helpText when the number input value has more
+     * than the configured maxDecimalPlaces.
+     */
+    maxDecimalPlacesErrorText?: string;
+    /**
+     * Executed when the input moves into an error state.
+     */
+    onError?: (value: number, textValue: string, type: ErrorType) => void;
+    /**
+     * Executed when the input moves out of an error state.
+     */
+    onErrorEnd?: (value: number, textValue: string) => void;
+};
+/**
+ * Like TextField, but uses a FormLabel instead of an InputLabel. Also allows
+ * for inline help.
+ */
+declare const FormLabelSliderField: import("react").ForwardRefExoticComponent<Pick<FormLabelSliderFieldProps, "error" | "id" | "label" | "slot" | "style" | "title" | "results" | "size" | "role" | "resource" | "key" | "value" | "className" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "sx" | "margin" | "fullWidth" | "autoFocus" | "name" | "autoComplete" | "inputProps" | "inputRef" | "required" | "hiddenLabel" | "focused" | "InputProps" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "inlineHelpContent" | "inlineHelpUrl" | "onErrorEnd" | "NumberInputComponent" | "numberOutOfRangeErrorText" | "invalidNumberErrorText" | "maxDecimalPlacesErrorText" | "SliderProps"> & import("react").RefAttributes<HTMLDivElement>>;
+export default FormLabelSliderField;

package/FormLabelSliderField/FormLabelSliderField.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider, useTheme } from "@mui/material";
+import { Stack } from "@mui/material";
+import { forwardRef, useCallback, useContext, useRef, useState } from "react";
+import FormControl from "../FormControl/index.js";
+import FormHelperText from "../FormHelperText/index.js";
+import FormLabel from "../FormLabel/index.js";
+import { NumberFormatContext } from "../NumberFormatContext/NumberFormatContext.js";
+import NumberInput, { DEFAULT_DECIMAL_PLACES, } from "../NumberInput/index.js";
+import { useId } from "../utils/react.js";
+/**
+ * Like TextField, but uses a FormLabel instead of an InputLabel. Also allows
+ * for inline help.
+ */
+const FormLabelSliderField = forwardRef(function FormLabelSliderField(props, ref) {
+    const { autoComplete, autoFocus = false, defaultValue, disabled, FormHelperTextProps, fullWidth = false, helperText, id: idProp, InputLabelProps, inputProps, InputProps, inputRef, label, name, onBlur, onChange, onFocus, onKeyDown, onMouseUp, placeholder, value, SliderProps, numberOutOfRangeErrorText, invalidNumberErrorText, onError, onErrorEnd, error, maxDecimalPlacesErrorText, NumberInputComponent, ...other } = props;
+    const inputId = `${useId(idProp)}-input`;
+    const sliderId = `${useId(idProp)}-slider`;
+    const helperTextId = helperText && inputId ? `${inputId}-helper-text` : undefined;
+    const inputLabelId = label && inputId ? `${inputId}-label` : undefined;
+    const inputReference = useRef();
+    const { typography } = useTheme();
+    const handleSliderChange = useCallback((event, value) => {
+        onChange?.(value);
+    }, [onChange]);
+    const max = SliderProps?.max ?? InputProps?.max ?? 100;
+    const min = SliderProps?.min ?? InputProps?.min ?? 0;
+    const { parseNumber } = useContext(NumberFormatContext);
+    const [numberError, setNumberError] = useState();
+    const maxDecimalPlaces = InputProps?.maxDecimalPlaces ?? DEFAULT_DECIMAL_PLACES;
+    const handleError = useCallback((numericValue, textValue, errorType) => {
+        if (errorType === "out-of-range") {
+            setNumberError(numberOutOfRangeErrorText ??
+                getNumberErrorText(parseNumber(textValue), min, max));
+        }
+        else if (errorType === "NaN") {
+            setNumberError(invalidNumberErrorText ?? "Value must be a valid number.");
+        }
+        else if (errorType === "max-decimals") {
+            setNumberError(maxDecimalPlacesErrorText ??
+                `Value must have at most ${maxDecimalPlaces} decimal places.`);
+        }
+        onError?.(numericValue, textValue, errorType);
+    }, [
+        onError,
+        max,
+        min,
+        parseNumber,
+        invalidNumberErrorText,
+        numberOutOfRangeErrorText,
+        maxDecimalPlaces,
+        maxDecimalPlacesErrorText,
+    ]);
+    const handleErrorEnd = useCallback((numericValue, textValue) => {
+        setNumberError(undefined);
+        onErrorEnd?.(numericValue, textValue);
+    }, [onErrorEnd]);
+    const FormNumberInput = NumberInputComponent ?? NumberInput;
+    const InputElement = (_jsx(FormNumberInput, { "aria-labelledby": inputLabelId, "aria-describedby": helperTextId, autoComplete: autoComplete, 
+        // Disabling this linting rule since the intent is to forward it
+        // if it exists rather than set it.
+        //
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        autoFocus: autoFocus, defaultValue: defaultValue, fullWidth: fullWidth, id: inputId, inputProps: inputProps, inputRef: inputRef ?? inputReference, name: name, onChange: onChange, placeholder: placeholder, value: value, error: error, onError: handleError, onErrorEnd: handleErrorEnd, ...{ min, max, ...InputProps }, sx: { maxWidth: typography.pxToRem(74), ...InputProps?.sx } }));
+    return (_jsxs(FormControl, { fullWidth: fullWidth, ref: ref, disabled: disabled, error: error || !!numberError, ...other, children: [label && (_jsx(FormLabel, { htmlFor: inputId, id: inputLabelId, children: label })), (helperText || !!numberError) && (_jsx(FormHelperText, { id: helperTextId, ...FormHelperTextProps, children: numberError ?? helperText })), _jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(Slider, { "aria-describedby": helperTextId, "aria-labelledby": inputLabelId, defaultValue: defaultValue, name: name, id: sliderId, value: value, onChange: handleSliderChange, disabled: disabled, ...{ min, max, ...SliderProps } }), InputElement] })] }));
+});
+function getNumberErrorText(val, min, max) {
+    const hasMax = typeof max === "number" && !isNaN(max);
+    const hasMin = typeof min === "number" && !isNaN(min);
+    const isBelow = hasMin && val < min;
+    const isAbove = hasMax && val > max;
+    if (isNaN(val) || (!isAbove && !isBelow)) {
+        return undefined;
+    }
+    else if (hasMin && hasMax) {
+        return `Value must be between ${min} and ${max}.`;
+    }
+    else if (hasMin) {
+        return `Value must be greater than ${min}.`;
+    }
+    else if (hasMax) {
+        return `Value must be less than ${max}.`;
+    }
+    else {
+        return undefined;
+    }
+}
+export default FormLabelSliderField;

package/FormLabelSliderField/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./FormLabelSliderField.js";
+export { default } from "./FormLabelSliderField.js";

package/FormLabelSliderField/index.js

@@ -0,0 +1,2 @@
+export * from "./FormLabelSliderField.js";
+export { default } from "./FormLabelSliderField.js";

package/NumberFormatContext/NumberFormatContext.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export interface NumberFormatContextProps {
+    /**
+     * Returns a stringified number that may include additional/alternative
+     * formatting. By default, this will attempt to directly convert a number to
+     * a string.
+     */
+    formatNumber: (n: number) => string;
+    /**
+     * Returns a number parsed from a string that may include
+     * additional/alternative formatting. By default, this will attempt to
+     * directly convert a string to a number.
+     */
+    parseNumber: (s: string) => number;
+}
+/**
+ * A React context for components that gives access to number formatting
+ * utilities.
+ */
+export declare const NumberFormatContext: import("react").Context<NumberFormatContextProps>;

package/NumberFormatContext/NumberFormatContext.js

@@ -0,0 +1,15 @@
+import { createContext } from "react";
+const formatNumber = (n) => {
+    return `${n}`;
+};
+const parseNumber = (s) => {
+    return +s;
+};
+/**
+ * A React context for components that gives access to number formatting
+ * utilities.
+ */
+export const NumberFormatContext = createContext({
+    formatNumber,
+    parseNumber,
+});

package/NumberFormatContext/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./NumberFormatContext.js";
+export { NumberFormatContext as default } from "./NumberFormatContext.js";

package/NumberFormatContext/index.js

@@ -0,0 +1,2 @@
+export * from "./NumberFormatContext.js";
+export { NumberFormatContext as default } from "./NumberFormatContext.js";

package/NumberInput/NumberInput.d.ts

@@ -0,0 +1,57 @@
+/// <reference types="react" />
+import { type InputProps } from "@mui/material/Input";
+export declare const DEFAULT_DECIMAL_PLACES = 16;
+export type ErrorType = "NaN" | "out-of-range" | "max-decimals" | "unknown";
+/**
+ * Properties for the `NumberInput` component.
+ */
+export interface NumberInputProps extends Omit<InputProps, "type" | "onChange" | "value" | "onError"> {
+    /**
+     * Sets the value to show in the input for controlled components. If not
+     * specified, the input will be uncontrolled instead.
+     */
+    value?: number;
+    /**
+     * A callback to fire when selected values change.
+     */
+    onChange?: (value: number | undefined) => void;
+    /**
+     * The maximum value possible for the number input.
+     */
+    max?: number;
+    /**
+     * The minimum value possible for the number input.
+     */
+    min?: number;
+    /**
+     * Executed when the input moves into an error state.
+     */
+    onError?: (value: number, textValue: string, type: ErrorType) => void;
+    /**
+     * Executed when the input moves out of an error state.
+     */
+    onErrorEnd?: (value: number, textValue: string) => void;
+    /**
+     * Whether to consider an empty field ("") as valid. When this property is
+     * true and the field is set to an empty value, the onChange callback will
+     * be executed with an undefined argument value.
+     */
+    allowUndefined?: boolean;
+    /**
+     * The maximum number of decimal places. Must be a number between 0 and 16.
+     * Defaults to 16.
+     */
+    maxDecimalPlaces?: number;
+    /**
+     * Whether or not the input should automatically correct invalid values on
+     * blur to the last valid value. Defaults to true.
+     */
+    correctOnBlur?: boolean;
+}
+/**
+ * A number input component that leverages the NumberFormatContext for
+ * formatting and parsing. Default formatting and parsing can be overridden by
+ * wrapping this component in a NumberFormatContext.Provider.
+ */
+declare const NumberInput: import("react").ForwardRefExoticComponent<Pick<NumberInputProps, "error" | "id" | "slot" | "style" | "title" | "results" | "size" | "role" | "resource" | "value" | "components" | "className" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "sx" | "margin" | "fullWidth" | "autoFocus" | "name" | "autoComplete" | "componentsProps" | "disableInjectingGlobalStyles" | "endAdornment" | "inputComponent" | "inputProps" | "inputRef" | "multiline" | "readOnly" | "required" | "renderSuffix" | "rows" | "maxRows" | "minRows" | "slotProps" | "slots" | "startAdornment" | "disableUnderline" | "max" | "min" | "onErrorEnd" | "allowUndefined" | "maxDecimalPlaces" | "correctOnBlur"> & import("react").RefAttributes<unknown>>;
+export default NumberInput;

package/NumberInput/NumberInput.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Input, {} from "@mui/material/Input";
+import { forwardRef, useCallback, useContext, useEffect, useState } from "react";
+import { NumberFormatContext } from "../NumberFormatContext/index.js";
+import { usePrevious } from "../utils/react.js";
+export const DEFAULT_DECIMAL_PLACES = 16;
+/**
+ * A number input component that leverages the NumberFormatContext for
+ * formatting and parsing. Default formatting and parsing can be overridden by
+ * wrapping this component in a NumberFormatContext.Provider.
+ */
+const NumberInput = forwardRef(function NumberInput({ onChange, onBlur, value, defaultValue, max, min, error, onError, onErrorEnd, allowUndefined, correctOnBlur = true, maxDecimalPlaces = DEFAULT_DECIMAL_PLACES, ...props }, ref) {
+    const { formatNumber, parseNumber } = useContext(NumberFormatContext);
+    const [textValue, setTextValue] = useState(value === undefined ? "" : formatNumber(value));
+    const [numericValue, setNumericValue] = useState(value === undefined ? NaN : value);
+    const [lastValid, setLastValid] = useState(numericValue);
+    const isValidNaN = useCallback((val) => allowUndefined && !val?.trim(), [allowUndefined]);
+    const isOutOfRange = useCallback((val) => (typeof min === "number" && val < min) || (typeof max === "number" && val > max), [min, max]);
+    const isTooPrecise = useCallback((val) => getDecimalPlaces(val) > maxDecimalPlaces, [maxDecimalPlaces]);
+    const invalidError = isValidNaN(textValue)
+        ? false
+        : // If the user begins to type a negative number, do not present an invalid
+            // error.
+            textValue?.trim() !== "-" && parseNumber(textValue) !== numericValue;
+    const previousError = usePrevious(error || invalidError);
+    useEffect(() => {
+        if (!isNaN(numericValue) && !isOutOfRange(numericValue) && !isTooPrecise(numericValue)) {
+            setLastValid(numericValue);
+        }
+    }, [numericValue, isOutOfRange, isTooPrecise]);
+    useEffect(() => {
+        const e = error || invalidError;
+        if (e !== previousError) {
+            if (invalidError) {
+                const inputVal = parseNumber(textValue);
+                let type;
+                if (isNaN(numericValue)) {
+                    type = "NaN";
+                }
+                else if (isOutOfRange(inputVal)) {
+                    type = "out-of-range";
+                }
+                else if (isTooPrecise(inputVal)) {
+                    type = "max-decimals";
+                }
+                else {
+                    type = "unknown";
+                }
+                onError?.(numericValue, textValue, type);
+            }
+            else if (error) {
+                onError?.(numericValue, textValue, "unknown");
+            }
+            else {
+                onErrorEnd?.(numericValue, textValue);
+            }
+        }
+    }, [
+        error,
+        previousError,
+        numericValue,
+        textValue,
+        onError,
+        onErrorEnd,
+        invalidError,
+        isOutOfRange,
+        isTooPrecise,
+        parseNumber,
+    ]);
+    const reformat = useCallback(() => {
+        if ((isNaN(numericValue) && !isValidNaN(textValue)) || isOutOfRange(numericValue)) {
+            setNumericValue(lastValid);
+            setTextValue(formatNumber(lastValid));
+            onChange?.(lastValid);
+        }
+        else if (!isNaN(numericValue)) {
+            setTextValue(formatNumber(numericValue));
+        }
+    }, [formatNumber, isOutOfRange, isValidNaN, lastValid, numericValue, onChange, textValue]);
+    const correctValue = useCallback((val) => {
+        let newValue = val;
+        if (!isNaN(newValue) && typeof newValue === "number") {
+            if (typeof max === "number") {
+                newValue = Math.min(newValue, max);
+            }
+            if (typeof min === "number") {
+                newValue = Math.max(newValue, min);
+            }
+            const decimalPlaces = getDecimalPlaces(newValue);
+            const maxDecimals = Math.min(Math.max(0, maxDecimalPlaces), DEFAULT_DECIMAL_PLACES);
+            if (decimalPlaces > maxDecimals) {
+                newValue = +newValue.toFixed(maxDecimals);
+            }
+        }
+        return newValue;
+    }, [max, min, maxDecimalPlaces]);
+    useEffect(() => {
+        if (value !== undefined) {
+            // For controlled components, only update the text from the value if
+            // it's a valid number, and represents a number different from the
+            // one in the text box. Otherwise leave it alone so that it's not
+            // constantly reformatting as the user is typing.
+            if (!isNaN(value) && value !== numericValue) {
+                setTextValue(formatNumber(value));
+            }
+            setNumericValue(correctValue(value));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps -- It's intentional to omit numericValue. We only want this to run when the incoming value changes, not when numericValue changes in handleChange().
+    }, [value, formatNumber, correctValue]);
+    const handleChange = useCallback(event => {
+        const value = event.currentTarget.value;
+        setTextValue(value);
+        if (isValidNaN(value)) {
+            setNumericValue(NaN);
+            onChange?.(undefined);
+        }
+        else {
+            const newValue = correctValue(parseNumber(value));
+            setNumericValue(newValue);
+            onChange?.(newValue);
+        }
+    }, [correctValue, onChange, parseNumber, isValidNaN]);
+    const handleBlur = useCallback((event) => {
+        if (correctOnBlur) {
+            reformat();
+        }
+        onBlur?.(event);
+    }, [correctOnBlur, reformat, onBlur]);
+    return (_jsx(Input, { ref: ref, type: "text", value: textValue, onChange: handleChange, onBlur: handleBlur, defaultValue: typeof defaultValue === "number" ? formatNumber(defaultValue) : undefined, "data-test": "NumberInput-container", error: error || invalidError, ...props }));
+});
+export default NumberInput;
+function getDecimalPlaces(value) {
+    const text = value.toString();
+    if (text.includes("e-")) {
+        const [, exponent] = text.split("e-");
+        return parseInt(exponent, 10);
+    }
+    if (Math.floor(value) !== value) {
+        const [, decimals] = text.split(".");
+        return decimals.length ?? 0;
+    }
+    return 0;
+}

package/NumberInput/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./NumberInput.js";
+export { default } from "./NumberInput.js";

package/NumberInput/index.js

@@ -0,0 +1,2 @@
+export * from "./NumberInput.js";
+export { default } from "./NumberInput.js";