fumadocs-ui 13.4.5 → 13.4.6

package/dist/docs-layout.client.js

@@ -1,22 +1,29 @@
 "use client";
 import {
-  Sidebar
-} from "./chunk-VTGJREY6.js";
-import {
+  LargeSearchToggle,
+  LinkItem,
+  LinksMenu,
   NavBox,
+  SearchToggle,
   ThemeToggle,
   Title
-} from "./chunk-J5B4GINE.js";
+} from "./chunk-KCZRDPB4.js";
 import {
-  LinksMenu,
-  SearchToggle
-} from "./chunk-N47AX4K6.js";
+  LanguageToggle
+} from "./chunk-NSEJBI4V.js";
 import {
-  TreeContextProvider
+  TreeContextProvider,
+  useTreeContext
 } from "./chunk-LSTPTAZ5.js";
-import "./chunk-2FLZOPQN.js";
+import {
+  ScrollArea,
+  ScrollViewport
+} from "./chunk-2FLZOPQN.js";
 import "./chunk-CP67AHDD.js";
-import "./chunk-UOD2T27N.js";
+import {
+  hasActive,
+  isActive
+} from "./chunk-UOD2T27N.js";
 import {
   useSearchContext
 } from "./chunk-ET4TW6M5.js";
@@ -24,9 +31,14 @@ import {
   useSidebar
 } from "./chunk-27HFSL7N.js";
 import "./chunk-EFMHXXHW.js";
