@lark-apaas/miaoda-core 0.1.0-alpha.1

package/lib/components/AppContainer/IframeBridge.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function IframeBridge(): React.JSX.Element;

package/lib/components/AppContainer/IframeBridge.js

@@ -0,0 +1,80 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import { getPreviewParentOrigin } from "../../utils/getParentOrigin.js";
+import { useUpdatingRef } from "../../hooks/useUpdatingRef.js";
+var IframeBridge_MessageType = /*#__PURE__*/ function(MessageType) {
+    MessageType["RouteChange"] = "RouteChange";
+    MessageType["RouteBack"] = "RouteBack";
+    MessageType["RouteForward"] = "RouteForward";
+    return MessageType;
+}(IframeBridge_MessageType || {});
+function isMessageType(type) {
+    return Object.values(IframeBridge_MessageType).includes(type);
+}
+function IframeBridge() {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const navigateRef = useUpdatingRef(navigate);
+    const isActive = useRef(false);
+    const historyBack = useCallback(()=>{
+        navigateRef.current(-1);
+        isActive.current = true;
+    }, [
+        navigateRef
+    ]);
+    const historyForward = useCallback(()=>{
+        navigateRef.current(1);
+        isActive.current = true;
+    }, [
+        navigateRef
+    ]);
+    const operatorMessage = useMemo(()=>({
+            ["RouteBack"]: historyBack,
+            ["RouteForward"]: historyForward,
+            ["RouteChange"]: navigateRef.current
+        }), [
+        historyBack,
+        historyForward,
+        navigateRef
+    ]);
+    useEffect(()=>{
+        window.parent.postMessage({
+            type: 'PreviewReady'
+        }, getPreviewParentOrigin());
+    }, []);
+    useEffect(()=>{
+        if (isActive.current) {
+            isActive.current = false;
+            return;
+        }
+        window.parent.postMessage({
+            type: 'ChildLocationChange',
+            data: location
+        }, getPreviewParentOrigin());
+    }, [
+        location
+    ]);
+    const handleMessage = useCallback((event)=>{
+        const { data: { data } } = event;
+        const type = data?.type;
+        if (!isMessageType(type)) return;
+        operatorMessage[type](data?.data);
+    }, [
+        operatorMessage
+    ]);
+    useEffect(()=>{
+        window.addEventListener('message', handleMessage);
+        return ()=>{
+            window.removeEventListener('message', handleMessage);
+        };
+    }, [
+        handleMessage
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        style: {
+            display: 'none'
+        }
+    });
+}
+export { IframeBridge as default };

package/lib/components/AppContainer/PageHoc.d.ts

@@ -0,0 +1,4 @@
+import React, { ReactNode } from 'react';
+export declare function PageHoc(props: {
+    children: ReactNode;
+}): React.JSX.Element;

package/lib/components/AppContainer/PageHoc.js

@@ -0,0 +1,20 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import html2canvas_pro from "html2canvas-pro";
+import { getPreviewParentOrigin } from "../../utils/getParentOrigin.js";
+function PageHoc(props) {
+    const { children } = props;
+    useEffect(()=>{
+        if ('production' !== process.env.NODE_ENV) html2canvas_pro(document.body).then((canvas)=>{
+            const base64 = canvas.toDataURL('image/png');
+            window.parent.postMessage({
+                type: 'PageScreenshot',
+                data: base64
+            }, getPreviewParentOrigin());
+        });
+    }, []);
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: children
+    });
+}
+export { PageHoc };

package/lib/components/AppContainer/dayjsPlugins.d.ts

@@ -0,0 +1 @@
+export declare function registerDayjsPlugins(): void;

package/lib/components/AppContainer/dayjsPlugins.js

