@compill/admin 1.0.68 → 1.0.70

package/index.cjs.js

@@ -2840,51 +2840,55 @@ function Content(_a) {
   }));
 }
 
-/**
- *
- *
- */
-function Menu(_a) {
+function SelectedIndicator({
+  darkMode
+}) {
+  return jsxRuntime.jsx("div", {
+    position: "absolute",
+    bgColor: darkMode ? "white" : "black",
+    bgOpacity: "90",
+    w: "0.5",
+    h: "6",
+    top: "1.5",
+    start: "-4"
+  });
+}
+
+function MenuButton(_a) {
   var {
+      depth,
       darkMode,
-      config,
-      useNextRouter
+      icon,
+      selected,
+      children
     } = _a,
-    props = __rest$1(_a, ["darkMode", "config", "useNextRouter"]);
-  const Comp = useNextRouter ? NextMenuItem : MenuItem;
-  return jsxRuntime.jsx("ul", Object.assign({}, props, {
-    children: config.map((item, index) => {
-      if (item.type == "divider") return jsxRuntime.jsx(Divider, {
-        title: item.label
-      }, index);
-      if (item.type == "item") {
-        return jsxRuntime.jsx(Comp, {
-          icon: item.icon,
-          path: item.path,
-          depth: 0,
-          darkMode: darkMode,
-          subMenu: item.children,
-          children: item.label
-        }, index);
-      }
-    })
+    props = __rest$1(_a, ["depth", "darkMode", "icon", "selected", "children"]);
+  return jsxRuntime.jsxs(ui.Button, Object.assign({
+    as: "li",
+    minH: "8",
+    ms: `${(depth !== null && depth !== void 0 ? depth : 0) * 2}`,
+    p: "2",
+    font: "title",
+    textColor: darkMode ? "white" : "black",
+    fontWeight: "600",
+    rounded: "lg",
+    textSize: "sm",
+    variant: "borderless",
+    hover_bgColor: darkMode ? "white" : "black",
+    hover_bgOpacity: "10",
+    hover_textColor: darkMode ? "white" : "zinc-800",
+    cursor: "pointer",
+    dflex: true,
+    alignItems: "center",
+    gap: "3"
+  }, props, {
+    children: [icon && jsxRuntime.jsx(ui.Icon, {
+      path: icon,
+      opacity: selected ? "100" : "60"
+    }), children]
   }));
 }
-function Divider({
-  title
-}) {
-  return jsxRuntime.jsx("div", {
-    px: "2",
-    mt: "5",
-    mb: "2",
-    opacity: "75",
-    textTransform: "capitalize",
-    letterSpacing: "widest",
-    fontWeight: "700",
-    textSize: "xs",
-    children: title
-  });
-}
+
 function MenuItem(_a) {
   var {
       icon,
@@ -2923,6 +2927,7 @@ function MenuItem(_a) {
     }, index))]
   });
 }
+
 function NextMenuItem(_a) {
   var {
       icon,
@@ -2952,7 +2957,7 @@ function NextMenuItem(_a) {
       }, props)), match && jsxRuntime.jsx(SelectedIndicator, {
         darkMode: darkMode
       })]
-    }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((item, index) => jsxRuntime.jsx(MenuItem, {
+    }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((item, index) => jsxRuntime.jsx(NextMenuItem, {
       icon: item.icon,
       path: item.path,
       depth: (depth !== null && depth !== void 0 ? depth : 0) + 1,
@@ -2962,51 +2967,50 @@ function NextMenuItem(_a) {
     }, index))]
   });
 }
