fumadocs-ui 13.4.5 → 13.4.7

package/dist/{chunk-N47AX4K6.js → chunk-KCZRDPB4.js}

@@ -25,14 +25,104 @@ import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
 
-// src/components/layout/link-item.tsx
+// src/components/layout/search-toggle.tsx
+import { useCallback } from "react";
+import { SearchIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function SearchToggle(props) {
+  const { setOpenSearch } = useSearchContext();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: twMerge(
+        buttonVariants({
+          size: "icon",
+          color: "ghost",
+          className: props.className
+        })
+      ),
+      "data-search": "",
+      "aria-label": "Open Search",
+      onClick: useCallback(() => {
+        setOpenSearch(true);
+      }, [setOpenSearch]),
+      children: /* @__PURE__ */ jsx(SearchIcon, {})
+    }
+  );
+}
+function LargeSearchToggle(props) {
+  const { hotKey, setOpenSearch } = useSearchContext();
+  const { text } = useI18n();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-search-full": "",
+      ...props,
+      className: twMerge(
+        "inline-flex items-center gap-2 rounded-full border bg-fd-secondary/50 p-1.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground",
+        props.className
+      ),
+      onClick: useCallback(() => {
+        setOpenSearch(true);
+      }, [setOpenSearch]),
+      children: [
+        /* @__PURE__ */ jsx(SearchIcon, { className: "ms-1 size-4" }),
+        text.search,
+        /* @__PURE__ */ jsx("div", { className: "ms-auto inline-flex gap-0.5", children: hotKey.map((k, i) => /* @__PURE__ */ jsx("kbd", { className: "rounded-md border bg-fd-background px-1.5", children: k.display }, i)) })
+      ]
+    }
+  );
+}
+
+// src/components/layout/nav.tsx
 import Link from "fumadocs-core/link";
+import {
+  useEffect,
+  useState
+} from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function NavBox({
+  transparentMode = "none",
+  ...props
+}) {
+  const [transparent, setTransparent] = useState(transparentMode !== "none");
+  useEffect(() => {
+    if (transparentMode !== "top") return;
+    const listener = () => {
+      setTransparent(window.scrollY < 10);
+    };
+    listener();
+    window.addEventListener("scroll", listener);
+    return () => {
+      window.removeEventListener("scroll", listener);
+    };
+  }, [transparentMode]);
+  return /* @__PURE__ */ jsx2(
+    "header",
+    {
+      ...props,
+      className: twMerge(
+        "sticky top-0 z-40 border-b transition-colors",
+        transparent ? "border-transparent" : "border-fd-foreground/10 bg-fd-background/60 backdrop-blur-md",
+        props.className
+      )
+    }
+  );
+}
+function Title({ title, url = "/" }) {
+  return /* @__PURE__ */ jsx2(Link, { href: url, className: "inline-flex items-center gap-2 font-semibold", children: title });
+}
+
+// src/components/layout/link-item.tsx
+import Link2 from "fumadocs-core/link";
 import { ChevronDown } from "lucide-react";
 import { usePathname } from "next/navigation";
 import { cva } from "class-variance-authority";
