fumadocs-ui 13.2.2 → 13.3.1

package/dist/{chunk-KACGIS2N.js → chunk-J5B4GINE.js}

@@ -47,17 +47,14 @@ import { Moon, Sun } from "lucide-react";
 import { useTheme } from "next-themes";
 import { useCallback } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var buttonVariants = cva(
-  "size-7 rounded-full p-1.5 text-fd-muted-foreground",
-  {
-    variants: {
-      dark: {
-        true: "dark:bg-fd-accent dark:text-fd-accent-foreground",
-        false: "bg-fd-accent text-fd-accent-foreground dark:bg-transparent dark:text-fd-muted-foreground"
-      }
+var buttonVariants = cva("size-6 rounded-full p-1 text-fd-muted-foreground", {
+  variants: {
+    dark: {
+      true: "dark:bg-fd-accent dark:text-fd-accent-foreground",
+      false: "bg-fd-accent text-fd-accent-foreground dark:bg-transparent dark:text-fd-muted-foreground"
     }
   }
-);
+});
 function ThemeToggle({
   className,
   ...props

package/dist/chunk-P4HLRHHV.js

@@ -0,0 +1,36 @@
+// src/utils/use-toc-thumb.ts
+import { useLayoutEffect, useState } from "react";
+import * as Primitive from "fumadocs-core/toc";
+function useTocThumb(containerRef) {
+  const active = Primitive.useActiveAnchors();
+  const [pos, setPos] = useState([0, 0]);
+  useLayoutEffect(() => {
+    const container = containerRef.current;
+    if (active.length === 0 || !container || container.clientHeight === 0) {
+      setPos([0, 0]);
+      return;
+    }
+    let upper = Number.MAX_VALUE, lower = 0;
+    for (const item of active) {
+      const element = container.querySelector(
+        `a[href="#${item}"]`
+      );
+      if (!element) continue;
+      const styles = getComputedStyle(element);
+      upper = Math.min(
+        upper,
+        element.offsetTop + parseFloat(styles.paddingTop)
+      );
+      lower = Math.max(
+        lower,
+        element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom)
+      );
+    }
+    setPos([upper, lower - upper]);
+  }, [active, containerRef]);
+  return pos;
+}
+
+export {
+  useTocThumb
+};

package/dist/{chunk-GHPUKUK4.js → chunk-XGJGSJZ7.js}

@@ -86,7 +86,7 @@ function Sidebar({
           {
             ...props.bannerProps,
             className: twMerge(
-              "flex flex-col gap-2 px-4 pt-2 md:px-3 md:pt-4",
+              "flex flex-col gap-1 px-4 pt-2 md:px-3 md:pt-4",
               props.bannerProps?.className
             ),
             children: [
@@ -95,36 +95,36 @@ function Sidebar({
             ]
           }
         ) : null,
-        /* @__PURE__ */ jsx(ViewportContent, { children: items.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col md:hidden", children: items.map((item, i) => /* @__PURE__ */ jsx(LinkItem, { item, on: "menu" }, i)) }) }),
-        /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(ViewportContent, { items }),
+        props.footer ? /* @__PURE__ */ jsx(
           "div",
           {
             ...props.footerProps,
             className: twMerge(
-              "flex flex-row items-center border-t pb-2 pt-1 max-md:px-4 md:mx-3",
+              "flex flex-row items-center border-t py-1 max-md:px-4 md:mx-3",
               props.footerProps?.className
             ),
             children: props.footer
           }
-        )
+        ) : null
       ]
     }
   ) });
 }
 function ViewportContent({
-  children
+  items
 }) {
   const { root } = useTreeContext();
-  return /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxs(
     ScrollViewport,
     {
       style: {
-        maskImage: "linear-gradient(to bottom, transparent 2px, white 24px, white calc(100% - 24px), transparent calc(100% - 2px))"
+        maskImage: "linear-gradient(to bottom, transparent 2px, white 24px)"
       },
-      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-8 px-4 py-6 md:px-3", children: [
-        children,
-        /* @__PURE__ */ jsx(NodeList, { items: root.children })
-      ] })
+      children: [
+        items.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col px-4 pt-6 md:hidden", children: items.map((item, i) => /* @__PURE__ */ jsx(LinkItem, { item, on: "menu" }, i)) }) : null,
+        /* @__PURE__ */ jsx(NodeList, { items: root.children, className: "px-4 py-6 md:px-3" })
+      ]
     }
   ) });
 }

