fumadocs-ui 11.3.1 → 12.0.0

package/dist/layout.js

@@ -1,75 +1,89 @@
 import {
-  Nav,
+  LanguageToggle,
+} from "./components/layout/language-toggle"
+import {
   TreeContextProvider,
   DynamicSidebar,
+  SubNav,
   Sidebar,
-} from "./layout.client.js"
+  ThemeToggle,
+} from "./docs.client"
+import { Nav } from "./layout.client"
 import {
   replaceOrDefault
-} from "./chunk-7F2LGCS6.js";
+} from "./chunk-AN2Y6MA2.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
-import "./chunk-6C3VEZWH.js";
+import "./chunk-MLKGABMK.js";
 
 // src/layout.tsx
+import Link from "next/link";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function Layout({
   nav = {},
   links = [],
+  githubUrl,
   children
 }) {
-  const finalLinks = getLinks(links, nav.githubUrl);
+  const finalLinks = getLinks(links, githubUrl);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     replaceOrDefault(
       nav,
-      /* @__PURE__ */ jsx(Nav, { items: finalLinks, enableSidebar: false, ...nav, children: nav.children })
+      /* @__PURE__ */ jsx(Nav, { items: finalLinks, ...nav, children: nav.children })
     ),
     children
   ] });
 }
 function DocsLayout({
-  nav = {},
+  nav,
+  githubUrl,
   sidebar = {},
   links = [],
   containerProps,
   tree,
+  i18n = false,
   children
 }) {
   const sidebarEnabled = sidebar.enabled ?? true;
   const sidebarCollapsible = sidebarEnabled && (sidebar.collapsible ?? true);
-  const finalLinks = getLinks(links, nav.githubUrl);
+  const finalLinks = getLinks(links, githubUrl);
+  const Aside = sidebarCollapsible ? DynamicSidebar : Sidebar;
   return /* @__PURE__ */ jsxs(TreeContextProvider, { tree, children: [
-    replaceOrDefault(
-      nav,
-      /* @__PURE__ */ jsx(Nav, { items: finalLinks, enableSidebar: sidebarEnabled, ...nav, children: nav.children })
-    ),
+    replaceOrDefault(nav, /* @__PURE__ */ jsx(SubNav, { ...nav })),
     /* @__PURE__ */ jsxs(
       "div",
       {
         ...containerProps,
-        className: twMerge(
-          "mx-auto flex w-full max-w-container flex-row gap-2 xl:gap-6",
-          containerProps?.className
-        ),
+        className: twMerge("flex flex-1 flex-row", containerProps?.className),
         children: [
           replaceOrDefault(
             sidebar,
-            sidebarCollapsible ? /* @__PURE__ */ jsx(
-              DynamicSidebar,
-              {
-                items: finalLinks,
-                defaultOpenLevel: sidebar.defaultOpenLevel,
-                banner: sidebar.banner,
-                footer: sidebar.footer
-              }
-            ) : /* @__PURE__ */ jsx(
-              Sidebar,
+            /* @__PURE__ */ jsx(
+              Aside,
               {
                 items: finalLinks,
                 defaultOpenLevel: sidebar.defaultOpenLevel,
-                banner: sidebar.banner,
-                footer: sidebar.footer
+                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
+                    }
+                  ),
+                  sidebar.banner
+                ] }),
+                bannerProps: {
+                  className: twMerge(!sidebar.banner && "max-md:hidden")
+                },
+                footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx(ThemeToggle, { className: "me-auto" }),
+                  sidebar.footer,
+                  i18n ? /* @__PURE__ */ jsx(LanguageToggle, {}) : null
+                ] }),
+                components: sidebar.components
               }
             )
           ),

package/dist/mdx.client.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";
 
 // src/mdx.client.tsx
 import { jsx } from "react/jsx-runtime";

package/dist/mdx.js

