@_tc/template-core 0.0.1-bate.46 → 0.0.1-bate.48

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,2 @@
+export * from "./InputNumber";
+//# sourceMappingURL=index.d.ts.map

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.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,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type ReactNode } from "react";
 type VerticalLayout = {
     layout?: 'vertical';
 };

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,3 @@
+export * from "./Label";
+export { Label as default } from "./Label";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from "react";
+export type LayoutProps = {
+    header?: ReactNode;
+    sidebar?: ReactNode;
+    children?: ReactNode;
+    footer?: ReactNode;
+    className?: string;
+};
+declare const Layout: import("react").ForwardRefExoticComponent<LayoutProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Layout };
+//# sourceMappingURL=Layout.d.ts.map

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

@@ -0,0 +1,33 @@
+import { cn } from "../../lib/utils.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/Layout/Layout.tsx
+var Layout = forwardRef(({ header, sidebar, children, footer, className }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("tc-ui-layout flex h-screen flex-col", className),
+		children: [
+			header && /* @__PURE__ */ jsx("header", {
+				className: "tc-ui-layout-header shrink-0 border-b bg-background",
+				children: header
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "tc-ui-layout-body flex flex-1 overflow-hidden",
+				children: [sidebar && /* @__PURE__ */ jsx("aside", {
+					className: "tc-ui-layout-sidebar w-60 shrink-0 border-r bg-background overflow-y-auto",
+					children: sidebar
+				}), /* @__PURE__ */ jsx("main", {
+					className: "tc-ui-layout-content flex-1 overflow-y-auto p-4",
+					children
+				})]
+			}),
+			footer && /* @__PURE__ */ jsx("footer", {
+				className: "tc-ui-layout-footer shrink-0 border-t bg-background",
+				children: footer
+			})
+		]
+	});
+});
+Layout.displayName = "Layout";
+//#endregion
+export { Layout };

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

@@ -0,0 +1,2 @@
+export * from "./Layout";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+export type LoadingProps = {
+    /**
+     * 加载图标尺寸
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * 加载文案
+     */
+    text?: ReactNode;
+    className?: string;
+};
+export type LoadingIndicatorProps = {
+    /**
+     * 仅图标尺寸，适合被 Button 等组件复用
+     * @default 'md'
+     */
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+};
+export declare function LoadingIndicator({ size, className }: LoadingIndicatorProps): import("react/jsx-runtime").JSX.Element;
+declare const Loading: import("react").ForwardRefExoticComponent<LoadingProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Loading };
+//# sourceMappingURL=Loading.d.ts.map

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

@@ -0,0 +1,48 @@
+import { cn } from "../../lib/utils.js";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/Loading/Loading.tsx
+var sizeStyles = {
+	sm: "h-4 w-4",
+	md: "h-6 w-6",
+	lg: "h-8 w-8"
+};
+var textStyles = {
+	sm: "text-xs",
+	md: "text-xs",
+	lg: "text-sm"
+};
+function LoadingIndicator({ size = "md", className }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		className: cn("animate-spin text-theme", sizeStyles[size], className),
+		xmlns: "http://www.w3.org/2000/svg",
+		fill: "none",
+		viewBox: "0 0 24 24",
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ jsx("circle", {
+			className: "opacity-25",
+			cx: "12",
+			cy: "12",
+			r: "10",
+			stroke: "currentColor",
+			strokeWidth: "4"
+		}), /* @__PURE__ */ jsx("path", {
+			className: "opacity-75",
+			fill: "currentColor",
+			d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+		})]
+	});
+}
+var Loading = forwardRef(({ size = "md", text, className }, ref) => {
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("tc-ui-loading inline-flex flex-col items-center justify-center gap-2 text-muted-foreground", className),
+		children: [/* @__PURE__ */ jsx(LoadingIndicator, { size }), text && /* @__PURE__ */ jsx("span", {
+			className: cn("font-medium leading-none tracking-normal text-muted-foreground", textStyles[size]),
+			children: text
+		})]
+	});
+});
+Loading.displayName = "Loading";
+//#endregion
+export { Loading, LoadingIndicator };

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

@@ -0,0 +1,2 @@
+export * from "./Loading";
+//# sourceMappingURL=index.d.ts.map

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

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