@opensite/ui 1.0.6 → 1.0.7

package/dist/navbar-mega-menu.cjs

@@ -8,6 +8,7 @@ var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
 var NavigationMenuPrimitive = require('@radix-ui/react-navigation-menu');
+var AccordionPrimitive = require('@radix-ui/react-accordion');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -29,6 +30,7 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var NavigationMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(NavigationMenuPrimitive);
+var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 
 // components/blocks/navbars/navbar-mega-menu.tsx
 function cn(...inputs) {
@@ -1130,6 +1132,122 @@ function NavigationMenuLink({
     }
   );
 }
+function Accordion({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionPrimitive__namespace.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-b ", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    AccordionPrimitive__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    AccordionPrimitive__namespace.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__ */ jsxRuntime.jsx("div", { className: cn("pt-0 pb-4", className), children })
+    }
+  );
+}
+var NavbarMobileMenu = ({
+  open,
+  onClose,
+  children,
+  className,
+  contentClassName,
+  title = "Mobile Navigation"
+}) => {
+  React__namespace.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-4 right-4 z-10", 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: "size-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.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) {
@@ -1372,51 +1490,6 @@ var DesktopMenuItem = ({
   }
   return null;
 };
-var MobileSubmenu = ({
-  submenu,
-  mobileMenuClassName,
-  optixFlowConfig
-}) => {
-  const items = submenu.links || [];
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-            Pressable,
-            {
-              href: getLinkUrl(item),
-              className: "flex items-start gap-4 border-b border-border px-8 py-5",
-              children: [
-                item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
-                  img.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base", children: item.label }),
-                  item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: item.description })
-                ] })
-              ]
-            },
-            `mobile-item-${index}`
-          );
-        })
-      ]
-    }
-  );
-};
 var NavbarMegaMenu = ({
   className,
   containerClassName,
@@ -1437,8 +1510,6 @@ var NavbarMegaMenu = ({
   optixFlowConfig
 }) => {
   const [open, setOpen] = React.useState(false);
-  const [submenuIndex, setSubmenuIndex] = React.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
   );
@@ -1492,36 +1563,15 @@ var NavbarMegaMenu = ({
           ),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: navWrapperClasses, children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                (!open || submenuIndex === null) && /* @__PURE__ */ jsxRuntime.jsx(
-                  NavbarLogo,
-                  {
-                    logo,
-                    logoSlot,
-                    logoClassName,
-                    optixFlowConfig
-                  }
-                ),
-                open && submenuIndex !== null && /* @__PURE__ */ jsxRuntime.jsxs(
-                  Pressable,
-                  {
-                    variant: "outline",
-                    asButton: true,
-                    onClick: () => setSubmenuIndex(null),
-                    children: [
-                      "Back",
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        DynamicIcon,
-                        {
-                          name: "lucide/chevron-left",
-                          size: 16,
-                          className: "ml-2"
-                        }
-                      )
-                    ]
-                  }
-                )
-              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+                NavbarLogo,
+                {
+                  logo,
+                  logoSlot,
+                  logoClassName,
+                  optixFlowConfig
+                }
+              ) }),
               /* @__PURE__ */ jsxRuntime.jsx(
                 NavigationMenuList,
                 {
@@ -1562,14 +1612,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__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 16 }),
                     open && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", size: 16 })
@@ -1577,31 +1620,42 @@ var NavbarMegaMenu = ({
                 }
               ) })
             ] }),
-            open && submenuIndex === null && /* @__PURE__ */ jsxRuntime.jsxs(
-              "div",
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { children: menuLinks?.map((link, index) => {
+                open,
+                onClose: () => setOpen(false),
+                title: "Mobile Navigation",
+                contentClassName: "pt-10 pb-20",
+                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-screen-sm mx-auto", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: menuLinks?.map((link, index) => {
                     if (hasDropdownItems(link)) {
+                      const items = link.links || [];
                       return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "flex-1", children: link.label }),
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-                              DynamicIcon,
+                            /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center text-base font-normal text-foreground hover:no-underline", children: link.label }),
+                            /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: items.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                                    DynamicIcon,
+                                    {
+                                      name: item.iconName,
+                                      size: 14
+                                    }
+                                  ) : null),
+                                  item.label
+                                ]
+                              },
+                              `mobile-link-${index}-${itemIndex}`
+                            )) })
                           ]
                         },
                         `mobile-menu-link-${index}`
@@ -1614,8 +1668,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__ */ jsxRuntime.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}`
                     );
@@ -1623,22 +1677,11 @@ var NavbarMegaMenu = ({
                   /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-              MobileSubmenu,
-              {
-                submenu: activeSubmenu,
-                mobileMenuClassName,
-                optixFlowConfig
+                ] })
               }
             )
           ]