fumadocs-ui 12.1.2 → 12.2.0

package/dist/page.client.js

@@ -15,9 +15,6 @@ import "./chunk-AN2Y6MA2.js";
 import {
   useI18n
 } from "./chunk-HLGNIWUN.js";
-import {
-  buttonVariants
-} from "./chunk-H5USAX5W.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
@@ -28,54 +25,53 @@ 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";
+import { cva } from "class-variance-authority";
 
 // src/components/layout/toc.tsx
-import { TextIcon } from "lucide-react";
+import { ChevronDown, Text } from "lucide-react";
 import * as Primitive from "fumadocs-core/toc-internal";
-import { useCallback, useRef } from "react";
+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: [
+  return /* @__PURE__ */ jsxs("div", { className: "sticky top-0 flex h-dvh w-[220px] shrink-0 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" }),
+      /* @__PURE__ */ jsx(Text, { className: "size-4" }),
       text.toc
     ] }),
     /* @__PURE__ */ jsx(TOCItems, { items }),
     footer
   ] });
 }
-function SubToc({ items, header, footer }) {
+function TocPopover({
+  items,
+  header,
+  footer,
+  ...props
+}) {
   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(PopoverTrigger, { ...props, children: [
+      /* @__PURE__ */ jsx(Text, { className: "size-4" }),
+      text.toc,
+      /* @__PURE__ */ jsx(ChevronDown, { className: "ms-auto size-4 text-muted-foreground" })
+    ] }),
     /* @__PURE__ */ jsxs(
       PopoverContent,
       {
         hideWhenDetached: true,
-        side: "top",
-        align: "end",
-        avoidCollisions: false,
+        alignOffset: 16,
+        align: "start",
+        side: "bottom",
         className: "flex max-h-[80vh] w-[260px] flex-col gap-4 p-3",
         children: [
           header,
-          /* @__PURE__ */ jsx(TOCItems, { className: "-me-2", items }),
+          /* @__PURE__ */ jsx(TOCItems, { items, isMenu: true }),
           footer
         ]
       }
@@ -84,7 +80,7 @@ function SubToc({ items, header, footer }) {
 }
 function TOCItems({
   items,
-  className
+  isMenu = false
 }) {
   const { text } = useI18n();
   const containerRef = useRef(null);
@@ -98,7 +94,7 @@ function TOCItems({
   }, []);
   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(
+  return /* @__PURE__ */ jsx(ScrollArea, { className: twMerge("flex flex-col", isMenu && "-mx-3"), children: /* @__PURE__ */ jsxs(
     ScrollViewport,
     {
       className: "relative h-0 flex-1 text-sm",
@@ -112,7 +108,16 @@ function TOCItems({
             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)) }) })
+        /* @__PURE__ */ jsx(Primitive.ScrollProvider, { containerRef, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: twMerge(
+              "flex flex-col gap-1 text-muted-foreground",
+              !isMenu && "border-s-2"
+            ),
+            children: items.map((item) => /* @__PURE__ */ jsx(TOCItem2, { item, setMarker: setPos }, item.url))
+          }
+        ) })
       ]
     }
   ) });
@@ -192,48 +197,56 @@ function LastUpdate(props) {
   useEffect(() => {
     setDate(props.date.toLocaleDateString());
   }, [props.date]);
-  return /* @__PURE__ */ jsxs3("p", { className: "mt-8 text-xs text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs3("p", { className: "text-xs text-muted-foreground", children: [
     text.lastUpdate,
     " ",
     date
   ] });
 }
