@opensite/ui 1.0.5 → 1.0.7

package/dist/navbar-mega-menu.js

@@ -7,6 +7,7 @@ import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
 
 // components/blocks/navbars/navbar-mega-menu.tsx
 function cn(...inputs) {
@@ -1108,6 +1109,122 @@ function NavigationMenuLink({
     }
   );
 }
+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 })
+    }
+  );
+}
+var NavbarMobileMenu = ({
+  open,
+  onClose,
+  children,
+  className,
+  contentClassName,
+  title = "Mobile Navigation"
+}) => {
+  React.useEffect(() => {
+    if (open) {
+      const originalOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      return () => {
+        document.body.style.overflow = originalOverflow;
+      };
+    }
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "fixed inset-0 z-998 flex flex-col bg-background",
+        "animate-in slide-in-from-top duration-300",
+        "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
+        className
+      ),
+      "data-state": open ? "open" : "closed",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
+        /* @__PURE__ */ jsx("div", { className: "absolute top-4 right-4 z-10", 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: "size-4" }),
+              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "h-full overflow-y-auto pt-20 pb-8 px-4 sm:px-6",
+              contentClassName
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+};
 
 // components/blocks/navbars/types.ts
 function getLinkUrl(item) {
@@ -1350,51 +1467,6 @@ var DesktopMenuItem = ({
   }
   return null;
 };
-var MobileSubmenu = ({
-  submenu,
-  mobileMenuClassName,
-  optixFlowConfig
-}) => {
-  const items = submenu.links || [];
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: cn(
-        "fixed inset-0 top-[72px] flex h-[calc(100vh-72px)] w-full flex-col overflow-scroll border-t border-border bg-background lg:hidden",
-        mobileMenuClassName
-      ),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "px-8 py-3.5 text-xs tracking-widest text-muted-foreground uppercase", children: submenu.label }),
-        items.map((item, index) => {
-          return /* @__PURE__ */ jsxs(
-            Pressable,
-            {
-              href: getLinkUrl(item),
-              className: "flex items-start gap-4 border-b border-border px-8 py-5",
-              children: [
-                item.image && /* @__PURE__ */ jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
-                  Img,
-                  {
-                    src: item.image,
-                    alt: typeof item.label === "string" ? item.label : "Menu item",
-                    className: "h-full w-full object-cover object-center",
-                    optixFlowConfig
-                  }
-                ) }),
-                !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-base", children: item.label }),
-                  item.description && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: item.description })
-                ] })
-              ]
-            },
-            `mobile-item-${index}`
-          );
-        })
-      ]
-    }
-  );
-};
 var NavbarMegaMenu = ({
   className,
   containerClassName,
@@ -1415,8 +1487,6 @@ var NavbarMegaMenu = ({
   optixFlowConfig
 }) => {
   const [open, setOpen] = useState(false);
-  const [submenuIndex, setSubmenuIndex] = useState(null);
-  const activeSubmenu = submenuIndex !== null ? menuLinks?.[submenuIndex] : null;
   const hasDropdownItems = (link) => Boolean(
     link.links && link.links.length > 0 || link.dropdownGroups && link.dropdownGroups.length > 0
   );
@@ -1470,36 +1540,15 @@ var NavbarMegaMenu = ({
           ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: navWrapperClasses, children: [
-              /* @__PURE__ */ jsxs("div", { children: [
-                (!open || submenuIndex === null) && /* @__PURE__ */ jsx(
-                  NavbarLogo,
-                  {
-                    logo,
-                    logoSlot,
-                    logoClassName,
-                    optixFlowConfig
-                  }
-                ),
-                open && submenuIndex !== null && /* @__PURE__ */ jsxs(
-                  Pressable,
-                  {
-                    variant: "outline",
-                    asButton: true,
-                    onClick: () => setSubmenuIndex(null),
-                    children: [
-                      "Back",
-                      /* @__PURE__ */ jsx(
-                        DynamicIcon,
-                        {
-                          name: "lucide/chevron-left",
-                          size: 16,
-                          className: "ml-2"
-                        }
-                      )
-                    ]
-                  }
-                )
-              ] }),
+              /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+                NavbarLogo,
+                {
+                  logo,
+                  logoSlot,
+                  logoClassName,
+                  optixFlowConfig
+                }
+              ) }),
               /* @__PURE__ */ jsx(
                 NavigationMenuList,
                 {
@@ -1540,14 +1589,7 @@ var NavbarMegaMenu = ({
                   size: "icon",
                   asButton: true,
                   "aria-label": "Main Menu",
-                  onClick: () => {
-                    if (open) {
-                      setOpen(false);
-                      setSubmenuIndex(null);
-                    } else {
-                      setOpen(true);
-                    }
-                  },
+                  onClick: () => setOpen(!open),
                   children: [
                     !open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 }),
                     open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 16 })
@@ -1555,31 +1597,42 @@ var NavbarMegaMenu = ({
                 }
               ) })
             ] }),
