@codefast/ui 0.3.11 → 0.3.12-canary.0

package/dist/primitives/input-number.js

@@ -1,514 +1,458 @@
-import { Field as InputField, Input, createInputScope } from "./input.js";
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { composeEventHandlers } from "@radix-ui/primitive";
 import { createContextScope } from "@radix-ui/react-context";
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import { composeEventHandlers } from "@radix-ui/primitive";
-//#region src/primitives/input-number.tsx
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import * as InputPrimitive from "#primitives/input";
+import { createInputScope } from "#primitives/input";
+/* -----------------------------------------------------------------------------
+ * Context: InputNumber
+ * -------------------------------------------------------------------------- */
 /**
-* The name of the InputNumber component constant.
-*/
+ * The name of the InputNumber component constant.
+ */
 const NUMBER_INPUT_NAME = "InputNumber";
-const [createInputNumberContext, createInputNumberScope] = createContextScope(NUMBER_INPUT_NAME, [createInputScope]);
+const [createInputNumberContext, createInputNumberScope] = createContextScope(NUMBER_INPUT_NAME, [
+    createInputScope,
+]);
 const useInputScope = createInputScope();
 const [InputNumberContextProvider, useInputNumberContext] = createInputNumberContext(NUMBER_INPUT_NAME);
 function InputNumber(numberInputProps) {
-	const { __scopeInputNumber, ariaDecrementLabel, ariaIncrementLabel, defaultValue, formatOptions = {
-		minimumFractionDigits: 0,
-		style: "decimal"
-	}, id, locale, max, min, onChange, step = 1, value: valueProperty, ...props } = numberInputProps;
-	/** Scope for the input component */
-	const inputScope = useInputScope(__scopeInputNumber);
-	/** Reference to the input element */
-	const inputRef = useRef(null);
-	/** Controlled or uncontrolled value state */
-	const [value, setValue] = useControllableState({
-		defaultProp: defaultValue,
-		onChange,
-		prop: valueProperty
-	});
-	/** Separators used for number formatting based on locale */
-	const { decimalSeparator, thousandSeparator } = useMemo(() => getNumberFormatSeparators(locale), [locale]);
-	/**
-	* Formats a number value into a string representation
-	* @param inputValue - The number to format
-	* @returns A formatted string representation of the number
-	*/
-	const formatValue = useCallback((inputValue) => {
-		if (inputValue === void 0 || Number.isNaN(inputValue)) return "";
-		return new Intl.NumberFormat(locale, formatOptions).format(inputValue);
-	}, [formatOptions, locale]);
-	/**
-	* Parses a string or number input into a normalized number value
-	* @param inputValue - The value to parse
-	* @returns The parsed number value, clamped between min and max
-	*/
-	const parseValue = useCallback((inputValue) => {
-		if (typeof inputValue === "number") return clamp(inputValue, min, max);
-		if (typeof inputValue !== "string") return NaN;
-		const cleanedValue = inputValue.trim().replaceAll(/[^\d.,\-()]/g, "");
-		if (cleanedValue === "") return NaN;
-		const normalizedValue = normalizeInputValue(cleanedValue, thousandSeparator, decimalSeparator);
-		let parsedValue = Number.parseFloat(normalizedValue);
-		if (formatOptions.style === "percent") parsedValue /= 100;
-		return Number.isNaN(parsedValue) ? 0 : clamp(parsedValue, min, max);
-	}, [
-		decimalSeparator,
-		formatOptions.style,
-		max,
-		min,
-		thousandSeparator
-	]);
-	/**
-	* Changes the current value based on a provided operation
-	* @param operation - Function that takes the current value and returns a new value
-	*/
-	const changeNumberValue = useCallback((operation) => {
-		const inputElement = inputRef.current;
-		if (!inputElement || props.disabled || props.readOnly) return;
-		const newValue = clamp(operation(parseValue(inputElement.value) || 0), min, max);
-		inputElement.value = formatValue(newValue);
-		setValue(newValue);
-	}, [
-		props.disabled,
-		formatValue,
-		max,
-		min,
-		parseValue,
-		props.readOnly,
-		setValue
-	]);
-	/**
-	* Increments the current value by the step amount
-	*/
-	const handleIncrement = useCallback(() => {
-		changeNumberValue((number) => number + step);
-	}, [changeNumberValue, step]);
-	/**
-	* Decrements the current value by the step amount
-	*/
-	const handleDecrement = useCallback(() => {
-		changeNumberValue((number) => number - step);
-	}, [changeNumberValue, step]);
-	/**
-	* Sets the value to the maximum allowed
-	*/
-	const handleIncrementToMax = useCallback(() => {
-		changeNumberValue((number) => max ?? number + step);
-	}, [
-		changeNumberValue,
-		max,
-		step
-	]);
-	/**
-	* Sets the value to the minimum allowed
-	*/
-	const handleDecrementToMin = useCallback(() => {
-		changeNumberValue((number) => min ?? number - step);
-	}, [
-		changeNumberValue,
-		min,
-		step
-	]);
-	return /* @__PURE__ */ jsx(InputNumberContextProvider, {
-		ariaDecrementLabel,
-		ariaIncrementLabel,
-		defaultValue,
-		disabled: props.disabled,
-		formatOptions,
-		formatValue,
-		id,
-		inputRef,
-		max,
-		min,
-		parseValue,
-		readOnly: props.readOnly,
-		scope: __scopeInputNumber,
-		value,
-		onChange: setValue,
-		onDecrement: handleDecrement,
-		onDecrementToMin: handleDecrementToMin,
-		onIncrement: handleIncrement,
-		onIncrementToMax: handleIncrementToMax,
-		children: /* @__PURE__ */ jsx(Input, {
-			...inputScope,
-			...props
-		})
-	});
+    const { __scopeInputNumber, ariaDecrementLabel, ariaIncrementLabel, defaultValue, formatOptions = { minimumFractionDigits: 0, style: "decimal" }, id, locale, max, min, onChange, step = 1, value: valueProperty, ...props } = numberInputProps;
+    /** Scope for the input component */
+    const inputScope = useInputScope(__scopeInputNumber);
+    /** Reference to the input element */
+    const inputRef = useRef(null);
+    /** Controlled or uncontrolled value state */
+    const [value, setValue] = useControllableState({
+        defaultProp: defaultValue,
+        onChange,
+        prop: valueProperty,
+    });
+    /** Separators used for number formatting based on locale */
+    const { decimalSeparator, thousandSeparator } = useMemo(() => getNumberFormatSeparators(locale), [locale]);
+    /**
+     * Formats a number value into a string representation
+     * @param inputValue - The number to format
+     * @returns A formatted string representation of the number
+     */
+    const formatValue = useCallback((inputValue) => {
+        if (inputValue === undefined || Number.isNaN(inputValue)) {
+            return "";
+        }
+        return new Intl.NumberFormat(locale, formatOptions).format(inputValue);
+    }, [formatOptions, locale]);
+    /**
+     * Parses a string or number input into a normalized number value
+     * @param inputValue - The value to parse
+     * @returns The parsed number value, clamped between min and max
+     */
+    const parseValue = useCallback((inputValue) => {
+        if (typeof inputValue === "number") {
+            return clamp(inputValue, min, max);
+        }
+        if (typeof inputValue !== "string") {
+            return Number.NaN;
+        }
+        const cleanedValue = inputValue.trim().replaceAll(/[^\d.,\-()]/g, "");
+        if (cleanedValue === "") {
+            return Number.NaN;
+        }
+        const normalizedValue = normalizeInputValue(cleanedValue, thousandSeparator, decimalSeparator);
+        let parsedValue = Number.parseFloat(normalizedValue);
+        if (formatOptions.style === "percent") {
+            parsedValue /= 100;
+        }
+        return Number.isNaN(parsedValue) ? 0 : clamp(parsedValue, min, max);
+    }, [decimalSeparator, formatOptions.style, max, min, thousandSeparator]);
+    /**
+     * Changes the current value based on a provided operation
+     * @param operation - Function that takes the current value and returns a new value
+     */
+    const changeNumberValue = useCallback((operation) => {
+        const inputElement = inputRef.current;
+        if (!inputElement || props.disabled || props.readOnly) {
+            return;
+        }
+        const currentValue = parseValue(inputElement.value) || 0;
+        const newValue = clamp(operation(currentValue), min, max);
+        inputElement.value = formatValue(newValue);
+        setValue(newValue);
+    }, [props.disabled, formatValue, max, min, parseValue, props.readOnly, setValue]);
+    /**
+     * Increments the current value by the step amount
+     */
+    const handleIncrement = useCallback(() => {
+        changeNumberValue((number) => number + step);
+    }, [changeNumberValue, step]);
+    /**
+     * Decrements the current value by the step amount
+     */
+    const handleDecrement = useCallback(() => {
+        changeNumberValue((number) => number - step);
+    }, [changeNumberValue, step]);
+    /**
+     * Sets the value to the maximum allowed
+     */
+    const handleIncrementToMax = useCallback(() => {
+        changeNumberValue((number) => max ?? number + step);
+    }, [changeNumberValue, max, step]);
+    /**
+     * Sets the value to the minimum allowed
+     */
+    const handleDecrementToMin = useCallback(() => {
+        changeNumberValue((number) => min ?? number - step);
+    }, [changeNumberValue, min, step]);
+    return (_jsx(InputNumberContextProvider, { ariaDecrementLabel: ariaDecrementLabel, ariaIncrementLabel: ariaIncrementLabel, defaultValue: defaultValue, disabled: props.disabled, formatOptions: formatOptions, formatValue: formatValue, id: id, inputRef: inputRef, max: max, min: min, parseValue: parseValue, readOnly: props.readOnly, scope: __scopeInputNumber, value: value, onChange: setValue, onDecrement: handleDecrement, onDecrementToMin: handleDecrementToMin, onIncrement: handleIncrement, onIncrementToMax: handleIncrementToMax, children: _jsx(InputPrimitive.Root, { ...inputScope, ...props }) }));
 }
