@pnkx-lib/ui 1.9.410 → 1.9.412

package/es/ui/SidebarV3/index.js

@@ -0,0 +1,490 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo, useState } from 'react';
+import { useLocation, Link, useNavigate } from 'react-router';
+import { S as SearchIcon, V as VietNamIcon, D as DownOutlinedIcon, l as logoHeaderText, R as RefIcon, u as useDebounce } from '../../chunks/logo-header-DG8abRGF.js';
+import { Flex, AutoComplete, Divider, Dropdown } from 'antd';
+import { Layout } from '../Layout.js';
+import { Input } from '../../fields/Input.js';
+import { t as twMerge } from '../../chunks/bundle-mjs-BME7zF0Z.js';
+import { F as ForwardRef, R as RefIcon$2 } from '../../chunks/BellIcon-Bv07EhTB.js';
+import { R as RefIcon$1 } from '../../chunks/DownOutlined-CkHKgaSi.js';
+
+const useMenuFilter = (menu) => {
+  const sidebarMenu = useMemo(
+    () => menu?.filter((route) => route?.isShow)?.flatMap((route) => route?.children)?.filter(Boolean),
+    [menu]
+  );
+  return { sidebarMenu };
+};
+const usePathUtils = () => {
+  const normalizePath = (path) => {
+    return path.trim().replace(/^\/+|\/+$/g, "").replace(/\/{2,}/g, "/").toLowerCase();
+  };
+  const comparePaths = (a, b) => {
+    return normalizePath(a) === normalizePath(b);
+  };
+  return { normalizePath, comparePaths };
+};
+const classNames = (...classes) => {
+  return classes.filter(Boolean).join(" ");
+};
+
+const Title = (props) => /* @__PURE__ */ jsx(Flex, { align: "center", justify: "space-between", children: props.title });
+const renderItem = (title, path) => ({
+  value: title,
+  label: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "space-between", children: title }),
+  path
+});
+const getDataOption = (menu, searchValue) => {
+  return menu.reduce((acc, itemMenu) => {
+    const groupName = itemMenu.name;
+    (itemMenu.children ?? []).forEach((itemChildren) => {
+      (itemChildren.children ?? []).forEach(
+        (itemSub) => {
+          if (!searchValue || itemSub.name.toLowerCase().includes(searchValue.toLowerCase())) {
+            let group = acc.find((g) => g.label.props.title === groupName);
+            if (!group) {
+              group = {
+                label: /* @__PURE__ */ jsx(Title, { title: groupName }),
+                options: []
+              };
+              acc.push(group);
+            }
+            const path = `${itemChildren.path}/${itemSub.path}`;
+            group.options.push(renderItem(itemSub.name, path));
+          }
+        }
+      );
+    });
+    return acc;
+  }, []);
+};
+
+const SearchHeader = ({
+  dataOption,
+  valueSearch,
+  onSearchChange,
+  onSelect
+}) => {
+  return /* @__PURE__ */ jsx("div", { className: "flex items-end", children: /* @__PURE__ */ jsx(
+    AutoComplete,
+    {
+      classNames: {
+        popup: { root: "certain-category-search-dropdown" }
+      },
+      popupMatchSelectWidth: 500,
+      style: { width: 500 },
+      options: dataOption ?? [],
+      onSelect,
+      onChange: onSearchChange,
+      value: valueSearch,
+      children: /* @__PURE__ */ jsx(
+        Input,
+        {
+          className: "!placeholder:bg-[#E7F0FF] !bg-[#E7F0FF] !border !border-[#BDE3FF]",
+          placeholder: "Tìm kiếm theo chức năng,module của hệ thống",
+          iconStartInput: /* @__PURE__ */ jsx("div", { className: "w-5 h-5", children: /* @__PURE__ */ jsx(SearchIcon, { className: "w-5 text-[#116DFF]" }) })
+        }
+      )
+    }
+  ) });
+};
+
+const userInfo = {
+  name: "admin",
+  avatar: "http://10.1.15.154:9000/image/logo-phenikaa-mec.webp"
+};
+const items = [
+  { key: "1", label: "Hồ sơ" },
+  { key: "4", label: "Cài đặt" },
+  { key: "2", label: "Đăng xuất" }
+];
+const UserInfoSection = ({
+  hoverOpenMenu
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx("li", { className: "list-none cursor-pointer group flex items-center", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: twMerge(
+          hoverOpenMenu ? "" : "justify-center",
+          "text-black flex items-center rounded-md gap-2"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex justify-center gap-4 items-center", children: [
+            /* @__PURE__ */ jsx(VietNamIcon, { className: "w-6 h-6" }),
+            /* @__PURE__ */ jsx(ForwardRef, { className: "w-6 h-6" })
+          ] })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx("div", { className: "flex items-center z-[9999]", children: /* @__PURE__ */ jsx("a", { onClick: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx("li", { className: "list-none cursor-pointer group flex items-center", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: twMerge(
+          hoverOpenMenu ? "" : "justify-center",
+          "text-black flex items-center rounded-md gap-2"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+          /* @__PURE__ */ jsx("div", { className: "flex justify-center w-[30px] h-[30px] rounded-full", children: /* @__PURE__ */ jsx("img", { src: userInfo?.avatar, alt: "default_avatar" }) }),
+          /* @__PURE__ */ jsx("p", { children: userInfo?.name }),
+          /* @__PURE__ */ jsx(Dropdown, { menu: { items }, children: /* @__PURE__ */ jsx(DownOutlinedIcon, { className: "w-6 h-6" }) })
+        ]
+      }
+    ) }) }) })
+  ] });
+};
+
+const Header = ({
+  dataOption,
+  valueSearch,
+  onSearchChange,
+  onSelect,
+  hoverOpenMenu
+}) => {
+  return /* @__PURE__ */ jsx(
+    Layout.Header,
+    {
+      style: {
+        backgroundColor: "#FFFFFF",
+        display: "flex",
+        width: "100%",
+        borderBottom: "1px solid white",
+        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.15)",
+        height: "56px",
+        position: "fixed",
+        zIndex: 2e3
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex items-center ml-[-2rem]", children: /* @__PURE__ */ jsx("img", { src: logoHeaderText, alt: "logo", width: 200 }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsx(
+            SearchHeader,
+            {
+              dataOption,
+              valueSearch,
+              onSearchChange,
+              onSelect
+            }
+          ),
+          /* @__PURE__ */ jsx(UserInfoSection, { hoverOpenMenu })
+        ] })
+      ] })
+    }
+  );
+};
+
+const MainSidebar = ({
+  sidebarMenu,
+  hoverOpenMenu,
+  activeModule,
+  onMouseEnter,
+  onMouseLeave,
+  onNavigateModule
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: twMerge(
+        "fixed inset-y-0 flex h-screen flex-col transition-all duration-300 ease-in-out z-[999]",
+        hoverOpenMenu ? "w-[225px]" : "w-[62px]"
+      ),
+      onMouseLeave,
+      onMouseEnter,
+      children: /* @__PURE__ */ jsx("div", { className: "flex grow flex-col mt-14 gap-y-5 bg-[#001523] px-6 pb-4 relative", children: /* @__PURE__ */ jsx("nav", { className: "flex flex-1 flex-col mt-4", children: /* @__PURE__ */ jsx("ul", { role: "list", className: "-mx-3 space-y-1", children: sidebarMenu.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        "a",
+        {
+          onClick: () => {
+            onNavigateModule(item);
+          },
+          className: classNames(
+            item.path === activeModule ? "bg-[#007BE5] text-white" : "text-gray-400 hover:text-white hover:bg-[#007BE5]",
+            "group flex items-center gap-x-3 rounded-md px-1.5 py-2 text-sm font-semibold"
+          ),
+          children: [
+            item.icon,
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: twMerge(
+                  "whitespace-nowrap overflow-hidden transition-opacity duration-200",
+                  hoverOpenMenu && "opacity-100"
+                ),
+                children: item.name
+              }
+            )
+          ]
+        }
+      ) }, item.name)) }) }) })
+    }
+  );
+};
+
+const SubMenu = ({
+  sidebarMenu,
+  showSubmenu,
+  hoverOpenMenu,
+  activeModule,
+  openDropdownMenu,
+  onCloseSubmenu,
+  onClickDropdownMenu
+}) => {
+  const location = useLocation();
+  const pathName = location.pathname;
+  const { comparePaths } = usePathUtils();
+  if (!showSubmenu || sidebarMenu.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: twMerge(
+        "fixed w-[217px] pt-15 left-[62px] h-full bg-[#FFFFFF] z-[50] flex flex-col",
+        hoverOpenMenu && "opacity-0"
+      ),
+      onMouseLeave: () => onCloseSubmenu,
+      children: [
+        sidebarMenu.map((moduleMenu) => {
+          const isActiveMainMenu = activeModule === moduleMenu.path;
+          if (!isActiveMainMenu) return null;
+          return /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("span", { className: "block px-4 h-[42px] shadow-[0px_4px_6px_0px_#0006241f] py-2 text-[16px] font-semibold text-[#1F1F1F]", children: moduleMenu.name }),
+            /* @__PURE__ */ jsx("ul", { className: "mt-4", children: moduleMenu.children?.map((subMenu) => {
+              const pathActive = comparePaths(pathName, subMenu.path);
+              const isDropdown = subMenu.isShow;
+              const activeMenu = pathName.startsWith(subMenu.path);
+              return /* @__PURE__ */ jsxs("li", { children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    onClick: () => onClickDropdownMenu(isDropdown, subMenu),
+                    className: twMerge(
+                      "px-4 py-2 mt-1 items-center gap-2 cursor-pointer flex text-sm hover:bg-[#E5F4FF] hover:text-[#007BE5]",
+                      pathActive && !isDropdown ? "!text-[#007BE5] !bg-[#E5F4FF]" : isDropdown && (pathActive || activeMenu) ? "!text-[#007BE5]" : "text-[#1F1F1F]"
+                    ),
+                    children: [
+                      subMenu.icon,
+                      subMenu.name,
+                      isDropdown && openDropdownMenu === subMenu.path ? /* @__PURE__ */ jsx(RefIcon, { className: "w-4 h-4 ml-auto" }) : isDropdown && /* @__PURE__ */ jsx(RefIcon$1, { className: "w-4 h-4 ml-auto" })
+                    ]
+                  }
+                ),
+                isDropdown && openDropdownMenu === subMenu.path && subMenu.children?.map((dropdownItem) => {
+                  const pathActiveDropdown = comparePaths(
+                    pathName,
+                    subMenu.path
+                  );
+                  const path = `${subMenu.path}/${dropdownItem.path}`;
+                  return /* @__PURE__ */ jsxs(
+                    Link,
+                    {
+                      to: path,
+                      className: twMerge(
+                        "px-4 py-2 mt-1 items-center gap-2 flex text-sm hover:bg-[#E5F4FF] hover:text-[#007BE5]",
+                        pathActiveDropdown || activeMenu ? "!text-[#007BE5] !bg-[#E5F4FF]" : "text-[#1F1F1F]"
+                      ),
+                      children: [
+                        dropdownItem.icon,
+                        dropdownItem.name
+                      ]
+                    },
+                    dropdownItem.path
+                  );
+                })
+              ] }, subMenu.path);
+            }) })
+          ] }, moduleMenu.path);
+        }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "mt-auto select-none px-4 py-2 shadow-[0px_0px_12px_0px_#0006241f] flex space-x-2 cursor-pointer",
+            onClick: onCloseSubmenu,
+            children: [
+              /* @__PURE__ */ jsx(RefIcon$2, {}),
+              /* @__PURE__ */ jsx("span", { className: "text-[#131313]", children: "Thu gọn menu" })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+const ContentArea = ({
+  children,
+  hoverOpenMenu,
+  showSubmenu
+}) => {
+  const getContentMargin = () => {
+    if (hoverOpenMenu) return "ml-[225px]";
+    if (showSubmenu) return "ml-[279px]";
+    return "ml-[62px]";
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: twMerge(
+        "transition-all duration-300 ease-in-out pt-14 h-screen",
+        getContentMargin()
+      ),
+      children
+    }
+  );
+};
+
+const SidebarV3 = ({ menu, children }) => {
+  const [hoverOpenMenu, setHoverOpenMenu] = useState(false);
+  const [valueSearch, setValueSearch] = useState("");
+  const searchSidebar = useDebounce(valueSearch, 300);
+  const [showSubmenu, setShowSubmenu] = useState(false);
+  const [activeModule, setActiveModule] = useState("");
+  const [openDropdownMenu, setOpenDropdownMenu] = useState(null);
+  const navigate = useNavigate();
+  const { sidebarMenu } = useMenuFilter(menu);
+  const dataOption = useMemo(
+    () => getDataOption(sidebarMenu, searchSidebar),
+    [sidebarMenu, searchSidebar]
+  );
+  const handleSelect = (_value, path) => {
+    navigate(path.path);
+  };
+  const handleClickDropdownMenu = (isDropdown, item) => {
+    if (isDropdown) {
+      setOpenDropdownMenu((prev) => prev === item.path ? null : item.path);
+      return;
+    }
+    navigate(item.path);
+  };
+  const handleNavigateModule = (item) => {
+    setShowSubmenu(true);
+    setHoverOpenMenu(false);
+    setActiveModule(item.path);
+  };
+  const handleCloseSubmenu = () => {
+    setShowSubmenu(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Header,
+      {
+        dataOption,
+        valueSearch,
+        onSearchChange: setValueSearch,
+        onSelect: handleSelect,
+        hoverOpenMenu
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MainSidebar,
+      {
+        sidebarMenu,
+        hoverOpenMenu,
+        activeModule,
+        onMouseEnter: () => setHoverOpenMenu(true),
+        onMouseLeave: () => setHoverOpenMenu(false),
+        onNavigateModule: handleNavigateModule
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      SubMenu,
+      {
+        sidebarMenu,
+        showSubmenu,
+        hoverOpenMenu,
+        activeModule,
+        openDropdownMenu,
+        onCloseSubmenu: handleCloseSubmenu,
+        onClickDropdownMenu: handleClickDropdownMenu
+      }
+    ),
+    /* @__PURE__ */ jsx(ContentArea, { hoverOpenMenu, showSubmenu, children })
+  ] });
+};
+
+const DashboardIcon = () => /* @__PURE__ */ jsx("span", { children: "📊" });
+const UsersIcon = () => /* @__PURE__ */ jsx("span", { children: "👥" });
+const SettingsIcon = () => /* @__PURE__ */ jsx("span", { children: "⚙️" });
+const exampleMenu = [
+  {
+    name: "Dashboard",
+    path: "/dashboard",
+    isShow: true,
+    icon: /* @__PURE__ */ jsx(DashboardIcon, {}),
+    children: [
+      {
+        name: "Analytics",
+        path: "/dashboard/analytics",
+        isShow: true,
+        icon: /* @__PURE__ */ jsx(DashboardIcon, {}),
+        children: [
+          { name: "Reports", path: "reports" },
+          { name: "Charts", path: "charts" }
+        ]
+      },
+      {
+        name: "Overview",
+        path: "/dashboard/overview",
+        isShow: false,
+        // Dropdown menu
+        icon: /* @__PURE__ */ jsx(DashboardIcon, {}),
+        children: [
+          { name: "Summary", path: "summary" },
+          { name: "Details", path: "details" }
+        ]
+      }
+    ]
+  },
+  {
+    name: "Users",
+    path: "/users",
+    isShow: true,
+    icon: /* @__PURE__ */ jsx(UsersIcon, {}),
+    children: [
+      {
+        name: "Management",
+        path: "/users/management",
+        isShow: true,
+        icon: /* @__PURE__ */ jsx(UsersIcon, {}),
+        children: [
+          { name: "List", path: "list" },
+          { name: "Roles", path: "roles" }
+        ]
+      }
+    ]
+  },
+  {
+    name: "Settings",
+    path: "/settings",
+    isShow: true,
+    icon: /* @__PURE__ */ jsx(SettingsIcon, {}),
+    children: [
+      {
+        name: "General",
+        path: "/settings/general",
+        isShow: true,
+        icon: /* @__PURE__ */ jsx(SettingsIcon, {})
+      }
+    ]
+  }
+];
+const ExampleContent = () => /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+  /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mb-4", children: "Main Content Area" }),
+  /* @__PURE__ */ jsx("p", { className: "text-gray-600", children: "Đây là nội dung chính của ứng dụng. Sidebar sẽ tự động điều chỉnh margin của content area này dựa trên trạng thái hiển thị." }),
+  /* @__PURE__ */ jsxs("div", { className: "mt-6 p-4 bg-gray-100 rounded", children: [
+    /* @__PURE__ */ jsx("h2", { className: "font-semibold", children: "Features:" }),
+    /* @__PURE__ */ jsxs("ul", { className: "mt-2 space-y-1", children: [
+      /* @__PURE__ */ jsx("li", { children: "• Hover sidebar để mở rộng" }),
+      /* @__PURE__ */ jsx("li", { children: "• Click module để hiển thị submenu" }),
+      /* @__PURE__ */ jsx("li", { children: "• Sử dụng search để tìm nhanh chức năng" }),
+      /* @__PURE__ */ jsx("li", { children: '• Click "Thu gọn menu" để đóng submenu' })
+    ] })
+  ] })
+] });
+const SidebarV3Example = () => {
+  return /* @__PURE__ */ jsx(SidebarV3, { menu: exampleMenu, children: /* @__PURE__ */ jsx(ExampleContent, {}) });
+};
+
+export { SidebarV3, SidebarV3Example };