-function MenuButton(_a) {
+
+/**
+ *
+ *
+ */
+function Menu(_a) {
   var {
-      depth,
       darkMode,
-      icon,
-      selected,
-      children
+      config,
+      useNextRouter
     } = _a,
-    props = __rest$1(_a, ["depth", "darkMode", "icon", "selected", "children"]);
-  return jsxRuntime.jsxs(ui.Button, Object.assign({
-    as: "li",
-    minH: "8",
-    ms: `${(depth !== null && depth !== void 0 ? depth : 0) * 2}`,
-    p: "2",
-    font: "title",
-    textColor: darkMode ? "white" : "black",
-    fontWeight: "600",
-    rounded: "lg",
-    textSize: "sm",
-    variant: "borderless",
-    hover_bgColor: darkMode ? "white" : "black",
-    hover_bgOpacity: "10",
-    hover_textColor: darkMode ? "white" : "zinc-800",
-    cursor: "pointer",
-    dflex: true,
-    alignItems: "center",
-    gap: "3"
-  }, props, {
-    children: [icon && jsxRuntime.jsx(ui.Icon, {
-      path: icon,
-      opacity: selected ? "100" : "60"
-    }), children]
+    props = __rest$1(_a, ["darkMode", "config", "useNextRouter"]);
+  const Comp = useNextRouter ? NextMenuItem : MenuItem;
+  return jsxRuntime.jsx("ul", Object.assign({}, props, {
+    children: config.map((item, index) => {
+      if (item.type == "divider") return jsxRuntime.jsx(Divider, {
+        title: item.label
+      }, index);
+      if (item.type == "item") {
+        return jsxRuntime.jsx(Comp, {
+          icon: item.icon,
+          path: item.path,
+          depth: 0,
+          darkMode: darkMode,
+          subMenu: item.children,
+          children: item.label
+        }, index);
+      }
+    })
   }));
 }
-function SelectedIndicator({
-  darkMode
+function Divider({
+  title
 }) {
   return jsxRuntime.jsx("div", {
-    position: "absolute",
-    bgColor: darkMode ? "white" : "black",
-    bgOpacity: "90",
-    w: "0.5",
-    h: "6",
-    top: "1.5",
-    start: "-4"
+    px: "2",
+    mt: "5",
+    mb: "2",
+    opacity: "75",
+    textTransform: "capitalize",
+    letterSpacing: "widest",
+    fontWeight: "700",
+    textSize: "xs",
+    children: title
   });
 }
 

package/index.esm.js

@@ -2830,51 +2830,55 @@ function Content(_a) {
   }));
 }
 
-/**
- *
- *
- */
-function Menu(_a) {
+function SelectedIndicator({
+  darkMode
+}) {
+  return jsx("div", {
+    position: "absolute",
+    bgColor: darkMode ? "white" : "black",
+    bgOpacity: "90",
+    w: "0.5",
+    h: "6",
+    top: "1.5",
+    start: "-4"
+  });
+}
+
+function MenuButton(_a) {
   var {
+      depth,
       darkMode,
-      config,
-      useNextRouter
+      icon,
+      selected,
+      children
     } = _a,
-    props = __rest$1(_a, ["darkMode", "config", "useNextRouter"]);
-  const Comp = useNextRouter ? NextMenuItem : MenuItem;
-  return jsx("ul", Object.assign({}, props, {
-    children: config.map((item, index) => {
-      if (item.type == "divider") return jsx(Divider, {
-        title: item.label
-      }, index);
-      if (item.type == "item") {
-        return jsx(Comp, {
-          icon: item.icon,
-          path: item.path,
-          depth: 0,
-          darkMode: darkMode,
-          subMenu: item.children,
-          children: item.label
-        }, index);
-      }
-    })
+    props = __rest$1(_a, ["depth", "darkMode", "icon", "selected", "children"]);
+  return jsxs(Button, Object.assign({
+    as: "li",
+    minH: "8",
+    ms: `${(depth !== null && depth !== void 0 ? depth : 0) * 2}`,
+    p: "2",
+    font: "title",
+    textColor: darkMode ? "white" : "black",
+    fontWeight: "600",
+    rounded: "lg",
+    textSize: "sm",
+    variant: "borderless",
+    hover_bgColor: darkMode ? "white" : "black",
+    hover_bgOpacity: "10",
+    hover_textColor: darkMode ? "white" : "zinc-800",
+    cursor: "pointer",
+    dflex: true,
+    alignItems: "center",
+    gap: "3"
+  }, props, {
+    children: [icon && jsx(Icon, {
+      path: icon,
+      opacity: selected ? "100" : "60"
+    }), children]
   }));
 }
-function Divider({
-  title
-}) {
-  return jsx("div", {
-    px: "2",
-    mt: "5",
-    mb: "2",
-    opacity: "75",
-    textTransform: "capitalize",
-    letterSpacing: "widest",
-    fontWeight: "700",
-    textSize: "xs",
-    children: title
-  });
-}
+
 function MenuItem(_a) {
   var {
       icon,
@@ -2913,6 +2917,7 @@ function MenuItem(_a) {
     }, index))]
   });
 }
+
 function NextMenuItem(_a) {
   var {
       icon,
@@ -2942,7 +2947,7 @@ function NextMenuItem(_a) {
       }, props)), match && jsx(SelectedIndicator, {
         darkMode: darkMode
       })]
-    }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((item, index) => jsx(MenuItem, {
+    }), subMenu === null || subMenu === void 0 ? void 0 : subMenu.map((item, index) => jsx(NextMenuItem, {
       icon: item.icon,
       path: item.path,
       depth: (depth !== null && depth !== void 0 ? depth : 0) + 1,
@@ -2952,51 +2957,50 @@ function NextMenuItem(_a) {
     }, index))]
   });
 }
