@opensite/ui 1.0.9 → 1.1.0

package/dist/registry.js

@@ -57068,6 +57068,7 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
+  closeContainerClassName = "",
   title = "Mobile Navigation"
 }) => {
   React52.useEffect(() => {
@@ -57092,18 +57093,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(
+              closeContainerClassName,
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
+            ),
+            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",
           {
@@ -58698,7 +58708,7 @@ var renderMobileDropdownContent = (item) => {
           Pressable,
           {
             href: solution.href,
-            className: "block pb-2 text-sm font-medium",
+            className: "block pt-4 text-sm font-medium",
             children: solution.title
           }
         ),
@@ -60748,7 +60758,7 @@ var GroupedLinksImageDropdown = ({
   imageLink,
   optixFlowConfig
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-4", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-8", children: [
     /* @__PURE__ */ jsx(GroupLinks, { groupLinks }),
     /* @__PURE__ */ jsx(FeaturedImageLink, { link: imageLink, optixFlowConfig })
   ] });
@@ -60769,7 +60779,7 @@ var GroupLinks = ({ groupLinks }) => {
   };
   if (!groupLinks) return null;
   let linkIndex = 0;
-  return /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between gap-4", children: groupLinks.map((group, index1) => /* @__PURE__ */ jsxs("div", { children: [
+  return /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4", children: groupLinks.map((group, index1) => /* @__PURE__ */ jsxs("div", { children: [
     /* @__PURE__ */ jsx("div", { className: "mb-4 text-xs", children: group.label }),
     /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-4", children: group.links.map((link, index2) => {
       const idx = linkIndex++;
@@ -60827,7 +60837,7 @@ var FeaturedLink = ({ link, optixFlowConfig }) => {
     Pressable,
     {
       href: getLinkUrl(link),
-      className: "group relative flex w-full overflow-hidden rounded-xl bg-muted px-8 py-12",
+      className: "group relative flex w-full overflow-hidden rounded-xl bg-muted px-4 pt-12 pb-4",
       children: [
         /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex w-full items-center gap-6", children: [
           /* @__PURE__ */ jsx("div", { className: "flex size-12 shrink-0 rounded-lg border bg-background shadow-lg", children: link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsx(
@@ -60943,10 +60953,10 @@ var renderMobileMenuItem4 = (item, index) => {
         children: [
           /* @__PURE__ */ jsx(AccordionTrigger, { className: "h-10 items-center text-base font-normal text-foreground hover:no-underline", children: item.label }),
           /* @__PURE__ */ jsxs(AccordionContent, { className: "flex flex-col gap-6 p-2", children: [
-            item.featuredLinks && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-2", children: item.featuredLinks.map((link, idx) => /* @__PURE__ */ jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
-            item.links && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-2", children: item.links.map((link, idx) => /* @__PURE__ */ jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
-            item.groupLinks && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-2", children: item.groupLinks.map((group, groupIdx) => /* @__PURE__ */ jsxs("div", { className: "mb-8 last:mb-0", children: [
-              /* @__PURE__ */ jsx("div", { className: "mb-4 text-xs text-muted-foreground", children: group.label }),
+            item.featuredLinks && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 p-2", children: item.featuredLinks.map((link, idx) => /* @__PURE__ */ jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
+            item.links && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 p-2", children: item.links.map((link, idx) => /* @__PURE__ */ jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
+            item.groupLinks && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 p-2", children: item.groupLinks.map((group, groupIdx) => /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+              group.label && /* @__PURE__ */ jsx("div", { className: "mb-4 text-xs text-muted-foreground", children: group.label }),
               /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: group.links.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { link }) }, `group-link-${groupIdx}-${linkIdx}`)) })
             ] }, `group-link-${groupIdx}`)) })
           ] })
@@ -61136,8 +61146,8 @@ var NavbarMultiColumnGroups = ({
         open,
         setOpen,
         navigation: navigation ?? [],
-        authActions: mobileAuthActions,
-        authActionsSlot: mobileAuthActionsSlot
+        authActions: mobileAuthActions ?? authActions,
+        authActionsSlot: mobileAuthActionsSlot ?? authActionsSlot
       }
     )
   ] });