@@ -0,0 +1,69 @@
+import dayjs from "dayjs";
+import advancedFormat from "dayjs/plugin/advancedFormat";
+import arraySupport from "dayjs/plugin/arraySupport";
+import calendar from "dayjs/plugin/calendar";
+import customParseFormat from "dayjs/plugin/customParseFormat";
+import dayOfYear from "dayjs/plugin/dayOfYear";
+import duration from "dayjs/plugin/duration";
+import isBetween from "dayjs/plugin/isBetween";
+import isLeapYear from "dayjs/plugin/isLeapYear";
+import isMoment from "dayjs/plugin/isMoment";
+import isSameOrAfter from "dayjs/plugin/isSameOrAfter";
+import isSameOrBefore from "dayjs/plugin/isSameOrBefore";
+import isToday from "dayjs/plugin/isToday";
+import isTomorrow from "dayjs/plugin/isTomorrow";
+import isYesterday from "dayjs/plugin/isYesterday";
+import isoWeek from "dayjs/plugin/isoWeek";
+import isoWeeksInYear from "dayjs/plugin/isoWeeksInYear";
+import localeData from "dayjs/plugin/localeData";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import minMax from "dayjs/plugin/minMax";
+import negativeYear from "dayjs/plugin/negativeYear";
+import objectSupport from "dayjs/plugin/objectSupport";
+import pluralGetSet from "dayjs/plugin/pluralGetSet";
+import preParsePostFormat from "dayjs/plugin/preParsePostFormat";
+import quarterOfYear from "dayjs/plugin/quarterOfYear";
+import relativeTime from "dayjs/plugin/relativeTime";
+import toArray from "dayjs/plugin/toArray";
+import toObject from "dayjs/plugin/toObject";
+import updateLocale from "dayjs/plugin/updateLocale";
+import weekOfYear from "dayjs/plugin/weekOfYear";
+import weekYear from "dayjs/plugin/weekYear";
+import weekday from "dayjs/plugin/weekday";
+let isRegistered = false;
+function registerDayjsPlugins() {
+    if (isRegistered) return;
+    isRegistered = true;
+    dayjs.extend(advancedFormat);
+    dayjs.extend(arraySupport);
+    dayjs.extend(calendar);
+    dayjs.extend(customParseFormat);
+    dayjs.extend(dayOfYear);
+    dayjs.extend(duration);
+    dayjs.extend(isBetween);
+    dayjs.extend(isLeapYear);
+    dayjs.extend(isMoment);
+    dayjs.extend(isSameOrAfter);
+    dayjs.extend(isSameOrBefore);
+    dayjs.extend(isToday);
+    dayjs.extend(isTomorrow);
+    dayjs.extend(isYesterday);
+    dayjs.extend(isoWeek);
+    dayjs.extend(isoWeeksInYear);
+    dayjs.extend(localeData);
+    dayjs.extend(localizedFormat);
+    dayjs.extend(minMax);
+    dayjs.extend(negativeYear);
+    dayjs.extend(objectSupport);
+    dayjs.extend(pluralGetSet);
+    dayjs.extend(preParsePostFormat);
+    dayjs.extend(quarterOfYear);
+    dayjs.extend(relativeTime);
+    dayjs.extend(toArray);
+    dayjs.extend(toObject);
+    dayjs.extend(updateLocale);
+    dayjs.extend(weekOfYear);
+    dayjs.extend(weekYear);
+    dayjs.extend(weekday);
+}
+export { registerDayjsPlugins };

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { IBaseThemeProviderProps } from '../theme';
+import '../../index.css';
+declare const AppContainer: React.FC<{
+    children: React.ReactNode;
+} & IBaseThemeProviderProps>;
+export default AppContainer;