package/dist/components/accordion.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
+import * as react from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 
-declare const Accordions: React.ForwardRefExoticComponent<(Omit<AccordionPrimitive.AccordionSingleProps, "value" | "onValueChange"> | Omit<AccordionPrimitive.AccordionMultipleProps, "value" | "onValueChange">) & React.RefAttributes<HTMLDivElement>>;
-declare const Accordion: React.ForwardRefExoticComponent<Omit<Omit<AccordionPrimitive.AccordionItemProps & React.RefAttributes<HTMLDivElement>, "ref">, "value"> & {
+declare const Accordions: react.ForwardRefExoticComponent<(Omit<AccordionPrimitive.AccordionSingleProps, "value" | "onValueChange"> | Omit<AccordionPrimitive.AccordionMultipleProps, "value" | "onValueChange">) & react.RefAttributes<HTMLDivElement>>;
+declare const Accordion: react.ForwardRefExoticComponent<Omit<Omit<AccordionPrimitive.AccordionItemProps & react.RefAttributes<HTMLDivElement>, "ref">, "value"> & {
     title: string;
-} & React.RefAttributes<HTMLDivElement>>;
+} & react.RefAttributes<HTMLDivElement>>;
 
 export { Accordion, Accordions };

package/dist/components/callout.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
+import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-declare const Callout: React.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "type" | "icon"> & {
+declare const Callout: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "type" | "icon"> & {
     title?: ReactNode;
     /**
      * @defaultValue info
@@ -11,6 +11,6 @@ declare const Callout: React.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLD
      * Force an icon
      */
     icon?: ReactNode;
-} & React.RefAttributes<HTMLDivElement>>;
+} & react.RefAttributes<HTMLDivElement>>;
 
 export { Callout };

package/dist/components/codeblock.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as react from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
 type CodeBlockProps = HTMLAttributes<HTMLElement> & {
@@ -21,8 +21,8 @@ type CodeBlockProps = HTMLAttributes<HTMLElement> & {
      */
     keepBackground?: boolean;
 };
-declare const Pre: React.ForwardRefExoticComponent<HTMLAttributes<HTMLPreElement> & React.RefAttributes<HTMLPreElement>>;
-declare const CodeBlock: React.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+declare const Pre: react.ForwardRefExoticComponent<HTMLAttributes<HTMLPreElement> & react.RefAttributes<HTMLPreElement>>;
+declare const CodeBlock: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
     /**
      * Icon of code block
      *
@@ -41,6 +41,6 @@ declare const CodeBlock: React.ForwardRefExoticComponent<HTMLAttributes<HTMLElem
      * @defaultValue false
      */
     keepBackground?: boolean;
-} & React.RefAttributes<HTMLElement>>;
+} & react.RefAttributes<HTMLElement>>;
 
 export { CodeBlock, type CodeBlockProps, Pre };

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

