@_tc/template-core 0.0.1-bate.6 → 0.0.1-bate.61

package/fe/packages/react/ui/components/ImagePreview/PreviewImage.js

@@ -0,0 +1,56 @@
+import { useI18n } from "../../i18n/useI18n.js";
+import "../../i18n/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { ImagePreviewController } from "./ImagePreview.js";
+import { useMemo, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/ImagePreview/PreviewImage.tsx
+function PreviewImage(props) {
+	const t = useI18n();
+	const { onClose, images, thumbSize = 80, direction = "horizontal", ...ext } = props;
+	const [open, setOpen] = useState(false);
+	const [currentIndex, setCurrentIndex] = useState(ext.initialIndex ?? 0);
+	const sizeClass = useMemo(() => {
+		const value = typeof thumbSize === "number" ? `${thumbSize}px` : thumbSize;
+		return `w-[${value}] h-[${value}]`;
+	}, [thumbSize]);
+	const sizeStyle = useMemo(() => {
+		const value = typeof thumbSize === "number" ? `${thumbSize}px` : thumbSize;
+		return {
+			width: value,
+			height: value
+		};
+	}, [thumbSize]);
+	if (!images?.length) return null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		className: `flex gap-2 ${direction === "vertical" ? "flex-col" : ""}`,
+		children: images.map((src, idx) => /* @__PURE__ */ jsx(Button, {
+			variant: "text",
+			type: "button",
+			className: `relative aspect-square overflow-hidden rounded-lg border border-border/60 bg-card shadow-[inset_0_1px_0_hsl(var(--foreground)/0.04)] transition-colors duration-200 hover:border-border/80 active:border-theme/60 focus-visible:ring-theme/30 ${sizeClass}`,
+			style: sizeStyle,
+			onClick: () => {
+				setCurrentIndex(idx);
+				setOpen(true);
+			},
+			"aria-label": t("components.imagePreview.previewImage", { index: idx + 1 }),
+			children: /* @__PURE__ */ jsx("img", {
+				src,
+				alt: "",
+				className: "h-full w-full object-cover"
+			})
+		}, src + idx))
+	}), /* @__PURE__ */ jsx(ImagePreviewController, {
+		...ext,
+		images,
+		initialIndex: currentIndex,
+		open,
+		onClose: () => {
+			setOpen(false);
+			onClose?.();
+		}
+	})] });
+}
+//#endregion
+export { PreviewImage };

package/fe/packages/react/ui/components/ImagePreview/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ImagePreview";
+export * from "./PreviewImage";

package/fe/packages/react/ui/components/ImagePreview/index.js

@@ -0,0 +1,3 @@
+import { ImagePreviewController } from "./ImagePreview.js";
+import { PreviewImage } from "./PreviewImage.js";
+export { ImagePreviewController, PreviewImage };

package/fe/packages/react/ui/components/Input/Input.d.ts

@@ -0,0 +1,22 @@
+import type { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
+export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue'> & {
+    value?: string;
+    onChange?: (v: string, e: ChangeEvent<HTMLInputElement>) => void;
+    defaultValue?: string;
+    allowClear?: boolean | {
+        clearIcon: ReactNode;
+    };
+    addonAfter?: ReactNode;
+    inputClassName?: string;
+};
+declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange"> & {
+    value?: string;
+    onChange?: (v: string, e: ChangeEvent<HTMLInputElement>) => void;
+    defaultValue?: string;
+    allowClear?: boolean | {
+        clearIcon: ReactNode;
+    };
+    addonAfter?: ReactNode;
+    inputClassName?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export { Input };

package/fe/packages/react/ui/components/Input/Input.js

