@opensite/ui 1.0.7 → 1.0.9

package/dist/navbar-transparent-overlay.js

@@ -970,6 +970,111 @@ 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
+          }
+        )
+      ]
+    }
+  );
+};
+var platformIconMap = {
+  instagram: "cib/instagram",
+  linkedin: "cib/linkedin",
+  google: "cib/google",
+  facebook: "cib/facebook",
+  tiktok: "cib/tiktok",
+  youtube: "cib/youtube",
+  yelp: "cib/yelp",
+  spotify: "cib/spotify",
+  apple: "cib/apple",
+  x: "line-md/twitter-x"
+};
+var SocialLinkIcon = React.forwardRef(
+  ({
+    platformName,
+    label,
+    iconSize = 20,
+    iconColor,
+    iconClassName,
+    className,
+    ...pressableProps
+  }, ref) => {
+    const iconName = platformIconMap[platformName];
+    const accessibleLabel = label || platformName;
+    return /* @__PURE__ */ jsx(
+      Pressable,
+      {
+        ref,
+        "aria-label": accessibleLabel,
+        className: cn(
+          "inline-flex items-center justify-center transition-colors",
+          className
+        ),
+        ...pressableProps,
+        children: /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: iconName,
+            size: iconSize,
+            color: iconColor,
+            className: iconClassName,
+            alt: accessibleLabel
+          }
+        )
+      }
+    );
+  }
+);
+SocialLinkIcon.displayName = "SocialLinkIcon";
 function NavigationMenu({
   className,
   children,
@@ -1107,6 +1212,8 @@ var NavbarTransparentOverlay = ({
   navClassName,
   navigationMenuClassName,
   actionsClassName,
+  mobileMenuClassName,
+  socialLinksClassName,
   logo,
   logoSlot,
   logoClassName,
@@ -1116,6 +1223,8 @@ var NavbarTransparentOverlay = ({
   authActionsSlot,
   mobileAuthActions,
   mobileAuthActionsSlot,
+  socialLinks,
+  socialLinksSlot,
   layoutVariant = "fullScreenContainerizedLinks",
   background,
   spacing,
@@ -1134,14 +1243,7 @@ var NavbarTransparentOverlay = ({
     window.addEventListener("scroll", handleScroll);
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
-  useEffect(() => {
-    if (typeof document === "undefined") return;
-    document.body.style.overflow = isOpen ? "hidden" : "auto";
-    return () => {
-      document.body.style.overflow = "auto";
-    };
-  }, [isOpen]);
-  const toggleMenu = () => setIsOpen(!isOpen);
+  const handleMobileMenuClose = () => setIsOpen(false);
   const renderNavigation = useMemo(() => {
     if (navigationSlot) return navigationSlot;
     if (!navItems || navItems.length === 0) return null;
@@ -1196,35 +1298,6 @@ var NavbarTransparentOverlay = ({
       );
     });
   }, [authActionsSlot, authActions, isScrolled]);
-  const renderMobileAuthActions = useMemo(() => {
-    if (mobileAuthActionsSlot) return mobileAuthActionsSlot;
-    if (!mobileAuthActions || mobileAuthActions.length === 0) return null;
-    return mobileAuthActions.map((action, index) => {
-      const {
-        label,
-        icon,
-        iconAfter,
-        children,
-        className: actionClassName,
-        ...pressableProps
-      } = action;
-      return /* @__PURE__ */ jsx(
-        Pressable,
-        {
-          asButton: true,
-          className: cn("min-w-[200px]", actionClassName),
-          onClick: () => setIsOpen(false),
-          ...pressableProps,
-          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            icon,
-            label,
-            iconAfter
-          ] })
-        },
-        index
-      );
-    });
-  }, [mobileAuthActionsSlot, mobileAuthActions]);
   const {
     sectionClasses,
     containerWrapperClasses,
@@ -1234,18 +1307,18 @@ var NavbarTransparentOverlay = ({
     sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
-  return /* @__PURE__ */ jsxs(
-    Section,
-    {
-      background,
-      spacing: spacingOverride ?? spacing,
-      className: sectionClasses,
-      pattern,
-      patternOpacity,
-      containerClassName: sectionContainerClassName,
-      containerMaxWidth: sectionContainerMaxWidth,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx(
+  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(
           "nav",
           {
             className: cn(
@@ -1285,92 +1358,140 @@ var NavbarTransparentOverlay = ({
                   children: renderAuthActions
                 }
               ),
-              /* @__PURE__ */ jsxs(
-                "button",
+              /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
+                Pressable,
                 {
-                  onClick: toggleMenu,
+                  variant: "ghost",
+                  size: "icon",
+                  asButton: true,
+                  "aria-label": "Open menu",
+                  onClick: () => setIsOpen(true),
                   className: cn(
-                    "z-50 flex h-10 w-10 flex-col items-center justify-center gap-1.5 lg:hidden"
+                    "size-11",
+                    !isScrolled && "hover:bg-white/10"
                   ),
-                  "aria-label": "Toggle menu",
-                  children: [
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: cn(
-                          "h-0.5 w-6 transition-all duration-300",
-                          isOpen ? "translate-y-2 rotate-45 bg-foreground" : isScrolled ? "bg-foreground" : "bg-white"
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: cn(
-                          "h-0.5 w-6 transition-all duration-300",
-                          isOpen ? "opacity-0" : isScrolled ? "bg-foreground" : "bg-white"
-                        )
-                      }
-                    ),
-                    /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: cn(
-                          "h-0.5 w-6 transition-all duration-300",
-                          isOpen ? "-translate-y-2 -rotate-45 bg-foreground" : isScrolled ? "bg-foreground" : "bg-white"
-                        )
-                      }
-                    )
-                  ]
+                  children: /* @__PURE__ */ jsx(
+                    DynamicIcon,
+                    {
+                      name: "lucide/menu",
+                      size: 16,
+                      className: cn(
+                        isScrolled ? "stroke-foreground" : "stroke-white"
+                      )
+                    }
+                  )
                 }
-              )
+              ) })
             ] }) })
           }
-        ) }),
-        /* @__PURE__ */ jsx(
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      MobileNavigationMenu,
+      {
+        open: isOpen,
+        onClose: handleMobileMenuClose,
+        navItems,
+        mobileAuthActions,
+        mobileAuthActionsSlot,
+        socialLinks,
+        socialLinksSlot,
+        mobileMenuClassName,
+        socialLinksClassName
+      }
+    )
+  ] });
+};
+var MobileNavigationMenu = ({
+  open,
+  onClose,
+  navItems,
+  mobileAuthActions,
+  mobileAuthActionsSlot,
+  socialLinks,
+  socialLinksSlot,
+  mobileMenuClassName,
+  socialLinksClassName
+}) => {
+  const renderMobileAuthActions = useMemo(() => {
+    if (mobileAuthActionsSlot) return mobileAuthActionsSlot;
+    if (!mobileAuthActions || mobileAuthActions.length === 0) return null;
+    return mobileAuthActions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          asButton: true,
+          className: cn("min-w-[200px]", actionClassName),
+          onClick: onClose,
+          ...pressableProps,
+          children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+            icon,
+            label,
+            iconAfter
+          ] })
+        },
+        index
+      );
+    });
+  }, [mobileAuthActionsSlot, mobileAuthActions, onClose]);
+  const renderSocialLinks = useMemo(() => {
+    if (socialLinksSlot) return socialLinksSlot;
+    if (!socialLinks || socialLinks.length === 0) return null;
+    return socialLinks.map((link) => /* @__PURE__ */ jsx(
+      SocialLinkIcon,
+      {
+        platformName: link.platformName,
+        href: link.href,
+        label: link.label,
+        iconSize: 24,
+        className: "text-white/70 transition-all duration-300 hover:text-white hover:scale-110"
+      },
+      link.platformName
+    ));
+  }, [socialLinksSlot, socialLinks]);
+  return /* @__PURE__ */ jsx(
+    NavbarMobileMenu,
+    {
+      open,
+      onClose,
+      title: "Mobile Navigation",
+      className: cn("bg-black/95", mobileMenuClassName),
+      contentClassName: "flex flex-col items-center justify-center",
+      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,
+          {
+            href: item.url,
+            className: "text-3xl font-medium text-white transition-all duration-300 hover:text-white/80",
+            onClick: onClose,
+            children: [
+              item.icon ?? (item.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 24 })),
+              item.title
+            ]
+          },
+          index
+        )) }),
+        renderMobileAuthActions && /* @__PURE__ */ jsx("div", { className: "mt-12 flex flex-col items-center gap-4", children: renderMobileAuthActions }),
+        renderSocialLinks && /* @__PURE__ */ jsx(
           "div",
           {
             className: cn(
-              "fixed inset-0 z-40 bg-background transition-all duration-500 lg:hidden",
-              isOpen ? "opacity-100 pointer-events-auto" : "opacity-0 pointer-events-none"
+              "mt-12 flex flex-row flex-wrap items-center justify-center gap-6",
+              socialLinksClassName
             ),
-            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,
-                {
-                  href: item.url,
-                  className: cn(
-                    "text-3xl font-medium text-foreground transition-all duration-300",
-                    isOpen ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"
-                  ),
-                  style: {
-                    transitionDelay: isOpen ? `${index * 100}ms` : "0ms"
-                  },
-                  onClick: () => setIsOpen(false),
-                  children: [
-                    item.icon ?? (item.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 24 })),
-                    item.title
-                  ]
-                },
-                index
-              )) }),
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: cn(
-                    "mt-12 flex flex-col items-center gap-4 transition-all duration-300",
-                    isOpen ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0"
-                  ),
-                  style: {
-                    transitionDelay: isOpen ? `${(navItems?.length ?? 0) * 100}ms` : "0ms"
-                  },
-                  children: renderMobileAuthActions
-                }
-              )
-            ] })
+            children: renderSocialLinks
           }
         )
-      ]
+      ] })
     }
   );
 };