@opensite/ui 1.0.7 → 1.0.9

package/dist/navbar-simple-links.js

@@ -6,7 +6,6 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { Img } from '@page-speed/img';
 
 // components/blocks/navbars/navbar-simple-links.tsx
@@ -1006,36 +1005,6 @@ function NavigationMenuLink({
     }
   );
 }
-function Popover({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-    PopoverPrimitive.Content,
-    {
-      "data-slot": "popover-content",
-      align,
-      sideOffset,
-      className: cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-        className
-      ),
-      ...props
-    }
-  ) });
-}
 var NavbarLogo = ({
   logo,
   logoSlot,
@@ -1096,6 +1065,62 @@ var NavbarLogo = ({
     }
   );
 };
+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-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",
+          {
+            className: cn(
+              "h-full overflow-y-auto pt-20 pb-8 px-4 sm:px-6",
+              contentClassName
+            ),
+            children
+          }
+        )
+      ]
+    }
+  );
+};
 
 // components/blocks/navbars/layout-variant-utils.ts
 function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
@@ -1132,86 +1157,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     spacingOverride: isFloatingBar ? "none" : "py-0 md:py-0"
   };
 }
-var AnimatedHamburger = ({ isOpen }) => {
-  return /* @__PURE__ */ jsx("div", { className: "group relative size-full", children: /* @__PURE__ */ jsxs("div", { className: "absolute flex size-full items-center justify-center", children: [
-    /* @__PURE__ */ jsx(
-      DynamicIcon,
-      {
-        name: "lucide/menu",
-        size: 24,
-        className: `absolute text-muted-foreground transition-all duration-300 group-hover:text-foreground ${isOpen ? "rotate-90 opacity-0" : "rotate-0 opacity-100"}`
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      DynamicIcon,
-      {
-        name: "lucide/x",
-        size: 24,
-        className: `absolute text-muted-foreground transition-all duration-300 group-hover:text-foreground ${isOpen ? "rotate-0 opacity-100" : "-rotate-90 opacity-0"}`
-      }
-    )
-  ] }) });
-};
-var MobileNav = ({
-  navItems,
-  activeItem,
-  setActiveItem,
-  actions,
-  actionsSlot
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const renderActions = useMemo(() => {
-    if (actionsSlot) return actionsSlot;
-    if (!actions || actions.length === 0) return null;
-    return actions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
-  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center lg:hidden", children: /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { variant: "ghost", size: "icon", asButton: true, onClick: () => {
-    }, children: /* @__PURE__ */ jsx(AnimatedHamburger, { isOpen }) }) }),
-    /* @__PURE__ */ jsx(
-      PopoverContent,
-      {
-        align: "end",
-        className: "relative top-4 -right-4 block w-[calc(100vw-32px)] overflow-hidden rounded-xl p-0 sm:top-auto sm:right-auto sm:w-80 lg:hidden",
-        children: /* @__PURE__ */ jsxs("ul", { className: "w-full bg-background py-4 text-foreground", children: [
-          navItems.map((navItem, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
-            Pressable,
-            {
-              href: navItem.link,
-              onClick: () => setActiveItem(navItem.name),
-              className: `flex items-center border-l-[3px] px-6 py-4 text-sm font-medium text-foreground transition-all duration-75 ${activeItem === navItem.name ? "border-foreground text-foreground" : "border-transparent text-muted-foreground hover:text-foreground"}`,
-              children: navItem.name
-            }
-          ) }, idx)),
-          (actionsSlot || actions && actions.length > 0) && /* @__PURE__ */ jsx("li", { className: "flex flex-col gap-3 px-7 py-2", children: renderActions })
-        ] })
-      }
-    )
-  ] }) });
-};
+var MOBILE_BREAKPOINT = 1024;
 var NavbarSimpleLinks = ({
   className,
   containerClassName,
@@ -1219,6 +1165,7 @@ var NavbarSimpleLinks = ({
   navigationMenuClassName,
   menuListClassName,
   actionsClassName,
+  mobileMenuClassName,
   logo,
   logoSlot,
   logoClassName,
@@ -1227,6 +1174,8 @@ var NavbarSimpleLinks = ({
   defaultActiveItem,
   actions,
   actionsSlot,
+  mobileActions,
+  mobileActionsSlot,
   layoutVariant = "fullScreenContainerizedLinks",
   background,
   spacing,
@@ -1237,8 +1186,20 @@ var NavbarSimpleLinks = ({
   const [activeItem, setActiveItem] = useState(
     defaultActiveItem || navItems?.[0]?.name || ""
   );
+  const [isOpen, setIsOpen] = useState(false);
   const indicatorRef = useRef(null);
   const menuRef = useRef(null);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const handleResize = () => {
+      if (window.innerWidth > MOBILE_BREAKPOINT) {
+        setIsOpen(false);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
   useEffect(() => {
     const updateIndicator = () => {
       const activeEl = document.querySelector(
@@ -1255,6 +1216,9 @@ var NavbarSimpleLinks = ({
     window.addEventListener("resize", updateIndicator);
     return () => window.removeEventListener("resize", updateIndicator);
   }, [activeItem]);
+  const handleMobileMenuClose = () => {
+    setIsOpen(false);
+  };
   const renderNavItems = useMemo(() => {
     if (navItemsSlot) return navItemsSlot;
     if (!navItems || navItems.length === 0) return null;
@@ -1308,80 +1272,161 @@ var NavbarSimpleLinks = ({
     sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
+  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(
+          "nav",
+          {
+            className: cn("flex items-center justify-between", navClassName),
+            children: [
+              /* @__PURE__ */ jsx(
+                NavbarLogo,
+                {
+                  logo,
+                  logoSlot,
+                  logoClassName,
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                NavigationMenu,
+                {
+                  className: cn("hidden lg:block", navigationMenuClassName),
+                  children: /* @__PURE__ */ jsxs(
+                    NavigationMenuList,
+                    {
+                      ref: menuRef,
+                      className: cn(
+                        "flex items-center gap-6 rounded-4xl px-8 py-3",
+                        menuListClassName
+                      ),
+                      children: [
+                        renderNavItems,
+                        /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            ref: indicatorRef,
+                            className: "absolute bottom-2 flex h-1 items-center justify-center px-2 transition-all duration-300",
+                            children: /* @__PURE__ */ jsx("div", { className: "h-0.5 w-full rounded-t-none bg-foreground transition-all duration-300" })
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
+                Pressable,
+                {
+                  className: "size-11",
+                  variant: "ghost",
+                  size: "icon",
+                  asButton: true,
+                  onClick: () => setIsOpen(!isOpen),
+                  children: /* @__PURE__ */ jsx(
+                    DynamicIcon,
+                    {
+                      name: "lucide/menu",
+                      size: 22,
+                      className: "stroke-foreground"
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "hidden items-center gap-2 lg:flex",
+                    actionsClassName
+                  ),
+                  children: renderActions
+                }
+              )
+            ]
+          }
+        ) }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MobileNavigationMenu,
+      {
+        open: isOpen,
+        onClose: handleMobileMenuClose,
+        navItems: navItems ?? [],
+        mobileActions,
+        mobileActionsSlot,
+        mobileMenuClassName
+      }
+    )
+  ] });
+};
+var MobileNavigationMenu = ({
+  open,
+  onClose,
+  navItems,
+  mobileActions,
+  mobileActionsSlot,
+  mobileMenuClassName
+}) => {
+  const renderMobileActions = useMemo(() => {
+    if (mobileActionsSlot) return mobileActionsSlot;
+    if (!mobileActions || mobileActions.length === 0) return null;
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 px-4", children: mobileActions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: cn("w-full", actionClassName),
+          onClick: onClose,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    }) });
+  }, [mobileActionsSlot, mobileActions, onClose]);
   return /* @__PURE__ */ jsx(
-    Section,
+    NavbarMobileMenu,
     {
-      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(
-        "nav",
-        {
-          className: cn("flex items-center justify-between", navClassName),
-          children: [
-            /* @__PURE__ */ jsx(
-              NavbarLogo,
-              {
-                logo,
-                logoSlot,
-                logoClassName,
-                optixFlowConfig
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              NavigationMenu,
-              {
-                className: cn("hidden lg:block", navigationMenuClassName),
-                children: /* @__PURE__ */ jsxs(
-                  NavigationMenuList,
-                  {
-                    ref: menuRef,
-                    className: cn(
-                      "flex items-center gap-6 rounded-4xl px-8 py-3",
-                      menuListClassName
-                    ),
-                    children: [
-                      renderNavItems,
-                      /* @__PURE__ */ jsx(
-                        "div",
-                        {
-                          ref: indicatorRef,
-                          className: "absolute bottom-2 flex h-1 items-center justify-center px-2 transition-all duration-300",
-                          children: /* @__PURE__ */ jsx("div", { className: "h-0.5 w-full rounded-t-none bg-foreground transition-all duration-300" })
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              MobileNav,
-              {
-                navItems: navItems ?? [],
-                activeItem,
-                setActiveItem,
-                actions,
-                actionsSlot
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn(
-                  "hidden items-center gap-2 lg:flex",
-                  actionsClassName
-                ),
-                children: renderActions
-              }
-            )
-          ]
-        }
-      ) }) }) })
+      open,
+      onClose,
+      title: "Navigation",
+      className: mobileMenuClassName,
+      children: /* @__PURE__ */ jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
+        /* @__PURE__ */ jsx("nav", { className: "flex flex-col", children: navItems.map((item, index) => /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            href: item.link,
+            className: "flex h-15 items-center rounded-md 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: onClose,
+            children: item.name
+          },
+          `nav-link-${index}`
+        )) }),
+        renderMobileActions
+      ] }) })
     }
   );
 };

package/dist/navbar-split-cta.cjs

@@ -1160,7 +1160,7 @@ 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-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__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",
           {
             onClick: onClose,
@@ -1382,8 +1382,8 @@ var NavbarSplitCta = ({
                 open: isOpen,
                 onClose: () => setIsOpen(false),
                 title: "Navigation Menu",
-                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("div", { className: "border-t pt-4", children: menuSlot ? menuSlot : renderMenu?.map(
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-0", children: menuSlot ? menuSlot : renderMenu?.map(
                     (item, index) => item.items ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-sm font-medium text-muted-foreground", children: item.title }),
                       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 pl-2", children: item.items.map((subItem, subIndex) => /* @__PURE__ */ jsxRuntime.jsxs(

package/dist/navbar-split-cta.js

@@ -1138,7 +1138,7 @@ 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-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
+        /* @__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",
           {
             onClick: onClose,
@@ -1360,8 +1360,8 @@ var NavbarSplitCta = ({
                 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-6", children: [
-                  /* @__PURE__ */ jsx("div", { className: "border-t pt-4", children: menuSlot ? menuSlot : renderMenu?.map(
+                children: /* @__PURE__ */ jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+                  /* @__PURE__ */ jsx("div", { className: "pt-0", children: menuSlot ? menuSlot : renderMenu?.map(
                     (item, index) => item.items ? /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
                       /* @__PURE__ */ jsx("div", { className: "mb-2 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(

package/dist/navbar-sticky-compact.cjs

@@ -1160,7 +1160,7 @@ 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-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__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",
           {
             onClick: onClose,

package/dist/navbar-sticky-compact.js

@@ -1138,7 +1138,7 @@ 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-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
+        /* @__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",
           {
             onClick: onClose,

package/dist/navbar-tabbed-sections.cjs

@@ -1162,7 +1162,7 @@ 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-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__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",
           {
             onClick: onClose,

package/dist/navbar-tabbed-sections.js

@@ -1139,7 +1139,7 @@ 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-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
+        /* @__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",
           {
             onClick: onClose,