@_tc/template-core 0.0.1-bate.5 → 0.0.1-bate.51

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

@@ -0,0 +1,146 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { Dropdown } from "../Dropdown/Dropdown.js";
+import "../Dropdown/index.js";
+import Search from "../Search/Search.js";
+import "../Search/index.js";
+import { ExportType } from "../../lib/export.js";
+import { useTableSearchLocaleStore } from "./tableSearchLocaleStore.js";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+//#region packages/react/ui/components/TableSearch/TableSearch.tsx
+var EXPAND_BOUNDARIES = 4;
+var TableSearch = (props) => {
+	const { onSearch, onReset, exportMenuItems, btnConfig: PBtnText, expandBoundaries = EXPAND_BOUNDARIES, schemas, onExport, additionalButtons, defaultExpand = true, renderActionBtnArea, ...searchProps } = props;
+	const formRef = useRef(void 0);
+	const [isExpanded, setIsExpanded] = useState(defaultExpand);
+	const handleSearch = () => {
+		const values = formRef.current?.getFieldsValue();
+		onSearch?.(values);
+	};
+	const handleReset = () => {
+		formRef.current?.resetFields();
+		if (onReset) onReset();
+	};
+	const handleExpand = () => {
+		setIsExpanded(!isExpanded);
+	};
+	const locale = useTableSearchLocaleStore((state) => state.locale);
+	const defaultExportItems = useMemo(() => exportMenuItems || [{
+		key: "export-current-page",
+		label: locale.exportCurrentPage,
+		onClick: () => {
+			const values = formRef.current?.getFieldsValue();
+			onExport?.(ExportType.current, values);
+		}
+	}, {
+		key: "export-current-query",
+		label: locale.exportCurrentQuery,
+		onClick: () => {
+			const values = formRef.current?.getFieldsValue();
+			onExport?.(ExportType.all, values);
+		}
+	}], [
+		exportMenuItems,
+		locale.exportCurrentPage,
+		locale.exportCurrentQuery,
+		onExport
+	]);
+	const btnConfig = useMemo(() => {
+		const resetBtn = PBtnText?.reset || locale.reset;
+		const searchBtn = PBtnText?.search || locale.search;
+		const exportBtn = PBtnText?.export || locale.export;
+		return {
+			resetBtn,
+			searchBtn,
+			expandBtn: PBtnText?.expand || locale.expand,
+			collapseBtn: PBtnText?.collapse || locale.collapse,
+			exportBtn,
+			expandIcon: PBtnText?.expandIcon || /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" })
+		};
+	}, [
+		PBtnText?.reset,
+		PBtnText?.search,
+		PBtnText?.export,
+		PBtnText?.expand,
+		PBtnText?.collapse,
+		PBtnText?.expandIcon,
+		locale
+	]);
+	const { permanentSchemas, alternativeSchemas } = useMemo(() => {
+		const alternativeSchemas = [];
+		const tmp = [];
+		for (let index = 0; index < schemas.length; index++) {
+			const item = schemas[index];
+			if (item.isPermanent) tmp.push(item);
+			else alternativeSchemas.push(item);
+		}
+		if (tmp.length < expandBoundaries) {
+			const candidates = expandBoundaries - tmp.length;
+			for (let index = 0; index < candidates; index++) tmp.push(alternativeSchemas[index]);
+			alternativeSchemas.splice(0, candidates);
+		}
+		return {
+			alternativeSchemas,
+			permanentSchemas: tmp
+		};
+	}, [expandBoundaries, schemas]);
+	const showExpandedBtn = schemas.length > expandBoundaries;
+	let SSchemas;
+	if (showExpandedBtn) SSchemas = isExpanded ? schemas : [...permanentSchemas, {
+		type: "group",
+		fieldProps: { style: { display: "none" } },
+		key: "gropu1",
+		childrens: alternativeSchemas
+	}];
+	else SSchemas = schemas;
+	return /* @__PURE__ */ jsx("div", {
+		className: "tc-ui-table-search",
+		children: /* @__PURE__ */ jsxs(Search, {
+			getForm: (form) => {
+				formRef.current = form;
+			},
+			schemas: SSchemas,
+			...searchProps,
+			children: [
+				showExpandedBtn && /* @__PURE__ */ jsx(Button, {
+					variant: "default",
+					size: "sm",
+					onClick: handleExpand,
+					rightIcon: /* @__PURE__ */ jsx("span", {
+						className: cn("transition-transform duration-200", isExpanded && "rotate-180"),
+						children: btnConfig.expandIcon
+					}),
+					children: isExpanded ? btnConfig.collapseBtn : btnConfig.expandBtn
+				}, "expandedBtn"),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					size: "sm",
+					onClick: handleSearch,
+					children: btnConfig.searchBtn
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					variant: "default",
+					size: "sm",
+					onClick: handleReset,
+					children: btnConfig.resetBtn
+				}),
+				renderActionBtnArea ? renderActionBtnArea() : /* @__PURE__ */ jsx(Dropdown, {
+					items: defaultExportItems,
+					placement: "bottom-end",
+					children: /* @__PURE__ */ jsx(Button, {
+						variant: "default",
+						size: "sm",
+						rightIcon: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }),
+						children: btnConfig.exportBtn
+					})
+				}),
+				additionalButtons
+			]
+		})
+	});
+};
+//#endregion
+export { TableSearch as default };

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

