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

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

@@ -0,0 +1,147 @@
+import { cn } from "../../lib/utils.js";
+import { CollapsedContext, MenuStoreContext, createMenuContextValue, useMenuStore } from "./MenuContext.js";
+import { MenuItem } from "./MenuItem.js";
+import { SubMenu } from "./SubMenu.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+//#region packages/react/ui/components/Menu/Menu.tsx
+function renderItems(items, parentKey) {
+	return items.map((item) => {
+		if (item.children && item.children.length > 0) return /* @__PURE__ */ jsx(SubMenu, {
+			eventKey: item.key,
+			label: item.label,
+			icon: item.icon,
+			disabled: item.disabled,
+			popup: item.popup,
+			parentKey,
+			children: renderItems(item.children, item.key)
+		}, item.key);
+		return /* @__PURE__ */ jsx(MenuItem, {
+			eventKey: item.key,
+			icon: item.icon,
+			disabled: item.disabled,
+			danger: item.danger,
+			onClick: item.onClick,
+			className: item.className,
+			style: item.style,
+			width: item.width,
+			minWidth: item.minWidth,
+			maxWidth: item.maxWidth,
+			children: item.label
+		}, item.key);
+	});
+}
+var CollapseToggle = forwardRef(({ className }, ref) => {
+	const collapsed = useMenuStore((s) => s.collapsed);
+	const setCollapsed = useMenuStore((s) => s.setCollapsed);
+	const onCollapse = useMenuStore((s) => s.onCollapse);
+	const propsCollapsed = useMenuStore((s) => s.propsCollapsed);
+	const shouldShowCollapseToggle = () => {
+		/**
+		* 传入 collapsed 且没有 onCollapse 时，表示折叠状态完全由外部控制。
+		* 内部控制器无法改变状态，因此不渲染。
+		*/
+		if (typeof propsCollapsed !== "undefined" && typeof onCollapse === "undefined") return false;
+		return true;
+	};
+	const toggleCollapsed = () => setCollapsed(!collapsed);
+	const handleKeyDown = (event) => {
+		if (event.key === "Enter" || event.key === " ") {
+			event.preventDefault();
+			toggleCollapsed();
+		}
+	};
+	useImperativeHandle(ref, () => ({
+		collapse: () => setCollapsed(true),
+		expand: () => setCollapsed(false)
+	}), [setCollapsed]);
+	if (!shouldShowCollapseToggle()) return null;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": collapsed ? "Expand menu" : "Collapse menu",
+		"aria-expanded": !collapsed,
+		onClick: toggleCollapsed,
+		onKeyDown: handleKeyDown,
+		className: cn("mx-1 mb-1 flex h-9 cursor-pointer items-center justify-center rounded-lg", "text-muted-foreground transition-all", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 focus-visible:ring-offset-0", "hover:bg-foreground/8 hover:text-foreground", className),
+		children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })
+	});
+});
+CollapseToggle.displayName = "CollapseToggle";
+function MenuInner({ children, items, className, mode }) {
+	const collapsed = useMenuStore((s) => s.collapsed);
+	const collapsedWidth = useMenuStore((s) => s.collapsedWidth);
+	const content = items ? renderItems(items) : children;
+	return /* @__PURE__ */ jsxs("nav", {
+		role: "menu",
+		className: cn("tc-ui-menu relative overflow-hidden rounded-xl bg-card shadow-none", mode === "left" && "flex flex-col p-1", mode === "top" && "flex flex-row items-center p-[3px]", className),
+		style: mode === "left" && collapsed ? { width: collapsedWidth } : void 0,
+		children: [mode === "left" && /* @__PURE__ */ jsx(CollapseToggle, {}), /* @__PURE__ */ jsx(CollapsedContext.Provider, {
+			value: mode === "left" && collapsed,
+			children: /* @__PURE__ */ jsx("div", {
+				className: cn(mode === "left" && "flex flex-col gap-1", mode === "top" && "flex flex-row items-center gap-1"),
+				children: content
+			})
+		})]
+	});
+}
+var Menu = ({ mode = "left", expandTrigger = "click", expandMode = "accordion", selectedKey: controlledSelectedKey, defaultSelectedKey, onSelect, items, children, className, collapsed: controlledCollapsed, defaultCollapsed, onCollapse, collapsedWidth = 64, collapsedLabelTooltip = true }) => {
+	const storeRef = useRef(null);
+	if (!storeRef.current) storeRef.current = createMenuContextValue({
+		mode,
+		expandTrigger,
+		expandMode,
+		selectedKey: controlledSelectedKey,
+		defaultSelectedKey,
+		collapsed: controlledCollapsed,
+		propsCollapsed: controlledCollapsed,
+		defaultCollapsed,
+		collapsedWidth,
+		collapsedLabelTooltip,
+		onSelect,
+		onCollapse
+	});
+	const store = storeRef.current;
+	useEffect(() => {
+		store.setState({
+			mode,
+			expandTrigger,
+			expandMode,
+			propsCollapsed: controlledCollapsed,
+			collapsedWidth,
+			collapsedLabelTooltip,
+			onSelect,
+			onCollapse
+		});
+	}, [
+		mode,
+		expandTrigger,
+		expandMode,
+		controlledCollapsed,
+		collapsedWidth,
+		collapsedLabelTooltip,
+		onSelect,
+		onCollapse,
+		store
+	]);
+	useEffect(() => {
+		if (controlledSelectedKey !== void 0) store.setState({ selectedKey: controlledSelectedKey });
+	}, [controlledSelectedKey, store]);
+	useEffect(() => {
+		if (controlledCollapsed !== void 0) store.setState({ collapsed: controlledCollapsed });
+	}, [controlledCollapsed, store]);
+	return /* @__PURE__ */ jsx(MenuStoreContext.Provider, {
+		value: store,
+		children: /* @__PURE__ */ jsx(MenuInner, {
+			mode,
+			items,
+			className,
+			children
+		})
+	});
+};
+Menu.Item = MenuItem;
+Menu.SubMenu = SubMenu;
+Menu.CollapseToggle = CollapseToggle;
+//#endregion
+export { CollapseToggle, Menu };