@@ -0,0 +1,142 @@
+import { cn } from "../../lib/utils.js";
+import { useInputController } from "../hooks/useInputController.js";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Eye, EyeOff, X } from "lucide-react";
+//#region packages/react/ui/components/Input/Input.tsx
+var Input = forwardRef(({ className, inputClassName, type, value: controlledValue, onChange, defaultValue, allowClear, disabled, addonAfter, ...props }, ref) => {
+	const isFileInput = type === "file";
+	const isPasswordInput = type === "password";
+	const { setInternalValue, setIsFocused, setRefs, controllerRef, isControlledRef, isFocused, value, hasValue } = useInputController({
+		defaultValue,
+		controlledValue,
+		ref
+	});
+	const [innerType, setInnerType] = useState(type);
+	const isMountedRef = useRef(false);
+	const currentType = isPasswordInput ? innerType ?? "password" : type;
+	const isPasswordVisible = currentType === "text";
+	const removePasswordValueAttribute = useCallback(() => {
+		if (!isPasswordInput) return;
+		Promise.resolve().then(() => {
+			if (!isMountedRef.current) return;
+			const input = controllerRef.current;
+			if (input?.getAttribute("type") === "password" && input.hasAttribute("value")) input.removeAttribute("value");
+		});
+	}, [controllerRef, isPasswordInput]);
+	useEffect(() => {
+		isMountedRef.current = true;
+		return () => {
+			isMountedRef.current = false;
+		};
+	}, []);
+	useEffect(() => {
+		setInnerType(type);
+	}, [type]);
+	useEffect(() => {
+		removePasswordValueAttribute();
+	}, [
+		currentType,
+		removePasswordValueAttribute,
+		value
+	]);
+	const handleChange = useCallback((e) => {
+		const newValue = e.target.value;
+		removePasswordValueAttribute();
+		if (!isFileInput && !isControlledRef.current) setInternalValue(newValue);
+		onChange?.(newValue, e);
+	}, [
+		isFileInput,
+		isControlledRef,
+		onChange,
+		removePasswordValueAttribute,
+		setInternalValue
+	]);
+	const handleClear = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (!isControlledRef.current) setInternalValue("");
+		onChange?.("", {
+			target: { value: "" },
+			currentTarget: { value: "" }
+		});
+		controllerRef.current?.focus();
+	}, [
+		controllerRef,
+		isControlledRef,
+		onChange,
+		setInternalValue
+	]);
+	const handleTogglePassword = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (isPasswordVisible) removePasswordValueAttribute();
+		setInnerType((current) => current === "password" ? "text" : "password");
+	}, [isPasswordVisible, removePasswordValueAttribute]);
+	const clearIcon = useMemo(() => {
+		if (allowClear) if (typeof allowClear === "boolean") return /* @__PURE__ */ jsx("span", {
+			className: cn("w-5 h-5 rounded-full", "bg-muted hover:bg-muted/80", "text-foreground", "transition-colors", "flex items-center justify-center", "focus:outline-none"),
+			children: /* @__PURE__ */ jsx(X, { size: 12 })
+		});
+		else return allowClear.clearIcon;
+	}, [allowClear]);
+	const showClearIcon = !isPasswordInput && hasValue && clearIcon && !disabled;
+	const showPasswordToggle = isPasswordInput && !disabled;
+	const rightAccessoryCount = Number(Boolean(showClearIcon)) + Number(showPasswordToggle) + Number(Boolean(addonAfter));
+	const hasRightAccessories = rightAccessoryCount > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tc-ui-input relative w-full", className),
+		children: [/* @__PURE__ */ jsx("input", {
+			type: currentType,
+			ref: setRefs,
+			...!isFileInput && { value },
+			onChange: handleChange,
+			className: cn("flex h-10 w-full rounded-lg px-3 py-0 text-sm", "border transition-colors duration-200", "placeholder:text-muted-foreground", "focus:outline-none", rightAccessoryCount === 1 && "pr-10", rightAccessoryCount === 2 && "pr-20", rightAccessoryCount >= 3 && "pr-28", disabled ? "cursor-not-allowed bg-muted border-border text-muted-foreground" : "bg-background", !disabled && !isFocused && "border-border", !disabled && isFocused && "border-theme ring-2 ring-theme/25", inputClassName),
+			onFocus: (e) => {
+				if (!disabled) {
+					removePasswordValueAttribute();
+					setIsFocused(true);
+					props.onFocus?.(e);
+				}
+			},
+			onBlur: (e) => {
+				if (!disabled) {
+					removePasswordValueAttribute();
+					setIsFocused(false);
+					props.onBlur?.(e);
+				}
+			},
+			disabled,
+			...props
+		}), hasRightAccessories && /* @__PURE__ */ jsxs("div", {
+			className: "absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center gap-1",
+			children: [
+				showClearIcon && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onMouseDown: (e) => e.preventDefault(),
+					onClick: handleClear,
+					"aria-label": "Clear input",
+					title: "Clear input",
+					className: "flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-foreground/8",
+					children: clearIcon
+				}),
+				showPasswordToggle && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onMouseDown: (e) => e.preventDefault(),
+					onClick: handleTogglePassword,
+					"aria-label": isPasswordVisible ? "Hide password" : "Show password",
+					title: isPasswordVisible ? "Hide password" : "Show password",
+					className: "flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-foreground/8 hover:text-foreground",
+					children: isPasswordVisible ? /* @__PURE__ */ jsx(EyeOff, { size: 16 }) : /* @__PURE__ */ jsx(Eye, { size: 16 })
+				}),
+				addonAfter && /* @__PURE__ */ jsx("div", {
+					className: "flex h-7 items-center text-muted-foreground",
+					children: addonAfter
+				})
+			]
+		})]
+	});
+});
+Input.displayName = "Input";
+//#endregion
+export { Input };