@@ -33,7 +33,7 @@ function RootToggle({
     setOpen(false);
   }, [closeOnRedirect]);
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsxs(PopoverTrigger, { className: "-mx-2 flex flex-row items-center gap-2.5 rounded-lg p-2 hover:bg-fd-muted", children: [
+    /* @__PURE__ */ jsxs(PopoverTrigger, { className: "-mx-2 flex flex-row items-center gap-2.5 rounded-lg p-2 hover:bg-fd-accent/50 hover:text-fd-accent-foreground", children: [
       /* @__PURE__ */ jsx(Item, { ...selected }),
       /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-fd-muted-foreground md:me-1.5" })
     ] }),

package/dist/components/tabs.d.ts

@@ -1,11 +1,11 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import { TabsProps as TabsProps$1, TabsContentProps } from '@radix-ui/react-tabs';
-import * as React$1 from 'react';
+import * as react from 'react';
 
-declare const Tabs$1: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
-declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const Tabs$1: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const TabsList: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: react.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
 
 declare const tabs_TabsContent: typeof TabsContent;
 declare const tabs_TabsList: typeof TabsList;

package/dist/docs-layout.client.d.ts

@@ -8,5 +8,6 @@ import 'fumadocs-core/server';
 declare function ThemeToggle({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): React.ReactElement;
 
 declare function SubNav({ title, url, transparentMode, children, enableSearch, }: SharedNavProps): React.ReactElement;
+declare function SidebarCollapseTrigger(): React.ReactElement;
 
-export { SubNav, ThemeToggle };
+export { SidebarCollapseTrigger, SubNav, ThemeToggle };

package/dist/docs-layout.client.js

@@ -1,12 +1,12 @@
 "use client";
+import {
+  Sidebar
+} from "./chunk-XGJGSJZ7.js";
 import {
   NavBox,
   ThemeToggle,
   Title
-} from "./chunk-KACGIS2N.js";
-import {
-  Sidebar
-} from "./chunk-GHPUKUK4.js";
+} from "./chunk-J5B4GINE.js";
 import {
   LinksMenu,
   SearchToggle
@@ -35,7 +35,8 @@ import "./chunk-MLKGABMK.js";
 
 // src/docs-layout.client.tsx
 import { SidebarTrigger } from "fumadocs-core/sidebar";
-import { Menu, X } from "lucide-react";
+import { Menu, SidebarIcon, X } from "lucide-react";
+import { useCallback } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function SubNav({
   title,
@@ -73,9 +74,31 @@ function SubNav({
     }
   );
 }
+function SidebarCollapseTrigger() {
+  const { setCollapsed } = useSidebar();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Collapse Sidebar",
+      className: twMerge(
+        buttonVariants({
+          color: "ghost",
+          size: "icon",
+          className: "ms-auto max-md:hidden"
+        })
+      ),
+      onClick: useCallback(() => {
+        setCollapsed((prev) => !prev);
+      }, [setCollapsed]),
+      children: /* @__PURE__ */ jsx(SidebarIcon, {})
+    }
+  );
+}
 export {
   LinksMenu,
   Sidebar,
+  SidebarCollapseTrigger,
   SubNav,
   ThemeToggle,
   TreeContextProvider

package/dist/{dynamic-sidebar-C5OWT7N3.js → dynamic-sidebar-OIDT6SLW.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Sidebar
-} from "./chunk-GHPUKUK4.js";
+} from "./chunk-XGJGSJZ7.js";
 import "./chunk-EIPBQVOI.js";
 import "./chunk-LSTPTAZ5.js";
 import "./chunk-2FLZOPQN.js";
@@ -24,6 +24,7 @@ import "./chunk-MLKGABMK.js";
 // src/components/layout/dynamic-sidebar.tsx
 import { useCallback, useRef, useState } from "react";
 import { SidebarIcon } from "lucide-react";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function DynamicSidebar(props) {
   const { collapsed, setCollapsed } = useSidebar();
@@ -32,9 +33,11 @@ function DynamicSidebar(props) {
   const closeTimeRef = useRef(0);
   const onCollapse = useCallback(() => {
     setCollapsed((v) => !v);
+  }, [setCollapsed]);
+  useOnChange(collapsed, () => {
     setHover(false);
     closeTimeRef.current = Date.now() + 150;
-  }, [setCollapsed]);
+  });
   const onEnter = useCallback((e) => {
     if (e.pointerType === "touch" || closeTimeRef.current > Date.now()) return;
     window.clearTimeout(timerRef.current);
@@ -93,26 +96,7 @@ function DynamicSidebar(props) {
               hover ? "md:translate-x-1 rtl:md:-translate-x-1" : "md:translate-x-[calc(var(--fd-sidebar-width)*-1)] rtl:md:translate-x-[var(--fd-sidebar-width)]"
             ]
           )
-        },
-        footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-          props.footer,
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Collapse Sidebar",
-              className: twMerge(
-                buttonVariants({
-                  color: "ghost",
-                  size: "icon",
-                  className: "max-md:hidden"
-                })
-              ),
-              onClick: onCollapse,
-              children: /* @__PURE__ */ jsx(SidebarIcon, {})
-            }
-          )
-        ] })
+        }
       }
     )
   ] });