@@ -0,0 +1,2 @@
+export { default as TableSearch } from "./TableSearch";
+export type { TableSearchSchema } from "./TableSearch";

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

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

package/fe/packages/react/ui/components/TableSearch/lang.d.ts

@@ -0,0 +1,14 @@
+export interface TableSearchLocaleConfig {
+    reset: string;
+    search: string;
+    export: string;
+    expand: string;
+    collapse: string;
+    exportCurrentPage: string;
+    exportCurrentQuery: string;
+}
+export declare const zhCNLocale: TableSearchLocaleConfig;
+export declare const enUSLocale: TableSearchLocaleConfig;
+export declare const defaultLocale: TableSearchLocaleConfig;
+export declare const btnConfig: TableSearchLocaleConfig;
+export declare const updateBtnConfig: (config: Partial<TableSearchLocaleConfig>) => void;

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/react/ui/components/TableSearch/tableSearchLocaleStore.d.ts

@@ -0,0 +1,8 @@
+import { type TableSearchLocaleConfig } from "./lang";
+type TableSearchLocaleState = {
+    locale: TableSearchLocaleConfig;
+    replaceLocale: (nextLocale: TableSearchLocaleConfig) => void;
+    resetLocale: () => void;
+};
+export declare const useTableSearchLocaleStore: import("zustand").UseBoundStore<import("zustand").StoreApi<TableSearchLocaleState>>;
+export {};

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/react/ui/components/Tabs/Tabs.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export type TabItem = {
+    key: string;
+    label: ReactNode;
+    disabled?: boolean;
+};
+export type TabsProps = {
+    items: TabItem[];
+    activeKey?: string;
+    defaultActiveKey?: string;
+    onChange?: (key: string) => void;
+    className?: string;
+};
+declare const Tabs: import("react").ForwardRefExoticComponent<TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+export { Tabs };

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/react/ui/components/Textarea/Textarea.d.ts

@@ -0,0 +1,20 @@
+import type { ChangeEvent, TextareaHTMLAttributes } from "react";
+export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "onChange" | "defaultValue"> & {
+    value?: string;
+    onChange?: (v: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
+    defaultValue?: string;
+    maxLength?: number;
+    showCount?: boolean;
+    placeholder?: string;
+    textareaClassName?: string;
+};
+declare const Textarea: import("react").ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value" | "defaultValue" | "onChange"> & {
+    value?: string;
+    onChange?: (v: string, e: ChangeEvent<HTMLTextAreaElement>) => void;
+    defaultValue?: string;
+    maxLength?: number;
+    showCount?: boolean;
+    placeholder?: string;
+    textareaClassName?: string;
+} & import("react").RefAttributes<HTMLTextAreaElement>>;
+export { Textarea };

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/react/ui/components/Tooltip/Tooltip.d.ts

@@ -0,0 +1,8 @@
+export interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactElement;
+    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;

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/react/ui/components/TreeSelect/TreeSelect.d.ts

@@ -0,0 +1,18 @@
+export interface TreeNode {
+    id: string | number;
+    name: string;
+    desctext?: string;
+    children?: TreeNode[];
+}
+export interface TreeSelectProps {
+    data: TreeNode[];
+    value?: (string | number)[];
+    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;

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/react/ui/components/Upload/ImageUpload.d.ts

@@ -0,0 +1,8 @@
+export interface ImageUploadProps {
+    accept?: string;
+    maxCount?: number;
+    value?: string[];
+    onChange?: (urls: string[]) => void;
+    beforeChange?: (file: File) => boolean | void;
+}
+export declare function ImageUpload({ accept, maxCount, value, onChange, beforeChange }: ImageUploadProps): import("react/jsx-runtime").JSX.Element;