fumadocs-ui 11.3.2 → 12.0.0

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

@@ -36,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-IN5NHEZV.js → chunk-3F57TIUQ.js}

@@ -1,10 +1,16 @@
 // 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");
@@ -13,8 +19,16 @@ function useSidebar() {
 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,
     {
@@ -23,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-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/components/api.js

@@ -93,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/dialog/search-algolia.js

@@ -1,9 +1,10 @@
 "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-MLKGABMK.js";

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

@@ -1,11 +1,12 @@
 "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-MLKGABMK.js";

package/dist/components/dialog/search.js

@@ -1,8 +1,9 @@
 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-MLKGABMK.js";

package/dist/components/heading.js

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

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 };

package/dist/components/layout/language-toggle.js

@@ -0,0 +1,58 @@
+"use client";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../../chunk-UBVEKNRF.js";
+import {
+  useI18n
+} from "../../chunk-CRYPD6UZ.js";
+import {
+  buttonVariants
+} from "../../chunk-7GZKFBAP.js";
+import {
+  twMerge
+} from "../../chunk-TK3TM3MR.js";
+import "../../chunk-MLKGABMK.js";
+
+// src/components/layout/language-toggle.tsx
+import { useState } from "react";
+import { LanguagesIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LanguageToggle(props) {
+  const context = useI18n();
+  const [open, setOpen] = useState(false);
+  if (!context.translations) throw new Error("Missing `<I18nProvider />`");
+  const languages = Object.entries(context.translations);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, ...props, children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        "aria-label": context.text.chooseLanguage,
+        className: twMerge(buttonVariants({ size: "icon", color: "ghost" })),
+        children: /* @__PURE__ */ jsx(LanguagesIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "flex flex-col p-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-2 p-2 font-medium text-muted-foreground", children: context.text.chooseLanguage }),
+      languages.map(([lang, { name }]) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: twMerge(
+            "rounded-md p-2 text-left text-sm transition-colors duration-100",
+            lang === context.locale ? "bg-primary/10 font-medium text-primary" : "hover:bg-accent hover:text-accent-foreground"
+          ),
+          onClick: () => {
+            context.onChange?.(lang);
+          },
+          children: name
+        },
+        lang
+      ))
+    ] })
+  ] });
+}
+export {
+  LanguageToggle
+};

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

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+interface Option {
+    /**
+     * Redirect URL of the folder, usually the index page
+     */
+    url: string;
+    icon: ReactNode;
+    title: ReactNode;
+    description: ReactNode;
+}
+declare function RootToggle({ options, }: {
+    options: Option[];
+}): React.ReactElement;
+
+export { RootToggle };

package/dist/components/layout/root-toggle.js

@@ -0,0 +1,60 @@
+"use client";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../../chunk-UBVEKNRF.js";
+import {
+  isActive
+} from "../../chunk-AN2Y6MA2.js";
+import {
+  twMerge
+} from "../../chunk-TK3TM3MR.js";
+import "../../chunk-MLKGABMK.js";
+
+// src/components/layout/root-toggle.tsx
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function RootToggle({
+  options
+}) {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+  const selected = options.find((item) => isActive(item.url, pathname, true)) ?? options[0];
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(PopoverTrigger, { className: "-mx-2 flex flex-row items-center gap-2 rounded-lg p-2 hover:bg-muted", children: [
+      /* @__PURE__ */ jsx(Item, { ...selected }),
+      /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-muted-foreground" })
+    ] }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] overflow-hidden p-0", children: options.map((item) => /* @__PURE__ */ jsx(
+      Link,
+      {
+        href: item.url,
+        onClick: () => {
+          setOpen(false);
+        },
+        className: twMerge(
+          "flex w-full flex-row gap-2 p-2",
+          selected === item ? "bg-accent text-accent-foreground" : "hover:bg-accent/50"
+        ),
+        children: /* @__PURE__ */ jsx(Item, { ...item })
+      },
+      item.url
+    )) })
+  ] });
+}
+function Item({ title, icon, description }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon,
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 text-left", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: description })
+    ] })
+  ] });
+}
+export {
+  RootToggle
+};

package/dist/components/type-table.js

@@ -3,7 +3,7 @@ import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "../chunk-WNKY4RA5.js";
+} from "../chunk-UBVEKNRF.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";

package/dist/docs.client.d.ts

@@ -0,0 +1,13 @@
+import { S as SidebarProps, N as NavProps } from './layout.client-Duq0TTke.js';
+export { a as Sidebar } from './layout.client-Duq0TTke.js';
+export { T as TreeContextProvider } from './tree-CrKzI9Nz.js';
+import { ButtonHTMLAttributes } from 'react';
+import 'fumadocs-core/server';
+
+declare function DynamicSidebar(props: SidebarProps): React.ReactElement;
+
+declare function ThemeToggle({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): React.ReactElement;
+
+declare function SubNav({ title, url, children, enableSearch, }: NavProps): React.ReactElement;
+
+export { DynamicSidebar, SubNav, ThemeToggle };