fumadocs-ui 13.4.9 → 14.0.0

package/dist/dynamic-sidebar-QWGMOUMS.js

@@ -0,0 +1,129 @@
+"use client";
+import {
+  Sidebar
+} from "./chunk-BN7HGCQ4.js";
+import "./chunk-V6RONFCQ.js";
+import "./chunk-CDPVENXR.js";
+import "./chunk-TQJ6YPJ3.js";
+import {
+  buttonVariants
+} from "./chunk-QKOA6KEZ.js";
+import "./chunk-2FLZOPQN.js";
+import {
+  PanelLeft
+} from "./chunk-5QPVK7QM.js";
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+import "./chunk-ET4TW6M5.js";
+import "./chunk-YL3MZH7N.js";
+import {
+  useSidebar
+} from "./chunk-27HFSL7N.js";
+import "./chunk-EFMHXXHW.js";
+import "./chunk-MLKGABMK.js";
+
+// src/components/layout/dynamic-sidebar.tsx
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DynamicSidebar(props) {
+  const { collapsed, setCollapsed } = useSidebar();
+  const [hover, setHover] = useState(false);
+  const timerRef = useRef(0);
+  const closeTimeRef = useRef(0);
+  useOnChange(collapsed, () => {
+    setHover(false);
+    closeTimeRef.current = Date.now() + 150;
+  });
+  const onEnter = useCallback((e) => {
+    if (e.pointerType === "touch" || closeTimeRef.current > Date.now()) return;
+    window.clearTimeout(timerRef.current);
+    setHover(true);
+  }, []);
+  const onLeave = useCallback((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__ */ jsxs(Fragment, { children: [
+    collapsed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "fixed inset-y-0 start-0 w-6 max-md:hidden",
+          onPointerEnter: onEnter,
+          onPointerLeave: onLeave
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "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: () => {
+            setCollapsed((v) => !v);
+          },
+          children: /* @__PURE__ */ jsx(PanelLeft, {})
+        }
+      ),
+      /* @__PURE__ */ jsx("style", { children: `#nd-page { --fd-sidebar-width: 0px; }` })
+    ] }) : null,
+    /* @__PURE__ */ jsx(
+      Sidebar,
+      {
+        ...props,
+        aside: useMemo(
+          () => ({
+            "data-collapse": collapsed,
+            "data-hover": hover,
+            onPointerEnter: collapsed ? onEnter : void 0,
+            onPointerLeave: collapsed ? onLeave : void 0,
+            "aria-hidden": Boolean(collapsed && !hover),
+            style: {
+              // the offset given to docs content when the sidebar is collapsed
+              "--fd-content-offset": "calc(var(--fd-sidebar-width) * -1)"
+            },
+            className: twMerge(
+              "md:transition-[transform,margin,flex]",
+              collapsed && [
+                "md:me-[var(--fd-content-offset)] md:grow-0 md:shadow-md",
+                hover ? "md:translate-x-0" : "md:translate-x-[calc(var(--fd-sidebar-width)*-1)] rtl:md:translate-x-[var(--fd-sidebar-width)]"
+              ],
+              ``
+            )
+          }),
+          [collapsed, hover, onEnter, onLeave]
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "none",
+        className: twMerge("transition-all max-md:hidden", collapsed && "flex-1")
+      }
+    )
+  ] });
+}
+export {
+  DynamicSidebar as default
+};

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

@@ -1,18 +1,20 @@
 "use client";
-import {
-  useI18n
-} from "./chunk-EFMHXXHW.js";
 import {
   buttonVariants
-} from "./chunk-EDNTYBXS.js";
+} from "./chunk-QKOA6KEZ.js";
+import {
+  SquarePen
+} from "./chunk-5QPVK7QM.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
+import {
+  useI18n
+} from "./chunk-EFMHXXHW.js";
 import "./chunk-MLKGABMK.js";
 
 // src/components/layout/edit-on-github.tsx
 import { forwardRef } from "react";