-            open && submenuIndex === null && /* @__PURE__ */ jsxs(
-              "div",
+            /* @__PURE__ */ jsx(
+              NavbarMobileMenu,
               {
-                className: cn(
-                  "fixed inset-0 top-[72px] flex h-[calc(100vh-72px)] w-full flex-col overflow-scroll border-t border-border bg-background lg:hidden",
-                  mobileMenuClassName
-                ),
-                children: [
-                  /* @__PURE__ */ jsx("div", { children: menuLinks?.map((link, index) => {
+                open,
+                onClose: () => setOpen(false),
+                title: "Mobile Navigation",
+                contentClassName: "pt-10 pb-20",
+                children: /* @__PURE__ */ jsxs("div", { className: "max-w-screen-sm mx-auto", children: [
+                  /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full", children: menuLinks?.map((link, index) => {
                     if (hasDropdownItems(link)) {
+                      const items = link.links || [];
                       return /* @__PURE__ */ jsxs(
-                        "button",
+                        AccordionItem,
                         {
-                          type: "button",
-                          className: "flex w-full items-center border-b border-border px-8 py-7 text-left",
-                          onClick: () => setSubmenuIndex(index),
+                          value: `menu-${index}`,
+                          className: "border-b-0",
                           children: [
-                            /* @__PURE__ */ jsx("span", { className: "flex-1", children: link.label }),
-                            /* @__PURE__ */ jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsx(
-                              DynamicIcon,
+                            /* @__PURE__ */ jsx(AccordionTrigger, { className: "h-15 items-center text-base font-normal text-foreground hover:no-underline", children: link.label }),
+                            /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: items.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+                              Pressable,
                               {
-                                name: "lucide/chevron-right",
-                                size: 16
-                              }
-                            ) })
+                                href: getLinkUrl(item),
+                                className: "flex items-center gap-2 pl-4 text-sm text-muted-foreground hover:text-foreground",
+                                children: [
+                                  (item.icon || item.iconName) && (item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(
+                                    DynamicIcon,
+                                    {
+                                      name: item.iconName,
+                                      size: 14
+                                    }
+                                  ) : null),
+                                  item.label
+                                ]
+                              },
+                              `mobile-link-${index}-${itemIndex}`
+                            )) })
                           ]
                         },
                         `mobile-menu-link-${index}`
@@ -1592,8 +1645,8 @@ var NavbarMegaMenu = ({
                       Pressable,
                       {
                         href: link.href,
-                        className: "flex w-full items-center border-b border-border px-8 py-7 text-left",
-                        children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: link.label })
+                        className: "flex h-15 items-center text-base font-normal text-foreground",
+                        children: link.label
                       },
                       `mobile-menu-link-${index}`
                     );
@@ -1601,22 +1654,11 @@ var NavbarMegaMenu = ({
                   /* @__PURE__ */ jsx(
                     "div",
                     {
-                      className: cn(
-                        "mx-8 mt-auto flex flex-col gap-4 py-12",
-                        actionsClassName
-                      ),
+                      className: cn("mt-6 flex flex-col gap-4", actionsClassName),
                       children: renderActions()
                     }
                   )
-                ]
-              }
-            ),
-            open && activeSubmenu && hasDropdownItems(activeSubmenu) && /* @__PURE__ */ jsx(
-              MobileSubmenu,
-              {
-                submenu: activeSubmenu,
-                mobileMenuClassName,
-                optixFlowConfig
+                ] })
               }
             )
           ]

package/dist/navbar-multi-column-groups.cjs

@@ -1214,7 +1214,7 @@ var NavbarMobileMenu = ({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-[998] flex flex-col bg-background",
+        "fixed inset-0 z-998 flex flex-col bg-background",
         "animate-in slide-in-from-top duration-300",
         "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
         className
@@ -1378,18 +1378,18 @@ var NavbarMultiColumnGroups = ({
     sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    Section,
-    {
-      background,
-      spacing: spacingOverride ?? spacing,
-      className: sectionClasses,
-      pattern,
-      patternOpacity,
-      containerClassName: sectionContainerClassName,
-      containerMaxWidth: sectionContainerMaxWidth,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Section,
+      {
+        background,
+        spacing: spacingOverride ?? spacing,
+        className: sectionClasses,
+        pattern,
+        patternOpacity,
+        containerClassName: sectionContainerClassName,
+        containerMaxWidth: sectionContainerMaxWidth,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
@@ -1431,16 +1431,10 @@ var NavbarMultiColumnGroups = ({
                 {
                   className: "size-11",
                   variant: "ghost",
+                  size: "icon",
                   asButton: true,
                   onClick: handleMobileMenu,
-                  children: open ? /* @__PURE__ */ jsxRuntime.jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/x",
-                      size: 22,
-                      className: "stroke-foreground"
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
                     DynamicIcon,
                     {
                       name: "lucide/menu",
@@ -1452,20 +1446,20 @@ var NavbarMultiColumnGroups = ({
               ) })
             ]
           }
-        ) }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          MobileNavigationMenu,
-          {
-            open,
-            setOpen,
-            navigation: navigation ?? [],
-            authActions: mobileAuthActions,
-            authActionsSlot: mobileAuthActionsSlot
-          }
-        )
-      ]
-    }
-  );
+        ) }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MobileNavigationMenu,
+      {
+        open,
+        setOpen,
+        navigation: navigation ?? [],
+        authActions: mobileAuthActions,
+        authActionsSlot: mobileAuthActionsSlot
+      }
+    )
+  ] });
 };
 var DesktopMenuItem = ({ item, index }) => {
   if (item.groups) {
@@ -1547,12 +1541,8 @@ var MobileNavigationMenu = ({
       open,
       onClose: () => setOpen(false),
       title: "Mobile Navigation",
-      className: "dark",
-      contentClassName: "pt-10 pb-20",
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: navigation.map(
-          (item, index) => renderMobileMenuItem(item, index)
-        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: navigation.map((item, index) => renderMobileMenuItem(item, index)) }),
         renderMobileAuthActions
       ] }) })
     }