package/fe/packages/react/ui/components/Menu/MenuContext.js

@@ -0,0 +1,88 @@
+import { createContext, useContext } from "react";
+import { createStore, useStore } from "zustand";
+//#region packages/react/ui/components/Menu/MenuContext.tsx
+var CollapsedContext = createContext(false);
+function createMenuStore(props) {
+	const { mode, expandTrigger, propsCollapsed, expandMode, collapsedWidth } = props;
+	const isControlledSelected = props.selectedKey !== void 0;
+	const isControlledCollapsed = props.collapsed !== void 0;
+	return createStore((set, get) => ({
+		mode,
+		expandTrigger,
+		expandMode,
+		selectedKey: props.selectedKey ?? props.defaultSelectedKey,
+		openKeys: [],
+		openKeyParents: {},
+		collapsed: props.collapsed ?? props.defaultCollapsed ?? false,
+		propsCollapsed,
+		collapsedWidth,
+		collapsedLabelTooltip: props.collapsedLabelTooltip,
+		onSelect: props.onSelect,
+		onCollapse: props.onCollapse,
+		isControlledSelected,
+		isControlledCollapsed,
+		setSelectedKey: (key) => {
+			const { isControlledSelected, onSelect } = get();
+			if (!isControlledSelected) set({ selectedKey: key });
+			onSelect?.(key);
+		},
+		toggleOpenKey: (key, parentKey) => {
+			const { openKeys, openKeyParents, expandMode } = get();
+			const isOpen = openKeys.includes(key);
+			if (expandMode === "accordion") {
+				const nextParents = { ...openKeyParents };
+				if (isOpen) delete nextParents[key];
+				else {
+					openKeys.filter((k) => openKeyParents[k] === parentKey).forEach((k) => delete nextParents[k]);
+					if (parentKey) nextParents[key] = parentKey;
+				}
+				set({
+					openKeys: isOpen ? openKeys.filter((k) => k !== key) : openKeys.filter((k) => openKeyParents[k] !== parentKey).concat(key),
+					openKeyParents: nextParents
+				});
+			} else if (isOpen) {
+				const nextParents = { ...openKeyParents };
+				delete nextParents[key];
+				set({
+					openKeys: openKeys.filter((k) => k !== key),
+					openKeyParents: nextParents
+				});
+			} else set({
+				openKeys: [...openKeys, key],
+				openKeyParents: parentKey ? {
+					...openKeyParents,
+					[key]: parentKey
+				} : openKeyParents
+			});
+		},
+		setCollapsed: (collapsed) => {
+			const { isControlledCollapsed, onCollapse } = get();
+			if (!isControlledCollapsed) set({ collapsed });
+			onCollapse?.(collapsed);
+		}
+	}));
+}
+var MenuStoreContext = createContext(null);
+function useMenuStore(selector) {
+	const store = useContext(MenuStoreContext);
+	if (!store) throw new Error("Menu compound components must be used within <Menu>");
+	return useStore(store, selector);
+}
+function createMenuContextValue(overrides) {
+	return createMenuStore({
+		mode: overrides.mode ?? "left",
+		expandTrigger: overrides.expandTrigger ?? "click",
+		expandMode: overrides.expandMode ?? "accordion",
+		selectedKey: overrides.selectedKey,
+		defaultSelectedKey: overrides.defaultSelectedKey,
+		collapsed: overrides.collapsed,
+		propsCollapsed: overrides.propsCollapsed,
+		defaultCollapsed: overrides.defaultCollapsed,
+		collapsedWidth: overrides.collapsedWidth ?? 64,
+		collapsedLabelTooltip: overrides.collapsedLabelTooltip ?? true,
+		onSelect: overrides.onSelect,
+		onCollapse: overrides.onCollapse
+	});
+}
+//#endregion
+export { CollapsedContext, MenuStoreContext, createMenuContextValue, useMenuStore };