@@ -1,16 +1,16 @@
-import { Pre } from "./mdx.client.js"
+import { Pre } from "./mdx.client"
 import {
   defaultImageSizes
-} from "./chunk-7F2LGCS6.js";
+} from "./chunk-AN2Y6MA2.js";
 import {
   Card,
   Cards
 } from "./chunk-N3HFQZRE.js";
 import {
   Heading
-} from "./chunk-UKE65HV3.js";
+} from "./chunk-IOHAG6BY.js";
 import "./chunk-TK3TM3MR.js";
-import "./chunk-6C3VEZWH.js";
+import "./chunk-MLKGABMK.js";
 
 // src/mdx.tsx
 import Link from "fumadocs-core/link";

package/dist/page.client.js

@@ -1,19 +1,19 @@
 "use client";
 import {
   useTreeContext
-} from "./chunk-C4PI62MH.js";
+} from "./chunk-34Z7WODD.js";
 import {
   ScrollArea,
   ScrollViewport
 } from "./chunk-VYTHQTZE.js";
-import "./chunk-7F2LGCS6.js";
+import "./chunk-AN2Y6MA2.js";
 import {
   useI18n
-} from "./chunk-PW7TBOIJ.js";
+} from "./chunk-CRYPD6UZ.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
-import "./chunk-6C3VEZWH.js";
+import "./chunk-MLKGABMK.js";
 
 // src/page.client.tsx
 import { useEffect as useEffect2, useMemo, useState } from "react";