-function MenuButton(_a) {
+
+/**
+ *
+ *
+ */
+function Menu(_a) {
   var {
-      depth,
       darkMode,
-      icon,
-      selected,
-      children
+      config,
+      useNextRouter
     } = _a,
-    props = __rest$1(_a, ["depth", "darkMode", "icon", "selected", "children"]);
-  return jsxs(Button, Object.assign({
-    as: "li",
-    minH: "8",
-    ms: `${(depth !== null && depth !== void 0 ? depth : 0) * 2}`,
-    p: "2",
-    font: "title",
-    textColor: darkMode ? "white" : "black",
-    fontWeight: "600",
-    rounded: "lg",
-    textSize: "sm",
-    variant: "borderless",
-    hover_bgColor: darkMode ? "white" : "black",
-    hover_bgOpacity: "10",
-    hover_textColor: darkMode ? "white" : "zinc-800",
-    cursor: "pointer",
-    dflex: true,
-    alignItems: "center",
-    gap: "3"
-  }, props, {
-    children: [icon && jsx(Icon, {
-      path: icon,
-      opacity: selected ? "100" : "60"
-    }), children]
+    props = __rest$1(_a, ["darkMode", "config", "useNextRouter"]);
+  const Comp = useNextRouter ? NextMenuItem : MenuItem;
+  return jsx("ul", Object.assign({}, props, {
+    children: config.map((item, index) => {
+      if (item.type == "divider") return jsx(Divider, {
+        title: item.label
+      }, index);
+      if (item.type == "item") {
+        return jsx(Comp, {
+          icon: item.icon,
+          path: item.path,
+          depth: 0,
+          darkMode: darkMode,
+          subMenu: item.children,
+          children: item.label
+        }, index);
+      }
+    })
   }));
 }
-function SelectedIndicator({
-  darkMode
+function Divider({
+  title
 }) {
   return jsx("div", {
-    position: "absolute",
-    bgColor: darkMode ? "white" : "black",
-    bgOpacity: "90",
-    w: "0.5",
-    h: "6",
-    top: "1.5",
-    start: "-4"
+    px: "2",
+    mt: "5",
+    mb: "2",
+    opacity: "75",
+    textTransform: "capitalize",
+    letterSpacing: "widest",
+    fontWeight: "700",
+    textSize: "xs",
+    children: title
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@compill/admin",
-    "version": "1.0.68",
+    "version": "1.0.70",
     "module": "./index.esm.js",
     "main": "./index.cjs.js"
 }

package/src/index.d.ts

@@ -20,7 +20,7 @@ export * from "./lib/json/types/TabbedView";
 export * from "./lib/json/types/TableView";
 export * from "./lib/layout/AdminLayout";
 export * from "./lib/layout/ButtonBar";
-export * from "./lib/layout/Menu";
+export * from "./lib/layout/menu/Menu";
 export * from "./lib/modal/AttachDialog";
 export * from "./lib/modal/FormActionDialog";
 export * from "./lib/page/PageContainer";

package/src/lib/layout/AdminLayout.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Color, ParentComponent, SoperioComponent } from "@soperio/react";
-import { MenuConfig } from "./Menu";
+import { MenuConfig } from "./menu/MenuConfig";
 interface LayoutProps extends SoperioComponent, ParentComponent {
     color: Color;
     darkMode?: boolean;

package/src/lib/layout/Sidebar.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { Color, ParentComponent, SoperioComponent } from "@soperio/react";
-import { MenuConfig } from "./Menu";
+import { MenuConfig } from "./menu/MenuConfig";
 interface SidebarProps extends SoperioComponent, ParentComponent {
     show?: boolean;
     color: Color;

package/src/lib/layout/{Menu.d.ts → menu/Menu.d.ts}

@@ -1,26 +1,13 @@
 /// <reference types="react" />
 import { ParentComponent, SoperioComponent } from "@soperio/react";
+import { MenuConfig } from "./MenuConfig";
 export interface MenuProps extends SoperioComponent, ParentComponent {
     darkMode?: boolean;
     config: MenuConfig;
     useNextRouter?: boolean;
 }
-export type MenuConfig = MenuItems;
-type MenuItems = (MenuItem | MenuDivider)[];
-export type MenuItem = {
-    type: "item";
-    path: string;
-    icon?: string;
-    label: string;
-    children?: MenuItem[];
-};
-export type MenuDivider = {
-    type: "divider";
-    label?: string;
-};
 /**
  *
  *
  */
 export declare function Menu({ darkMode, config, useNextRouter, ...props }: MenuProps): JSX.Element;
-export {};

package/src/lib/layout/menu/MenuButton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ButtonProps } from "@valerya/ui";
+export declare function MenuButton({ depth, darkMode, icon, selected, children, ...props }: {
+    depth?: number;
+    icon?: string;
+    darkMode?: boolean;
+} & ButtonProps): JSX.Element;

package/src/lib/layout/menu/MenuConfig.d.ts

@@ -0,0 +1,13 @@
+export type MenuConfig = MenuItems;
+export type MenuItems = (Item | MenuDivider)[];
+export type Item = {
+    type: "item";
+    path: string;
+    icon?: string;
+    label: string;
+    children?: Item[];
+};
+export type MenuDivider = {
+    type: "divider";
+    label?: string;
+};

package/src/lib/layout/menu/MenuItem.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ParentComponent, SoperioComponent } from "@soperio/react";
+import { Item } from "./MenuConfig";
+interface MenuItemProps extends SoperioComponent, ParentComponent {
+    path: string;
+    depth?: number;
+    icon?: string;
+    darkMode?: boolean;
+    subMenu?: Item[];
+}
+export declare function MenuItem({ icon, path, depth, darkMode, subMenu, children, ...props }: MenuItemProps): JSX.Element;
+export {};

package/src/lib/layout/menu/NextMenuItem.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { ParentComponent, SoperioComponent } from "@soperio/react";
+import { Item } from "./MenuConfig";
+interface NextMenuItemProps extends SoperioComponent, ParentComponent {
+    path: string;
+    depth?: number;
+    icon?: string;
+    darkMode?: boolean;
+    subMenu?: Item[];
+}
+export declare function NextMenuItem({ icon, path, depth, darkMode, subMenu, children, ...props }: NextMenuItemProps): JSX.Element;
+export {};

package/src/lib/layout/menu/SelectedIndicator.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare function SelectedIndicator({ darkMode }: {
+    darkMode?: boolean;
+}): JSX.Element;