@lark-apaas/client-toolkit 0.1.0-alpha.1

package/lib/components/User/UserSelect.css

@@ -0,0 +1,11 @@
+.user-select-container .ant-select-selection-item {
+  height: unset !important;
+  border-radius: 50px !important;
+  padding: 1px 8px 1px 1px !important;
+}
+
+.user-select-container .ant-select-focused .ant-select-selector {
+  box-shadow: none !important;
+  border-color: #1456f0 !important;
+}
+

package/lib/components/User/UserSelect.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { IUserProfile } from '../../apis/udt-types';
+import './UserSelect.css';
+export interface UserSelectProps {
+    value?: IUserProfile | IUserProfile[];
+    onChange?: (value: IUserProfile | IUserProfile[]) => void;
+    defaultValue?: IUserProfile | IUserProfile[];
+    mode?: 'single' | 'multiple';
+    placeholder?: string;
+}
+export declare const UserSelect: React.FC<UserSelectProps>;

package/lib/components/User/UserSelect.js

@@ -0,0 +1,172 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from "react";
+import { Avatar, Select, Spin } from "antd";
+import { LoaderCircle } from "lucide-react";
+import { debounce } from "lodash";
+import { getDataloom } from "../../integrations/dataloom.js";
+import "./UserSelect.css";
+import { UserWithAvatar } from "./UserWithAvatar.js";
+const mapValueToOptions = (value)=>{
+    if (!value) return [];
+    const unifiedValue = Array.isArray(value) ? value : [
+        value
+    ];
+    return unifiedValue.map((user)=>({
+            value: user.user_id,
+            label: /*#__PURE__*/ jsx(UserWithAvatar, {
+                data: user,
+                mode: "plain",
+                className: "p-[1px] pr-0"
+            }),
+            avatar: user.avatar,
+            name: user.name,
+            rawValue: user
+        }));
+};
+const mapValueToSelectValue = (value)=>{
+    if (!value) return;
+    if (Array.isArray(value)) return value.map((user)=>({
+            value: user.user_id,
+            label: /*#__PURE__*/ jsx(UserWithAvatar, {
+                data: user,
+                mode: "plain",
+                className: "p-[1px] pr-0"
+            }),
+            avatar: user.avatar,
+            name: user.name,
+            rawValue: user
+        }));
+    return {
+        value: value.user_id,
+        label: /*#__PURE__*/ jsx(UserWithAvatar, {
+            data: value,
+            mode: "plain",
+            className: "p-[1px] pr-0"
+        }),
+        avatar: value.avatar,
+        name: value.name,
+        rawValue: value
+    };
+};
+const UserSelect = ({ mode = 'single', defaultValue, value, onChange, placeholder })=>{
+    const defaultOptions = useMemo(()=>mapValueToOptions(defaultValue), [
+        defaultValue
+    ]);
+    const [options, setOptions] = useState(defaultOptions);
+    const [fetching, setFetching] = useState(false);
+    const fetchRef = useRef(0);
+    const fetchUsers = async (search)=>{
+        try {
+            const dataloom = await getDataloom();
+            const { data } = await dataloom.service.user.search({
+                name: search,
+                pageSize: 20
+            });
+            if (!data || !Array.isArray(data.user_list)) return [];
+            return data.user_list.map((user)=>({
+                    avatar: user.avatar,
+                    email: user.email,
+                    name: user.name,
+                    user_id: user.user_id,
+                    status: user.status
+                }));
+        } catch (error) {
+            console.error('Failed to fetch users:', error);
+            return [];
+        }
+    };
+    const debounceFetcher = useMemo(()=>{
+        const loadOptions = (value)=>{
+            if (!value) return;
+            fetchRef.current += 1;
+            const fetchId = fetchRef.current;
+            setOptions([]);
+            setFetching(true);
+            fetchUsers(value).then((newOptions)=>{
+                if (fetchId !== fetchRef.current) return;
+                setOptions(newOptions.map((v)=>({
+                        value: v.user_id,
+                        label: /*#__PURE__*/ jsx(UserWithAvatar, {
+                            data: v,
+                            mode: "plain",
+                            className: "p-[1px] pr-0"
+                        }),
+                        avatar: v.avatar,
+                        name: v.name,
+                        rawValue: v
+                    })));
+                setFetching(false);
+            });
+        };
+        return debounce(loadOptions, 500);
+    }, []);
+    const optionRender = (option)=>{
+        const user = option.data;
+        return /*#__PURE__*/ jsxs("div", {
+            className: "flex items-center gap-2",
+            children: [
+                /*#__PURE__*/ jsx(Avatar, {
+                    src: user.avatar,
+                    size: "small",
+                    className: "shrink-0 !border-0"
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: "text-sm",
+                    children: user.name
+                })
+            ]
+        });
+    };
+    const selectMode = 'multiple' === mode ? 'multiple' : void 0;
+    return /*#__PURE__*/ jsx("div", {
+        className: "user-select-container",
+        children: /*#__PURE__*/ jsx(Select, {
+            labelInValue: true,
+            showSearch: true,
+            className: "w-full",
+            maxTagCount: "responsive",
+            defaultValue: defaultOptions,
+            mode: selectMode,
+            filterOption: false,
+            onSearch: debounceFetcher,
+            allowClear: true,
+            placeholder: placeholder,
+            notFoundContent: fetching ? /*#__PURE__*/ jsx("div", {
+                className: "flex items-center justify-center",
+                children: /*#__PURE__*/ jsx(Spin, {
+                    size: "small",
+                    indicator: /*#__PURE__*/ jsx(LoaderCircle, {
+                        className: "!text-[16px] animate-spin"
+                    })
+                })
+            }) : /*#__PURE__*/ jsx("span", {
+                className: "py-[1px] px-1 text-[#8F959E]",
+                children: "无结果，建议更换搜索词"
+            }),
+            optionRender: optionRender,
+            options: options,
+            dropdownStyle: {
+                boxShadow: '0px 8px 24px 8px rgba(31, 35, 41, 0.04), 0px 6px 12px 0px rgba(31, 35, 41, 0.04), 0px 4px 8px -8px rgba(31, 35, 41, 0.06)',
+                padding: '3px'
+            },
+            value: mapValueToSelectValue(value),
+            maxTagPlaceholder: (omittedValues)=>/*#__PURE__*/ jsxs("span", {
+                    className: "pl-2",
+                    children: [
+                        "+ ",
+                        omittedValues.length
+                    ]
+                }),
+            onChange: onChange ? (_, options)=>{
+                if (Array.isArray(options)) {
+                    const selectedUsers = options.map((opt)=>opt.rawValue);
+                    onChange(selectedUsers);
+                } else {
+                    const selectedUser = options?.rawValue;
+                    if (selectedUser) onChange(selectedUser);
+                }
+            } : void 0
+        })
+    });
+};
+export { UserSelect };