+/* -----------------------------------------------------------------------------
+ * Component: InputNumberField
+ * -------------------------------------------------------------------------- */
 /**
-* The name of the InputNumberField component constant.
-*/
+ * The name of the InputNumberField component constant.
+ */
 const NUMBER_INPUT_FIELD_NAME = "InputNumberField";
 function InputNumberField({ __scopeInputNumber, onBlur, onKeyDown, ...props }) {
-	const inputScope = useInputScope(__scopeInputNumber);
-	const { defaultValue, disabled, formatValue, id, inputRef, max, min, onChange, onDecrement, onDecrementToMin, onIncrement, onIncrementToMax, parseValue, readOnly, step, value } = useInputNumberContext(NUMBER_INPUT_FIELD_NAME, __scopeInputNumber);
-	/**
-	* Handles the blur event to format the value of the input.
-	*
-	* @param event - The blur event triggered when the input loses focus.
-	*/
-	const handleBlur = useCallback((event) => {
-		const numericValue = parseValue(event.target.value);
-		const formattedValue = formatValue(numericValue);
-		if (formattedValue !== event.target.value) event.target.value = formattedValue;
-		onChange(numericValue);
-	}, [
-		formatValue,
-		onChange,
-		parseValue
-	]);
-	/**
-	* Handles keydown events to increment, decrement, or perform other actions.
-	*
-	* @param event - The keyboard event triggered by key presses.
-	*/
-	const handleKeyDown = useCallback((event) => {
-		switch (event.key) {
-			case "ArrowUp":
-				onIncrement();
-				event.preventDefault();
-				break;
-			case "PageUp":
-				onIncrementToMax();
-				event.preventDefault();
-				break;
-			case "ArrowDown":
-				onDecrement();
-				event.preventDefault();
-				break;
-			case "PageDown":
-				onDecrementToMin();
-				event.preventDefault();
-				break;
-			default: break;
-		}
-	}, [
-		onIncrement,
-		onIncrementToMax,
-		onDecrement,
-		onDecrementToMin
-	]);
-	/**
-	* Prevents invalid keyboard input for the numeric input field.
-	*
-	* @param event - The keyboard event to handle.
-	*/
-	const handleKeyDownPrevent = useCallback((event) => {
-		switch (event.key) {
-			case "ArrowUp":
-			case "ArrowDown":
-			case "ArrowLeft":
-			case "ArrowRight":
-			case "PageUp":
-			case "PageDown":
-			case "Tab":
-			case "Escape":
-			case "Enter":
-			case "Backspace":
-			case "Delete":
-			case "Home":
-			case "End":
-			case ".":
-			case ",":
-			case "-":
-			case "%": return;
-			default:
-				if (isNumberKey(event.key) || isModifierKey(event) || isFunctionKey(event.key)) return;
-				event.preventDefault();
-		}
-	}, []);
-	/**
-	* Handles the Enter key to format the value of the input.
-	*
-	* @param event - The keyboard event triggered by pressing Enter.
-	*/
-	const handleKeyDownEnter = useCallback((event) => {
-		const inputElement = inputRef.current;
-		if (event.key !== "Enter" || !inputElement) return;
-		const numericValue = parseValue(inputElement.value);
-		const formattedValue = formatValue(numericValue);
-		if (formattedValue !== inputElement.value) inputElement.value = formattedValue;
-		onChange(numericValue);
-	}, [
-		formatValue,
-		inputRef,
-		onChange,
-		parseValue
-	]);
-	/**
-	* Creates a combined keydown event handler that processes keyboard events in sequence.
-	*
-	* The handler chain executes in the following order:
-	* 1. User-provided onKeyDown handler (if any)
-	* 2. handleKeyDownPrevent - Prevents non-numeric input
-	* 3. handleKeyDown - Handles arrow keys and page up/down for value adjustments
-	* 4. handleKeyDownEnter - Handles Enter key press to format and update the value
-	*
-	* @returns A composed event handler function for the onKeyDown event
-	*/
-	const combinedKeyDownHandler = useCallback((event) => {
-		composeEventHandlers(onKeyDown, chain(handleKeyDownPrevent, handleKeyDown, handleKeyDownEnter))(event);
-	}, [
-		onKeyDown,
-		handleKeyDown,
-		handleKeyDownEnter,
-		handleKeyDownPrevent
-	]);
-	/**
-	* Adds a listener to handle wheel events for incrementing or decrementing the value.
-	*/
-	useEffect(() => {
-		const handleWheel = (event) => {
-			const inputElement = inputRef.current;
-			if (!inputElement || disabled || readOnly || document.activeElement !== inputElement) return;
-			event.preventDefault();
-			if (event.deltaY > 0) onIncrement();
-			else onDecrement();
-		};
-		const inputElement = inputRef.current;
-		inputElement?.addEventListener("wheel", handleWheel);
-		return () => {
-			inputElement?.removeEventListener("wheel", handleWheel);
-		};
-	}, [
-		onIncrement,
-		onDecrement,
-		inputRef,
-		disabled,
-		readOnly
-	]);
-	/**
-	* Updates the input field's value when it changes in the context.
-	*/
-	useEffect(() => {
-		const inputElement = inputRef.current;
-		if (inputElement && inputElement !== document.activeElement) inputElement.value = formatValue(value);
-	}, [
-		formatValue,
-		inputRef,
-		value
-	]);
-	/**
-	* Adds a listener to handle form reset events by clearing the input value.
-	*/
-	useEffect(() => {
-		const inputElement = inputRef.current;
-		if (!inputElement) return;
-		const handleReset = () => {
-			onChange(parseValue(defaultValue));
-		};
-		const form = inputElement.form;
-		form?.addEventListener("reset", handleReset);
-		return () => {
-			form?.removeEventListener("reset", handleReset);
-		};
-	}, [
-		defaultValue,
-		inputRef,
-		onChange,
-		parseValue
-	]);
-	return /* @__PURE__ */ jsx(InputField, {
-		ref: inputRef,
-		defaultValue: formatValue(value),
-		disabled,
-		id,
-		inputMode: "decimal",
-		max,
-		min,
-		readOnly,
-		step,
-		onBlur: composeEventHandlers(onBlur, handleBlur),
-		onKeyDown: combinedKeyDownHandler,
-		...inputScope,
-		...props
-	});
+    // Retrieve input number context and input scope
+    const inputScope = useInputScope(__scopeInputNumber);
+    const { defaultValue, disabled, formatValue, id, inputRef, max, min, onChange, onDecrement, onDecrementToMin, onIncrement, onIncrementToMax, parseValue, readOnly, step, value, } = useInputNumberContext(NUMBER_INPUT_FIELD_NAME, __scopeInputNumber);
+    /**
+     * Handles the blur event to format the value of the input.
+     *
+     * @param event - The blur event triggered when the input loses focus.
+     */
+    const handleBlur = useCallback((event) => {
+        const numericValue = parseValue(event.target.value);
+        const formattedValue = formatValue(numericValue);
+        if (formattedValue !== event.target.value) {
+            event.target.value = formattedValue;
+        }
+        onChange(numericValue);
+    }, [formatValue, onChange, parseValue]);
+    /**
+     * Handles keydown events to increment, decrement, or perform other actions.
+     *
+     * @param event - The keyboard event triggered by key presses.
+     */
+    const handleKeyDown = useCallback((event) => {
+        switch (event.key) {
+            case "ArrowUp": {
+                onIncrement();
+                event.preventDefault();
+                break;
+            }
+            case "PageUp": {
+                onIncrementToMax();
+                event.preventDefault();
+                break;
+            }
+            case "ArrowDown": {
+                onDecrement();
+                event.preventDefault();
+                break;
+            }
+            case "PageDown": {
+                onDecrementToMin();
+                event.preventDefault();
+                break;
+            }
+            default: {
+                break;
+            }
+        }
+    }, [onIncrement, onIncrementToMax, onDecrement, onDecrementToMin]);
+    /**
+     * Prevents invalid keyboard input for the numeric input field.
+     *
+     * @param event - The keyboard event to handle.
+     */
+    const handleKeyDownPrevent = useCallback((event) => {
+        switch (event.key) {
+            case "ArrowUp":
+            case "ArrowDown":
+            case "ArrowLeft":
+            case "ArrowRight":
+            case "PageUp":
+            case "PageDown":
+            case "Tab":
+            case "Escape":
+            case "Enter":
+            case "Backspace":
+            case "Delete":
+            case "Home":
+            case "End":
+            case ".":
+            case ",":
+            case "-":
+            case "%": {
+                return;
+            }
+            default: {
+                if (isNumberKey(event.key) || isModifierKey(event) || isFunctionKey(event.key)) {
+                    return;
+                }
+                event.preventDefault();
+            }
+        }
+    }, []);
+    /**
+     * Handles the Enter key to format the value of the input.
+     *
+     * @param event - The keyboard event triggered by pressing Enter.
+     */
+    const handleKeyDownEnter = useCallback((event) => {
+        const inputElement = inputRef.current;
+        if (event.key !== "Enter" || !inputElement) {
+            return;
+        }
+        const numericValue = parseValue(inputElement.value);
+        const formattedValue = formatValue(numericValue);
+        if (formattedValue !== inputElement.value) {
+            inputElement.value = formattedValue;
+        }
+        onChange(numericValue);
+    }, [formatValue, inputRef, onChange, parseValue]);
+    /**
+     * Creates a combined keydown event handler that processes keyboard events in sequence.
+     *
+     * The handler chain executes in the following order:
+     * 1. User-provided onKeyDown handler (if any)
+     * 2. handleKeyDownPrevent - Prevents non-numeric input
+     * 3. handleKeyDown - Handles arrow keys and page up/down for value adjustments
+     * 4. handleKeyDownEnter - Handles Enter key press to format and update the value
+     *
+     * @returns A composed event handler function for the onKeyDown event
+     */
+    const combinedKeyDownHandler = useCallback((event) => {
+        composeEventHandlers(onKeyDown, chain(handleKeyDownPrevent, handleKeyDown, handleKeyDownEnter))(event);
+    }, [onKeyDown, handleKeyDown, handleKeyDownEnter, handleKeyDownPrevent]);
+    /**
+     * Adds a listener to handle wheel events for incrementing or decrementing the value.
+     */
+    useEffect(() => {
+        const handleWheel = (event) => {
+            const inputElement = inputRef.current;
+            if (!inputElement || disabled || readOnly || document.activeElement !== inputElement) {
+                return;
+            }
+            event.preventDefault();
+            if (event.deltaY > 0) {
+                onIncrement();
+            }
+            else {
+                onDecrement();
+            }
+        };
+        const inputElement = inputRef.current;
+        inputElement?.addEventListener("wheel", handleWheel);
+        return () => {
+            inputElement?.removeEventListener("wheel", handleWheel);
+        };
+    }, [onIncrement, onDecrement, inputRef, disabled, readOnly]);
+    /**
+     * Updates the input field's value when it changes in the context.
+     */
+    useEffect(() => {
+        const inputElement = inputRef.current;
+        if (inputElement && inputElement !== document.activeElement) {
+            inputElement.value = formatValue(value);
+        }
+    }, [formatValue, inputRef, value]);
+    /**
+     * Adds a listener to handle form reset events by clearing the input value.
+     */
+    useEffect(() => {
+        const inputElement = inputRef.current;
+        if (!inputElement) {
+            return;
+        }
+        const handleReset = () => {
+            onChange(parseValue(defaultValue));
+        };
+        const form = inputElement.form;
+        form?.addEventListener("reset", handleReset);
+        return () => {
+            form?.removeEventListener("reset", handleReset);
+        };
+    }, [defaultValue, inputRef, onChange, parseValue]);
+    return (_jsx(InputPrimitive.Field, { ref: inputRef, defaultValue: formatValue(value), disabled: disabled, id: id, inputMode: "decimal", max: max, min: min, readOnly: readOnly, step: step, onBlur: composeEventHandlers(onBlur, handleBlur), onKeyDown: combinedKeyDownHandler, ...inputScope, ...props }));
 }
