@codefast/ui 0.3.13-canary.3 → 0.3.13-canary.4

package/dist/primitives/input-number.mjs

@@ -0,0 +1,514 @@
+import { Field as InputField, Input, createInputScope } from "./input.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+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
+/**
+* The name of the InputNumber component constant.
+*/
+const NUMBER_INPUT_NAME = "InputNumber";
+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
+		})
+	});
+}
+/**
+* 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
+	});
+}
+/**
+* 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
+	});
+}
+function InputNumberIncrementButton(props) {
+	return /* @__PURE__ */ jsx(NumberStepperButton, {
+		operation: "increment",
+		...props
+	});
+}
+function InputNumberDecrementButton(props) {
+	return /* @__PURE__ */ jsx(NumberStepperButton, {
+		operation: "decrement",
+		...props
+	});
+}
+/**
+* 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);
+	};
+}
+/**
+* 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
+	};
+}
+/**
+* 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, "-");
+}
+/**
+* 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;
+}
+/**
+* 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;
+}
+/**
+* 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));
+}
+/**
+* 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);
+}
+//#endregion
+export { InputNumberDecrementButton as DecrementButton, InputNumberDecrementButton, InputNumberField as Field, InputNumberField, InputNumberIncrementButton as IncrementButton, InputNumberIncrementButton, InputNumber, InputNumber as Root, createInputNumberScope };

package/dist/primitives/input.d.mts

@@ -0,0 +1,72 @@
+import { ComponentProps, JSX, PropsWithChildren, ReactNode } from "react";
+import * as _$_radix_ui_react_context0 from "@radix-ui/react-context";
+import { Scope } from "@radix-ui/react-context";
+
+//#region src/primitives/input.d.ts
+/**
+ * Type for adding scope to component props
+ */
+type ScopedProps<P> = P & {
+  /**
+   * Scope for the Input component context
+   */
+  __scopeInput?: Scope;
+};
+declare const createInputScope: _$_radix_ui_react_context0.CreateScope;
+/**
+ * Props for styling and appearance of the Input component
+ */
+interface InputVisualProps {
+  /**
+   * CSS class name for the input container
+   */
+  className?: string;
+  /**
+   * Element to display before the input
+   */
+  prefix?: ReactNode;
+  /**
+   * Custom spinner element for loading state
+   */
+  spinner?: ReactNode;
+  /**
+   * Element to display after the input
+   */
+  suffix?: ReactNode;
+}
+/**
+ * Props for the behavior and state of the Input component
+ */
+interface InputBehaviorProps {
+  /**
+   * Whether the input is disabled
+   */
+  disabled?: boolean;
+  /**
+   * Position of the loading spinner - either before or after the input
+   */
+  loaderPosition?: "prefix" | "suffix";
+  /**
+   * Whether the input is in the loading state
+   */
+  loading?: boolean;
+  /**
+   * Whether the input is in read-only mode
+   */
+  readOnly?: boolean;
+}
+/**
+ * Combined props for the Input component
+ */
+type InputProps = PropsWithChildren<InputBehaviorProps & InputVisualProps>;
+declare function Input(inputProps: ScopedProps<InputProps>): JSX.Element;
+/**
+ * Props for the InputField component
+ */
+type InputFieldProps = ComponentProps<"input">;
+declare function InputField({
+  __scopeInput,
+  ...props
+}: ScopedProps<InputFieldProps>): JSX.Element;
+//#endregion
+export { InputField as Field, InputField, Input, Input as Root, type InputFieldProps, type InputProps, createInputScope };

package/dist/primitives/input.mjs

@@ -0,0 +1,75 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { createContextScope } from "@radix-ui/react-context";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+//#region src/primitives/input.tsx
+const INPUT_NAME = "Input";
+const [createInputContext, createInputScope] = createContextScope(INPUT_NAME);
+const [InputContextProvider, useInputContext] = createInputContext(INPUT_NAME);
+function Input(inputProps) {
+	const { __scopeInput, children, disabled, loaderPosition = "prefix", loading, prefix, readOnly, spinner, suffix, ...props } = inputProps;
+	/**
+	* Reference to the input element
+	*/
+	const inputRef = useRef(null);
+	/**
+	* Handles pointer down events on the input container
+	* Focuses the input element when clicking on the container
+	*
+	* @param event - The pointer event object
+	*/
+	const handlePointerDown = (event) => {
+		const target = event.target;
+		if (target.tagName.toLowerCase() === "input" || target.closest("input, a, button")) {
+			event.stopPropagation();
+			return;
+		}
+		const inputElement = inputRef.current;
+		if (!inputElement) return;
+		if (document.activeElement === inputElement) {
+			event.preventDefault();
+			return;
+		}
+		requestAnimationFrame(() => {
+			if (inputElement.type === "file") {
+				inputElement.click();
+				return;
+			}
+			if (document.activeElement !== inputElement) inputElement.focus();
+		});
+	};
+	return /* @__PURE__ */ jsx(InputContextProvider, {
+		disabled,
+		inputRef,
+		readOnly,
+		scope: __scopeInput,
+		children: /* @__PURE__ */ jsxs("div", {
+			"data-disabled": disabled,
+			"data-readonly": readOnly,
+			role: "presentation",
+			onPointerDown: handlePointerDown,
+			...props,
+			children: [
+				loading && loaderPosition === "prefix" ? spinner : prefix,
+				children,
+				loading && loaderPosition === "suffix" ? spinner : suffix
+			]
+		})
+	});
+}
+const INPUT_FIELD_NAME = "InputField";
+function InputField({ __scopeInput, ...props }) {
+	/**
+	* Context values from parent Input component
+	*/
+	const { disabled, inputRef, readOnly } = useInputContext(INPUT_FIELD_NAME, __scopeInput);
+	return /* @__PURE__ */ jsx("input", {
+		ref: useComposedRefs(inputRef),
+		disabled,
+		readOnly,
+		type: "text",
+		...props
+	});
+}
+//#endregion
+export { InputField as Field, InputField, Input, Input as Root, createInputScope };