@admin-layout/tailwind-design-pro 10.0.6-alpha.9 → 10.0.9-alpha.13

package/lib/components/Layout/Sidebar/SidebarMenu.js

@@ -1,88 +1,168 @@
-import {jsx,jsxs}from'react/jsx-runtime';import {useState}from'react';import {ChevronDown,ChevronRight}from'lucide-react';import {Link}from'@remix-run/react';import {generateMenuPath}from'@admin-layout/client';import {generateLightShade}from'../BasicLayout/utils.js';const SidebarMenu = ({
+import {jsx,jsxs}from'react/jsx-runtime';import {useState}from'react';import {Link}from'@remix-run/react';import {generateMenuPath}from'@admin-layout/client';import {generateLightShade}from'../BasicLayout/utils.js';import {icons}from'../../../icons.js';const SidebarMenu = ({
   menuData,
   routeParams,
-  settings
+  settings,
+  collapsed
 }) => {
-  // Track open menus by their depth level
   const [openMenusByLevel, setOpenMenusByLevel] = useState({});
-  // Track the currently active menu item
   const [activePath, setActivePath] = useState('/dashboard');
+  const [hoveredMenu, setHoveredMenu] = useState(null);
+  const [popupPosition, setPopupPosition] = useState({
+    top: 0,
+    height: 0
+  });
+  const {
+    ChevronDownIcon,
+    ChevronRightIcon
+  } = icons;
   const toggleMenu = (path, depth, e) => {
-    // Prevent link navigation when clicking on a parent menu with children
     e.preventDefault();
-    setOpenMenusByLevel(prev => {
-      const newState = {
-        ...prev
-      };
-      // If this menu is already open, close it
-      if (newState[depth] === path) {
-        newState[depth] = null;
-      }
-      // Otherwise, close any other menu at this depth level and open this one
-      else {
-        newState[depth] = path;
-      }
-      return newState;
-    });
+    if (collapsed) return;
+    setOpenMenusByLevel(prev => ({
+      ...prev,
+      [depth]: prev[depth] === path ? null : path
+    }));
   };
   const handleMenuClick = (path, hasChildren, depth, e) => {
-    if (hasChildren) {
+    if (hasChildren && !collapsed) {
       toggleMenu(path, depth, e);
     } else {
-      // For leaf items, set as active and allow navigation
       setActivePath(path);
     }
   };
-  const renderMenuItem = (item, depth = 0) => {
+  const getFirstLetter = name => {
+    return name.charAt(0).toUpperCase();
+  };
+  const handleMenuHover = (e, item, isHoverMenu) => {
+    // Only set hover state if the menu has children
+    if (collapsed && !isHoverMenu && item.children && item.children.length > 0) {
+      const element = e.currentTarget;
+      const rect = element.getBoundingClientRect();
+      let top = rect.top;
+      // Store the height to use for positioning
+      setPopupPosition({
+        top: top,
+        height: rect.height
+      });
+      setHoveredMenu(item.path);
+    }
+  };
+  const handleMenuLeave = (item, isHoverMenu) => {
+    if (collapsed && !isHoverMenu) {
+      setHoveredMenu(null);
+    }
+  };
+  const renderPopupMenu = (item, depth = 0) => {
+    if (!item.children || item.children.length === 0) return null;
+    const bgColor = generateLightShade(settings?.primaryColor, 0.98);
+    const sidebarWidth = collapsed ? 64 : 256; // 80px for collapsed (w-20), 256px for expanded (w-64)
+    return jsxs("div", {
+      className: "fixed shadow-xl rounded-md border border-gray-100 z-[999] overflow-hidden",
+      style: {
+        backgroundColor: bgColor,
+        left: `${sidebarWidth}px`,
+        // Position right after sidebar
+        top: `${popupPosition.top}px`,
+        boxShadow: '0 5px 15px rgba(0, 0, 0, 0.2)',
+        animation: 'fadeIn 0.2s ease-out forwards',
+        maxWidth: 'calc(100vw - 100px)',
+        // Prevent overflow on small screens
+        width: 'max-content',
+        minWidth: '220px'
+      },
+      children: [jsx("style", {
+        dangerouslySetInnerHTML: {
+          __html: `
+                    @keyframes fadeIn {
+                        from { opacity: 0; transform: translateX(-10px); }
+                        to { opacity: 1; transform: translateX(0); }
+                    }
+                    `
+        }
+      }), jsx("div", {
+        className: "font-medium text-sm px-4 py-3 border-b border-gray-100 whitespace-nowrap",
+        style: {
+          backgroundColor: generateLightShade(settings?.primaryColor, 0.95)
+        },
+        children: jsx("span", {
+          style: {
+            color: settings?.primaryColor
+          },
+          children: item.name
+        })
+      }), jsx("div", {
+        className: "max-h-[400px] overflow-y-auto overflow-x-hidden py-1",
+        children: item.children.map(child => jsx("div", {
+          className: "w-full min-w-max",
+          children: renderMenuItem(child, depth + 1, true)
+        }, child.path))
+      })]
+    });
+  };
+  const renderMenuItem = (item, depth = 0, isHoverMenu = false) => {
     const hasChildren = item.children && item.children.length > 0;
     const isOpen = openMenusByLevel[depth] === item.path;
     const isActive = activePath === item.path;
+    const isHovered = hoveredMenu === item.path;
     const paddingLeft = `${depth * 1}rem`;
-    // Determine the background color based on state
-    let bgColor = generateLightShade(settings?.primaryColor, 0.89);
+    const bgColor = generateLightShade(settings?.primaryColor, 0.89);
     return jsxs("div", {
-      className: "w-full",
+      className: `w-full relative group ${isHovered && collapsed && !isHoverMenu ? `rounded-md` : ''}`,
+      style: {
+        backgroundColor: isHovered && !isHoverMenu ? bgColor : ''
+      },
+      onMouseEnter: e => handleMenuHover(e, item, isHoverMenu),
+      onMouseLeave: () => handleMenuLeave(item, isHoverMenu),
       children: [jsxs(Link, {
-        to: generateMenuPath(item?.path, routeParams),
-        className: `flex items-center justify-between w-full px-4 py-2 hover:bg-gray-100 text-sm cursor-pointer transition-colors rounded-md mx-1 my-0.5`,
+        to: hasChildren && collapsed && !isHoverMenu ? '#' : generateMenuPath(item?.path, routeParams),
+        className: `flex items-center justify-between w-full px-1 py-2 hover:bg-gray-100 text-sm cursor-pointer transition-colors rounded-md mx-1 my-0.5 whitespace-nowrap overflow-hidden text-ellipsis`,
         style: {
           paddingLeft: `calc(1rem + ${paddingLeft})`,
-          backgroundColor: isActive ? bgColor : ''
+          backgroundColor: isActive || isHovered ? bgColor : ''
         },
         onClick: e => handleMenuClick(item.path, hasChildren, depth, e),
         children: [jsxs("div", {
-          className: "flex items-center gap-3",
-          children: [item.icon && jsx("span", {
+          className: `flex items-center ${collapsed && !isHoverMenu ? 'justify-center w-full' : 'gap-3'}`,
+          children: [item.icon ? jsx("span", {
+            className: `${isActive || isHovered ? 'text-primary' : ''} flex-shrink-0`,
             style: {
-              color: isActive ? settings?.primaryColor : ''
+              color: isActive || isHovered ? settings?.primaryColor : ''
             },
             children: item.icon
-          }), jsx("span", {
-            className: `font-medium`,
+          }) : collapsed && !isHoverMenu ? jsx("span", {
+            className: "flex items-center justify-center flex-shrink-0",
+            style: {
+              color: isActive ? settings?.primaryColor : ''
+            },
+            children: getFirstLetter(item.name)
+          }) : null, (!collapsed || isHoverMenu) && jsx("span", {
+            className: "font-medium whitespace-nowrap overflow-hidden text-ellipsis",
             style: {
               color: isActive ? settings?.primaryColor : ''
             },
             children: item.name
           })]
-        }), hasChildren && jsx("span", {
+        }), hasChildren && (!collapsed || isHoverMenu) && jsx("span", {
           style: {
             color: isActive ? settings?.primaryColor : ''
           },
-          children: isOpen ? jsx(ChevronDown, {
+          className: "flex-shrink-0 ml-1",
+          children: isOpen ? jsx(ChevronDownIcon, {
             className: "h-4 w-4"
-          }) : jsx(ChevronRight, {
+          }) : jsx(ChevronRightIcon, {
             className: "h-4 w-4"
           })
         })]
-      }), hasChildren && isOpen && jsx("div", {
+      }), collapsed && hasChildren && isHovered && !isHoverMenu && item.children.length > 0 && renderPopupMenu(item, depth), hasChildren && isOpen && !collapsed && jsx("div", {
         className: "transition-all duration-200 ease-in-out",
         children: item.children.map(child => renderMenuItem(child, depth + 1))
       })]
     }, item.path);
   };
   return jsx("div", {
+    className: "overflow-hidden",
     children: jsx("nav", {
-      className: "mt-2 px-2",
+      className: `mt-2 ${collapsed ? 'px-1' : 'px-2'} overflow-x-hidden`,
       children: menuData.map(item => renderMenuItem(item))
     })
   });

package/lib/components/Layout/Sidebar/SidebarMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarMenu.js","sources":["../../../../src/components/Layout/Sidebar/SidebarMenu.tsx"],"sourcesContent":[null],"names":[],"mappings":"2QAOO,MAAM,WAAW,GAAG,CAAC;UACgB;aACjB;;MAEjB;;QAGF,CAAuE,gBAAA,EAAA,mBAAA,CAAA,GAAA,QAAA,CAAA,EAAA,CAAA;;AAGvE,EAAA,MAAA,CAAA,UAAA,EAAA,aAAyB,CAAE,GAAE,QAAA,CAAA,YAAA,CAAA;AACzB,EAAA,MAAA,UAAM,QAAQ,EAAG,KAAK,EAAA,CAAA,KAAO;;AAG7B,IAAA,CAAA,CAAA;AACI,IAAA,mBAAA,CAAQ,IAAC,IAAM;YACnB,QAAC,GAAA;;;AAGG;kBACH,CAAA,KAAA,CAAA,KAAA,IAAA,EAAA;AAED,QAAA,QAAA,CAAA,aAAgB;AACpB;AACJ;WAEM;QACF,QAAI,CAAA,KAAA,CAAW,GAAG,IAAA;AACd;aACH,QAAA;;;uBAEgB,GAAC,CAAI,IAAC,EAAC,WAAA,EAAA,KAAA,EAAA,CAAA,KAAA;QACxB,WAAC,EAAA;AACL,MAAE,UAAA,CAAA,IAAA,EAAA,KAAA,EAAA,CAAA,CAAA;KAEI,MAAA;AACF;mBACM,CAAM,IAAG,CAAA;AACf;AACA,GAAA;QAEA,cAAgD,GAAA,CAAA,IAAA,EAAA,KAAA,GAAA,CAAA,KAAA;UAC5C,WAAU,GAAA,IAAA,CAAA,QAAA,IAAmB,IAAA,CAAA,QAAsB,CAAA,MAAA,GAAA,CAAE;UAElD,MACH,mBAA8B,CAAA,KAAA,CAAC,SAC3B,CAAA,IAAA;AA2BZ,IAAA,MAAE,QAAA,GAAA,UAAA,KAAA,IAAA,CAAA,IAAA;IAEF,MAAO,WAEC,GAAA,CAAA,EAAA,KAAA,GAAA,CAAA,CAAA,GAAA,CAAA;AAGZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"SidebarMenu.js","sources":["../../../../src/components/Layout/Sidebar/SidebarMenu.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"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"}

package/lib/components/Layout/TailwindLayout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TailwindLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/TailwindLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAqB,MAAM,sBAAsB,CAAC;AAE3E,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAqC,MAAM,aAAa,CAAC;AA0CpG,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC;AAEvD,QAAA,MAAM,SAAS;;;0EAAoB,CAAC;AAEpC,KAAK,+BAA+B,GAAG,gBAAgB,GAAG,cAAc,CAAC;AAEzE,QAAA,MAAM,mBAAmB,EAAE,kBAAkB,CACzC,KAAK,CAAC,mBAAmB,CAAC,CAAC,KAAK,EAAE,+BAA+B,KAAK,GAAG,CAAC,OAAO,CAAC,EAClF,GAAG,CAC8C,CAAC;AAEtD,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"TailwindLayout.d.ts","sourceRoot":"","sources":["../../../src/components/Layout/TailwindLayout.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAqB,MAAM,sBAAsB,CAAC;AAE3E,OAAO,KAAqC,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,kBAAkB,EAAE,cAAc,EAAqC,MAAM,aAAa,CAAC;AAqDpG,KAAK,cAAc,GAAG,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC;AAEvD,QAAA,MAAM,SAAS;;;0EAAoB,CAAC;AAEpC,KAAK,+BAA+B,GAAG,gBAAgB,GAAG,cAAc,CAAC;AAEzE,QAAA,MAAM,mBAAmB,EAAE,kBAAkB,CACzC,KAAK,CAAC,mBAAmB,CAAC,CAAC,KAAK,EAAE,+BAA+B,KAAK,GAAG,CAAC,OAAO,CAAC,EAClF,GAAG,CAC8C,CAAC;AAEtD,eAAe,mBAAmB,CAAC"}

package/lib/components/Layout/TailwindLayout.js

@@ -1,10 +1,15 @@
-import {jsx}from'react/jsx-runtime';import {useLayoutSettings}from'@admin-layout/client';import {userSelector}from'@adminide-stack/user-auth0-client';import React__default,{useMemo}from'react';import {connect,useSelector}from'react-redux';import {BasicLayout}from'./BasicLayout/index.js';function BasicLayoutWithAuthorities(props) {
+import {jsx}from'react/jsx-runtime';import {useLayoutSettings}from'@admin-layout/client';import {userSelector}from'@adminide-stack/user-auth0-client';import React__default,{useMemo}from'react';import {connect,useSelector}from'react-redux';import {BasicLayout}from'./BasicLayout/index.js';import {settingsMachine}from'../../machines/settingsMachine.js';import {createActor}from'xstate';import {useSelector as useSelector$1}from'@xstate/react';function BasicLayoutWithAuthorities(props) {
   const userData = useSelector(userSelector);
   const {
     settings,
     setSettings
   } = useLayoutSettings();
   // const { authenticated, user } = isUserAuthenticated();
+  const settingsActor = createActor(settingsMachine, {
+    systemId: 'settings'
+  }).start();
+  const state = useSelector$1(settingsActor, state => state);
+  const settingXstate = state?.context;
   const {
     permissions
   } = props;
@@ -27,8 +32,9 @@ import {jsx}from'react/jsx-runtime';import {useLayoutSettings}from'@admin-layout
     authorities: permissions?.resolveConfiguration ?? permissions,
     onSettingChange: onSettingChange,
     mainHeaderProps: mainHeaderProps,
+    actor: settingsActor,
     ...props,
-    settings: settings
+    settings: settingXstate
   });
 }
 const mapState = ({

package/lib/components/Layout/TailwindLayout.js.map

@@ -1 +1 @@
-{"version":3,"file":"TailwindLayout.js","sources":["../../../src/components/Layout/TailwindLayout.tsx"],"sourcesContent":[null],"names":[],"mappings":"gSAMA,SAAS,0BAA0B,CAAC,KAAgF,EAAA;AAChH,EAAA,MAAA,WAAiB,WAAA,CAAA,YAAY,CAAA;QACvB;IACN,QAAyD;AACzD,IAAA;AACA,GAAA,GAAA,mBAAqB;AAEb;AACH,EAAA,MACD;AAGJ,IAAA;WACK;AACG,EAAA,MAAA,eAAiB,GAAA,OAAO,CAAA,OAAE;aACzB,QAAA,GAAA,QAAA,EAAA,OAAA,EAAA,OAAA,GAAA;AACT,GAAA,CAAA,EAAE,CAAA,QAAA,CAAA,CAAA;QAEU,eAAA,GAAA,MAAA,IAAA;IACZ,CAAM,YAAa;AACnB,MAAA,MACI,WAAY,CAAA,MAAA,CAAA;AASpB,KAAC,GAAA;AAED,GAAM;;QAEM;AACX,IAAE,WAAA,EAAA;AAMH,MAAM;AAIN,KAAM,GAAA;AAKN,GAAA,GAAA,KAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"TailwindLayout.js","sources":["../../../src/components/Layout/TailwindLayout.tsx"],"sourcesContent":[null],"names":[],"mappings":"0bASA,SAAS,0BAA0B,CAAC,KAAgF,EAAA;AAChH,EAAA,MAAA,WAAiB,WAAA,CAAA,YAAY,CAAA;QACvB;IACN,QAAyD;AACzD,IAAA;AACI,GAAA,GAAA,iBAAoB,EAAA;;AAGxB,EAAA,MAAA,aAA+B,GAAA,WAAA,CAAC,eAAe,EAAC;AAEhD,IAAA,QAAmB,EAAA;AACnB,GAAA,CAAA,CAAA,KAAM,EAAE;AACR,EAAA,MAAA,qBAAwB,CAAA,aACb,EAAA,KAAA,IAAA,KAAA,CAAA;AACH,EAAA,MAAA,aAAS,GAAA,KAAW,EAAA,OAAU;AACjC,EAAA,MACD;AAGJ,IAAA;WACK;AACG,EAAA,MAAA,eAAiB,GAAA,OAAO,CAAA,OAAE;aACzB,QAAA,GAAA,QAAA,EAAA,OAAA,EAAA,OAAA,GAAA;AACT,GAAA,CAAA,EAAE,CAAA,QAAA,CAAA,CAAA;QAEU,eAAA,GAAA,MAAA,IAAA;IACZ,CAAM,YAAa;AACnB,MAAA,MACI,WAAY,CAAA,MAAA,CAAA;AAUpB,KAAC,GAAA;AAED,GAAM;;QAEM;AACX,IAAE,WAAA,EAAA;AAMH,MAAM;AAIN,KAAM,GAAA;AAKN,GAAA,GAAA,KAAA;;;;;;;;;;;;;;;;;;;"}

package/lib/components/Layout/slot-fill/AdditionalSettings.d.ts

@@ -0,0 +1,4 @@
+export declare const ADDITIONAL_SETTINGS_SLOT_FILL_NAME = "additional_settings_slot_fill";
+export declare const AdditionalSettingsSlot: (props: any) => import("react/jsx-runtime").JSX.Element;
+export declare const AdditionalSettingsFillCard: (props: any) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AdditionalSettings.d.ts.map

package/lib/components/Layout/slot-fill/AdditionalSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdditionalSettings.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/slot-fill/AdditionalSettings.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,kCAAkC,kCAAkC,CAAC;AAElF,eAAO,MAAM,sBAAsB,yDAElC,CAAC;AAEF,eAAO,MAAM,0BAA0B,yDAEtC,CAAC"}

package/lib/components/Layout/slot-fill/AdditionalSettings.js

@@ -0,0 +1,7 @@
+import {jsx}from'react/jsx-runtime';import {Slot}from'@common-stack/components-pro';const ADDITIONAL_SETTINGS_SLOT_FILL_NAME = 'additional_settings_slot_fill';
+const AdditionalSettingsSlot = props => {
+  return jsx(Slot, {
+    name: ADDITIONAL_SETTINGS_SLOT_FILL_NAME,
+    fillProps: props
+  });
+};export{ADDITIONAL_SETTINGS_SLOT_FILL_NAME,AdditionalSettingsSlot};//# sourceMappingURL=AdditionalSettings.js.map

package/lib/components/Layout/slot-fill/AdditionalSettings.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdditionalSettings.js","sources":["../../../../src/components/Layout/slot-fill/AdditionalSettings.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":"oFAIO,MAAM,kCAAkC,GAAG;AAErC,MAAA,sBAAsB,GAAG,KAAC,IAAS;SACrCA,GAAA,CAAA,IAAK,EAAA;AAChB,IAAE,IAAA,EAAA,kCAAA;AAEF,IAAA,SAAa,EAAA;IACT;AACJ"}

package/lib/components/Layout/slot-fill/index.d.ts

@@ -1,3 +1,4 @@
 export * from './HeaderNotice';
 export * from './Footer';
+export * from './AdditionalSettings';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Layout/slot-fill/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/slot-fill/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Layout/slot-fill/index.tsx"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,sBAAsB,CAAC"}

package/lib/components/SettingDrawer/CheckBoxTheme.d.ts

@@ -1,8 +1,3 @@
-type ICheckboxThemeProps = {
-    list?: any[];
-    changeSetting?: (key: string, value: string | boolean | any) => void;
-    settings?: any;
-};
+import { ICheckboxThemeProps } from './types';
 export default function CheckBoxTheme(props: ICheckboxThemeProps): import("react/jsx-runtime").JSX.Element;
-export {};
 //# sourceMappingURL=CheckBoxTheme.d.ts.map

package/lib/components/SettingDrawer/CheckBoxTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxTheme.d.ts","sourceRoot":"","sources":["../../../src/components/SettingDrawer/CheckBoxTheme.tsx"],"names":[],"mappings":"AAEA,KAAK,mBAAmB,GAAG;IACvB,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;IACb,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,GAAG,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,GAAG,CAAC;CAClB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,mBAAmB,2CA+C/D"}
+{"version":3,"file":"CheckBoxTheme.d.ts","sourceRoot":"","sources":["../../../src/components/SettingDrawer/CheckBoxTheme.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAsD9C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,mBAAmB,2CAiC/D"}

package/lib/components/SettingDrawer/CheckBoxTheme.js

@@ -1,47 +1,122 @@
-import {jsx,jsxs}from'react/jsx-runtime';function CheckBoxTheme(props) {
+import {jsxs,jsx}from'react/jsx-runtime';const themelist = [{
+  key: 'light',
+  title: 'Light',
+  svg: jsxs("svg", {
+    width: "58",
+    height: "50",
+    viewBox: "0 0 58 50",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [jsx("defs", {
+      children: jsx("filter", {
+        id: "softShadow",
+        x: "-20%",
+        y: "-20%",
+        width: "140%",
+        height: "140%",
+        children: jsx("feDropShadow", {
+          dx: "0",
+          dy: "2",
+          stdDeviation: "4",
+          floodColor: "#000000",
+          floodOpacity: "0.1"
+        })
+      })
+    }), jsx("rect", {
+      x: "0",
+      y: "0",
+      width: "58",
+      height: "50",
+      rx: "8",
+      fill: "#ffffff",
+      filter: "url(#softShadow)"
+    })]
+  })
+}, {
+  key: 'realDark',
+  title: 'realDark',
+  svg: jsxs("svg", {
+    width: "58",
+    height: "50",
+    viewBox: "0 0 58 50",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [jsx("rect", {
+      x: "0",
+      y: "0",
+      width: "58",
+      height: "50",
+      rx: "8",
+      fill: "#ffffff"
+    }), jsx("path", {
+      d: "M0,8\n                       A8,8 0 0 1 8,0\n                       H18\n                       V50\n                       H8\n                       A8,8 0 0 1 0,42\n                       Z",
+      fill: "#011627"
+    })]
+  })
+}, {
+  key: 'dark',
+  title: 'Dark',
+  svg: jsxs("svg", {
+    width: "58",
+    height: "50",
+    viewBox: "0 0 58 50",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: [jsx("rect", {
+      width: "58",
+      height: "50",
+      rx: "8",
+      fill: "#000000"
+    }), jsx("clipPath", {
+      id: "roundedClip",
+      children: jsx("rect", {
+        width: "58",
+        height: "50",
+        rx: "8"
+      })
+    }), jsxs("g", {
+      clipPath: "url(#roundedClip)",
+      children: [jsx("rect", {
+        x: "0",
+        y: "13",
+        width: "29",
+        height: "37",
+        fill: "#0d1117"
+      }), jsx("rect", {
+        x: "29",
+        y: "13",
+        width: "29",
+        height: "37",
+        fill: "#233445"
+      })]
+    })]
+  })
+}];
+function CheckBoxTheme(props) {
   const {
     list,
     changeSetting,
     settings
   } = props;
   return jsx("div", {
-    className: "flex flex-row",
-    children: list.map((themeItems, index) => {
-      return jsxs("div", {
-        className: "w-16 h-12 shadow-sm rounded cursor-pointer",
+    className: "flex flex-row gap-4",
+    children: themelist.map((themeItems, index) => {
+      return jsx("div", {
+        className: "relative cursor-pointer hover:opacity-80 transition-opacity",
         style: {
           boxShadow: '0 1px 2.5px 0 rgb(0 0 0 / 18%)'
         },
         onClick: () => {
           changeSetting('navTheme', themeItems.key);
-          changeSetting('primaryColor', settings.primaryColor);
+          changeSetting('primaryColor', settings?.primaryColor);
         },
-        children: [jsx("div", {
-          className: "h-3/10 rounded-t",
-          style: {
-            backgroundColor: themeItems.key == 'dark' ? 'rgba(6,25,45,1)' : '#ffff'
-          }
-        }), jsxs("div", {
-          className: "flex h-7/10",
-          children: [jsx("div", {
-            className: "w-3/10 rounded-bl",
-            style: {
-              backgroundColor: themeItems.key === 'dark' ? 'rgba(13,32,51,1)' : '#ffff'
-            }
-          }), jsx("div", {
-            className: "w-7/10 rounded-br",
-            style: {
-              backgroundColor: themeItems.key == 'dark' ? 'rgba(38,55,72,1)' : '#f0f2f5'
-            }
+        children: jsxs("div", {
+          children: [themeItems.svg, settings?.navTheme === themeItems.key && jsx("svg", {
+            className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-6 h-6 text-blue-500",
+            viewBox: "0 0 24 24",
+            fill: "currentColor",
+            children: jsx("path", {
+              d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
+            })
           })]
-        }), settings?.navTheme == themeItems.key ? jsx("svg", {
-          className: "relative -bottom-8 left-8 w-4 h-4",
-          viewBox: "0 0 24 24",
-          fill: "currentColor",
-          children: jsx("path", {
-            d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"
-          })
-        }) : '']
+        })
       }, `themeItem_${index}`);
     })
   });

package/lib/components/SettingDrawer/CheckBoxTheme.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxTheme.js","sources":["../../../src/components/SettingDrawer/CheckBoxTheme.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"yCAQwB,SAAA,aAAa,CAAC,KAA0B,EAAA;QACtD;AACN,IAAA,IAAA;AAGY,IAAA,aAAA;AAMY,IAAA;AACA,GAAA,GAAA,KAAA;AACJ,EAAA,OAAAA,GAAA,CAAA;AAKQ,IAAA,SAAA,EAAA,eAAA;AACH,IAAA,QAAA,EAAA,IAAA,CAAA,GAAA,CAAA,CAAA,UAEL,EAAA,KAAA,KAAc;AAIF,MAAA,OAAAC,IAAA,CAAA,KAAA,EAAA;AACH,QAAA,SAAA,EAAA,4CAGS;AAEN,QAAA,KAAA,EAAA;;SAavB;AAGb,QAAC,OAAA,EAAA,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CheckBoxTheme.js","sources":["../../../src/components/SettingDrawer/CheckBoxTheme.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":"yCAGA,MAAM,SAAS,GAAG,CAAA;AACd,EAAA,GAAA,EAAA,OAAA;AACI,EAAA,KAAA,EAAA,OAAY;AACZ,EAAA,GAAA,EAAAA,IAAA,CAAK,KAAS,EAAA;SACX,EAAA,IACM;AASZ,IAAA,MAAA,EAAA,IAAA;AACD,IAAA,OAAA,EAAA,WAAA;AACI,IAAA,KAAA,EAAG,4BAAY;AACf,IAAA,QAAA,GAAOC,GAAU,CAAA,MAAA,EAAA;cAEb,EAAAA,GAAA,CAAA,QAAK,EAAK;AAcjB,QAAA,EAAA,EAAA,YAAA;AACD,QAAA,CAAA,EAAA,MAAA;AACI,QAAA,CAAA,EAAG,MAAQ;AACX,QAAA,KAAK,EAAE,MAAM;QACb,MACI,EAAK,MAAA;AAWZ,QAAA,QAAA,EAAAA,GAAA,CAAA,cAAA,EAAA;UACH,EAAA,EAAA,GAAA;AAEF,UAAO,EAAA,EAAO,GAAU;UACd,YAAQ,EAAA,GAAA;AACd,UAAA,UACI,EAAA,SAAc;AAEN,UAAA,YAGQ,EAAA;AAGI,SAAA;AACA,OAAA;AACJ,KAAA,CAAA,EAAAA,GAAA,CAAA;SAiBX,GACC;AAEd,MAAC,CAAA,EAAA,GAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/SettingDrawer/LayoutChange.d.ts

@@ -1,7 +1,3 @@
-import { ProSettings } from '../defaultSettings';
-export type ILayoutSettingsProps = {
-    settings?: Partial<ProSettings>;
-    changeSetting?: (key: string, value: string | boolean) => void;
-};
+import { ILayoutSettingsProps } from './types';
 export default function LayoutChange(props: ILayoutSettingsProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=LayoutChange.d.ts.map

package/lib/components/SettingDrawer/LayoutChange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutChange.d.ts","sourceRoot":"","sources":["../../../src/components/SettingDrawer/LayoutChange.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AAEjD,MAAM,MAAM,oBAAoB,GAAG;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;IAChC,aAAa,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CAClE,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,oBAAoB,2CAsE/D"}
+{"version":3,"file":"LayoutChange.d.ts","sourceRoot":"","sources":["../../../src/components/SettingDrawer/LayoutChange.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,KAAK,EAAE,oBAAoB,2CA0C/D"}

package/lib/components/SettingDrawer/LayoutChange.js

@@ -1,5 +1,4 @@
-import {jsxs,jsx}from'react/jsx-runtime';import {useState}from'react';import {useTranslation}from'react-i18next';import {Switch}from'./Switch/index.js';function LayoutChange(props) {
-  useState();
+import {jsxs,jsx}from'react/jsx-runtime';import {useTranslation}from'react-i18next';import {Switch}from'./Switch/index.js';function LayoutChange(props) {
   const {
     settings,
     changeSetting
@@ -8,61 +7,58 @@ import {jsxs,jsx}from'react/jsx-runtime';import {useState}from'react';import {us
     t
   } = useTranslation('settings');
   const {
-    contentWidth,
-    splitMenus,
-    fixedHeader,
-    layout,
-    fixSiderbar,
+    layout = {},
     navTheme
-  } = settings;
+  } = settings || {};
+  const handleLayoutChange = (key, value) => {
+    if (!changeSetting) return;
+    changeSetting('layout', {
+      ...layout,
+      [key]: value
+    });
+  };
   return jsxs("div", {
     children: [jsxs("div", {
       className: "flex items-center mt-4",
       children: [jsx("p", {
         className: "mb-0",
         style: {
-          color: navTheme == 'dark' ? '#ffff' : 'black'
+          color: navTheme === 'dark' ? '#ffff' : 'black'
         },
         children: t('fixed_header')
       }), jsx("div", {
         className: "flex-grow"
       }), jsx(Switch, {
-        value: fixedHeader,
-        settingKey: "fixedHeader",
-        changeSetting: changeSetting,
-        settings: settings
+        value: layout.fixedHeader,
+        onChange: checked => handleLayoutChange('fixedHeader', checked)
       })]
     }), jsxs("div", {
       className: "flex items-center mt-4",
       children: [jsx("p", {
         className: "mb-0",
         style: {
-          color: navTheme == 'dark' ? '#ffff' : 'black'
+          color: navTheme === 'dark' ? '#ffff' : 'black'
         },
         children: t('fixed_sidebar')
       }), jsx("div", {
         className: "flex-grow"
       }), jsx(Switch, {
-        value: fixSiderbar,
-        settingKey: "fixSiderbar",
-        changeSetting: changeSetting,
-        settings: settings
+        value: layout.fixedSidebar,
+        onChange: checked => handleLayoutChange('fixedSidebar', checked)
       })]
     }), jsxs("div", {
       className: "flex items-center mt-4",
       children: [jsx("p", {
         className: "mb-0",
         style: {
-          color: navTheme == 'dark' ? '#ffff' : 'black'
+          color: navTheme === 'dark' ? '#ffff' : 'black'
         },
         children: t('split_menus')
       }), jsx("div", {
         className: "flex-grow"
       }), jsx(Switch, {
-        value: splitMenus,
-        settingKey: "splitMenus",
-        changeSetting: changeSetting,
-        settings: settings
+        value: layout.splitMenus,
+        onChange: checked => handleLayoutChange('splitMenus', checked)
       })]
     })]
   });

package/lib/components/SettingDrawer/LayoutChange.js.map

@@ -1 +1 @@
-{"version":3,"file":"LayoutChange.js","sources":["../../../src/components/SettingDrawer/LayoutChange.tsx"],"sourcesContent":[null],"names":[],"mappings":"wJAWwB,SAAA,YAAY,CAAC,KAA2B,EAAA;EAClB,QAAA;AAC1C,EAAA,MAAA;IACA,QAAQ;AACR,IAAA;AACA,GAAA,GAAA,KAAyB;AACrB,EAAA,MAAA;AACJ,IAAA;AAEA,GAAA,GAAA,cA4BQ,CAAA,UAAA,CAAA;AAiCZ,EAAC,MAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"LayoutChange.js","sources":["../../../src/components/SettingDrawer/LayoutChange.tsx"],"sourcesContent":[null],"names":[],"mappings":"2HAKwB,SAAA,YAAY,CAAC,KAA2B,EAAA;AAC5D,EAAA,MAAA;IACA,QAAQ;IACR;AAEA,GAAA,GAAA;AACI,EAAA,MAAA;;oBAEa,CAAA,UAAW,CAAA;AACpB,EAAA,MAAA;aACC,EAAA;AACJ,IAAA;AACL,GAAA,GAAE,QAAA,IAAA,EAAA;QAEK,gCAEM,KAAA;AA0BjB,IAAC,IAAA,CAAA,aAAA,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/lib/components/SettingDrawer/NavigationsModes.d.ts

@@ -0,0 +1,3 @@
+import { NavMenuSelectorProps } from './types';
+export default function NavigationModes({ changeSetting, settings }: NavMenuSelectorProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=NavigationsModes.d.ts.map

package/lib/components/SettingDrawer/NavigationsModes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationsModes.d.ts","sourceRoot":"","sources":["../../../src/components/SettingDrawer/NavigationsModes.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA2E/C,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,aAAa,EAAE,QAAQ,EAAE,EAAE,oBAAoB,2CAoExF"}