fumadocs-ui 12.1.3 → 12.2.1

package/dist/{chunk-MXPAPA74.js → chunk-3WVIP3N5.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-2KMKNVSN.js";
 import {
   buttonVariants
-} from "./chunk-H5USAX5W.js";
+} from "./chunk-CPOVVDVF.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";

package/dist/{chunk-H5USAX5W.js → chunk-CPOVVDVF.js}

@@ -10,7 +10,6 @@ var buttonVariants = cva(
         secondary: "border bg-secondary text-secondary-foreground hover:bg-accent hover:text-accent-foreground"
       },
       size: {
-        lg: "px-4 py-2 text-[15px]",
         icon: "p-1.5 [&_svg]:size-5"
       }
     }

package/dist/{chunk-BHP6OUWK.js → chunk-G7WCPUM7.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-HLGNIWUN.js";
 import {
   buttonVariants
-} from "./chunk-H5USAX5W.js";
+} from "./chunk-CPOVVDVF.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";

package/dist/{chunk-U4G4ZLRB.js → chunk-Q3FSJZ3E.js}

@@ -8,7 +8,7 @@ import {
 } from "./chunk-2KMKNVSN.js";
 import {
   buttonVariants
-} from "./chunk-H5USAX5W.js";
+} from "./chunk-CPOVVDVF.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";

package/dist/{chunk-IOZPSMRL.js → chunk-XVCWFZ3A.js}