package/dist/home-layout.client.js

@@ -3,7 +3,7 @@ import {
   NavBox,
   ThemeToggle,
   Title
-} from "./chunk-KACGIS2N.js";
+} from "./chunk-J5B4GINE.js";
 import {
   LargeSearchToggle,
   LinkItem,

package/dist/i18n.js

@@ -25,6 +25,7 @@ function I18nProvider({
         segments[0] = v;
       }
       router.push(`/${segments.join("/")}`);
+      router.refresh();
     },
     [locale, segments, router]
   );

package/dist/layout.d.ts

@@ -20,6 +20,6 @@ interface DocsLayoutProps extends BaseLayoutProps {
      */
     i18n?: boolean;
 }
-declare function DocsLayout({ nav, githubUrl, sidebar: { enabled: sidebarEnabled, collapsible, component: sidebarReplace, ...sidebar }, containerProps, i18n, ...props }: DocsLayoutProps): React.ReactElement;
+declare function DocsLayout({ nav, githubUrl, sidebar: { enabled: sidebarEnabled, collapsible, component: sidebarReplace, ...sidebar }, containerProps, i18n, ...props }: DocsLayoutProps): React.ReactNode;
 
 export { DocsLayout, type DocsLayoutProps };

package/dist/layout.js

@@ -1,9 +1,10 @@
 import {
   TreeContextProvider,
+  SidebarCollapseTrigger,
+  ThemeToggle,
   SubNav,
   LinksMenu,
   Sidebar,
-  ThemeToggle,
 } from "./docs-layout.client"
 import {
   getLinks
@@ -23,6 +24,7 @@ import "./chunk-MLKGABMK.js";
 import Link from "next/link";
 import { MoreHorizontal } from "lucide-react";
 import dynamic from "next/dynamic";
+import { notFound } from "next/navigation";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var LanguageToggle = dynamic(
   () => import("./components/layout/language-toggle.js").then(
@@ -30,7 +32,7 @@ var LanguageToggle = dynamic(
   )
 );
 var DynamicSidebar = dynamic(
-  () => import("./dynamic-sidebar-C5OWT7N3.js").then(
+  () => import("./dynamic-sidebar-OIDT6SLW.js").then(
     (mod) => mod.DynamicSidebar
   )
 );
@@ -49,14 +51,16 @@ function DocsLayout({
 }) {
   const links = getLinks(props.links ?? [], githubUrl);
   const Aside = collapsible ? DynamicSidebar : Sidebar;
+  if (props.tree === void 0) notFound();
   const banner = [];
+  const footer = [];
   if (nav?.title)
     banner.push(
       /* @__PURE__ */ jsx(
         Link,
         {
           href: nav.url ?? "/",
-          className: "inline-flex items-center gap-2.5 font-medium",
+          className: "inline-flex items-center gap-2.5 py-1 font-medium",
           children: nav.title
         },
         "title"
@@ -80,6 +84,13 @@ function DocsLayout({
         "links"
       )
     );
+  footer.push(/* @__PURE__ */ jsx(ThemeToggle, {}, "theme"));
+  if (i18n) {
+    footer.push(/* @__PURE__ */ jsx(LanguageToggle, {}, "i18n"));
+  }
+  if (collapsible) {
+    footer.push(/* @__PURE__ */ jsx(SidebarCollapseTrigger, {}, "sidebar"));
+  }
   return /* @__PURE__ */ jsxs(TreeContextProvider, { tree: props.tree, children: [
     replaceOrDefault(nav, /* @__PURE__ */ jsx(SubNav, { ...nav })),
     /* @__PURE__ */ jsxs(
@@ -107,11 +118,10 @@ function DocsLayout({
                     sidebar.bannerProps?.className
                   )
                 },
-                footer: /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(ThemeToggle, { className: "me-auto" }),
-                  i18n ? /* @__PURE__ */ jsx(LanguageToggle, {}) : null,
-                  sidebar.footer
-                ] })
+                footer: footer.length > 0 || sidebar.footer ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  sidebar.footer,
+                  footer
+                ] }) : null
               }
             )
           ),

package/dist/mdx.d.ts

@@ -1,4 +1,4 @@
-import * as React$1 from 'react';
+import * as react from 'react';
 import { FC, HTMLAttributes, AnchorHTMLAttributes, ImgHTMLAttributes, TableHTMLAttributes } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Card, Cards } from './components/card.js';
