@opensite/ui 1.0.7 → 1.0.9

package/dist/navbar-simple-links.cjs

@@ -7,7 +7,6 @@ var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var NavigationMenuPrimitive = require('@radix-ui/react-navigation-menu');
-var PopoverPrimitive = require('@radix-ui/react-popover');
 var img = require('@page-speed/img');
 
 function _interopNamespace(e) {
@@ -30,7 +29,6 @@ function _interopNamespace(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var NavigationMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(NavigationMenuPrimitive);
-var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 
 // components/blocks/navbars/navbar-simple-links.tsx
 function cn(...inputs) {
@@ -1029,36 +1027,6 @@ function NavigationMenuLink({
     }
   );
 }
-function Popover({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    PopoverPrimitive__namespace.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,
@@ -1119,6 +1087,62 @@ var NavbarLogo = ({
     }
   );
 };
+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-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,
+            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/layout-variant-utils.ts
 function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
@@ -1155,86 +1179,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     spacingOverride: isFloatingBar ? "none" : "py-0 md:py-0"
   };
 }
-var AnimatedHamburger = ({ isOpen }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "group relative size-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute flex size-full items-center justify-center", children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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] = React.useState(false);
-  const renderActions = React.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__ */ jsxRuntime.jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: actionClassName,
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [actionsSlot, actions]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex h-full items-center lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { variant: "ghost", size: "icon", asButton: true, onClick: () => {
-    }, children: /* @__PURE__ */ jsxRuntime.jsx(AnimatedHamburger, { isOpen }) }) }),
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("ul", { className: "w-full bg-background py-4 text-foreground", children: [
-          navItems.map((navItem, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("li", { className: "flex flex-col gap-3 px-7 py-2", children: renderActions })
-        ] })
-      }
-    )
-  ] }) });
-};
+var MOBILE_BREAKPOINT = 1024;
 var NavbarSimpleLinks = ({
   className,
   containerClassName,
@@ -1242,6 +1187,7 @@ var NavbarSimpleLinks = ({
   navigationMenuClassName,
   menuListClassName,
   actionsClassName,
+  mobileMenuClassName,
   logo,
   logoSlot,
   logoClassName,
@@ -1250,6 +1196,8 @@ var NavbarSimpleLinks = ({
   defaultActiveItem,
   actions,
   actionsSlot,
+  mobileActions,
+  mobileActionsSlot,
   layoutVariant = "fullScreenContainerizedLinks",
   background,
   spacing,
@@ -1260,8 +1208,20 @@ var NavbarSimpleLinks = ({
   const [activeItem, setActiveItem] = React.useState(
     defaultActiveItem || navItems?.[0]?.name || ""
   );
+  const [isOpen, setIsOpen] = React.useState(false);
   const indicatorRef = React.useRef(null);
   const menuRef = React.useRef(null);
+  React.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);
+  }, []);
   React.useEffect(() => {
     const updateIndicator = () => {
       const activeEl = document.querySelector(
@@ -1278,6 +1238,9 @@ var NavbarSimpleLinks = ({
     window.addEventListener("resize", updateIndicator);
     return () => window.removeEventListener("resize", updateIndicator);
   }, [activeItem]);
+  const handleMobileMenuClose = () => {
+    setIsOpen(false);
+  };
   const renderNavItems = React.useMemo(() => {
     if (navItemsSlot) return navItemsSlot;
     if (!navItems || navItems.length === 0) return null;
@@ -1331,80 +1294,161 @@ var NavbarSimpleLinks = ({
     sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
+  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(
+          "nav",
+          {
+            className: cn("flex items-center justify-between", navClassName),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                NavbarLogo,
+                {
+                  logo,
+                  logoSlot,
+                  logoClassName,
+                  optixFlowConfig
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                NavigationMenu,
+                {
+                  className: cn("hidden lg:block", navigationMenuClassName),
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    NavigationMenuList,
+                    {
+                      ref: menuRef,
+                      className: cn(
+                        "flex items-center gap-6 rounded-4xl px-8 py-3",
+                        menuListClassName
+                      ),
+                      children: [
+                        renderNavItems,
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "div",
+                          {
+                            ref: indicatorRef,
+                            className: "absolute bottom-2 flex h-1 items-center justify-center px-2 transition-all duration-300",
+                            children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-0.5 w-full rounded-t-none bg-foreground transition-all duration-300" })
+                          }
+                        )
+                      ]
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Pressable,
+                {
+                  className: "size-11",
+                  variant: "ghost",
+                  size: "icon",
+                  asButton: true,
+                  onClick: () => setIsOpen(!isOpen),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    DynamicIcon,
+                    {
+                      name: "lucide/menu",
+                      size: 22,
+                      className: "stroke-foreground"
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "hidden items-center gap-2 lg:flex",
+                    actionsClassName
+                  ),
+                  children: renderActions
+                }
+              )
+            ]
+          }
+        ) }) }) })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      MobileNavigationMenu,
+      {
+        open: isOpen,
+        onClose: handleMobileMenuClose,
+        navItems: navItems ?? [],
+        mobileActions,
+        mobileActionsSlot,
+        mobileMenuClassName
+      }
+    )
+  ] });
+};
+var MobileNavigationMenu = ({
+  open,
+  onClose,
+  navItems,
+  mobileActions,
+  mobileActionsSlot,
+  mobileMenuClassName
+}) => {
+  const renderMobileActions = React.useMemo(() => {
+    if (mobileActionsSlot) return mobileActionsSlot;
+    if (!mobileActions || mobileActions.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: cn("w-full", actionClassName),
+          onClick: onClose,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    }) });
+  }, [mobileActionsSlot, mobileActions, onClose]);
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Section,
+    NavbarMobileMenu,
     {
-      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(
-        "nav",
-        {
-          className: cn("flex items-center justify-between", navClassName),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              NavbarLogo,
-              {
-                logo,
-                logoSlot,
-                logoClassName,
-                optixFlowConfig
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              NavigationMenu,
-              {
-                className: cn("hidden lg:block", navigationMenuClassName),
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
-                  NavigationMenuList,
-                  {
-                    ref: menuRef,
-                    className: cn(
-                      "flex items-center gap-6 rounded-4xl px-8 py-3",
-                      menuListClassName
-                    ),
-                    children: [
-                      renderNavItems,
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "div",
-                        {
-                          ref: indicatorRef,
-                          className: "absolute bottom-2 flex h-1 items-center justify-center px-2 transition-all duration-300",
-                          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-0.5 w-full rounded-t-none bg-foreground transition-all duration-300" })
-                        }
-                      )
-                    ]
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              MobileNav,
-              {
-                navItems: navItems ?? [],
-                activeItem,
-                setActiveItem,
-                actions,
-                actionsSlot
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn(
-                  "hidden items-center gap-2 lg:flex",
-                  actionsClassName
-                ),
-                children: renderActions
-              }
-            )
-          ]
-        }
-      ) }) }) })
+      open,
+      onClose,
+      title: "Navigation",
+      className: mobileMenuClassName,
+      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("nav", { className: "flex flex-col", children: navItems.map((item, index) => /* @__PURE__ */ jsxRuntime.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-simple-links.d.cts

@@ -42,6 +42,10 @@ interface NavbarSimpleLinksProps {
      * Additional CSS classes for the actions container
      */
     actionsClassName?: string;
+    /**
+     * Additional CSS classes for the mobile menu
+     */
+    mobileMenuClassName?: string;
     /**
      * Logo configuration
      */
@@ -74,6 +78,14 @@ interface NavbarSimpleLinksProps {
      * Custom slot for actions (overrides actions array)
      */
     actionsSlot?: React.ReactNode;
+    /**
+     * Mobile-specific action configurations
+     */
+    mobileActions?: ActionConfig[];
+    /**
+     * Custom slot for mobile actions (overrides mobileActions array)
+     */
+    mobileActionsSlot?: React.ReactNode;
     /**
      * Background style for the section
      */
@@ -104,10 +116,10 @@ interface NavbarSimpleLinksProps {
  *
  * Features a clean, simple design with horizontal navigation links and an animated
  * underline indicator that slides to show the active item. Desktop view shows all
- * links inline with a smooth sliding indicator. Mobile view uses a popover menu
- * with a left border indicator for the active item. Perfect for simple marketing
+ * links inline with a smooth sliding indicator. Mobile view uses the shared
+ * NavbarMobileMenu component with a fullscreen overlay. Perfect for simple marketing
  * sites and portfolios.
  */
-declare const NavbarSimpleLinks: ({ className, containerClassName, navClassName, navigationMenuClassName, menuListClassName, actionsClassName, logo, logoSlot, logoClassName, navItems, navItemsSlot, defaultActiveItem, actions, actionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarSimpleLinksProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarSimpleLinks: ({ className, containerClassName, navClassName, navigationMenuClassName, menuListClassName, actionsClassName, mobileMenuClassName, logo, logoSlot, logoClassName, navItems, navItemsSlot, defaultActiveItem, actions, actionsSlot, mobileActions, mobileActionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarSimpleLinksProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarSimpleLinks, type NavbarSimpleLinksProps };

package/dist/navbar-simple-links.d.ts

@@ -42,6 +42,10 @@ interface NavbarSimpleLinksProps {
      * Additional CSS classes for the actions container
      */
     actionsClassName?: string;
+    /**
+     * Additional CSS classes for the mobile menu
+     */
+    mobileMenuClassName?: string;
     /**
      * Logo configuration
      */
@@ -74,6 +78,14 @@ interface NavbarSimpleLinksProps {
      * Custom slot for actions (overrides actions array)
      */
     actionsSlot?: React.ReactNode;
+    /**
+     * Mobile-specific action configurations
+     */
+    mobileActions?: ActionConfig[];
+    /**
+     * Custom slot for mobile actions (overrides mobileActions array)
+     */
+    mobileActionsSlot?: React.ReactNode;
     /**
      * Background style for the section
      */
@@ -104,10 +116,10 @@ interface NavbarSimpleLinksProps {
  *
  * Features a clean, simple design with horizontal navigation links and an animated
  * underline indicator that slides to show the active item. Desktop view shows all
- * links inline with a smooth sliding indicator. Mobile view uses a popover menu
- * with a left border indicator for the active item. Perfect for simple marketing
+ * links inline with a smooth sliding indicator. Mobile view uses the shared
+ * NavbarMobileMenu component with a fullscreen overlay. Perfect for simple marketing
  * sites and portfolios.
  */
-declare const NavbarSimpleLinks: ({ className, containerClassName, navClassName, navigationMenuClassName, menuListClassName, actionsClassName, logo, logoSlot, logoClassName, navItems, navItemsSlot, defaultActiveItem, actions, actionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarSimpleLinksProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarSimpleLinks: ({ className, containerClassName, navClassName, navigationMenuClassName, menuListClassName, actionsClassName, mobileMenuClassName, logo, logoSlot, logoClassName, navItems, navItemsSlot, defaultActiveItem, actions, actionsSlot, mobileActions, mobileActionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarSimpleLinksProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarSimpleLinks, type NavbarSimpleLinksProps };