package/lib/components/User/UserWithAvatar.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { UserWithAvatarProps } from './type';
+export declare function UserWithAvatar({ data, size, mode, className, }: UserWithAvatarProps): React.JSX.Element;

package/lib/components/User/UserWithAvatar.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Avatar, Typography } from "antd";
+import { clsxWithTw } from "../../utils/utils.js";
+const avatarSizeMap = {
+    small: 16,
+    medium: 20,
+    large: 24
+};
+const textVariantMap = {
+    small: 'text-[12px] leading-[16px]',
+    medium: 'text-[14px] leading-[20px]',
+    large: 'text-[16px] leading-[24px]'
+};
+function UserWithAvatar({ data, size = 'medium', mode = 'tag', className }) {
+    const { avatar, name } = data;
+    const displayName = name || '无效人员';
+    return /*#__PURE__*/ jsxs("div", {
+        className: clsxWithTw('flex items-center gap-1 rounded-full', {
+            'bg-[rgba(31,35,41,0.1)]': 'tag' === mode,
+            'py-0.5 pl-0.5 pr-1.5 max-w-[148px]': 'small' === size,
+            'py-0.5 pl-0.5 pr-2 max-w-[172px]': 'medium' === size,
+            'py-1 pl-1 pr-2.5 max-w-[196px]': 'large' === size
+        }, className),
+        children: [
+            /*#__PURE__*/ jsx(Avatar, {
+                src: avatar,
+                size: avatarSizeMap[size],
+                className: "shrink-0 border-0"
+            }),
+            /*#__PURE__*/ jsx(Typography.Text, {
+                ellipsis: {
+                    tooltip: displayName
+                },
+                className: textVariantMap[size],
+                children: displayName
+            })
+        ]
+    });
+}
+export { UserWithAvatar };

