@postxl/ui-components 1.3.1 → 1.3.2

package/dist/index.js

@@ -6092,9 +6092,52 @@ function useIsMobile(mobileBreakpoint = 768) {
 //#endregion
 //#region src/input/number-input.tsx
 /**
+* Formats a number according to the provided formatter
+*/
+function formatNumber(value, formatter, intlFormatter) {
+	if (typeof formatter === "function") return formatter(value);
+	if (intlFormatter) return intlFormatter.format(value);
+	const { locale, options } = formatter;
+	return new Intl.NumberFormat(locale, options).format(value);
+}
+/**
+* Parses a formatted string back to a number using the format configuration
+* This is more robust than heuristics as it uses the actual locale/format settings
+*/
+function parseFormattedNumber(formatted, formatter, intlFormatter) {
+	if (formatted === "") return void 0;
+	if (typeof formatter === "function") return parseFormattedNumberHeuristic(formatted);
+	const formatterToUse = intlFormatter ?? new Intl.NumberFormat(formatter.locale, formatter.options);
+	const parts = formatterToUse.formatToParts(12345.6);
+	const groupSeparator = parts.find((p) => p.type === "group")?.value ?? "";
+	const decimalSeparator = parts.find((p) => p.type === "decimal")?.value ?? ".";
+	const normalized = formatted.replaceAll(groupSeparator, "").replaceAll(decimalSeparator, ".").replaceAll(/[^\d.-]/g, "");
+	let parsed = Number(normalized);
+	if (Number.isNaN(parsed)) return void 0;
+	if (formatter.options?.style === "percent") parsed = parsed / 100;
+	return parsed;
+}
+/**
+* Fallback parser for custom format functions where we don't know the format rules
+* Uses heuristics to guess the decimal separator
+*/
+function parseFormattedNumberHeuristic(formatted) {
+	let cleaned = formatted.trim();
+	const lastComma = cleaned.lastIndexOf(",");
+	const lastPeriod = cleaned.lastIndexOf(".");
+	if (lastComma > lastPeriod) {
+		cleaned = cleaned.replaceAll(/[.\s']/g, "");
+		cleaned = cleaned.replace(",", ".");
+	} else if (lastPeriod > lastComma) cleaned = cleaned.replaceAll(/[,\s']/g, "");
+	else cleaned = cleaned.replaceAll(/[,.\s']/g, "");
+	cleaned = cleaned.replaceAll(/[^0-9.-]/g, "");
+	const parsed = Number(cleaned);
+	return Number.isNaN(parsed) ? void 0 : parsed;
+}
+/**
 * Wrapper variants that mirror inputVariants but use focus-within (for wrapper)
 * instead of focus-visible (for input element).
-* NOTE: When modifying variants, also update inputVariants in input.tsx
+* Note: When modifying variants, also update inputVariants in input.tsx
 */
 const numberInputWrapperVariants = cva("border-input bg-background grid grid-cols-[auto_1fr_auto] items-center overflow-hidden rounded-md border shadow-xs transition-[color,box-shadow] has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50", {
 	variants: { variant: {
@@ -6103,19 +6146,26 @@ const numberInputWrapperVariants = cva("border-input bg-background grid grid-col
 	} },
 	defaultVariants: { variant: "default" }
 });
-const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix, suffix, variant, showSpinButtons = false, __e2e_test_id__, onEnter, onChange,...props }, ref) => {
+const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix, suffix, variant, showSpinButtons = false, __e2e_test_id__, onEnter, onChange, format: format$1, value: controlledValue,...props }, ref) => {
+	const [isFocused, setIsFocused] = React$10.useState(false);
+	const [inputString, setInputString] = React$10.useState("");
+	const intlFormatter = React$10.useMemo(() => {
+		if (!format$1 || typeof format$1 === "function") return void 0;
+		return new Intl.NumberFormat(format$1.locale, format$1.options);
+	}, [format$1]);
 	const focusInputAtPosition = (element, cursor) => {
 		const parent = element.parentElement;
 		if (!parent) return;
 		const input = parent.querySelector("input");
 		if (!input) return;
-		input.type = "text";
+		const originalType = input.type;
+		if (originalType === "number") input.type = "text";
 		if (cursor === "start") input.setSelectionRange(0, 0);
 		else {
 			const length = input.value.length;
 			input.setSelectionRange(length, length);
 		}
-		input.type = "number";
+		input.type = originalType;
 		input.click();
 		input.focus();
 	};
@@ -6131,9 +6181,44 @@ const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix,
 	};
 	const handleChange = (e) => {
 		const value = e.target.value;
-		const parsedValue = value === "" ? void 0 : Number(value);
+		if (format$1) setInputString(value);
+		let parsedValue;
+		if (format$1) parsedValue = parseFormattedNumber(value, format$1, intlFormatter);
+		else parsedValue = value === "" ? void 0 : Number(value);
 		onChange?.(parsedValue);
 	};
+	const handleFocus = (e) => {
+		setIsFocused(true);
+		props.onFocus?.(e);
+	};
+	const handleBlur = (e) => {
+		setIsFocused(false);
+		setInputString("");
+		props.onBlur?.(e);
+	};
+	const displayValue = React$10.useMemo(() => {
+		if (isFocused && format$1) {
+			if (inputString !== "") return inputString;
+			if (controlledValue !== void 0) {
+				const formatted = formatNumber(controlledValue, format$1, intlFormatter);
+				if (typeof format$1 !== "function" && intlFormatter) {
+					const parts = intlFormatter.formatToParts(controlledValue);
+					const groupSeparator = parts.find((p) => p.type === "group")?.value ?? "";
+					return formatted.replaceAll(groupSeparator, "");
+				}
+				return controlledValue.toString();
+			}
+			return "";
+		}
+		if (!isFocused && format$1 && controlledValue !== void 0) return formatNumber(controlledValue, format$1, intlFormatter);
+		return controlledValue?.toString() ?? "";
+	}, [
+		isFocused,
+		format$1,
+		inputString,
+		controlledValue,
+		intlFormatter
+	]);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn(numberInputWrapperVariants({ variant }), wrapperClassName),
 		children: [
@@ -6144,7 +6229,7 @@ const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix,
 				children: prefix
 			}),
 			/* @__PURE__ */ jsx("input", {
-				type: "number",
+				type: format$1 ? "text" : "number",
 				"data-slot": "input",
 				className: cn(
 					inputVariants({ variant }),
@@ -6155,12 +6240,15 @@ const NumberInput = React$10.forwardRef(({ className, wrapperClassName, prefix,
 					"text-right",
 					!prefix && "pl-2",
 					!suffix && (showSpinButtons ? "pr-1" : "pr-2"),
-					!showSpinButtons && "appearance-none",
+					!showSpinButtons && !format$1 && "appearance-none",
 					className
 ),
 				"data-test-id": __e2e_test_id__,
 				ref,
+				value: displayValue,
 				onChange: handleChange,
+				onFocus: handleFocus,
+				onBlur: handleBlur,
 				onKeyDown: (e) => {
 					props.onKeyDown?.(e);
 					if (e.key === "Enter") onEnter?.();