@omnitron-dev/prism 0.3.0 → 0.3.2

package/dist/{chunk-Z5OSPAOC.js → chunk-NSNM53WI.js}

@@ -1,5 +1,8 @@
-import { ARIA_LABELS, SkipLink } from './chunk-AD4W7HYC.js';
-import { useSettingsStore } from './chunk-XIXSSI3B.js';
+import { SidebarToggle } from './chunk-KPY7TA4D.js';
+import { ARIA_LABELS, SkipLink } from './chunk-ZYI3MHLE.js';
+import { useSettingsStore } from './chunk-NJM5AVBM.js';
+import { Scrollbar } from './chunk-4Q5L7LDG.js';
+import { CloseIcon, MenuIcon } from './chunk-VQVVHMPG.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,
@@ -507,7 +510,7 @@ function HeaderSection({
       sx,
       children: [
         slots?.topArea && /* @__PURE__ */ jsx(Box8, { sx: slotProps?.topArea, children: slots.topArea }),
-        /* @__PURE__ */ jsx(StyledToolbar, { children: containerized ? /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(StyledToolbar, { sx: slotProps?.toolbar, children: containerized ? /* @__PURE__ */ jsx(
           Container2,
           {
             maxWidth,
@@ -757,90 +760,65 @@ 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 }) => {
-  let width = DRAWER_WIDTHS.full;
-  if (collapsed) {
-    width = variant === "stacked" ? DRAWER_WIDTHS.stackedCollapsed : DRAWER_WIDTHS.mini;
-  } else if (variant === "mini") {
-    width = DRAWER_WIDTHS.mini;
-  } else if (variant === "stacked") {
-    width = DRAWER_WIDTHS.stackedExpanded;
-  }
-  return {
-    position: "fixed",
-    top: 0,
-    left: 0,
-    height: "100%",
-    width,
-    flexShrink: 0,
-    display: "flex",
-    flexDirection: "column",
-    zIndex: theme.zIndex.drawer,
-    backgroundColor: `var(${LAYOUT_CSS_VARS.navBg}, ${theme.palette.background.paper})`,
-    borderRight: `1px solid ${theme.palette.divider}`,
-    transition: theme.transitions.create("width", {
-      duration: theme.transitions.duration.shorter
-    })
-  };
-});
+  shouldForwardProp: (prop) => prop !== "railWidth"
+})(({ theme, railWidth }) => ({
+  position: "fixed",
+  top: 0,
+  insetInlineStart: 0,
+  height: "100%",
+  width: railWidth,
+  flexShrink: 0,
+  display: "flex",
+  flexDirection: "column",
+  zIndex: theme.zIndex.drawer,
+  backgroundColor: `var(${LAYOUT_CSS_VARS.navBg}, ${theme.palette.background.paper})`,
+  borderInlineEnd: `1px solid ${theme.palette.divider}`,
+  transition: theme.transitions.create("width", {
+    duration: theme.transitions.duration.shorter
+  })
+}));
 var NavContent = styled(Box8)({
   display: "flex",
   flexDirection: "column",
   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,
-      collapsed: sidenavCollapsed,
+      railWidth: config.drawerWidth,
       sx: [
         (theme) => ({
           display: { xs: "none", [layoutQuery]: "flex" }
@@ -859,7 +837,7 @@ function Sidenav({
               px: showText ? 3 : 1,
               flexShrink: 0
             },
-            children: logo
+            children: showText || compactLogo === void 0 ? logo : compactLogo
           }
         ),
         /* @__PURE__ */ jsx(Divider, {}),
@@ -893,13 +871,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 +889,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 +918,7 @@ function MobileSidenav({
         ...Array.isArray(sx) ? sx : [sx]
       ],
       children: [
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           Box8,
           {
             sx: {
@@ -943,11 +927,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 +963,7 @@ function MobileSidenav({
     }
   );
 }
-function DefaultNavItem({ item, showText, depth, active }) {
+function DefaultNavItem({ item, showText, depth, active, current }) {
   const button = /* @__PURE__ */ jsxs(
     ListItemButton,
     {
@@ -984,6 +971,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 +1038,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,37 +1132,41 @@ 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 }) => ({
+  shouldForwardProp: (prop) => !["hasSidebar", "sidebarWidth", "layoutQuery", "contentMode"].includes(prop)
+})(({ theme, hasSidebar, sidebarWidth, layoutQuery, contentMode }) => ({
   display: "flex",
   flexDirection: "column",
   flex: "1 1 auto",
   minHeight: "100vh",
+  minWidth: 0,
+  ...contentMode === "workspace" && { height: "100dvh", minHeight: 0, overflow: "hidden" },
   // Adjust margin for sidebar on desktop
   ...hasSidebar && {
     [theme.breakpoints.up(layoutQuery)]: {
-      marginLeft: sidebarWidth
+      marginInlineStart: sidebarWidth,
+      minWidth: 0
     }
   },
   // Smooth transition
-  transition: theme.transitions.create("margin-left", {
+  transition: theme.transitions.create("margin-inline-start", {
     duration: theme.transitions.duration.shorter
   })
 }));
 function DashboardLayoutInternal({
+  contentMode,
   children,
   layoutQuery,
   navData,
   headerSlots,
   logo,
+  compactLogo,
   footer,
   sidenavFooter,
-  slotProps
+  slotProps,
+  labels: customLabels
 }) {
+  const labels = { ...dashboardLabels, ...customLabels };
   const config = useLayoutConfig();
   const { toggleDrawer } = useLayoutContext();
   const {
@@ -1199,7 +1184,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,100 +1203,134 @@ function DashboardLayoutInternal({
         headerSlots?.leftArea
       ] })
     };
-  }, [hasSidebar, headerSlots, toggleDrawer, layoutQuery]);
-  return /* @__PURE__ */ jsxs(MainWrapper, { hasSidebar, sidebarWidth, layoutQuery, children: [
-    /* @__PURE__ */ jsx(SkipLink, { href: "#main-content", children: "Skip to main content" }),
-    /* @__PURE__ */ jsx(
-      HeaderSection,
-      {
-        slots: mergedHeaderSlots,
-        "aria-label": ARIA_LABELS.header,
-        sx: {
-          ...slotProps?.header?.sx
-        },
-        ...slotProps?.header
-      }
-    ),
-    hasTopnav && /* @__PURE__ */ jsx(
-      Topnav,
-      {
-        navData,
-        layoutQuery,
-        "aria-label": hasSidebar ? "Secondary navigation" : ARIA_LABELS.mainNav
-      }
-    ),
-    hasSidebar && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Sidenav,
-        {
-          logo,
-          navData,
-          footer: sidenavFooter,
-          layoutQuery,
-          "aria-label": ARIA_LABELS.mainNav
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        MobileSidenav,
-        {
-          logo,
-          navData,
-          footer: sidenavFooter,
-          layoutQuery,
-          "aria-label": ARIA_LABELS.mainNav
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(
-      Box8,
-      {
-        component: "main",
-        id: "main-content",
-        role: "main",
-        "aria-label": ARIA_LABELS.main,
-        tabIndex: -1,
-        sx: {
-          display: "flex",
-          flexDirection: "column",
-          flex: "1 1 auto",
-          // Remove focus outline for skip link target
-          "&:focus": {
-            outline: "none"
-          },
-          ...!slotProps?.main?.disablePadding && {
-            py: { xs: 2, sm: 3, md: 4 },
-            px: { xs: 2, sm: 3, md: 4 }
-          },
-          ...slotProps?.main?.sx
-        },
-        children: slotProps?.main?.maxWidth ? /* @__PURE__ */ jsx(Container2, { maxWidth: slotProps.main.maxWidth, sx: { flex: 1, display: "flex", flexDirection: "column" }, children }) : children
-      }
-    ),
-    footer
-  ] });
+  }, [hasSidebar, headerSlots, toggleDrawer, layoutQuery, labels.openMenu, config.drawerOpen]);
+  return /* @__PURE__ */ jsxs(
+    MainWrapper,
+    {
+      contentMode,
+      hasSidebar,
+      sidebarWidth,
+      layoutQuery,
+      children: [
+        /* @__PURE__ */ jsx(SkipLink, { href: `#${slotProps?.main?.id ?? "main-content"}`, children: labels.skipToContent }),
+        /* @__PURE__ */ jsx(
+          HeaderSection,
+          {
+            slots: mergedHeaderSlots,
+            "aria-label": ARIA_LABELS.header,
+            sx: {
+              ...slotProps?.header?.sx
+            },
+            ...slotProps?.header
+          }
+        ),
+        hasTopnav && /* @__PURE__ */ jsx(
+          Topnav,
+          {
+            navData,
+            layoutQuery,
+            "aria-label": hasSidebar ? "Secondary navigation" : ARIA_LABELS.mainNav
+          }
+        ),
+        hasSidebar && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Sidenav,
+            {
+              logo,
+              compactLogo,
+              navData,
+              footer: sidenavFooter,
+              layoutQuery,
+              "aria-label": labels.navigation,
+              labels
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            MobileSidenav,
+            {
+              logo,
+              navData,
+              footer: sidenavFooter,
+              layoutQuery,
+              "aria-label": labels.navigation,
+              labels
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          Box8,
+          {
+            component: "main",
+            id: slotProps?.main?.id ?? "main-content",
+            className: slotProps?.main?.className,
+            role: "main",
+            "aria-label": labels.main,
+            tabIndex: -1,
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              flex: "1 1 auto",
+              minWidth: 0,
+              ...contentMode === "workspace" && { minHeight: 0, overflow: "hidden" },
+              // Remove focus outline for skip link target
+              "&:focus": {
+                outline: "none"
+              },
+              ...!slotProps?.main?.disablePadding && {
+                py: { xs: 2, sm: 3, md: 4 },
+                px: { xs: 2, sm: 3, md: 4 }
+              },
+              ...slotProps?.main?.sx
+            },
+            children: slotProps?.main?.maxWidth ? /* @__PURE__ */ jsx(
+              Container2,
+              {
+                maxWidth: slotProps.main.maxWidth,
+                sx: {
+                  flex: 1,
+                  display: "flex",
+                  flexDirection: "column",
+                  minWidth: 0,
+                  ...contentMode === "workspace" && { minHeight: 0 }
+                },
+                children
+              }
+            ) : children
+          }
+        ),
+        footer
+      ]
+    }
+  );
 }
 function DashboardLayout({
+  contentMode = "document",
   children,
   layoutQuery = "lg",
   navData,
   headerSlots,
   logo,
+  compactLogo,
   footer,
   sidenavFooter,
   initialConfig,
   persistKey,
-  slotProps
+  slotProps,
+  labels
 }) {
   return /* @__PURE__ */ jsx(LayoutProvider, { initialConfig, persistKey, children: /* @__PURE__ */ jsx(
     DashboardLayoutInternal,
     {
+      contentMode,
       layoutQuery,
       navData,
       headerSlots,
       logo,
+      compactLogo,
       footer,
       sidenavFooter,
       slotProps,
+      labels,
       children
     }
   ) });
@@ -1572,5 +1593,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-NSNM53WI.js.map
+//# sourceMappingURL=chunk-NSNM53WI.js.map