fumadocs-ui 12.4.2 → 12.5.0

package/dist/{chunk-NZA3MCPM.js → chunk-AAS47F5B.js}

@@ -12,6 +12,9 @@ import {
 import {
   useI18n
 } from "./chunk-HLGNIWUN.js";
+import {
+  useOnChange
+} from "./chunk-V7IGWU5C.js";
 import {
   Collapsible,
   CollapsibleContent,
@@ -20,106 +23,18 @@ import {
 import {
   buttonVariants,
   itemVariants
-} from "./chunk-VUIQ7ZYI.js";
+} from "./chunk-YSCK5YFO.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
 
-// src/components/layout/search-toggle.tsx
-import { useCallback } from "react";
-import { SearchIcon } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function SearchToggle(props) {
-  const { setOpenSearch } = useSearchContext();
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      className: twMerge(
-        buttonVariants({
-          size: "icon",
-          color: "ghost",
-          className: props.className
-        })
-      ),
-      "aria-label": "Open Search",
-      onClick: useCallback(() => {
-        setOpenSearch(true);
-      }, [setOpenSearch]),
-      children: /* @__PURE__ */ jsx(SearchIcon, {})
-    }
-  );
-}
-function LargeSearchToggle(props) {
-  const { hotKey, setOpenSearch } = useSearchContext();
-  const { text } = useI18n();
-  return /* @__PURE__ */ jsxs(
-    "button",
-    {
-      type: "button",
-      ...props,
-      className: twMerge(
-        "inline-flex items-center gap-2 rounded-full border bg-secondary/50 p-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
-        props.className
-      ),
-      onClick: useCallback(() => {
-        setOpenSearch(true);
-      }, [setOpenSearch]),
-      children: [
-        /* @__PURE__ */ jsx(SearchIcon, { className: "ms-1 size-4" }),
-        text.search,
-        /* @__PURE__ */ jsx("div", { className: "ms-auto inline-flex gap-0.5", children: hotKey.map((k, i) => /* @__PURE__ */ jsx("kbd", { className: "rounded-md border bg-background px-1.5", children: k.display }, i)) })
-      ]
-    }
-  );
-}
-
-// src/components/layout/nav.tsx
-import Link from "fumadocs-core/link";
-import {
-  useEffect,
-  useState
-} from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-function NavBox({
-  transparentMode = "none",
-  ...props
-}) {
-  const [transparent, setTransparent] = useState(transparentMode !== "none");
-  useEffect(() => {
-    if (transparentMode !== "top") return;
-    const listener = () => {
-      setTransparent(window.scrollY < 10);
-    };
-    listener();
-    window.addEventListener("scroll", listener);
-    return () => {
-      window.removeEventListener("scroll", listener);
-    };
-  }, [transparentMode]);
-  return /* @__PURE__ */ jsx2(
-    "header",
-    {
-      ...props,
-      className: twMerge(
-        "sticky top-0 z-50 border-b transition-colors",
-        transparent ? "border-transparent" : "border-foreground/10 bg-background/60 backdrop-blur-md",
-        props.className
-      )
-    }
-  );
-}
-function Title({ title, url = "/" }) {
-  return /* @__PURE__ */ jsx2(Link, { href: url, className: "inline-flex items-center gap-2.5 font-semibold", children: title });
-}
-
 // src/components/layout/link-item.tsx
-import Link2 from "fumadocs-core/link";
+import Link from "fumadocs-core/link";
 import { ChevronDown } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { cva } from "class-variance-authority";