package/lib/components/User/index.d.ts

@@ -0,0 +1,7 @@
+export { UserSelect } from './UserSelect';
+export type { UserSelectProps } from './UserSelect';
+export { UserDisplay } from './UserDisplay';
+export type { UserDisplayProps } from './UserDisplay';
+export { UserWithAvatar } from './UserWithAvatar';
+export type { UserWithAvatarProps } from './type';
+export { UserProfile } from './UserProfile';

package/lib/components/User/index.js

@@ -0,0 +1,5 @@
+import { UserSelect } from "./UserSelect.js";
+import { UserDisplay } from "./UserDisplay.js";
+import { UserWithAvatar } from "./UserWithAvatar.js";
+import { UserProfile } from "./UserProfile/index.js";
+export { UserDisplay, UserProfile, UserSelect, UserWithAvatar };

package/lib/components/User/type.d.ts

@@ -0,0 +1,13 @@
+import { IUserProfile } from '../../apis/udt-types';
+export interface UserWithAvatarProps {
+    data: IUserProfile;
+    /**
+     * @default medium
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * @default tag
+     */
+    mode?: 'tag' | 'plain';
+    className?: string;
+}

package/lib/components/Welcome/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Welcome: React.FC;
+export default Welcome;

package/lib/components/Welcome/index.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const Welcome = ()=>/*#__PURE__*/ jsxs("div", {
+        className: "min-h-screen min-w-screen flex flex-col items-center justify-center",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "text-xl font-bold leading-8 mb-2",
+                children: "初始化应用"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "leading-5",
+                children: "通过对话搭建你的专属应用"
+            })
+        ]
+    });
+const components_Welcome = Welcome;
+export { components_Welcome as default };

package/lib/components/common/LogoInfo.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export default function LogoInfo({ className, logoClassName, }: {
+    className?: string;
+    logoClassName?: string;
+}): React.JSX.Element;

package/lib/components/common/LogoInfo.js

@@ -0,0 +1,30 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Link } from "react-router-dom";
+import { useAppInfo } from "../../hooks/useAppInfo.js";
+import { clsxWithTw } from "../../utils/utils.js";
+function LogoInfo({ className, logoClassName }) {
+    const { name, avatar } = useAppInfo();
+    return /*#__PURE__*/ jsx("div", {
+        className: clsxWithTw('overflow-hidden text-ellipsis whitespace-nowrap', className),
+        children: /*#__PURE__*/ jsxs(Link, {
+            to: "/",
+            className: "text-inherit flex items-center gap-2 w-full",
+            children: [
+                avatar ? /*#__PURE__*/ jsx("img", {
+                    src: avatar,
+                    alt: name,
+                    className: clsxWithTw('h-7 w-7', logoClassName)
+                }) : null,
+                /*#__PURE__*/ jsxs("span", {
+                    className: "w-full truncate",
+                    children: [
+                        name || '新应用',
+                        " "
+                    ]
+                })
+            ]
+        })
+    });
+}
+export { LogoInfo as default };

package/lib/components/common/NavItem.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export interface NavItemProps {
+    name: string;
+    to: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+    children?: NavItemProps[];
+    className?: string;
+    hasBadge?: boolean;
+    direction?: 'horizontal' | 'vertical';
+    onClick?: () => void;
+    hideActive?: boolean;
+    forceActive?: boolean;
+}
+export declare const NavItem: React.ForwardRefExoticComponent<NavItemProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const MoreNavItem: React.FC<{
+    expandedNavItemsPath: string[];
+    isExpanded: boolean;
+} & Omit<NavItemProps, 'icon' | 'to'>>;