package/lib/components/AppContainer/index.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { StyleProvider } from "@ant-design/cssinjs";
+import { MiaodaInspector } from "@lark-apaas/miaoda-inspector";
+import IframeBridge from "./IframeBridge.js";
+import { defaultUIConfig } from "../theme/ui-config.js";
+import { Toaster } from "./sonner.js";
+import { PageHoc } from "./PageHoc.js";
+import { ThemeProvider, findValueByPixel, generateTailwindRadiusToken, themeColorTokenMap, themeMetaOptions } from "../theme/index.js";
+import { registerDayjsPlugins } from "./dayjsPlugins.js";
+import "../../index.css";
+registerDayjsPlugins();
+const isMiaodaPreview = window.IS_MIAODA_PREVIEW;
+const App = (props)=>{
+    const { themeMeta = {} } = props;
+    const { rem } = findValueByPixel(`${themeMeta.borderRadius}`, themeMetaOptions.themeRadius) || {
+        rem: '0.625'
+    };
+    const radiusToken = generateTailwindRadiusToken(Number(rem));
+    const themeToken = {
+        ...defaultUIConfig,
+        common: {
+            ...defaultUIConfig.common,
+            borderRadius: radiusToken
+        }
+    };
+    useEffect(()=>{
+        if (isMiaodaPreview) fetch(`${location.origin}/ai/api/feida_preview/csrf`).then(()=>{
+            setTimeout(()=>{
+                const match = document.cookie.match(/lgw_csrf_token=([^;]+)/);
+                if (match) window.lgw_csrf_token = match[1];
+            }, 300);
+        });
+    }, []);
+    return /*#__PURE__*/ jsxs(StyleProvider, {
+        layer: true,
+        children: [
+            /*#__PURE__*/ jsx(Toaster, {}),
+            'production' !== process.env.NODE_ENV && /*#__PURE__*/ jsx(MiaodaInspector, {
+                theme: {
+                    themeMetaOptions: themeMetaOptions,
+                    themeColorTokenMap: themeColorTokenMap,
+                    themeToken
+                },
+                cwd: process.env.CWD || ''
+            }),
+            'production' !== process.env.NODE_ENV && /*#__PURE__*/ jsx(IframeBridge, {}),
+            /*#__PURE__*/ jsx(PageHoc, {
+                children: props.children
+            })
+        ]
+    });
+};
+const AppContainer = (props)=>{
+    const { children, ...rest } = props;
+    return /*#__PURE__*/ jsx(ThemeProvider, {
+        ...rest,
+        children: /*#__PURE__*/ jsx(App, {
+            themeMeta: props.themeMeta,
+            children: children
+        })
+    });
+};
+const components_AppContainer = AppContainer;
+export { components_AppContainer as default };

package/lib/components/AppContainer/sonner.css

@@ -0,0 +1,101 @@
+:root {
+  --ud-normal-bg: #fff;
+  --ud-normal-border: #dee0e3;
+  --ud-normal-text: #1f2329;
+  --ud-success-bg: #e4fae1;
+  --ud-success-border: #32a645;
+  --ud-success-text: #1f2329;
+  --ud-info-bg: #f0f4ff;
+  --ud-info-border: #1456f0;
+  --ud-info-text: #1f2329;
+  --ud-warning-bg: #fff3e5;
+  --ud-warning-border: #ed6d0c;
+  --ud-warning-text: #1f2329;
+  --ud-error-bg: #fef0f0;
+  --ud-error-border: #f54a45;
+  --ud-error-text: #1f2329;
+}
+
+[data-sonner-toast][data-styled="true"] [data-button] {
+  background: var(--ud-info-border);
+}
+
+[data-sonner-toaster][data-sonner-theme="dark"] [data-sonner-toast] [data-close-button] {
+  background: var(--ud-normal-bg);
+  border-color: var(--ud-normal-border);
+  color: var(--ud-normal-text);
+}
+
+[data-sonner-toaster][data-sonner-theme="dark"] [data-sonner-toast] [data-close-button]:hover {
+  background: var(--ud-normal-bg-hover);
+  border-color: var(--ud-normal-border-hover);
+}
+
+[data-rich-colors="true"][data-sonner-toast][data-type="success"] {
+  background: var(--ud-success-bg);
+  border-color: var(--ud-success-border);
+  color: var(--ud-success-text);
+
+  & [data-icon] {
+    color: var(--ud-success-border);
+  }
+}
+
+[data-rich-colors="true"][data-sonner-toast][data-type="success"] [data-close-button] {
+  background: var(--ud-success-bg);
+  border-color: var(--ud-success-border);
+  color: var(--ud-success-text);
+
+  & [data-icon] {
+    color: var(--ud-success-border);
+  }
+}
+
+[data-rich-colors="true"][data-sonner-toast][data-type="info"] {
+  background: var(--ud-info-bg);
+  border-color: var(--ud-info-border);
+  color: var(--ud-info-text);
+
+  & [data-icon] {
+    color: var(--ud-info-border);
+  }
+}
+
+[data-rich-colors="true"][data-sonner-toast][data-type="info"] [data-close-button] {
+  background: var(--ud-info-bg);
+  border-color: var(--ud-info-border);
+  color: var(--ud-info-text);
+}
+
+[data-rich-colors="true"][data-sonner-toast][data-type="warning"] {
+  background: var(--ud-warning-bg);
+  border-color: var(--ud-warning-border);
+  color: var(--ud-warning-text);
+
+  & [data-icon] {
+    color: var(--ud-warning-border);
+  }
+}
+
+[data-rich-colors="true"][data-sonner-toast][data-type="warning"] [data-close-button] {
+  background: var(--ud-warning-bg);
+  border-color: var(--ud-warning-border);
+  color: var(--ud-warning-text);
+}
+
+[data-rich-colors="true"][data-sonner-toast][data-type="error"] {
+  background: var(--ud-error-bg);
+  border-color: var(--ud-error-border);
+  color: var(--ud-error-text);
+
+  & [data-icon] {
+    color: var(--ud-error-border);
+  }
+}
+
+[data-rich-colors="true"][data-sonner-toast][data-type="error"] [data-close-button] {
+  background: var(--ud-error-bg);
+  border-color: var(--ud-error-border);
+  color: var(--ud-error-text);
+}
+