package/fe/packages/react/ui/components/Menu/MenuItem.js

@@ -0,0 +1,78 @@
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { Popup } from "../Popup/Popup.js";
+import "../Popup/index.js";
+import { CollapsedContext, useMenuStore } from "./MenuContext.js";
+import { getFirstChar } from "./utils.js";
+import { useCallback, useContext, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region packages/react/ui/components/Menu/MenuItem.tsx
+function MenuItem({ eventKey, icon, disabled, danger, onClick, children, className, style, width, minWidth, maxWidth, ...props }) {
+	const mode = useMenuStore((s) => s.mode);
+	const selectedKey = useMenuStore((s) => s.selectedKey);
+	const setSelectedKey = useMenuStore((s) => s.setSelectedKey);
+	const collapsed = useContext(CollapsedContext);
+	const collapsedLabelTooltip = useMenuStore((s) => s.collapsedLabelTooltip);
+	const isSelected = selectedKey === eventKey;
+	const triggerRef = useRef(null);
+	const [showTooltip, setShowTooltip] = useState(false);
+	const handleClick = useCallback(() => {
+		if (disabled) return;
+		eventKey && setSelectedKey(eventKey);
+		onClick?.();
+	}, [
+		disabled,
+		eventKey,
+		onClick,
+		setSelectedKey
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: triggerRef,
+		className: "relative",
+		onMouseEnter: () => collapsed && collapsedLabelTooltip && setShowTooltip(true),
+		onMouseLeave: () => collapsed && collapsedLabelTooltip && setShowTooltip(false),
+		children: [/* @__PURE__ */ jsxs(Button, {
+			...props,
+			variant: "text",
+			role: "menuitem",
+			disabled,
+			onClick: handleClick,
+			className: cn("menuitem group relative flex items-center rounded-lg text-sm outline-none transition-all", "focus-visible:ring-2 focus-visible:ring-theme/30 focus-visible:ring-offset-0", mode === "top" && "h-10 w-auto min-w-fit justify-start gap-3 px-3 py-2 text-left", mode === "left" && collapsed && "h-10 w-full justify-center gap-0 px-0 py-2", mode === "left" && !collapsed && "min-h-10 w-full gap-3 px-3 py-2.5 text-left", isSelected && "bg-theme/12 text-foreground", !isSelected && !danger && "text-foreground hover:bg-foreground/8", danger && !isSelected && "text-destructive hover:bg-destructive/10", disabled && "cursor-not-allowed opacity-50", className),
+			style: collapsed ? style : {
+				width,
+				minWidth,
+				maxWidth,
+				...style
+			},
+			children: [
+				icon && /* @__PURE__ */ jsx("span", {
+					className: cn("flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md transition-colors", "[&>svg]:h-4 [&>svg]:w-4", isSelected ? "bg-foreground/8 text-foreground" : "text-muted-foreground group-hover:text-foreground"),
+					children: icon
+				}),
+				!collapsed && /* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
+					children
+				}),
+				collapsed && !icon && collapsedLabelTooltip && /* @__PURE__ */ jsx("span", {
+					className: "absolute left-0 right-0 top-0 flex h-full items-center justify-center text-[10px]",
+					children: getFirstChar(children)
+				})
+			]
+		}), /* @__PURE__ */ jsx(Popup, {
+			open: showTooltip,
+			anchorRef: triggerRef,
+			placement: "right-start",
+			offset: 8,
+			onOpenChange: setShowTooltip,
+			className: "border-0 bg-transparent p-0 shadow-none",
+			keepMounted: true,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "whitespace-nowrap rounded-lg border border-border/60 bg-popover px-3 py-1.5 text-xs text-popover-foreground shadow-[0_12px_30px_hsl(var(--background)/0.45)]",
+				children
+			})
+		})]
+	});
+}
+//#endregion
+export { MenuItem };