package/lib/components/common/NavItem.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import react, { forwardRef, useCallback, useEffect, useMemo, useState } from "react";
+import { NavLink, matchPath, useLocation } from "react-router-dom";
+import { Button } from "antd";
+import { clsxWithTw } from "../../utils/utils.js";
+import { MoreHorizontal } from "lucide-react";
+const HashLink = /*#__PURE__*/ forwardRef(({ className, to, name, icon, onClick, direction, hideActive = false }, _ref)=>{
+    const [isActive, setIsActive] = useState(false);
+    useEffect(()=>{
+        const checkHash = ()=>{
+            setIsActive(window.location.hash === to);
+        };
+        checkHash();
+        window.addEventListener('hashchange', checkHash);
+        return ()=>window.removeEventListener('hashchange', checkHash);
+    }, [
+        to
+    ]);
+    const iconNode = icon ? /*#__PURE__*/ react.createElement(icon, {
+        className: 'w-6 h-6'
+    }) : null;
+    return /*#__PURE__*/ jsxs(Button, {
+        variant: "link",
+        href: to,
+        onClick: ()=>{
+            setIsActive(true);
+            onClick?.();
+        },
+        color: isActive && !hideActive ? 'primary' : 'default',
+        className: clsxWithTw('miao-nav p-0 b-0 h-full w-full', 'transition-colors inline-flex gap-1 items-center overflow-hidden', {
+            'flex-col': 'vertical' === direction,
+            'w-full': 'vertical' === direction,
+            'justify-center': 'horizontal' === direction,
+            'text-inherit': !isActive
+        }, className),
+        children: [
+            iconNode,
+            name ? /*#__PURE__*/ jsx("span", {
+                className: clsxWithTw('truncate w-full', {
+                    'text-center': 'vertical' === direction
+                }),
+                children: name
+            }) : null
+        ]
+    });
+});
+HashLink.displayName = 'HashLink';
+const NavItem = /*#__PURE__*/ react.forwardRef((props, ref)=>{
+    const isHashLink = props.to.startsWith('#');
+    if (isHashLink) return /*#__PURE__*/ jsx(HashLink, {
+        ref: ref,
+        ...props
+    });
+    return /*#__PURE__*/ jsx(NavLink, {
+        ref: ref,
+        to: props.to,
+        end: true,
+        onClick: props.onClick,
+        className: ()=>clsxWithTw('inline-flex justify-center'),
+        children: ({ isActive: linkIsActive })=>/*#__PURE__*/ jsxs(Button, {
+                variant: "link",
+                color: linkIsActive && !props.hideActive || props.forceActive ? 'primary' : 'default',
+                className: clsxWithTw('miao-nav p-0 b-0 h-full w-full', 'transition-colors inline-flex gap-1 items-center overflow-hidden', {
+                    'flex-col': 'vertical' === props.direction,
+                    'justify-center': 'horizontal' === props.direction,
+                    'text-inherit': !(linkIsActive && !props.hideActive || props.forceActive)
+                }, props.className),
+                children: [
+                    props.icon ? /*#__PURE__*/ jsx(props.icon, {
+                        className: "w-6 h-6"
+                    }) : null,
+                    props.name ? /*#__PURE__*/ jsx("span", {
+                        className: clsxWithTw('truncate w-full', {
+                            ' text-center': 'vertical' === props.direction
+                        }),
+                        children: props.name
+                    }) : null
+                ]
+            })
+    });
+});
+NavItem.displayName = 'NavItem';
+const MoreNavItem = ({ expandedNavItemsPath, onClick, isExpanded, name = '更多', ...restProps })=>{
+    const { pathname } = useLocation();
+    const isActive = useMemo(()=>{
+        const matched = expandedNavItemsPath.some((path)=>{
+            const match = matchPath(path, pathname);
+            return match && match.pathname === pathname;
+        });
+        return matched;
+    }, [
+        expandedNavItemsPath,
+        pathname
+    ]);
+    const handleClick = useCallback((e)=>{
+        e.preventDefault();
+        onClick?.();
+    }, [
+        onClick
+    ]);
+    return /*#__PURE__*/ jsx(NavItem, {
+        icon: MoreHorizontal,
+        name: name,
+        to: "",
+        hideActive: !isActive,
+        forceActive: isExpanded || isActive,
+        onClick: handleClick,
+        ...restProps
+    });
+};
+MoreNavItem.displayName = 'MoreNavItem';
+export { MoreNavItem, NavItem };