-import { useState } from "react";
+import { useState as useState2 } from "react";
 import { useOnChange } from "fumadocs-core/utils/use-on-change";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var linkItemVariants = cva(
   "-m-2 inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors [&_svg]:size-4",
   {
@@ -57,7 +147,7 @@ function LinkItem({
   if (item.on && item.on !== "all" && item.on !== on) return null;
   if (item.type === "custom") return item.children;
   if (item.type === "menu" && on === "nav") {
-    return /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs2(
       LinksMenu,
       {
         items: item.items,
@@ -66,14 +156,14 @@ function LinkItem({
         children: [
           item.icon,
           item.text,
-          /* @__PURE__ */ jsx(ChevronDown, { className: "ms-auto !size-3.5" })
+          /* @__PURE__ */ jsx3(ChevronDown, { className: "ms-auto !size-3.5" })
         ]
       }
     );
   }
   if (item.type === "menu") {
-    return /* @__PURE__ */ jsxs(Collapsible, { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxs(
+    return /* @__PURE__ */ jsxs2(Collapsible, { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsxs2(
         CollapsibleTrigger,
         {
           className: twMerge(itemVariants({ className }), "group/link"),
@@ -81,16 +171,16 @@ function LinkItem({
           children: [
             item.icon,
             item.text,
-            /* @__PURE__ */ jsx(ChevronDown, { className: "ms-auto transition-transform group-data-[state=closed]/link:-rotate-90" })
+            /* @__PURE__ */ jsx3(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(LinkItem, { item: child, on: "menu" }, i)) }) })
+      /* @__PURE__ */ jsx3(CollapsibleContent, { children: /* @__PURE__ */ jsx3("div", { className: "ms-2 flex flex-col border-s py-2 ps-2", children: item.items.map((child, i) => /* @__PURE__ */ jsx3(LinkItem, { item: child, on: "menu" }, i)) }) })
     ] });
   }
   if (item.type === "button") {
-    return /* @__PURE__ */ jsxs(
-      Link,
+    return /* @__PURE__ */ jsxs2(
+      Link2,
       {
         href: item.url,
         external: item.external,
@@ -109,8 +199,8 @@ function LinkItem({
   const activeType = item.active ?? "url";
   const active = activeType !== "none" && isActive(item.url, pathname, activeType === "nested-url");
   if (item.type === "icon" && on === "nav") {
-    return /* @__PURE__ */ jsx(
-      Link,
+    return /* @__PURE__ */ jsx3(
+      Link2,
       {
         "aria-label": item.label,
         href: item.url,
@@ -127,8 +217,8 @@ function LinkItem({
       }
     );
   }
-  return /* @__PURE__ */ jsxs(
-    Link,
+  return /* @__PURE__ */ jsxs2(
+    Link2,
     {
       href: item.url,
       external: item.external,
@@ -151,74 +241,68 @@ function LinksMenu({
   footer,
   ...props
 }) {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState2(false);
   const pathname = usePathname();
   useOnChange(pathname, () => {
     setOpen(false);
   });
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { ...props }),
-    /* @__PURE__ */ jsxs(PopoverContent, { className: "flex flex-col", children: [
-      items.map((item, i) => /* @__PURE__ */ jsx(LinkItem, { item, on: "menu" }, i)),
+  return /* @__PURE__ */ jsxs2(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx3(PopoverTrigger, { ...props }),
+    /* @__PURE__ */ jsxs2(PopoverContent, { className: "flex flex-col", children: [
+      items.map((item, i) => /* @__PURE__ */ jsx3(LinkItem, { item, on: "menu" }, i)),
       footer
     ] })
   ] });
 }
 
-// src/components/layout/search-toggle.tsx
-import { useCallback } from "react";
-import { SearchIcon } from "lucide-react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function SearchToggle(props) {
-  const { setOpenSearch } = useSearchContext();
-  return /* @__PURE__ */ jsx2(
-    "button",
-    {
-      type: "button",
-      className: twMerge(
-        buttonVariants({
-          size: "icon",
-          color: "ghost",
-          className: props.className
-        })
-      ),
-      "data-search": "",
-      "aria-label": "Open Search",
-      onClick: useCallback(() => {
-        setOpenSearch(true);
-      }, [setOpenSearch]),
-      children: /* @__PURE__ */ jsx2(SearchIcon, {})
+// src/components/layout/theme-toggle.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import { useCallback as useCallback2 } from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var buttonVariants2 = cva2("size-6 rounded-full p-1 text-fd-muted-foreground", {
+  variants: {
+    dark: {
+      true: "dark:bg-fd-accent dark:text-fd-accent-foreground",
+      false: "bg-fd-accent text-fd-accent-foreground dark:bg-transparent dark:text-fd-muted-foreground"
     }
-  );
-}
-function LargeSearchToggle(props) {
-  const { hotKey, setOpenSearch } = useSearchContext();
-  const { text } = useI18n();
-  return /* @__PURE__ */ jsxs2(
+  }
+});
+function ThemeToggle({
+  className,
+  ...props
+}) {
+  const { setTheme, resolvedTheme } = useTheme();
+  const onToggle = useCallback2(() => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  }, [setTheme, resolvedTheme]);
+  return /* @__PURE__ */ jsxs3(
     "button",
     {
       type: "button",
-      "data-search-full": "",
-      ...props,
       className: twMerge(
-        "inline-flex items-center gap-2 rounded-full border bg-fd-secondary/50 p-1.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground",
-        props.className
+        "inline-flex items-center rounded-full border p-0.5",
+        className
       ),
-      onClick: useCallback(() => {
-        setOpenSearch(true);
-      }, [setOpenSearch]),
+      "data-theme-toggle": "",
+      "aria-label": "Toggle Theme",
+      onClick: onToggle,
+      ...props,
       children: [
-        /* @__PURE__ */ jsx2(SearchIcon, { className: "ms-1 size-4" }),
-        text.search,
-        /* @__PURE__ */ jsx2("div", { className: "ms-auto inline-flex gap-0.5", children: hotKey.map((k, i) => /* @__PURE__ */ jsx2("kbd", { className: "rounded-md border bg-fd-background px-1.5", children: k.display }, i)) })
+        /* @__PURE__ */ jsx4(Sun, { className: twMerge(buttonVariants2({ dark: false })) }),
+        /* @__PURE__ */ jsx4(Moon, { className: twMerge(buttonVariants2({ dark: true })) })
       ]
     }
   );
 }
 
 export {
+  SearchToggle,
+  LargeSearchToggle,
+  NavBox,
+  Title,
   LinkItem,
   LinksMenu,
-  SearchToggle,
-  LargeSearchToggle
+  ThemeToggle
 };

package/dist/chunk-NSEJBI4V.js

@@ -0,0 +1,56 @@
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger
+} from "./chunk-CP67AHDD.js";
+import {
+  useI18n
+} from "./chunk-EFMHXXHW.js";
+import {
+  buttonVariants
+} from "./chunk-EDNTYBXS.js";
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+
+// src/components/layout/language-toggle.tsx
+import { useState } from "react";
+import { LanguagesIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function LanguageToggle(props) {
+  const context = useI18n();
+  const [open, setOpen] = useState(false);
+  if (!context.locales) throw new Error("Missing `<I18nProvider />`");
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, ...props, children: [
+    /* @__PURE__ */ jsx(
+      PopoverTrigger,
+      {
+        "aria-label": context.text.chooseLanguage,
+        className: twMerge(buttonVariants({ size: "icon", color: "ghost" })),
+        children: /* @__PURE__ */ jsx(LanguagesIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "flex flex-col p-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "mb-1 p-2 text-xs font-medium text-fd-muted-foreground", children: context.text.chooseLanguage }),
+      context.locales.map((item) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: twMerge(
+            "rounded-md p-2 text-left text-sm transition-colors duration-100",
+            item.locale === context.locale ? "bg-fd-primary/10 font-medium text-fd-primary" : "hover:bg-fd-accent hover:text-fd-accent-foreground"
+          ),
+          onClick: () => {
+            context.onChange?.(item.locale);
+          },
+          children: item.name
+        },
+        item.locale
+      ))
+    ] })
+  ] });
+}
+
+export {
+  LanguageToggle
+};

package/dist/components/banner.d.ts

@@ -1,5 +1,16 @@
 import { HTMLAttributes } from 'react';
 
-declare function Banner({ id, ...props }: HTMLAttributes<HTMLDivElement>): React.ReactElement;
+declare function Banner({ id, variant, changeLayout, ...props }: HTMLAttributes<HTMLDivElement> & {
+    /**
+     * @defaultValue 'normal'
+     */
+    variant?: 'rainbow' | 'normal';
+    /**
+     * Change Fumadocs layout styles
+     *
+     * @defaultValue true
+     */
+    changeLayout?: boolean;
+}): React.ReactElement;
 
 export { Banner };

package/dist/components/banner.js

@@ -10,42 +10,50 @@ 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";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 function Banner({
   id,
+  variant = "normal",
+  changeLayout = true,
   ...props
 }) {
   const [open, setOpen] = useState(true);
+  const globalKey = id ? `nd-banner-${id}` : void 0;
+  const cssFilter = `:not(.${globalKey ?? "nd-banner-never"} *)`;
   useEffect(() => {
-    if (id) setOpen(localStorage.getItem(`nd-banner-${id}`) !== "true");
-  }, [id]);
+    if (globalKey) setOpen(localStorage.getItem(globalKey) !== "true");
+  }, [globalKey]);
   const onClick = useCallback(() => {
     setOpen(false);
-    if (id) localStorage.setItem(`nd-banner-${id}`, "true");
-  }, [id]);
+    if (globalKey) localStorage.setItem(globalKey, "true");
+  }, [globalKey]);
   return /* @__PURE__ */ jsxs(
     "div",
     {
       id,
       ...props,
       className: twMerge(
-        "relative flex h-12 flex-row items-center justify-center bg-fd-secondary px-4 text-center text-sm font-medium",
+        "sticky top-0 z-40 flex h-12 flex-row items-center justify-center bg-fd-secondary px-4 text-center text-sm font-medium",
+        variant === "rainbow" && "bg-fd-background",
         !open && "hidden",
         props.className
       ),
-      suppressHydrationWarning: true,
       children: [
+        changeLayout ? /* @__PURE__ */ jsx("style", { children: `
+        #nd-sidebar${cssFilter}, #nd-nav${cssFilter}, #nd-subnav${cssFilter}, [data-toc]${cssFilter} { top: 3rem; }
+        #nd-tocnav${cssFilter} { top: 6.5rem; }
+        #nd-sidebar${cssFilter}, [data-toc]${cssFilter} { height: calc(100dvh - 3rem); }
+        ` }) : null,
+        globalKey ? /* @__PURE__ */ jsx("style", { children: `.${globalKey} #${id} { display: none; }` }) : null,
         id ? /* @__PURE__ */ jsx(
           "script",
           {
             dangerouslySetInnerHTML: {
-              __html: `const ndBannerItem = localStorage.getItem('nd-banner-${id}');
-   if (ndBannerItem === 'true') {
-     document.getElementById('${id}').style.display = 'none';
-   }`
+              __html: `if (localStorage.getItem('${globalKey}') === 'true') document.documentElement.classList.add('${globalKey}');`
             }
           }
         ) : null,
+        variant === "rainbow" ? rainbowLayer : null,
         props.children,
         id ? /* @__PURE__ */ jsx(
           "button",
@@ -67,6 +75,49 @@ function Banner({
     }
   );
 }
+var maskImage = "linear-gradient(to bottom,white,transparent), radial-gradient(circle at top center, white, transparent)";
+var rainbowLayer = /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "absolute inset-0 z-[-1]",
+      style: {
+        maskImage,
+        maskComposite: "intersect",
+        animation: "fd-moving-banner 16s linear infinite",
+        "--start": "rgba(0,87,255,0.5)",
+        "--mid": "rgba(255,0,166,0.77)",
+        "--end": "rgba(255,77,0,0.4)",
+        "--via": "rgba(164,255,68,0.4)",
+        animationDirection: "reverse",
+        backgroundImage: "repeating-linear-gradient(to right, var(--end), var(--start) 2%, var(--start) 5%, transparent 8%, transparent 14%, var(--via) 18%, var(--via) 22%, var(--mid) 28%, var(--mid) 30%, var(--via) 34%, var(--via) 36%, transparent, var(--end) 50%)",
+        backgroundSize: "200% 100%",
+        mixBlendMode: "difference"
+      }
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "absolute inset-0 z-[-1]",
+      style: {
+        maskImage,
+        maskComposite: "intersect",
+        animation: "fd-moving-banner 20s linear infinite",
+        "--start": "rgba(255,120,120,0.5)",
+        "--mid": "rgba(36,188,255,0.4)",
+        "--end": "rgba(64,0,255,0.51)",
+        "--via": "rgba(255,89,0,0.56)",
+        backgroundImage: "repeating-linear-gradient(to right, var(--end), var(--start) 4%, var(--start) 8%, transparent 9%, transparent 14%, var(--mid) 16%, var(--mid) 20%, transparent, var(--via) 36%, var(--via) 40%, transparent 42%, var(--end) 46%, var(--end) 50%)",
+        backgroundSize: "200% 100%"
+      }
+    }
+  ),
+  /* @__PURE__ */ jsx("style", { children: `@keyframes fd-moving-banner {
+            from { background-position: 0% 0;  }
+            to { background-position: 100% 0;  }
+         }` })
+] });
 export {
   Banner
 };

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

@@ -1,57 +1,12 @@
 "use client";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from "../../chunk-CP67AHDD.js";
-import {
-  useI18n
-} from "../../chunk-EFMHXXHW.js";
-import {
-  buttonVariants
-} from "../../chunk-EDNTYBXS.js";
-import {
-  twMerge
-} from "../../chunk-TK3TM3MR.js";
+  LanguageToggle
+} from "../../chunk-NSEJBI4V.js";
+import "../../chunk-CP67AHDD.js";
+import "../../chunk-EFMHXXHW.js";
+import "../../chunk-EDNTYBXS.js";
+import "../../chunk-TK3TM3MR.js";
 import "../../chunk-MLKGABMK.js";
-
-// src/components/layout/language-toggle.tsx
-import { useState } from "react";
-import { LanguagesIcon } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-function LanguageToggle(props) {
-  const context = useI18n();
-  const [open, setOpen] = useState(false);
-  if (!context.locales) throw new Error("Missing `<I18nProvider />`");
-  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, ...props, children: [
-    /* @__PURE__ */ jsx(
-      PopoverTrigger,
-      {
-        "aria-label": context.text.chooseLanguage,
-        className: twMerge(buttonVariants({ size: "icon", color: "ghost" })),
-        children: /* @__PURE__ */ jsx(LanguagesIcon, {})
-      }
-    ),
-    /* @__PURE__ */ jsxs(PopoverContent, { className: "flex flex-col p-1", children: [
-      /* @__PURE__ */ jsx("p", { className: "mb-1 p-2 text-xs font-medium text-fd-muted-foreground", children: context.text.chooseLanguage }),
-      context.locales.map((item) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: twMerge(
-            "rounded-md p-2 text-left text-sm transition-colors duration-100",
-            item.locale === context.locale ? "bg-fd-primary/10 font-medium text-fd-primary" : "hover:bg-fd-accent hover:text-fd-accent-foreground"
-          ),
-          onClick: () => {
-            context.onChange?.(item.locale);
-          },
-          children: item.name
-        },
-        item.locale
-      ))
-    ] })
-  ] });
-}
 export {
   LanguageToggle
 };

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

@@ -1,13 +1,18 @@
-import { S as SharedNavProps } from './layout.shared-C5L62VPM.js';
-export { a as LinksMenu } from './layout.shared-C5L62VPM.js';
-export { a as Sidebar } from './sidebar-BguPKq_K.js';
+import { S as SharedNavProps } from './layout.shared-DEQFTB9M.js';
+export { a as LinksMenu } from './layout.shared-DEQFTB9M.js';
+import { S as SidebarProps } from './sidebar-DwBSl7jC.js';
+export { a as Sidebar } from './sidebar-DwBSl7jC.js';
 export { T as TreeContextProvider } from './tree-CrKzI9Nz.js';
 import { ButtonHTMLAttributes } from 'react';
+export { LanguageToggle } from './components/layout/language-toggle.js';
 import 'fumadocs-core/server';
+import '@radix-ui/react-popover';
 
 declare function ThemeToggle({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>): React.ReactElement;
 
+declare function DynamicSidebar(props: SidebarProps): React.ReactElement;
+
 declare function SubNav({ title, url, transparentMode, children, enableSearch, }: SharedNavProps): React.ReactElement;
 declare function SidebarCollapseTrigger(): React.ReactElement;
 
-export { SidebarCollapseTrigger, SubNav, ThemeToggle };
+export { DynamicSidebar, SidebarCollapseTrigger, SubNav, ThemeToggle };