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

package/fe/packages/react/ui/components/TableSearch/lang.js

@@ -0,0 +1,14 @@
+import { defaultLanguageResources } from "../../../../common/i18n/default.js";
+import { defaultEnglishResources } from "../../../../common/i18n/en-US.js";
+//#region packages/react/ui/components/TableSearch/lang.ts
+var tableSearchDefaultLocale = defaultLanguageResources.components.tableSearch;
+var tableSearchDefaultEnglishLocale = defaultEnglishResources.components.tableSearch;
+var zhCNLocale = { ...tableSearchDefaultLocale };
+var enUSLocale = { ...tableSearchDefaultEnglishLocale };
+var defaultLocale = zhCNLocale;
+var btnConfig = defaultLocale;
+var updateBtnConfig = (config) => {
+	Object.assign(btnConfig, config);
+};
+//#endregion
+export { btnConfig, defaultLocale, enUSLocale, updateBtnConfig, zhCNLocale };

package/fe/packages/{ui/react → react/ui}/components/TableSearch/tableSearchLocaleStore.d.ts

@@ -1,4 +1,4 @@
-import { type TableSearchLocaleConfig } from './lang';
+import { type TableSearchLocaleConfig } from "./lang";
 type TableSearchLocaleState = {
     locale: TableSearchLocaleConfig;
     replaceLocale: (nextLocale: TableSearchLocaleConfig) => void;
@@ -6,4 +6,3 @@ type TableSearchLocaleState = {
 };
 export declare const useTableSearchLocaleStore: import("zustand").UseBoundStore<import("zustand").StoreApi<TableSearchLocaleState>>;
 export {};
-//# sourceMappingURL=tableSearchLocaleStore.d.ts.map

package/fe/packages/react/ui/components/TableSearch/tableSearchLocaleStore.js

@@ -0,0 +1,10 @@
+import { defaultLocale } from "./lang.js";
+import { create } from "zustand";
+//#region packages/react/ui/components/TableSearch/tableSearchLocaleStore.ts
+var useTableSearchLocaleStore = create((set) => ({
+	locale: defaultLocale,
+	replaceLocale: (nextLocale) => set(() => ({ locale: nextLocale })),
+	resetLocale: () => set(() => ({ locale: defaultLocale }))
+}));
+//#endregion
+export { useTableSearchLocaleStore };

package/fe/packages/{ui/react → react/ui}/components/Tabs/Tabs.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
 export type TabItem = {
     key: string;
     label: ReactNode;
@@ -13,4 +13,3 @@ export type TabsProps = {
 };
 declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
 export { Tabs };
-//# sourceMappingURL=Tabs.d.ts.map

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

@@ -0,0 +1,33 @@
+import { cn } from "../../lib/utils.js";
+import { forwardRef, useCallback, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/react/ui/components/Tabs/Tabs.tsx
+var Tabs = forwardRef(({ items, activeKey: controlledKey, defaultActiveKey, onChange, className }, ref) => {
+	const [internalKey, setInternalKey] = useState(defaultActiveKey ?? items[0]?.key ?? "");
+	const isControlled = controlledKey !== void 0;
+	const activeKey = isControlled ? controlledKey : internalKey;
+	const handleTabClick = useCallback((key) => {
+		if (!isControlled) setInternalKey(key);
+		onChange?.(key);
+	}, [isControlled, onChange]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("tc-ui-tabs", className),
+		children: /* @__PURE__ */ jsx("div", {
+			className: "tc-ui-tabs-nav flex border-b border-border",
+			role: "tablist",
+			children: items.map((item) => /* @__PURE__ */ jsx("button", {
+				type: "button",
+				role: "tab",
+				"aria-selected": activeKey === item.key,
+				disabled: item.disabled,
+				onClick: () => !item.disabled && handleTabClick(item.key),
+				className: cn("tc-ui-tabs-tab px-4 py-2 text-sm font-medium transition-colors", "border-b-2 -mb-px", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", activeKey === item.key ? "border-theme text-theme" : "border-transparent text-muted-foreground hover:text-foreground", item.disabled && "cursor-not-allowed opacity-50"),
+				children: item.label
+			}, item.key))
+		})
+	});
+});
+Tabs.displayName = "Tabs";
+//#endregion
+export { Tabs };

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

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

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

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

package/fe/packages/{ui/react → react/ui}/components/Textarea/Textarea.d.ts

@@ -1,67 +1,20 @@
 import type { ChangeEvent, TextareaHTMLAttributes } from "react";
 export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange" | "defaultValue"> & {
     value?: string;
-    /**
-     *
-     * @param v textarea value
-     * @param e changeEvent
-     */
     onChange?: (v: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
-    /**
-     * 只有初始化时会使用
-     * 如果会改变请使用value
-     */
     defaultValue?: string;
-    /**
-     * 最大字符数限制
-     * @default 500
-     */
     maxLength?: number;
-    /**
-     * 是否显示字符计数器
-     * @default true
-     */
     showCount?: boolean;
-    /**
-     * 占位符文本
-     */
     placeholder?: string;
-    /**
-     * 原生 textarea 节点的自定义 className
-     */
     textareaClassName?: string;
 };
 declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> & {
     value?: string;
-    /**
-     *
-     * @param v textarea value
-     * @param e changeEvent
-     */
     onChange?: (v: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
-    /**
-     * 只有初始化时会使用
-     * 如果会改变请使用value
-     */
     defaultValue?: string;
-    /**
-     * 最大字符数限制
-     * @default 500
-     */
     maxLength?: number;
-    /**
-     * 是否显示字符计数器
-     * @default true
-     */
     showCount?: boolean;
-    /**
-     * 占位符文本
-     */
     placeholder?: string;
-    /**
-     * 原生 textarea 节点的自定义 className
-     */
     textareaClassName?: string;
 } & import("react").RefAttributes<HTMLTextAreaElement>>;
 export { Textarea };
-//# sourceMappingURL=Textarea.d.ts.map

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

@@ -0,0 +1,58 @@
+import { cn } from "../../lib/utils.js";
+import { useInputController } from "../hooks/useInputController.js";
+import { forwardRef, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/Textarea/Textarea.tsx
+var Textarea = forwardRef(({ className, textareaClassName, value: controlledValue, onChange, defaultValue, maxLength = 500, showCount = true, placeholder, disabled, ...props }, ref) => {
+	const { isFocused, setIsFocused, setInternalValue, setRefs, value, isControlledRef, currentLength } = useInputController({
+		controlledValue,
+		defaultValue,
+		ref
+	});
+	const handleChange = useCallback((e) => {
+		const newValue = e.target.value;
+		if (maxLength && newValue.length > maxLength) return;
+		if (!isControlledRef.current) setInternalValue(newValue);
+		onChange?.(newValue, e);
+	}, [
+		maxLength,
+		isControlledRef,
+		onChange,
+		setInternalValue
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("tc-ui-textarea relative w-fit", className),
+		children: [/* @__PURE__ */ jsx("textarea", {
+			ref: setRefs,
+			value,
+			onChange: handleChange,
+			maxLength,
+			placeholder,
+			className: cn("flex min-h-24 w-full rounded-lg px-3 py-2 text-sm", "border transition-colors duration-200", "placeholder:text-muted-foreground", "focus:outline-none", "resize-none", showCount && "pb-10", 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", textareaClassName),
+			onFocus: (e) => {
+				if (!disabled) {
+					setIsFocused(true);
+					props.onFocus?.(e);
+				}
+			},
+			onBlur: (e) => {
+				if (!disabled) {
+					setIsFocused(false);
+					props.onBlur?.(e);
+				}
+			},
+			disabled,
+			...props
+		}), showCount && /* @__PURE__ */ jsxs("div", {
+			className: cn("text-end", "text-xs text-muted-foreground", "pointer-events-none"),
+			children: [
+				currentLength,
+				"/",
+				maxLength
+			]
+		})]
+	});
+});
+Textarea.displayName = "Textarea";
+//#endregion
+export { Textarea };

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

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

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

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

package/fe/packages/{ui/react → react/ui}/components/Tooltip/Tooltip.d.ts

@@ -1,25 +1,8 @@
 export interface TooltipProps {
-    /**
-     * 提示内容
-     */
     content: React.ReactNode;
-    /**
-     * 触发元素
-     */
     children: React.ReactElement;
-    /**
-     * 提示位置
-     * @default 'right'
-     */
     placement?: "top" | "bottom" | "left" | "right";
-    /**
-     * 是否显示
-     */
     visible?: boolean;
-    /**
-     * 类名
-     */
     className?: string;
 }
 export declare function Tooltip({ content, children, placement, visible, className, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=Tooltip.d.ts.map

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

@@ -0,0 +1,77 @@
+import { cn } from "../../lib/utils.js";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region packages/react/ui/components/Tooltip/Tooltip.tsx
+function Tooltip({ content, children, placement = "right", visible, className }) {
+	const [isVisible, setIsVisible] = useState(false);
+	const [position, setPosition] = useState({
+		top: 0,
+		left: 0
+	});
+	const triggerRef = useRef(null);
+	const tooltipRef = useRef(null);
+	const showTooltip = () => {
+		if (visible !== void 0) setIsVisible(visible);
+		else setIsVisible(true);
+	};
+	const hideTooltip = () => {
+		if (visible === void 0) setIsVisible(false);
+	};
+	useEffect(() => {
+		if (visible !== void 0) setIsVisible(visible);
+	}, [visible]);
+	useEffect(() => {
+		if (isVisible && triggerRef.current && tooltipRef.current) requestAnimationFrame(() => {
+			if (!triggerRef.current || !tooltipRef.current) return;
+			const triggerRect = triggerRef.current.getBoundingClientRect();
+			const tooltipRect = tooltipRef.current.getBoundingClientRect();
+			const padding = 8;
+			let top = 0;
+			let left = 0;
+			switch (placement) {
+				case "top":
+					top = triggerRect.top - tooltipRect.height - padding;
+					left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+					break;
+				case "bottom":
+					top = triggerRect.bottom + padding;
+					left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+					break;
+				case "left":
+					top = triggerRect.top;
+					left = triggerRect.left - tooltipRect.width - padding;
+					break;
+				case "right":
+					top = triggerRect.top;
+					left = triggerRect.right + padding;
+					break;
+			}
+			setPosition({
+				top,
+				left
+			});
+		});
+		if (!isVisible) setPosition({
+			top: -100,
+			left: -100
+		});
+	}, [isVisible, placement]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("div", {
+		ref: triggerRef,
+		onMouseEnter: showTooltip,
+		onMouseLeave: hideTooltip,
+		className: "tc-ui-tooltip inline-block",
+		children
+	}), isVisible && createPortal(/* @__PURE__ */ jsx("div", {
+		ref: tooltipRef,
+		className: cn("fixed z-[1000] px-3 py-2", "rounded-xl border border-border/50 bg-popover text-xs text-popover-foreground", "shadow-[var(--shadow-floating)]", "pointer-events-none", "max-w-xs", className),
+		style: {
+			top: `${position.top}px`,
+			left: `${position.left}px`
+		},
+		children: content
+	}), document.body)] });
+}
+//#endregion
+export { Tooltip };

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

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

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

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

package/fe/packages/{ui/react → react/ui}/components/TreeSelect/TreeSelect.d.ts

@@ -5,21 +5,14 @@ export interface TreeNode {
     children?: TreeNode[];
 }
 export interface TreeSelectProps {
-    /** 树形数据 */
     data: TreeNode[];
-    /** 已选中的节点 ID 数组 */
     value?: (string | number)[];
-    /** 选中状态改变回调，返回选中的 keys 和半选的 keys */
     onChange?: (keys: {
         checked: (string | number)[];
         indeterminate: (string | number)[];
     }) => void;
-    /** 节点文本字段名 */
     labelField?: 'name' | 'desctext';
-    /** 是否可以选择 */
     checkable?: boolean;
-    /** 自定义类名 */
     className?: string;
 }
 export declare function TreeSelect({ data, value, onChange, labelField, checkable, className, }: TreeSelectProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=TreeSelect.d.ts.map

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

@@ -0,0 +1,190 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { Checkbox } from "../Checkbox/Checkbox.js";
+import "../Checkbox/index.js";
+import { useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight } from "lucide-react";
+//#region packages/react/ui/components/TreeSelect/TreeSelect.tsx
+function TreeSelect({ data, value = [], onChange, labelField = "name", checkable = true, className }) {
+	const [expandedKeys, setExpandedKeys] = useState(/* @__PURE__ */ new Set());
+	const { nodeMap, parentMap } = useMemo(() => {
+		const nodeM = /* @__PURE__ */ new Map();
+		const parentM = /* @__PURE__ */ new Map();
+		const traverse = (nodes, parentId) => {
+			nodes.forEach((node) => {
+				nodeM.set(node.id, node);
+				parentM.set(node.id, parentId);
+				if (node.children && node.children.length > 0) traverse(node.children, node.id);
+			});
+		};
+		traverse(data, null);
+		return {
+			nodeMap: nodeM,
+			parentMap: parentM
+		};
+	}, [data]);
+	const getDescendantIds = useCallback((node) => {
+		const ids = [];
+		const traverse = (n) => {
+			if (n.children && n.children.length > 0) n.children.forEach((child) => {
+				ids.push(child.id);
+				traverse(child);
+			});
+		};
+		traverse(node);
+		return ids;
+	}, []);
+	const updateParentSelection = useCallback((checkedSet) => {
+		const traverseUp = (nodeId) => {
+			const parentId = parentMap.get(nodeId);
+			if (parentId === void 0 || parentId === null) return;
+			const parentNode = nodeMap.get(parentId);
+			if (!parentNode || !parentNode.children) return;
+			const childIds = parentNode.children.map((child) => child.id);
+			if (childIds.filter((id) => checkedSet.has(id)).length === childIds.length) checkedSet.add(parentId);
+			else checkedSet.delete(parentId);
+			traverseUp(parentId);
+		};
+		checkedSet.forEach((id) => traverseUp(id));
+	}, [nodeMap, parentMap]);
+	const toggleExpand = useCallback((nodeId) => {
+		setExpandedKeys((prev) => {
+			const newSet = new Set(prev);
+			if (newSet.has(nodeId)) newSet.delete(nodeId);
+			else newSet.add(nodeId);
+			return newSet;
+		});
+	}, []);
+	const getIndeterminateKeys = useCallback((checkedSet) => {
+		const indeterminateKeys = [];
+		const getDescendantCount = (node) => {
+			if (!node.children || node.children.length === 0) return {
+				total: 1,
+				checked: checkedSet.has(node.id) ? 1 : 0
+			};
+			return node.children.reduce((acc, child) => {
+				const childResult = getDescendantCount(child);
+				return {
+					total: acc.total + childResult.total,
+					checked: acc.checked + childResult.checked
+				};
+			}, {
+				total: 0,
+				checked: 0
+			});
+		};
+		const traverse = (nodes) => {
+			nodes.forEach((node) => {
+				if (node.children && node.children.length > 0) {
+					const { total, checked } = getDescendantCount(node);
+					if (checked > 0 && checked < total) indeterminateKeys.push(node.id);
+					traverse(node.children);
+				}
+			});
+		};
+		traverse(data);
+		return indeterminateKeys;
+	}, [data]);
+	const toggleCheck = useCallback((node) => {
+		if (!checkable || !onChange) return;
+		const isChecked = value.includes(node.id);
+		const nextChecked = new Set(value);
+		const descendantIds = getDescendantIds(node);
+		if (isChecked) {
+			nextChecked.delete(node.id);
+			descendantIds.forEach((id) => nextChecked.delete(id));
+		} else {
+			nextChecked.add(node.id);
+			descendantIds.forEach((id) => nextChecked.add(id));
+		}
+		updateParentSelection(nextChecked);
+		const indeterminateKeys = getIndeterminateKeys(nextChecked);
+		onChange({
+			checked: Array.from(nextChecked),
+			indeterminate: indeterminateKeys
+		});
+	}, [
+		value,
+		onChange,
+		checkable,
+		getDescendantIds,
+		updateParentSelection,
+		getIndeterminateKeys
+	]);
+	const isNodeChecked = useCallback((nodeId) => {
+		return value.includes(nodeId);
+	}, [value]);
+	const isNodeIndeterminate = useCallback((node) => {
+		if (!node.children || node.children.length === 0) return false;
+		const getDescendantCount = (n) => {
+			if (!n.children || n.children.length === 0) return {
+				total: 1,
+				checked: value.includes(n.id) ? 1 : 0
+			};
+			return n.children.reduce((acc, child) => {
+				const childResult = getDescendantCount(child);
+				return {
+					total: acc.total + childResult.total,
+					checked: acc.checked + childResult.checked
+				};
+			}, {
+				total: 0,
+				checked: 0
+			});
+		};
+		const { total, checked } = getDescendantCount(node);
+		return checked > 0 && checked < total;
+	}, [value]);
+	function renderTreeNode(node, level = 0) {
+		const hasChildren = node.children && node.children.length > 0;
+		const isExpanded = expandedKeys.has(node.id);
+		const isChecked = isNodeChecked(node.id);
+		const isIndeterminate = isNodeIndeterminate(node);
+		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center gap-2 py-2 px-2 hover:bg-muted/50 rounded-md cursor-pointer transition-colors", "group"),
+			style: { paddingLeft: `${level * 20 + 8}px` },
+			children: [
+				hasChildren ? /* @__PURE__ */ jsx(Button, {
+					variant: "text",
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation();
+						toggleExpand(node.id);
+					},
+					className: "flex-shrink-0 p-0.5 hover:bg-muted rounded",
+					children: isExpanded ? /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+				}) : /* @__PURE__ */ jsx("span", { className: "w-5" }),
+				checkable && /* @__PURE__ */ jsx(Checkbox, {
+					className: "flex-shrink-0",
+					checked: isChecked,
+					indeterminate: isIndeterminate,
+					"aria-label": `Select ${node.name}`,
+					onChange: (_, e) => {
+						e.stopPropagation();
+						toggleCheck(node);
+					}
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "flex-1 text-sm select-none",
+					onClick: () => {
+						if (hasChildren) toggleExpand(node.id);
+						else toggleCheck(node);
+					},
+					children: labelField === "desctext" ? node.desctext || node.name : node.name
+				})
+			]
+		}), hasChildren && isExpanded && /* @__PURE__ */ jsx("div", { children: node.children.map((child) => renderTreeNode(child, level + 1)) })] }, node.id);
+	}
+	if (!data || data.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: cn("tc-ui-tree-select p-8 text-center text-sm text-muted-foreground", className),
+		children: "No data"
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("tc-ui-tree-select border border-border rounded-lg p-2 max-h-[400px] overflow-y-auto", className),
+		children: data.map((node) => renderTreeNode(node))
+	});
+}
+//#endregion
+export { TreeSelect };

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

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

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

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