-import "./chunk-TQJ6YPJ3.js";
 import {
-  buttonVariants
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "./chunk-TQJ6YPJ3.js";
+import {
+  buttonVariants,
+  itemVariants
 } from "./chunk-EDNTYBXS.js";
 import {
   twMerge
@@ -35,9 +47,296 @@ import "./chunk-MLKGABMK.js";
 
 // src/docs-layout.client.tsx
 import { SidebarTrigger } from "fumadocs-core/sidebar";
-import { Menu, SidebarIcon, X } from "lucide-react";
-import { useCallback } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Menu, SidebarIcon as SidebarIcon2, X } from "lucide-react";
+import { useCallback as useCallback3 } from "react";
+
+// src/components/layout/sidebar.tsx
+import { ChevronDown, ExternalLinkIcon } from "lucide-react";
+import * as Base from "fumadocs-core/sidebar";
+import { usePathname } from "next/navigation";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import Link from "fumadocs-core/link";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var defaultComponents = {
+  Folder: FolderNode,
+  Separator: SeparatorNode,
+  Item: PageNode
+};
+var Context = createContext({
+  defaultOpenLevel: 0,
+  components: defaultComponents,
+  prefetch: true
+});
+function Sidebar({
+  components,
+  defaultOpenLevel = 0,
+  items,
+  prefetch = true,
+  ...props
+}) {
+  const search = useSearchContext();
+  const hasSearch = search.enabled && !props.hideSearch;
+  const context = useMemo(
+    () => ({
+      defaultOpenLevel,
+      components: { ...defaultComponents, ...components },
+      prefetch
+    }),
+    [components, defaultOpenLevel, prefetch]
+  );
+  return /* @__PURE__ */ jsx(Context.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+    Base.SidebarList,
+    {
+      id: "nd-sidebar",
+      blockScrollingWidth: 768,
+      ...props.aside,
+      className: twMerge(
+        "fixed z-30 flex flex-col bg-fd-card text-sm md:sticky md:top-0 md:h-dvh md:w-[var(--fd-c-sidebar)] md:min-w-[var(--fd-sidebar-width)] md:border-e md:ps-[calc(var(--fd-c-sidebar)-var(--fd-sidebar-width))]",
+        "max-md:inset-0 max-md:bg-fd-background/80 max-md:pt-14 max-md:text-[15px] max-md:backdrop-blur-md max-md:data-[open=false]:hidden",
+        props.aside?.className
+      ),
+      children: [
+        hasSearch || props.banner ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ...props.bannerProps,
+            className: twMerge(
+              "flex flex-col gap-1 px-4 pt-2 md:px-3 md:pt-4",
+              props.bannerProps?.className
+            ),
+            children: [
+              props.banner,
+              hasSearch ? /* @__PURE__ */ jsx(LargeSearchToggle, { className: "rounded-lg max-md:hidden" }) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsx(ViewportContent, { items }),
+        props.footer ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...props.footerProps,
+            className: twMerge(
+              "flex flex-row items-center border-t py-1 max-md:px-4 md:mx-3",
+              props.footerProps?.className
+            ),
+            children: props.footer
+          }
+        ) : null
+      ]
+    }
+  ) });
+}
+function ViewportContent({
+  items
+}) {
+  const { root } = useTreeContext();
+  return /* @__PURE__ */ jsx(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxs(
+    ScrollViewport,
+    {
+      style: {
+        maskImage: "linear-gradient(to bottom, transparent 2px, white 24px)"
+      },
+      children: [
+        items.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-col px-4 pt-6 md:hidden", children: items.map((item, i) => /* @__PURE__ */ jsx(LinkItem, { item, on: "menu" }, i)) }) : null,
+        /* @__PURE__ */ jsx(NodeList, { items: root.children, className: "px-4 py-6 md:px-3" })
+      ]
+    }
+  ) });
+}
+function NodeList({
+  items,
+  level = 0,
+  ...props
+}) {
+  const { components } = useContext(Context);
+  return /* @__PURE__ */ jsx("div", { ...props, children: items.map((item, i) => {
+    const id = `${item.type}_${i.toString()}`;
+    switch (item.type) {
+      case "separator":
+        return /* @__PURE__ */ jsx(components.Separator, { item }, id);
+      case "folder":
+        return /* @__PURE__ */ jsx(components.Folder, { item, level: level + 1 }, id);
+      default:
+        return /* @__PURE__ */ jsx(components.Item, { item }, item.url);
+    }
+  }) });
+}
+function PageNode({
+  item: { icon, external = false, url, name }
+}) {
+  const pathname = usePathname();
+  const active = isActive(url, pathname, false);
+  const { prefetch } = useContext(Context);
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href: url,
+      external,
+      className: twMerge(itemVariants({ active })),
+      prefetch,
+      children: [
+        icon ?? (external ? /* @__PURE__ */ jsx(ExternalLinkIcon, {}) : null),
+        name
+      ]
+    }
+  );
+}
+function FolderNode({
+  item,
+  level
+}) {
+  const { defaultOpenLevel, prefetch } = useContext(Context);
+  const pathname = usePathname();
+  const active = item.index !== void 0 && isActive(item.index.url, pathname, false);
+  const childActive = useMemo(
+    () => hasActive(item.children, pathname),
+    [item.children, pathname]
+  );
+  const shouldExtend = active || childActive || (item.defaultOpen ?? defaultOpenLevel >= level);
+  const [open, setOpen] = useState(shouldExtend);
+  useOnChange(shouldExtend, (v) => {
+    if (v) setOpen(v);
+  });
+  const onClick = useCallback(
+    (e) => {
+      if (
+        // clicking on icon
+        e.target.hasAttribute("data-icon") || active
+      ) {
+        setOpen((prev) => !prev);
+        e.preventDefault();
+      }
+    },
+    [active]
+  );
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon,
+    item.name,
+    /* @__PURE__ */ jsx(
+      ChevronDown,
+      {
+        "data-icon": true,
+        className: twMerge("ms-auto transition-transform", !open && "-rotate-90")
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, children: [
+    item.index ? /* @__PURE__ */ jsx(
+      Link,
+      {
+        className: twMerge(itemVariants({ active })),
+        href: item.index.url,
+        onClick,
+        prefetch,
+        children: content
+      }
+    ) : /* @__PURE__ */ jsx(CollapsibleTrigger, { className: twMerge(itemVariants({ active })), children: content }),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(
+      NodeList,
+      {
+        className: "ms-2 flex flex-col border-s py-2 ps-2",
+        items: item.children,
+        level
+      }
+    ) })
+  ] });
+}
+function SeparatorNode({
+  item
+}) {
+  return /* @__PURE__ */ jsx("p", { className: "mb-2 mt-8 px-2 font-medium first:mt-0", children: item.name });
+}
+
+// src/components/layout/dynamic-sidebar.tsx
+import { useCallback as useCallback2, useRef, useState as useState2 } from "react";
+import { SidebarIcon } from "lucide-react";
+import { useOnChange as useOnChange2 } from "fumadocs-core/utils/use-on-change";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+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);
+  }, [setCollapsed]);
+  useOnChange2(collapsed, () => {
+    setHover(false);
+    closeTimeRef.current = Date.now() + 150;
+  });
+  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);
+        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-6 max-md:hidden xl:w-[50px]",
+        onPointerEnter: onEnter,
+        onPointerLeave: onLeave
+      }
+    ) : null,
+    collapsed ? /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Collapse Sidebar",
+        className: twMerge(
+          buttonVariants({
+            color: "secondary",
+            size: "icon",
+            className: "fixed start-4 bottom-2 z-10 max-md:hidden"
+          })
+        ),
+        onClick: onCollapse,
+        children: /* @__PURE__ */ jsx2(SidebarIcon, {})
+      }
+    ) : null,
+    /* @__PURE__ */ jsx2(
+      Sidebar,
+      {
+        ...props,
+        aside: {
+          "data-collapse": collapsed,
+          "data-hover": hover,
+          onPointerEnter: onEnter,
+          onPointerLeave: onLeave,
+          "aria-hidden": Boolean(collapsed && !hover),
+          className: twMerge(
+            "md:transition-[transform,padding,width,margin]",
+            collapsed && [
+              "md:top-1 md:me-fd-sidebar-offset md:h-[calc(100dvh-4px)] md:w-[var(--fd-sidebar-width)] md:animate-fd-sidebar-collapse md:rounded-xl md:border md:ps-0 md:shadow-md",
+              hover ? "md:translate-x-1 rtl:md:-translate-x-1" : "md:translate-x-[calc(var(--fd-sidebar-width)*-1)] rtl:md:translate-x-[var(--fd-sidebar-width)]"
+            ]
+          )
+        }
+      }
+    )
+  ] });
+}
+
+// src/docs-layout.client.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function SubNav({
   title,
   url,