package/fe/packages/react/ui/components/Input/index.d.ts

@@ -0,0 +1 @@
+export * from "./Input";

package/fe/packages/react/ui/components/Input/index.js

@@ -0,0 +1,2 @@
+import { Input } from "./Input.js";
+export { Input };

package/fe/packages/react/ui/components/InputNumber/InputNumber.d.ts

@@ -0,0 +1,25 @@
+import type { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
+import { type InputNumberConstraints } from "./inputNumberUtils";
+export type InputNumberProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'onChange' | 'step' | 'type' | 'value'> & InputNumberConstraints & {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number | undefined, e: ChangeEvent<HTMLInputElement>) => void;
+    allowClear?: boolean | {
+        clearIcon: ReactNode;
+    };
+    addonAfter?: ReactNode;
+    allowStep?: boolean;
+    inputClassName?: string;
+};
+declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "defaultValue" | "onChange" | "step"> & InputNumberConstraints & {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number | undefined, e: ChangeEvent<HTMLInputElement>) => void;
+    allowClear?: boolean | {
+        clearIcon: ReactNode;
+    };
+    addonAfter?: ReactNode;
+    allowStep?: boolean;
+    inputClassName?: string;
+} & import("react").RefAttributes<HTMLInputElement>>;
+export { InputNumber };

package/fe/packages/react/ui/components/InputNumber/InputNumber.js