package/fe/packages/{ui/react → react/ui}/components/Upload/ImageUpload.d.ts

@@ -6,4 +6,3 @@ export interface ImageUploadProps {
     beforeChange?: (file: File) => boolean | void;
 }
 export declare function ImageUpload({ accept, maxCount, value, onChange, beforeChange }: ImageUploadProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ImageUpload.d.ts.map

package/fe/packages/react/ui/components/Upload/ImageUpload.js

@@ -0,0 +1,101 @@
+import { useI18n } from "../../i18n/useI18n.js";
+import "../../i18n/index.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { FileUpload } from "./Upload.js";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Camera, X } from "lucide-react";
+//#region packages/react/ui/components/Upload/ImageUpload.tsx
+function ImageUpload({ accept = ".jpg,.png", maxCount = 1, value, onChange, beforeChange }) {
+	const t = useI18n();
+	const inputRef = useRef(null);
+	const [internalUrls, setInternalUrls] = useState([]);
+	const internalUrlsRef = useRef([]);
+	const urls = value ?? internalUrls;
+	const setUrls = onChange ?? setInternalUrls;
+	const mAccept = useMemo(() => {
+		return accept.split(",").map((item) => item.trim().replace(/\./g, "")).filter(Boolean).map((a) => `image/${a}`).join(", ");
+	}, [accept]);
+	const handleFileChange = (e) => {
+		const files = e.target.files;
+		if (!files || files.length === 0) return;
+		const newUrls = [];
+		const fileArray = Array.from(files);
+		const remainingCount = maxCount - urls.length;
+		fileArray.forEach((file) => {
+			if (newUrls.length < remainingCount) {
+				if (beforeChange) {
+					if (beforeChange(file) === false) return;
+				}
+				const url = URL.createObjectURL(file);
+				newUrls.push(url);
+			}
+		});
+		if (maxCount > 1) setUrls([...urls, ...newUrls]);
+		else {
+			urls.forEach((url) => URL.revokeObjectURL(url));
+			setUrls(newUrls.slice(0, 1));
+		}
+		if (inputRef.current) inputRef.current.value = "";
+	};
+	const handleRemove = (index) => {
+		const urlToRemove = urls[index];
+		URL.revokeObjectURL(urlToRemove);
+		setUrls(urls.filter((_, i) => i !== index));
+	};
+	useEffect(() => {
+		if (onChange) {
+			internalUrlsRef.current = [];
+			return;
+		}
+		internalUrlsRef.current.filter((url) => !internalUrls.includes(url)).forEach((url) => URL.revokeObjectURL(url));
+		internalUrlsRef.current = internalUrls;
+	}, [onChange, internalUrls]);
+	useEffect(() => {
+		return () => {
+			internalUrlsRef.current.forEach((url) => URL.revokeObjectURL(url));
+			internalUrlsRef.current = [];
+		};
+	}, []);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "tc-ui-image-upload flex flex-wrap gap-3",
+		children: [urls.map((url, index) => /* @__PURE__ */ jsxs("div", {
+			className: "relative h-24 w-24 overflow-hidden rounded-lg border border-border/60 bg-card group cursor-pointer shadow-[inset_0_1px_0_hsl(var(--foreground)/0.04)] transition-colors duration-200 hover:border-border/80 active:border-theme/60",
+			children: [/* @__PURE__ */ jsx("img", {
+				src: url,
+				alt: "",
+				className: "w-full h-full object-cover"
+			}), /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 flex items-center justify-center bg-background/0 transition-colors duration-200 group-hover:bg-background/55",
+				children: /* @__PURE__ */ jsx(Button, {
+					variant: "text",
+					type: "button",
+					onClick: (e) => {
+						e.stopPropagation();
+						handleRemove(index);
+					},
+					className: "rounded-full bg-destructive p-1.5 text-destructive-foreground opacity-0 shadow-[var(--shadow-accent)] transition-[background-color,opacity] duration-200 hover:bg-destructive/90 active:bg-destructive/80 focus-visible:ring-destructive group-hover:opacity-100",
+					"aria-label": t("components.upload.deleteImage"),
+					title: t("components.upload.deleteImage"),
+					children: /* @__PURE__ */ jsx(X, { size: 16 })
+				})
+			})]
+		}, index)), urls.length < maxCount && /* @__PURE__ */ jsx(FileUpload, {
+			inputRef,
+			accept: mAccept,
+			multiple: maxCount > 1,
+			onChange: handleFileChange,
+			labelClassName: "h-24 w-24 cursor-pointer rounded-lg border-0 p-0 focus-within:ring-2 focus-within:ring-theme/25",
+			selectLabel: /* @__PURE__ */ jsxs("div", {
+				className: "flex h-full w-full flex-col items-center justify-center gap-1 rounded-lg border border-dashed border-border/60 bg-card text-muted-foreground transition-colors duration-200 hover:border-border/80 hover:bg-muted/50 hover:text-foreground active:bg-muted/70",
+				children: [/* @__PURE__ */ jsx(Camera, { size: 24 }), /* @__PURE__ */ jsx("span", {
+					className: "text-xs",
+					children: t("components.upload.upload")
+				})]
+			})
+		})]
+	});
+}
+//#endregion
+export { ImageUpload };