fumadocs-ui 12.0.0 → 12.0.2

package/dist/layout.client.js

@@ -2,35 +2,29 @@
 import {
   LargeSearchToggle,
   LinkItem,
+  LinksMenu,
   SearchToggle,
   ThemeToggle
-} from "./chunk-JQW5DMD2.js";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from "./chunk-UBVEKNRF.js";
+} from "./chunk-KOSWCGKQ.js";
+import "./chunk-UBVEKNRF.js";
 import "./chunk-AN2Y6MA2.js";
 import {
   useSearchContext
 } from "./chunk-FSPYEOFC.js";
 import {
   useI18n
-} from "./chunk-CRYPD6UZ.js";
+} from "./chunk-HLGNIWUN.js";
 import "./chunk-7XPZOMJ2.js";
-import {
-  buttonVariants
-} from "./chunk-7GZKFBAP.js";
+import "./chunk-7GZKFBAP.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
 import "./chunk-MLKGABMK.js";
 
 // src/components/layout/nav.tsx
-import { MoreVertical } from "lucide-react";
 import Link from "fumadocs-core/link";
 import { useEffect, useState } from "react";
-import { usePathname } from "next/navigation";
+import { MoreVertical } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function Nav({
   title = "My App",
@@ -42,6 +36,7 @@ function Nav({
 }) {
   const search = useSearchContext();
   const [transparent, setTransparent] = useState(transparentMode !== "none");
+  const { text } = useI18n();
   useEffect(() => {
     if (transparentMode !== "top") return;
     const listener = () => {
@@ -58,7 +53,7 @@ function Nav({
     {
       className: twMerge(
         "sticky top-0 z-50 h-16 border-b transition-colors",
-        transparent ? "border-transparent" : "border-foreground/10 bg-background/50 backdrop-blur-md"
+        transparent ? "border-transparent" : "border-foreground/10 bg-background/80 backdrop-blur-md"
       ),
       children: /* @__PURE__ */ jsxs("nav", { className: "mx-auto flex size-full max-w-container flex-row items-center gap-6 px-4", children: [
         /* @__PURE__ */ jsx(
@@ -84,44 +79,24 @@ function Nav({
             /* @__PURE__ */ jsx(LargeSearchToggle, { className: "w-full max-w-[240px] max-md:hidden" })
           ] }) : null,
           /* @__PURE__ */ jsx(ThemeToggle, { className: "max-lg:hidden" }),
-          /* @__PURE__ */ jsx(LinksMenu, { items, className: "lg:hidden" }),
+          /* @__PURE__ */ jsx(
+            LinksMenu,
+            {
+              items,
+              className: "lg:hidden",
+              footer: /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between px-2 py-1", children: [
+                /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: text.chooseTheme }),
+                /* @__PURE__ */ jsx(ThemeToggle, {})
+              ] }),
+              children: /* @__PURE__ */ jsx(MoreVertical, {})
+            }
+          ),
           items.filter((item) => item.type === "secondary").map((item, i) => /* @__PURE__ */ jsx(LinkItem, { item, className: "max-lg:hidden" }, i))
         ] })
       ] })
     }
   );
 }
-function LinksMenu({ items, ...props }) {
-  const [open, setOpen] = useState(false);
-  const { text } = useI18n();
-  const pathname = usePathname();
-  useEffect(() => {
-    setOpen(false);
-  }, [pathname]);
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(
-      PopoverTrigger,
-      {
-        ...props,
-        className: twMerge(
-          buttonVariants({
-            size: "icon",
-            color: "ghost",
-            className: props.className
-          })
-        ),
-        children: /* @__PURE__ */ jsx(MoreVertical, {})
-      }
-    ),
-    /* @__PURE__ */ jsxs(PopoverContent, { className: "flex flex-col", children: [
-      items.map((item, i) => /* @__PURE__ */ jsx(LinkItem, { item, on: "menu" }, i)),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between px-2 py-1", children: [
-        /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: text.chooseTheme }),
-        /* @__PURE__ */ jsx(ThemeToggle, {})
-      ] })
-    ] })
-  ] });
-}
 export {
   Nav
 };

