fumadocs-ui 13.4.10 → 14.0.1

package/dist/page.client.js

@@ -1,71 +1,103 @@
 "use client";
 import {
-  useTocThumb
-} from "./chunk-P4HLRHHV.js";
+  TocThumb
+} from "./chunk-DN6Z5VW6.js";
 import {
-  useTreeContext
-} from "./chunk-LSTPTAZ5.js";
-import {
-  ScrollArea,
-  ScrollViewport
-} from "./chunk-2FLZOPQN.js";
+  NavContext
+} from "./chunk-MCX7E6ZW.js";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "./chunk-CP67AHDD.js";
-import "./chunk-UOD2T27N.js";
+} from "./chunk-IVBHRX3O.js";
 import {
-  useI18n
-} from "./chunk-EFMHXXHW.js";
+  ScrollArea,
+  ScrollViewport
+} from "./chunk-2FLZOPQN.js";
+import {
+  ChevronLeft,
+  ChevronRight,
+  Text
+} from "./chunk-5QPVK7QM.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
+import {
+  useTreeContext
+} from "./chunk-YL3MZH7N.js";
+import {
+  useSidebar
+} from "./chunk-27HFSL7N.js";
+import {
+  useI18n
+} from "./chunk-EFMHXXHW.js";
 import "./chunk-MLKGABMK.js";
 
 // src/page.client.tsx
-import { useEffect, useMemo as useMemo2, useState } from "react";
-import { ChevronLeft, ChevronRight as ChevronRight3 } from "lucide-react";
+import { useEffect, useMemo as useMemo3, useState } from "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 { ChevronRight, Text } from "lucide-react";
 import * as Primitive from "fumadocs-core/toc";