+/* -----------------------------------------------------------------------------
+ * Component: NumberStepperButton
+ * -------------------------------------------------------------------------- */
 /**
-* The name of the NumberStepperButton component constant.
-*/
+ * The name of the NumberStepperButton component constant.
+ */
 const NUMBER_STEPPER_BUTTON_NAME = "NumberStepperButton";
 function NumberStepperButton({ __scopeInputNumber, operation, ...props }) {
-	const { ariaDecrementLabel, ariaIncrementLabel, disabled, id, max, min, onDecrement, onIncrement, value } = useInputNumberContext(NUMBER_STEPPER_BUTTON_NAME, __scopeInputNumber);
-	const isDisabled = useMemo(() => {
-		return (disabled ?? (min !== void 0 && value !== void 0 && value <= min)) || max !== void 0 && value !== void 0 && value >= max;
-	}, [
-		min,
-		max,
-		value,
-		disabled
-	]);
-	/**
-	* Ref to store a timeout ID for managing repeated button actions.
-	*/
-	const timeoutIdRef = useRef(null);
-	/**
-	* Starts a repeated action at a regular interval.
-	* The action begins immediately and then continues with a delay.
-	*
-	* @param callback - The callback function to execute repeatedly.
-	*/
-	const startActionInterval = useCallback((callback) => {
-		const interval = 100;
-		const repeatAction = () => {
-			callback();
-			timeoutIdRef.current = setTimeout(repeatAction, interval);
-		};
-		callback();
-		timeoutIdRef.current = setTimeout(repeatAction, interval * 2);
-	}, []);
-	/**
-	* Clears any ongoing action intervals.
-	*/
-	const clearActionInterval = useCallback(() => {
-		if (timeoutIdRef.current) {
-			clearTimeout(timeoutIdRef.current);
-			timeoutIdRef.current = null;
-		}
-	}, []);
-	/**
-	* Handles pointer down events and triggers the appropriate action
-	* (`increment` or `decrement`).
-	*/
-	const handlePointerDown = useCallback(() => {
-		startActionInterval(operation === "increment" ? onIncrement : onDecrement);
-	}, [
-		onDecrement,
-		onIncrement,
-		operation,
-		startActionInterval
-	]);
-	/**
-	* Prevents the context menu from displaying when the button is right-clicked.
-	*
-	* @param event - The mouse event triggered by the right-click.
-	*/
-	const handleContextMenu = useCallback((event) => {
-		event.preventDefault();
-	}, []);
-	/**
-	* Handles keyboard events to support activation of the button using
-	* keyboard navigation (Enter or Space).
-	*
-	* @param event - The keyboard event with the triggered key.
-	*/
-	const handleKeyDown = useCallback((event) => {
-		if (event.key === "Enter" || event.key === " ") {
-			event.preventDefault();
-			(operation === "increment" ? onIncrement : onDecrement)();
-		}
-	}, [
-		onDecrement,
-		onIncrement,
-		operation
-	]);
-	return /* @__PURE__ */ jsx("button", {
-		"aria-controls": id,
-		"aria-label": operation === "increment" ? ariaIncrementLabel : ariaDecrementLabel,
-		"aria-live": "polite",
-		disabled: isDisabled,
-		type: "button",
-		onContextMenu: handleContextMenu,
-		onKeyDown: handleKeyDown,
-		onPointerCancel: clearActionInterval,
-		onPointerDown: handlePointerDown,
-		onPointerLeave: clearActionInterval,
-		onPointerUp: clearActionInterval,
-		...props
-	});
+    // Destructures relevant context values for the button functionality.
+    const { ariaDecrementLabel, ariaIncrementLabel, disabled, id, max, min, onDecrement, onIncrement, value, } = useInputNumberContext(NUMBER_STEPPER_BUTTON_NAME, __scopeInputNumber);
+    const isDisabled = useMemo(() => {
+        const atMin = min !== undefined && value !== undefined && value <= min;
+        const atMax = max !== undefined && value !== undefined && value >= max;
+        return (disabled ?? atMin) || atMax;
+    }, [min, max, value, disabled]);
+    /**
+     * Ref to store a timeout ID for managing repeated button actions.
+     */
+    const timeoutIdRef = useRef(null);
+    /**
+     * Starts a repeated action at a regular interval.
+     * The action begins immediately and then continues with a delay.
+     *
+     * @param callback - The callback function to execute repeatedly.
+     */
+    const startActionInterval = useCallback((callback) => {
+        // Time between repeated actions (in milliseconds).
+        const interval = 100;
+        // Function to perform the action and set the next interval.
+        const repeatAction = () => {
+            callback();
+            timeoutIdRef.current = setTimeout(repeatAction, interval);
+        };
+        callback();
+        timeoutIdRef.current = setTimeout(repeatAction, interval * 2);
+    }, []);
+    /**
+     * Clears any ongoing action intervals.
+     */
+    const clearActionInterval = useCallback(() => {
+        if (timeoutIdRef.current) {
+            clearTimeout(timeoutIdRef.current);
+            timeoutIdRef.current = null;
+        }
+    }, []);
+    /**
+     * Handles pointer down events and triggers the appropriate action
+     * (`increment` or `decrement`).
+     */
+    const handlePointerDown = useCallback(() => {
+        const action = operation === "increment" ? onIncrement : onDecrement;
+        startActionInterval(action);
+    }, [onDecrement, onIncrement, operation, startActionInterval]);
+    /**
+     * Prevents the context menu from displaying when the button is right-clicked.
+     *
+     * @param event - The mouse event triggered by the right-click.
+     */
+    const handleContextMenu = useCallback((event) => {
+        event.preventDefault();
+    }, []);
+    /**
+     * Handles keyboard events to support activation of the button using
+     * keyboard navigation (Enter or Space).
+     *
+     * @param event - The keyboard event with the triggered key.
+     */
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            const action = operation === "increment" ? onIncrement : onDecrement;
+            action();
+        }
+    }, [onDecrement, onIncrement, operation]);
+    return (_jsx("button", { "aria-controls": id, "aria-label": operation === "increment" ? ariaIncrementLabel : ariaDecrementLabel, "aria-live": "polite", disabled: isDisabled, type: "button", onContextMenu: handleContextMenu, onKeyDown: handleKeyDown, onPointerCancel: clearActionInterval, onPointerDown: handlePointerDown, onPointerLeave: clearActionInterval, onPointerUp: clearActionInterval, ...props }));
 }
 function InputNumberIncrementButton(props) {
-	return /* @__PURE__ */ jsx(NumberStepperButton, {
-		operation: "increment",
-		...props
-	});
+    return _jsx(NumberStepperButton, { operation: "increment", ...props });
 }
 function InputNumberDecrementButton(props) {
-	return /* @__PURE__ */ jsx(NumberStepperButton, {
-		operation: "decrement",
-		...props
-	});
+    return _jsx(NumberStepperButton, { operation: "decrement", ...props });
 }
