@next-library/theme 1.0.7 → 1.0.8

package/dist/client.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React6 from 'react';
-import React6__default, { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import React6__default, { useState, useRef, useEffect, useCallback, useMemo, useSyncExternalStore } from 'react';
 import { useScroll, useMotionValueEvent, motion } from 'motion/react';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
@@ -2293,7 +2293,7 @@ function StickyBanner({
   locale = "en",
   closeLabel
 }) {
-  const [open, setOpen] = useState(true);
+  const [open2, setOpen] = useState(true);
   const { scrollY } = useScroll();
   const translations2 = getTranslations(locale);
   const ariaLabel = closeLabel || translations2.closeBanner;
@@ -2316,8 +2316,8 @@ function StickyBanner({
         opacity: 0
       },
       animate: {
-        y: open ? 0 : -100,
-        opacity: open ? 1 : 0
+        y: open2 ? 0 : -100,
+        opacity: open2 ? 1 : 0
       },
       transition: {
         duration: 0.3,
@@ -2335,7 +2335,7 @@ function StickyBanner({
               scale: 1
             },
             className: "absolute top-1/2 right-2 -translate-y-1/2 cursor-pointer",
-            onClick: () => setOpen(!open),
+            onClick: () => setOpen(!open2),
             "aria-label": ariaLabel,
             children: /* @__PURE__ */ jsx(CloseIcon, { className: "h-5 w-5 text-white", "aria-hidden": "true" })
           }
@@ -2487,7 +2487,7 @@ function SearchBar({ language = "en", className }) {
   const router = useRouter();
   const translations2 = getTranslations(language);
   const [mounted, setMounted] = useState(false);
-  const [open, setOpen] = useState(false);
+  const [open2, setOpen] = useState(false);
   const [query, setQuery] = useState("");
   const [results, setResults] = useState([]);
   const [recent, setRecent] = useState([]);
@@ -2534,7 +2534,7 @@ function SearchBar({ language = "en", className }) {
     return () => window.removeEventListener("keydown", onKey);
   }, [isMac]);
   useEffect(() => {
-    if (!open) return;
+    if (!open2) return;
     setRecent(readRecent());
     const t = setTimeout(() => inputRef.current?.focus(), 20);
     const prev = document.body.style.overflow;
@@ -2543,9 +2543,9 @@ function SearchBar({ language = "en", className }) {
       clearTimeout(t);
       document.body.style.overflow = prev;
     };
-  }, [open]);
+  }, [open2]);
   useEffect(() => {
-    if (!open) return;
+    if (!open2) return;
     if (!query.trim()) {
       setResults([]);
       setIsLoading(false);
@@ -2566,10 +2566,10 @@ function SearchBar({ language = "en", className }) {
       }
     }, 180);
     return () => clearTimeout(id2);
-  }, [query, language, open]);
+  }, [query, language, open2]);
   const flat = useMemo(() => query.trim() ? results : [], [query, results]);
   useEffect(() => {
-    if (!open) return;
+    if (!open2) return;
     const onKey = (e) => {
       if (e.key === "Escape") {
         e.preventDefault();
@@ -2588,7 +2588,7 @@ function SearchBar({ language = "en", className }) {
     };
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
-  }, [open, flat, selected, close, go]);
+  }, [open2, flat, selected, close, go]);
   useEffect(() => {
     const node = listRef.current?.querySelector('[data-selected="true"]');
     node?.scrollIntoView({ block: "nearest" });
@@ -2615,7 +2615,7 @@ function SearchBar({ language = "en", className }) {
       ]
     }
   );