@@ -0,0 +1,207 @@
+import { cn } from "../../lib/utils.js";
+import { formatNumber, isValidNumberInput, normalizeNumber, parseInputNumber, shouldSyncDisplayValue, stepValue } from "./inputNumberUtils.js";
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronUp, X } from "lucide-react";
+//#region packages/react/ui/components/InputNumber/InputNumber.tsx
+var formatDisplayValue = (value, constraints) => typeof value === "number" ? formatNumber(value, constraints) : "";
+var getBlurValue = (rawValue) => {
+	if (rawValue === "" || rawValue === "-" || rawValue === "." || rawValue === "-.") return;
+	const normalizedRawValue = rawValue.endsWith(".") ? rawValue.slice(0, -1) : rawValue;
+	const parsedValue = Number(normalizedRawValue);
+	return Number.isFinite(parsedValue) ? parsedValue : void 0;
+};
+var InputNumber = forwardRef(({ className, inputClassName, value: controlledValue, onChange, defaultValue, allowClear, addonAfter, allowStep = false, disabled, min, max, precision, step, inputMode = "decimal", ...props }, ref) => {
+	const constraints = useMemo(() => ({
+		min,
+		max,
+		precision,
+		step
+	}), [
+		max,
+		min,
+		precision,
+		step
+	]);
+	const isControlled = controlledValue !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const currentValue = isControlled ? controlledValue : internalValue;
+	const [isFocused, setIsFocused] = useState(false);
+	const [displayValue, setDisplayValue] = useState(() => formatDisplayValue(currentValue, constraints));
+	const inputRef = useRef(null);
+	const setRefs = useCallback((node) => {
+		inputRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	useEffect(() => {
+		if (!shouldSyncDisplayValue({
+			isFocused,
+			displayValue,
+			currentValue
+		})) return;
+		const nextDisplayValue = formatDisplayValue(currentValue, constraints);
+		if (nextDisplayValue !== displayValue) setDisplayValue(nextDisplayValue);
+	}, [
+		constraints,
+		currentValue,
+		displayValue,
+		isFocused
+	]);
+	const emitChange = useCallback((nextValue, e, forceNotify = false) => {
+		if (!isControlled) setInternalValue(nextValue);
+		if (forceNotify || !Object.is(currentValue, nextValue)) onChange?.(nextValue, e);
+	}, [
+		currentValue,
+		isControlled,
+		onChange
+	]);
+	const createSyntheticChangeEvent = useCallback((value) => {
+		const target = inputRef.current;
+		if (target) target.value = value;
+		return {
+			target: { value },
+			currentTarget: { value }
+		};
+	}, []);
+	const handleChange = useCallback((e) => {
+		const nextDisplayValue = e.target.value;
+		if (!isValidNumberInput(nextDisplayValue)) return;
+		setDisplayValue(nextDisplayValue);
+		const parsedValue = parseInputNumber(nextDisplayValue);
+		if (parsedValue.kind === "empty") {
+			emitChange(void 0, e);
+			return;
+		}
+		if (parsedValue.kind === "number") emitChange(parsedValue.value, e);
+	}, [emitChange]);
+	const handleBlur = useCallback((e) => {
+		setIsFocused(false);
+		const nextValue = getBlurValue(displayValue);
+		if (nextValue === void 0) {
+			const syntheticEvent = createSyntheticChangeEvent("");
+			setDisplayValue("");
+			emitChange(void 0, syntheticEvent);
+			props.onBlur?.(e);
+			return;
+		}
+		const normalizedValue = normalizeNumber(nextValue, constraints);
+		const nextDisplayValue = formatDisplayValue(normalizedValue, constraints);
+		const syntheticEvent = createSyntheticChangeEvent(nextDisplayValue);
+		setDisplayValue(nextDisplayValue);
+		emitChange(normalizedValue, syntheticEvent);
+		props.onBlur?.(e);
+	}, [
+		constraints,
+		createSyntheticChangeEvent,
+		displayValue,
+		emitChange,
+		props
+	]);
+	const handleFocus = useCallback((e) => {
+		if (disabled) return;
+		setIsFocused(true);
+		props.onFocus?.(e);
+	}, [disabled, props]);
+	const clearIcon = useMemo(() => {
+		if (!allowClear) return;
+		if (typeof allowClear === "boolean") return /* @__PURE__ */ jsx("span", {
+			className: cn("h-6 w-6 rounded-md", "text-muted-foreground", "flex items-center justify-center", "transition-colors hover:bg-foreground/8 hover:text-foreground"),
+			children: /* @__PURE__ */ jsx(X, { size: 12 })
+		});
+		return allowClear.clearIcon;
+	}, [allowClear]);
+	const showClearIcon = displayValue.length > 0 && clearIcon && !disabled;
+	const hasRightAccessories = showClearIcon || addonAfter || allowStep;
+	const currentParsedValue = parseInputNumber(displayValue);
+	const stepBaseValue = currentParsedValue.kind === "number" ? currentParsedValue.value : currentValue;
+	const normalizedCurrentStepValue = typeof stepBaseValue === "number" ? normalizeNumber(stepBaseValue, constraints) : void 0;
+	const canStep = useCallback((direction) => {
+		if (disabled) return false;
+		const nextValue = stepValue(stepBaseValue, direction, constraints);
+		return !Object.is(nextValue, normalizedCurrentStepValue);
+	}, [
+		constraints,
+		disabled,
+		normalizedCurrentStepValue,
+		stepBaseValue
+	]);
+	const handleStep = useCallback((direction) => {
+		const nextValue = stepValue(stepBaseValue, direction, constraints);
+		const nextDisplayValue = formatDisplayValue(nextValue, constraints);
+		const syntheticEvent = createSyntheticChangeEvent(nextDisplayValue);
+		setDisplayValue(nextDisplayValue);
+		emitChange(nextValue, syntheticEvent, true);
+		inputRef.current?.focus();
+	}, [
+		constraints,
+		createSyntheticChangeEvent,
+		emitChange,
+		stepBaseValue
+	]);
+	const handleClear = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		const syntheticEvent = createSyntheticChangeEvent("");
+		setDisplayValue("");
+		emitChange(void 0, syntheticEvent, true);
+		inputRef.current?.focus();
+	}, [createSyntheticChangeEvent, emitChange]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tc-ui-input-number relative w-full", className),
+		children: [/* @__PURE__ */ jsx("input", {
+			ref: setRefs,
+			type: "text",
+			value: displayValue,
+			onChange: handleChange,
+			inputMode,
+			className: cn("flex h-10 w-full rounded-lg px-3 py-0 text-sm", "border transition-colors duration-200", "placeholder:text-muted-foreground", "focus:outline-none", showClearIcon && !allowStep && !addonAfter && "pr-10", allowStep && !showClearIcon && !addonAfter && "pr-12", allowStep && showClearIcon && !addonAfter && "pr-20", addonAfter && !allowStep && "pr-16", allowStep && addonAfter && "pr-28", disabled ? "cursor-not-allowed bg-muted border-border text-muted-foreground" : "bg-background", !disabled && !isFocused && "border-border", !disabled && isFocused && "border-theme ring-2 ring-theme/25", inputClassName),
+			onFocus: handleFocus,
+			onBlur: handleBlur,
+			disabled,
+			...props
+		}), hasRightAccessories && /* @__PURE__ */ jsxs("div", {
+			className: "absolute right-1.5 top-1/2 flex -translate-y-1/2 items-center gap-1",
+			children: [
+				showClearIcon && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					onMouseDown: (e) => e.preventDefault(),
+					onClick: handleClear,
+					"aria-label": "Clear number",
+					title: "Clear number",
+					className: "flex h-7 w-7 items-center justify-center rounded-md transition-colors hover:bg-foreground/8",
+					children: clearIcon
+				}),
+				addonAfter && /* @__PURE__ */ jsx("div", {
+					className: "flex h-7 items-center text-muted-foreground",
+					children: addonAfter
+				}),
+				allowStep && /* @__PURE__ */ jsxs("div", {
+					className: "flex h-8 w-6 flex-col overflow-hidden rounded-md border border-border/60 bg-muted/30 text-muted-foreground",
+					children: [/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onMouseDown: (e) => e.preventDefault(),
+						onClick: () => handleStep("up"),
+						disabled: !canStep("up"),
+						"aria-label": "Increase value",
+						title: "Increase value",
+						className: cn("flex h-4 w-full items-center justify-center transition-colors", "border-b border-border/50", "disabled:cursor-not-allowed disabled:text-muted-foreground/45", !disabled && canStep("up") && "hover:bg-foreground/8 hover:text-foreground"),
+						children: /* @__PURE__ */ jsx(ChevronUp, { size: 12 })
+					}), /* @__PURE__ */ jsx("button", {
+						type: "button",
+						onMouseDown: (e) => e.preventDefault(),
+						onClick: () => handleStep("down"),
+						disabled: !canStep("down"),
+						"aria-label": "Decrease value",
+						title: "Decrease value",
+						className: cn("flex h-4 w-full items-center justify-center transition-colors", "disabled:cursor-not-allowed disabled:text-muted-foreground/45", !disabled && canStep("down") && "hover:bg-foreground/8 hover:text-foreground"),
+						children: /* @__PURE__ */ jsx(ChevronDown, { size: 12 })
+					})]
+				})
+			]
+		})]
+	});
+});
+InputNumber.displayName = "InputNumber";
+//#endregion
+export { InputNumber };