package/dist/layout.js

@@ -5,6 +5,7 @@ import {
   TreeContextProvider,
   DynamicSidebar,
   SubNav,
+  LinksMenu,
   Sidebar,
   ThemeToggle,
 } from "./docs.client"
@@ -19,6 +20,7 @@ import "./chunk-MLKGABMK.js";
 
 // src/layout.tsx
 import Link from "next/link";
+import { MoreHorizontal } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function Layout({
   nav = {},
@@ -65,14 +67,17 @@ function DocsLayout({
                 items: finalLinks,
                 defaultOpenLevel: sidebar.defaultOpenLevel,
                 banner: /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(
-                    Link,
-                    {
-                      href: nav?.url ?? "/",
-                      className: "inline-flex items-center gap-2.5 border-b pb-4 font-semibold max-md:hidden",
-                      children: nav?.title
-                    }
-                  ),
+                  /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between border-b pb-2 max-md:hidden", children: [
+                    /* @__PURE__ */ jsx(
+                      Link,
+                      {
+                        href: nav?.url ?? "/",
+                        className: "inline-flex items-center gap-2.5 font-medium",
+                        children: nav?.title
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(LinksMenu, { items: finalLinks, children: /* @__PURE__ */ jsx(MoreHorizontal, {}) })
+                  ] }),
                   sidebar.banner
                 ] }),
                 bannerProps: {

package/dist/mdx.client.js

@@ -2,7 +2,7 @@
 import {
   CodeBlock,
   Pre
-} from "./chunk-XXVXIK4M.js";
+} from "./chunk-E5OQ6FBQ.js";
 import "./chunk-VYTHQTZE.js";
 import "./chunk-2KMKNVSN.js";
 import "./chunk-7GZKFBAP.js";

package/dist/mdx.js

@@ -8,7 +8,7 @@ import {
 } from "./chunk-N3HFQZRE.js";
 import {
   Heading
-} from "./chunk-IOHAG6BY.js";
+} from "./chunk-5CZEA2KX.js";
 import "./chunk-TK3TM3MR.js";
 import "./chunk-MLKGABMK.js";
 

package/dist/page.client.d.ts

@@ -1,8 +1,21 @@
 import { TOCItemType } from 'fumadocs-core/server';
+import * as Primitive from 'fumadocs-core/toc-internal';
+import { ReactNode, ReactElement } from 'react';
 
-declare function TOCItems({ items, }: {
+interface TOCProps {
     items: TOCItemType[];
-}): React.ReactElement;
+    /**
+     * Custom content in TOC container, before the main TOC
+     */
+    header?: ReactNode;
+    /**
+     * Custom content in TOC container, after the main TOC
+     */
+    footer?: ReactNode;
+}
+declare const TocProvider: typeof Primitive.AnchorProvider;
+declare function Toc({ items, header, footer }: TOCProps): ReactElement;
+declare function SubToc({ items, header, footer }: TOCProps): ReactElement;
 
 declare function Breadcrumb(): React.ReactElement;
 
@@ -26,4 +39,4 @@ interface FooterProps {
 }
 declare function Footer({ items }: FooterProps): React.ReactElement;
 
-export { Breadcrumb, Footer, type FooterProps, LastUpdate, TOCItems };
+export { Breadcrumb, Footer, type FooterProps, LastUpdate, SubToc, type TOCProps, Toc, TocProvider };

package/dist/page.client.js

@@ -1,78 +1,129 @@
 "use client";
-import {
-  useTreeContext
-} from "./chunk-34Z7WODD.js";
 import {
   ScrollArea,
   ScrollViewport
 } from "./chunk-VYTHQTZE.js";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "./chunk-UBVEKNRF.js";
