@_tc/template-core 0.0.1-bate.45 → 0.0.1-bate.47

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

@@ -0,0 +1,101 @@
+import { cn } from "../../lib/utils.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../table/table.js";
+import "../table/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/Skeleton/Skeleton.tsx
+var SkeletonItem = ({ className, ...props }) => /* @__PURE__ */ jsx("div", {
+	className: cn("animate-pulse rounded bg-gray-200/60 dark:bg-gray-700/60", className),
+	...props
+});
+var SkeletonText = ({ width = "100%", className }) => /* @__PURE__ */ jsx(SkeletonItem, {
+	className: cn("h-4", className),
+	style: { width: typeof width === "number" ? `${width}px` : width }
+});
+var PageLoadingSkeleton = ({ rows = 5, showTitle = true, showActions = true }) => {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full space-y-6 p-6",
+		children: [
+			showTitle && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx(SkeletonItem, { className: "h-8 w-48" }), showActions && /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-3",
+					children: [/* @__PURE__ */ jsx(SkeletonItem, { className: "h-10 w-24" }), /* @__PURE__ */ jsx(SkeletonItem, { className: "h-10 w-24" })]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex gap-4",
+				children: [
+					/* @__PURE__ */ jsx(SkeletonItem, { className: "h-10 flex-1" }),
+					/* @__PURE__ */ jsx(SkeletonItem, { className: "h-10 w-24" }),
+					/* @__PURE__ */ jsx(SkeletonItem, { className: "h-10 w-24" })
+				]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "space-y-4",
+				children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-4",
+					children: [
+						/* @__PURE__ */ jsx(SkeletonItem, { className: "h-20 flex-1" }),
+						/* @__PURE__ */ jsx(SkeletonItem, { className: "h-20 w-32" }),
+						/* @__PURE__ */ jsx(SkeletonItem, { className: "h-20 w-32" })
+					]
+				}, index))
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ jsx(SkeletonItem, { className: "h-4 w-32" }), /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2",
+					children: [
+						/* @__PURE__ */ jsx(SkeletonItem, { className: "h-8 w-8" }),
+						/* @__PURE__ */ jsx(SkeletonItem, { className: "h-8 w-8" }),
+						/* @__PURE__ */ jsx(SkeletonItem, { className: "h-8 w-8" })
+					]
+				})]
+			})
+		]
+	});
+};
+var TableLoadingSkeleton = ({ rows = 5 }) => {
+	const columnCount = 6;
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full",
+		children: /* @__PURE__ */ jsx("div", {
+			className: "bg-background rounded-[20px] overflow-hidden",
+			children: /* @__PURE__ */ jsxs(Table, {
+				containerClassName: "rounded-b-none",
+				children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: columnCount }).map((_, index) => /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(SkeletonText, { width: index === 0 ? 120 : index === columnCount - 1 ? 80 : 150 }) }, index)) }) }), /* @__PURE__ */ jsx(TableBody, { children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx(TableRow, { children: Array.from({ length: columnCount }).map((_, colIndex) => /* @__PURE__ */ jsx(TableCell, { children: colIndex === columnCount - 1 ? /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-2",
+					children: [/* @__PURE__ */ jsx(SkeletonItem, { className: "h-8 w-16" }), /* @__PURE__ */ jsx(SkeletonItem, { className: "h-8 w-16" })]
+				}) : /* @__PURE__ */ jsx(SkeletonText, { width: colIndex === 0 ? 120 : colIndex === 1 ? "80%" : 150 }) }, colIndex)) }, rowIndex)) })]
+			})
+		})
+	});
+};
+var ComponentsLoadingSkeleton = ({ rows = 3 }) => {
+	return /* @__PURE__ */ jsx("div", {
+		className: "w-full space-y-3",
+		children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsx(SkeletonItem, { className: "h-4 w-full" }, index))
+	});
+};
+var Skeleton = ({ mode = "componentsloading", className, rows, showTitle, showActions, ...props }) => {
+	const renderSkeleton = () => {
+		switch (mode) {
+			case "pageloading": return /* @__PURE__ */ jsx(PageLoadingSkeleton, {
+				rows,
+				showTitle,
+				showActions
+			});
+			case "tableloading": return /* @__PURE__ */ jsx(TableLoadingSkeleton, { rows });
+			case "componentsloading": return /* @__PURE__ */ jsx(ComponentsLoadingSkeleton, { rows });
+			default: return /* @__PURE__ */ jsx(ComponentsLoadingSkeleton, { rows });
+		}
+	};
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("tc-ui-skeleton w-full", className),
+		...props,
+		children: renderSkeleton()
+	});
+};
+Skeleton.displayName = "Skeleton";
+//#endregion
+export { Skeleton };

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

@@ -0,0 +1,3 @@
+export { Skeleton } from "./Skeleton";
+export type { SkeletonProps, SkeletonMode } from "./Skeleton";
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 export type SwitchProps = {
     checked?: boolean;
     defaultChecked?: boolean;

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

@@ -0,0 +1,28 @@
+import { cn } from "../../lib/utils.js";
+import React, { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region packages/react/ui/components/Switch/Switch.tsx
+var Switch = forwardRef(({ checked: controlledChecked, defaultChecked, onChange, disabled, className }, ref) => {
+	const [internalChecked, setInternalChecked] = React.useState(defaultChecked || false);
+	const isControlled = controlledChecked !== void 0;
+	const checked = isControlled ? controlledChecked : internalChecked;
+	const handleToggle = () => {
+		if (disabled) return;
+		const newChecked = !checked;
+		if (!isControlled) setInternalChecked(newChecked);
+		onChange?.(newChecked);
+	};
+	return /* @__PURE__ */ jsx("button", {
+		ref,
+		type: "button",
+		role: "switch",
+		"aria-checked": checked,
+		disabled,
+		onClick: handleToggle,
+		className: cn("tc-ui-switch relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200", "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2", disabled && "cursor-not-allowed opacity-50", !disabled && "cursor-pointer", checked ? "bg-[hsl(var(--ring))] dark:bg-[hsl(var(--ring))]" : "bg-muted dark:bg-muted", className),
+		children: /* @__PURE__ */ jsx("span", { className: cn("inline-block h-4 w-4 transform rounded-full bg-background transition-transform duration-200", checked ? "translate-x-6" : "translate-x-1") })
+	});
+});
+Switch.displayName = "Switch";
+//#endregion
+export { Switch };

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

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

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

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

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

@@ -1,9 +1,9 @@
-import { ExportType } from '../../lib/export';
-import type { MOmit } from '../../types';
-import { type ReactNode } from 'react';
-import { type DropdownItem } from '../Dropdown';
-import type { FormFieldSchema } from '../Form';
-import type { SearchProps } from '../Search/Search';
+import { ExportType } from "../../lib/export";
+import type { MOmit } from "../../types/index";
+import { type ReactNode } from "react";
+import { type DropdownItem } from "../Dropdown";
+import type { FormFieldSchema } from "../Form";
+import type { SearchProps } from "../Search/Search";
 export type TableSearchSchema<T> = MOmit<FormFieldSchema<T>, 'rules' | 'required'> & {
     /**
      * - 字段是否常驻

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

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.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;

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

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

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

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

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