@opensite/ui 1.0.9 → 1.1.1

package/dist/navbar-sticky-compact.js

@@ -6,6 +6,7 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 
 // components/blocks/navbars/navbar-sticky-compact.tsx
@@ -970,6 +971,66 @@ var NavbarLogo = ({
     }
   );
 };
+function Accordion({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-b ", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: cn("pt-0 pb-4", className), children })
+    }
+  );
+}
 function NavigationMenu({
   className,
   children,
@@ -1114,6 +1175,8 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
+  closeContainerClassName,
+  closeIconClassName,
   title = "Mobile Navigation"
 }) => {
   React.useEffect(() => {
@@ -1138,18 +1201,27 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            onClick: onClose,
-            className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-            "aria-label": "Close mobile menu",
-            children: [
-              /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-            ]
+            className: cn(
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
+              closeContainerClassName
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "aria-label": "Close mobile menu",
+                children: [
+                  /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -1299,37 +1371,6 @@ var NavbarStickyCompact = ({
       ) }, index)
     );
   }, [menuSlot, menu, isScrolled]);
-  const renderMobileMenu = useMemo(() => {
-    if (menuSlot) return menuSlot;
-    if (!menu || menu.length === 0) return null;
-    return menu.map(
-      (item, index) => item.items ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-muted-foreground", children: item.title }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 pl-2", children: item.items.map((subItem, subIndex) => /* @__PURE__ */ jsxs(
-          Pressable,
-          {
-            href: subItem.url,
-            className: "flex items-center gap-2 rounded-md py-2 text-sm hover:text-foreground",
-            onClick: () => setIsOpen(false),
-            children: [
-              subItem.icon && /* @__PURE__ */ jsx(DynamicIcon, { name: subItem.icon, size: 14 }),
-              subItem.title
-            ]
-          },
-          subIndex
-        )) })
-      ] }, index) : /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          href: item.url,
-          className: "text-sm font-medium",
-          onClick: () => setIsOpen(false),
-          children: item.title
-        },
-        index
-      )
-    );
-  }, [menuSlot, menu]);
   const {
     sectionClasses,
     containerWrapperClasses,
@@ -1339,99 +1380,165 @@ var NavbarStickyCompact = ({
     sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
-  return /* @__PURE__ */ jsx(
-    Section,
-    {
-      background,
-      spacing: spacingOverride ?? spacing,
-      className: cn(
-        sectionClasses,
-        "fixed top-0 left-0 z-50 w-full bg-background/95 backdrop-blur-sm transition-all duration-300",
-        isScrolled ? "shadow-sm" : ""
-      ),
-      pattern,
-      patternOpacity,
-      containerClassName: sectionContainerClassName,
-      containerMaxWidth: sectionContainerMaxWidth,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
-        "nav",
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Section,
+      {
+        background,
+        spacing: spacingOverride ?? spacing,
+        className: cn(
+          sectionClasses,
+          "fixed top-0 left-0 z-50 w-full bg-background/95 backdrop-blur-sm transition-all duration-300",
+          isScrolled ? "shadow-sm" : ""
+        ),
+        pattern,
+        patternOpacity,
+        containerClassName: sectionContainerClassName,
+        containerMaxWidth: sectionContainerMaxWidth,
+        children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+          "nav",
+          {
+            className: cn(
+              "flex items-center justify-between transition-all duration-300",
+              isScrolled ? "h-14" : "h-16",
+              navClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx(
+                NavbarLogo,
+                {
+                  logo,
+                  logoSlot,
+                  logoClassName,
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsx(NavigationMenu, { className: "hidden lg:flex", viewport: false, children: /* @__PURE__ */ jsx(NavigationMenuList, { children: renderMenu }) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "hidden items-center gap-2 lg:flex",
+                    actionsClassName
+                  ),
+                  children: renderAuthActions
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Pressable,
+                {
+                  variant: "ghost",
+                  size: isScrolled ? "sm" : "icon",
+                  asButton: true,
+                  className: "lg:hidden transition-all duration-300",
+                  onClick: () => setIsOpen(!isOpen),
+                  children: [
+                    /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: isScrolled ? 18 : 20 }),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle menu" })
+                  ]
+                }
+              )
+            ]
+          }
+        ) }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MobileNavigationMenu,
+      {
+        open: isOpen,
+        setOpen: setIsOpen,
+        menu: menu ?? [],
+        menuSlot,
+        authActions,
+        authActionsSlot
+      }
+    )
+  ] });
+};
+var MobileNavigationMenu = ({
+  open,
+  setOpen,
+  menu,
+  menuSlot,
+  authActions,
+  authActionsSlot
+}) => {
+  const handleClose = () => setOpen(false);
+  const renderMobileAuthActions = useMemo(() => {
+    if (authActionsSlot) return authActionsSlot;
+    if (!authActions || authActions.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: "mt-6 flex flex-col gap-4", children: authActions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsx(
+        Pressable,
         {
-          className: cn(
-            "flex items-center justify-between transition-all duration-300",
-            isScrolled ? "h-14" : "h-16",
-            navClassName
-          ),
+          asButton: true,
+          className: cn("w-full", actionClassName),
+          onClick: handleClose,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    }) });
+  }, [authActionsSlot, authActions]);
+  return /* @__PURE__ */ jsx(NavbarMobileMenu, { open, onClose: handleClose, title: "Navigation Menu", children: /* @__PURE__ */ jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+    /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full", children: menuSlot ? menuSlot : menu.map(
+      (item, index) => item.items ? /* @__PURE__ */ jsxs(
+        AccordionItem,
+        {
+          value: `nav-${index}`,
+          className: "border-b-0",
           children: [
-            /* @__PURE__ */ jsx(
-              NavbarLogo,
-              {
-                logo,
-                logoSlot,
-                logoClassName: cn(
-                  isScrolled ? "[&_img]:h-6 [&_span]:text-base" : "[&_img]:h-8 [&_span]:text-lg",
-                  "[&_img]:transition-all [&_img]:duration-300 [&_span]:transition-all [&_span]:duration-300",
-                  logoClassName
-                ),
-                optixFlowConfig
-              }
-            ),
-            /* @__PURE__ */ jsx(NavigationMenu, { className: "hidden lg:flex", children: /* @__PURE__ */ jsx(NavigationMenuList, { children: renderMenu }) }),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "hidden items-center gap-2 lg:flex",
-                  actionsClassName
-                ),
-                children: renderAuthActions
-              }
-            ),
-            /* @__PURE__ */ jsxs(
+            /* @__PURE__ */ jsx(AccordionTrigger, { className: "h-15 items-center p-0 px-4! text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline", children: item.title }),
+            /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: item.items.map((subItem, subIndex) => /* @__PURE__ */ jsxs(
               Pressable,
               {
-                variant: "ghost",
-                size: isScrolled ? "sm" : "icon",
-                asButton: true,
-                className: "lg:hidden transition-all duration-300",
-                onClick: () => setIsOpen(!isOpen),
+                href: subItem.url,
+                className: "flex min-h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
+                onClick: handleClose,
                 children: [
-                  /* @__PURE__ */ jsx(
+                  subItem.icon && /* @__PURE__ */ jsx(
                     DynamicIcon,
                     {
-                      name: "lucide/menu",
-                      size: isScrolled ? 18 : 20
+                      name: subItem.icon,
+                      size: 16,
+                      className: "stroke-muted-foreground"
                     }
                   ),
-                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle menu" })
+                  subItem.title
                 ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              NavbarMobileMenu,
-              {
-                open: isOpen,
-                onClose: () => setIsOpen(false),
-                title: "Navigation Menu",
-                children: /* @__PURE__ */ jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
-                  renderMobileMenu,
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: cn(
-                        "mt-4 flex flex-col gap-2 border-t pt-4",
-                        actionsClassName
-                      ),
-                      children: renderAuthActions
-                    }
-                  )
-                ] }) })
-              }
-            )
+              },
+              `mobile-link-${index}-${subIndex}`
+            )) })
           ]