package/es/ui/UploadComponent.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Upload, Image, Tooltip } from 'antd';
 import { Spin } from './Spin.js';
-import { t as twMerge } from '../chunks/bundle-mjs-BBFHkixS.js';
+import { t as twMerge } from '../chunks/bundle-mjs-BME7zF0Z.js';
 import { Label } from './Label.js';
 import { R as RefIcon } from '../chunks/CloseOutlined-D9hb-IcI.js';
 

package/es/ui/UploadImage.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { C as Controller } from '../chunks/index.esm-o4O8pXMN.js';
+import { C as Controller } from '../chunks/index.esm-AaUjBMaK.js';
 import { UploadComponent } from './UploadComponent.js';
 
 const UploadImage = ({

package/es/ui/index.js

@@ -59,7 +59,7 @@ import { CATEGORY_LIST_ENUM } from './CategoryStatus.js';
 export { CategoryStatus, badgeStatusCategoryConfig } from './CategoryStatus.js';
 import { useToggle } from '@pnkx-lib/core';
 import { isEmpty, isBoolean } from 'lodash';
-import { t as twMerge } from '../chunks/bundle-mjs-BBFHkixS.js';
+import { t as twMerge } from '../chunks/bundle-mjs-BME7zF0Z.js';
 export { BreadcrumbHeading } from './BreadcrumbHeading.js';
 export { Card } from './Card.js';
 export { ConfigProvider } from './ConfigProvider.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pnkx-lib/ui",
   "private": false,
-  "version": "1.9.410",
+  "version": "1.9.412",
   "type": "module",
   "main": "./es/index.js",
   "module": "./es/index.js",
@@ -117,7 +117,7 @@
     ]
   },
   "peerDependencies": {
-    "@pnkx-lib/core": "^1.1.77",
+    "@pnkx-lib/core": "^1.1.107",
     "@tailwindcss/vite": "^4.0.17",
     "antd": "^5.24.4",
     "react": "^18.3.1",

package/types/components/ui/SidebarV3/ContentArea.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+interface ContentAreaProps {
+    children: React.ReactNode;
+    hoverOpenMenu: boolean;
+    showSubmenu: boolean;
+}
+export declare const ContentArea: React.FC<ContentAreaProps>;
+export {};

package/types/components/ui/SidebarV3/Example.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const SidebarV3Example: React.FC;

package/types/components/ui/SidebarV3/Header.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+interface HeaderProps {
+    dataOption: any[];
+    valueSearch: string;
+    onSearchChange: (value: string) => void;
+    onSelect: (value: string, option: {
+        path: string;
+    }) => void;
+    hoverOpenMenu: boolean;
+}
+export declare const Header: React.FC<HeaderProps>;
+export {};

package/types/components/ui/SidebarV3/MainSidebar.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { MenuTypeV3 } from './types';
+interface MainSidebarProps {
+    sidebarMenu: MenuTypeV3[];
+    hoverOpenMenu: boolean;
+    activeModule: string;
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onNavigateModule: (item: MenuTypeV3) => void;
+}
+export declare const MainSidebar: React.FC<MainSidebarProps>;
+export {};

package/types/components/ui/SidebarV3/SearchHeader.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+interface SearchHeaderProps {
+    dataOption: any[];
+    valueSearch: string;
+    onSearchChange: (value: string) => void;
+    onSelect: (value: string, option: {
+        path: string;
+    }) => void;
+}
+export declare const SearchHeader: React.FC<SearchHeaderProps>;
+export {};

package/types/components/ui/SidebarV3/SidebarV3.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { SidebarV3Props } from './types';
+export declare const SidebarV3: React.FC<SidebarV3Props>;

package/types/components/ui/SidebarV3/SubMenu.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { MenuTypeV3 } from './types';
+interface SubMenuProps {
+    sidebarMenu: MenuTypeV3[];
+    showSubmenu: boolean;
+    hoverOpenMenu: boolean;
+    activeModule: string;
+    openDropdownMenu: string | null;
+    onCloseSubmenu: () => void;
+    onClickDropdownMenu: (isDropdown: boolean | undefined, item: MenuTypeV3) => void;
+}
+export declare const SubMenu: React.FC<SubMenuProps>;
+export {};

package/types/components/ui/SidebarV3/UserInfoSection.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+interface UserInfoSectionProps {
+    hoverOpenMenu: boolean;
+}
+export declare const UserInfoSection: React.FC<UserInfoSectionProps>;
+export {};

package/types/components/ui/SidebarV3/hooks.d.ts

@@ -0,0 +1,9 @@
+import { MenuTypeV3 } from './types';
+export declare const useMenuFilter: (menu: MenuTypeV3[]) => {
+    sidebarMenu: MenuTypeV3[];
+};
+export declare const usePathUtils: () => {
+    normalizePath: (path: string) => string;
+    comparePaths: (a: string, b: string) => boolean;
+};
+export declare const classNames: (...classes: unknown[]) => string;

package/types/components/ui/SidebarV3/index.d.ts

@@ -0,0 +1,3 @@
+export { SidebarV3 } from './SidebarV3';
+export type { MenuTypeV3, SidebarV3Props, SidebarState } from './types';
+export { SidebarV3Example } from './Example';

package/types/components/ui/SidebarV3/types.d.ts

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+export type MenuTypeV3 = {
+    name: string;
+    path: string;
+    isShow?: boolean;
+    isPrivateRoute?: boolean;
+    icon?: ReactNode;
+    code?: string;
+    isShowLabel?: boolean;
+    isModule?: boolean;
+    component?: React.LazyExoticComponent<React.MemoExoticComponent<any>> | React.ExoticComponent<any> | ReactNode | React.FC;
+    componentProps?: Record<string, any>;
+    children?: MenuTypeV3[];
+};
+export interface SidebarV3Props {
+    menu: MenuTypeV3[];
+    children: React.ReactNode;
+}
+export interface SidebarState {
+    hoverOpenMenu: boolean;
+    valueSearch: string;
+    showSubmenu: boolean;
+    activeModule: string;
+    openDropdownMenu: string | null;
+}

package/types/components/ui/SidebarV3/utils.d.ts

@@ -0,0 +1,2 @@
+import { MenuTypeV3 } from './types';
+export declare const getDataOption: (menu: MenuTypeV3[], searchValue: string) => any;

package/types/ui/SidebarV3/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../../components/ui/SidebarV3/index'
+export {}