@@ -47,17 +346,17 @@ function SubNav({
 }) {
   const { open } = useSidebar();
   const { enabled } = useSearchContext();
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsxs3(
     NavBox,
     {
       id: "nd-subnav",
       className: "flex h-14 flex-row items-center px-4 md:hidden",
       transparentMode,
       children: [
-        /* @__PURE__ */ jsx(Title, { url, title }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-row items-center", children }),
-        enabled && enableSearch ? /* @__PURE__ */ jsx(SearchToggle, {}) : null,
-        /* @__PURE__ */ jsx(
+        /* @__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,
           {
             className: twMerge(
@@ -67,7 +366,7 @@ function SubNav({
                 className: "-me-2"
               })
             ),
-            children: open ? /* @__PURE__ */ jsx(X, {}) : /* @__PURE__ */ jsx(Menu, {})
+            children: open ? /* @__PURE__ */ jsx3(X, {}) : /* @__PURE__ */ jsx3(Menu, {})
           }
         )
       ]
@@ -76,7 +375,7 @@ function SubNav({
 }
 function SidebarCollapseTrigger() {
   const { setCollapsed } = useSidebar();
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     "button",
     {
       type: "button",
@@ -88,14 +387,16 @@ function SidebarCollapseTrigger() {
           className: "ms-auto max-md:hidden"
         })
       ),
-      onClick: useCallback(() => {
+      onClick: useCallback3(() => {
         setCollapsed((prev) => !prev);
       }, [setCollapsed]),
-      children: /* @__PURE__ */ jsx(SidebarIcon, {})
+      children: /* @__PURE__ */ jsx3(SidebarIcon2, {})
     }
   );
 }
 export {
+  DynamicSidebar,
+  LanguageToggle,
   LinksMenu,
   Sidebar,
   SidebarCollapseTrigger,

package/dist/{edit-on-github-FSFN5H36.js → edit-on-github-YFVYCMB7.js}

@@ -41,6 +41,7 @@ var EditOnGitHub = forwardRef(
   }
 );
 EditOnGitHub.displayName = "EditOnGitHub";
+var edit_on_github_default = EditOnGitHub;
 export {
-  EditOnGitHub
+  edit_on_github_default as default
 };

package/dist/home-layout.client.d.ts

@@ -1,7 +1,8 @@
-import { S as SharedNavProps, L as LinkItemType } from './layout.shared-C5L62VPM.js';
+import { S as SharedNavProps, L as LinkItemType } from './layout.shared-DEQFTB9M.js';
 import 'react';
 
-declare function Nav({ title, url, items, transparentMode, enableSearch, children, }: SharedNavProps & {
+declare function Nav({ title, url, items, transparentMode, enableSearch, i18n, children, }: SharedNavProps & {
+    i18n?: boolean;
     items: LinkItemType[];
 }): React.ReactElement;
 

package/dist/home-layout.client.js

@@ -1,15 +1,16 @@
 "use client";
 import {
+  LargeSearchToggle,
+  LinkItem,
+  LinksMenu,
   NavBox,
+  SearchToggle,
   ThemeToggle,
   Title
-} from "./chunk-J5B4GINE.js";
+} from "./chunk-KCZRDPB4.js";
 import {
-  LargeSearchToggle,
-  LinkItem,
-  LinksMenu,
-  SearchToggle
-} from "./chunk-N47AX4K6.js";
+  LanguageToggle
+} from "./chunk-NSEJBI4V.js";
 import "./chunk-CP67AHDD.js";
 import "./chunk-UOD2T27N.js";
 import {
@@ -36,6 +37,7 @@ function Nav({
   items,
   transparentMode,
   enableSearch = true,
+  i18n,
   children
 }) {
   const search = useSearchContext();
@@ -62,9 +64,15 @@ function Nav({
               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-fd-muted-foreground", children: text.chooseTheme }),
-            /* @__PURE__ */ jsx(ThemeToggle, {})
+          footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between px-2 pt-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "font-medium text-fd-muted-foreground", children: text.chooseTheme }),
+              /* @__PURE__ */ jsx(ThemeToggle, {})
+            ] }),
+            i18n ? /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between px-2 pt-2", children: [
+              /* @__PURE__ */ jsx("p", { className: "font-medium text-fd-muted-foreground", children: text.chooseLanguage }),
+              /* @__PURE__ */ jsx(LanguageToggle, {})
+            ] }) : null
           ] }),
           children: /* @__PURE__ */ jsx(MoreVertical, {})
         }

