@omnitron-dev/prism 0.3.0 → 0.3.1

package/dist/{chunk-Z5OSPAOC.js → chunk-4Z5DE5GK.js}

@@ -1,5 +1,8 @@
+import { SidebarToggle } from './chunk-PFT2BNYO.js';
 import { ARIA_LABELS, SkipLink } from './chunk-AD4W7HYC.js';
 import { useSettingsStore } from './chunk-XIXSSI3B.js';
+import { Scrollbar } from './chunk-PXXPLHIY.js';
+import { CloseIcon, MenuIcon } from './chunk-PGHEP4JD.js';
 import { createContext, useState, useMemo, useCallback, useContext, Fragment as Fragment$1, useEffect } from 'react';
 import { useTheme, useMediaQuery } from '@mui/material';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -18,7 +21,6 @@ import MenuItem from '@mui/material/MenuItem';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import IconButton from '@mui/material/IconButton';
-import SvgIcon from '@mui/material/SvgIcon';
 import Drawer from '@mui/material/Drawer';
 import List from '@mui/material/List';
 import ListSubheader from '@mui/material/ListSubheader';
@@ -500,6 +502,7 @@ function HeaderSection({
   return /* @__PURE__ */ jsxs(
     StyledAppBar,
     {
+      color: "transparent",
       position: disableSticky ? "static" : "sticky",
       isOffset,
       disableOffset,
@@ -757,6 +760,17 @@ function UserMenu({
     )
   ] });
 }
+
+// src/layouts/dashboard/labels.ts
+var dashboardLabels = {
+  openMenu: "Open menu",
+  closeMenu: "Close menu",
+  collapseSidebar: "Collapse sidebar",
+  expandSidebar: "Expand sidebar",
+  navigation: "Main navigation",
+  main: "Main content",
+  skipToContent: "Skip to main content"
+};
 var NavRoot = styled(Box8, {
   shouldForwardProp: (prop) => !["variant", "collapsed"].includes(prop)
 })(({ theme, variant, collapsed }) => {
@@ -791,52 +805,27 @@ var NavContent = styled(Box8)({
   flex: 1,
   overflow: "hidden"
 });
-var NavScrollArea = styled(Box8)({
-  flex: 1,
-  overflow: "auto",
-  // Custom scrollbar
-  "&::-webkit-scrollbar": {
-    width: 6
-  },
-  "&::-webkit-scrollbar-thumb": {
-    backgroundColor: "rgba(0, 0, 0, 0.2)",
-    borderRadius: 3
-  }
-});
-var CollapseButton = styled(IconButton)(({ theme }) => ({
-  position: "absolute",
-  top: HEADER_HEIGHTS.desktop / 2,
-  transform: "translateY(-50%)",
-  right: -12,
-  width: 24,
-  height: 24,
-  backgroundColor: theme.palette.background.paper,
-  border: `1px solid ${theme.palette.divider}`,
-  boxShadow: theme.shadows[1],
-  "&:hover": {
-    backgroundColor: theme.palette.action.hover
-  },
-  "& svg": {
-    width: 16,
-    height: 16
-  }
-}));
+var NavScrollArea = styled(Scrollbar)({ flex: 1 });
 function Sidenav({
   logo,
+  compactLogo,
   navData,
   renderNavItem,
   footer,
   showCollapseButton = true,
   layoutQuery = "md",
   "aria-label": ariaLabel = ARIA_LABELS.mainNav,
+  labels: customLabels,
   sx
 }) {
+  const labels = { ...dashboardLabels, ...customLabels };
   const { config, toggleSidenavCollapse } = useLayoutContext();
   const { sidenavVariant, sidenavCollapsed } = config;
   const showText = !sidenavCollapsed && sidenavVariant !== "mini";
   return /* @__PURE__ */ jsxs(
     NavRoot,
     {
+      as: "nav",
       role: "navigation",
       "aria-label": ariaLabel,
       variant: sidenavVariant,
@@ -859,7 +848,7 @@ function Sidenav({
               px: showText ? 3 : 1,
               flexShrink: 0
             },
-            children: logo
+            children: showText || compactLogo === void 0 ? logo : compactLogo
           }
         ),
         /* @__PURE__ */ jsx(Divider, {}),
@@ -893,13 +882,11 @@ function Sidenav({
           footer && /* @__PURE__ */ jsx(Box8, { sx: { flexShrink: 0, p: 2 }, children: footer })
         ] }),
         showCollapseButton && sidenavVariant !== "mini" && /* @__PURE__ */ jsx(
-          CollapseButton,
+          SidebarToggle,
           {
+            collapsed: sidenavCollapsed,
             onClick: toggleSidenavCollapse,
-            size: "small",
-            "aria-label": sidenavCollapsed ? "Expand sidebar" : "Collapse sidebar",
-            "aria-expanded": !sidenavCollapsed,
-            children: /* @__PURE__ */ jsx(ChevronIcon, { direction: sidenavCollapsed ? "right" : "left" })
+            labels: { expand: labels.expandSidebar, collapse: labels.collapseSidebar }
           }
         )
       ]
@@ -913,15 +900,23 @@ function MobileSidenav({
   footer,
   layoutQuery = "md",
   "aria-label": ariaLabel = ARIA_LABELS.mainNav,
+  labels: customLabels,
   sx
 }) {
-  const { config, toggleDrawer } = useLayoutContext();
+  const labels = { ...dashboardLabels, ...customLabels };
+  const { config, setConfig } = useLayoutContext();
+  const location = useLocation();
+  const close = () => setConfig({ drawerOpen: false });
+  useEffect(() => {
+    setConfig({ drawerOpen: false });
+  }, [location.key, setConfig]);
   const { drawerOpen } = config;
   return /* @__PURE__ */ jsxs(
     Drawer,
     {
       open: drawerOpen,
-      onClose: toggleDrawer,
+      onClose: close,
+      slotProps: { paper: { role: "dialog", "aria-modal": true, "aria-label": ariaLabel } },
       "aria-label": ariaLabel,
       sx: [
         (theme) => ({
@@ -934,7 +929,7 @@ function MobileSidenav({
         ...Array.isArray(sx) ? sx : [sx]
       ],
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           Box8,
           {
             sx: {
@@ -943,11 +938,14 @@ function MobileSidenav({
               height: { xs: HEADER_HEIGHTS.mobile, md: HEADER_HEIGHTS.desktop },
               px: 2.5
             },
-            children: logo
+            children: [
+              /* @__PURE__ */ jsx(Box8, { sx: { flex: 1 }, children: logo }),
+              /* @__PURE__ */ jsx(IconButton, { "aria-label": labels.closeMenu, onClick: close, children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" }) })
+            ]
           }
         ),
         /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx(Box8, { component: "nav", role: "navigation", sx: { flex: 1, overflow: "auto" }, children: navData?.map((section) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(Box8, { component: "nav", role: "navigation", "aria-label": ariaLabel, sx: { flex: 1, overflow: "auto" }, children: navData?.map((section) => /* @__PURE__ */ jsx(
           List,
           {
             subheader: section.subheader ? /* @__PURE__ */ jsx(
@@ -976,7 +974,7 @@ function MobileSidenav({
     }
   );
 }
-function DefaultNavItem({ item, showText, depth, active }) {
+function DefaultNavItem({ item, showText, depth, active, current }) {
   const button = /* @__PURE__ */ jsxs(
     ListItemButton,
     {
@@ -984,6 +982,9 @@ function DefaultNavItem({ item, showText, depth, active }) {
       ...item.path ? { to: item.path } : {},
       disabled: item.disabled,
       selected: active,
+      "aria-current": current,
+      "aria-label": item.title,
+      title: item.caption,
       sx: (theme) => ({
         minHeight: 44,
         borderRadius: 1,
@@ -1048,25 +1049,16 @@ function NavItemWithActive({ item, showText, depth }) {
   const { pathname } = useLocation();
   const { isItemActive } = useNavActive(pathname);
   const active = isItemActive(item);
-  return /* @__PURE__ */ jsx(DefaultNavItem, { item, showText, depth, active }, item.id);
-}
-function ChevronIcon({ direction }) {
   return /* @__PURE__ */ jsx(
-    "svg",
+    DefaultNavItem,
     {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      focusable: "false",
-      style: {
-        transform: direction === "right" ? "rotate(180deg)" : void 0
-      },
-      children: /* @__PURE__ */ jsx("polyline", { points: "15 18 9 12 15 6" })
-    }
+      item,
+      showText,
+      depth,
+      active,
+      current: active ? pathname.replace(/\/$/, "") === item.path?.replace(/\/$/, "") ? "page" : "location" : void 0
+    },
+    item.id
   );
 }
 var TopnavRoot = styled("nav")(({ theme }) => ({
@@ -1151,9 +1143,6 @@ function DefaultTopnavItem({ item }) {
     }
   );
 }
-function MenuIcon() {
-  return /* @__PURE__ */ jsx(SvgIcon, { children: /* @__PURE__ */ jsx("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" }) });
-}
 var MainWrapper = styled(Box8, {
   shouldForwardProp: (prop) => !["hasSidebar", "sidebarWidth", "layoutQuery"].includes(prop)
 })(({ theme, hasSidebar, sidebarWidth, layoutQuery }) => ({
@@ -1164,7 +1153,8 @@ var MainWrapper = styled(Box8, {
   // Adjust margin for sidebar on desktop
   ...hasSidebar && {
     [theme.breakpoints.up(layoutQuery)]: {
-      marginLeft: sidebarWidth
+      marginLeft: sidebarWidth,
+      minWidth: 0
     }
   },
   // Smooth transition
@@ -1178,10 +1168,13 @@ function DashboardLayoutInternal({
   navData,
   headerSlots,
   logo,
+  compactLogo,
   footer,
   sidenavFooter,
-  slotProps
+  slotProps,
+  labels: customLabels
 }) {
+  const labels = { ...dashboardLabels, ...customLabels };
   const config = useLayoutConfig();
   const { toggleDrawer } = useLayoutContext();
   const {
@@ -1199,7 +1192,9 @@ function DashboardLayoutInternal({
       IconButton,
       {
         onClick: toggleDrawer,
-        "aria-label": "Open menu",
+        "aria-label": labels.openMenu,
+        "aria-haspopup": "dialog",
+        "aria-expanded": config.drawerOpen,
         sx: {
           display: { xs: "inline-flex", [layoutQuery]: "none" },
           bgcolor: "transparent",
@@ -1216,9 +1211,9 @@ function DashboardLayoutInternal({
         headerSlots?.leftArea
       ] })
     };
-  }, [hasSidebar, headerSlots, toggleDrawer, layoutQuery]);
+  }, [hasSidebar, headerSlots, toggleDrawer, layoutQuery, labels.openMenu, config.drawerOpen]);
   return /* @__PURE__ */ jsxs(MainWrapper, { hasSidebar, sidebarWidth, layoutQuery, children: [
-    /* @__PURE__ */ jsx(SkipLink, { href: "#main-content", children: "Skip to main content" }),
+    /* @__PURE__ */ jsx(SkipLink, { href: `#${slotProps?.main?.id ?? "main-content"}`, children: labels.skipToContent }),
     /* @__PURE__ */ jsx(
       HeaderSection,
       {
@@ -1243,10 +1238,12 @@ function DashboardLayoutInternal({
         Sidenav,
         {
           logo,
+          compactLogo,
           navData,
           footer: sidenavFooter,
           layoutQuery,
-          "aria-label": ARIA_LABELS.mainNav
+          "aria-label": labels.navigation,
+          labels
         }
       ),
       /* @__PURE__ */ jsx(
@@ -1256,7 +1253,8 @@ function DashboardLayoutInternal({
           navData,
           footer: sidenavFooter,
           layoutQuery,
-          "aria-label": ARIA_LABELS.mainNav
+          "aria-label": labels.navigation,
+          labels
         }
       )
     ] }),
@@ -1264,9 +1262,10 @@ function DashboardLayoutInternal({
       Box8,
       {
         component: "main",
-        id: "main-content",
+        id: slotProps?.main?.id ?? "main-content",
+        className: slotProps?.main?.className,
         role: "main",
-        "aria-label": ARIA_LABELS.main,
+        "aria-label": labels.main,
         tabIndex: -1,
         sx: {
           display: "flex",
@@ -1294,11 +1293,13 @@ function DashboardLayout({
   navData,
   headerSlots,
   logo,
+  compactLogo,
   footer,
   sidenavFooter,
   initialConfig,
   persistKey,
-  slotProps
+  slotProps,
+  labels
 }) {
   return /* @__PURE__ */ jsx(LayoutProvider, { initialConfig, persistKey, children: /* @__PURE__ */ jsx(
     DashboardLayoutInternal,
@@ -1307,9 +1308,11 @@ function DashboardLayout({
       navData,
       headerSlots,
       logo,
+      compactLogo,
       footer,
       sidenavFooter,
       slotProps,
+      labels,
       children
     }
   ) });
@@ -1572,5 +1575,5 @@ function SimpleCompactContent({ children, sx }) {
 }
 
 export { AuthCenteredContent, AuthCenteredLayout, AuthSimpleLayout, AuthSplitContent, AuthSplitIllustration, AuthSplitLayout, DEFAULT_LAYOUT_CSS_VARS, DRAWER_WIDTHS, DashboardContent, DashboardLayout, HEADER_HEIGHTS, HeaderSection, HeaderToolbar, LAYOUT_CSS_VARS, LayoutContext, LayoutGlobalStyles, LayoutProvider, LayoutSection, MainSection, MobileSidenav, Sidenav, SimpleCompactContent, UserMenu, defaultLayoutConfig, getBaseLayoutCssVars, getNavColorCssVars, mergeLayoutCssVars, useLayoutConfig, useLayoutContext, useNavActive, useSidenavVisible, useTopnavVisible };
-//# sourceMappingURL=chunk-Z5OSPAOC.js.map
-//# sourceMappingURL=chunk-Z5OSPAOC.js.map
+//# sourceMappingURL=chunk-4Z5DE5GK.js.map
+//# sourceMappingURL=chunk-4Z5DE5GK.js.map