@_tc/template-core 0.1.16 → 0.2.0-bate.0

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/{ui/react → react/ui}/components/Input/Input.d.ts

@@ -1,45 +1,22 @@
-import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
+import type { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
 export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'defaultValue'> & {
     value?: string;
-    /**
-     *
-     * @param v input value
-     * @param e changeEvent
-     */
     onChange?: (v: string, e: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * 只有初始化时会使用
-     * 如果会改变请使用value
-     */
     defaultValue?: string;
     allowClear?: boolean | {
         clearIcon: ReactNode;
     };
-    /** 输入框内部右侧按钮 */
     addonAfter?: ReactNode;
-    /** 原生 input 节点的自定义 className */
     inputClassName?: string;
 };
 declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange"> & {
     value?: string;
-    /**
-     *
-     * @param v input value
-     * @param e changeEvent
-     */
     onChange?: (v: string, e: ChangeEvent<HTMLInputElement>) => void;
-    /**
-     * 只有初始化时会使用
-     * 如果会改变请使用value
-     */
     defaultValue?: string;
     allowClear?: boolean | {
         clearIcon: ReactNode;
     };
-    /** 输入框内部右侧按钮 */
     addonAfter?: ReactNode;
-    /** 原生 input 节点的自定义 className */
     inputClassName?: string;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export { Input };
-//# sourceMappingURL=Input.d.ts.map

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/{ui/react → react/ui}/components/InputNumber/InputNumber.d.ts

@@ -1,5 +1,5 @@
-import type { ChangeEvent, InputHTMLAttributes, ReactNode } from 'react';
-import { type InputNumberConstraints } from './inputNumberUtils';
+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;
@@ -9,7 +9,6 @@ export type InputNumberProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'defa
     };
     addonAfter?: ReactNode;
     allowStep?: boolean;
-    /** 原生 input 节点的自定义 className */
     inputClassName?: string;
 };
 declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "defaultValue" | "onChange" | "step"> & InputNumberConstraints & {
@@ -21,8 +20,6 @@ declare const InputNumber: import("react").ForwardRefExoticComponent<Omit<InputH
     };
     addonAfter?: ReactNode;
     allowStep?: boolean;
-    /** 原生 input 节点的自定义 className */
     inputClassName?: string;
 } & import("react").RefAttributes<HTMLInputElement>>;
 export { InputNumber };
-//# sourceMappingURL=InputNumber.d.ts.map

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/{ui/react → react/ui}/components/InputNumber/inputNumberUtils.d.ts

@@ -27,4 +27,3 @@ export declare const shouldSyncDisplayValue: ({ isFocused, displayValue, current
     currentValue: number | undefined;
 }) => boolean;
 export declare const stepValue: (currentValue: number | undefined, direction: StepDirection, constraints: InputNumberConstraints) => number;
-//# sourceMappingURL=inputNumberUtils.d.ts.map

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/{ui/react → react/ui}/components/Label/Label.d.ts

@@ -1,51 +1,21 @@
-import { type ReactNode } from 'react';
+import { type ReactNode } from "react";
 type VerticalLayout = {
     layout?: 'vertical';
 };
 type HorizontalLayout = {
     layout?: 'horizontal';
-    /**
-     * 标签宽度
-     * @default 'auto'
-     */
     labelWidth?: string | number;
-    /**
-     * 标签对齐方式
-     * @default 'left'
-     */
     labelAlign?: 'left' | 'right' | 'center';
 };
 export type LabelLayout = HorizontalLayout | VerticalLayout;
 export type LabelProps = {
-    /**
-     * 标签文本
-     */
     label: ReactNode;
-    /**
-     * 标签内容
-     */
     children: ReactNode;
-    /**
-     * 是否必填（显示红色星号）
-     */
     required?: boolean;
-    /**
-     * 标签的 htmlFor 属性
-     */
     htmlFor?: string;
-    /**
-     * 容器类名
-     */
     className?: string;
-    /**
-     * 标签类名
-     */
     labelClassName?: string;
-    /**
-     * 内容区域类名
-     */
     contentClassName?: string;
 } & LabelLayout;
 declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLDivElement>>;
 export { Label };
-//# sourceMappingURL=Label.d.ts.map

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

@@ -0,0 +1,58 @@
+import { cn } from "../../lib/utils.js";
+import { forwardRef, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/Label/Label.tsx
+var labelAlignStyles = {
+	left: "text-left",
+	right: "text-right",
+	center: "text-center"
+};
+var Label = forwardRef((props, ref) => {
+	const { label, children, layout = "vertical", required = false, htmlFor, className, labelClassName, contentClassName } = props;
+	const isVertical = layout === "vertical";
+	const labelStyles = cn("text-sm font-medium text-foreground", required && "before:content-['*'] before:pt-1 before:mr-0.5 before:text-destructive", labelClassName);
+	const { usedClassName, labelWidth } = useMemo(() => {
+		let usedLabelWidth;
+		let usedClassName;
+		if (props.layout === "horizontal") {
+			const labelWidth = props.labelWidth;
+			usedLabelWidth = typeof labelWidth === "number" ? `${labelWidth}px` : labelWidth === "auto" ? "auto" : labelWidth ?? "auto";
+			usedClassName = labelAlignStyles[props.labelAlign ?? "left"];
+		}
+		return {
+			usedClassName,
+			labelWidth: usedLabelWidth
+		};
+	}, [props]);
+	if (isVertical) return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("tc-ui-label flex flex-col gap-2", className),
+		children: [/* @__PURE__ */ jsx("label", {
+			htmlFor,
+			className: labelStyles,
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("w-full", contentClassName),
+			children
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("tc-ui-label flex items-center gap-4", className),
+		children: [/* @__PURE__ */ jsx("label", {
+			htmlFor,
+			className: cn(labelStyles, usedClassName),
+			style: {
+				width: labelWidth,
+				flexShrink: 0
+			},
+			children: label
+		}), /* @__PURE__ */ jsx("div", {
+			className: cn("flex-1", contentClassName),
+			children
+		})]
+	});
+});
+Label.displayName = "Label";
+//#endregion
+export { Label };

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

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

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

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