+/* -----------------------------------------------------------------------------
+ * Utility Functions
+ * -------------------------------------------------------------------------- */
 /**
-* Chains multiple callbacks into a single function
-*
-* @param callbacks - Array of callback functions that will be executed in order
-* @returns A single function that executes all callbacks
-*/
+ * Chains multiple callbacks into a single function
+ *
+ * @param callbacks - Array of callback functions that will be executed in order
+ * @returns A single function that executes all callbacks
+ */
 function chain(...callbacks) {
-	return (...args) => {
-		for (const callback of callbacks) callback(...args);
-	};
+    return (...args) => {
+        for (const callback of callbacks) {
+            callback(...args);
+        }
+    };
 }
 /**
-* Extracts decimal and a thousand separators from a given locale's number format
-*
-* @param locale - The locale string to use for number formatting (e.g., 'en-US', 'de-DE')
-* @returns Object containing decimal and a thousand separators
-*/
+ * Extracts decimal and a thousand separators from a given locale's number format
+ *
+ * @param locale - The locale string to use for number formatting (e.g., 'en-US', 'de-DE')
+ * @returns Object containing decimal and a thousand separators
+ */
 function getNumberFormatSeparators(locale) {
-	const parts = new Intl.NumberFormat(locale).formatToParts(12345.6);
-	let thousandSeparator = "";
-	let decimalSeparator = "";
-	for (const part of parts) {
-		if (part.type === "group") thousandSeparator = part.value;
-		if (part.type === "decimal") decimalSeparator = part.value;
-		if (thousandSeparator && decimalSeparator) break;
-	}
-	return {
-		decimalSeparator,
-		thousandSeparator
-	};
+    const numberFormat = new Intl.NumberFormat(locale);
+    const parts = numberFormat.formatToParts(12_345.6);
+    let thousandSeparator = "";
+    let decimalSeparator = "";
+    for (const part of parts) {
+        if (part.type === "group") {
+            thousandSeparator = part.value;
+        }
+        if (part.type === "decimal") {
+            decimalSeparator = part.value;
+        }
+        // Stop early if you've found enough.
+        if (thousandSeparator && decimalSeparator) {
+            break;
+        }
+    }
+    return { decimalSeparator, thousandSeparator };
 }
 /**
-* Normalizes an input value by removing formatting characters
-*
-* @param value - The input string to normalize
-* @param thousandSeparator - The thousand-separator character to remove
-* @param decimalSeparator - The decimal separator to convert to standard dot notation
-* @returns Normalized string value ready for numeric conversion
-*/
+ * Normalizes an input value by removing formatting characters
+ *
+ * @param value - The input string to normalize
+ * @param thousandSeparator - The thousand-separator character to remove
+ * @param decimalSeparator - The decimal separator to convert to standard dot notation
+ * @returns Normalized string value ready for numeric conversion
+ */
 function normalizeInputValue(value, thousandSeparator, decimalSeparator) {
-	return value.replaceAll(new RegExp(`\\${thousandSeparator}`, "g"), "").replace(new RegExp(`\\${decimalSeparator}`), ".").replaceAll(/[()]/g, "-");
+    return value
+        .replaceAll(new RegExp(`\\${thousandSeparator}`, "g"), "")
+        .replace(new RegExp(`\\${decimalSeparator}`), ".")
+        .replaceAll(/[()]/g, "-");
 }
 /**
-* Checks if a keyboard event includes modifier keys (Ctrl, Alt, Meta, Shift)
-*
-* @param event - The keyboard event to check
-* @returns True if any modifier key is pressed
-*/
+ * Checks if a keyboard event includes modifier keys (Ctrl, Alt, Meta, Shift)
+ *
+ * @param event - The keyboard event to check
+ * @returns True if any modifier key is pressed
+ */
 function isModifierKey(event) {
-	return event.ctrlKey || event.altKey || event.metaKey || event.shiftKey;
+    return event.ctrlKey || event.altKey || event.metaKey || event.shiftKey;
 }
 /**
-* Determines if a key is a function key (F1-F12)
-*
-* @param key - The key name to check
-* @returns True if the key is a function key
-*/
+ * Determines if a key is a function key (F1-F12)
+ *
+ * @param key - The key name to check
+ * @returns True if the key is a function key
+ */
 function isFunctionKey(key) {
-	return key.startsWith("F") && key.length > 1;
+    return key.startsWith("F") && key.length > 1;
 }
 /**
-* Checks if a key represents a number (0-9)
-*
-* @param key - The key name to check
-* @returns True if the key represents a number
-*/
+ * Checks if a key represents a number (0-9)
+ *
+ * @param key - The key name to check
+ * @returns True if the key represents a number
+ */
 function isNumberKey(key) {
-	return !Number.isNaN(Number(key));
+    return !Number.isNaN(Number(key));
 }
 /**
-* Clamps a numeric value between a minimum and maximum
-*
-* @param value - The value to clamp
-* @param min - The minimum allowed value (defaults to \-Infinity)
-* @param max - The maximum allowed value (defaults to Infinity)
-* @returns The clamped value
-*/
+ * Clamps a numeric value between a minimum and maximum
+ *
+ * @param value - The value to clamp
+ * @param min - The minimum allowed value (defaults to \-Infinity)
+ * @param max - The maximum allowed value (defaults to Infinity)
+ * @returns The clamped value
+ */
 function clamp(value, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY) {
-	return Math.min(Math.max(value, min), max);
+    return Math.min(Math.max(value, min), max);
 }
-//#endregion
-export { InputNumberDecrementButton as DecrementButton, InputNumberDecrementButton, InputNumberField as Field, InputNumberField, InputNumberIncrementButton as IncrementButton, InputNumberIncrementButton, InputNumber, InputNumber as Root, createInputNumberScope };
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+export { createInputNumberScope, InputNumberDecrementButton as DecrementButton, InputNumberField as Field, InputNumberIncrementButton as IncrementButton, InputNumber, InputNumberDecrementButton, InputNumberField, InputNumberIncrementButton, InputNumber as Root, };