package/lib/components/common/NavMenu.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BaseNavProps } from '../../types';
+type NavMenuProps = BaseNavProps & {
+    mode?: 'horizontal' | 'vertical';
+    iconClassName?: string;
+    onClick?: (key: string) => void;
+};
+export default function NavMenu({ navList, className, iconClassName, mode, onClick, }: NavMenuProps): React.JSX.Element;
+export {};

package/lib/components/common/NavMenu.js

@@ -0,0 +1,50 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu } from "antd";
+import react, { useEffect, useMemo, useState } from "react";
+import { NavLink, useLocation } from "react-router-dom";
+import { clsxWithTw } from "../../utils/utils.js";
+function NavMenu({ navList, className, iconClassName = '', mode = 'horizontal', onClick }) {
+    const location = useLocation();
+    const [currentMenu, setCurrentMenu] = useState(location.pathname);
+    useEffect(()=>{
+        setCurrentMenu(location.pathname);
+    }, [
+        location
+    ]);
+    const menuItems = useMemo(()=>navList?.map((n)=>({
+                label: /*#__PURE__*/ jsxs(NavLink, {
+                    to: n.to,
+                    end: true,
+                    className: ({ isActive })=>clsxWithTw('flex items-center', {
+                            'text-[var(--ant-menu-horizontal-item-selected-color)]': isActive
+                        }),
+                    children: [
+                        n.icon ? /*#__PURE__*/ react.createElement(n.icon, {
+                            className: clsxWithTw('w-4 h-4', iconClassName)
+                        }) : null,
+                        /*#__PURE__*/ jsx("span", {
+                            children: n.name
+                        })
+                    ]
+                }),
+                key: n.to
+            })), [
+        navList
+    ]);
+    return /*#__PURE__*/ jsx(Menu, {
+        className: clsxWithTw('bg-inherit h-full', className),
+        items: menuItems,
+        selectedKeys: [
+            currentMenu
+        ],
+        onClick: (info)=>{
+            setCurrentMenu(info.key);
+            onClick?.(info.key);
+        },
+        mode: mode,
+        style: {
+            borderBottomWidth: 0
+        }
+    });
+}
+export { NavMenu as default };

package/lib/components/common/UserAvatarLayout.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export default function UserAvatarLayout({ className, }: {
+    className?: string;
+}): React.JSX.Element;

package/lib/components/common/UserAvatarLayout.js

@@ -0,0 +1,41 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Button } from "antd";
+import { LogOut } from "lucide-react";
+import { useCurrentUserProfile, useLogout } from "../../hooks/index.js";
+import { clsxWithTw } from "../../utils/utils.js";
+function UserAvatarLayout({ className }) {
+    const { name, avatar } = useCurrentUserProfile();
+    const { handlerLogout } = useLogout();
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: name ? /*#__PURE__*/ jsx("div", {
+            className: clsxWithTw('py-4 px-5 border-gray-200 border-t', className),
+            children: /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center justify-between",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2 overflow-hidden text-ellipsis whitespace-nowrap",
+                        children: [
+                            avatar ? /*#__PURE__*/ jsx("img", {
+                                src: avatar,
+                                alt: name,
+                                className: "h-8 w-8 rounded-full"
+                            }) : null,
+                            /*#__PURE__*/ jsx("span", {
+                                className: "text-sm font-medium truncate",
+                                children: name
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Button, {
+                        type: "text",
+                        className: "text-inherit",
+                        icon: /*#__PURE__*/ jsx(LogOut, {}),
+                        onClick: handlerLogout
+                    })
+                ]
+            })
+        }) : null
+    });
+}
+export { UserAvatarLayout as default };