+var itemVariants = cva(
+  "flex w-full flex-col gap-2 rounded-lg border bg-card p-4 text-sm transition-colors hover:bg-accent/80 hover:text-accent-foreground"
+);
+var itemLabel = cva("inline-flex items-center gap-0.5 text-muted-foreground");
 function Footer({ items }) {
   const tree = useTreeContext();
   const pathname = usePathname2();
-  const { nextPage, previousPage } = useI18n().text;
+  const { text } = useI18n();
   const { previous = items?.previous, next = items?.next } = useMemo(() => {
-    const currentIndex = tree.navigation.findIndex(
-      (item) => item.url === pathname
-    );
+    const idx = tree.navigation.findIndex((item) => item.url === pathname);
     return {
-      previous: tree.navigation[currentIndex - 1],
-      next: tree.navigation[currentIndex + 1]
+      previous: tree.navigation[idx - 1],
+      next: tree.navigation[idx + 1]
     };
   }, [pathname, tree.navigation]);
-  const footerItem = "flex flex-col gap-2 rounded-lg p-4 text-sm transition-colors hover:bg-accent hover:text-accent-foreground";
-  return /* @__PURE__ */ jsxs3("div", { className: "mt-auto flex flex-row flex-wrap gap-1 border-t py-4", children: [
-    previous ? /* @__PURE__ */ jsxs3(Link2, { href: previous.url, className: footerItem, children: [
-      /* @__PURE__ */ jsxs3("div", { className: "inline-flex items-center gap-0.5 text-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 gap-4 border-t py-6", children: [
+    previous ? /* @__PURE__ */ jsxs3(Link2, { href: previous.url, className: twMerge(itemVariants()), children: [
+      /* @__PURE__ */ jsxs3("div", { className: twMerge(itemLabel()), children: [
         /* @__PURE__ */ jsx3(ChevronLeft, { className: "-ms-1 size-4 shrink-0 rtl:rotate-180" }),
-        /* @__PURE__ */ jsx3("p", { children: previousPage })
+        /* @__PURE__ */ jsx3("p", { children: text.previousPage })
       ] }),
       /* @__PURE__ */ jsx3("p", { className: "font-medium", children: previous.name })
     ] }) : null,
-    next ? /* @__PURE__ */ jsxs3(Link2, { href: next.url, className: twMerge(footerItem, "ms-auto text-end"), children: [
-      /* @__PURE__ */ jsxs3("div", { className: "inline-flex flex-row-reverse items-center gap-0.5 text-muted-foreground", children: [
-        /* @__PURE__ */ jsx3(ChevronRight2, { className: "-me-1 size-4 shrink-0 rtl:rotate-180" }),
-        /* @__PURE__ */ jsx3("p", { children: nextPage })
-      ] }),
-      /* @__PURE__ */ jsx3("p", { className: "font-medium", children: next.name })
-    ] }) : null
+    next ? /* @__PURE__ */ jsxs3(
+      Link2,
+      {
+        href: next.url,
+        className: twMerge(itemVariants({ className: "col-start-2 text-end" })),
+        children: [
+          /* @__PURE__ */ jsxs3("div", { className: twMerge(itemLabel({ className: "flex-row-reverse" })), children: [
+            /* @__PURE__ */ jsx3(ChevronRight2, { className: "-me-1 size-4 shrink-0 rtl:rotate-180" }),
+            /* @__PURE__ */ jsx3("p", { children: text.nextPage })
+          ] }),
+          /* @__PURE__ */ jsx3("p", { className: "font-medium", children: next.name })
+        ]
+      }
+    ) : null
   ] });
 }
 export {
   Breadcrumb,
   Footer,
   LastUpdate,
-  SubToc,
   Toc,
+  TocPopover,
   TocProvider
 };

package/dist/page.d.ts

@@ -19,6 +19,12 @@ interface FooterOptions extends FooterProps {
 }
 interface DocsPageProps {
     toc?: TableOfContents;
+    /**
+     * Extend the page to fill all available space
+     *
+     * @defaultValue false
+     */
+    full?: boolean;
     tableOfContent?: Partial<TableOfContentOptions>;
     tableOfContentPopover?: Partial<TableOfContentOptions>;
     /**
@@ -32,7 +38,7 @@ interface DocsPageProps {
     lastUpdate?: Date | string | number;
     children: ReactNode;
 }
-declare function DocsPage({ toc, tableOfContent, breadcrumb, tableOfContentPopover, footer, ...props }: DocsPageProps): React.ReactElement;
+declare function DocsPage({ toc, tableOfContent, breadcrumb, tableOfContentPopover, lastUpdate, full, footer, ...props }: DocsPageProps): React.ReactElement;
 /**
  * Add typography styles
  */

package/dist/page.js

@@ -1,6 +1,6 @@
 import {
   Toc,
-  SubToc,
+  TocPopover,
   Breadcrumb,
   Footer,
   TocProvider,
@@ -22,44 +22,64 @@ function DocsPage({
   tableOfContent = {},
   breadcrumb = {},
   tableOfContentPopover = {},
+  lastUpdate,
+  full = false,
   footer = {},
   ...props
 }) {
+  const tocOptions = {
+    // disable TOC on full mode, you can still enable it with `enabled` option.
+    enabled: tableOfContent.enabled ?? !full,
+    ...tableOfContent
+  };
   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-12",
-          tableOfContent.enabled === false && "max-w-[1200px]"
-        ),
-        children: [
-          replaceOrDefault(breadcrumb, /* @__PURE__ */ jsx(Breadcrumb, { full: breadcrumb.full })),
-          props.children,
-          props.lastUpdate ? /* @__PURE__ */ jsx(LastUpdate, { date: new Date(props.lastUpdate) }) : null,
-          replaceOrDefault(footer, /* @__PURE__ */ jsx(Footer, { items: footer.items })),
-          replaceOrDefault(
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: twMerge(
+            "sticky top-12 z-10 -mb-4 border-b bg-background/60 text-sm font-medium backdrop-blur-md md:top-0 md:bg-card",
+            !full && "lg:hidden"
+          ),
+          children: replaceOrDefault(
             tableOfContentPopover,
             /* @__PURE__ */ jsx(
-              SubToc,
+              TocPopover,
               {
                 items: toc,
                 header: tableOfContentPopover.header,
-                footer: tableOfContentPopover.footer
+                footer: tableOfContentPopover.footer,
+                className: "inline-flex items-center gap-2 px-4 py-2 text-left max-md:size-full md:ps-6 md:text-muted-foreground"
               }
             )
           )
-        ]
-      }
-    ),
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "article",
+        {
+          className: twMerge(
+            "mx-auto flex w-full max-w-[840px] flex-1 flex-col gap-6 px-4 pt-10 md:px-6 md:pt-12",
+            !tocOptions.enabled && "max-w-[1200px]"
+          ),
+          children: [
+            replaceOrDefault(breadcrumb, /* @__PURE__ */ jsx(Breadcrumb, { full: breadcrumb.full })),
+            props.children,
+            /* @__PURE__ */ jsx("div", { className: "mt-auto" }),
+            lastUpdate ? /* @__PURE__ */ jsx(LastUpdate, { date: new Date(lastUpdate) }) : null,
+            replaceOrDefault(footer, /* @__PURE__ */ jsx(Footer, { items: footer.items }))
+          ]
+        }
+      )
+    ] }),
     replaceOrDefault(
-      tableOfContent,
+      tocOptions,
       /* @__PURE__ */ jsx(
         Toc,
         {
           items: toc,
-          header: tableOfContent.header,
-          footer: tableOfContent.footer
+          header: tocOptions.header,
+          footer: tocOptions.footer
         }
       )
     )

package/dist/provider.d.ts

@@ -29,7 +29,7 @@ interface SearchProviderProps {
     /**
      * Hotkeys for triggering search dialog
      *
-     * @defaultValue K + Meta/Ctrl
+     * @defaultValue Meta/Ctrl + K
      */
     hotKey?: HotKey[];
     /**

package/dist/provider.js

@@ -10,7 +10,7 @@ import {
 import {
   SearchProvider,
   useSearchContext
-} from "./chunk-FSPYEOFC.js";
+} from "./chunk-ET4TW6M5.js";
 import {
   useI18n
 } from "./chunk-HLGNIWUN.js";