-import { Edit } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var EditOnGitHub = forwardRef(
   ({ owner, repo, sha = "main", path, ...props }, ref) => {
@@ -27,13 +29,13 @@ var EditOnGitHub = forwardRef(
         ...props,
         className: twMerge(
           buttonVariants({
-            color: "outline",
-            className: "text-fd-muted-foreground text-xs p-1.5 gap-2"
+            color: "secondary",
+            className: "gap-1.5 py-1 text-fd-muted-foreground"
           }),
           props.className
         ),
         children: [
-          /* @__PURE__ */ jsx(Edit, { className: "size-3.5" }),
+          /* @__PURE__ */ jsx(SquarePen, { className: "size-3.5" }),
           text.editOnGithub
         ]
       }

package/dist/layouts/docs.client.d.ts

@@ -0,0 +1,26 @@
+import { ReactNode, ButtonHTMLAttributes } from 'react';
+import { L as LinkItemType, S as SharedNavProps } from '../shared-ElIzX-sQ.js';
+export { I as IconItem, N as NavProvider } from '../shared-ElIzX-sQ.js';
+export { RootToggle } from '../components/layout/root-toggle.js';
+export { a as Sidebar } from '../sidebar-HwpSmOKR.js';
+export { T as TreeContextProvider } from '../tree-06ley65N.js';
+export { LanguageToggle, LanguageToggleText } from '../components/layout/language-toggle.js';
+import 'fumadocs-core/server';
+
+interface MenuItemProps extends React.HTMLAttributes<HTMLElement> {
+    item: LinkItemType;
+}
+declare function MenuItem({ item, ...props }: MenuItemProps): ReactNode;
+
+declare function ThemeToggle({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): React.ReactElement;
+
+declare function SubNav({ title, url, enableSearch, ...props }: Omit<SharedNavProps, 'transparentMode'> & {
+    className?: string;
+}): React.ReactElement;
+declare function SidebarCollapseTrigger(props: ButtonHTMLAttributes<HTMLButtonElement>): React.ReactElement;
+interface LinksMenuProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    items?: ReactNode;
+}
+declare function LinksMenu({ items, ...props }: LinksMenuProps): ReactNode;
+
+export { LinksMenu, MenuItem, SidebarCollapseTrigger, SubNav, ThemeToggle };

package/dist/layouts/docs.client.js

@@ -0,0 +1,200 @@
+"use client";
+import {
+  Sidebar,
+  itemVariants
+} from "../chunk-BN7HGCQ4.js";
+import {
+  BaseLinkItem,
+  ButtonItem,
+  IconItem,
+  ThemeToggle
+} from "../chunk-PZTQPB4U.js";
+import {
+  SearchToggle
+} from "../chunk-V6RONFCQ.js";
+import {
+  LanguageToggle,
+  LanguageToggleText
+} from "../chunk-KZTWSBYY.js";
+import {
+  RootToggle
+} from "../chunk-WRBUXI2A.js";
+import "../chunk-CDPVENXR.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "../chunk-TQJ6YPJ3.js";
+import {
+  buttonVariants
+} from "../chunk-QKOA6KEZ.js";
+import {
+  NavContext,
+  NavProvider,
+  Title
+} from "../chunk-MCX7E6ZW.js";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "../chunk-IVBHRX3O.js";
+import "../chunk-2FLZOPQN.js";
+import {
+  ChevronDown,
+  Menu,
+  PanelLeft,
+  X
+} from "../chunk-5QPVK7QM.js";
+import {
+  twMerge
+} from "../chunk-TK3TM3MR.js";
+import {
+  useSearchContext
+} from "../chunk-ET4TW6M5.js";
+import {
+  TreeContextProvider
+} from "../chunk-YL3MZH7N.js";
+import {
+  useSidebar
+} from "../chunk-27HFSL7N.js";
+import "../chunk-EFMHXXHW.js";
+import "../chunk-MLKGABMK.js";
+
+// src/layouts/docs.client.tsx
+import { SidebarTrigger } from "fumadocs-core/sidebar";
+import {
+  useContext,
+  useState
+} from "react";
+import { usePathname } from "next/navigation";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+
+// src/layouts/menu-item.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function MenuItem({ item, ...props }) {
+  if (item.type === "custom")
+    return /* @__PURE__ */ jsx("div", { ...props, className: twMerge("grid", props.className), children: item.children });
+  if (item.type === "menu") {
+    return /* @__PURE__ */ jsxs(Collapsible, { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs(
+        CollapsibleTrigger,
+        {
+          ...props,
+          "data-active": false,
+          className: twMerge(itemVariants(), "group/link", props.className),
+          children: [
+            item.icon,
+            item.text,
+            /* @__PURE__ */ jsx(ChevronDown, { className: "ms-auto transition-transform group-data-[state=closed]/link:-rotate-90" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ms-2 flex flex-col border-s py-2 ps-2", children: item.items.map((child, i) => /* @__PURE__ */ jsx(MenuItem, { item: child }, i)) }) })
+    ] });
+  }
+  if (item.type === "button") {
+    return /* @__PURE__ */ jsx(ButtonItem, { item, ...props });
+  }
+  return /* @__PURE__ */ jsxs(
+    BaseLinkItem,
+    {
+      item,
+      ...props,
+      className: twMerge(itemVariants(), props.className),
+      children: [
+        item.icon,
+        item.text
+      ]
+    }
+  );
+}
+
+// src/layouts/docs.client.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function SubNav({
+  title,
+  url,
+  enableSearch = true,
+  ...props
+}) {
+  const { open } = useSidebar();
+  const { isTransparent } = useContext(NavContext);
+  const search = useSearchContext();
+  return /* @__PURE__ */ jsxs2(
+    "header",
+    {
+      id: "nd-subnav",
+      ...props,
+      className: twMerge(
+        "sticky top-[var(--fd-banner-height)] z-40 flex flex-row items-center border-b border-fd-foreground/10 px-4 transition-colors",
+        (!isTransparent || open) && "bg-fd-background/80 backdrop-blur-lg",
+        props.className
+      ),
+      children: [
+        /* @__PURE__ */ jsx2(Title, { url, title }),
+        /* @__PURE__ */ jsx2("div", { className: "flex flex-1 flex-row items-center gap-1", children: props.children }),
+        search.enabled && enableSearch ? /* @__PURE__ */ jsx2(SearchToggle, {}) : null,
+        /* @__PURE__ */ jsx2(
+          SidebarTrigger,
+          {
+            className: twMerge(
+              buttonVariants({
+                color: "ghost",
+                size: "icon",
+                className: "-me-2 md:hidden"
+              })
+            ),
+            children: open ? /* @__PURE__ */ jsx2(X, {}) : /* @__PURE__ */ jsx2(Menu, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function SidebarCollapseTrigger(props) {
+  const { setCollapsed } = useSidebar();
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Collapse Sidebar",
+      ...props,
+      className: twMerge(
+        buttonVariants({
+          color: "ghost",
+          size: "icon"
+        }),
+        props.className
+      ),
+      onClick: () => {
+        setCollapsed((prev) => !prev);
+      },
+      children: /* @__PURE__ */ jsx2(PanelLeft, {})
+    }
+  );
+}
+function LinksMenu({ items, ...props }) {
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+  useOnChange(pathname, () => {
+    setOpen(false);
+  });
+  return /* @__PURE__ */ jsxs2(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx2(PopoverTrigger, { ...props }),
+    /* @__PURE__ */ jsx2(PopoverContent, { className: "flex flex-col p-1", children: items })
+  ] });
+}
+export {
+  IconItem,
+  LanguageToggle,
+  LanguageToggleText,
+  LinksMenu,
+  MenuItem,
+  NavProvider,
+  RootToggle,
+  Sidebar,
+  SidebarCollapseTrigger,
+  SubNav,
+  ThemeToggle,
+  TreeContextProvider
+};

package/dist/layouts/docs.d.ts

@@ -0,0 +1,29 @@
+import { PageTree } from 'fumadocs-core/server';
+import { HTMLAttributes, ReactNode } from 'react';
+import { S as SidebarProps } from '../sidebar-HwpSmOKR.js';
+import { B as BaseLayoutProps } from '../shared-ElIzX-sQ.js';
+export { L as LinkItemType } from '../shared-ElIzX-sQ.js';
+import { Option } from '../components/layout/root-toggle.js';
+
+interface TabOptions {
+    transform?: (option: Option, node: PageTree.Folder) => Option | null;
+}
+declare function getSidebarTabs(pageTree: PageTree.Root, { transform }?: TabOptions): Option[];
+
+interface SidebarOptions extends Omit<SidebarProps, 'children'> {
+    enabled: boolean;
+    component: ReactNode;
+    collapsible: boolean;
+    /**
+     * Root Toggle options
+     */
+    tabs?: Option[] | TabOptions | false;
+}
+interface DocsLayoutProps extends BaseLayoutProps {
+    tree: PageTree.Root;
+    sidebar?: Partial<SidebarOptions>;
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+}
+declare function DocsLayout({ nav: { transparentMode, ...nav }, sidebar: { enabled: sidebarEnabled, collapsible, component: sidebarReplace, tabs: tabOptions, ...sidebar }, i18n, ...props }: DocsLayoutProps): ReactNode;
+
+export { DocsLayout, type DocsLayoutProps, type TabOptions, getSidebarTabs };

package/dist/layouts/docs.js

@@ -0,0 +1,187 @@
+import {
+  TreeContextProvider,
+  SidebarCollapseTrigger,
+  ThemeToggle,
+  SubNav,
+  LanguageToggle,
+  LanguageToggleText,
+  LinksMenu,
+  RootToggle,
+  Sidebar,
+  IconItem,
+  MenuItem,
+  NavProvider,
+} from "./docs.client"
+import {
+  buttonVariants
+} from "../chunk-QKOA6KEZ.js";
+import {
+  Ellipsis,
+  Languages
+} from "../chunk-5QPVK7QM.js";
+import {
+  getLinks,
+  replaceOrDefault
+} from "../chunk-UQIRU7MP.js";
+import {
+  twMerge
+} from "../chunk-TK3TM3MR.js";
+import "../chunk-MLKGABMK.js";
+
+// src/layouts/docs.tsx
+import { Fragment } from "react";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import dynamic from "next/dynamic";
+
+// src/utils/get-sidebar-tabs.tsx
+function getSidebarTabs(pageTree, { transform } = {}) {
+  const options = [];
+  function traverse(node) {
+    if (node.type === "folder" && node.root && node.index) {
+      const option = {
+        url: node.index.url,
+        title: node.name,
+        icon: node.icon,
+        description: node.description
+      };
+      const mapped = transform ? transform(option, node) : option;
+      if (mapped) options.push(mapped);
+    }
+    if (node.type === "folder") node.children.forEach(traverse);
+  }
+  pageTree.children.forEach(traverse);
+  return options;
+}
+
+// src/layouts/docs.tsx
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+var DynamicSidebar = dynamic(
+  () => import("../dynamic-sidebar-QWGMOUMS.js")
+);
+function DocsLayout({
+  nav: { transparentMode, ...nav } = {},
+  sidebar: {
+    enabled: sidebarEnabled = true,
+    collapsible = true,
+    component: sidebarReplace,
+    tabs: tabOptions,
+    ...sidebar
+  } = {},
+  i18n = false,
+  ...props
+}) {
+  const links = getLinks(props.links ?? [], props.githubUrl);
+  const Aside = collapsible ? DynamicSidebar : Sidebar;
+  if (props.tree === void 0) notFound();
+  const header = [];
+  const footer = [];
+  if (nav.title)
+    header.push(
+      /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: nav.url ?? "/",
+          className: "inline-flex items-center gap-2.5 py-1 font-medium",
+          children: nav.title
+        },
+        "title"
+      )
+    );
+  if (nav.children)
+    header.push(/* @__PURE__ */ jsx(Fragment, { children: nav.children }, "children"));
+  if (links.length > 0)
+    header.push(
+      /* @__PURE__ */ jsx(
+        LinksMenu,
+        {
+          items: links.map((item, i) => /* @__PURE__ */ jsx(MenuItem, { item }, i)),
+          className: twMerge(
+            buttonVariants({
+              size: "icon",
+              color: "ghost",
+              className: "ms-auto"
+            })
+          ),
+          children: /* @__PURE__ */ jsx(Ellipsis, {})
+        },
+        "links"
+      )
+    );
+  const iconLinks = links.filter((v) => v.type === "icon");
+  if (iconLinks.length > 0) {
+    footer.push(
+      /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center md:hidden", children: iconLinks.map((item, i) => /* @__PURE__ */ jsx(IconItem, { item, className: "text-fd-muted-foreground" }, i)) }, "links")
+    );
+  }
+  if (!props.disableThemeSwitch) {
+    footer.push(
+      /* @__PURE__ */ jsx(
+        ThemeToggle,
+        {
+          className: twMerge("md:me-auto", !i18n && "max-md:ms-auto")
+        },
+        "theme"
+      )
+    );
+  }
+  if (i18n) {
+    footer.push(
+      /* @__PURE__ */ jsxs(LanguageToggle, { className: "max-md:order-first max-md:me-auto", children: [
+        /* @__PURE__ */ jsx(Languages, { className: "size-5" }),
+        /* @__PURE__ */ jsx(LanguageToggleText, { className: "md:hidden" })
+      ] }, "i18n")
+    );
+  }
+  if (collapsible) {
+    footer.push(
+      /* @__PURE__ */ jsx(SidebarCollapseTrigger, { className: "max-md:hidden" }, "sidebar")
+    );
+  }
+  let tabs = [];
+  if (Array.isArray(tabOptions)) tabs = tabOptions;
+  else if (typeof tabOptions === "object")
+    tabs = getSidebarTabs(props.tree, tabOptions);
+  else if (tabOptions !== false) tabs = getSidebarTabs(props.tree);
+  return /* @__PURE__ */ jsx(TreeContextProvider, { tree: props.tree, children: /* @__PURE__ */ jsxs(NavProvider, { transparentMode, children: [
+    replaceOrDefault(nav, /* @__PURE__ */ jsx(SubNav, { className: "h-14 md:hidden", ...nav })),
+    /* @__PURE__ */ jsxs(
+      "main",
+      {
+        id: "nd-docs-layout",
+        ...props.containerProps,
+        className: twMerge(
+          "flex flex-1 flex-row",
+          !nav.component && nav.enabled !== false && "[--fd-nav-height:3.5rem] md:[--fd-nav-height:0px]",
+          props.containerProps?.className
+        ),
+        children: [
+          replaceOrDefault(
+            { enabled: sidebarEnabled, component: sidebarReplace },
+            /* @__PURE__ */ jsx(
+              Aside,
+              {
+                ...sidebar,
+                banner: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 px-4 empty:hidden md:px-3 md:pb-2", children: [
+                  header.length > 0 ? /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center border-b pb-2 max-md:hidden", children: header }) : null,
+                  tabs.length > 0 ? /* @__PURE__ */ jsx(RootToggle, { className: "-mx-1", options: tabs }) : null,
+                  sidebar.banner
+                ] }),
+                footer: /* @__PURE__ */ jsxs(Fragment2, { children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center border-t py-1 empty:hidden max-md:gap-1.5 max-md:px-3 md:mx-3", children: footer }),
+                  sidebar.footer
+                ] }),
+                children: /* @__PURE__ */ jsx("div", { className: "flex flex-col px-2 pt-4 empty:hidden md:hidden", children: links.filter((v) => v.type !== "icon").map((item, i) => /* @__PURE__ */ jsx(MenuItem, { item }, i)) })
+              }
+            )
+          ),
+          props.children
+        ]
+      }
+    )
+  ] }) });
+}
+export {
+  DocsLayout,
+  getSidebarTabs
+};

package/dist/layouts/home.client.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { S as SharedNavProps, L as LinkItemType } from '../shared-ElIzX-sQ.js';
+export { N as NavProvider } from '../shared-ElIzX-sQ.js';
+
+declare function Nav({ items, enableSearch, ...props }: Omit<SharedNavProps, 'transparentMode'> & {
+    disableThemeSwitch?: boolean;
+    i18n?: boolean;
+    items: LinkItemType[];
+}): ReactNode;
+
+export { Nav };