package/lib/components/common/UserAvatarMenu.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export default function UserAvatarMenu({ className }: {
+    className?: string;
+}): React.JSX.Element;

package/lib/components/common/UserAvatarMenu.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+import { Avatar, Dropdown, Menu } from "antd";
+import { LogOut } from "lucide-react";
+import { useCurrentUserProfile, useLogout } from "../../hooks/index.js";
+import { clsxWithTw } from "../../utils/utils.js";
+function UserAvatarMenu({ className }) {
+    const { name, avatar } = useCurrentUserProfile();
+    const { handlerLogout } = useLogout();
+    if (!name) return null;
+    return /*#__PURE__*/ jsx(Dropdown, {
+        placement: "bottomRight",
+        overlay: /*#__PURE__*/ jsxs(Menu, {
+            className: clsxWithTw('min-w-48', className),
+            children: [
+                /*#__PURE__*/ jsx(Menu.Item, {
+                    children: /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Avatar, {
+                                src: avatar,
+                                className: "w-10 h-10"
+                            }),
+                            /*#__PURE__*/ jsx("span", {
+                                className: "flex-1 text-ellipsis overflow-hidden whitespace-nowrap max-w-[120px]",
+                                children: name
+                            })
+                        ]
+                    })
+                }, "user-info"),
+                /*#__PURE__*/ jsx(Menu.Divider, {}),
+                /*#__PURE__*/ jsx(Menu.Item, {
+                    onClick: handlerLogout,
+                    children: /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ jsx(LogOut, {}),
+                            /*#__PURE__*/ jsx("span", {
+                                children: "退出登录"
+                            })
+                        ]
+                    })
+                }, "logout")
+            ]
+        }),
+        trigger: [
+            'click'
+        ],
+        children: /*#__PURE__*/ jsx("div", {
+            className: "cursor-pointer py-3 flex items-center justify-center",
+            children: /*#__PURE__*/ jsx(Avatar, {
+                src: avatar,
+                className: "w-8 h-8"
+            })
+        })
+    });
+}
+export { UserAvatarMenu as default };

package/lib/components/common/index.d.ts

@@ -0,0 +1,9 @@
+export { default as UserAvatarMenu } from './UserAvatarMenu';
+export { default as UserAvatarLayout } from './UserAvatarLayout';
+export { default as NavMenu } from './NavMenu';
+export { default as LogoInfo } from './LogoInfo';
+export * from './NavItem';
+export declare const TopHeaderThemeClass = "bg-white text-gray-900 border-gray-200 dark:bg-neutral-50 dark:text-white dark:border-gray-700 border-b";
+export declare const DropdownThemeClass = "bg-white text-gray-900 border-gray-200 dark:bg-neutral-50 dark:text-white dark:border-gray-700 border-b";
+export declare const BottomBarThemeClass = "bg-white dark:bg-gray-800 text-[#646A73] dark:text-gray-300";
+export declare const MaskThemeClass = "bg-black/55";

package/lib/components/common/index.js

@@ -0,0 +1,10 @@
+import UserAvatarMenu from "./UserAvatarMenu.js";
+import UserAvatarLayout from "./UserAvatarLayout.js";
+import NavMenu from "./NavMenu.js";
+import LogoInfo from "./LogoInfo.js";
+export * from "./NavItem.js";
+const TopHeaderThemeClass = 'bg-white text-gray-900 border-gray-200 dark:bg-neutral-50 dark:text-white dark:border-gray-700 border-b';
+const DropdownThemeClass = TopHeaderThemeClass;
+const BottomBarThemeClass = 'bg-white dark:bg-gray-800 text-[#646A73] dark:text-gray-300';
+const MaskThemeClass = 'bg-black/55';
+export { BottomBarThemeClass, DropdownThemeClass, LogoInfo, MaskThemeClass, NavMenu, TopHeaderThemeClass, UserAvatarLayout, UserAvatarMenu };