fumadocs-ui 11.3.2 → 12.0.1

package/dist/layout.js

@@ -1,9 +1,15 @@
 import {
-  Nav,
+  LanguageToggle,
+} from "./components/layout/language-toggle"
+import {
   TreeContextProvider,
   DynamicSidebar,
+  SubNav,
+  LinksMenu,
   Sidebar,
-} from "./layout.client.js"
+  ThemeToggle,
+} from "./docs.client"
+import { Nav } from "./layout.client"
 import {
   replaceOrDefault
 } from "./chunk-AN2Y6MA2.js";
@@ -13,63 +19,76 @@ import {
 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 = {},
   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__ */ 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: {
+                  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,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

@@ -1,4 +1,4 @@
-import { Pre } from "./mdx.client.js"
+import { Pre } from "./mdx.client"
 import {
   defaultImageSizes
 } from "./chunk-AN2Y6MA2.js";
@@ -8,7 +8,7 @@ import {
 } from "./chunk-N3HFQZRE.js";
 import {
   Heading
-} from "./chunk-UKE65HV3.js";
+} from "./chunk-5CZEA2KX.js";
 import "./chunk-TK3TM3MR.js";
 import "./chunk-MLKGABMK.js";
 

package/dist/page.client.js

@@ -1,15 +1,15 @@
 "use client";
-import {
-  useTreeContext
-} from "./chunk-TDTHXDET.js";
 import {
   ScrollArea,
   ScrollViewport
 } from "./chunk-VYTHQTZE.js";
+import {
+  useTreeContext
+} from "./chunk-34Z7WODD.js";
 import "./chunk-AN2Y6MA2.js";
 import {
   useI18n
-} from "./chunk-PW7TBOIJ.js";
+} from "./chunk-CRYPD6UZ.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
@@ -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";
@@ -82,7 +82,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";
@@ -143,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,7 +3,7 @@ import {
   Breadcrumb,
   Footer,
   LastUpdate,
-} from "./page.client.js"
+} from "./page.client"
 import {
   replaceOrDefault
 } from "./chunk-AN2Y6MA2.js";
@@ -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-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(
       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 pt-12 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,8 +1,9 @@
-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-K879Pt9h.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,19 +1,19 @@
 "use client";
-import {
-  SidebarProvider,
-  useSidebar
-} from "./chunk-IN5NHEZV.js";
 import {
   useTreeContext
-} from "./chunk-TDTHXDET.js";
+} from "./chunk-34Z7WODD.js";
 import "./chunk-AN2Y6MA2.js";
+import {
+  SidebarProvider,
+  useSidebar
+} from "./chunk-3F57TIUQ.js";
 import {
   SearchProvider,
   useSearchContext
 } from "./chunk-FSPYEOFC.js";
 import {
   useI18n
-} from "./chunk-PW7TBOIJ.js";
+} from "./chunk-CRYPD6UZ.js";
 import "./chunk-MLKGABMK.js";
 
 // src/provider.tsx
@@ -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,