-import { useEffect as useEffect2, useState as useState2 } from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 var linkItemVariants = cva(
   "-m-2 inline-flex items-center gap-1 p-2 text-muted-foreground transition-colors [&_svg]:size-4",
   {
@@ -144,7 +59,7 @@ function LinkItem({
   if (item.on && item.on !== "all" && item.on !== on) return null;
   if (item.type === "custom") return item.children;
   if (item.type === "menu" && on === "nav") {
-    return /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs(
       LinksMenu,
       {
         items: item.items,
@@ -153,14 +68,14 @@ function LinkItem({
         children: [
           item.icon,
           item.text,
-          /* @__PURE__ */ jsx3(ChevronDown, { className: "ms-auto !size-3.5" })
+          /* @__PURE__ */ jsx(ChevronDown, { className: "ms-auto !size-3.5" })
         ]
       }
     );
   }
   if (item.type === "menu") {
-    return /* @__PURE__ */ jsxs2(Collapsible, { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxs2(
+    return /* @__PURE__ */ jsxs(Collapsible, { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs(
         CollapsibleTrigger,
         {
           className: twMerge(itemVariants({ className }), "group/link"),
@@ -168,16 +83,16 @@ function LinkItem({
           children: [
             item.icon,
             item.text,
-            /* @__PURE__ */ jsx3(ChevronDown, { className: "ms-auto transition-transform group-data-[state=closed]/link:-rotate-90" })
+            /* @__PURE__ */ jsx(ChevronDown, { className: "ms-auto transition-transform group-data-[state=closed]/link:-rotate-90" })
           ]
         }
       ),
-      /* @__PURE__ */ jsx3(CollapsibleContent, { children: /* @__PURE__ */ jsx3("div", { className: "ms-2 flex flex-col border-s py-2 ps-2", children: item.items.map((child, i) => /* @__PURE__ */ jsx3(LinkItem, { item: child, on: "menu" }, i)) }) })
+      /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ms-2 flex flex-col border-s py-2 ps-2", children: item.items.map((child, i) => /* @__PURE__ */ jsx(LinkItem, { item: child, on: "menu" }, i)) }) })
     ] });
   }
   if (item.type === "button") {
-    return /* @__PURE__ */ jsxs2(
-      Link2,
+    return /* @__PURE__ */ jsxs(
+      Link,
       {
         href: item.url,
         external: item.external,
@@ -196,8 +111,8 @@ function LinkItem({
   const activeType = item.active ?? "url";
   const active = activeType !== "none" && isActive(item.url, pathname, activeType === "nested-url");
   if ((item.type === "secondary" || item.type === "icon") && on === "nav") {
-    return /* @__PURE__ */ jsx3(
-      Link2,
+    return /* @__PURE__ */ jsx(
+      Link,
       {
         "aria-label": item.label,
         href: item.url,
@@ -214,8 +129,8 @@ function LinkItem({
       }
     );
   }
-  return /* @__PURE__ */ jsxs2(
-    Link2,
+  return /* @__PURE__ */ jsxs(
+    Link,
     {
       href: item.url,
       external: item.external,
@@ -238,67 +153,72 @@ function LinksMenu({
   footer,
   ...props
 }) {
-  const [open, setOpen] = useState2(false);
+  const [open, setOpen] = useState(false);
   const pathname = usePathname();
-  useEffect2(() => {
+  useOnChange(pathname, () => {
     setOpen(false);
-  }, [pathname]);
-  return /* @__PURE__ */ jsxs2(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx3(PopoverTrigger, { ...props }),
-    /* @__PURE__ */ jsxs2(PopoverContent, { className: "flex flex-col", children: [
-      items.map((item, i) => /* @__PURE__ */ jsx3(LinkItem, { item, on: "menu" }, i)),
+  });
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { ...props }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "flex flex-col", children: [
+      items.map((item, i) => /* @__PURE__ */ jsx(LinkItem, { item, on: "menu" }, i)),
       footer
     ] })
   ] });
 }
 
-// src/components/layout/theme-toggle.tsx
-import { cva as cva2 } from "class-variance-authority";
-import { Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
-import { useCallback as useCallback2 } from "react";
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var buttonVariants2 = cva2("size-7 rounded-full p-1.5 text-muted-foreground", {
-  variants: {
-    dark: {
-      true: "dark:bg-accent dark:text-accent-foreground",
-      false: "bg-accent text-accent-foreground dark:bg-transparent dark:text-muted-foreground"
-    }
-  }
-});
-function ThemeToggle({
-  className,
-  ...props
-}) {
-  const { setTheme, resolvedTheme } = useTheme();
-  const onToggle = useCallback2(() => {
-    setTheme(resolvedTheme === "dark" ? "light" : "dark");
-  }, [setTheme, resolvedTheme]);
-  return /* @__PURE__ */ jsxs3(
+// src/components/layout/search-toggle.tsx
+import { useCallback } from "react";
+import { SearchIcon } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SearchToggle(props) {
+  const { setOpenSearch } = useSearchContext();
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       type: "button",
       className: twMerge(
-        "inline-flex items-center rounded-full border p-0.5",
-        className
+        buttonVariants({
+          size: "icon",
+          color: "ghost",
+          className: props.className
+        })
       ),
-      "aria-label": "Toggle Theme",
-      onClick: onToggle,
+      "aria-label": "Open Search",
+      onClick: useCallback(() => {
+        setOpenSearch(true);
+      }, [setOpenSearch]),
+      children: /* @__PURE__ */ jsx2(SearchIcon, {})
+    }
+  );
+}
+function LargeSearchToggle(props) {
+  const { hotKey, setOpenSearch } = useSearchContext();
+  const { text } = useI18n();
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
       ...props,
+      className: twMerge(
+        "inline-flex items-center gap-2 rounded-full border bg-secondary/50 p-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground",
+        props.className
+      ),
+      onClick: useCallback(() => {
+        setOpenSearch(true);
+      }, [setOpenSearch]),
       children: [
-        /* @__PURE__ */ jsx4(Sun, { className: twMerge(buttonVariants2({ dark: false })) }),
-        /* @__PURE__ */ jsx4(Moon, { className: twMerge(buttonVariants2({ dark: true })) })
+        /* @__PURE__ */ jsx2(SearchIcon, { className: "ms-1 size-4" }),
+        text.search,
+        /* @__PURE__ */ jsx2("div", { className: "ms-auto inline-flex gap-0.5", children: hotKey.map((k, i) => /* @__PURE__ */ jsx2("kbd", { className: "rounded-md border bg-background px-1.5", children: k.display }, i)) })
       ]
     }
   );
 }
 
 export {
-  SearchToggle,
-  LargeSearchToggle,
-  NavBox,
-  Title,
   LinkItem,
   LinksMenu,
-  ThemeToggle
+  SearchToggle,
+  LargeSearchToggle
 };

package/dist/{docs.client.js → chunk-CIVJB4ZT.js}

@@ -1,50 +1,35 @@
-"use client";
 import {
   LargeSearchToggle,
-  LinkItem,
-  LinksMenu,
-  NavBox,
-  SearchToggle,
-  ThemeToggle,
-  Title
-} from "./chunk-NZA3MCPM.js";
+  LinkItem
+} from "./chunk-AAS47F5B.js";
 import {
   ScrollArea,
   ScrollViewport
 } from "./chunk-VYTHQTZE.js";
-import "./chunk-GHKJ6EFT.js";
 import {
-  TreeContextProvider,
   useTreeContext
 } from "./chunk-R3M2OC5U.js";
 import {
   hasActive,
   isActive
 } from "./chunk-IIDV3RNQ.js";
-import {
-  useSidebar
-} from "./chunk-3F57TIUQ.js";
 import {
   useSearchContext
 } from "./chunk-ET4TW6M5.js";
-import "./chunk-HLGNIWUN.js";
+import {
+  useOnChange
+} from "./chunk-V7IGWU5C.js";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger
 } from "./chunk-7XPZOMJ2.js";
 import {
-  buttonVariants,
   itemVariants
-} from "./chunk-VUIQ7ZYI.js";
+} from "./chunk-YSCK5YFO.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
-import "./chunk-MLKGABMK.js";
-
-// src/docs.client.tsx
-import { SidebarTrigger } from "fumadocs-core/sidebar";
-import { Menu, X } from "lucide-react";
 
 // src/components/layout/sidebar.tsx
 import { ChevronDown, ExternalLinkIcon } from "lucide-react";
@@ -54,7 +39,6 @@ import {
   createContext,
   useCallback,
   useContext,
-  useEffect,
   useMemo,
   useState
 } from "react";
@@ -168,7 +152,6 @@ function PageNode({
   item: { icon, external = false, url, name }
 }) {
   const pathname = usePathname();
-  const { closeOnRedirect } = useSidebar();
   const active = isActive(url, pathname, false);
   return /* @__PURE__ */ jsxs(
     Link,
@@ -176,9 +159,6 @@ function PageNode({
       href: url,
       external,
       className: twMerge(itemVariants({ active })),
-      onClick: useCallback(() => {
-        closeOnRedirect.current = !active;
-      }, [closeOnRedirect, active]),
       children: [
         icon ?? (external ? /* @__PURE__ */ jsx(ExternalLinkIcon, {}) : null),
         name
@@ -191,7 +171,6 @@ function FolderNode({
   level
 }) {
   const { defaultOpenLevel } = useContext(Context);
-  const { closeOnRedirect } = useSidebar();
   const pathname = usePathname();
   const active = index !== void 0 && isActive(index.url, pathname, false);
   const childActive = useMemo(
@@ -199,20 +178,21 @@ function FolderNode({
     [children, pathname]
   );
   const shouldExtend = active || childActive || defaultOpenLevel >= level || defaultOpen;
-  const [extend, setExtend] = useState(shouldExtend);
-  useEffect(() => {
-    if (shouldExtend) setExtend(true);
-  }, [shouldExtend]);
+  const [open, setOpen] = useState(shouldExtend);
+  useOnChange(shouldExtend, (v) => {
+    if (v) setOpen(v);
+  });
   const onClick = useCallback(
     (e) => {
-      if (e.target !== e.currentTarget || active) {
-        setExtend((prev) => !prev);
+      if (
+        // clicking on icon
+        e.target.hasAttribute("data-icon") || active
+      ) {
+        setOpen((prev) => !prev);
         e.preventDefault();
-      } else {
-        closeOnRedirect.current = !active;
       }
     },
-    [closeOnRedirect, active]
+    [active]
   );
   const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon,
@@ -220,11 +200,12 @@ function FolderNode({
     /* @__PURE__ */ jsx(
       ChevronDown,
       {
-        className: twMerge("ms-auto transition-transform", !extend && "-rotate-90")
+        "data-icon": true,
+        className: twMerge("ms-auto transition-transform", !open && "-rotate-90")
       }
     )
   ] });
-  return /* @__PURE__ */ jsxs(Collapsible, { open: extend, onOpenChange: setExtend, children: [
+  return /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, children: [
     index ? /* @__PURE__ */ jsx(
       Link,
       {
@@ -250,146 +231,6 @@ function SeparatorNode({
   return /* @__PURE__ */ jsx("p", { className: "mb-2 mt-8 px-2 font-medium first:mt-0", children: item.name });
 }
 
-// src/components/layout/dynamic-sidebar.tsx
-import { useCallback as useCallback2, useRef, useState as useState2 } from "react";
-import { SidebarIcon } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function DynamicSidebar(props) {
-  const { collapsed, setCollapsed } = useSidebar();
-  const [hover, setHover] = useState2(false);
-  const timerRef = useRef(0);
-  const closeTimeRef = useRef(0);
-  const onCollapse = useCallback2(() => {
-    setCollapsed((v) => !v);
-    setHover(false);
-    closeTimeRef.current = Date.now() + 150;
-  }, [setCollapsed]);
-  const onEnter = useCallback2((e) => {
-    if (e.pointerType === "touch" || closeTimeRef.current > Date.now()) return;
-    window.clearTimeout(timerRef.current);
-    setHover(true);
-  }, []);
-  const onLeave = useCallback2((e) => {
-    if (e.pointerType === "touch") return;
-    window.clearTimeout(timerRef.current);
-    timerRef.current = window.setTimeout(
-      () => {
-        setHover(false);
-        closeTimeRef.current = Date.now() + 150;
-      },
-      Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100 ? 0 : 500
-    );
-  }, []);
-  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    collapsed ? /* @__PURE__ */ jsx2(
-      "div",
-      {
-        className: "fixed inset-y-0 start-0 w-6 max-md:hidden xl:w-[50px]",
-        onPointerEnter: onEnter,
-        onPointerLeave: onLeave
-      }
-    ) : null,
-    collapsed ? /* @__PURE__ */ jsx2(
-      "button",
-      {
-        type: "button",
-        "aria-label": "Collapse Sidebar",
-        className: twMerge(
-          buttonVariants({
-            color: "secondary",
-            size: "icon",
-            className: "fixed start-4 bottom-2 z-10 max-md:hidden"
-          })
-        ),
-        onClick: onCollapse,
-        children: /* @__PURE__ */ jsx2(SidebarIcon, {})
-      }
-    ) : null,
-    /* @__PURE__ */ jsx2(
-      Sidebar,
-      {
-        ...props,
-        aside: {
-          "data-collapse": collapsed,
-          "data-hover": hover,
-          onPointerEnter: onEnter,
-          onPointerLeave: onLeave,
-          "aria-hidden": Boolean(collapsed && !hover),
-          className: twMerge(
-            "md:transition-[transform,margin]",
-            collapsed && [
-              "md:top-1 md:mr-[-240px] md:h-[calc(100dvh-4px)] md:animate-sidebar-collapse md:rounded-xl md:border md:shadow-md xl:mr-[-260px]",
-              hover ? "md:translate-x-1 rtl:md:-translate-x-1" : "md:-translate-x-full rtl:md:translate-x-full"
-            ]
-          )
-        },
-        footer: /* @__PURE__ */ jsxs2(Fragment2, { children: [
-          props.footer,
-          /* @__PURE__ */ jsx2(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Collapse Sidebar",
-              className: twMerge(
-                buttonVariants({
-                  color: "ghost",
-                  size: "icon",
-                  className: "max-md:hidden"
-                })
-              ),
-              onClick: onCollapse,
-              children: /* @__PURE__ */ jsx2(SidebarIcon, {})
-            }
-          )
-        ] })
-      }
-    )
-  ] });
-}
-
-// src/docs.client.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-function SubNav({
-  title,
-  url,
-  transparentMode,
-  children,
-  enableSearch = true
-}) {
-  const { open } = useSidebar();
-  const { enabled } = useSearchContext();
-  return /* @__PURE__ */ jsxs3(
-    NavBox,
-    {
-      id: "nd-subnav",
-      className: "flex h-14 flex-row items-center px-4 md:hidden",
-      transparentMode,
-      children: [
-        /* @__PURE__ */ jsx3(Title, { url, title }),
-        /* @__PURE__ */ jsx3("div", { className: "flex flex-1 flex-row items-center", children }),
-        enabled && enableSearch ? /* @__PURE__ */ jsx3(SearchToggle, {}) : null,
-        /* @__PURE__ */ jsx3(
-          SidebarTrigger,
-          {
-            className: twMerge(
-              buttonVariants({
-                color: "ghost",
-                size: "icon",
-                className: "-me-2"
-              })
-            ),
-            children: open ? /* @__PURE__ */ jsx3(X, {}) : /* @__PURE__ */ jsx3(Menu, {})
-          }
-        )
-      ]
-    }
-  );
-}
 export {
-  DynamicSidebar,
-  LinksMenu,
-  Sidebar,
-  SubNav,
-  ThemeToggle,
-  TreeContextProvider
+  Sidebar
 };

package/dist/chunk-FMI5QZTV.js

@@ -0,0 +1,21 @@
+// src/layout.shared.tsx
+import { jsx } from "react/jsx-runtime";
+function getLinks(links, githubUrl) {
+  let result = links ?? [];
+  if (githubUrl)
+    result = [
+      ...result,
+      {
+        type: "secondary",
+        url: githubUrl,
+        text: "Github",
+        icon: /* @__PURE__ */ jsx("svg", { role: "img", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" }) }),
+        external: true
+      }
+    ];
+  return result;
+}
+
+export {
+  getLinks
+};