package/fe/packages/react/ui/components/InputNumber/index.d.ts

@@ -0,0 +1 @@
+export * from "./InputNumber";

package/fe/packages/react/ui/components/InputNumber/index.js

@@ -0,0 +1,2 @@
+import { InputNumber } from "./InputNumber.js";
+export { InputNumber };

package/fe/packages/react/ui/components/InputNumber/inputNumberUtils.d.ts

@@ -0,0 +1,29 @@
+export interface InputNumberConstraints {
+    min?: number;
+    max?: number;
+    precision?: number;
+    step?: number;
+}
+export type ParsedInputNumber = {
+    kind: 'empty';
+} | {
+    kind: 'incomplete';
+} | {
+    kind: 'invalid';
+} | {
+    kind: 'number';
+    value: number;
+};
+export type StepDirection = 'up' | 'down';
+export declare const isValidNumberInput: (value: string) => boolean;
+export declare const clampValue: (value: number, constraints: InputNumberConstraints) => number;
+export declare const applyPrecision: (value: number, precision?: number) => number;
+export declare const normalizeNumber: (value: number, constraints: InputNumberConstraints) => number;
+export declare const formatNumber: (value: number, constraints: InputNumberConstraints) => string;
+export declare const parseInputNumber: (value: string) => ParsedInputNumber;
+export declare const shouldSyncDisplayValue: ({ isFocused, displayValue, currentValue, }: {
+    isFocused: boolean;
+    displayValue: string;
+    currentValue: number | undefined;
+}) => boolean;
+export declare const stepValue: (currentValue: number | undefined, direction: StepDirection, constraints: InputNumberConstraints) => number;