@@ -19,7 +19,7 @@ import {
 } from "./chunk-7XPZOMJ2.js";
 import {
   buttonVariants
-} from "./chunk-H5USAX5W.js";
+} from "./chunk-CPOVVDVF.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
@@ -101,8 +101,8 @@ function NavBox({
     {
       ...props,
       className: twMerge(
-        "sticky top-0 z-50 h-16 border-b transition-colors",
-        transparent ? "border-transparent" : "border-foreground/10 bg-background/80 backdrop-blur-md",
+        "sticky top-0 z-50 border-b transition-colors",
+        transparent ? "border-transparent" : "border-foreground/10 bg-background/60 backdrop-blur-md",
         props.className
       )
     }

package/dist/components/accordion.js

@@ -2,9 +2,9 @@
 import {
   Accordion,
   Accordions
-} from "../chunk-MXPAPA74.js";
+} from "../chunk-3WVIP3N5.js";
 import "../chunk-2KMKNVSN.js";
-import "../chunk-H5USAX5W.js";
+import "../chunk-CPOVVDVF.js";
 import "../chunk-TK3TM3MR.js";
 import "../chunk-MLKGABMK.js";
 export {

package/dist/components/api.js

@@ -1,14 +1,14 @@
 "use client";
-import {
-  Tab,
-  Tabs
-} from "../chunk-NUPTR2L5.js";
 import {
   Accordion,
   Accordions
-} from "../chunk-MXPAPA74.js";
+} from "../chunk-3WVIP3N5.js";
 import "../chunk-2KMKNVSN.js";
-import "../chunk-H5USAX5W.js";
+import {
+  Tab,
+  Tabs
+} from "../chunk-NUPTR2L5.js";
+import "../chunk-CPOVVDVF.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
@@ -25,7 +25,10 @@ function Root({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: twMerge("space-y-24 text-sm text-muted-foreground", className),
+      className: twMerge(
+        "flex flex-col gap-24 text-sm text-muted-foreground",
+        className
+      ),
       ...props,
       children
     }
@@ -39,7 +42,10 @@ function API({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: twMerge("flex flex-col gap-x-6 gap-y-2 xl:flex-row", className),
+      className: twMerge(
+        "flex flex-col gap-x-6 gap-y-2 xl:flex-row xl:items-start",
+        className
+      ),
       ...props,
       children
     }
@@ -50,7 +56,9 @@ var badgeVariants = cva("rounded-lg border px-1 py-0.5 text-xs font-medium", {
     color: {
       green: "border-green-400/50 bg-green-400/20 text-green-600 dark:text-green-400",
       yellow: "border-yellow-400/50 bg-yellow-400/20 text-yellow-600 dark:text-yellow-400",
-      red: "border-red-400/50 bg-red-400/20 text-red-600 dark:text-red-400"
+      red: "border-red-400/50 bg-red-400/20 text-red-600 dark:text-red-400",
+      blue: "border-blue-400/50 bg-blue-400/20 text-blue-600 dark:text-blue-400",
+      orange: "border-orange-400/50 bg-orange-400/20 text-orange-600 dark:text-orange-400"
     }
   }
 });
@@ -63,12 +71,14 @@ function APIInfo({
 }) {
   let color = "green";
   if (["GET", "HEAD"].includes(method)) color = "green";
-  if (["POST", "PATCH", "PUT"].includes(method)) color = "yellow";
+  if (["PUT"].includes(method)) color = "yellow";
+  if (["PATCH"].includes(method)) color = "orange";
+  if (["POST"].includes(method)) color = "blue";
   if (["DELETE"].includes(method)) color = "red";
-  return /* @__PURE__ */ jsxs("div", { className: twMerge("flex-1", className), ...props, children: [
-    /* @__PURE__ */ jsxs("h2", { className: "not-prose mb-2 inline-flex items-center gap-3 font-mono", children: [
-      /* @__PURE__ */ jsx("div", { className: twMerge(badgeVariants({ color })), children: method }),
-      /* @__PURE__ */ jsx("p", { className: "text-xs", children: route })
+  return /* @__PURE__ */ jsxs("div", { className: twMerge("flex-1 prose-no-margin", className), ...props, children: [
+    /* @__PURE__ */ jsxs("h2", { className: "flex flex-row items-center gap-3 rounded-lg border bg-card p-3 text-base", children: [
+      /* @__PURE__ */ jsx("span", { className: twMerge(badgeVariants({ color })), children: method }),
+      /* @__PURE__ */ jsx("code", { children: route })
     ] }),
     children
   ] });
@@ -98,7 +108,7 @@ function APIExample({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: twMerge("sticky top-6 h-fit xl:w-2/5 xl:min-w-[400px]", className),
+      className: twMerge("sticky top-6 prose-no-margin xl:w-[400px]", className),
       ...props,
       children
     }

package/dist/components/banner.d.ts

@@ -0,0 +1,5 @@
+import { HTMLAttributes } from 'react';
+
+declare function Banner({ id, ...props }: HTMLAttributes<HTMLDivElement>): React.ReactElement;
+
+export { Banner };

package/dist/components/banner.js

@@ -0,0 +1,72 @@
+"use client";
+import {
+  buttonVariants
+} from "../chunk-CPOVVDVF.js";
+import {
+  twMerge
+} from "../chunk-TK3TM3MR.js";
+import "../chunk-MLKGABMK.js";
+
+// src/components/banner.tsx
+import { useCallback, useEffect, useState } from "react";
+import { X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Banner({
+  id,
+  ...props
+}) {
+  const [open, setOpen] = useState(true);
+  useEffect(() => {
+    if (id) setOpen(localStorage.getItem(`nd-banner-${id}`) !== "true");
+  }, [id]);
+  const onClick = useCallback(() => {
+    setOpen(false);
+    if (id) localStorage.setItem(`nd-banner-${id}`, "true");
+  }, [id]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      ...props,
+      className: twMerge(
+        "relative flex h-12 flex-row items-center justify-center bg-secondary px-4 text-center text-sm font-medium",
+        !open && "hidden",
+        props.className
+      ),
+      suppressHydrationWarning: true,
+      children: [
+        id ? /* @__PURE__ */ jsx(
+          "script",
+          {
+            dangerouslySetInnerHTML: {
+              __html: `const ndBannerItem = localStorage.getItem('nd-banner-${id}');
+   if (ndBannerItem === 'true') {
+     document.getElementById('${id}').style.display = 'none';
+   }`
+            }
+          }
+        ) : null,
+        props.children,
+        id ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Close Banner",
+            onClick,
+            className: twMerge(
+              buttonVariants({
+                color: "ghost",
+                className: "absolute end-2 top-3 text-muted-foreground",
+                size: "icon"
+              })
+            ),
+            children: /* @__PURE__ */ jsx(X, {})
+          }
+        ) : null
+      ]
+    }
+  );
+}
+export {
+  Banner
+};

package/dist/components/callout.d.ts

@@ -1,7 +1,7 @@
 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" | "icon" | "type"> & {
     title?: ReactNode;
     /**
      * @defaultValue info

package/dist/components/codeblock.js

@@ -2,10 +2,10 @@
 import {
   CodeBlock,
   Pre
-} from "../chunk-U4G4ZLRB.js";
+} from "../chunk-Q3FSJZ3E.js";
 import "../chunk-VYTHQTZE.js";
 import "../chunk-2KMKNVSN.js";
-import "../chunk-H5USAX5W.js";
+import "../chunk-CPOVVDVF.js";
 import "../chunk-TK3TM3MR.js";
 import "../chunk-MLKGABMK.js";
 export {

package/dist/components/dialog/search-algolia.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   SearchDialog
-} from "../../chunk-BHP6OUWK.js";
+} from "../../chunk-G7WCPUM7.js";
 import "../../chunk-3F57TIUQ.js";
 import "../../chunk-ET4TW6M5.js";
 import "../../chunk-HLGNIWUN.js";
-import "../../chunk-H5USAX5W.js";
+import "../../chunk-CPOVVDVF.js";
 import "../../chunk-TK3TM3MR.js";
 import "../../chunk-MLKGABMK.js";
 

package/dist/components/dialog/search-default.js

@@ -1,13 +1,13 @@
 "use client";
 import {
   SearchDialog
-} from "../../chunk-BHP6OUWK.js";
+} from "../../chunk-G7WCPUM7.js";
 import "../../chunk-3F57TIUQ.js";
 import "../../chunk-ET4TW6M5.js";
 import {
   useI18n
 } from "../../chunk-HLGNIWUN.js";
-import "../../chunk-H5USAX5W.js";
+import "../../chunk-CPOVVDVF.js";
 import "../../chunk-TK3TM3MR.js";
 import "../../chunk-MLKGABMK.js";
 

package/dist/components/dialog/search.js

@@ -1,10 +1,10 @@
 import {
   SearchDialog
-} from "../../chunk-BHP6OUWK.js";
+} from "../../chunk-G7WCPUM7.js";
 import "../../chunk-3F57TIUQ.js";
 import "../../chunk-ET4TW6M5.js";
 import "../../chunk-HLGNIWUN.js";
-import "../../chunk-H5USAX5W.js";
+import "../../chunk-CPOVVDVF.js";
 import "../../chunk-TK3TM3MR.js";
 import "../../chunk-MLKGABMK.js";
 export {

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

@@ -9,7 +9,7 @@ import {
 } from "../../chunk-HLGNIWUN.js";
 import {
   buttonVariants
-} from "../../chunk-H5USAX5W.js";
+} from "../../chunk-CPOVVDVF.js";
 import {
   twMerge
 } from "../../chunk-TK3TM3MR.js";

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

@@ -27,7 +27,7 @@ function RootToggle({
   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-muted", children: [
       /* @__PURE__ */ jsx(Item, { ...selected }),
-      /* @__PURE__ */ jsx(ChevronDown, { className: "me-1.5 size-4 text-muted-foreground" })
+      /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 text-muted-foreground md:me-1.5" })
     ] }),
     /* @__PURE__ */ jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] overflow-hidden p-0", children: options.map((item) => /* @__PURE__ */ jsx(
       Link,

package/dist/components/roll-button.js

@@ -5,7 +5,7 @@ import {
 import "../chunk-AN2Y6MA2.js";
 import {
   buttonVariants
-} from "../chunk-H5USAX5W.js";
+} from "../chunk-CPOVVDVF.js";
 import {
   twMerge
 } from "../chunk-TK3TM3MR.js";
@@ -30,7 +30,7 @@ function RollButton({
     const listener = () => {
       const element = document.scrollingElement;
       if (!element) return;
-      const nearTop = element.scrollTop / (element.scrollHeight - element.clientHeight) < percentage;
+      const nearTop = element.scrollHeight === element.clientHeight || element.scrollTop / (element.scrollHeight - element.clientHeight) < percentage;
       setShow(!nearTop);
     };
     listener();
@@ -47,9 +47,9 @@ function RollButton({
       className: twMerge(
         buttonVariants({
           color: "secondary",
-          className: "fixed top-16 [&_svg]:size-4 gap-1 left-1/2 translate-x-[-50%] z-10 shadow-md rounded-full transition-all md:top-4"
+          className: "fixed top-[108px] [&_svg]:size-4 gap-1 left-1/2 translate-x-[-50%] z-10 shadow-md rounded-full transition-all md:top-4"
         }),
-        !show && "translate-y-20 opacity-0"
+        !show && "pointer-events-none translate-y-20 opacity-0"
       ),
       onClick: useCallback(() => {
         document.scrollingElement?.scrollTo({

package/dist/docs.client.d.ts

@@ -1,5 +1,5 @@
-import { L as LinkItemType, S as SidebarProps, a as SharedNavProps } from './layout-DAwDgfTa.js';
-export { b as Sidebar } from './layout-DAwDgfTa.js';
+import { L as LinkItemType, S as SidebarProps, a as SharedNavProps } from './layout-C2Cxe6NB.js';
+export { b as Sidebar } from './layout-C2Cxe6NB.js';
 export { T as TreeContextProvider } from './tree-CrKzI9Nz.js';
 import { ButtonHTMLAttributes } from 'react';
 import 'fumadocs-core/server';

package/dist/docs.client.js

@@ -7,7 +7,7 @@ import {
   SearchToggle,
   ThemeToggle,
   Title
-} from "./chunk-IOZPSMRL.js";
+} from "./chunk-XVCWFZ3A.js";
 import {
   ScrollArea,
   ScrollViewport
@@ -35,7 +35,7 @@ import {
 } from "./chunk-7XPZOMJ2.js";
 import {
   buttonVariants
-} from "./chunk-H5USAX5W.js";
+} from "./chunk-CPOVVDVF.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
@@ -105,8 +105,8 @@ function Sidebar({
       blockScrollingWidth: 768,
       ...aside,
       className: twMerge(
-        "z-30 flex w-full flex-col text-[15px] md:sticky md:top-0 md:h-dvh md:w-[240px] md:border-e md:bg-card md:text-sm xl:w-[260px]",
-        "max-md:fixed max-md:inset-0 max-md:bg-background/80 max-md:pt-16 max-md:backdrop-blur-md max-md:data-[open=false]:hidden",
+        "fixed z-30 flex shrink-0 flex-col bg-card text-sm md:sticky md:top-0 md:h-dvh md:w-[240px] md:border-e xl:w-[260px]",
+        "max-md:inset-0 max-md:bg-background/80 max-md:pt-12 max-md:text-[15px] max-md:backdrop-blur-md max-md:data-[open=false]:hidden",
         aside?.className
       ),
       children: [
@@ -130,7 +130,7 @@ function Sidebar({
           {
             ...footerProps,
             className: twMerge(
-              "flex flex-row items-center border-t px-4 py-1 md:px-3",
+              "flex flex-row items-center border-t px-4 pb-2 pt-1 md:px-3",
               footerProps?.className
             ),
             children: footer
@@ -269,29 +269,33 @@ function DynamicSidebar(props) {
   const { collapsed, setCollapsed } = useSidebar();
   const [hover, setHover] = useState2(false);
   const timerRef = useRef(0);
-  const hoverTimeRef = useRef(0);
+  const closeTimeRef = useRef(0);
   const onCollapse = useCallback2(() => {
     setCollapsed((v) => !v);
     setHover(false);
-    hoverTimeRef.current = Date.now() + 500;
+    closeTimeRef.current = Date.now() + 150;
   }, [setCollapsed]);
   const onEnter = useCallback2((e) => {
-    if (e.pointerType === "touch" || hoverTimeRef.current > Date.now()) return;
+    if (e.pointerType === "touch" || closeTimeRef.current > Date.now()) return;
     window.clearTimeout(timerRef.current);
     setHover(true);
   }, []);
   const onLeave = useCallback2((e) => {
     if (e.pointerType === "touch") return;
     window.clearTimeout(timerRef.current);
-    timerRef.current = window.setTimeout(() => {
-      setHover(false);
-    }, 300);
+    timerRef.current = window.setTimeout(
+      () => {
+        setHover(false);
+        closeTimeRef.current = Date.now() + 150;
+      },
+      Math.min(e.clientX, document.body.clientWidth - e.clientX) > 100 ? 0 : 500
+    );
   }, []);
   return /* @__PURE__ */ jsxs2(Fragment2, { children: [
     collapsed ? /* @__PURE__ */ jsx2(
       "div",
       {
-        className: "fixed inset-y-0 start-0 w-4 max-md:hidden 2xl:w-[180px]",
+        className: "fixed inset-y-0 start-0 w-6 max-md:hidden xl:w-[50px]",
         onPointerEnter: onEnter,
         onPointerLeave: onLeave
       }
@@ -305,7 +309,7 @@ function DynamicSidebar(props) {
           buttonVariants({
             color: "secondary",
             size: "icon",
-            className: "fixed start-4 bottom-4 z-10 max-md:hidden"
+            className: "fixed start-4 bottom-2 z-10 max-md:hidden"
           })
         ),
         onClick: onCollapse,
@@ -323,8 +327,11 @@ function DynamicSidebar(props) {
           onPointerLeave: onLeave,
           "aria-hidden": Boolean(collapsed && !hover),
           className: twMerge(
-            "overflow-hidden md:transition-transform",
-            collapsed && "md:fixed md:inset-y-2 md:start-2 md:h-auto md:rounded-xl md:border md:shadow-md"
+            "md:transition-[transform,margin]",
+            collapsed && [
+              "md:top-1 md:mr-[-240px] md:h-[calc(100dvh-4px)] md:animate-sidebar-collapse md:rounded-xl md:border md:shadow-md xl:mr-[-260px]",
+              hover ? "md:translate-x-1 rtl:md:-translate-x-1" : "md:-translate-x-full rtl:md:translate-x-full"
+            ]
           )
         },
         footer: /* @__PURE__ */ jsxs2(Fragment2, { children: [
@@ -366,12 +373,12 @@ function SubNav({
     NavBox,
     {
       id: "nd-subnav",
-      className: "flex flex-row items-center px-4 md:hidden",
+      className: "flex h-16 flex-row items-center px-4 md:hidden",
       transparentMode,
       children: [
         /* @__PURE__ */ jsx3(Title, { url, title }),
-        children,
-        enabled && enableSearch ? /* @__PURE__ */ jsx3(SearchToggle, { className: "ms-auto" }) : null,
+        /* @__PURE__ */ jsx3("div", { className: "flex flex-1 flex-row items-center", children }),
+        enabled && enableSearch ? /* @__PURE__ */ jsx3(SearchToggle, {}) : null,
         /* @__PURE__ */ jsx3(
           SidebarTrigger,
           {
@@ -379,7 +386,7 @@ function SubNav({
               buttonVariants({
                 color: "ghost",
                 size: "icon",
-                className: (!enabled || !enableSearch) && "ms-auto"
+                className: "-me-2"
               })
             ),
             children: open ? /* @__PURE__ */ jsx3(X, {}) : /* @__PURE__ */ jsx3(Menu, {})

package/dist/{layout-DAwDgfTa.d.ts → layout-C2Cxe6NB.d.ts}

@@ -3,7 +3,8 @@ import { ReactNode, HTMLAttributes } from 'react';
 
 interface NavBoxProps {
     /**
-     * When to use transparent navbar
+     * Use transparent background
+     *
      * @defaultValue none
      */
     transparentMode?: 'always' | 'top' | 'none';
@@ -26,6 +27,9 @@ interface SidebarProps {
      * @defaultValue 1
      */
     defaultOpenLevel?: number;
+    /**
+     * Customise each of the component
+     */
     components?: Partial<Components>;
     banner?: React.ReactNode;
     bannerProps?: HTMLAttributes<HTMLDivElement>;

package/dist/layout.client.d.ts

@@ -1,4 +1,4 @@
-import { a as SharedNavProps, L as LinkItemType } from './layout-DAwDgfTa.js';
+import { a as SharedNavProps, L as LinkItemType } from './layout-C2Cxe6NB.js';
 import 'fumadocs-core/server';
 import 'react';
 

package/dist/layout.client.js

@@ -7,7 +7,7 @@ import {
   SearchToggle,
   ThemeToggle,
   Title
-} from "./chunk-IOZPSMRL.js";
+} from "./chunk-XVCWFZ3A.js";
 import "./chunk-GHKJ6EFT.js";
 import "./chunk-AN2Y6MA2.js";
 import {
@@ -17,7 +17,7 @@ import {
   useI18n
 } from "./chunk-HLGNIWUN.js";
 import "./chunk-7XPZOMJ2.js";
-import "./chunk-H5USAX5W.js";
+import "./chunk-CPOVVDVF.js";
 import "./chunk-TK3TM3MR.js";
 import "./chunk-MLKGABMK.js";
 
@@ -34,7 +34,7 @@ function Nav({
 }) {
   const search = useSearchContext();
   const { text } = useI18n();
-  return /* @__PURE__ */ jsx(NavBox, { id: "nd-nav", transparentMode, children: /* @__PURE__ */ jsxs("nav", { className: "mx-auto flex size-full max-w-container flex-row items-center gap-6 px-4", children: [
+  return /* @__PURE__ */ jsx(NavBox, { id: "nd-nav", className: "h-16", transparentMode, children: /* @__PURE__ */ jsxs("nav", { className: "mx-auto flex size-full max-w-container flex-row items-center gap-6 px-4", children: [
     /* @__PURE__ */ jsx(Title, { title, url }),
     children,
     items.filter((item) => item.type !== "secondary").map((item, i) => /* @__PURE__ */ jsx(
@@ -56,7 +56,7 @@ function Nav({
         LinksMenu,
         {
           items,
-          className: "lg:hidden",
+          className: "-me-2 lg:hidden",
           footer: /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between px-2 pt-2", children: [
             /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: text.chooseTheme }),
             /* @__PURE__ */ jsx(ThemeToggle, {})

package/dist/layout.d.ts

@@ -1,3 +1,3 @@
 import 'fumadocs-core/server';
 import 'react';
-export { B as BaseLayoutProps, d as DocsLayout, D as DocsLayoutProps, c as Layout, L as LinkItemType, a as SharedNavProps } from './layout-DAwDgfTa.js';
+export { B as BaseLayoutProps, d as DocsLayout, D as DocsLayoutProps, c as Layout, L as LinkItemType, a as SharedNavProps } from './layout-C2Cxe6NB.js';

package/dist/layout.js

@@ -47,7 +47,7 @@ function DocsLayout({
     ...sidebar
   } = {},
   links = [],
-  containerProps,
+  containerProps = {},
   tree,
   i18n = false,
   children
@@ -57,10 +57,11 @@ function DocsLayout({
   return /* @__PURE__ */ jsxs(TreeContextProvider, { tree, children: [
     replaceOrDefault(nav, /* @__PURE__ */ jsx(SubNav, { ...nav })),
     /* @__PURE__ */ jsxs(
-      "div",
+      "main",
       {
+        id: "nd-docs-layout",
         ...containerProps,
-        className: twMerge("flex flex-1 flex-row", containerProps?.className),
+        className: twMerge("flex flex-1 flex-row", containerProps.className),
         children: [
           replaceOrDefault(
             { enabled: sidebarEnabled, component: sidebarReplace },

package/dist/mdx.client.js

@@ -2,10 +2,10 @@
 import {
   CodeBlock,
   Pre
-} from "./chunk-U4G4ZLRB.js";
+} from "./chunk-Q3FSJZ3E.js";
 import "./chunk-VYTHQTZE.js";
 import "./chunk-2KMKNVSN.js";
-import "./chunk-H5USAX5W.js";
+import "./chunk-CPOVVDVF.js";
 import "./chunk-TK3TM3MR.js";
 import "./chunk-MLKGABMK.js";
 

package/dist/page.client.d.ts

@@ -16,7 +16,7 @@ interface TOCProps {
 }
 declare const TocProvider: typeof Primitive.AnchorProvider;
 declare function Toc({ items, header, footer }: TOCProps): ReactElement;
-declare function SubToc({ items, header, footer, ...props }: TOCProps & ButtonHTMLAttributes<HTMLButtonElement>): ReactElement;
+declare function TocPopover({ items, header, footer, ...props }: TOCProps & ButtonHTMLAttributes<HTMLButtonElement>): ReactElement;
 
 interface BreadcrumbProps extends Omit<BreadcrumbOptions, 'includePage'> {
     /**
@@ -48,4 +48,4 @@ interface FooterProps {
 }
 declare function Footer({ items }: FooterProps): React.ReactElement;
 
-export { Breadcrumb, type BreadcrumbProps, Footer, type FooterProps, LastUpdate, SubToc, type TOCProps, Toc, TocProvider };
+export { Breadcrumb, type BreadcrumbProps, Footer, type FooterProps, LastUpdate, type TOCProps, Toc, TocPopover, TocProvider };