@@ -61234,29 +61244,36 @@ var MobileNavigationMenu5 = ({
                 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: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                    /* @__PURE__ */ jsx("p", { className: "mb-2 px-4 text-[10px] text-muted-foreground uppercase", children: group.title }),
-                    group.links.map((link, linkIndex) => /* @__PURE__ */ jsxs(
-                      Pressable,
-                      {
-                        href: link.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: [
-                          link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsx(
-                            DynamicIcon,
-                            {
-                              name: link.iconName,
-                              size: 16,
-                              className: "stroke-muted-foreground"
-                            }
-                          ) : null,
-                          link.label
-                        ]
-                      },
-                      `mobile-link-${groupIndex}-${linkIndex}`
-                    ))
-                  ] }, `mobile-group-${groupIndex}`)) })
+                  /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "mb-4",
+                      children: [
+                        group.title && /* @__PURE__ */ jsx("p", { className: "mt-4 px-4 text-xs font-semibold text-muted-foreground uppercase", children: group.title }),
+                        group.links.map((link, linkIndex) => /* @__PURE__ */ jsxs(
+                          Pressable,
+                          {
+                            href: link.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: [
+                              link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsx(
+                                DynamicIcon,
+                                {
+                                  name: link.iconName,
+                                  size: 16,
+                                  className: "stroke-muted-foreground"
+                                }
+                              ) : null,
+                              link.label
+                            ]
+                          },
+                          `mobile-link-${groupIndex}-${linkIndex}`
+                        ))
+                      ]
+                    },
+                    `mobile-group-${groupIndex}`
+                  )) })
                 ]
               },
               `nav-item-${index}`
@@ -61398,6 +61415,7 @@ var NavbarSidebarMobile = ({
                   NavigationMenu,
                   {
                     className: cn("hidden lg:flex", navigationMenuClassName),
+                    viewport: false,
                     children: /* @__PURE__ */ jsx(NavigationMenuList, { children: menuSlot ? menuSlot : renderMenu()?.map(
                       (item, index) => item.items ? /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
                         /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: item.title }),
@@ -61894,6 +61912,7 @@ var MobileNavigationMenu7 = ({
       title: "Mobile Navigation",
       className: cn("bg-black/95", mobileMenuClassName),
       contentClassName: "flex flex-col items-center justify-center",
+      closeContainerClassName: "bg-black/95",
       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,
@@ -62107,36 +62126,44 @@ var DesktopMenuItem7 = ({
         ),
         /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
           /* @__PURE__ */ jsx("p", { className: "mb-3 text-[10px] text-muted-foreground uppercase", children: group.label }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-1", children: group.links.map((link) => /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
-            Pressable,
+          /* @__PURE__ */ jsx("div", { className: "space-y-1", children: group.links.map((link) => /* @__PURE__ */ jsx(
+            NavigationMenuLink,
             {
-              href: link.href,
-              className: "group flex cursor-pointer flex-row gap-3",
-              children: [
-                link.icon && /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsx(DynamicIcon, { name: link.icon, size: 20 }) }),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                  /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5 text-sm font-medium whitespace-nowrap", children: [
-                    link.title,
-                    /* @__PURE__ */ jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/chevron-right",
-                        size: 16,
-                        className: "text-primary! opacity-0 transition-all duration-200 group-hover:translate-x-0.5 group-hover:opacity-100"
-                      }
-                    )
-                  ] }),
-                  link.description && /* @__PURE__ */ jsx("p", { className: "text-xs whitespace-nowrap text-muted-foreground", children: link.description })
-                ] })
-              ]
-            }
-          ) }, link.title)) }),
+              asChild: true,
+              className: "w-full",
+              children: /* @__PURE__ */ jsxs(
+                Pressable,
+                {
+                  href: link.href,
+                  className: "group flex cursor-pointer flex-row gap-3",
+                  children: [
+                    link.icon && /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsx(DynamicIcon, { name: link.icon, size: 20 }) }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5 text-sm font-medium whitespace-nowrap", children: [
+                        link.title,
+                        /* @__PURE__ */ jsx(
+                          DynamicIcon,
+                          {
+                            name: "lucide/chevron-right",
+                            size: 16,
+                            className: "opacity-0 transition-all duration-200 group-hover:translate-x-0.5 group-hover:opacity-100"
+                          }
+                        )
+                      ] }),
+                      link.description && /* @__PURE__ */ jsx("p", { className: "text-xs whitespace-nowrap text-muted-foreground", children: link.description })
+                    ] })
+                  ]
+                }
+              )
+            },
+            link.title
+          )) }),
           group.featuredImage && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: group.featuredImage.href || "#", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted p-3", children: /* @__PURE__ */ jsx(
             Img,
             {
               src: group.featuredImage.src,
               alt: group.featuredImage.alt || "Featured image",
-              className: "aspect-video w-full max-w-[240px] rounded-md object-cover object-center",
+              className: "aspect-video w-full max-w-60 rounded-md object-cover object-center",
               optixFlowConfig
             }
           ) }) }) }) })