package/fe/packages/react/ui/components/InputNumber/inputNumberUtils.js

@@ -0,0 +1,45 @@
+//#region packages/react/ui/components/InputNumber/inputNumberUtils.ts
+var isFiniteNumber = (value) => typeof value === "number" && Number.isFinite(value);
+var isValidNumberInput = (value) => /^-?\d*(\.\d*)?$/.test(value);
+var clampValue = (value, constraints) => {
+	let nextValue = value;
+	if (isFiniteNumber(constraints.min)) nextValue = Math.max(nextValue, constraints.min);
+	if (isFiniteNumber(constraints.max)) nextValue = Math.min(nextValue, constraints.max);
+	return nextValue;
+};
+var applyPrecision = (value, precision) => {
+	if (typeof precision !== "number" || precision < 0) return value;
+	return Number(value.toFixed(precision));
+};
+var normalizeNumber = (value, constraints) => {
+	return clampValue(applyPrecision(value, constraints.precision), constraints);
+};
+var formatNumber = (value, constraints) => {
+	const normalized = normalizeNumber(value, constraints);
+	if (typeof constraints.precision === "number" && constraints.precision >= 0) return normalized.toFixed(constraints.precision);
+	return String(normalized);
+};
+var parseInputNumber = (value) => {
+	if (value === "") return { kind: "empty" };
+	if (value === "-" || value === "." || value === "-." || /^-?\d+\.$/.test(value)) return { kind: "incomplete" };
+	if (!isValidNumberInput(value)) return { kind: "invalid" };
+	const parsedValue = Number(value);
+	if (!Number.isFinite(parsedValue)) return { kind: "invalid" };
+	return {
+		kind: "number",
+		value: parsedValue
+	};
+};
+var shouldSyncDisplayValue = ({ isFocused, displayValue, currentValue }) => {
+	if (!isFocused) return true;
+	const parsedDisplayValue = parseInputNumber(displayValue);
+	if (parsedDisplayValue.kind === "incomplete" || parsedDisplayValue.kind === "invalid") return false;
+	if (parsedDisplayValue.kind === "empty") return currentValue !== void 0;
+	return !Object.is(parsedDisplayValue.value, currentValue);
+};
+var stepValue = (currentValue, direction, constraints) => {
+	const step = constraints.step && constraints.step > 0 ? constraints.step : 1;
+	return normalizeNumber((isFiniteNumber(currentValue) ? currentValue : 0) + (direction === "up" ? step : -step), constraints);
+};
+//#endregion
+export { applyPrecision, clampValue, formatNumber, isValidNumberInput, normalizeNumber, parseInputNumber, shouldSyncDisplayValue, stepValue };