-  const modal = open && mounted ? createPortal(
+  const modal = open2 && mounted ? createPortal(
     /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-[100] flex items-start justify-center p-4 pt-[12vh]", role: "dialog", "aria-modal": "true", children: [
       /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-background/70 backdrop-blur-sm", onClick: close, "aria-hidden": "true" }),
       /* @__PURE__ */ jsx("div", { className: "cl-beam relative w-full max-w-xl shadow-[0_30px_90px_-24px_rgb(0_0_0/0.55)]", children: /* @__PURE__ */ jsxs("div", { className: "overflow-hidden rounded-[calc(var(--radius)+2px)] bg-popover", children: [
@@ -3466,10 +3466,10 @@ function SidebarProvider({
   const isMobile = useIsMobile();
   const [openMobile, setOpenMobile] = React6.useState(false);
   const [_open, _setOpen] = React6.useState(defaultOpen);
-  const open = openProp ?? _open;
+  const open2 = openProp ?? _open;
   const setOpen = React6.useCallback(
     (value) => {
-      const openState = typeof value === "function" ? value(open) : value;
+      const openState = typeof value === "function" ? value(open2) : value;
       if (setOpenProp) {
         setOpenProp(openState);
       } else {
@@ -3477,10 +3477,10 @@ function SidebarProvider({
       }
       document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
-    [setOpenProp, open]
+    [setOpenProp, open2]
   );
   const toggleSidebar = React6.useCallback(() => {
-    return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
+    return isMobile ? setOpenMobile((open3) => !open3) : setOpen((open3) => !open3);
   }, [isMobile, setOpen, setOpenMobile]);
   React6.useEffect(() => {
     const handleKeyDown = (event) => {
@@ -3492,18 +3492,18 @@ function SidebarProvider({
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [toggleSidebar]);
-  const state = open ? "expanded" : "collapsed";
+  const state = open2 ? "expanded" : "collapsed";
   const contextValue = React6.useMemo(
     () => ({
       state,
-      open,
+      open: open2,
       setOpen,
       isMobile,
       openMobile,
       setOpenMobile,
       toggleSidebar
     }),
-    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+    [state, open2, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
   );
   return /* @__PURE__ */ jsx(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx(
     "div",
@@ -4043,6 +4043,7 @@ function SidebarNavigation({
   nodes,
   currentPath,
   language: _language = "en",
+  onNavigateLeaf,
   translations: translations2 = {}
 }) {
   const { toggleFolder = "Toggle folder" } = translations2;
@@ -4050,65 +4051,76 @@ function SidebarNavigation({
     if (!node.websitePath) return null;
     const isActive = isActiveNode(node, currentPath);
     const hasActiveChildNode = hasActiveChild(node, currentPath);
-    return node.children && Object.keys(node.children).length > 0 ? /* @__PURE__ */ jsx(Collapsible, { className: "group/collapsible", children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-nowrap items-center gap-2", children: [
-        /* @__PURE__ */ jsxs(
-          Link3,
-          {
-            href: node.websitePath,
-            className: `group/row relative flex flex-nowrap items-center gap-2 flex-auto py-1.5 pl-3 pr-2 rounded-md text-sm transition-colors hover:bg-accent ${isActive ? "bg-accent font-medium text-foreground before:absolute before:inset-y-1 before:left-0 before:w-0.5 before:rounded-full before:bg-foreground" : hasActiveChildNode ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex-none", children: [
-                /* @__PURE__ */ jsx(FolderOpenIcon, { className: "h-4 w-4 group-data-[state=closed]/collapsible:hidden" }),
-                /* @__PURE__ */ jsx(FolderClosedIcon, { className: "h-4 w-4 group-data-[state=open]/collapsible:hidden" })
-              ] }),
-              /* @__PURE__ */ jsx("span", { className: `flex-auto ${isActive ? "font-medium" : ""}`, children: node.title })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          CollapsibleTrigger2,
-          {
-            className: "p-1.5 rounded-md text-muted-foreground/70 transition-colors hover:bg-accent hover:text-foreground self-center",
-            "aria-label": `${toggleFolder}: ${node.title}`,
-            children: [
-              /* @__PURE__ */ jsx(
-                ChevronRight,
-                {
-                  className: "h-4 w-4 group-data-[state=open]/collapsible:hidden",
-                  "aria-hidden": "true"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ChevronDown,
-                {
-                  className: "h-4 w-4 group-data-[state=closed]/collapsible:hidden",
-                  "aria-hidden": "true"
-                }
-              )
-            ]
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: Object.entries(node.children || {}).map(([, child]) => {
-        if (!child.websitePath) return null;
-        const isChildActive = isActiveNode(child, currentPath);
-        return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
-          Link3,
-          {
-            href: child.websitePath,
-            className: `group/row relative flex items-center gap-2 py-1.5 pl-3 pr-2 rounded-md text-sm transition-colors hover:bg-accent ${isChildActive ? "bg-accent font-medium text-foreground before:absolute before:inset-y-1 before:left-0 before:w-0.5 before:rounded-full before:bg-foreground" : "text-muted-foreground hover:text-foreground"}`,
-            children: [
-              child.children && Object.keys(child.children).length > 0 ? /* @__PURE__ */ jsx(FolderClosedIcon, { className: "h-4 w-4 flex-none" }) : /* @__PURE__ */ jsx(FileTextIcon, { className: "h-4 w-4 flex-none" }),
-              /* @__PURE__ */ jsx("span", { className: "", children: child.title })
-            ]
-          }
-        ) }, child.websitePath);
-      }) }) })
-    ] }, node.websitePath) }, `menu-${node.websitePath}`) }, node.websitePath) : /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
+    return node.children && Object.keys(node.children).length > 0 ? /* @__PURE__ */ jsx(
+      Collapsible,
+      {
+        defaultOpen: isActive || hasActiveChildNode,
+        className: "group/collapsible",
+        children: /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-nowrap items-center gap-2", children: [
+            /* @__PURE__ */ jsxs(
+              Link3,
+              {
+                href: node.websitePath,
+                className: `group/row relative flex flex-nowrap items-center gap-2 flex-auto py-1.5 pl-3 pr-2 rounded-md text-sm transition-colors hover:bg-accent ${isActive ? "bg-accent font-medium text-foreground before:absolute before:inset-y-1 before:left-0 before:w-0.5 before:rounded-full before:bg-foreground" : hasActiveChildNode ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex-none", children: [
+                    /* @__PURE__ */ jsx(FolderOpenIcon, { className: "h-4 w-4 group-data-[state=closed]/collapsible:hidden" }),
+                    /* @__PURE__ */ jsx(FolderClosedIcon, { className: "h-4 w-4 group-data-[state=open]/collapsible:hidden" })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: `flex-auto ${isActive ? "font-medium" : ""}`, children: node.title })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              CollapsibleTrigger2,
+              {
+                className: "p-1.5 rounded-md text-muted-foreground/70 transition-colors hover:bg-accent hover:text-foreground self-center",
+                "aria-label": `${toggleFolder}: ${node.title}`,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    ChevronRight,
+                    {
+                      className: "h-4 w-4 group-data-[state=open]/collapsible:hidden",
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    ChevronDown,
+                    {
+                      className: "h-4 w-4 group-data-[state=closed]/collapsible:hidden",
+                      "aria-hidden": "true"
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(CollapsibleContent2, { children: /* @__PURE__ */ jsx(SidebarMenuSub, { children: Object.entries(node.children || {}).map(([, child]) => {
+            if (!child.websitePath) return null;
+            const isChildActive = isActiveNode(child, currentPath);
+            const childIsLeaf = !child.children || Object.keys(child.children).length === 0;
+            return /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
+              Link3,
+              {
+                href: child.websitePath,
+                onClick: childIsLeaf ? onNavigateLeaf : void 0,
+                className: `group/row relative flex items-center gap-2 py-1.5 pl-3 pr-2 rounded-md text-sm transition-colors hover:bg-accent ${isChildActive ? "bg-accent font-medium text-foreground before:absolute before:inset-y-1 before:left-0 before:w-0.5 before:rounded-full before:bg-foreground" : "text-muted-foreground hover:text-foreground"}`,
+                children: [
+                  child.children && Object.keys(child.children).length > 0 ? /* @__PURE__ */ jsx(FolderClosedIcon, { className: "h-4 w-4 flex-none" }) : /* @__PURE__ */ jsx(FileTextIcon, { className: "h-4 w-4 flex-none" }),
+                  /* @__PURE__ */ jsx("span", { className: "", children: child.title })
+                ]
+              }
+            ) }, child.websitePath);
+          }) }) })
+        ] }, node.websitePath) }, `menu-${node.websitePath}`)
+      },
+      node.websitePath
+    ) : /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(
       Link3,
       {
         href: node.websitePath,
+        onClick: onNavigateLeaf,
         className: `group/row relative flex items-center gap-2 py-1.5 pl-3 pr-2 rounded-md text-sm transition-colors hover:bg-accent ${isActive ? "bg-accent font-medium text-foreground before:absolute before:inset-y-1 before:left-0 before:w-0.5 before:rounded-full before:bg-foreground" : "text-muted-foreground hover:text-foreground"}`,
         children: [
           /* @__PURE__ */ jsx(FileTextIcon, { className: "h-4 w-4 flex-none" }),
@@ -4118,7 +4130,34 @@ function SidebarNavigation({
     ) }, node.websitePath) }, `menu-${node.websitePath}`);
   }) }) });
 }
+var open = false;
+var listeners = /* @__PURE__ */ new Set();
+function emit() {
+  for (const listener of listeners) listener();
+}
+function setMobileMenuOpen(value) {
+  if (open === value) return;
+  open = value;
+  emit();
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function getSnapshot() {
+  return open;
+}
+function getServerSnapshot() {
+  return false;
+}
+function useMobileMenuOpen() {
+  const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return [value, setMobileMenuOpen];
+}
 function MobileMenu({ pageData, translations: translations2 = {} }) {
+  const [open2, setOpen] = useMobileMenuOpen();
   if (!pageData) {
     return null;
   }
@@ -4128,7 +4167,7 @@ function MobileMenu({ pageData, translations: translations2 = {} }) {
     mobileMenuDescription = "Mobile navigation menu"
   } = translations2;
   const { sidebar, navigation: nav, computed } = pageData;
-  return /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsxs(Drawer, { direction: "right", children: [
+  return /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsxs(Drawer, { direction: "right", open: open2, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(DrawerTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "icon", className: "h-9 w-9", children: [
       /* @__PURE__ */ jsx(Menu, { className: "h-4 w-4" }),
       /* @__PURE__ */ jsx("span", { className: "sr-only", children: openMobileMenu })
@@ -4163,7 +4202,8 @@ function MobileMenu({ pageData, translations: translations2 = {} }) {
           {
             nodes: sidebar.items,
             currentPath: `/${computed.lang}/docs/${computed.path}`,
-            language: computed.lang
+            language: computed.lang,
+            onNavigateLeaf: () => setOpen(false)
           }
         )
       ] })
@@ -4538,7 +4578,7 @@ function useMediaQuery(query) {
   return value;
 }
 function BreadcrumbToggle({ overflowItems, className }) {
-  const [open, setOpen] = React6.useState(false);
+  const [open2, setOpen] = React6.useState(false);
   const isDesktop = useMediaQuery("(min-width: 768px)");
   const handleOverflowItemClick = useCallback(() => {
     setOpen(false);
@@ -4546,7 +4586,7 @@ function BreadcrumbToggle({ overflowItems, className }) {
   if (overflowItems.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsx(BreadcrumbItem, { className, children: isDesktop ? /* @__PURE__ */ jsxs(DropdownMenu, { open, onOpenChange: setOpen, children: [
+  return /* @__PURE__ */ jsx(BreadcrumbItem, { className, children: isDesktop ? /* @__PURE__ */ jsxs(DropdownMenu, { open: open2, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsxs(
       DropdownMenuTrigger,
       {
@@ -4567,7 +4607,7 @@ function BreadcrumbToggle({ overflowItems, className }) {
         children: item.label
       }
     ) }) }, index)) })
-  ] }) : /* @__PURE__ */ jsxs(Drawer, { open, onOpenChange: setOpen, children: [
+  ] }) : /* @__PURE__ */ jsxs(Drawer, { open: open2, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(DrawerTrigger, { "aria-label": "Show more breadcrumb items", children: /* @__PURE__ */ jsx(BreadcrumbEllipsis, { className: "h-4 w-4" }) }),
     /* @__PURE__ */ jsxs(DrawerContent, { children: [
       /* @__PURE__ */ jsx("div", { className: "grid gap-1 p-4 overflow-y-auto", children: overflowItems.map((item, index) => /* @__PURE__ */ jsx(