@@ -19,11 +19,11 @@ declare const defaultMdxComponents: {
     h5: (props: React.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime.JSX.Element;
     h6: (props: React.HTMLAttributes<HTMLHeadingElement>) => react_jsx_runtime.JSX.Element;
     table: typeof Table;
-    Callout: React$1.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "type" | "icon"> & {
-        title?: React$1.ReactNode;
+    Callout: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "type" | "icon"> & {
+        title?: react.ReactNode;
         type?: "info" | "warn" | "error";
-        icon?: React$1.ReactNode;
-    } & React$1.RefAttributes<HTMLDivElement>>;
+        icon?: react.ReactNode;
+    } & react.RefAttributes<HTMLDivElement>>;
 };
 /**
  * **Server Component Only**

package/dist/page.client.d.ts

@@ -1,10 +1,8 @@
 import { TOCItemType } from 'fumadocs-core/server';
-import * as Primitive from 'fumadocs-core/toc';
 import { ReactNode, ReactElement } from 'react';
 import { BreadcrumbOptions } from 'fumadocs-core/breadcrumb';
 
 interface TOCProps {
-    items: TOCItemType[];
     /**
      * Custom content in TOC container, before the main TOC
      */
@@ -13,10 +11,16 @@ interface TOCProps {
      * Custom content in TOC container, after the main TOC
      */
     footer?: ReactNode;
+    children: ReactNode;
 }
-declare const TocProvider: typeof Primitive.AnchorProvider;
-declare function Toc({ items, header, footer }: TOCProps): ReactElement;
-declare function TocPopover({ items, header, footer }: TOCProps): ReactElement;
+declare function Toc({ header, footer, children }: TOCProps): ReactElement;
+declare function TocPopover({ header, footer, items, children, }: TOCProps & {
+    items: TOCItemType[];
+}): ReactElement;
+declare function TOCItems({ items, isMenu, }: {
+    items: TOCItemType[];
+    isMenu?: boolean;
+}): React.ReactElement;
 
 interface BreadcrumbProps extends Omit<BreadcrumbOptions, 'includePage'> {
     /**
@@ -26,7 +30,7 @@ interface BreadcrumbProps extends Omit<BreadcrumbOptions, 'includePage'> {
      */
     full?: boolean;
 }
-declare function Breadcrumb({ full, ...options }: BreadcrumbProps): React.ReactElement;
+declare function Breadcrumb({ full, ...options }: BreadcrumbProps): React.ReactNode;
 
 declare function LastUpdate(props: {
     date: Date;
@@ -48,4 +52,4 @@ interface FooterProps {
 }
 declare function Footer({ items }: FooterProps): React.ReactElement;
 
-export { Breadcrumb, type BreadcrumbProps, Footer, type FooterProps, LastUpdate, type TOCProps, Toc, TocPopover, TocProvider };
+export { Breadcrumb, type BreadcrumbProps, Footer, type FooterProps, LastUpdate, TOCItems, type TOCProps, Toc, TocPopover };