@@ -21,7 +21,7 @@ import { ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
 import Link2 from "next/link";
 import { usePathname as usePathname2 } from "next/navigation";
 
-// src/components/toc.tsx
+// src/components/layout/toc.tsx
 import { TextIcon } from "lucide-react";
 import * as Primitive from "fumadocs-core/toc";
 import { useCallback, useEffect, useRef } from "react";
@@ -34,8 +34,7 @@ function TOCItems({
   const markerRef = useRef(null);
   const setPos = useCallback(([top, height]) => {
     const element = markerRef.current;
-    if (!element)
-      return;
+    if (!element) return;
     element.style.setProperty("top", `${top.toString()}px`);
     element.style.setProperty("height", `${height.toString()}px`);
     element.style.setProperty("display", "block");
@@ -144,7 +143,7 @@ function Footer({ items }) {
     };
   }, [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-4 flex flex-row flex-wrap gap-1 border-t py-4", children: [
+  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: [
         /* @__PURE__ */ jsx3(ChevronLeft, { className: "-ms-1 size-4 shrink-0 rtl:rotate-180" }),

package/dist/page.js

@@ -3,14 +3,14 @@ import {
   Breadcrumb,
   Footer,
   LastUpdate,
-} from "./page.client.js"
+} from "./page.client"
 import {
   replaceOrDefault
-} from "./chunk-7F2LGCS6.js";
+} from "./chunk-AN2Y6MA2.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
-import "./chunk-6C3VEZWH.js";
+import "./chunk-MLKGABMK.js";
 
 // src/page.tsx
 import { forwardRef } from "react";
@@ -22,12 +22,21 @@ function DocsPage({
   ...props
 }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("article", { className: "flex w-0 flex-1 flex-col gap-6 px-4 py-10", 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 }))
-    ] }),
+    /* @__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",
+          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(
       tableOfContent,
       /* @__PURE__ */ jsx(
@@ -42,7 +51,7 @@ function DocsPage({
   ] });
 }
 function Toc(props) {
-  return /* @__PURE__ */ jsxs("div", { className: "sticky top-16 flex h-body w-[220px] flex-col gap-4 divide-y py-10 max-lg:hidden xl:w-[260px]", children: [
+  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

package/dist/provider.d.ts

@@ -1,9 +1,10 @@
-import { ReactNode } from 'react';
+import * as React$1 from 'react';
+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-p5QWhj_3.js';
-export { u as useTreeContext } from './tree-cqNEopxM.js';
+export { u as useI18n } from './i18n-CE8z-AAs.js';
+export { u as useTreeContext } from './tree-CrKzI9Nz.js';
 import 'fumadocs-core/search/shared';
 import 'fumadocs-core/server';
 
@@ -50,13 +51,18 @@ interface SearchContextType {
 }
 declare function useSearchContext(): SearchContextType;
 
-interface SidebarCollapseContext {
+interface SidebarContext {
     open: boolean;
     setOpen: (v: boolean) => void;
     collapsed: boolean;
     setCollapsed: (v: boolean) => void;
+    /**
+     * When set to true, close the sidebar on redirection
+     */
+    closeOnRedirect: MutableRefObject<boolean>;
 }
-declare function useSidebar(): SidebarCollapseContext;
+declare const SidebarContext: React$1.Context<SidebarContext | undefined>;
+declare function useSidebar(): SidebarContext;
 
 interface SearchOptions extends Omit<SearchProviderProps, 'options' | 'children'> {
     options?: Partial<DefaultSearchDialogProps> | SearchProviderProps['options'];
@@ -76,13 +82,6 @@ interface RootProviderProps {
      * @remarks `SearchProviderProps`
      */
     search?: Partial<SearchOptions>;
-    /**
-     * Wrap the body in `ThemeProvider` (next-themes)
-     *
-     * @defaultValue true
-     * @deprecated Use `theme.enable` instead
-     */
-    enableThemeProvider?: boolean;
     /**
      * Customise options of `next-themes`
      */
@@ -96,6 +95,6 @@ interface RootProviderProps {
     };
     children: ReactNode;
 }
-declare function RootProvider({ children, dir, enableThemeProvider, theme: { enabled, ...theme }, search, }: RootProviderProps): React.ReactElement;
+declare function RootProvider({ children, dir, theme: { enabled, ...theme }, search, }: RootProviderProps): React.ReactElement;
 
 export { RootProvider, type RootProviderProps, useSearchContext, useSidebar };

package/dist/provider.js

@@ -1,20 +1,20 @@
 "use client";
+import {
+  useTreeContext
+} from "./chunk-34Z7WODD.js";
+import "./chunk-AN2Y6MA2.js";
 import {
   SidebarProvider,
   useSidebar
-} from "./chunk-GDRBCN6Q.js";
-import {
-  useTreeContext
-} from "./chunk-C4PI62MH.js";
-import "./chunk-7F2LGCS6.js";
+} from "./chunk-3F57TIUQ.js";
 import {
   SearchProvider,
   useSearchContext
 } from "./chunk-FSPYEOFC.js";
 import {
   useI18n
-} from "./chunk-PW7TBOIJ.js";
-import "./chunk-6C3VEZWH.js";
+} from "./chunk-CRYPD6UZ.js";
+import "./chunk-MLKGABMK.js";
 
 // src/provider.tsx
 import { ThemeProvider } from "next-themes";
@@ -28,14 +28,13 @@ var DefaultSearchDialog = dynamic(
 function RootProvider({
   children,
   dir,
-  enableThemeProvider = true,
   theme: { enabled = true, ...theme } = {},
   search
 }) {
-  let body = /* @__PURE__ */ jsx(DirectionProvider, { dir: dir ?? "ltr", children: /* @__PURE__ */ jsx(SidebarProvider, { children }) });
+  let body = children;
   if (search?.enabled !== false)
     body = /* @__PURE__ */ jsx(SearchProvider, { SearchDialog: DefaultSearchDialog, ...search, children: body });
-  if (enabled && enableThemeProvider)
+  if (enabled)
     body = /* @__PURE__ */ jsx(
       ThemeProvider,
       {
@@ -47,7 +46,7 @@ function RootProvider({
         children: body
       }
     );
-  return body;
+  return /* @__PURE__ */ jsx(DirectionProvider, { dir: dir ?? "ltr", children: /* @__PURE__ */ jsx(SidebarProvider, { children: body }) });
 }
 export {
   RootProvider,