package/dist/home-layout.d.ts

@@ -1,7 +1,7 @@
-import { B as BaseLayoutProps } from './layout.shared-C5L62VPM.js';
+import { B as BaseLayoutProps } from './layout.shared-DEQFTB9M.js';
 import 'react';
 
 type HomeLayoutProps = BaseLayoutProps;
-declare function HomeLayout({ nav, links, githubUrl, children, }: BaseLayoutProps): React.ReactElement;
+declare function HomeLayout({ nav, links, githubUrl, i18n, children, }: BaseLayoutProps): React.ReactElement;
 
 export { HomeLayout, type HomeLayoutProps };

package/dist/home-layout.js

@@ -13,13 +13,14 @@ function HomeLayout({
   nav = {},
   links = [],
   githubUrl,
+  i18n,
   children
 }) {
   const finalLinks = getLinks(links, githubUrl);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     replaceOrDefault(
       nav,
-      /* @__PURE__ */ jsx(Nav, { items: finalLinks, ...nav, children: nav.children })
+      /* @__PURE__ */ jsx(Nav, { items: finalLinks, i18n, ...nav, children: nav.children })
     ),
     children
   ] });

package/dist/layout.d.ts

@@ -1,8 +1,8 @@
 import { PageTree } from 'fumadocs-core/server';
 import { HTMLAttributes, ReactNode } from 'react';
