@12-apps/ui 5.0.0 → 5.1.0

package/dist/navigation/NavigationMenu.js

@@ -0,0 +1,1035 @@
+import "../chunk-PZ5AY32C.js";
+
+// src/components/navigation/NavigationMenu/NavigationMenu.tsx
+import {
+  Box as Box5,
+  Paper as Paper2
+} from "@mui/material";
+import React5, { useState as useState2 } from "react";
+
+// src/components/navigation/NavigationMenu/NavigationMegaSection.tsx
+import { Box as Box3, List as List3, Typography } from "@mui/material";
+
+// src/components/navigation/NavigationMenu/NavigationMenu.shell.tsx
+import { Box, List, ListItemButton } from "@mui/material";
+import { alpha as alpha2, keyframes as keyframes2, styled } from "@mui/material";
+import React from "react";
+
+// src/components/navigation/NavigationMenu/NavigationMenu.styles.ts
+import { alpha, keyframes } from "@mui/material";
+var slideIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`;
+var pulseGlow = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0.4);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(25, 118, 210, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(25, 118, 210, 0);
+  }
+`;
+var SIZE_STYLES = {
+  sm: (theme) => ({
+    padding: theme.spacing(1, 1.5),
+    fontSize: "0.875rem",
+    "& .MuiListItemIcon-root": { transform: "scale(0.85)" }
+  }),
+  lg: (theme) => ({
+    padding: theme.spacing(2, 2.5),
+    fontSize: "1.125rem",
+    "& .MuiListItemIcon-root": { transform: "scale(1.15)" }
+  })
+};
+var horizontalStyles = (theme) => ({
+  borderRadius: theme.spacing(1.5),
+  margin: theme.spacing(0, 0.5),
+  background: alpha(theme.palette.background.paper, 0.6),
+  backdropFilter: "blur(8px)",
+  border: `none`
+  // border: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
+});
+var collapsedStyles = () => ({
+  justifyContent: "center",
+  minHeight: 56,
+  "& .MuiListItemIcon-root": {
+    margin: 0
+  }
+});
+var activeStyles = (theme, _variant) => ({
+  color: theme.palette.primary.main,
+  cursor: "default",
+  "& .MuiListItemIcon-root": {
+    color: theme.palette.primary.main
+  },
+  "&::before": {
+    opacity: 1,
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.2)} 0%, ${alpha(theme.palette.primary.main, 0.05)} 100%)`
+  },
+  "&:hover": {
+    background: "none",
+    transform: "none",
+    boxShadow: "none",
+    "&::before": {
+      opacity: 1
+    },
+    "& .MuiListItemIcon-root": {
+      transform: "none"
+    },
+    "& .MuiListItemText-primary": {
+      transform: "none"
+    }
+  }
+});
+var navDecorationStyles = (theme) => ({
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0)} 0%, ${alpha(theme.palette.primary.main, 0.08)} 100%)`,
+    opacity: 0,
+    transition: "opacity 0.3s ease"
+  },
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    width: "100%",
+    height: "100%",
+    background: `radial-gradient(circle, ${alpha(theme.palette.primary.main, 0.3)} 0%, transparent 70%)`,
+    transform: "translate(-50%, -50%) scale(0)",
+    transition: "transform 0.6s ease",
+    borderRadius: "50%"
+  }
+});
+var navInteractionStyles = (theme, minimal, collapsed, size) => ({
+  "&:hover": minimal ? {
+    // Simple hover for minimal variant
+    backgroundColor: alpha(theme.palette.action.hover, 0.08),
+    color: theme.palette.primary.main,
+    "& .MuiListItemIcon-root": {
+      color: theme.palette.primary.main
+    }
+  } : {
+    // Fancy hover for non-minimal variant
+    background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.15)} 0%, ${alpha(theme.palette.primary.main, 0.08)} 100%)`,
+    color: theme.palette.primary.main,
+    boxShadow: `0 8px 24px ${alpha(theme.palette.primary.main, 0.15)}`,
+    backgroundColor: alpha(theme.palette.primary.main, 0.04),
+    "&::before": {
+      opacity: 1
+    },
+    "& .MuiListItemIcon-root": {
+      color: theme.palette.primary.main,
+      transform: collapsed ? "scale(1.1)" : size === "sm" ? "scale(0.95) rotate(-5deg)" : size === "lg" ? "scale(1.25) rotate(-5deg)" : "scale(1.1) rotate(-5deg)",
+      transition: "all 0.3s ease"
+    },
+    "& .MuiListItemText-primary": {
+      transform: "translateX(4px)",
+      transition: "transform 0.3s ease"
+    }
+  },
+  "&:active": minimal ? {
+    // Simple active state for minimal variant
+    opacity: 0.7
+  } : {
+    // Fancy active state for non-minimal variant
+    transform: "scale(0.98)",
+    "&::after": {
+      transform: "translate(-50%, -50%) scale(2)"
+    }
+  }
+});
+var navItemButtonStyles = ({
+  theme,
+  variant,
+  active,
+  size,
+  collapsed,
+  minimal
+}) => ({
+  ...size ? SIZE_STYLES[size]?.(theme) ?? {} : {},
+  ...variant === "horizontal" ? horizontalStyles(theme) : {},
+  ...collapsed ? collapsedStyles() : {},
+  ...active ? activeStyles(theme, variant) : {},
+  ...navDecorationStyles(theme),
+  ...navInteractionStyles(theme, minimal, collapsed, size),
+  borderRadius: theme.spacing(1.5),
+  margin: theme.spacing(0.5),
+  position: "relative",
+  overflow: "hidden",
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  transformStyle: "preserve-3d"
+});
+
+// src/components/navigation/NavigationMenu/NavigationMenu.shell.tsx
+import { jsx } from "react/jsx-runtime";
+var megaMenuSlide = keyframes2`
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+var NavigationContainer = styled(Box, {
+  shouldForwardProp: (prop) => !["variant", "collapsed", "minimal"].includes(prop)
+})(({ theme, variant, collapsed, minimal }) => ({
+  display: "flex",
+  position: "relative",
+  animation: `${slideIn} 0.4s ease-out`,
+  ...variant === "horizontal" && {
+    flexDirection: "row",
+    alignItems: "center",
+    width: "100%",
+    ...!minimal && {
+      background: `linear-gradient(135deg, ${alpha2(theme.palette.background.paper, 0.95)} 0%, ${alpha2(theme.palette.background.paper, 0.98)} 100%)`,
+      backdropFilter: "blur(10px)",
+      borderRadius: theme.spacing(2),
+      boxShadow: `0 8px 32px ${alpha2(theme.palette.common.black, 0.08)}`
+    }
+  },
+  ...variant === "vertical" && {
+    flexDirection: "column",
+    width: collapsed ? 80 : 280,
+    transition: "all 0.4s cubic-bezier(0.4, 0, 0.2, 1)",
+    height: "100%",
+    ...!minimal && {
+      background: `linear-gradient(180deg, ${alpha2(theme.palette.background.paper, 0.98)} 0%, ${alpha2(theme.palette.background.paper, 0.95)} 100%)`,
+      backdropFilter: "blur(12px)",
+      borderRadius: theme.spacing(2),
+      boxShadow: `0 12px 40px ${alpha2(theme.palette.common.black, 0.1)}`,
+      "&::before": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        height: "200px",
+        background: `radial-gradient(ellipse at top, ${alpha2(theme.palette.primary.main, 0.05)} 0%, transparent 70%)`,
+        pointerEvents: "none"
+      }
+    }
+  },
+  ...variant === "mega" && {
+    flexDirection: "column",
+    width: "100%",
+    ...!minimal && {
+      background: `linear-gradient(135deg, ${alpha2(theme.palette.background.paper, 0.98)} 0%, ${alpha2(theme.palette.background.default, 0.95)} 100%)`,
+      backdropFilter: "blur(15px)",
+      borderRadius: theme.spacing(3),
+      overflow: "hidden",
+      boxShadow: `0 20px 60px ${alpha2(theme.palette.common.black, 0.12)}`
+    }
+  }
+}));
+var StyledList = styled(List, {
+  shouldForwardProp: (prop) => !["variant", "size"].includes(prop)
+})(({ theme, variant }) => ({
+  padding: 0,
+  width: "100%",
+  ...variant === "horizontal" && {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  ...variant === "mega" && {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(250px, 1fr))",
+    gap: theme.spacing(2),
+    padding: theme.spacing(2)
+  }
+}));
+var LogoContainer = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(2.5),
+  marginBottom: theme.spacing(2),
+  position: "relative",
+  background: `linear-gradient(135deg, ${alpha2(theme.palette.primary.main, 0.08)} 0%, ${alpha2(theme.palette.primary.dark, 0.04)} 100%)`,
+  borderBottom: `2px solid ${alpha2(theme.palette.primary.main, 0.2)}`,
+  overflow: "hidden",
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: "-50%",
+    right: "-50%",
+    width: "200%",
+    height: "200%",
+    background: `radial-gradient(circle, ${alpha2(theme.palette.primary.light, 0.1)} 0%, transparent 70%)`,
+    animation: `${slideIn} 1s ease-out`
+  },
+  "& > *": {
+    position: "relative",
+    zIndex: 1
+  }
+}));
+var CollapseButton = styled(ListItemButton)(({ theme }) => ({
+  borderRadius: theme.spacing(1.5),
+  margin: theme.spacing(1),
+  background: `linear-gradient(135deg, ${alpha2(theme.palette.primary.main, 0.08)} 0%, ${alpha2(theme.palette.primary.dark, 0.04)} 100%)`,
+  border: `1px solid ${alpha2(theme.palette.primary.main, 0.2)}`,
+  transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+  "&:hover": {
+    backgroundColor: alpha2(theme.palette.primary.main, 0.12),
+    transform: "scale(1.05)",
+    boxShadow: `0 6px 20px ${alpha2(theme.palette.primary.main, 0.2)}`,
+    "& .MuiListItemIcon-root": {
+      transform: "rotate(180deg)",
+      transition: "transform 0.3s ease"
+    }
+  },
+  "&:active": {
+    transform: "scale(0.98)"
+  }
+}));
+var MegaMenuSection = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(3),
+  borderRadius: theme.spacing(2),
+  background: `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${alpha2(theme.palette.background.default, 0.9)} 100%)`,
+  boxShadow: `0 10px 30px ${alpha2(theme.palette.common.black, 0.08)}`,
+  border: `1px solid ${alpha2(theme.palette.divider, 0.08)}`,
+  position: "relative",
+  overflow: "hidden",
+  animation: `${megaMenuSlide} 0.5s ease-out`,
+  animationFillMode: "both",
+  "&::before": {
+    content: '""',
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    height: "3px",
+    background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 50%, ${theme.palette.primary.main} 100%)`,
+    backgroundSize: "200% 100%",
+    animation: "shimmer 3s ease-in-out infinite"
+  },
+  "@keyframes shimmer": {
+    "0%": {
+      backgroundPosition: "200% 0"
+    },
+    "100%": {
+      backgroundPosition: "-200% 0"
+    }
+  },
+  "&:hover": {
+    transform: "translateY(-4px)",
+    boxShadow: `0 15px 40px ${alpha2(theme.palette.common.black, 0.12)}`,
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+  },
+  "&:nth-of-type(1)": { animationDelay: "0.1s" },
+  "&:nth-of-type(2)": { animationDelay: "0.2s" },
+  "&:nth-of-type(3)": { animationDelay: "0.3s" },
+  "&:nth-of-type(4)": { animationDelay: "0.4s" }
+}));
+var NavigationShell = React.forwardRef(
+  ({ children, ...props }, ref) => /* @__PURE__ */ jsx(NavigationContainer, { ref, ...props, children })
+);
+NavigationShell.displayName = "NavigationShell";
+var LogoBar = ({ children }) => /* @__PURE__ */ jsx(LogoContainer, { children });
+var MenuList = ({
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx(StyledList, { ...props, children });
+var CollapseToggle = ({
+  children,
+  onClick
+}) => /* @__PURE__ */ jsx(CollapseButton, { onClick, children });
+var MegaSection = ({ children }) => /* @__PURE__ */ jsx(MegaMenuSection, { children });
+
+// src/components/navigation/NavigationMenu/NavigationMenuItem.tsx
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import ExpandMore from "@mui/icons-material/ExpandMore";
+import {
+  Box as Box2,
+  Collapse,
+  Fade,
+  List as List2,
+  ListItem,
+  ListItemButton as ListItemButton2,
+  ListItemIcon,
+  Grow,
+  ListItemText,
+  Popover
+} from "@mui/material";
+import { alpha as alpha3, styled as styled2 } from "@mui/material";
+import React3 from "react";
+
+// src/components/navigation/NavigationMenu/NavigationMenuItem.hooks.ts
+import React2, { useState } from "react";
+var CLOSE_DELAY_MS = 150;
+var useHoverIntent = ({
+  enabled,
+  closeTimerRef,
+  setAnchorEl
+}) => {
+  const clearCloseTimer = () => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current);
+      closeTimerRef.current = null;
+    }
+  };
+  const handleMouseEnter = (event) => {
+    if (!enabled) return;
+    {
+      clearCloseTimer();
+      setAnchorEl(event.currentTarget);
+    }
+  };
+  const handleMouseLeave = () => {
+    if (!enabled) return;
+    {
+      closeTimerRef.current = setTimeout(() => {
+        setAnchorEl(null);
+      }, CLOSE_DELAY_MS);
+    }
+  };
+  const handlePopoverMouseEnter = () => {
+    clearCloseTimer();
+  };
+  const handlePopoverMouseLeave = () => {
+    setAnchorEl(null);
+  };
+  React2.useEffect(() => {
+    return () => {
+      clearCloseTimer();
+    };
+  }, []);
+  return {
+    clearCloseTimer,
+    handleMouseEnter,
+    handleMouseLeave,
+    handlePopoverMouseEnter,
+    handlePopoverMouseLeave
+  };
+};
+var useMenuItemState = ({
+  item,
+  variant,
+  onItemClick
+}) => {
+  const [open, setOpen] = useState(false);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const closeTimerRef = React2.useRef(null);
+  const hasChildren = item.children && item.children.length > 0;
+  const handleClick = (event) => {
+    if (hasChildren && variant !== "horizontal") {
+      setOpen(!open);
+    }
+    if (item.onClick) {
+      item.onClick(event);
+    }
+    if (onItemClick) {
+      onItemClick(item);
+    }
+  };
+  const {
+    clearCloseTimer,
+    handleMouseEnter,
+    handleMouseLeave,
+    handlePopoverMouseEnter,
+    handlePopoverMouseLeave
+  } = useHoverIntent({
+    enabled: Boolean(hasChildren) && variant === "horizontal",
+    closeTimerRef,
+    setAnchorEl
+  });
+  const closePopover = () => {
+    clearCloseTimer();
+    setAnchorEl(null);
+  };
+  return {
+    open,
+    anchorEl,
+    hasChildren,
+    handleClick,
+    handleMouseEnter,
+    handleMouseLeave,
+    handlePopoverMouseEnter,
+    handlePopoverMouseLeave,
+    closePopover
+  };
+};
+
+// src/components/navigation/NavigationMenu/NavigationMenuItem.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var StyledListItem = styled2(ListItem, {
+  shouldForwardProp: (prop) => !["variant", "active", "size", "level"].includes(prop)
+})(
+  ({ theme, variant, level = 0 }) => ({
+    padding: 0,
+    ...variant === "horizontal" && {
+      width: "auto"
+    },
+    ...level > 0 && {
+      paddingLeft: theme.spacing(2 * level)
+    }
+  })
+);
+var StyledListItemButton = styled2(ListItemButton2, {
+  shouldForwardProp: (prop) => !["variant", "active", "size", "collapsed", "minimal"].includes(prop)
+})(
+  ({ theme, variant, active, size, collapsed, minimal }) => ({
+    ...navItemButtonStyles({ theme, variant, active, size, collapsed, minimal })
+  })
+);
+var MenuItemPopover = ({ anchorEl, item, size, minimal, onClose, onMouseEnter, onMouseLeave, onItemClick }) => /* @__PURE__ */ jsx2(
+  Popover,
+  {
+    open: Boolean(anchorEl),
+    anchorEl,
+    onClose,
+    anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "left"
+    },
+    transformOrigin: {
+      vertical: "top",
+      horizontal: "left"
+    },
+    disableRestoreFocus: true,
+    sx: {
+      pointerEvents: "none"
+    },
+    slotProps: {
+      paper: {
+        onMouseEnter,
+        onMouseLeave,
+        sx: {
+          pointerEvents: "auto",
+          mt: 0.5,
+          borderRadius: 2,
+          boxShadow: (theme) => `0 12px 40px ${alpha3(theme.palette.common.black, 0.15)}`,
+          border: (theme) => `1px solid ${alpha3(theme.palette.divider, 0.1)}`,
+          background: (theme) => `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${alpha3(theme.palette.background.default, 0.95)} 100%)`,
+          backdropFilter: "blur(10px)",
+          minWidth: 200
+        }
+      }
+    },
+    children: /* @__PURE__ */ jsx2(List2, { sx: { p: 1 }, children: item.children?.map((child) => {
+      const childHasChildren = child.children && child.children.length > 0;
+      if (childHasChildren) {
+        return renderMenuItem(child, "vertical", size, false, minimal, 0, onItemClick);
+      }
+      return /* @__PURE__ */ jsx2(
+        Box2,
+        {
+          onClick: onClose,
+          children: renderMenuItem(child, "vertical", size, false, minimal, 0, onItemClick)
+        },
+        child.id
+      );
+    }) })
+  }
+);
+var MenuItemLabel = ({ item, collapsed, open, hasChildren, size, variant }) => /* @__PURE__ */ jsx2(Fade, { in: !collapsed, timeout: 400, children: /* @__PURE__ */ jsxs(Box2, { sx: { display: "flex", alignItems: "center", width: "100%", gap: 1 }, children: [
+  /* @__PURE__ */ jsx2(
+    ListItemText,
+    {
+      primary: item.label,
+      secondary: item.description,
+      sx: {
+        flex: 1,
+        minWidth: 0
+        // Allows text truncation if needed
+      },
+      slotProps: {
+        primary: {
+          variant: size === "sm" ? "body2" : size === "lg" ? "h6" : "body1",
+          sx: {
+            fontWeight: item.active ? 600 : 400,
+            transition: "all 0.3s ease"
+          }
+        },
+        secondary: {
+          sx: {
+            opacity: 0.7,
+            transition: "all 0.3s ease"
+          }
+        }
+      }
+    }
+  ),
+  item.badge && /* @__PURE__ */ jsx2(
+    Box2,
+    {
+      component: "span",
+      sx: {
+        flexShrink: 0,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minWidth: 20,
+        height: 20,
+        px: 0.75,
+        borderRadius: "10px",
+        fontSize: "0.75rem",
+        fontWeight: 600,
+        color: "#fff",
+        background: "linear-gradient(135deg, #ff5252 0%, #ff1744 100%)",
+        boxShadow: "0 2px 8px rgba(255, 23, 68, 0.4)",
+        animation: typeof item.badge === "number" && item.badge > 0 ? `${pulseGlow} 2s infinite` : "none"
+      },
+      children: item.badge
+    }
+  ),
+  hasChildren && /* @__PURE__ */ jsx2(
+    Box2,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        flexShrink: 0,
+        // Prevents expand icon from shrinking
+        transition: "transform 0.3s ease",
+        transform: open ? "rotate(180deg)" : "rotate(0deg)"
+      },
+      children: variant === "horizontal" ? /* @__PURE__ */ jsx2(ChevronRight, { fontSize: "small" }) : /* @__PURE__ */ jsx2(ExpandMore, {})
+    }
+  )
+] }) });
+var MenuItemContent = ({
+  item,
+  variant,
+  size,
+  active: _active,
+  collapsed,
+  minimal,
+  level,
+  open,
+  hasChildren,
+  onClick,
+  onMouseEnter,
+  onMouseLeave
+}) => /* @__PURE__ */ jsx2(StyledListItem, { variant, active: item.active, size, level, children: /* @__PURE__ */ jsxs(
+  StyledListItemButton,
+  {
+    variant,
+    active: item.active,
+    size,
+    collapsed,
+    minimal,
+    disabled: item.disabled,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    ...item.href && !hasChildren ? {
+      component: "a",
+      href: item.href,
+      target: item.target
+    } : {},
+    children: [
+      item.icon && /* @__PURE__ */ jsx2(
+        ListItemIcon,
+        {
+          sx: {
+            minWidth: collapsed ? 0 : 40,
+            justifyContent: "center",
+            transition: "all 0.3s ease",
+            "& svg": {
+              filter: item.active ? "drop-shadow(0 2px 8px rgba(0,0,0,0.15))" : "none",
+              transition: "all 0.3s ease"
+            }
+          },
+          children: /* @__PURE__ */ jsx2(Grow, { in: true, timeout: 600, children: /* @__PURE__ */ jsx2(Box2, { children: item.icon }) })
+        }
+      ),
+      !collapsed && /* @__PURE__ */ jsx2(
+        MenuItemLabel,
+        {
+          item,
+          collapsed,
+          minimal,
+          open,
+          hasChildren,
+          size,
+          variant
+        }
+      )
+    ]
+  }
+) }, item.id);
+var MenuItemRenderer = ({
+  item,
+  variant,
+  size,
+  collapsed,
+  minimal,
+  level,
+  onItemClick
+}) => {
+  const {
+    open,
+    anchorEl,
+    hasChildren,
+    handleClick,
+    handleMouseEnter,
+    handleMouseLeave,
+    handlePopoverMouseEnter,
+    handlePopoverMouseLeave,
+    closePopover
+  } = useMenuItemState({ item, variant, onItemClick });
+  const itemContent = /* @__PURE__ */ jsx2(
+    MenuItemContent,
+    {
+      item,
+      variant,
+      size,
+      active: item.active,
+      collapsed,
+      minimal,
+      level,
+      open,
+      hasChildren,
+      onClick: handleClick,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    }
+  );
+  if (hasChildren && variant === "horizontal") {
+    return /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+      itemContent,
+      /* @__PURE__ */ jsx2(
+        MenuItemPopover,
+        {
+          anchorEl,
+          item,
+          size,
+          minimal,
+          onClose: closePopover,
+          onMouseEnter: handlePopoverMouseEnter,
+          onMouseLeave: handlePopoverMouseLeave,
+          onItemClick
+        }
+      )
+    ] }, item.id);
+  }
+  if (hasChildren && variant !== "horizontal") {
+    return /* @__PURE__ */ jsxs(React3.Fragment, { children: [
+      itemContent,
+      !collapsed && /* @__PURE__ */ jsx2(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx2(List2, { component: "div", disablePadding: true, children: item.children?.map(
+        (child) => renderMenuItem(child, variant, size, collapsed, minimal, level + 1, onItemClick)
+      ) }) })
+    ] }, item.id);
+  }
+  return itemContent;
+};
+var renderMenuItem = (item, variant = "vertical", size = "md", collapsed = false, minimal = false, level = 0, onItemClick) => /* @__PURE__ */ jsx2(
+  MenuItemRenderer,
+  {
+    item,
+    variant,
+    size,
+    collapsed,
+    minimal,
+    level,
+    onItemClick
+  },
+  item.id
+);
+
+// src/components/navigation/NavigationMenu/NavigationMegaSection.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var SECTION_TITLE_SX = {
+  mb: 2.5,
+  color: "primary.main",
+  fontWeight: 600,
+  position: "relative",
+  paddingBottom: 1,
+  // The short rule under each section heading.
+  "&::after": {
+    content: '""',
+    position: "absolute",
+    bottom: 0,
+    left: 0,
+    width: "40px",
+    height: "3px",
+    background: (theme) => `linear-gradient(90deg, ${theme.palette.primary.main} 0%, transparent 100%)`,
+    borderRadius: "2px"
+  }
+};
+var NavigationMegaSection = ({
+  section,
+  sectionIndex,
+  variant,
+  size,
+  minimal
+}) => /* @__PURE__ */ jsxs2(MegaSection, { children: [
+  /* @__PURE__ */ jsx3(Typography, { variant: "h6", sx: SECTION_TITLE_SX, children: section.label }),
+  /* @__PURE__ */ jsx3(List3, { sx: { p: 0 }, children: section.children?.map((item, itemIndex) => /* @__PURE__ */ jsx3(
+    Box3,
+    {
+      sx: {
+        animation: `${slideIn} 0.4s ease-out`,
+        animationDelay: `${sectionIndex * 0.1 + itemIndex * 0.05}s`,
+        animationFillMode: "both"
+      },
+      children: renderMenuItem(item, variant, size, false, minimal, 0)
+    },
+    item.id
+  )) })
+] });
+
+// src/components/navigation/NavigationMenu/NavigationStandardBody.tsx
+import MenuIcon from "@mui/icons-material/Menu";
+import { alpha as alpha4, Box as Box4, Divider, Fade as Fade2, ListItemIcon as ListItemIcon2, ListItemText as ListItemText2, Paper } from "@mui/material";
+import React4 from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var DividerRule = () => /* @__PURE__ */ jsx4(
+  Divider,
+  {
+    sx: {
+      my: 1,
+      opacity: 0.5,
+      background: (theme) => `linear-gradient(90deg, transparent 0%, ${alpha4(theme.palette.divider, 0.5)} 50%, transparent 100%)`
+    }
+  }
+);
+var VerticalLogo = ({ logo, collapsed }) => /* @__PURE__ */ jsx4(LogoBar, { children: collapsed ? /* @__PURE__ */ jsx4(Box4, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ jsx4(MenuIcon, {}) }) : logo });
+var CollapseControl = ({
+  collapsed,
+  onToggle
+}) => /* @__PURE__ */ jsxs3(CollapseToggle, { onClick: onToggle, children: [
+  /* @__PURE__ */ jsx4(ListItemIcon2, { sx: { minWidth: collapsed ? 0 : 40, justifyContent: "center" }, children: /* @__PURE__ */ jsx4(MenuIcon, {}) }),
+  !collapsed && /* @__PURE__ */ jsx4(ListItemText2, { primary: "Collapse" })
+] });
+var MenuItems = ({ items, variant, size, collapsed, minimal, showDividers }) => /* @__PURE__ */ jsx4(MenuList, { variant, size, children: items.map((item, index) => /* @__PURE__ */ jsxs3(React4.Fragment, { children: [
+  /* @__PURE__ */ jsx4(
+    Box4,
+    {
+      sx: {
+        // Staggered so the list fills in rather than appearing at once.
+        animation: `${slideIn} 0.4s ease-out`,
+        animationDelay: `${index * 0.05}s`,
+        animationFillMode: "both"
+      },
+      children: renderMenuItem(item, variant, size, collapsed, minimal, 0)
+    }
+  ),
+  showDividers && index < items.length - 1 && /* @__PURE__ */ jsx4(DividerRule, {})
+] }, item.id)) });
+var EndPanel = ({ children }) => /* @__PURE__ */ jsx4(Fade2, { in: true, timeout: 600, children: /* @__PURE__ */ jsx4(
+  Box4,
+  {
+    sx: {
+      mt: "auto",
+      p: 2,
+      borderTop: (theme) => `1px solid ${alpha4(theme.palette.divider, 0.1)}`,
+      background: (theme) => `linear-gradient(180deg, transparent 0%, ${alpha4(theme.palette.background.default, 0.5)} 100%)`
+    },
+    children
+  }
+) });
+var NavigationStandardBody = ({
+  variant,
+  size,
+  minimal,
+  collapsed,
+  collapsible,
+  showDividers,
+  items,
+  logo,
+  endContent,
+  onCollapseToggle
+}) => {
+  const isVertical = variant === "vertical";
+  const elevation = !minimal && variant === "horizontal" ? 1 : 0;
+  return /* @__PURE__ */ jsxs3(
+    Paper,
+    {
+      elevation,
+      sx: {
+        width: "100%",
+        height: isVertical ? "100%" : "auto",
+        overflow: "hidden",
+        background: minimal ? "transparent" : void 0
+      },
+      children: [
+        logo && isVertical && /* @__PURE__ */ jsx4(VerticalLogo, { logo, collapsed }),
+        collapsible && isVertical && /* @__PURE__ */ jsx4(CollapseControl, { collapsed, onToggle: onCollapseToggle }),
+        /* @__PURE__ */ jsx4(
+          MenuItems,
+          {
+            items,
+            variant,
+            size,
+            collapsed,
+            minimal,
+            showDividers
+          }
+        ),
+        endContent && /* @__PURE__ */ jsx4(EndPanel, { children: endContent })
+      ]
+    }
+  );
+};
+
+// src/components/navigation/NavigationMenu/NavigationMenu.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var MegaMenuLayout = React5.forwardRef(
+  ({
+    variant,
+    logo,
+    items,
+    size,
+    minimal,
+    dataTestId: _dataTestId,
+    className,
+    maxWidth,
+    style,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx5(
+      NavigationShell,
+      {
+        ref,
+        variant,
+        minimal,
+        className,
+        style: { maxWidth, ...style },
+        ...props,
+        children: /* @__PURE__ */ jsxs4(
+          Paper2,
+          {
+            elevation: minimal ? 0 : 1,
+            sx: {
+              width: "100%",
+              overflow: "hidden",
+              background: minimal ? "transparent" : void 0
+            },
+            children: [
+              logo && /* @__PURE__ */ jsx5(LogoBar, { children: logo }),
+              /* @__PURE__ */ jsx5(
+                Box5,
+                {
+                  sx: {
+                    display: "grid",
+                    gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))",
+                    gap: 3,
+                    p: 3
+                  },
+                  children: items.map((section, sectionIndex) => /* @__PURE__ */ jsx5(
+                    NavigationMegaSection,
+                    {
+                      section,
+                      sectionIndex,
+                      variant,
+                      size,
+                      minimal
+                    },
+                    section.id
+                  ))
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+MegaMenuLayout.displayName = "MegaMenuLayout";
+var NAVIGATION_DEFAULTS = {
+  variant: "vertical",
+  size: "md",
+  minimal: false,
+  collapsible: false,
+  showDividers: false
+};
+var resolveProps = (props) => ({
+  ...NAVIGATION_DEFAULTS,
+  ...Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== void 0)
+  )
+});
+var NavigationMenu = React5.forwardRef(
+  (componentProps, ref) => {
+    const {
+      variant,
+      items,
+      size,
+      minimal,
+      collapsible,
+      collapsed: controlledCollapsed,
+      onCollapseChange,
+      logo,
+      endContent,
+      maxWidth,
+      showDividers,
+      className,
+      style,
+      ...props
+    } = resolveProps(componentProps);
+    const [internalCollapsed, setInternalCollapsed] = useState2(false);
+    const isControlled = controlledCollapsed !== void 0;
+    const collapsed = isControlled ? controlledCollapsed : internalCollapsed;
+    const handleCollapseToggle = () => {
+      if (!isControlled) setInternalCollapsed(!collapsed);
+      onCollapseChange?.(!collapsed);
+    };
+    if (variant === "mega") {
+      return /* @__PURE__ */ jsx5(
+        MegaMenuLayout,
+        {
+          ref,
+          variant,
+          collapsed,
+          logo,
+          items,
+          size,
+          minimal,
+          className,
+          maxWidth,
+          style,
+          ...props
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx5(
+      NavigationShell,
+      {
+        ref,
+        variant,
+        minimal,
+        collapsed,
+        className,
+        style,
+        ...props,
+        children: /* @__PURE__ */ jsx5(
+          NavigationStandardBody,
+          {
+            variant,
+            size,
+            minimal,
+            collapsed,
+            collapsible,
+            showDividers,
+            items,
+            logo,
+            endContent,
+            onCollapseToggle: handleCollapseToggle
+          }
+        )
+      }
+    );
+  }
+);
+NavigationMenu.displayName = "NavigationMenu";
+export {
+  NavigationMenu
+};
+//# sourceMappingURL=NavigationMenu.js.map