fumadocs-ui 11.3.1 → 12.0.0

package/dist/{chunk-24NYFO7H.js → chunk-2KMKNVSN.js}

@@ -9,8 +9,7 @@ function useCopyButton(onCopy) {
   const [checked, setChecked] = useState(false);
   const timeoutRef = useRef(null);
   const onClick = useCallback(() => {
-    if (timeoutRef.current)
-      window.clearTimeout(timeoutRef.current);
+    if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
     timeoutRef.current = window.setTimeout(() => {
       setChecked(false);
     }, 1500);
@@ -19,8 +18,7 @@ function useCopyButton(onCopy) {
   }, [onCopy]);
   useEffect(() => {
     return () => {
-      if (timeoutRef.current)
-        window.clearTimeout(timeoutRef.current);
+      if (timeoutRef.current) window.clearTimeout(timeoutRef.current);
     };
   }, []);
   return [checked, onClick];

package/dist/{chunk-C4PI62MH.js → chunk-34Z7WODD.js}

@@ -1,6 +1,6 @@
 import {
   hasActive
-} from "./chunk-7F2LGCS6.js";
+} from "./chunk-AN2Y6MA2.js";
 
 // src/contexts/tree.tsx
 import { usePathname } from "next/navigation";
@@ -11,8 +11,7 @@ function findRoot(items, pathname) {
   for (const item of items) {
     if (item.type === "folder") {
       const root = findRoot(item.children, pathname);
-      if (root)
-        return root;
+      if (root) return root;
       if (item.root === true && hasActive(item.children, pathname)) {
         return item;
       }
@@ -21,12 +20,10 @@ function findRoot(items, pathname) {
 }
 function getNavigationList(tree) {
   return tree.flatMap((node) => {
-    if (node.type === "separator")
-      return [];
+    if (node.type === "separator") return [];
     if (node.type === "folder") {
       const children = getNavigationList(node.children);
-      if (!node.root && node.index)
-        children.unshift(node.index);
+      if (!node.root && node.index) children.unshift(node.index);
       return children;
     }
     return !node.external ? [node] : [];
@@ -39,9 +36,10 @@ function TreeContextProvider({
   const pathname = usePathname();
   const value = useMemo(() => {
     const root = findRoot(tree.children, pathname) ?? tree;
+    const navigation = getNavigationList(root.children);
     return {
       root,
-      navigation: getNavigationList(root.children),
+      navigation,
       tree
     };
   }, [pathname, tree]);

package/dist/{chunk-GDRBCN6Q.js → chunk-3F57TIUQ.js}

@@ -1,21 +1,34 @@
 // src/contexts/sidebar.tsx
-import { createContext, useContext, useState, useMemo } from "react";
+import {
+  createContext,
+  useContext,
+  useState,
+  useMemo,
+  useRef,
+  useEffect
+} from "react";
+import { usePathname } from "next/navigation";
 import { SidebarProvider as BaseProvider } from "fumadocs-core/sidebar";
 import { jsx } from "react/jsx-runtime";
-var SidebarContext = createContext(
-  void 0
-);
+var SidebarContext = createContext(void 0);
 function useSidebar() {
   const ctx = useContext(SidebarContext);
-  if (!ctx)
-    throw new Error("Missing root provider");
+  if (!ctx) throw new Error("Missing root provider");
   return ctx;
 }
 function SidebarProvider({
   children
 }) {
+  const closeOnRedirect = useRef(false);
   const [open, setOpen] = useState(false);
   const [collapsed, setCollapsed] = useState(false);
+  const pathname = usePathname();
+  useEffect(() => {
+    if (closeOnRedirect.current) {
+      setOpen(false);
+      closeOnRedirect.current = false;
+    }
+  }, [pathname]);
   return /* @__PURE__ */ jsx(
     SidebarContext.Provider,
     {
@@ -24,7 +37,8 @@ function SidebarProvider({
           open,
           setOpen,
           collapsed,
-          setCollapsed
+          setCollapsed,
+          closeOnRedirect
         }),
         [open, collapsed]
       ),

package/dist/{chunk-PXDQVGII.js → chunk-7EMVRXMS.js}

@@ -1,9 +1,12 @@
+import {
+  useSidebar
+} from "./chunk-3F57TIUQ.js";
 import {
   useSearchContext
 } from "./chunk-FSPYEOFC.js";
 import {
   useI18n
-} from "./chunk-PW7TBOIJ.js";
+} from "./chunk-CRYPD6UZ.js";
 import {
   buttonVariants
 } from "./chunk-7GZKFBAP.js";
@@ -180,11 +183,17 @@ function Search2({
   const { text } = useI18n();
   const router = useRouter();
   const { setOpenSearch } = useSearchContext();
+  const sidebar = useSidebar();
   const items = results === "empty" ? defaultItems : results;
   const hideList = results === "empty" && defaultItems.length === 0;
   const onOpen = (url) => {
     router.push(url);
     setOpenSearch(false);
+    if (location.pathname === url.split("#")[0]) {
+      sidebar.setOpen(false);
+    } else {
+      sidebar.closeOnRedirect.current = true;
+    }
   };
   return /* @__PURE__ */ jsxs2(Fragment, { children: [
     /* @__PURE__ */ jsx2(

package/dist/{chunk-7F2LGCS6.js → chunk-AN2Y6MA2.js}

@@ -4,10 +4,8 @@ function isActive(url, pathname, nested = true) {
   return url === pathname || nested && pathname.startsWith(`${url}/`);
 }
 function replaceOrDefault(obj, def) {
-  if (obj?.enabled === false)
-    return;
-  if (obj?.component !== void 0)
-    return obj.component;
+  if (obj?.enabled === false) return;
+  if (obj?.component !== void 0) return obj.component;
   return def;
 }
 function hasActive(items, url) {

package/dist/{chunk-PW7TBOIJ.js → chunk-CRYPD6UZ.js}

@@ -8,7 +8,8 @@ var I18nContext = createContext({
     lastUpdate: "Last updated on",
     chooseLanguage: "Choose a language",
     nextPage: "Next",
-    previousPage: "Previous"
+    previousPage: "Previous",
+    chooseTheme: "Theme"
   }
 });
 function useI18n() {

package/dist/{chunk-UKE65HV3.js → chunk-IOHAG6BY.js}

@@ -11,7 +11,7 @@ function Heading({
   ...props
 }) {
   const As = as ?? "h1";
-  return /* @__PURE__ */ jsx(As, { className: twMerge("scroll-m-20", className), ...props, children: props.id ? /* @__PURE__ */ jsxs("a", { href: `#${props.id}`, className: "not-prose group", children: [
+  return /* @__PURE__ */ jsx(As, { className: twMerge("scroll-m-20", className), ...props, children: props.id ? /* @__PURE__ */ jsxs("a", { href: `#${props.id}`, className: "group", children: [
     props.children,
     /* @__PURE__ */ jsx(
       LinkIcon,

package/dist/chunk-JQW5DMD2.js

@@ -0,0 +1,226 @@
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "./chunk-UBVEKNRF.js";
+import {
+  isActive
+} from "./chunk-AN2Y6MA2.js";
+import {
+  useSearchContext
+} from "./chunk-FSPYEOFC.js";
+import {
+  useI18n
+} from "./chunk-CRYPD6UZ.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "./chunk-7XPZOMJ2.js";
+import {
+  buttonVariants
+} from "./chunk-7GZKFBAP.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 text-xs", children: hotKey.map((k, i) => /* @__PURE__ */ jsx("kbd", { className: "rounded-md border bg-background px-1.5", children: k.display }, i)) })
+      ]
+    }
+  );
+}
+
+// src/components/layout/theme-toggle.tsx
+import { cva } from "class-variance-authority";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useCallback as useCallback2 } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var buttonVariants2 = cva("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__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      className: twMerge(
+        "inline-flex items-center rounded-full border p-0.5",
+        className
+      ),
+      "aria-label": "Toggle Theme",
+      onClick: onToggle,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(Sun, { className: twMerge(buttonVariants2({ dark: false })) }),
+        /* @__PURE__ */ jsx2(Moon, { className: twMerge(buttonVariants2({ dark: true })) })
+      ]
+    }
+  );
+}
+
+// src/components/link-item.tsx
+import Link from "fumadocs-core/link";
+import { ChevronDown } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var linkItemVariants = cva2(
+  "inline-flex items-center gap-1.5 rounded-lg p-2 text-muted-foreground transition-colors [&_svg]:size-4",
+  {
+    variants: {
+      active: {
+        true: "bg-accent text-accent-foreground",
+        false: "hover:bg-accent"
+      }
+    },
+    defaultVariants: {
+      active: false
+    }
+  }
+);
+function LinkItem({
+  item,
+  on = "nav",
+  className,
+  ...props
+}) {
+  const pathname = usePathname();
+  if (item.type === "menu" && on === "nav") {
+    return /* @__PURE__ */ jsxs3(Popover, { children: [
+      /* @__PURE__ */ jsxs3(
+        PopoverTrigger,
+        {
+          className: twMerge(
+            linkItemVariants({ className }),
+            "data-[state=open]:bg-accent"
+          ),
+          ...props,
+          children: [
+            item.text,
+            /* @__PURE__ */ jsx3(ChevronDown, { className: "ml-auto size-4" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx3(PopoverContent, { className: "flex flex-col", children: item.items.map((child, i) => /* @__PURE__ */ jsx3(LinkItem, { item: child, on: "menu" }, i)) })
+    ] });
+  }
+  if (item.type === "menu") {
+    return /* @__PURE__ */ jsxs3(Collapsible, { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs3(
+        CollapsibleTrigger,
+        {
+          className: twMerge(linkItemVariants({ className }), "group/link"),
+          ...props,
+          children: [
+            item.icon,
+            item.text,
+            /* @__PURE__ */ jsx3(ChevronDown, { className: "ml-auto size-4 group-data-[state=closed]/link:-rotate-90" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx3(CollapsibleContent, { children: /* @__PURE__ */ jsx3("div", { className: "flex flex-col py-1 ps-4", children: item.items.map((child, i) => /* @__PURE__ */ jsx3(LinkItem, { item: child, on: "menu" }, i)) }) })
+    ] });
+  }
+  const activeType = item.active ?? "url";
+  const active = activeType !== "none" ? isActive(item.url, pathname, activeType === "nested-url") : false;
+  if (item.type === "secondary" && on === "nav") {
+    return /* @__PURE__ */ jsx3(
+      Link,
+      {
+        "aria-label": item.text,
+        href: item.url,
+        external: item.external,
+        className: twMerge(
+          buttonVariants({
+            size: "icon",
+            color: "ghost",
+            className
+          })
+        ),
+        ...props,
+        children: item.icon
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs3(
+    Link,
+    {
+      href: item.url,
+      external: item.external,
+      className: twMerge(
+        linkItemVariants({
+          active,
+          className
+        })
+      ),
+      ...props,
+      children: [
+        on === "menu" ? item.icon : null,
+        item.text
+      ]
+    }
+  );
+}
+
+export {
+  SearchToggle,
+  LargeSearchToggle,
+  LinkItem,
+  ThemeToggle
+};

package/dist/{chunk-WNKY4RA5.js → chunk-UBVEKNRF.js}

@@ -16,7 +16,7 @@ var PopoverContent = React.forwardRef(({ className, align = "center", sideOffset
     sideOffset,
     side: "bottom",
     className: twMerge(
-      "z-50 min-w-[260px] max-w-[90vw] rounded-md border bg-popover p-2 text-sm text-popover-foreground shadow-md outline-none data-[state=closed]:animate-popover-out data-[state=open]:animate-popover-in",
+      "z-50 min-w-[240px] max-w-[98vw] rounded-lg border bg-popover p-2 text-sm text-popover-foreground shadow-md outline-none data-[state=closed]:animate-popover-out data-[state=open]:animate-popover-in",
       className
     ),
     ...props

package/dist/{chunk-E2VA3Y4S.js → chunk-XXVXIK4M.js}

@@ -5,7 +5,7 @@ import {
 } from "./chunk-VYTHQTZE.js";
 import {
   useCopyButton
-} from "./chunk-24NYFO7H.js";
+} from "./chunk-2KMKNVSN.js";
 import {
   buttonVariants
 } from "./chunk-7GZKFBAP.js";
@@ -28,8 +28,7 @@ var CodeBlock = forwardRef(
     const areaRef = useRef(null);
     const onCopy = useCallback(() => {
       const pre = areaRef.current?.getElementsByTagName("pre").item(0);
-      if (!pre)
-        return;
+      if (!pre) return;
       const clone = pre.cloneNode(true);
       clone.querySelectorAll(".nd-copy-ignore").forEach((node) => {
         node.remove();

package/dist/components/accordion.js

@@ -1,14 +1,14 @@
 "use client";
 import {
   useCopyButton
-} from "../chunk-24NYFO7H.js";
+} from "../chunk-2KMKNVSN.js";
 import {
   buttonVariants
 } from "../chunk-7GZKFBAP.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
-import "../chunk-6C3VEZWH.js";
+import "../chunk-MLKGABMK.js";
 
 // src/components/accordion.tsx
 import * as AccordionPrimitive from "@radix-ui/react-accordion";

package/dist/components/api.js

@@ -5,7 +5,7 @@ import {
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
-import "../chunk-6C3VEZWH.js";
+import "../chunk-MLKGABMK.js";
 
 // src/components/api.tsx
 import { useState } from "react";
@@ -56,12 +56,9 @@ function APIInfo({
   ...props
 }) {
   let color = "green";
-  if (["GET", "HEAD"].includes(method))
-    color = "green";
-  if (["POST", "PATCH", "PUT"].includes(method))
-    color = "yellow";
-  if (["DELETE"].includes(method))
-    color = "red";
+  if (["GET", "HEAD"].includes(method)) color = "green";
+  if (["POST", "PATCH", "PUT"].includes(method)) color = "yellow";
+  if (["DELETE"].includes(method)) color = "red";
   return /* @__PURE__ */ jsxs("div", { className: twMerge("flex-1", className), ...props, children: [
     /* @__PURE__ */ jsxs("h2", { className: "not-prose mb-2 inline-flex items-center gap-3 font-mono", children: [
       /* @__PURE__ */ jsx("div", { className: twMerge(badgeVariants({ color })), children: method }),
@@ -96,7 +93,7 @@ function APIExample({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: twMerge("sticky top-14 h-fit xl:w-2/5 xl:min-w-[400px]", className),
+      className: twMerge("sticky top-6 h-fit xl:w-2/5 xl:min-w-[400px]", className),
       ...props,
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-4 xl:hidden", children: [

package/dist/components/callout.js

@@ -1,7 +1,7 @@
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
-import "../chunk-6C3VEZWH.js";
+import "../chunk-MLKGABMK.js";
 
 // src/components/callout.tsx
 import { AlertOctagon, AlertTriangle, Info } from "lucide-react";

package/dist/components/card.js

@@ -3,7 +3,7 @@ import {
   Cards
 } from "../chunk-N3HFQZRE.js";
 import "../chunk-TK3TM3MR.js";
-import "../chunk-6C3VEZWH.js";
+import "../chunk-MLKGABMK.js";
 export {
   Card,
   Cards

package/dist/components/codeblock.js

@@ -2,12 +2,12 @@
 import {
   CodeBlock,
   Pre
-} from "../chunk-E2VA3Y4S.js";
+} from "../chunk-XXVXIK4M.js";
 import "../chunk-VYTHQTZE.js";
-import "../chunk-24NYFO7H.js";
+import "../chunk-2KMKNVSN.js";
 import "../chunk-7GZKFBAP.js";
 import "../chunk-TK3TM3MR.js";
-import "../chunk-6C3VEZWH.js";
+import "../chunk-MLKGABMK.js";
 export {
   CodeBlock,
   Pre

package/dist/components/dialog/search-algolia.js

@@ -1,12 +1,13 @@
 "use client";
 import {
   SearchDialog
-} from "../../chunk-PXDQVGII.js";
+} from "../../chunk-7EMVRXMS.js";
+import "../../chunk-3F57TIUQ.js";
 import "../../chunk-FSPYEOFC.js";
-import "../../chunk-PW7TBOIJ.js";
+import "../../chunk-CRYPD6UZ.js";
 import "../../chunk-7GZKFBAP.js";
 import "../../chunk-TK3TM3MR.js";
-import "../../chunk-6C3VEZWH.js";
+import "../../chunk-MLKGABMK.js";
 
 // src/components/dialog/search-algolia.tsx
 import {

package/dist/components/dialog/search-default.js

@@ -1,14 +1,15 @@
 "use client";
 import {
   SearchDialog
-} from "../../chunk-PXDQVGII.js";
+} from "../../chunk-7EMVRXMS.js";
+import "../../chunk-3F57TIUQ.js";
 import "../../chunk-FSPYEOFC.js";
 import {
   useI18n
-} from "../../chunk-PW7TBOIJ.js";
+} from "../../chunk-CRYPD6UZ.js";
 import "../../chunk-7GZKFBAP.js";
 import "../../chunk-TK3TM3MR.js";
-import "../../chunk-6C3VEZWH.js";
+import "../../chunk-MLKGABMK.js";
 
 // src/components/dialog/search-default.tsx
 import { useDocsSearch } from "fumadocs-core/search/client";

package/dist/components/dialog/search.js

@@ -1,11 +1,12 @@
 import {
   SearchDialog
-} from "../../chunk-PXDQVGII.js";
+} from "../../chunk-7EMVRXMS.js";
+import "../../chunk-3F57TIUQ.js";
 import "../../chunk-FSPYEOFC.js";
-import "../../chunk-PW7TBOIJ.js";
+import "../../chunk-CRYPD6UZ.js";
 import "../../chunk-7GZKFBAP.js";
 import "../../chunk-TK3TM3MR.js";
-import "../../chunk-6C3VEZWH.js";
+import "../../chunk-MLKGABMK.js";
 export {
   SearchDialog
 };

package/dist/components/files.js

@@ -7,7 +7,7 @@ import {
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
-import "../chunk-6C3VEZWH.js";
+import "../chunk-MLKGABMK.js";
 
 // src/components/files.tsx
 import { cva } from "class-variance-authority";

package/dist/components/heading.js

@@ -1,8 +1,8 @@
 import {
   Heading
-} from "../chunk-UKE65HV3.js";
+} from "../chunk-IOHAG6BY.js";
 import "../chunk-TK3TM3MR.js";
-import "../chunk-6C3VEZWH.js";
+import "../chunk-MLKGABMK.js";
 export {
   Heading
 };

package/dist/components/image-zoom.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   defaultImageSizes
-} from "../chunk-7F2LGCS6.js";
-import "../chunk-6C3VEZWH.js";
+} from "../chunk-AN2Y6MA2.js";
+import "../chunk-MLKGABMK.js";
 
 // src/components/image-zoom.tsx
 import Image from "next/image";
@@ -10,10 +10,8 @@ import Zoom from "react-medium-image-zoom";
 import "../../dist/image-zoom.css";
 import { jsx } from "react/jsx-runtime";
 function getImageSrc(src) {
-  if (typeof src === "string")
-    return src;
-  if ("default" in src)
-    return src.default.src;
+  if (typeof src === "string") return src;
+  if ("default" in src) return src.default.src;
   return src.src;
 }
 function ImageZoom({

package/dist/components/inline-toc.js

@@ -5,7 +5,7 @@ import {
   CollapsibleTrigger
 } from "../chunk-7XPZOMJ2.js";
 import "../chunk-TK3TM3MR.js";
-import "../chunk-6C3VEZWH.js";
+import "../chunk-MLKGABMK.js";
 
 // src/components/inline-toc.tsx
 import { ChevronDown } from "lucide-react";

package/dist/components/layout/language-toggle.d.ts

@@ -0,0 +1,6 @@
+import { PopoverProps } from '@radix-ui/react-popover';
+
+type LanguageSelectProps = Omit<PopoverProps, 'open' | 'onOpenChange'>;
+declare function LanguageToggle(props: LanguageSelectProps): React.ReactElement;
+
+export { type LanguageSelectProps, LanguageToggle };