package/fe/packages/react/ui/components/Menu/SubMenu.js

@@ -0,0 +1,207 @@
+import { cn } from "../../lib/utils.js";
+import { Popup } from "../Popup/Popup.js";
+import "../Popup/index.js";
+import { CollapsedContext, useMenuStore } from "./MenuContext.js";
+import { getFirstChar } from "./utils.js";
+import { createContext, useCallback, useContext, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronRight, ChevronUp } from "lucide-react";
+//#region packages/react/ui/components/Menu/SubMenu.tsx
+var SUBMENU_POPUP_OFFSET = 12;
+var SubMenuLevelContext = createContext(0);
+/**
+* 计算 top 模式下，二级及更深层 submenu 的弹出位置。
+*
+* @returns 优先放在右侧；右侧空间不够时，改放到左侧。
+*/
+var getTopNestedSubMenuPosition = ({ anchorRect, contentRect, viewportWidth, offset, matchAnchorWidth }) => {
+	const width = contentRect?.width ?? 0;
+	const rightLeft = anchorRect.right + offset;
+	const canPlaceRight = rightLeft + width <= viewportWidth;
+	return {
+		top: anchorRect.top,
+		left: canPlaceRight ? rightLeft : Math.max(0, anchorRect.left - width - offset),
+		width: matchAnchorWidth ? anchorRect.width : void 0
+	};
+};
+/**
+* 判断当前 SubMenu 的子节点里，有没有选中的菜单项。
+*
+* @param children SubMenu 下面渲染出来的菜单节点。
+* @param targetKey 当前选中的 key。
+* @returns 子孙节点里命中选中 key 时返回 true。
+*/
+function hasDescendantSelected(children, targetKey) {
+	if (!targetKey) return false;
+	return walkReactChildren(children, targetKey);
+}
+/**
+* 递归遍历 React children，查找指定 eventKey。
+*
+* @param node 当前要检查的 React 节点。
+* @param targetKey 要查找的 eventKey。
+* @returns 当前节点或子孙节点命中时返回 true。
+*/
+function walkReactChildren(node, targetKey) {
+	if (!node) return false;
+	if (Array.isArray(node)) return node.some((n) => walkReactChildren(n, targetKey));
+	if (typeof node === "object" && node && "props" in node) {
+		const props = node.props;
+		if (props.eventKey === targetKey) return true;
+		if (walkReactChildren(props.children, targetKey)) return true;
+	}
+	return false;
+}
+/**
+* 渲染 SubMenu 的触发区域，也就是能点击/hover 的那一行。
+*
+* @returns SubMenu trigger 节点。
+*/
+function SubMenuItem({ triggerRef, onClick, icon, label, disabled, collapsed, descendantSelected, ArrowIcon, showArrow, setPopupContentRef, mode }) {
+	const collapsedLabelTooltip = useMenuStore((s) => s.collapsedLabelTooltip);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: triggerRef,
+		onClick,
+		className: cn("subMenuItem group relative flex items-center rounded-lg text-sm transition-all", "select-none", mode === "top" && "h-10 w-auto min-w-fit justify-start gap-3 px-3 py-2 text-left", mode === "left" && collapsed && "h-10 w-full justify-center gap-0 px-0 py-2", mode === "left" && !collapsed && "min-h-10 w-full gap-3 px-3 py-2.5 text-left", descendantSelected && "bg-theme/12 text-foreground", !descendantSelected && "text-foreground hover:bg-foreground/8", disabled && "cursor-not-allowed opacity-50"),
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				className: cn("flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-md transition-colors", "[&>svg]:h-4 [&>svg]:w-4", descendantSelected ? "bg-foreground/8 text-foreground" : "text-muted-foreground group-hover:text-foreground"),
+				children: icon
+			}),
+			!collapsed && /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate",
+				children: label
+			}),
+			collapsed && !icon && collapsedLabelTooltip && /* @__PURE__ */ jsx("span", {
+				className: "absolute left-0 right-0 top-0 flex h-full items-center justify-center text-[10px]",
+				children: getFirstChar(label)
+			}),
+			!collapsed && showArrow && /* @__PURE__ */ jsx(ArrowIcon, { className: "h-4 w-4 flex-shrink-0 text-muted-foreground transition-transform group-hover:text-foreground" }),
+			/* @__PURE__ */ jsx("div", { ref: setPopupContentRef })
+		]
+	});
+}
+/**
+* 渲染带子菜单的 Menu 项。
+*
+* 根据当前 menu mode、收起状态、是否在弹出层内，决定子菜单是内嵌展开还是 Popup 弹出。
+*
+* @returns SubMenu 完整节点，包含触发区域和子菜单内容。
+*/
+function SubMenu({ eventKey, label, icon, disabled, popup: forcePopup, parentKey, children }) {
+	const mode = useMenuStore((s) => s.mode);
+	const expandTrigger = useMenuStore((s) => s.expandTrigger);
+	const storeCollapsed = useMenuStore((s) => s.collapsed);
+	const collapsed = useContext(CollapsedContext);
+	const openKeys = useMenuStore((s) => s.openKeys);
+	const toggleOpenKey = useMenuStore((s) => s.toggleOpenKey);
+	const selectedKey = useMenuStore((s) => s.selectedKey);
+	const level = useContext(SubMenuLevelContext);
+	const isOpen = openKeys.includes(eventKey);
+	const triggerRef = useRef(null);
+	const popupContentRef = useRef(null);
+	const [popupContainer, setPopupContainer] = useState(void 0);
+	const [popupOpen, setPopupOpen] = useState(false);
+	const usePopup = mode === "top" || mode === "left" && collapsed || storeCollapsed && !collapsed || forcePopup === true;
+	const descendantSelected = hasDescendantSelected(children, selectedKey);
+	const setPopupContentRef = useCallback((el) => {
+		popupContentRef.current = el;
+		if (el) setPopupContainer(el);
+	}, []);
+	const handleMouseEnter = useCallback(() => {
+		if (disabled) return;
+		if (usePopup) setPopupOpen(true);
+		else if (expandTrigger === "hover" && !isOpen) toggleOpenKey(eventKey, parentKey);
+	}, [
+		disabled,
+		usePopup,
+		expandTrigger,
+		isOpen,
+		eventKey,
+		parentKey,
+		toggleOpenKey
+	]);
+	const handleMouseLeave = useCallback(() => {
+		if (usePopup) setPopupOpen(false);
+	}, [usePopup]);
+	const handleTriggerClick = useCallback(() => {
+		if (disabled) return;
+		if (usePopup) setPopupOpen((prev) => !prev);
+		else toggleOpenKey(eventKey, parentKey);
+	}, [
+		disabled,
+		usePopup,
+		eventKey,
+		parentKey,
+		toggleOpenKey
+	]);
+	const showArrow = !(mode === "left" && collapsed);
+	const ArrowIcon = usePopup ? mode === "top" && level === 0 ? ChevronDown : ChevronRight : isOpen ? ChevronUp : ChevronDown;
+	const popupPlacement = mode === "top" && level === 0 ? "bottom-start" : "right-start";
+	const popupStrategy = mode === "top" && level > 0 ? getTopNestedSubMenuPosition : void 0;
+	const hoverBridgePlacement = mode === "top" && level > 0 ? "horizontal" : "auto";
+	const subMenuContent = /* @__PURE__ */ jsx("div", {
+		className: cn("rounded-xl border border-border/70 bg-popover p-2 text-popover-foreground", "shadow-[0_22px_70px_hsl(var(--background)/0.58),inset_0_1px_0_hsl(var(--foreground)/0.06)]"),
+		children: /* @__PURE__ */ jsx(SubMenuLevelContext.Provider, {
+			value: level + 1,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "flex flex-col gap-1",
+				children
+			})
+		})
+	});
+	/**
+	*
+	* submenu  生成的节点是  1 menuItem
+	*                        submenu「
+	*                          1-1
+	*                          1-2
+	*                        」
+	*
+	* 所以判断鼠标是否在区域内应该是 监听 submenu 的根节点
+	*/
+	return /* @__PURE__ */ jsxs("div", {
+		className: "submenu",
+		onMouseEnter: handleMouseEnter,
+		onMouseLeave: handleMouseLeave,
+		children: [/* @__PURE__ */ jsx(SubMenuItem, {
+			triggerRef,
+			onClick: handleTriggerClick,
+			icon,
+			label,
+			disabled,
+			collapsed,
+			descendantSelected,
+			ArrowIcon,
+			showArrow,
+			setPopupContentRef,
+			mode
+		}), usePopup ? /* @__PURE__ */ jsx(Popup, {
+			open: popupOpen,
+			anchorRef: triggerRef,
+			placement: popupPlacement,
+			offset: SUBMENU_POPUP_OFFSET,
+			hoverBridge: SUBMENU_POPUP_OFFSET,
+			onOpenChange: setPopupOpen,
+			container: popupContainer,
+			strategy: popupStrategy,
+			hoverBridgePlacement,
+			className: "border-0 bg-transparent p-0 shadow-none",
+			children: /* @__PURE__ */ jsx(CollapsedContext.Provider, {
+				value: false,
+				children: subMenuContent
+			})
+		}) : isOpen && /* @__PURE__ */ jsx("div", {
+			className: "ml-4 pl-2 pt-1",
+			children: /* @__PURE__ */ jsx(SubMenuLevelContext.Provider, {
+				value: level + 1,
+				children: /* @__PURE__ */ jsx("div", {
+					className: "flex flex-col gap-1",
+					children
+				})
+			})
+		})]
+	});
+}
+//#endregion
+export { SubMenu };

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

