@_tc/template-core 0.0.1 → 0.0.2

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

@@ -0,0 +1,35 @@
+declare const Breadcrumb: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
+    separator?: React.ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;
+declare const BreadcrumbList: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & import("react").RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbLink: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
+    asChild?: boolean;
+} & import("react").RefAttributes<HTMLAnchorElement>>;
+declare const BreadcrumbPage: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    active?: boolean;
+    onClose?: () => void;
+    closable?: boolean;
+} & import("react").RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbSeparator: {
+    ({ children, className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const BreadcrumbEllipsis: {
+    ({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };
+export interface BreadcrumbItemData {
+    label: string;
+    desctext?: string;
+    id: string | number;
+    path?: string;
+    active?: boolean;
+    closable?: boolean;
+}
+export interface SimpleBreadcrumbProps {
+    className?: string;
+}
+export declare function SimpleBreadcrumb({ className }: SimpleBreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=breadcrumb.d.ts.map

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '../../i18n';
+import { useBreadcrumb } from '../../hooks/useBreadcrumb';
+import { useLanguage } from '../../hooks/useLanguage';
+import { cn } from '../../lib/utils';
+// import useUserStore from '@tc/ui-react/stores/user'
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import { forwardRef } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Button } from '../Button';
+const Breadcrumb = forwardRef(({ className, ...props }, ref) => _jsx("nav", { ref: ref, "aria-label": "breadcrumb", className: cn('tc-ui-breadcrumb', className), ...props }));
+Breadcrumb.displayName = 'Breadcrumb';
+const BreadcrumbList = forwardRef(({ className, ...props }, ref) => (_jsx("ol", { ref: ref, className: cn('tc-ui-breadcrumb-list flex items-center gap-3 flex-wrap', className), ...props })));
+BreadcrumbList.displayName = 'BreadcrumbList';
+const BreadcrumbItem = forwardRef(({ className, ...props }, ref) => _jsx("li", { ref: ref, className: cn('tc-ui-breadcrumb-item inline-flex items-center', className), ...props }));
+BreadcrumbItem.displayName = 'BreadcrumbItem';
+const BreadcrumbLink = forwardRef(({ className, ...props }, ref) => {
+    return _jsx("a", { ref: ref, className: cn('tc-ui-breadcrumb-link transition-colors hover:text-foreground', className), ...props });
+});
+BreadcrumbLink.displayName = 'BreadcrumbLink';
+const BreadcrumbPage = forwardRef(({ className, active, onClose, closable = true, children, ...props }, ref) => {
+    const t = useI18n();
+    return (_jsxs("span", { ref: ref, role: "link", "aria-disabled": "true", "aria-current": "page", className: cn('tc-ui-breadcrumb-page inline-flex items-center gap-2 px-4 py-2 rounded-lg border transition-all duration-200 text-sm', active
+            ? 'bg-breadcrumb-active-bg text-breadcrumb-active-text border-breadcrumb-active-bg shadow-sm'
+            : 'bg-background text-breadcrumb-text border-breadcrumb-border hover:border-gray-400', className), ...props, children: [_jsx("span", { className: "font-normal", children: children }), onClose && closable && (_jsx(Button, { variant: "text", type: "button", onClick: (e) => {
+                    e.stopPropagation();
+                    onClose();
+                }, className: "inline-flex items-center justify-center hover:opacity-70 transition-opacity", "aria-label": t('components.breadcrumb.close'), children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("g", { clipPath: "url(#clip0_228_519)", children: [_jsx("circle", { cx: "8", cy: "8", r: "6.66667", stroke: "currentColor", strokeWidth: "1" }), _jsx("path", { d: "M9.66669 6.33302L6.33337 9.66634M6.33336 6.33301L9.66668 9.66633", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_228_519", children: _jsx("rect", { width: "16", height: "16", fill: "white" }) }) })] }) }))] }));
+});
+BreadcrumbPage.displayName = 'BreadcrumbPage';
+const BreadcrumbSeparator = ({ children, className, ...props }) => (_jsx("li", { role: "presentation", "aria-hidden": "true", className: cn('tc-ui-breadcrumb-separator [&>svg]:size-3.5', className), ...props, children: children ?? _jsx(ChevronRight, {}) }));
+BreadcrumbSeparator.displayName = 'BreadcrumbSeparator';
+const BreadcrumbEllipsis = ({ className, ...props }) => (_jsxs("span", { role: "presentation", "aria-hidden": "true", "aria-label": "More", className: cn('tc-ui-breadcrumb-ellipsis flex h-9 w-9 items-center justify-center', className), ...props, children: [_jsx(MoreHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "More" })] }));
+BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis';
+export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };
+export function SimpleBreadcrumb({ className }) {
+    const { language } = useLanguage();
+    const navigate = useNavigate();
+    const { items, setActiveItem, removeItem } = useBreadcrumb();
+    const handleBreadcrumbClick = (id) => {
+        const item = items.find((item) => item.id === id);
+        if (item?.path) {
+            navigate(item.path);
+            setActiveItem(id);
+        }
+    };
+    const handleBreadcrumbClose = (id) => {
+        const itemToRemove = items.find((item) => item.id === id);
+        const isActive = itemToRemove?.active;
+        // 先计算剩余的面包屑项（在删除之前）
+        const remainingItems = items.filter((item) => item.id !== id);
+        // 立即删除该项，确保状态及时更新
+        removeItem(id);
+        // 如果删除的是当前激活的项，需要跳转
+        if (isActive) {
+            if (remainingItems.length > 0) {
+                // 有剩余项，跳转到最后一个
+                const targetItem = remainingItems.at(-1);
+                const targetPath = targetItem.path;
+                if (targetPath) {
+                    // 使用 setTimeout 确保删除操作先完成
+                    setTimeout(() => {
+                        navigate(targetPath);
+                        setActiveItem(targetItem.id);
+                    }, 0);
+                }
+            }
+            else {
+                // 获取首页路径（第一个权限页面）
+                setTimeout(() => {
+                    // todo
+                    // navigate(useUserStore.getState().userPagePermissions[0]?.menuUrl || '/')
+                }, 0);
+            }
+        }
+    };
+    const getItemLabel = (item) => {
+        return language === 'zh-CN' ? item.label : item.desctext || item.label;
+    };
+    return (_jsx(Breadcrumb, { className: className, children: _jsx(BreadcrumbList, { children: items.map((item) => (_jsx(BreadcrumbItem, { children: _jsx(BreadcrumbPage, { active: item.active, closable: item.closable !== false, onClose: () => handleBreadcrumbClose(item.id), onClick: () => handleBreadcrumbClick(item.id), className: 'cursor-pointer', "data-active": item.active ? 'true' : undefined, children: getItemLabel(item) }) }, item.id))) }) }));
+}

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

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

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

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

package/fe/packages/ui/react/components/hooks/useDropdownPositioning.d.ts

@@ -0,0 +1,49 @@
+import type { RefObject } from "react";
+export type DropdownPlacement = "bottom-end" | "bottom-start" | "left-start" | "top-end" | "top-start" | "right-start" | "right-end";
+export type DropdownPosition = {
+    top: number;
+    left?: number;
+    right?: number;
+    width?: number;
+};
+export type DropdownPositioningContext = {
+    anchorRect: DOMRect;
+    contentRect?: DOMRect;
+    containerRect?: DOMRect;
+    viewportWidth: number;
+    viewportHeight: number;
+    placement: DropdownPlacement;
+    offset: number;
+    matchAnchorWidth: boolean;
+};
+export type DropdownPositioningStrategy = (context: DropdownPositioningContext) => DropdownPosition;
+export type UseDropdownPositioningOptions = {
+    open: boolean;
+    anchorRef: RefObject<HTMLElement | null>;
+    contentRef: RefObject<HTMLElement | null>;
+    placement?: DropdownPlacement;
+    offset?: number;
+    matchAnchorWidth?: boolean;
+    strategy?: DropdownPositioningStrategy;
+    estimateSize?: () => {
+        width?: number;
+        height?: number;
+    };
+    watchDeps?: readonly unknown[];
+    containerRef?: RefObject<HTMLElement | null>;
+    positionMode?: "fixed" | "absolute";
+};
+export type UseDropdownPositioningResult = {
+    position: DropdownPosition;
+    ready: boolean;
+    updatePosition: () => void;
+};
+/**
+ * 计算弹窗该放在哪。
+ *
+ * right/left：跟触发元素顶部对齐，往右或往左弹。
+ * bottom/top：放在触发元素下方或上方，再按 start/end 对齐。
+ */
+export declare const getDefaultDropdownPosition: DropdownPositioningStrategy;
+export declare function useDropdownPositioning({ open, anchorRef, contentRef, placement, offset, matchAnchorWidth, strategy, estimateSize, watchDeps, containerRef, positionMode, }: UseDropdownPositioningOptions): UseDropdownPositioningResult;
+//# sourceMappingURL=useDropdownPositioning.d.ts.map

package/fe/packages/ui/react/components/hooks/useDropdownPositioning.js

@@ -0,0 +1,137 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+const HIDDEN_POSITION = {
+    top: -100,
+    left: -100,
+};
+const EMPTY_DEPS = [];
+/**
+ * 计算弹窗该放在哪。
+ *
+ * right/left：跟触发元素顶部对齐，往右或往左弹。
+ * bottom/top：放在触发元素下方或上方，再按 start/end 对齐。
+ */
+export const getDefaultDropdownPosition = ({ anchorRect, contentRect, containerRect, viewportWidth, placement, offset, matchAnchorWidth, }) => {
+    const isRight = placement.startsWith("right");
+    const isLeft = placement.startsWith("left");
+    const isTop = placement.startsWith("top");
+    const containerTop = containerRect?.top ?? 0;
+    const containerLeft = containerRect?.left ?? 0;
+    const containerRight = containerRect?.right ?? viewportWidth;
+    const nextPosition = {
+        top: (isRight || isLeft
+            ? anchorRect.top
+            : isTop
+                ? anchorRect.top - (contentRect?.height ?? 0) - offset
+                : anchorRect.bottom + offset) - containerTop,
+        width: matchAnchorWidth ? anchorRect.width : undefined,
+    };
+    if (isRight) {
+        nextPosition.left = anchorRect.right + offset - containerLeft;
+    }
+    else if (isLeft) {
+        // 往左弹时，要知道弹窗宽度，才能算出左边应该从哪里开始。
+        nextPosition.left = anchorRect.left - (contentRect?.width ?? 0) - offset - containerLeft;
+    }
+    else if (placement.endsWith("start")) {
+        nextPosition.left = anchorRect.left - containerLeft;
+    }
+    else {
+        nextPosition.right = containerRight - anchorRect.right;
+    }
+    return nextPosition;
+};
+export function useDropdownPositioning({ open, anchorRef, contentRef, placement = "bottom-end", offset = 8, matchAnchorWidth = false, strategy = getDefaultDropdownPosition, estimateSize, watchDeps = EMPTY_DEPS, containerRef, positionMode = "fixed", }) {
+    const [position, setPosition] = useState(HIDDEN_POSITION);
+    const [ready, setReady] = useState(false);
+    const getContentRect = useCallback(() => {
+        // 优先用真实 DOM 尺寸。刚打开时可能还量不到，就允许外部给一个预估尺寸。
+        const measuredRect = contentRef.current?.getBoundingClientRect();
+        if (measuredRect && measuredRect.height > 0) {
+            return measuredRect;
+        }
+        const estimatedSize = estimateSize?.();
+        if (!estimatedSize)
+            return measuredRect;
+        return new DOMRect(0, 0, estimatedSize.width ?? 0, estimatedSize.height ?? 0);
+    }, [contentRef, estimateSize]);
+    const updatePosition = useCallback(() => {
+        if (!anchorRef.current)
+            return;
+        // 每次定位前重新读取位置，这样滚动或窗口变化后不会用旧坐标。
+        const anchorRect = anchorRef.current.getBoundingClientRect();
+        const contentRect = getContentRect();
+        const containerRect = positionMode === "absolute"
+            ? containerRef?.current?.getBoundingClientRect()
+            : undefined;
+        const newData = strategy({
+            anchorRect,
+            contentRect: contentRect ?? undefined,
+            containerRect,
+            viewportWidth: window.innerWidth,
+            viewportHeight: window.innerHeight,
+            placement,
+            offset,
+            matchAnchorWidth,
+        });
+        setPosition((returnData.current.position = newData));
+        setReady((returnData.current.ready = Boolean(contentRef.current &&
+            contentRef.current.getBoundingClientRect().height > 0)));
+    }, [
+        anchorRef,
+        contentRef,
+        containerRef,
+        getContentRect,
+        matchAnchorWidth,
+        offset,
+        placement,
+        positionMode,
+        strategy,
+    ]);
+    useEffect(() => {
+        if (!open) {
+            // 关闭时先挪到屏幕外，避免 keepMounted 的弹窗在旧位置闪一下。
+            setPosition((returnData.current.position = HIDDEN_POSITION));
+            setReady((returnData.current.ready = false));
+            return;
+        }
+        // 打开后等两帧再量尺寸：先让 DOM 挂上去，再让浏览器完成布局。
+        const rafId = requestAnimationFrame(() => requestAnimationFrame(updatePosition));
+        return () => cancelAnimationFrame(rafId);
+    }, [open, updatePosition]);
+    useEffect(() => {
+        if (!open)
+            return;
+        // 页面滚动、外层容器滚动、窗口缩放时，都重新算一次位置。
+        const handleUpdate = () => updatePosition();
+        window.addEventListener("scroll", handleUpdate, true);
+        window.addEventListener("resize", handleUpdate);
+        return () => {
+            window.removeEventListener("scroll", handleUpdate, true);
+            window.removeEventListener("resize", handleUpdate);
+        };
+    }, [open, updatePosition]);
+    const deps = useMemo(() => watchDeps, [watchDeps]);
+    useEffect(() => {
+        if (!open)
+            return;
+        // 外部内容变化时，可以通过 watchDeps 主动触发重新定位。
+        updatePosition();
+    }, [deps, open, updatePosition]);
+    useEffect(() => {
+        if (!open || !contentRef.current)
+            return;
+        // 弹窗打开后内容高度/宽度可能变，尺寸变了就重新定位。
+        let rafId = 0;
+        const observer = new ResizeObserver(() => {
+            rafId = requestAnimationFrame(() => requestAnimationFrame(updatePosition));
+        });
+        observer.observe(contentRef.current);
+        return () => {
+            observer.disconnect();
+            cancelAnimationFrame(rafId);
+        };
+    }, [contentRef, open, updatePosition]);
+    const returnData = useRef({ position, ready, updatePosition });
+    returnData.current.updatePosition = updatePosition;
+    return returnData.current;
+}

package/fe/packages/ui/react/components/hooks/useInputController.d.ts

@@ -0,0 +1,24 @@
+interface IParams<T> {
+    ref: React.ForwardedRef<T>;
+    defaultValue?: string;
+    controlledValue?: string;
+    disabled?: boolean;
+}
+/**
+ * 处理ref & 判断是否受控 & 使用的value & value.length
+ */
+export declare const useInputController: <T>(params: IParams<T>) => {
+    setRefs: (node: T | null) => void;
+    setIsFocused: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setInternalValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    controllerRef: import("react").RefObject<T | null>;
+    isControlledRef: import("react").RefObject<boolean>;
+    isControlled: boolean;
+    isFocused: boolean;
+    currentLength: number;
+    hasValue: boolean;
+    internalValue: string;
+    value: string | undefined;
+};
+export {};
+//# sourceMappingURL=useInputController.d.ts.map

package/fe/packages/ui/react/components/hooks/useInputController.js

@@ -0,0 +1,45 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+/**
+ * 处理ref & 判断是否受控 & 使用的value & value.length
+ */
+export const useInputController = (params) => {
+    const { defaultValue, ref, controlledValue } = params;
+    const [isFocused, setIsFocused] = useState(false);
+    const [internalValue, setInternalValue] = useState(defaultValue || '');
+    const controllerRef = useRef(null);
+    // 合并 refs
+    const setRefs = useCallback((node) => {
+        controllerRef.current = node;
+        if (typeof ref === 'function') {
+            ref(node);
+        }
+        else if (ref) {
+            // eslint-disable-next-line react-hooks/immutability
+            ref.current = node;
+        }
+    }, [ref]);
+    const isControlledRef = useRef(false);
+    // 外部传了value
+    const isControlled = useMemo(() => {
+        const r = controlledValue !== undefined;
+        // 当传入的value改变时，更新ref值
+        isControlledRef.current = r;
+        return r;
+    }, [controlledValue]);
+    const value = isControlled ? controlledValue : internalValue;
+    const hasValue = Boolean(value && String(value).length > 0);
+    const currentLength = value ? String(value).length : 0;
+    return {
+        setRefs,
+        setIsFocused,
+        setInternalValue,
+        controllerRef,
+        isControlledRef,
+        isControlled,
+        isFocused,
+        currentLength,
+        hasValue,
+        internalValue,
+        value,
+    };
+};

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

@@ -0,0 +1,30 @@
+export * from './breadcrumb';
+export * from './Button';
+export * from './Checkbox';
+export * from './ConfirmDialog';
+export * from './DataTable';
+export * from './Drawer';
+export * from './Dropdown';
+export * from './Popup';
+export * from './Form';
+export * from './hooks/useDropdownPositioning';
+export * from './ImagePreview';
+export * from './Input';
+export * from './InputNumber';
+export * from './Label';
+export * from './Menu';
+export * from './Message';
+export * from './Modal';
+export * from './Overlay';
+export * from './Pagination';
+export * from './Search';
+export * from './Select';
+export * from './Skeleton';
+export * from './Switch';
+export * from './table';
+export * from './TableSearch';
+export * from './Textarea';
+export * from './Tooltip';
+export * from './TreeSelect';
+export * from './Upload';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,29 @@
+export * from './breadcrumb';
+export * from './Button';
+export * from './Checkbox';
+export * from './ConfirmDialog';
+export * from './DataTable';
+export * from './Drawer';
+export * from './Dropdown';
+export * from './Popup';
+export * from './Form';
+export * from './hooks/useDropdownPositioning';
+export * from './ImagePreview';
+export * from './Input';
+export * from './InputNumber';
+export * from './Label';
+export * from './Menu';
+export * from './Message';
+export * from './Modal';
+export * from './Overlay';
+export * from './Pagination';
+export * from './Search';
+export * from './Select';
+export * from './Skeleton';
+export * from './Switch';
+export * from './table';
+export * from './TableSearch';
+export * from './Textarea';
+export * from './Tooltip';
+export * from './TreeSelect';
+export * from './Upload';

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

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

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

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

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+type TableFixed = 'left' | 'right';
+type TableFixedCellProps = {
+    fixed?: TableFixed;
+    fixedOffset?: React.CSSProperties['left'];
+    fixedShadow?: boolean;
+    fixedZIndex?: React.CSSProperties['zIndex'];
+};
+declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
+    containerClassName?: string;
+    containerRef?: React.Ref<HTMLDivElement>;
+    onContainerScroll?: React.UIEventHandler<HTMLDivElement>;
+} & React.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & {
+    isAction?: boolean;
+} & TableFixedCellProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & {
+    isAction?: boolean;
+} & TableFixedCellProps & React.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
+export type { TableFixed };
+//# sourceMappingURL=table.d.ts.map

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

@@ -0,0 +1,116 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils';
+import * as React from 'react';
+const fixedShadowClassNames = {
+    left: "data-[fixed-shadow=visible]:after:pointer-events-none data-[fixed-shadow=visible]:after:absolute data-[fixed-shadow=visible]:after:inset-y-0 data-[fixed-shadow=visible]:after:-right-[3px] data-[fixed-shadow=visible]:after:w-[3px] data-[fixed-shadow=visible]:after:bg-gradient-to-r data-[fixed-shadow=visible]:after:from-white/30 data-[fixed-shadow=visible]:after:via-white/8 data-[fixed-shadow=visible]:after:to-transparent data-[fixed-shadow=visible]:after:content-['']",
+    right: "data-[fixed-shadow=visible]:before:pointer-events-none data-[fixed-shadow=visible]:before:absolute data-[fixed-shadow=visible]:before:inset-y-0 data-[fixed-shadow=visible]:before:-left-[3px] data-[fixed-shadow=visible]:before:w-[3px] data-[fixed-shadow=visible]:before:bg-gradient-to-l data-[fixed-shadow=visible]:before:from-white/30 data-[fixed-shadow=visible]:before:via-white/8 data-[fixed-shadow=visible]:before:to-transparent data-[fixed-shadow=visible]:before:content-['']",
+};
+const getFixedCellStyle = ({ fixed, fixedOffset = 0, fixedZIndex = 1, style, }) => {
+    if (!fixed)
+        return style;
+    return {
+        position: 'sticky',
+        [fixed]: fixedOffset,
+        zIndex: fixedZIndex,
+        ...style,
+    };
+};
+const setRef = (ref, value) => {
+    if (typeof ref === 'function') {
+        ref(value);
+        return;
+    }
+    if (ref) {
+        ;
+        ref.current = value;
+    }
+};
+const getFixedPixelOffset = (cell, fixed) => {
+    const fixedOffset = Number.parseFloat(window.getComputedStyle(cell).getPropertyValue(fixed));
+    return Number.isFinite(fixedOffset) ? fixedOffset : 0;
+};
+const isFixedCellActive = (cell, fixed, containerRect) => {
+    const cellRect = cell.getBoundingClientRect();
+    const fixedOffset = getFixedPixelOffset(cell, fixed);
+    if (fixed === 'left') {
+        return cellRect.left <= containerRect.left + fixedOffset + 1;
+    }
+    return cellRect.right >= containerRect.right - fixedOffset - 1;
+};
+const updateFixedSideState = (row, fixed, containerRect, canShow) => {
+    if (!canShow)
+        return;
+    const cells = Array.from(row.querySelectorAll(`[data-tc-table-fixed="${fixed}"][data-tc-table-fixed-shadow="true"]`));
+    const activeCells = cells.filter((cell) => isFixedCellActive(cell, fixed, containerRect));
+    if (activeCells.length === 0)
+        return;
+    activeCells.forEach((cell) => {
+        cell.dataset.fixedActive = 'true';
+    });
+    const shadowCell = activeCells.reduce((current, cell) => {
+        const currentRect = current.getBoundingClientRect();
+        const cellRect = cell.getBoundingClientRect();
+        if (fixed === 'left') {
+            return cellRect.right > currentRect.right ? cell : current;
+        }
+        return cellRect.left < currentRect.left ? cell : current;
+    });
+    shadowCell.dataset.fixedShadow = 'visible';
+};
+const Table = React.forwardRef(({ className, containerClassName, containerRef, onContainerScroll, children, ...props }, ref) => {
+    const internalContainerRef = React.useRef(null);
+    const updateFixedShadowState = React.useCallback(() => {
+        const container = internalContainerRef.current;
+        if (!container)
+            return;
+        const scrollLeft = container.scrollLeft;
+        const maxScrollLeft = container.scrollWidth - container.clientWidth;
+        const containerRect = container.getBoundingClientRect();
+        container.querySelectorAll('[data-fixed-shadow="visible"], [data-fixed-active="true"]').forEach((cell) => {
+            delete cell.dataset.fixedShadow;
+            delete cell.dataset.fixedActive;
+        });
+        container.querySelectorAll('tr').forEach((row) => {
+            updateFixedSideState(row, 'left', containerRect, scrollLeft > 1);
+            updateFixedSideState(row, 'right', containerRect, maxScrollLeft - scrollLeft > 1);
+        });
+    }, []);
+    const handleContainerRef = React.useCallback((node) => {
+        internalContainerRef.current = node;
+        setRef(containerRef, node);
+    }, [containerRef]);
+    const handleContainerScroll = React.useCallback((event) => {
+        updateFixedShadowState();
+        onContainerScroll?.(event);
+    }, [onContainerScroll, updateFixedShadowState]);
+    React.useLayoutEffect(() => {
+        updateFixedShadowState();
+        const container = internalContainerRef.current;
+        if (!container || typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(updateFixedShadowState);
+        observer.observe(container);
+        return () => observer.disconnect();
+    }, [children, updateFixedShadowState]);
+    return (_jsx("div", { ref: handleContainerRef, onScroll: handleContainerScroll, className: cn('tc-ui-table relative w-full overflow-auto rounded-[20px]', containerClassName), children: _jsx("table", { ref: ref, className: cn('w-full caption-bottom text-sm', className), ...props, children: children }) }));
+});
+Table.displayName = 'Table';
+const TableHeader = React.forwardRef(({ className, ...props }, ref) => _jsx("thead", { ref: ref, className: cn('tc-ui-table-header bg-table-header', className), ...props }));
+TableHeader.displayName = 'TableHeader';
+const TableBody = React.forwardRef(({ className, ...props }, ref) => (_jsx("tbody", { ref: ref, className: cn('tc-ui-table-body [&_tr:last-child]:border-0', className), ...props })));
+TableBody.displayName = 'TableBody';
+const TableFooter = React.forwardRef(({ className, ...props }, ref) => (_jsx("tfoot", { ref: ref, className: cn('tc-ui-table-footer border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className), ...props })));
+TableFooter.displayName = 'TableFooter';
+const TableRow = React.forwardRef(({ className, ...props }, ref) => (_jsx("tr", { ref: ref, className: cn('tc-ui-table-row border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', className), ...props })));
+TableRow.displayName = 'TableRow';
+const TableHead = React.forwardRef(({ className, isAction, fixed, fixedOffset, fixedShadow = true, fixedZIndex = 10, style, ...props }, ref) => {
+    return (_jsx("th", { ref: ref, "data-tc-table-fixed": fixed, "data-tc-table-fixed-shadow": fixed && fixedShadow ? 'true' : undefined, className: cn('tc-ui-table-head h-12 px-4 text-left align-middle text-xs font-normal', 'text-table-head-text', isAction && 'bg-table-header text-table-head-text w-[96px] text-center', fixed && 'data-[fixed-active=true]:bg-table-header', fixed && fixedShadow && fixedShadowClassNames[fixed], className), style: getFixedCellStyle({ fixed, fixedOffset, fixedZIndex, style }), ...props }));
+});
+TableHead.displayName = 'TableHead';
+const TableCell = React.forwardRef(({ className, isAction, fixed, fixedOffset, fixedShadow = true, fixedZIndex = 1, style, ...props }, ref) => {
+    return (_jsx("td", { ref: ref, "data-tc-table-fixed": fixed, "data-tc-table-fixed-shadow": fixed && fixedShadow ? 'true' : undefined, className: cn('tc-ui-table-cell p-4 align-middle text-sm font-normal', 'text-table-cell-text', isAction && 'text-table-action-text w-[96px] text-center', isAction && !fixed && 'bg-background', fixed && 'data-[fixed-active=true]:bg-background', fixed && fixedShadow && fixedShadowClassNames[fixed], className), style: getFixedCellStyle({ fixed, fixedOffset, fixedZIndex, style }), ...props }));
+});
+TableCell.displayName = 'TableCell';
+const TableCaption = React.forwardRef(({ className, ...props }, ref) => (_jsx("caption", { ref: ref, className: cn('tc-ui-table-caption mt-4 text-sm text-muted-foreground', className), ...props })));
+TableCaption.displayName = 'TableCaption';
+export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };

package/fe/packages/ui/react/components/testPage/MenuTestPage.d.ts

@@ -0,0 +1,2 @@
+export default function MenuTestPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MenuTestPage.d.ts.map