+import {
+  useTreeContext
+} from "./chunk-34Z7WODD.js";
 import "./chunk-AN2Y6MA2.js";
 import {
   useI18n
-} from "./chunk-CRYPD6UZ.js";
+} from "./chunk-HLGNIWUN.js";
+import {
+  buttonVariants
+} from "./chunk-7GZKFBAP.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
 import "./chunk-MLKGABMK.js";
 
 // src/page.client.tsx
-import { useEffect as useEffect2, useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
 import Link2 from "next/link";
 import { usePathname as usePathname2 } from "next/navigation";
 
 // src/components/layout/toc.tsx
 import { TextIcon } from "lucide-react";
-import * as Primitive from "fumadocs-core/toc";
-import { useCallback, useEffect, useRef } from "react";
+import * as Primitive from "fumadocs-core/toc-internal";
+import { useCallback, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+var TocProvider = Primitive.AnchorProvider;
+function Toc({ items, header, footer }) {
+  const { text } = useI18n();
+  return /* @__PURE__ */ jsxs("div", { className: "sticky top-0 flex h-dvh w-[220px] flex-col gap-4 pe-2 pt-12 max-lg:hidden xl:w-[260px]", children: [
+    header,
+    /* @__PURE__ */ jsxs("h3", { className: "-mb-1 -ms-0.5 inline-flex items-center gap-1.5 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(TextIcon, { className: "size-4" }),
+      text.toc
+    ] }),
+    /* @__PURE__ */ jsx(TOCItems, { items }),
+    footer
+  ] });
+}
+function SubToc({ items, header, footer }) {
+  const { text } = useI18n();
+  return /* @__PURE__ */ jsxs(Popover, { children: [
+    /* @__PURE__ */ jsxs(
+      PopoverTrigger,
+      {
+        className: twMerge(
+          buttonVariants({
+            className: "sticky ms-auto bottom-4 gap-2 shadow-lg shadow-background z-10 lg:hidden",
+            color: "secondary"
+          })
+        ),
+        children: [
+          /* @__PURE__ */ jsx(TextIcon, { className: "size-4" }),
+          text.toc
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "flex max-h-[300px] w-[260px] flex-col gap-4 p-3", children: [
+      header,
+      /* @__PURE__ */ jsx(TOCItems, { className: "-me-1", items }),
+      footer
+    ] })
+  ] });
+}
 function TOCItems({
-  items
+  items,
+  className
 }) {
   const { text } = useI18n();
   const containerRef = useRef(null);
   const markerRef = useRef(null);
   const setPos = useCallback(([top, height]) => {
     const element = markerRef.current;
-    if (!element) return;
+    if (!element || containerRef.current?.clientHeight === 0) return;
     element.style.setProperty("top", `${top.toString()}px`);
     element.style.setProperty("height", `${height.toString()}px`);
     element.style.setProperty("display", "block");
   }, []);
-  return /* @__PURE__ */ jsx(ScrollArea, { className: "pt-4 text-sm first:pt-0", children: /* @__PURE__ */ jsx(ScrollViewport, { className: "relative", ref: containerRef, children: /* @__PURE__ */ jsxs(Primitive.TOCScrollProvider, { containerRef, toc: items, children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        role: "none",
-        ref: markerRef,
-        className: "absolute start-0 hidden border-s-2 border-primary transition-all"
-      }
-    ),
-    /* @__PURE__ */ jsxs("h3", { className: "mb-4 inline-flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(TextIcon, { className: "size-4" }),
-      text.toc
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 border-s-2 text-muted-foreground", children: items.map((item) => /* @__PURE__ */ jsx(TOCItem2, { item, setMarker: setPos }, item.url)) })
-  ] }) }) });
+  if (items.length === 0)
+    return /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-card p-3 text-xs text-muted-foreground", children: text.tocNoHeadings });
+  return /* @__PURE__ */ jsx(ScrollArea, { className: twMerge("flex flex-col", className), children: /* @__PURE__ */ jsxs(
+    ScrollViewport,
+    {
+      className: "relative h-0 flex-1 text-sm",
+      ref: containerRef,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "none",
+            ref: markerRef,
+            className: "absolute start-0 hidden w-0.5 bg-primary transition-all"
+          }
+        ),
+        /* @__PURE__ */ jsx(Primitive.ScrollProvider, { containerRef, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 border-s-2 text-muted-foreground", children: items.map((item) => /* @__PURE__ */ jsx(TOCItem2, { item, setMarker: setPos }, item.url)) }) })
+      ]
+    }
+  ) });
 }
 function TOCItem2({
   item,
   setMarker
 }) {
-  const active = Primitive.useActiveAnchor(item.url);
   const ref = useRef(null);
-  useEffect(() => {
-    if (active && ref.current) {
-      setMarker([ref.current.offsetTop, ref.current.clientHeight]);
-    }
-  }, [active, setMarker]);
   return /* @__PURE__ */ jsx(
     Primitive.TOCItem,
     {
       ref,
       href: item.url,
+      onActiveChange: (active) => {
+        const element = ref.current;
+        if (active && element)
+          setMarker([element.offsetTop, element.clientHeight]);
+      },
       className: twMerge(
-        "overflow-hidden text-ellipsis py-1 transition-colors data-[active=true]:font-medium data-[active=true]:text-primary",
+        "py-1 transition-colors data-[active=true]:font-medium data-[active=true]:text-primary",
         item.depth <= 2 && "ps-4",
         item.depth === 3 && "ps-7",
         item.depth >= 4 && "ps-10"
@@ -82,7 +133,7 @@ function TOCItem2({
   );
 }
 
-// src/components/breadcrumb.tsx
+// src/components/layout/breadcrumb.tsx
 import { ChevronRight } from "lucide-react";
 import { useBreadcrumb } from "fumadocs-core/breadcrumb";
 import Link from "next/link";
@@ -120,7 +171,7 @@ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function LastUpdate(props) {
   const { text } = useI18n();
   const [date, setDate] = useState("");
-  useEffect2(() => {
+  useEffect(() => {
     setDate(props.date.toLocaleDateString());
   }, [props.date]);
   return /* @__PURE__ */ jsxs3("p", { className: "mt-8 text-xs text-muted-foreground", children: [
@@ -164,5 +215,7 @@ export {
   Breadcrumb,
   Footer,
   LastUpdate,
-  TOCItems
+  SubToc,
+  Toc,
+  TocProvider
 };

package/dist/page.d.ts

@@ -1,7 +1,8 @@
 import * as React$1 from 'react';
 import { ReactNode, HTMLAttributes } from 'react';
-import { TableOfContents, TOCItemType } from 'fumadocs-core/server';
-import { FooterProps } from './page.client.js';
+import { TableOfContents } from 'fumadocs-core/server';
+import { TOCProps, FooterProps } from './page.client.js';
+import 'fumadocs-core/toc-internal';
 
 type TableOfContentOptions = Omit<TOCProps, 'items'> & {
     enabled: boolean;
@@ -18,6 +19,7 @@ interface FooterOptions extends FooterProps {
 interface DocsPageProps {
     toc?: TableOfContents;
     tableOfContent?: Partial<TableOfContentOptions>;
+    tableOfContentPopover?: Partial<TableOfContentOptions>;
     /**
      * Replace or disable breadcrumb
      */
@@ -29,18 +31,7 @@ interface DocsPageProps {
     lastUpdate?: Date | string | number;
     children: ReactNode;
 }
-declare function DocsPage({ tableOfContent, breadcrumb, footer, ...props }: DocsPageProps): React.ReactElement;
-interface TOCProps {
-    items: TOCItemType[];
-    /**
-     * Custom content in TOC container, before the main TOC
-     */
-    header: ReactNode;
-    /**
-     * Custom content in TOC container, after the main TOC
-     */
-    footer: ReactNode;
-}
+declare function DocsPage({ toc, tableOfContent, breadcrumb, tableOfContentPopover, footer, ...props }: DocsPageProps): React.ReactElement;
 /**
  * Add typography styles
  */

package/dist/page.js

@@ -1,7 +1,9 @@
 import {
-  TOCItems,
+  Toc,
+  SubToc,
   Breadcrumb,
   Footer,
+  TocProvider,
   LastUpdate,
 } from "./page.client"
 import {
@@ -14,26 +16,39 @@ import "./chunk-MLKGABMK.js";
 
 // src/page.tsx
 import { forwardRef } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function DocsPage({
+  toc = [],
   tableOfContent = {},
   breadcrumb = {},
+  tableOfContentPopover = {},
   footer = {},
   ...props
 }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(TocProvider, { toc, children: [
     /* @__PURE__ */ jsxs(
       "article",
       {
         className: twMerge(
-          "mx-auto flex w-0 max-w-[800px] flex-1 flex-col gap-6 px-4 py-10 md:px-6 md:pt-16",
+          "mx-auto flex w-0 max-w-[800px] flex-1 flex-col gap-6 px-4 py-10 md:px-6 md:pt-12",
           tableOfContent.enabled === false && "max-w-[1200px]"
         ),
         children: [
           replaceOrDefault(breadcrumb, /* @__PURE__ */ jsx(Breadcrumb, {})),
           props.children,
           props.lastUpdate ? /* @__PURE__ */ jsx(LastUpdate, { date: new Date(props.lastUpdate) }) : null,
-          replaceOrDefault(footer, /* @__PURE__ */ jsx(Footer, { items: footer.items }))
+          replaceOrDefault(footer, /* @__PURE__ */ jsx(Footer, { items: footer.items })),
+          replaceOrDefault(
+            tableOfContentPopover,
+            /* @__PURE__ */ jsx(
+              SubToc,
+              {
+                items: toc,
+                header: tableOfContentPopover.header,
+                footer: tableOfContentPopover.footer
+              }
+            )
+          )
         ]
       }
     ),
@@ -42,7 +57,7 @@ function DocsPage({
       /* @__PURE__ */ jsx(
         Toc,
         {
-          items: props.toc ?? [],
+          items: toc,
           header: tableOfContent.header,
           footer: tableOfContent.footer
         }
@@ -50,13 +65,6 @@ function DocsPage({
     )
   ] });
 }
-function Toc(props) {
-  return /* @__PURE__ */ jsxs("div", { className: "sticky top-0 flex h-dvh w-[220px] flex-col gap-4 divide-y py-10 max-lg:hidden xl:w-[260px]", children: [
-    props.header,
-    props.items.length > 0 && /* @__PURE__ */ jsx(TOCItems, { items: props.items }),
-    props.footer ? /* @__PURE__ */ jsx("div", { className: "pt-4 first:pt-0", children: props.footer }) : null
-  ] });
-}
 var DocsBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: twMerge("prose", className), ...props }));
 DocsBody.displayName = "DocsBody";
 function withArticle({

package/dist/provider.d.ts

@@ -3,7 +3,7 @@ import { MutableRefObject, ReactNode } from 'react';
 import { ThemeProviderProps } from 'next-themes/dist/types';
 import { DefaultSearchDialogProps } from './components/dialog/search-default.js';
 import { SearchLink, SharedProps } from './components/dialog/search.js';
-export { u as useI18n } from './i18n-CE8z-AAs.js';
+export { u as useI18n } from './i18n-DSnJuWoW.js';
 export { u as useTreeContext } from './tree-CrKzI9Nz.js';
 import 'fumadocs-core/search/shared';
 import 'fumadocs-core/server';

package/dist/provider.js

@@ -13,7 +13,7 @@ import {
 } from "./chunk-FSPYEOFC.js";
 import {
   useI18n
-} from "./chunk-CRYPD6UZ.js";
+} from "./chunk-HLGNIWUN.js";
 import "./chunk-MLKGABMK.js";
 
 // src/provider.tsx