package/lib/components/AppContainer/sonner.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { toast } from 'sonner';
+import './sonner.css';
+/**
+ * 配置全局 Sonner Container 的入口
+ */
+declare const Toaster: ({ ...props }: any) => React.JSX.Element;
+export { Toaster, toast };

package/lib/components/AppContainer/sonner.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Toaster, toast } from "sonner";
+import "./sonner.css";
+import { useTheme } from "../../hooks/index.js";
+const sonner_Toaster = ({ ...props })=>{
+    const { theme } = useTheme();
+    return /*#__PURE__*/ jsx(Toaster, {
+        theme: theme,
+        className: "toaster group",
+        style: {
+            top: 70
+        },
+        position: "top-center",
+        richColors: true,
+        toastOptions: {
+            classNames: {
+                description: 'group-[.toast]:text-muted-foreground',
+                actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+                cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground'
+            }
+        },
+        ...props
+    });
+};
+export { sonner_Toaster as Toaster, toast };

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

@@ -0,0 +1,5 @@
+import React from 'react';
+declare const RenderError: React.FC<{
+    error: Error;
+}>;
+export default RenderError;

package/lib/components/ErrorRender/index.js

@@ -0,0 +1,79 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+import { Button } from "antd";
+import { getPreviewParentOrigin } from "../../utils/getParentOrigin.js";
+import { copyToClipboard } from "../../utils/copyToClipboard.js";
+const RenderError = (props)=>{
+    const { error } = props;
+    const location = useLocation();
+    const onClickCopy = useCallback(()=>{
+        const { message, stack } = error ?? {};
+        let result = error;
+        if (message && stack) {
+            const wrapIndex = stack.indexOf('\n');
+            const extraMsg = -1 !== wrapIndex ? stack.slice(0, wrapIndex) : stack;
+            result = `${message}
+  ${extraMsg}`;
+        }
+        copyToClipboard(result);
+    }, [
+        error
+    ]);
+    const onClickRepair = useCallback(()=>{
+        window.parent.postMessage({
+            type: 'RenderErrorRepair',
+            data: props.error
+        }, getPreviewParentOrigin());
+    }, [
+        props
+    ]);
+    useEffect(()=>{
+        if (props.error) window.parent.postMessage({
+            type: 'RenderError',
+            data: props.error,
+            location: location
+        }, getPreviewParentOrigin());
+    }, [
+        props.error,
+        location
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: "min-h-screen flex items-center justify-center bg-gray-100",
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "flex flex-col justify-center items-center text-center",
+            children: [
+                /*#__PURE__*/ jsx("img", {
+                    src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/render_error.svg",
+                    alt: "render error",
+                    className: "mb-4 w-[120px]"
+                }),
+                /*#__PURE__*/ jsx("p", {
+                    className: "text-l/[22px] text-[#1F2329] font-medium mb-2",
+                    children: "哎呀，写错代码了"
+                }),
+                /*#__PURE__*/ jsx("p", {
+                    className: "text-sm/[22px] text-[#646A73] font-normal mb-2",
+                    children: "可复制错误信息，或告诉妙搭进行修复"
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "flex space-x-4",
+                    children: [
+                        /*#__PURE__*/ jsx(Button, {
+                            className: "bg-white text-gray-600 font-[400] border rounded-[6px] shadow-xs hover:bg-gray-100 active:bg-gray-200 focus:outline-hidden h-[32px] border-[#D0D3D6]",
+                            onClick: onClickCopy,
+                            children: "复制错误信息"
+                        }),
+                        /*#__PURE__*/ jsx(Button, {
+                            className: "h-[32px] text-sm font-medium text-white bg-blue-600 border border-transparent rounded-[6px] shadow-xs hover:bg-blue-600 active:bg-blue-700 focus:outline-hidden ",
+                            onClick: onClickRepair,
+                            children: "告诉妙搭修复"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+const ErrorRender = RenderError;
+export { ErrorRender as default };

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const NotFound: () => React.JSX.Element;
+export default NotFound;

package/lib/components/NotFoundRender/index.js

@@ -0,0 +1,59 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useLocation, useNavigate } from "react-router-dom";
+import { useEffect } from "react";
+import { getPreviewParentOrigin } from "../../utils/getParentOrigin.js";
+import { useUpdatingRef } from "../../hooks/useUpdatingRef.js";
+import { logger } from "../../logger/index.js";
+const NotFound = ()=>{
+    const location = useLocation();
+    const navigate = useNavigate();
+    const navigateRef = useUpdatingRef(navigate);
+    useEffect(()=>{
+        logger.error('404 Error: User attempted to access non-existent route:', location.pathname);
+    }, [
+        location.pathname
+    ]);
+    const onClick = ()=>{
+        if ('production' !== process.env.NODE_ENV) window.parent.postMessage({
+            type: 'CreatePage',
+            data: location.pathname
+        }, getPreviewParentOrigin());
+        else navigateRef.current('/');
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: "min-h-screen flex flex-col items-center justify-center bg-white",
+        children: [
+            /*#__PURE__*/ jsx("img", {
+                src: 'production' !== process.env.NODE_ENV ? 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/illustration_empty_positive_create.svg' : 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/illustration_empty_negative_failure-miss.svg',
+                alt: "Empty",
+                className: "mb-3 w-[120px]"
+            }),
+            /*#__PURE__*/ jsx("p", {
+                className: "text-l/[22px] text-[14px] text-[#1F2329] font-medium",
+                children: 'production' !== process.env.NODE_ENV ? '哎呀，这个页面尚未生成' : '404'
+            }),
+            'production' !== process.env.NODE_ENV ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("p", {
+                        className: "text-sm/[22px] text-[14px] text-[#646A73] font-normal mt-1",
+                        children: "戳下方按钮，我可以根据上下文帮你生成一个"
+                    }),
+                    /*#__PURE__*/ jsxs("button", {
+                        className: "h-[32px] text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-xs hover:bg-blue-600 active:bg-blue-700 focus:outline-hidden focus:ring-2 focus:ring-blue-500 px-3 flex flex-row items-center mt-3",
+                        onClick: onClick,
+                        children: [
+                            /*#__PURE__*/ jsx("img", {
+                                src: "https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/template/icon_chat-ai_outlined.svg",
+                                alt: "Icon",
+                                className: "w-[14px] h-[14px] mr-1"
+                            }),
+                            "告诉妙搭生成一个"
+                        ]
+                    })
+                ]
+            }) : null
+        ]
+    });
+};
+const NotFoundRender = NotFound;
+export { NotFoundRender as default };

package/lib/components/SidebarNav/DrawerNav.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { BaseNavProps } from '../../types';
+export default function DrawerNav({ navList, className, activeClassName }: BaseNavProps): React.JSX.Element;

package/lib/components/SidebarNav/DrawerNav.js

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Button, Drawer } from "antd";
+import { Menu } from "lucide-react";
+import { clsxWithTw } from "../../utils/utils.js";
+import { LogoInfo, NavMenu, TopHeaderThemeClass, UserAvatarLayout } from "../common/index.js";
+function DrawerNav({ navList, className, activeClassName }) {
+    const [open, setOpen] = useState(false);
+    const showDrawer = ()=>{
+        setOpen(true);
+    };
+    const onClose = ()=>{
+        setOpen(false);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: clsxWithTw('w-full sticky top-0 z-50 flex flex-row h-14 px-3 items-center', TopHeaderThemeClass, className),
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                type: "text",
+                onClick: showDrawer,
+                className: "md:hidden px-0 text-inherit border-0",
+                children: /*#__PURE__*/ jsx(Menu, {
+                    className: "h-6 w-6"
+                })
+            }),
+            /*#__PURE__*/ jsx(LogoInfo, {
+                className: "ml-[6px] pl-3"
+            }),
+            /*#__PURE__*/ jsxs(Drawer, {
+                placement: "left",
+                rootClassName: "miao-nav",
+                closeIcon: null,
+                classNames: {
+                    body: clsxWithTw('w-full h-full flex flex-col p-0', className),
+                    content: 'w-[320px]'
+                },
+                onClose: onClose,
+                open: open,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: "w-full h-14",
+                        children: /*#__PURE__*/ jsx(LogoInfo, {
+                            className: "pl-5 pr-3 h-full flex items-center"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "flex-1 overflow-auto min-h-0",
+                        children: /*#__PURE__*/ jsx(NavMenu, {
+                            navList: navList,
+                            className: clsxWithTw('border-0', className),
+                            activeClassName: activeClassName,
+                            mode: "vertical",
+                            onClick: onClose
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(UserAvatarLayout, {
+                        className: "mt-2"
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { DrawerNav as default };

package/lib/components/SidebarNav/DropdownNav.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { BaseNavProps } from '../../types';
+export default function DropdownNav({ navList, className, activeClassName }: BaseNavProps): React.JSX.Element;

package/lib/components/SidebarNav/DropdownNav.js

@@ -0,0 +1,40 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Menu, X } from "lucide-react";
+import { clsxWithTw } from "../../utils/utils.js";
+import { DropdownThemeClass, LogoInfo, NavMenu, TopHeaderThemeClass, UserAvatarMenu } from "../common/index.js";
+function DropdownNav({ navList = [], className, activeClassName }) {
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const MenuDropdownIcon = isMenuOpen ? X : Menu;
+    return /*#__PURE__*/ jsxs("header", {
+        className: clsxWithTw('w-full flex sticky top-0 z-50 h-14 px-3 gap-1.5 items-center', TopHeaderThemeClass, isMenuOpen ? 'border-transparent' : '', className),
+        children: [
+            navList.length > 0 ? /*#__PURE__*/ jsx("div", {
+                className: "md:hidden flex mr-3",
+                children: /*#__PURE__*/ jsx(MenuDropdownIcon, {
+                    className: "h-6 w-6 cursor-pointer",
+                    onClick: ()=>setIsMenuOpen(!isMenuOpen)
+                })
+            }) : null,
+            /*#__PURE__*/ jsx(LogoInfo, {
+                className: "flex-1"
+            }),
+            /*#__PURE__*/ jsx(UserAvatarMenu, {
+                className: className
+            }),
+            isMenuOpen && navList.length > 0 ? /*#__PURE__*/ jsx("div", {
+                className: clsxWithTw('overflow-y-auto max-h-[482px] px-2 pb-2 absolute top-14 left-0 right-0 shadow-lg', DropdownThemeClass, className),
+                children: /*#__PURE__*/ jsx(NavMenu, {
+                    navList: navList,
+                    className: className,
+                    activeClassName: activeClassName,
+                    onClick: (_key)=>{
+                        setIsMenuOpen(false);
+                    },
+                    mode: "vertical"
+                })
+            }) : null
+        ]
+    });
+}
+export { DropdownNav as default };

package/lib/components/SidebarNav/Sidebar.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { NavProps } from '../../types';
+export default function SidebarNav({ activeClassName, className, navList }: NavProps): React.JSX.Element;