-import { S as SidebarProps } from './sidebar-BguPKq_K.js';
-import { B as BaseLayoutProps } from './layout.shared-C5L62VPM.js';
-export { L as LinkItemType } from './layout.shared-C5L62VPM.js';
+import { S as SidebarProps } from './sidebar-DwBSl7jC.js';
+import { B as BaseLayoutProps } from './layout.shared-DEQFTB9M.js';
+export { L as LinkItemType } from './layout.shared-DEQFTB9M.js';
 
 interface SidebarOptions extends Omit<SidebarProps, 'items'> {
     enabled: boolean;
@@ -13,12 +13,6 @@ interface DocsLayoutProps extends BaseLayoutProps {
     tree: PageTree.Root;
     sidebar?: Partial<SidebarOptions>;
     containerProps?: HTMLAttributes<HTMLDivElement>;
-    /**
-     * Enable Language Switch
-     *
-     * @defaultValue false
-     */
-    i18n?: boolean;
 }
 declare function DocsLayout({ nav, githubUrl, sidebar: { enabled: sidebarEnabled, collapsible, component: sidebarReplace, ...sidebar }, containerProps, i18n, ...props }: DocsLayoutProps): React.ReactNode;
 

package/dist/layout.js

@@ -3,7 +3,9 @@ import {
   SidebarCollapseTrigger,
   ThemeToggle,
   SubNav,
+  LanguageToggle,
   LinksMenu,
+  DynamicSidebar,
   Sidebar,
 } from "./docs-layout.client"
 import {
@@ -23,19 +25,8 @@ import "./chunk-MLKGABMK.js";
 // src/layout.tsx
 import Link from "next/link";
 import { MoreHorizontal } from "lucide-react";
-import dynamic from "next/dynamic";
 import { notFound } from "next/navigation";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var LanguageToggle = dynamic(
-  () => import("./components/layout/language-toggle.js").then(
-    (mod) => mod.LanguageToggle
-  )
-);
-var DynamicSidebar = dynamic(
-  () => import("./dynamic-sidebar-JFB3Z7SK.js").then(
-    (mod) => mod.DynamicSidebar
-  )
-);
 function DocsLayout({
   nav,
   githubUrl,

package/dist/{layout.shared-C5L62VPM.d.ts → layout.shared-DEQFTB9M.d.ts}

@@ -96,6 +96,12 @@ interface SharedNavProps extends TitleProps, NavBoxProps {
     children?: ReactNode;
 }
 interface BaseLayoutProps {
+    /**
+     * Enable Language Switch
+     *
+     * @defaultValue false
+     */
+    i18n?: boolean;
     /**
      * GitHub url
      */

package/dist/page.js

@@ -25,7 +25,7 @@ import { AnchorProvider } from "fumadocs-core/toc";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ClerkTOCItems = dynamic(() => import("./toc-clerk-CAID2WGC.js"));
 var EditOnGitHub = dynamic(
-  () => import("./edit-on-github-FSFN5H36.js").then((mod) => mod.EditOnGitHub)
+  () => import("./edit-on-github-YFVYCMB7.js")
 );
 function DocsPage({
   toc = [],
@@ -67,6 +67,7 @@ function DocsPage({
             /* @__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"

package/dist/{sidebar-BguPKq_K.d.ts → sidebar-DwBSl7jC.d.ts}

@@ -1,6 +1,6 @@
 import { PageTree } from 'fumadocs-core/server';
 import { HTMLAttributes } from 'react';
-import { L as LinkItemType } from './layout.shared-C5L62VPM.js';
+import { L as LinkItemType } from './layout.shared-DEQFTB9M.js';
 
 interface SidebarProps {
     items: LinkItemType[];