fumadocs-ui 12.1.2 → 12.2.0

package/dist/docs.client.js

@@ -3,9 +3,11 @@ import {
   LargeSearchToggle,
   LinkItem,
   LinksMenu,
+  NavBox,
   SearchToggle,
-  ThemeToggle
-} from "./chunk-YJDZJ4BG.js";
+  ThemeToggle,
+  Title
+} from "./chunk-XVCWFZ3A.js";
 import {
   ScrollArea,
   ScrollViewport
@@ -24,7 +26,7 @@ import {
 } from "./chunk-3F57TIUQ.js";
 import {
   useSearchContext
-} from "./chunk-FSPYEOFC.js";
+} from "./chunk-ET4TW6M5.js";
 import "./chunk-HLGNIWUN.js";
 import {
   Collapsible,
@@ -33,14 +35,13 @@ import {
 } from "./chunk-7XPZOMJ2.js";
 import {
   buttonVariants
-} from "./chunk-H5USAX5W.js";
+} from "./chunk-CPOVVDVF.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
 import "./chunk-MLKGABMK.js";
 
 // src/docs.client.tsx
-import Link2 from "next/link";
 import { SidebarTrigger } from "fumadocs-core/sidebar";
 import { Menu, X } from "lucide-react";
 
@@ -104,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: [
@@ -129,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
@@ -268,28 +269,34 @@ function DynamicSidebar(props) {
   const { collapsed, setCollapsed } = useSidebar();
   const [hover, setHover] = useState2(false);
   const timerRef = useRef(0);
+  const closeTimeRef = useRef(0);
   const onCollapse = useCallback2(() => {
     setCollapsed((v) => !v);
     setHover(false);
+    closeTimeRef.current = Date.now() + 150;
   }, [setCollapsed]);
-  const onHover = useCallback2((e) => {
-    if (e.pointerType === "touch") return;
+  const onEnter = useCallback2((e) => {
+    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 xl:static xl:w-[260px]",
-        onPointerEnter: onHover,
+        className: "fixed inset-y-0 start-0 w-6 max-md:hidden xl:w-[50px]",
+        onPointerEnter: onEnter,
         onPointerLeave: onLeave
       }
     ) : null,
@@ -302,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,
@@ -316,12 +323,15 @@ function DynamicSidebar(props) {
         aside: {
           "data-collapse": collapsed,
           "data-hover": hover,
-          onPointerEnter: onHover,
+          onPointerEnter: onEnter,
           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: [
@@ -352,21 +362,23 @@ function DynamicSidebar(props) {
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function SubNav({
   title,
-  url = "/",
+  url,
+  transparentMode,
   children,
   enableSearch = true
 }) {
   const { open } = useSidebar();
   const { enabled } = useSearchContext();
   return /* @__PURE__ */ jsxs3(
-    "nav",
+    NavBox,
     {
       id: "nd-subnav",
-      className: "sticky top-0 z-40 flex h-16 w-full flex-row items-center border-b bg-background/80 px-4 backdrop-blur-md md:hidden [&_svg]:size-5",
+      className: "flex h-12 flex-row items-center px-4 md:hidden",
+      transparentMode,
       children: [
-        /* @__PURE__ */ jsx3(Link2, { href: url, className: "inline-flex items-center gap-3 font-semibold", children: title }),
-        children,
-        enabled && enableSearch ? /* @__PURE__ */ jsx3(SearchToggle, { className: "ms-auto" }) : null,
+        /* @__PURE__ */ jsx3(Title, { url, title }),
+        /* @__PURE__ */ jsx3("div", { className: "flex flex-1 flex-row items-center", children }),
+        enabled && enableSearch ? /* @__PURE__ */ jsx3(SearchToggle, {}) : null,
         /* @__PURE__ */ jsx3(
           SidebarTrigger,
           {
@@ -374,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.client-BzAmSQXB.d.ts → layout-C2Cxe6NB.d.ts}

@@ -1,29 +1,22 @@
-import { ReactNode, HTMLAttributes } from 'react';
 import { PageTree } from 'fumadocs-core/server';
+import { ReactNode, HTMLAttributes } from 'react';
 
-interface NavProps {
+interface NavBoxProps {
+    /**
+     * Use transparent background
+     *
+     * @defaultValue none
+     */
+    transparentMode?: 'always' | 'top' | 'none';
+}
+interface TitleProps {
     title?: ReactNode;
     /**
      * Redirect url of title
      * @defaultValue '/'
      */
     url?: string;
-    /**
-     * Show/hide search toggle
-     *
-     * Note: Enable/disable search from root provider instead
-     */
-    enableSearch?: boolean;
-    /**
-     * When to use transparent navbar
-     * @defaultValue none
-     */
-    transparentMode?: 'always' | 'top' | 'none';
-    children?: ReactNode;
 }
-declare function Nav({ title, url, items, transparentMode, enableSearch, children, }: NavProps & {
-    items: LinkItemType[];
-}): React.ReactElement;
 
 interface SidebarProps {
     items: LinkItemType[];
@@ -34,6 +27,9 @@ interface SidebarProps {
      * @defaultValue 1
      */
     defaultOpenLevel?: number;
+    /**
+     * Customise each of the component
+     */
     components?: Partial<Components>;
     banner?: React.ReactNode;
     bannerProps?: HTMLAttributes<HTMLDivElement>;
@@ -87,10 +83,19 @@ type LinkItemType = {
     text: string;
     external?: boolean;
 };
-interface NavOptions extends Omit<NavProps, 'items'> {
+interface NavOptions extends SharedNavProps {
     enabled: boolean;
     component: ReactNode;
 }
+interface SharedNavProps extends TitleProps, NavBoxProps {
+    /**
+     * Show/hide search toggle
+     *
+     * Note: Enable/disable search from root provider instead
+     */
+    enableSearch?: boolean;
+    children?: ReactNode;
+}
 interface SidebarOptions extends Omit<SidebarProps, 'items'> {
     enabled: boolean;
     component: ReactNode;
@@ -122,4 +127,4 @@ interface DocsLayoutProps extends BaseLayoutProps {
 declare function Layout({ nav, links, githubUrl, children, }: BaseLayoutProps): React.ReactElement;
 declare function DocsLayout({ nav, githubUrl, sidebar: { enabled: sidebarEnabled, collapsible, component: sidebarReplace, ...sidebar }, links, containerProps, tree, i18n, children, }: DocsLayoutProps): React.ReactElement;
 
-export { type BaseLayoutProps as B, type DocsLayoutProps as D, type LinkItemType as L, type NavProps as N, type SidebarProps as S, Sidebar as a, Layout as b, DocsLayout as c, Nav as d };
+export { type BaseLayoutProps as B, type DocsLayoutProps as D, type LinkItemType as L, type SidebarProps as S, type SharedNavProps as a, Sidebar as b, Layout as c, DocsLayout as d };

package/dist/layout.client.d.ts

@@ -1,3 +1,9 @@
-export { d as Nav } from './layout.client-BzAmSQXB.js';
-import 'react';
+import { a as SharedNavProps, L as LinkItemType } from './layout-C2Cxe6NB.js';
 import 'fumadocs-core/server';
+import 'react';
+
+declare function Nav({ title, url, items, transparentMode, enableSearch, children, }: SharedNavProps & {
+    items: LinkItemType[];
+}): React.ReactElement;
+
+export { Nav };

package/dist/layout.client.js

@@ -3,100 +3,69 @@ import {
   LargeSearchToggle,
   LinkItem,
   LinksMenu,
+  NavBox,
   SearchToggle,
-  ThemeToggle
-} from "./chunk-YJDZJ4BG.js";
+  ThemeToggle,
+  Title
+} from "./chunk-XVCWFZ3A.js";
 import "./chunk-GHKJ6EFT.js";
 import "./chunk-AN2Y6MA2.js";
 import {
   useSearchContext
-} from "./chunk-FSPYEOFC.js";
+} from "./chunk-ET4TW6M5.js";
 import {
   useI18n
 } from "./chunk-HLGNIWUN.js";
 import "./chunk-7XPZOMJ2.js";
-import "./chunk-H5USAX5W.js";
-import {
-  twMerge
-} from "./chunk-TK3TM3MR.js";
+import "./chunk-CPOVVDVF.js";
+import "./chunk-TK3TM3MR.js";
 import "./chunk-MLKGABMK.js";
 
-// src/components/layout/nav.tsx
-import Link from "fumadocs-core/link";
-import { useEffect, useState } from "react";
+// src/layout.client.tsx
 import { MoreVertical } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function Nav({
-  title = "My App",
-  url = "/",
+  title,
+  url,
   items,
-  transparentMode = "none",
+  transparentMode,
   enableSearch = true,
   children
 }) {
   const search = useSearchContext();
-  const [transparent, setTransparent] = useState(transparentMode !== "none");
   const { text } = useI18n();
-  useEffect(() => {
-    if (transparentMode !== "top") return;
-    const listener = () => {
-      setTransparent(window.scrollY < 10);
-    };
-    listener();
-    window.addEventListener("scroll", listener);
-    return () => {
-      window.removeEventListener("scroll", listener);
-    };
-  }, [transparentMode]);
-  return /* @__PURE__ */ jsx(
-    "header",
-    {
-      id: "nd-nav",
-      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"
-      ),
-      children: /* @__PURE__ */ jsxs("nav", { className: "mx-auto flex size-full max-w-container flex-row items-center gap-6 px-4", children: [
-        /* @__PURE__ */ jsx(
-          Link,
-          {
-            href: url,
-            className: "inline-flex items-center gap-2.5 font-semibold",
-            children: title
-          }
-        ),
-        children,
-        items.filter((item) => item.type !== "secondary").map((item, i) => /* @__PURE__ */ jsx(
-          LinkItem,
-          {
-            item,
-            className: "-mx-2 text-sm max-lg:hidden"
-          },
-          i
-        )),
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-row items-center justify-end md:gap-2", children: [
-          enableSearch && search.enabled ? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(SearchToggle, { className: "md:hidden" }),
-            /* @__PURE__ */ jsx(LargeSearchToggle, { className: "w-full max-w-[240px] max-md:hidden" })
-          ] }) : null,
-          /* @__PURE__ */ jsx(ThemeToggle, { className: "max-lg:hidden" }),
-          /* @__PURE__ */ jsx(
-            LinksMenu,
-            {
-              items,
-              className: "lg:hidden",
-              footer: /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between px-2 py-1", children: [
-                /* @__PURE__ */ jsx("p", { className: "font-medium text-muted-foreground", children: text.chooseTheme }),
-                /* @__PURE__ */ jsx(ThemeToggle, {})
-              ] }),
-              children: /* @__PURE__ */ jsx(MoreVertical, {})
-            }
-          ),
-          items.filter((item) => item.type === "secondary").map((item, i) => /* @__PURE__ */ jsx(LinkItem, { item, className: "max-lg:hidden" }, i))
-        ] })
-      ] })
-    }
-  );
+  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(
+      LinkItem,
+      {
+        item,
+        className: "-mx-2 text-sm max-lg:hidden"
+      },
+      i
+    )),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-row items-center justify-end md:gap-2", children: [
+      enableSearch && search.enabled ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SearchToggle, { className: "md:hidden" }),
+        /* @__PURE__ */ jsx(LargeSearchToggle, { className: "w-full max-w-[240px] max-md:hidden" })
+      ] }) : null,
+      /* @__PURE__ */ jsx(ThemeToggle, { className: "max-lg:hidden" }),
+      items.filter((item) => item.type === "secondary").map((item, i) => /* @__PURE__ */ jsx(LinkItem, { item, className: "max-lg:hidden" }, i)),
+      /* @__PURE__ */ jsx(
+        LinksMenu,
+        {
+          items,
+          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, {})
+          ] }),
+          children: /* @__PURE__ */ jsx(MoreVertical, {})
+        }
+      )
+    ] })
+  ] }) });
 }
 export {
   Nav

package/dist/layout.d.ts

@@ -1,3 +1,3 @@
 import 'fumadocs-core/server';
 import 'react';
-export { B as BaseLayoutProps, c as DocsLayout, D as DocsLayoutProps, b as Layout, L as LinkItemType } from './layout.client-BzAmSQXB.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,20 +47,21 @@ function DocsLayout({
     ...sidebar
   } = {},
   links = [],
-  containerProps,
+  containerProps = {},
   tree,
   i18n = false,
   children
 }) {
   const finalLinks = getLinks(links, githubUrl);
-  const Aside = sidebarEnabled && collapsible ? DynamicSidebar : Sidebar;
+  const Aside = collapsible ? DynamicSidebar : Sidebar;
   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

@@ -1,6 +1,6 @@
 import { TOCItemType } from 'fumadocs-core/server';
 import * as Primitive from 'fumadocs-core/toc-internal';
-import { ReactNode, ReactElement } from 'react';
+import { ReactNode, ReactElement, ButtonHTMLAttributes } from 'react';
 import { BreadcrumbOptions } from 'fumadocs-core/breadcrumb';
 
 interface TOCProps {
@@ -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 }: TOCProps): 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 };