-        }
-      ) }) }) })
-    }
-  );
+        },
+        `nav-item-${index}`
+      ) : /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          href: item.url,
+          className: "flex h-15 items-center rounded-md p-0 px-4 text-left text-base leading-[3.75] font-normal text-muted-foreground ring-ring/10 outline-ring/50 transition-all hover:bg-muted focus-visible:ring-4 focus-visible:outline-1",
+          onClick: handleClose,
+          children: item.title
+        },
+        `nav-link-${index}`
+      )
+    ) }),
+    renderMobileAuthActions
+  ] }) }) });
 };
 
 export { NavbarStickyCompact };

package/dist/navbar-tabbed-sections.cjs

@@ -1138,6 +1138,8 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
+  closeContainerClassName,
+  closeIconClassName,
   title = "Mobile Navigation"
 }) => {
   React__namespace.useEffect(() => {
@@ -1162,18 +1164,27 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            onClick: onClose,
-            className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-            "aria-label": "Close mobile menu",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-            ]
+            className: cn(
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
+              closeContainerClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "aria-label": "Close mobile menu",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {

package/dist/navbar-tabbed-sections.js

@@ -1115,6 +1115,8 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
+  closeContainerClassName,
+  closeIconClassName,
   title = "Mobile Navigation"
 }) => {
   React.useEffect(() => {
@@ -1139,18 +1141,27 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            onClick: onClose,
-            className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-            "aria-label": "Close mobile menu",
-            children: [
-              /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-            ]
+            className: cn(
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
+              closeContainerClassName
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "aria-label": "Close mobile menu",
+                children: [
+                  /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {

package/dist/navbar-transparent-overlay.cjs

@@ -998,6 +998,8 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
+  closeContainerClassName,
+  closeIconClassName,
   title = "Mobile Navigation"
 }) => {
   React__namespace.useEffect(() => {
@@ -1022,18 +1024,27 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            onClick: onClose,
-            className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-            "aria-label": "Close mobile menu",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-            ]
+            className: cn(
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
+              closeContainerClassName
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "aria-label": "Close mobile menu",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -1488,6 +1499,8 @@ var MobileNavigationMenu = ({
       title: "Mobile Navigation",
       className: cn("bg-black/95", mobileMenuClassName),
       contentClassName: "flex flex-col items-center justify-center",
+      closeContainerClassName: "bg-black/95",
+      closeIconClassName: "text-white",
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col items-center justify-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex flex-col items-center gap-8", children: navItems?.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(
           Pressable,

package/dist/navbar-transparent-overlay.js

@@ -976,6 +976,8 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
+  closeContainerClassName,
+  closeIconClassName,
   title = "Mobile Navigation"
 }) => {
   React.useEffect(() => {
@@ -1000,18 +1002,27 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            onClick: onClose,
-            className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-            "aria-label": "Close mobile menu",
-            children: [
-              /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-            ]
+            className: cn(
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen",
+              closeContainerClassName
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "aria-label": "Close mobile menu",
+                children: [
+                  /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: cn("size-4", closeIconClassName) }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -1466,6 +1477,8 @@ var MobileNavigationMenu = ({
       title: "Mobile Navigation",
       className: cn("bg-black/95", mobileMenuClassName),
       contentClassName: "flex flex-col items-center justify-center",
+      closeContainerClassName: "bg-black/95",
+      closeIconClassName: "text-white",
       children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col items-center justify-center", children: [
         /* @__PURE__ */ jsx("nav", { className: "flex flex-col items-center gap-8", children: navItems?.map((item, index) => /* @__PURE__ */ jsxs(
           Pressable,