package/fe/packages/react/ui/components/InputNumber/inputNumberUtils.test.js

@@ -0,0 +1,59 @@
+import { clampValue, formatNumber, parseInputNumber, shouldSyncDisplayValue, stepValue } from "./inputNumberUtils.js";
+import assert from "node:assert/strict";
+import test from "node:test";
+//#region packages/react/ui/components/InputNumber/inputNumberUtils.test.ts
+test("parseInputNumber keeps empty and transitional values unresolved", () => {
+	assert.deepEqual(parseInputNumber(""), { kind: "empty" });
+	assert.deepEqual(parseInputNumber("-"), { kind: "incomplete" });
+	assert.deepEqual(parseInputNumber("."), { kind: "incomplete" });
+	assert.deepEqual(parseInputNumber("1."), { kind: "incomplete" });
+	assert.deepEqual(parseInputNumber("-1."), { kind: "incomplete" });
+	assert.deepEqual(parseInputNumber("1.25"), {
+		kind: "number",
+		value: 1.25
+	});
+});
+test("formatNumber applies precision and clamps boundaries", () => {
+	assert.equal(formatNumber(1.236, { precision: 2 }), "1.24");
+	assert.equal(formatNumber(12, { max: 10 }), "10");
+	assert.equal(clampValue(-3, { min: 0 }), 0);
+});
+test("stepValue respects min max precision and step", () => {
+	assert.equal(stepValue(void 0, "up", {
+		step: .25,
+		precision: 2
+	}), .25);
+	assert.equal(stepValue(9.9, "up", {
+		step: 1,
+		max: 10,
+		precision: 1
+	}), 10);
+	assert.equal(stepValue(.3, "down", {
+		step: .2,
+		min: 0,
+		precision: 1
+	}), .1);
+});
+test("shouldSyncDisplayValue preserves editable decimals while focused", () => {
+	assert.equal(shouldSyncDisplayValue({
+		isFocused: true,
+		displayValue: "12.5",
+		currentValue: 12.5
+	}), false);
+	assert.equal(shouldSyncDisplayValue({
+		isFocused: true,
+		displayValue: "12.56",
+		currentValue: 12.56
+	}), false);
+	assert.equal(shouldSyncDisplayValue({
+		isFocused: true,
+		displayValue: "12.56",
+		currentValue: 3.14
+	}), true);
+	assert.equal(shouldSyncDisplayValue({
+		isFocused: false,
+		displayValue: "12.56",
+		currentValue: 12.56
+	}), true);
+});
+//#endregion

package/fe/packages/react/ui/components/Label/Label.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+type VerticalLayout = {
+    layout?: 'vertical';
+};
+type HorizontalLayout = {
+    layout?: 'horizontal';
+    labelWidth?: string | number;
+    labelAlign?: 'left' | 'right' | 'center';
+};
+export type LabelLayout = HorizontalLayout | VerticalLayout;
+export type LabelProps = {
+    label: ReactNode;
+    children: ReactNode;
+    required?: boolean;
+    htmlFor?: string;
+    className?: string;
+    labelClassName?: string;
+    contentClassName?: string;
+} & LabelLayout;
+declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Label };