@@ -0,0 +1,9 @@
+export { Menu } from "./Menu";
+export { MenuItem } from "./MenuItem";
+export { SubMenu } from "./SubMenu";
+export { CollapseToggle } from "./Menu";
+export type { MenuProps, MenuItemData, MenuItemProps, SubMenuProps } from "./menuTypes";
+export type { CollapseToggleHandle, CollapseToggleProps } from "./Menu";
+export { useMenuStore } from "./MenuContext";
+export type { MenuStore } from "./MenuContext";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,5 @@
+import { useMenuStore } from "./MenuContext.js";
+import { MenuItem } from "./MenuItem.js";
+import { SubMenu } from "./SubMenu.js";
+import { CollapseToggle, Menu } from "./Menu.js";
+export { CollapseToggle, Menu, MenuItem, SubMenu, useMenuStore };

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

@@ -1,4 +1,4 @@
-import type { CSSProperties, MouseEventHandler, ReactNode, Ref } from 'react';
+import type { CSSProperties, MouseEventHandler, ReactNode, Ref } from "react";
 export interface MenuItemData {
     key: string;
     label: ReactNode;

package/fe/packages/react/ui/components/Menu/utils.js

@@ -0,0 +1,8 @@
+//#region packages/react/ui/components/Menu/utils.ts
+function getFirstChar(node) {
+	if (typeof node === "string") return node[0]?.toUpperCase() ?? "";
+	if (typeof node === "number") return String(node);
+	return "";
+}
+//#endregion
+export { getFirstChar };

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from "react";
 export type MessageType = 'success' | 'error' | 'warning' | 'info';
 export type MessageProps = {
     type?: MessageType;

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

@@ -0,0 +1,76 @@
+import { useI18n } from "../../i18n/useI18n.js";
+import "../../i18n/index.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../Button/Button.js";
+import "../Button/index.js";
+import { DEFAULT_DURATION } from "./data.js";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertCircle, CheckCircle2, Info, X, XCircle } from "lucide-react";
+//#region packages/react/ui/components/Message/Message.tsx
+var typeConfig = {
+	success: {
+		icon: CheckCircle2,
+		color: "text-chart-4"
+	},
+	error: {
+		icon: XCircle,
+		color: "text-destructive"
+	},
+	warning: {
+		icon: AlertCircle,
+		color: "text-chart-5"
+	},
+	info: {
+		icon: Info,
+		color: "text-chart-3"
+	}
+};
+function Message({ type = "info", content, children, duration = DEFAULT_DURATION, onClose, closable = true, className }) {
+	const t = useI18n();
+	const displayContent = children ?? content;
+	const [visible, setVisible] = useState(true);
+	const timerRef = useRef(null);
+	const messageRef = useRef(null);
+	const Icon = typeConfig[type].icon;
+	const iconColor = typeConfig[type].color;
+	const handleClose = () => {
+		setVisible(false);
+		setTimeout(() => {
+			onClose?.();
+		}, 200);
+	};
+	useEffect(() => {
+		if (duration > 0) timerRef.current = setTimeout(() => {
+			handleClose();
+		}, duration);
+		return () => {
+			if (timerRef.current) clearTimeout(timerRef.current);
+		};
+	}, [duration]);
+	if (!visible) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: messageRef,
+		className: cn("tc-ui-message flex items-start gap-3 rounded-xl px-4 py-3", "border border-border/60 bg-popover text-popover-foreground shadow-[var(--shadow-floating)]", "min-w-[320px] max-w-[480px]", "transition-[opacity,transform] duration-200", "pointer-events-auto", visible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2", className),
+		children: [
+			/* @__PURE__ */ jsx(Icon, {
+				size: 20,
+				className: cn("flex-shrink-0 mt-0.5", iconColor)
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex-1 text-sm text-popover-foreground",
+				children: displayContent
+			}),
+			closable && /* @__PURE__ */ jsx(Button, {
+				variant: "text",
+				type: "button",
+				onClick: handleClose,
+				"aria-label": t("components.message.close"),
+				className: cn("flex-shrink-0 p-0.5 rounded-md", "text-muted-foreground hover:text-popover-foreground", "hover:bg-foreground/8 active:bg-foreground/12", "transition-colors", "focus-visible:ring-theme/30"),
+				children: /* @__PURE__ */ jsx(X, { size: 16 })
+			})
+		]
+	});
+}
+//#endregion
+export { Message };

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

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
-import { type MessageProps, type MessageType } from './Message';
+import type { ReactNode } from "react";
+import { type MessageProps, type MessageType } from "./Message";
 type MessageConfig = Omit<MessageProps, 'onClose' | 'children'> & {
     id: string;
     content?: ReactNode;