@@ -1567,12 +1557,12 @@ var renderMobileMenuItem = (item, index) => {
         className: "border-b-0",
         children: [
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(AccordionContent, { className: "max-h-[60dvh] overflow-x-auto", children: item.groups.flatMap(
+          /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.flatMap(
             (group, groupIndex) => group.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
               Pressable,
               {
                 href: link.url,
-                className: "flex h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
+                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",
                 children: [
                   link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
                     DynamicIcon,

package/dist/navbar-multi-column-groups.js

@@ -1191,7 +1191,7 @@ var NavbarMobileMenu = ({
     "div",
     {
       className: cn(
-        "fixed inset-0 z-[998] flex flex-col bg-background",
+        "fixed inset-0 z-998 flex flex-col bg-background",
         "animate-in slide-in-from-top duration-300",
         "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-top data-[state=closed]:duration-300",
         className
@@ -1355,18 +1355,18 @@ var NavbarMultiColumnGroups = ({
     sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
-  return /* @__PURE__ */ jsxs(
-    Section,
-    {
-      background,
-      spacing: spacingOverride ?? spacing,
-      className: sectionClasses,
-      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(
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Section,
+      {
+        background,
+        spacing: spacingOverride ?? spacing,
+        className: sectionClasses,
+        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(
           "div",
           {
             className: cn(
@@ -1408,16 +1408,10 @@ var NavbarMultiColumnGroups = ({
                 {
                   className: "size-11",
                   variant: "ghost",
+                  size: "icon",
                   asButton: true,
                   onClick: handleMobileMenu,
-                  children: open ? /* @__PURE__ */ jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/x",
-                      size: 22,
-                      className: "stroke-foreground"
-                    }
-                  ) : /* @__PURE__ */ jsx(
+                  children: /* @__PURE__ */ jsx(
                     DynamicIcon,
                     {
                       name: "lucide/menu",
@@ -1429,20 +1423,20 @@ var NavbarMultiColumnGroups = ({
               ) })
             ]
           }
-        ) }) }) }),
-        /* @__PURE__ */ jsx(
-          MobileNavigationMenu,
-          {
-            open,
-            setOpen,
-            navigation: navigation ?? [],
-            authActions: mobileAuthActions,
-            authActionsSlot: mobileAuthActionsSlot
-          }
-        )
-      ]
-    }
-  );
+        ) }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MobileNavigationMenu,
+      {
+        open,
+        setOpen,
+        navigation: navigation ?? [],
+        authActions: mobileAuthActions,
+        authActionsSlot: mobileAuthActionsSlot
+      }
+    )
+  ] });
 };
 var DesktopMenuItem = ({ item, index }) => {
   if (item.groups) {
@@ -1524,12 +1518,8 @@ var MobileNavigationMenu = ({
       open,
       onClose: () => setOpen(false),
       title: "Mobile Navigation",
-      className: "dark",
-      contentClassName: "pt-10 pb-20",
       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: navigation.map(
-          (item, index) => renderMobileMenuItem(item, index)
-        ) }),
+        /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full", children: navigation.map((item, index) => renderMobileMenuItem(item, index)) }),
         renderMobileAuthActions
       ] }) })
     }
@@ -1544,12 +1534,12 @@ var renderMobileMenuItem = (item, index) => {
         className: "border-b-0",
         children: [
           /* @__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: "max-h-[60dvh] overflow-x-auto", children: item.groups.flatMap(
+          /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.flatMap(
             (group, groupIndex) => group.links.map((link, linkIndex) => /* @__PURE__ */ jsxs(
               Pressable,
               {
                 href: link.url,
-                className: "flex h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
+                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",
                 children: [
                   link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsx(
                     DynamicIcon,