@_tc/template-core 0.0.1-bate.35 → 0.0.1-bate.37

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

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import { ChevronDown, ChevronUp, X } from 'lucide-react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { formatNumber, isValidNumberInput, normalizeNumber, parseInputNumber, shouldSyncDisplayValue, stepValue, } from './inputNumberUtils';
+const formatDisplayValue = (value, constraints) => typeof value === 'number' ? formatNumber(value, constraints) : '';
+const getBlurValue = (rawValue) => {
+    if (rawValue === '' || rawValue === '-' || rawValue === '.' || rawValue === '-.') {
+        return undefined;
+    }
+    const normalizedRawValue = rawValue.endsWith('.') ? rawValue.slice(0, -1) : rawValue;
+    const parsedValue = Number(normalizedRawValue);
+    return Number.isFinite(parsedValue) ? parsedValue : undefined;
+};
+const InputNumber = forwardRef(({ className, inputClassName, value: controlledValue, onChange, defaultValue, allowClear, addonAfter, allowStep = false, disabled, min, max, precision, step, inputMode = 'decimal', ...props }, ref) => {
+    const constraints = useMemo(() => ({
+        min,
+        max,
+        precision,
+        step,
+    }), [max, min, precision, step]);
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState(defaultValue);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const [isFocused, setIsFocused] = useState(false);
+    const [displayValue, setDisplayValue] = useState(() => formatDisplayValue(currentValue, constraints));
+    const inputRef = useRef(null);
+    const setRefs = useCallback((node) => {
+        inputRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            ref.current = node;
+        }
+    }, [ref]);
+    useEffect(() => {
+        if (!shouldSyncDisplayValue({ isFocused, displayValue, currentValue })) {
+            return;
+        }
+        const nextDisplayValue = formatDisplayValue(currentValue, constraints);
+        if (nextDisplayValue !== displayValue) {
+            setDisplayValue(nextDisplayValue);
+        }
+    }, [constraints, currentValue, displayValue, isFocused]);
+    const emitChange = useCallback((nextValue, e, forceNotify = false) => {
+        if (!isControlled) {
+            setInternalValue(nextValue);
+        }
+        if (forceNotify || !Object.is(currentValue, nextValue)) {
+            onChange?.(nextValue, e);
+        }
+    }, [currentValue, isControlled, onChange]);
+    const createSyntheticChangeEvent = useCallback((value) => {
+        const target = inputRef.current;
+        if (target) {
+            target.value = value;
+        }
+        return {
+            target: { value },
+            currentTarget: { value },
+        };
+    }, []);
+    const handleChange = useCallback((e) => {
+        const nextDisplayValue = e.target.value;
+        if (!isValidNumberInput(nextDisplayValue)) {
+            return;
+        }
+        setDisplayValue(nextDisplayValue);
+        const parsedValue = parseInputNumber(nextDisplayValue);
+        if (parsedValue.kind === 'empty') {
+            emitChange(undefined, e);
+            return;
+        }
+        if (parsedValue.kind === 'number') {
+            emitChange(parsedValue.value, e);
+        }
+    }, [emitChange]);
+    const handleBlur = useCallback((e) => {
+        setIsFocused(false);
+        const nextValue = getBlurValue(displayValue);
+        if (nextValue === undefined) {
+            const syntheticEvent = createSyntheticChangeEvent('');
+            setDisplayValue('');
+            emitChange(undefined, syntheticEvent);
+            props.onBlur?.(e);
+            return;
+        }
+        const normalizedValue = normalizeNumber(nextValue, constraints);
+        const nextDisplayValue = formatDisplayValue(normalizedValue, constraints);
+        const syntheticEvent = createSyntheticChangeEvent(nextDisplayValue);
+        setDisplayValue(nextDisplayValue);
+        emitChange(normalizedValue, syntheticEvent);
+        props.onBlur?.(e);
+    }, [constraints, createSyntheticChangeEvent, displayValue, emitChange, props]);
+    const handleFocus = useCallback((e) => {
+        if (disabled) {
+            return;
+        }
+        setIsFocused(true);
+        props.onFocus?.(e);
+    }, [disabled, props]);
+    const clearIcon = useMemo(() => {
+        if (!allowClear) {
+            return undefined;
+        }
+        if (typeof allowClear === 'boolean') {
+            return (_jsx("span", { className: cn('h-5 w-5 rounded-full', 'bg-muted text-foreground', 'flex items-center justify-center', 'transition-colors hover:bg-muted/80'), children: _jsx(X, { size: 12 }) }));
+        }
+        return allowClear.clearIcon;
+    }, [allowClear]);
+    const hasValue = displayValue.length > 0;
+    const showClearIcon = hasValue && clearIcon && !disabled;
+    const hasRightAccessories = showClearIcon || addonAfter || allowStep;
+    const currentParsedValue = parseInputNumber(displayValue);
+    const stepBaseValue = currentParsedValue.kind === 'number' ? currentParsedValue.value : currentValue;
+    const normalizedCurrentStepValue = typeof stepBaseValue === 'number' ? normalizeNumber(stepBaseValue, constraints) : undefined;
+    const canStep = useCallback((direction) => {
+        if (disabled) {
+            return false;
+        }
+        const nextValue = stepValue(stepBaseValue, direction, constraints);
+        return !Object.is(nextValue, normalizedCurrentStepValue);
+    }, [constraints, disabled, normalizedCurrentStepValue, stepBaseValue]);
+    const handleStep = useCallback((direction) => {
+        const nextValue = stepValue(stepBaseValue, direction, constraints);
+        const nextDisplayValue = formatDisplayValue(nextValue, constraints);
+        const syntheticEvent = createSyntheticChangeEvent(nextDisplayValue);
+        setDisplayValue(nextDisplayValue);
+        emitChange(nextValue, syntheticEvent, true);
+        inputRef.current?.focus();
+    }, [constraints, createSyntheticChangeEvent, emitChange, stepBaseValue]);
+    const handleClear = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const syntheticEvent = createSyntheticChangeEvent('');
+        setDisplayValue('');
+        emitChange(undefined, syntheticEvent, true);
+        inputRef.current?.focus();
+    }, [createSyntheticChangeEvent, emitChange]);
+    return (_jsxs("div", { className: cn('tc-ui-input-number relative w-full', className), children: [_jsx("input", { ref: setRefs, type: "text", value: displayValue, onChange: handleChange, inputMode: inputMode, className: cn('flex w-full rounded-lg px-4 py-3 text-sm', 'border transition-colors duration-200', 'placeholder:text-muted-foreground', 'focus:outline-none', showClearIcon && !allowStep && !addonAfter && 'pr-10', hasRightAccessories && 'pr-24', allowStep && addonAfter && 'pr-28', disabled ? 'cursor-not-allowed bg-muted border-border text-muted-foreground' : 'bg-background', !disabled && !hasValue && !isFocused && 'border-border', !disabled && (hasValue || isFocused) && 'border-theme', inputClassName), onFocus: handleFocus, onBlur: handleBlur, disabled: disabled, ...props }), hasRightAccessories && (_jsxs("div", { className: "absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-1", children: [showClearIcon && (_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: handleClear, children: clearIcon })), addonAfter && _jsx("div", { children: addonAfter }), allowStep && (_jsxs("div", { className: "flex flex-col overflow-hidden rounded-md border border-border", children: [_jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => handleStep('up'), disabled: !canStep('up'), className: cn('flex h-4 w-4 items-center justify-center bg-background text-foreground transition-colors', 'border-b border-border', 'disabled:cursor-not-allowed disabled:text-muted-foreground', !disabled && canStep('up') && 'hover:bg-muted'), children: _jsx(ChevronUp, { size: 12 }) }), _jsx("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => handleStep('down'), disabled: !canStep('down'), className: cn('flex h-4 w-4 items-center justify-center bg-background text-foreground transition-colors', 'disabled:cursor-not-allowed disabled:text-muted-foreground', !disabled && canStep('down') && 'hover:bg-muted'), children: _jsx(ChevronDown, { size: 12 }) })] }))] }))] }));
+});
+InputNumber.displayName = 'InputNumber';
+export { InputNumber };

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

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

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

@@ -0,0 +1 @@
+export * from './InputNumber';

package/fe/packages/ui/react/components/InputNumber/inputNumberUtils.d.ts

@@ -0,0 +1,30 @@
+export interface InputNumberConstraints {
+    min?: number;
+    max?: number;
+    precision?: number;
+    step?: number;
+}
+export type ParsedInputNumber = {
+    kind: 'empty';
+} | {
+    kind: 'incomplete';
+} | {
+    kind: 'invalid';
+} | {
+    kind: 'number';
+    value: number;
+};
+export type StepDirection = 'up' | 'down';
+export declare const isValidNumberInput: (value: string) => boolean;
+export declare const clampValue: (value: number, constraints: InputNumberConstraints) => number;
+export declare const applyPrecision: (value: number, precision?: number) => number;
+export declare const normalizeNumber: (value: number, constraints: InputNumberConstraints) => number;
+export declare const formatNumber: (value: number, constraints: InputNumberConstraints) => string;
+export declare const parseInputNumber: (value: string) => ParsedInputNumber;
+export declare const shouldSyncDisplayValue: ({ isFocused, displayValue, currentValue, }: {
+    isFocused: boolean;
+    displayValue: string;
+    currentValue: number | undefined;
+}) => boolean;
+export declare const stepValue: (currentValue: number | undefined, direction: StepDirection, constraints: InputNumberConstraints) => number;
+//# sourceMappingURL=inputNumberUtils.d.ts.map

package/fe/packages/ui/react/components/InputNumber/inputNumberUtils.js

@@ -0,0 +1,63 @@
+const isFiniteNumber = (value) => typeof value === 'number' && Number.isFinite(value);
+export const isValidNumberInput = (value) => /^-?\d*(\.\d*)?$/.test(value);
+export const clampValue = (value, constraints) => {
+    let nextValue = value;
+    if (isFiniteNumber(constraints.min)) {
+        nextValue = Math.max(nextValue, constraints.min);
+    }
+    if (isFiniteNumber(constraints.max)) {
+        nextValue = Math.min(nextValue, constraints.max);
+    }
+    return nextValue;
+};
+export const applyPrecision = (value, precision) => {
+    if (typeof precision !== 'number' || precision < 0) {
+        return value;
+    }
+    return Number(value.toFixed(precision));
+};
+export const normalizeNumber = (value, constraints) => {
+    return clampValue(applyPrecision(value, constraints.precision), constraints);
+};
+export const formatNumber = (value, constraints) => {
+    const normalized = normalizeNumber(value, constraints);
+    if (typeof constraints.precision === 'number' && constraints.precision >= 0) {
+        return normalized.toFixed(constraints.precision);
+    }
+    return String(normalized);
+};
+export const parseInputNumber = (value) => {
+    if (value === '') {
+        return { kind: 'empty' };
+    }
+    if (value === '-' || value === '.' || value === '-.' || /^-?\d+\.$/.test(value)) {
+        return { kind: 'incomplete' };
+    }
+    if (!isValidNumberInput(value)) {
+        return { kind: 'invalid' };
+    }
+    const parsedValue = Number(value);
+    if (!Number.isFinite(parsedValue)) {
+        return { kind: 'invalid' };
+    }
+    return { kind: 'number', value: parsedValue };
+};
+export const shouldSyncDisplayValue = ({ isFocused, displayValue, currentValue, }) => {
+    if (!isFocused) {
+        return true;
+    }
+    const parsedDisplayValue = parseInputNumber(displayValue);
+    if (parsedDisplayValue.kind === 'incomplete' || parsedDisplayValue.kind === 'invalid') {
+        return false;
+    }
+    if (parsedDisplayValue.kind === 'empty') {
+        return currentValue !== undefined;
+    }
+    return !Object.is(parsedDisplayValue.value, currentValue);
+};
+export const stepValue = (currentValue, direction, constraints) => {
+    const step = constraints.step && constraints.step > 0 ? constraints.step : 1;
+    const baseValue = isFiniteNumber(currentValue) ? currentValue : 0;
+    const delta = direction === 'up' ? step : -step;
+    return normalizeNumber(baseValue + delta, constraints);
+};

package/fe/packages/ui/react/components/InputNumber/inputNumberUtils.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=inputNumberUtils.test.d.ts.map

package/fe/packages/ui/react/components/InputNumber/inputNumberUtils.test.js

@@ -0,0 +1,27 @@
+import assert from 'node:assert/strict';
+import test from 'node:test';
+import { clampValue, formatNumber, parseInputNumber, shouldSyncDisplayValue, stepValue } from './inputNumberUtils';
+test('parseInputNumber keeps empty and transitional values unresolved', () => {
+    assert.deepEqual(parseInputNumber(''), { kind: 'empty' });
+    assert.deepEqual(parseInputNumber('-'), { kind: 'incomplete' });
+    assert.deepEqual(parseInputNumber('.'), { kind: 'incomplete' });
+    assert.deepEqual(parseInputNumber('1.'), { kind: 'incomplete' });
+    assert.deepEqual(parseInputNumber('-1.'), { kind: 'incomplete' });
+    assert.deepEqual(parseInputNumber('1.25'), { kind: 'number', value: 1.25 });
+});
+test('formatNumber applies precision and clamps boundaries', () => {
+    assert.equal(formatNumber(1.236, { precision: 2 }), '1.24');
+    assert.equal(formatNumber(12, { max: 10 }), '10');
+    assert.equal(clampValue(-3, { min: 0 }), 0);
+});
+test('stepValue respects min max precision and step', () => {
+    assert.equal(stepValue(undefined, 'up', { step: 0.25, precision: 2 }), 0.25);
+    assert.equal(stepValue(9.9, 'up', { step: 1, max: 10, precision: 1 }), 10);
+    assert.equal(stepValue(0.3, 'down', { step: 0.2, min: 0, precision: 1 }), 0.1);
+});
+test('shouldSyncDisplayValue preserves editable decimals while focused', () => {
+    assert.equal(shouldSyncDisplayValue({ isFocused: true, displayValue: '12.5', currentValue: 12.5 }), false);
+    assert.equal(shouldSyncDisplayValue({ isFocused: true, displayValue: '12.56', currentValue: 12.56 }), false);
+    assert.equal(shouldSyncDisplayValue({ isFocused: true, displayValue: '12.56', currentValue: 3.14 }), true);
+    assert.equal(shouldSyncDisplayValue({ isFocused: false, displayValue: '12.56', currentValue: 12.56 }), true);
+});

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

@@ -4,46 +4,17 @@ type VerticalLayout = {
 };
 type HorizontalLayout = {
     layout?: 'horizontal';
-    /**
-     * 标签宽度
-     * @default 'auto'
-     */
     labelWidth?: string | number;
-    /**
-     * 标签对齐方式
-     * @default 'left'
-     */
     labelAlign?: 'left' | 'right' | 'center';
 };
 export type LabelLayout = HorizontalLayout | VerticalLayout;
 export type LabelProps = {
-    /**
-     * 标签文本
-     */
     label: ReactNode;
-    /**
-     * 标签内容
-     */
     children: ReactNode;
-    /**
-     * 是否必填（显示红色星号）
-     */
     required?: boolean;
-    /**
-     * 标签的 htmlFor 属性
-     */
     htmlFor?: string;
-    /**
-     * 容器类名
-     */
     className?: string;
-    /**
-     * 标签类名
-     */
     labelClassName?: string;
-    /**
-     * 内容区域类名
-     */
     contentClassName?: string;
 } & LabelLayout;
 declare const Label: import("react").ForwardRefExoticComponent<LabelProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from '../../lib/utils';
 import { forwardRef, useMemo } from 'react';
-// 标签对齐样式
 const labelAlignStyles = {
     left: 'text-left',
     right: 'text-right',
@@ -10,7 +9,6 @@ const labelAlignStyles = {
 const Label = forwardRef((props, ref) => {
     const { label, children, layout = 'vertical', required = false, htmlFor, className, labelClassName, contentClassName, } = props;
     const isVertical = layout === 'vertical';
-    // 标签样式
     const labelStyles = cn('text-sm font-medium text-foreground', required && "before:content-['*'] before:pt-1 before:mr-0.5 before:text-destructive", labelClassName);
     const { usedClassName, labelWidth } = useMemo(() => {
         let usedLabelWidth;
@@ -27,9 +25,9 @@ const Label = forwardRef((props, ref) => {
         };
     }, [props]);
     if (isVertical) {
-        return (_jsxs("div", { ref: ref, className: cn('flex flex-col gap-2', className), children: [_jsx("label", { htmlFor: htmlFor, className: labelStyles, children: label }), _jsx("div", { className: cn('w-full', contentClassName), children: children })] }));
+        return (_jsxs("div", { ref: ref, className: cn('tc-ui-label flex flex-col gap-2', className), children: [_jsx("label", { htmlFor: htmlFor, className: labelStyles, children: label }), _jsx("div", { className: cn('w-full', contentClassName), children: children })] }));
     }
-    return (_jsxs("div", { ref: ref, className: cn('flex items-center gap-4', className), children: [_jsx("label", { htmlFor: htmlFor, className: cn(labelStyles, usedClassName), style: { width: labelWidth, flexShrink: 0 }, children: label }), _jsx("div", { className: cn('flex-1', contentClassName), children: children })] }));
+    return (_jsxs("div", { ref: ref, className: cn('tc-ui-label flex items-center gap-4', className), children: [_jsx("label", { htmlFor: htmlFor, className: cn(labelStyles, usedClassName), style: { width: labelWidth, flexShrink: 0 }, children: label }), _jsx("div", { className: cn('flex-1', contentClassName), children: children })] }));
 });
 Label.displayName = 'Label';
 export { Label };

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

@@ -0,0 +1,18 @@
+import { type FC } from "react";
+import { MenuItem } from "./MenuItem";
+import { SubMenu } from "./SubMenu";
+import type { MenuProps } from "./menuTypes";
+export interface CollapseToggleHandle {
+    collapse: () => void;
+    expand: () => void;
+}
+export interface CollapseToggleProps {
+    className?: string;
+}
+export declare const CollapseToggle: import("react").ForwardRefExoticComponent<CollapseToggleProps & import("react").RefAttributes<CollapseToggleHandle>>;
+export declare const Menu: FC<MenuProps> & {
+    Item: typeof MenuItem;
+    SubMenu: typeof SubMenu;
+    CollapseToggle: typeof CollapseToggle;
+};
+//# sourceMappingURL=Menu.d.ts.map

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

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { forwardRef, useEffect, useImperativeHandle, useRef, } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { CollapsedContext, useMenuStore, MenuStoreContext, createMenuContextValue, } from "./MenuContext";
+import { MenuItem } from "./MenuItem";
+import { SubMenu } from "./SubMenu";
+function renderItems(items, parentKey) {
+    return items.map((item) => {
+        if (item.children && item.children.length > 0) {
+            return (_jsx(SubMenu, { eventKey: item.key, label: item.label, icon: item.icon, disabled: item.disabled, popup: item.popup, parentKey: parentKey, children: renderItems(item.children, item.key) }, item.key));
+        }
+        return (_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));
+    });
+}
+export const 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 = () => {
+        if (typeof propsCollapsed !== "undefined" &&
+            typeof onCollapse === "undefined") {
+            return false;
+        }
+        return true;
+    };
+    useImperativeHandle(ref, () => ({
+        collapse: () => setCollapsed(true),
+        expand: () => setCollapsed(false),
+    }), [setCollapsed]);
+    if (!shouldShowCollapseToggle()) {
+        return null;
+    }
+    return (_jsx("div", { role: "button", onClick: () => setCollapsed(!collapsed), className: cn("mx-1 mb-1 flex h-9 cursor-pointer items-center justify-center rounded-lg", "text-muted-foreground transition-all", "hover:bg-muted/60 hover:text-foreground", className), children: collapsed ? (_jsx(ChevronRight, { className: "h-4 w-4" })) : (_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 (_jsxs("nav", { role: "menu", className: cn("tc-ui-menu relative overflow-hidden rounded-xl bg-background shadow-sm", mode === "left" && "flex flex-col p-1", mode === "top" && "flex flex-row items-center p-[3px]", className), style: mode === "left" && collapsed ? { width: collapsedWidth } : undefined, children: [mode === "left" && _jsx(CollapseToggle, {}), _jsx(CollapsedContext.Provider, { value: mode === "left" && collapsed, children: _jsx("div", { className: cn(mode === "left" && "flex flex-col gap-1", mode === "top" && "flex flex-row items-center gap-1"), children: content }) })] }));
+}
+export const 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,
+    ]);
+    useEffect(() => {
+        if (controlledSelectedKey !== undefined) {
+            store.setState({ selectedKey: controlledSelectedKey });
+        }
+    }, [controlledSelectedKey]);
+    useEffect(() => {
+        if (controlledCollapsed !== undefined) {
+            store.setState({ collapsed: controlledCollapsed });
+        }
+    }, [controlledCollapsed]);
+    return (_jsx(MenuStoreContext.Provider, { value: store, children: _jsx(MenuInner, { mode: mode, items: items, className: className, children: children }) }));
+};
+Menu.Item = MenuItem;
+Menu.SubMenu = SubMenu;
+Menu.CollapseToggle = CollapseToggle;

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

@@ -0,0 +1,39 @@
+export declare const CollapsedContext: import("react").Context<boolean>;
+interface MenuStore {
+    mode: 'top' | 'left';
+    expandTrigger: 'hover' | 'click';
+    expandMode: 'accordion' | 'multiple';
+    selectedKey: string | undefined;
+    openKeys: string[];
+    openKeyParents: Record<string, string>;
+    collapsed: boolean;
+    propsCollapsed: boolean | undefined;
+    collapsedWidth: number;
+    collapsedLabelTooltip: boolean;
+    onSelect: ((key: string) => void) | undefined;
+    onCollapse: ((collapsed: boolean) => void) | undefined;
+    isControlledSelected: boolean;
+    isControlledCollapsed: boolean;
+    setSelectedKey: (key: string) => void;
+    toggleOpenKey: (key: string, parentKey?: string) => void;
+    setCollapsed: (collapsed: boolean) => void;
+}
+declare const MenuStoreContext: import("react").Context<import("zustand").StoreApi<MenuStore> | null>;
+export declare function useMenuStore<T>(selector: (state: MenuStore) => T): T;
+export declare function createMenuContextValue(overrides: {
+    mode?: 'top' | 'left';
+    expandTrigger?: 'hover' | 'click';
+    expandMode?: 'accordion' | 'multiple';
+    selectedKey?: string;
+    defaultSelectedKey?: string;
+    collapsed?: boolean;
+    propsCollapsed?: boolean;
+    defaultCollapsed?: boolean;
+    collapsedWidth?: number;
+    collapsedLabelTooltip?: boolean;
+    onSelect?: (key: string) => void;
+    onCollapse?: (collapsed: boolean) => void;
+}): import("zustand").StoreApi<MenuStore>;
+export { MenuStoreContext };
+export type { MenuStore };
+//# sourceMappingURL=MenuContext.d.ts.map

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

@@ -0,0 +1,97 @@
+import { createContext, useContext } from 'react';
+export const CollapsedContext = createContext(false);
+import { createStore, useStore } from 'zustand';
+function createMenuStore(props) {
+    const { mode, expandTrigger, propsCollapsed, expandMode, collapsedWidth, } = props;
+    const isControlledSelected = props.selectedKey !== undefined;
+    const isControlledCollapsed = props.collapsed !== undefined;
+    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 {
+                    const siblings = openKeys.filter((k) => openKeyParents[k] === parentKey);
+                    siblings.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);
+        },
+    }));
+}
+const MenuStoreContext = createContext(null);
+export function useMenuStore(selector) {
+    const store = useContext(MenuStoreContext);
+    if (!store)
+        throw new Error('Menu compound components must be used within <Menu>');
+    return useStore(store, selector);
+}
+export 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,
+    });
+}
+export { MenuStoreContext };

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

@@ -0,0 +1,3 @@
+import type { MenuItemProps } from "./menuTypes";
+export declare function MenuItem({ eventKey, icon, disabled, danger, onClick, children, className, style, width, minWidth, maxWidth, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MenuItem.d.ts.map

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/utils";
+import { useCallback, useContext, useRef, useState } from "react";
+import { Button } from "../Button";
+import { CollapsedContext, useMenuStore } from "./MenuContext";
+import { Popup } from "../Popup";
+import { getFirstChar } from "./utils";
+export 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 (_jsxs("div", { ref: triggerRef, className: "relative", onMouseEnter: () => collapsed && collapsedLabelTooltip && setShowTooltip(true), onMouseLeave: () => collapsed && collapsedLabelTooltip && setShowTooltip(false), children: [_jsxs(Button, { ...props, variant: "text", role: "menuitem", disabled: 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 text-theme-foreground shadow-sm", !isSelected &&
+                    !danger &&
+                    "text-foreground hover:bg-gray-200 dark:hover:bg-gray-700", danger && !isSelected && "text-destructive hover:bg-destructive/10", disabled && "cursor-not-allowed opacity-50", className), style: collapsed ? style : { width, minWidth, maxWidth, ...style }, children: [icon && (_jsx("span", { className: cn("flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md transition-colors", isSelected
+                            ? "bg-theme-foreground/15"
+                            : "text-muted-foreground group-hover:text-foreground"), children: icon })), !collapsed && (_jsx("span", { className: "min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: children })), collapsed && !icon && collapsedLabelTooltip && (_jsx("span", { className: "absolute left-0 right-0 top-0 flex h-full items-center justify-center text-[10px]", children: getFirstChar(children) }))] }), _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: _jsx("div", { className: "whitespace-nowrap rounded-lg bg-gray-900 px-3 py-1.5 text-xs text-white shadow-sm", children: children }) })] }));
+}

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

@@ -0,0 +1,3 @@
+import type { SubMenuProps } from "./menuTypes";
+export declare function SubMenu({ eventKey, label, icon, disabled, popup: forcePopup, parentKey, children, }: SubMenuProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SubMenu.d.ts.map