-import { useMemo, useRef } from "react";
+import {
+  useContext,
+  useMemo,
+  useRef
+} from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function Toc({ header, footer, children }) {
   const { text } = useI18n();
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       "data-toc": "",
-      className: "sticky top-0 flex h-dvh w-[var(--fd-c-toc)] min-w-[var(--fd-toc-width)] flex-col gap-4 pe-[max(calc(var(--fd-c-toc)-var(--fd-toc-width)),0.75rem)] pt-12 max-lg:hidden",
-      children: [
+      className: "sticky top-fd-layout-top h-[var(--fd-toc-height)] flex-1 pb-2 pt-12 max-lg:hidden",
+      style: {
+        "--fd-toc-height": "calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))"
+      },
+      children: /* @__PURE__ */ jsxs("div", { className: "flex h-full w-[var(--fd-toc-width)] flex-col gap-3 pe-2", children: [
         header,
-        /* @__PURE__ */ jsxs("h3", { className: "-mb-1 -ms-0.5 inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground", children: [
+        /* @__PURE__ */ jsxs("h3", { className: "-ms-0.5 inline-flex items-center gap-1.5 text-sm text-fd-muted-foreground", children: [
           /* @__PURE__ */ jsx(Text, { className: "size-4" }),
           text.toc
         ] }),
         children,
         footer
-      ]
+      ] })
+    }
+  );
+}
+function TocNav(props) {
+  const { open } = useSidebar();
+  const { isTransparent } = useContext(NavContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id: "nd-tocnav",
+      className: twMerge(
+        "sticky top-fd-layout-top z-10 border-b border-fd-foreground/10 text-sm transition-colors md:top-[var(--fd-toc-top-with-offset)] md:mx-3 md:rounded-full md:border",
+        !isTransparent && "bg-fd-background/80 backdrop-blur-md md:shadow-md",
+        open && "opacity-0",
+        props.className
+      ),
+      style: {
+        "--fd-toc-top-with-offset": "calc(4px + var(--fd-banner-height) + var(--fd-nav-height))"
+      },
+      children: props.children
     }
   );
 }
 function TocPopover({
-  header,
-  footer,
   items,
-  children
+  ...props
 }) {
   const { text } = useI18n();
   const active = Primitive.useActiveAnchor();
   const current = useMemo(() => {
     return items.find((item) => active === item.url.slice(1))?.title;
   }, [items, active]);
-  return /* @__PURE__ */ jsxs(Popover, { children: [
+  return /* @__PURE__ */ jsx(TocNav, { ...props, children: /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsxs(PopoverTrigger, { className: "inline-flex size-full items-center gap-2 text-nowrap px-4 py-2 text-left md:px-3", children: [
       /* @__PURE__ */ jsx(Text, { className: "size-4 shrink-0" }),
       text.toc,
@@ -84,13 +116,13 @@ function TocPopover({
         className: "flex max-h-[var(--radix-popover-content-available-height)] w-[260px] flex-col gap-4 p-3",
         "data-toc-popover": "",
         children: [
-          header,
-          children,
-          footer
+          props.header,
+          props.children,
+          props.footer
         ]
       }
     )
-  ] });
+  ] }) });
 }
 function TOCItems({
   items,
@@ -98,32 +130,29 @@ function TOCItems({
 }) {
   const { text } = useI18n();
   const containerRef = useRef(null);
-  const pos = useTocThumb(containerRef);
+  const viewRef = useRef(null);
   if (items.length === 0)
     return /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings });
-  return /* @__PURE__ */ jsx(ScrollArea, { className: twMerge("flex flex-col", isMenu && "-ms-3"), children: /* @__PURE__ */ jsxs(ScrollViewport, { className: "relative min-h-0 text-sm", ref: containerRef, children: [
+  return /* @__PURE__ */ jsx(ScrollArea, { className: twMerge("flex flex-col", isMenu && "-ms-3"), children: /* @__PURE__ */ jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: /* @__PURE__ */ jsxs(ScrollViewport, { className: "relative min-h-0 text-sm", ref: viewRef, children: [
     /* @__PURE__ */ jsx(
-      "div",
+      TocThumb,
       {
-        role: "none",
-        className: "absolute start-0 w-px bg-fd-primary transition-all",
-        style: {
-          top: pos[0],
-          height: pos[1]
-        }
+        containerRef,
+        className: "absolute start-0 mt-[var(--fd-top)] h-[var(--fd-height)] w-px bg-fd-primary transition-all"
       }
     ),
-    /* @__PURE__ */ jsx(Primitive.ScrollProvider, { containerRef, children: /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(
       "div",
       {
+        ref: containerRef,
         className: twMerge(
-          "flex flex-col text-fd-muted-foreground",
+          "flex flex-col",
           !isMenu && "border-s border-fd-foreground/10"
         ),
         children: items.map((item) => /* @__PURE__ */ jsx(TOCItem2, { item }, item.url))
       }
-    ) })
-  ] }) });
+    )
+  ] }) }) });
 }
 function TOCItem2({ item }) {
   return /* @__PURE__ */ jsx(
@@ -131,7 +160,7 @@ function TOCItem2({ item }) {
     {
       href: item.url,
       className: twMerge(
-        "py-1.5 transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary",
+        "prose py-1.5 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary",
         item.depth <= 2 && "ps-3.5",
         item.depth === 3 && "ps-6",
         item.depth >= 4 && "ps-8"
@@ -142,27 +171,26 @@ function TOCItem2({ item }) {
 }
 
 // src/components/layout/breadcrumb.tsx
-import { ChevronRight as ChevronRight2 } from "lucide-react";
 import {
-  useBreadcrumb
+  getBreadcrumbItemsFromPath
 } from "fumadocs-core/breadcrumb";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
-import { Fragment as Fragment2 } from "react";
+import { Fragment as Fragment2, useMemo as useMemo2 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function Breadcrumb({
   full = false,
   ...options
 }) {
-  const { root } = useTreeContext();
-  const pathname = usePathname();
-  const items = useBreadcrumb(pathname, root, {
-    includePage: full,
-    ...options
-  });
+  const { path, root } = useTreeContext();
+  const items = useMemo2(() => {
+    return getBreadcrumbItemsFromPath(root, path, {
+      includePage: full,
+      ...options
+    });
+  }, [full, options, path, root]);
   if (items.length === 0) return null;
   return /* @__PURE__ */ jsx2("div", { className: "-mb-3 flex flex-row items-center gap-1 text-sm font-medium text-fd-muted-foreground", children: items.map((item, i) => /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    i !== 0 && /* @__PURE__ */ jsx2(ChevronRight2, { className: "size-4 shrink-0 rtl:rotate-180" }),
+    i !== 0 && /* @__PURE__ */ jsx2(ChevronRight, { className: "size-4 shrink-0 rtl:rotate-180" }),
     item.url ? /* @__PURE__ */ jsx2(
       Link,
       {
@@ -182,7 +210,7 @@ function LastUpdate(props) {
   useEffect(() => {
     setDate(props.date.toLocaleDateString());
   }, [props.date]);
-  return /* @__PURE__ */ jsxs3("p", { className: "text-xs text-fd-muted-foreground", children: [
+  return /* @__PURE__ */ jsxs3("p", { className: "text-sm text-fd-muted-foreground", children: [
     text.lastUpdate,
     " ",
     date
@@ -196,15 +224,15 @@ var itemLabel = cva(
 );
 function Footer({ items }) {
   const tree = useTreeContext();
-  const pathname = usePathname2();
   const { text } = useI18n();
-  const { previous = items?.previous, next = items?.next } = useMemo2(() => {
-    const idx = tree.navigation.findIndex((item) => item.url === pathname);
+  const { previous, next } = useMemo3(() => {
+    if (items) return items;
+    const neighbours = tree.getNeighbours();
     return {
-      previous: tree.navigation[idx - 1],
-      next: tree.navigation[idx + 1]
+      previous: neighbours[0],
+      next: neighbours[1]
     };
-  }, [pathname, tree.navigation]);
+  }, [items, tree]);
   return /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-2 gap-4 pb-6", children: [
     previous ? /* @__PURE__ */ jsxs3(Link2, { href: previous.url, className: twMerge(itemVariants()), children: [
       /* @__PURE__ */ jsxs3("div", { className: twMerge(itemLabel()), children: [
@@ -220,7 +248,7 @@ function Footer({ items }) {
         className: twMerge(itemVariants({ className: "col-start-2 text-end" })),
         children: [
           /* @__PURE__ */ jsxs3("div", { className: twMerge(itemLabel({ className: "flex-row-reverse" })), children: [
-            /* @__PURE__ */ jsx3(ChevronRight3, { className: "-me-1 size-4 shrink-0 rtl:rotate-180" }),
+            /* @__PURE__ */ jsx3(ChevronRight, { 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 })

package/dist/page.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import { AnchorHTMLAttributes, ReactNode, HTMLAttributes } from 'react';
-import { TableOfContents } from 'fumadocs-core/server';
-import { Page } from 'fumadocs-core/source';
+import { TableOfContents, PageTree } from 'fumadocs-core/server';
+import { Page, LoaderOutput, LoaderConfig } from 'fumadocs-core/source';
 import { AnchorProviderProps } from 'fumadocs-core/toc';
 import { TOCProps, BreadcrumbProps, FooterProps } from './page.client.js';
 import 'fumadocs-core/breadcrumb';
@@ -60,17 +60,18 @@ interface DocsPageProps {
     lastUpdate?: Date | string | number;
     children: ReactNode;
 }
-declare function DocsPage({ toc, breadcrumb, full, footer, ...props }: DocsPageProps): React.ReactElement;
+declare function DocsPage({ toc, breadcrumb, full, footer, tableOfContentPopover: { enabled: tocPopoverEnabled, component: tocPopoverReplace, ...tocPopoverOptions }, tableOfContent: { enabled: tocEnabled, component: tocReplace, ...tocOptions }, ...props }: DocsPageProps): React.ReactElement;
 /**
  * Add typography styles
  */
 declare const DocsBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
 declare const DocsDescription: react.ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & react.RefAttributes<HTMLParagraphElement>>;
 declare const DocsTitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & react.RefAttributes<HTMLHeadingElement>>;
-declare function DocsCategory({ page, pages, ...props }: HTMLAttributes<HTMLDivElement> & {
+declare function DocsCategory({ page, from, tree: forcedTree, ...props }: HTMLAttributes<HTMLDivElement> & {
     page: Page;
-    pages: Page[];
-}): React.ReactElement;
+    from: LoaderOutput<LoaderConfig>;
+    tree?: PageTree.Root;
+}): React.ReactNode;
 /**
  * For separate MDX page
  */

package/dist/page.js

@@ -8,11 +8,11 @@ import {
 } from "./page.client"
 import {
   replaceOrDefault
-} from "./chunk-UOD2T27N.js";
+} from "./chunk-E3VO2QQT.js";
 import {
   Card,
   Cards
-} from "./chunk-WLTWFYQA.js";
+} from "./chunk-GHOAONNQ.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
@@ -22,81 +22,78 @@ import "./chunk-MLKGABMK.js";
 import { forwardRef } from "react";
 import dynamic from "next/dynamic";
 import { AnchorProvider } from "fumadocs-core/toc";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var ClerkTOCItems = dynamic(() => import("./toc-clerk-CAID2WGC.js"));
+import { jsx, jsxs } from "react/jsx-runtime";
+var ClerkTOCItems = dynamic(() => import("./toc-clerk-SKE4LBT7.js"));
 var EditOnGitHub = dynamic(
-  () => import("./edit-on-github-YFVYCMB7.js")
+  () => import("./edit-on-github-PCTRDRD6.js")
 );
 function DocsPage({
   toc = [],
   breadcrumb = {},
   full = false,
   footer = {},
+  tableOfContentPopover: {
+    enabled: tocPopoverEnabled = true,
+    component: tocPopoverReplace,
+    ...tocPopoverOptions
+  } = {},
+  tableOfContent: {
+    // disable TOC on full mode, you can still enable it with `enabled` option.
+    enabled: tocEnabled = !full,
+    component: tocReplace,
+    ...tocOptions
+  } = {},
   ...props
 }) {
-  const tocPopoverOptions = {
-    ...props.tableOfContentPopover
-  };
-  const tocOptions = {
-    // disable TOC on full mode, you can still enable it with `enabled` option.
-    enabled: props.tableOfContent?.enabled ?? !full,
-    ...props.tableOfContent
-  };
-  if (props.editOnGithub) {
-    tocOptions.footer = /* @__PURE__ */ jsxs(Fragment, { children: [
-      tocOptions.footer,
-      /* @__PURE__ */ jsx(EditOnGitHub, { ...props.editOnGithub })
-    ] });
-    tocPopoverOptions.footer = /* @__PURE__ */ jsxs(Fragment, { children: [
-      tocPopoverOptions.footer,
-      /* @__PURE__ */ jsx(EditOnGitHub, { ...props.editOnGithub })
-    ] });
-  }
   return /* @__PURE__ */ jsxs(AnchorProvider, { toc, single: tocOptions.single, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: twMerge(
-          "mx-auto flex min-w-0 max-w-[860px] flex-1 flex-col",
-          !tocOptions.enabled && // ensure it's still centered when toc is hidden
-          "max-w-[1200px] md:ms-[max(0px,calc(50vw-min(50%,600px)-var(--fd-c-sidebar)))]"
-        ),
+        id: "nd-page",
+        className: "flex w-full min-w-0 max-w-[var(--fd-page-width)] flex-col md:transition-[max-width]",
+        style: {
+          "--fd-page-width": "calc(min(100vw, var(--fd-layout-width)) - var(--fd-sidebar-width) - var(--fd-toc-width))",
+          "--fd-toc-width": tocEnabled ? void 0 : "0px"
+        },
         children: [
           replaceOrDefault(
-            tocPopoverOptions,
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                id: "nd-tocnav",
-                className: twMerge(
-                  "sticky top-14 z-10 border-b bg-fd-background/60 text-sm backdrop-blur-md md:top-1 md:mx-3 md:rounded-full md:border md:shadow-md",
-                  tocPopoverOptions.enabled !== true && "lg:hidden"
-                ),
-                children: /* @__PURE__ */ jsx(
-                  TocPopover,
-                  {
-                    items: toc,
-                    header: tocPopoverOptions.header,
-                    footer: tocPopoverOptions.footer,
-                    children: tocPopoverOptions.style === "clerk" ? /* @__PURE__ */ jsx(ClerkTOCItems, { items: toc, isMenu: true }) : /* @__PURE__ */ jsx(TOCItems, { items: toc, isMenu: true })
-                  }
-                )
-              }
-            )
+            { enabled: tocPopoverEnabled, component: tocPopoverReplace },
+            /* @__PURE__ */ jsx(TocPopover, { items: toc, ...tocPopoverOptions, className: "lg:hidden", children: tocPopoverOptions.style === "clerk" ? /* @__PURE__ */ jsx(ClerkTOCItems, { items: toc, isMenu: true }) : /* @__PURE__ */ jsx(TOCItems, { items: toc, isMenu: true }) }),
+            {
+              items: toc,
+              ...tocPopoverOptions
+            }
           ),
-          /* @__PURE__ */ jsxs("article", { className: "flex flex-1 flex-col gap-6 px-4 pt-10 md:px-6 md:pt-12", children: [
-            replaceOrDefault(breadcrumb, /* @__PURE__ */ jsx(Breadcrumb, { ...breadcrumb })),
-            props.children,
-            /* @__PURE__ */ jsx("div", { className: "mt-auto" }),
-            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-full flex-1 flex-col gap-6 px-4 pt-10 md:px-6 md:pt-12",
+                tocEnabled ? "max-w-[860px]" : "max-w-[1120px]"
+              ),
+              children: [
+                replaceOrDefault(breadcrumb, /* @__PURE__ */ jsx(Breadcrumb, { ...breadcrumb })),
+                props.children,
+                /* @__PURE__ */ jsx("div", { role: "none", className: "flex-1" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-row flex-wrap items-center justify-between gap-4 empty:hidden", children: [
+                  props.editOnGithub ? /* @__PURE__ */ jsx(EditOnGitHub, { ...props.editOnGithub }) : null,
+                  props.lastUpdate ? /* @__PURE__ */ jsx(LastUpdate, { date: new Date(props.lastUpdate) }) : null
+                ] }),
+                replaceOrDefault(footer, /* @__PURE__ */ jsx(Footer, { items: footer.items }))
+              ]
+            }
+          )
         ]
       }
     ),
     replaceOrDefault(
-      tocOptions,
-      /* @__PURE__ */ jsx(Toc, { header: tocOptions.header, footer: tocOptions.footer, children: tocOptions.style === "clerk" ? /* @__PURE__ */ jsx(ClerkTOCItems, { items: toc }) : /* @__PURE__ */ jsx(TOCItems, { items: toc }) })
+      { enabled: tocEnabled, component: tocReplace },
+      /* @__PURE__ */ jsx(Toc, { ...tocOptions, children: tocOptions.style === "clerk" ? /* @__PURE__ */ jsx(ClerkTOCItems, { items: toc }) : /* @__PURE__ */ jsx(TOCItems, { items: toc }) }),
+      {
+        items: toc,
+        ...tocOptions
+      },
+      /* @__PURE__ */ jsx("div", { role: "none", className: "flex-1" })
     )
   ] });
 }
@@ -127,15 +124,34 @@ var DocsTitle = forwardRef((props, ref) => {
   );
 });
 DocsTitle.displayName = "DocsTitle";
+function findParent(node, page) {
+  if ("index" in node && node.index?.$ref?.file === page.file.path) {
+    return node;
+  }
+  for (const child of node.children) {
+    if (child.type === "folder") {
+      const parent = findParent(child, page);
+      if (parent) return parent;
+    }
+    if (child.type === "page" && child.$ref?.file === page.file.path) {
+      return node;
+    }
+  }
+}
 function DocsCategory({
   page,
-  pages,
+  from,
+  tree: forcedTree,
   ...props
 }) {
-  const filtered = pages.filter(
-    (item) => item.file.dirname === page.file.dirname && item.file.name !== page.file.name
-  );
-  return /* @__PURE__ */ jsx(Cards, { ...props, children: filtered.map((item) => /* @__PURE__ */ jsx(
+  const tree = forcedTree ?? (from._i18n ? from.pageTree[page.locale ?? from._i18n.defaultLanguage] : from.pageTree);
+  const parent = findParent(tree, page);
+  if (!parent) return null;
+  const items = parent.children.flatMap((item) => {
+    if (item.type !== "page" || item.url === page.url) return [];
+    return from.getNodePage(item) ?? [];
+  });
+  return /* @__PURE__ */ jsx(Cards, { ...props, children: items.map((item) => /* @__PURE__ */ jsx(
     Card,
     {
       title: item.data.title,

package/dist/provider.d.ts

@@ -4,8 +4,7 @@ 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-Db2HAPOu.js';
-export { u as useTreeContext } from './tree-CrKzI9Nz.js';
-import 'fumadocs-core/search/shared';
+export { u as useTreeContext } from './tree-06ley65N.js';
 import 'fumadocs-core/server';
 
 interface HotKey {

package/dist/provider.js

@@ -1,12 +1,11 @@
 "use client";
-import {
-  useTreeContext
-} from "./chunk-LSTPTAZ5.js";
-import "./chunk-UOD2T27N.js";
 import {
   SearchProvider,
   useSearchContext
 } from "./chunk-ET4TW6M5.js";
+import {
+  useTreeContext
+} from "./chunk-YL3MZH7N.js";
 import {
   SidebarProvider,
   useSidebar

package/dist/shared-SScCiV7b.d.ts

@@ -0,0 +1,152 @@
+import * as react from 'react';
+import { ReactNode, HTMLAttributes } from 'react';
+
+interface BaseItem {
+    /**
+     * Restrict where the item is displayed
+     *
+     * @defaultValue 'all'
+     */
+    on?: 'menu' | 'nav' | 'all';
+}
+interface MainItem extends BaseLinkItem {
+    type?: 'main';
+    icon?: ReactNode;
+    text: ReactNode;
+    description?: ReactNode;
+}
+interface MenuItem extends BaseItem {
+    type: 'menu';
+    icon?: ReactNode;
+    text: ReactNode;
+    url?: string;
+    items: ((MainItem & {
+        /**
+         * Options when displayed on navigation menu
+         */
+        menu?: HTMLAttributes<HTMLElement> & {
+            banner?: ReactNode;
+            footer?: ReactNode;
+        };
+    }) | CustomItem)[];
+    /**
+     * @defaultValue false
+     */
+    secondary?: boolean;
+}
+interface CustomItem extends BaseItem {
+    type: 'custom';
+    /**
+     * @defaultValue false
+     */
+    secondary?: boolean;
+    children: ReactNode;
+}
+type LinkItemType = MainItem | IconItem | ButtonItem | MenuItem | CustomItem;
+interface BaseLinkItem extends BaseItem {
+    url: string;
+    /**
+     * When the item is marked as active
+     *
+     * @defaultValue 'url'
+     */
+    active?: 'url' | 'nested-url' | 'none';
+    external?: boolean;
+}
+declare const BaseLinkItem: react.ForwardRefExoticComponent<{
+    item: BaseLinkItem;
+} & HTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
+interface ButtonItem extends BaseLinkItem {
+    type: 'button';
+    icon?: ReactNode;
+    text: ReactNode;
+    /**
+     * @defaultValue false
+     */
+    secondary?: boolean;
+}
+declare const ButtonItem: react.ForwardRefExoticComponent<{
+    item: ButtonItem;
+} & HTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
+interface IconItem extends BaseLinkItem {
+    type: 'icon';
+    /**
+     * `aria-label` of icon button
+     */
+    label?: string;
+    icon: ReactNode;
+    text: ReactNode;
+    /**
+     * @defaultValue true
+     */
+    secondary?: boolean;
+}
+declare const IconItem: react.ForwardRefExoticComponent<{
+    item: IconItem;
+} & HTMLAttributes<HTMLAnchorElement> & react.RefAttributes<HTMLAnchorElement>>;
+
+interface NavProviderProps {
+    /**
+     * Use transparent background
+     *
+     * @defaultValue none
+     */
+    transparentMode?: 'always' | 'top' | 'none';
+}
+interface TitleProps {
+    title?: ReactNode;
+    /**
+     * Redirect url of title
+     * @defaultValue '/'
+     */
+    url?: string;
+}
+declare function NavProvider({ transparentMode, children, }: NavProviderProps & {
+    children: ReactNode;
+}): ReactNode;
+
+interface NavOptions extends SharedNavProps {
+    enabled: boolean;
+    component: ReactNode;
+}
+interface SharedNavProps extends TitleProps, NavProviderProps {
+    /**
+     * Show/hide search toggle
+     *
+     * Note: Enable/disable search from root provider instead
+     */
+    enableSearch?: boolean;
+    children?: ReactNode;
+}
+interface BaseLayoutProps {
+    /**
+     * Remove theme switcher component
+     */
+    disableThemeSwitch?: boolean;
+    /**
+     * Enable Language Switch
+     *
+     * @defaultValue false
+     */
+    i18n?: boolean;
+    /**
+     * GitHub url
+     */
+    githubUrl?: string;
+    links?: LinkItemType[];
+    /**
+     * Replace or disable navbar
+     */
+    nav?: Partial<NavOptions>;
+    children?: ReactNode;
+}
+/**
+ * Get Links Items with shortcuts
+ */
+declare function getLinks(links?: LinkItemType[], githubUrl?: string): LinkItemType[];
+declare function replaceOrDefault(obj: {
+    enabled?: boolean;
+    component?: ReactNode;
+} | undefined, def: ReactNode, customComponentProps?: object, disabled?: ReactNode): ReactNode;
+
+export { type BaseLayoutProps as B, IconItem as I, type LinkItemType as L, NavProvider as N, type SharedNavProps as S, getLinks as g, replaceOrDefault as r };