@@ -62200,29 +62227,36 @@ var MobileNavigationMenu8 = ({
                 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.label }),
-                  /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                    /* @__PURE__ */ jsx("p", { className: "mb-2 px-4 text-[10px] text-muted-foreground uppercase", children: group.label }),
-                    group.links.map((link) => /* @__PURE__ */ jsxs(
-                      Pressable,
-                      {
-                        href: link.href,
-                        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: onClose,
-                        children: [
-                          link.icon && /* @__PURE__ */ jsx(
-                            DynamicIcon,
-                            {
-                              name: link.icon,
-                              size: 16,
-                              className: "stroke-muted-foreground"
-                            }
-                          ),
+                  /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "mb-4",
+                      children: [
+                        group.label && /* @__PURE__ */ jsx("p", { className: "block mt-4 mb-2 px-4 text-[10px] text-muted-foreground uppercase", children: group.label }),
+                        group.links.map((link) => /* @__PURE__ */ jsxs(
+                          Pressable,
+                          {
+                            href: link.href,
+                            className: "flex min-h-12 items-center gap-2 rounded-lg pl-6 pr-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
+                            onClick: onClose,
+                            children: [
+                              link.icon && /* @__PURE__ */ jsx(
+                                DynamicIcon,
+                                {
+                                  name: link.icon,
+                                  size: 16,
+                                  className: "stroke-muted-foreground"
+                                }
+                              ),
+                              link.title
+                            ]
+                          },
                           link.title
-                        ]
-                      },
-                      link.title
-                    ))
-                  ] }, `mobile-group-${groupIndex}`)) })
+                        ))
+                      ]
+                    },
+                    `mobile-group-${groupIndex}`
+                  )) })
                 ]
               },
               `nav-item-${index}`
@@ -62343,37 +62377,6 @@ var NavbarStickyCompact = ({
       ) }, index)
     );
   }, [menuSlot, menu, isScrolled]);
-  const renderMobileMenu = useMemo$1(() => {
-    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,
@@ -62383,99 +62386,175 @@ 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$1, { 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: 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", 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(
+      MobileNavigationMenu9,
+      {
+        open: isOpen,
+        setOpen: setIsOpen,
+        menu: menu ?? [],
+        menuSlot,
+        authActions,
+        authActionsSlot
+      }
+    )
+  ] });
+};
+var MobileNavigationMenu9 = ({
+  open,
+  setOpen,
+  menu,
+  menuSlot,
+  authActions,
+  authActionsSlot
+}) => {
+  const handleClose = () => setOpen(false);
+  const renderMobileAuthActions = useMemo$1(() => {
+    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$1, { 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
+  ] }) }) });
 };
 var NavbarSearchFocused = ({
   className,
@@ -62873,19 +62952,19 @@ var NavbarSimpleLinks = ({
       }
     ),
     /* @__PURE__ */ jsx(
-      MobileNavigationMenu9,
+      MobileNavigationMenu10,
       {
         open: isOpen,
         onClose: handleMobileMenuClose,
         navItems: navItems ?? [],
-        mobileActions,
-        mobileActionsSlot,
+        mobileActions: mobileActions ?? actions,
+        mobileActionsSlot: mobileActionsSlot ?? actionsSlot,
         mobileMenuClassName
       }
     )
   ] });
 };
-var MobileNavigationMenu9 = ({
+var MobileNavigationMenu10 = ({
   open,
   onClose,
   navItems,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opensite/ui",
-  "version": "1.0.9",
+  "version": "1.1.0",
   "description": "Foundational UI component library for OpenSite Semantic Site Builder with tree-shakable exports and abstract styling",
   "keywords": [
     "react",