fumadocs-ui 13.4.10 → 14.0.0

package/dist/chunk-BN7HGCQ4.js

@@ -0,0 +1,212 @@
+import {
+  LargeSearchToggle
+} from "./chunk-V6RONFCQ.js";
+import {
+  isActive
+} from "./chunk-CDPVENXR.js";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from "./chunk-TQJ6YPJ3.js";
+import {
+  ScrollArea,
+  ScrollViewport
+} from "./chunk-2FLZOPQN.js";
+import {
+  ChevronDown,
+  ExternalLink
+} from "./chunk-5QPVK7QM.js";
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+import {
+  useSearchContext
+} from "./chunk-ET4TW6M5.js";
+import {
+  useTreeContext
+} from "./chunk-YL3MZH7N.js";
+
+// src/components/layout/sidebar.tsx
+import * as Base from "fumadocs-core/sidebar";
+import { usePathname } from "next/navigation";
+import {
+  createContext,
+  memo,
+  useContext,
+  useMemo,
+  useState
+} from "react";
+import Link from "fumadocs-core/link";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+
+// src/components/layout/variants.ts
+import { cva } from "class-variance-authority";
+var itemVariants = cva([
+  "flex flex-row items-center gap-2 rounded-md px-2 py-1.5 text-fd-muted-foreground transition-colors duration-100 [overflow-wrap:anywhere] [&_svg]:size-4",
+  "data-[active=false]:hover:bg-fd-accent/50 data-[active=false]:hover:text-fd-accent-foreground/80 data-[active=false]:hover:transition-none",
+  "data-[active=true]:bg-fd-primary/10 data-[active=true]:font-medium data-[active=true]:text-fd-primary"
+]);
+
+// src/components/layout/sidebar.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var Context = createContext(void 0);
+var Sidebar = memo(
+  ({
+    components,
+    defaultOpenLevel = 0,
+    prefetch = true,
+    ...props
+  }) => {
+    const search = useSearchContext();
+    const hasSearch = search.enabled && !props.hideSearch;
+    const context = useMemo(
+      () => ({
+        defaultOpenLevel,
+        components: {
+          Folder: FolderNode,
+          Separator: SeparatorNode,
+          Item: PageNode,
+          ...components
+        },
+        prefetch
+      }),
+      [components, defaultOpenLevel, prefetch]
+    );
+    return /* @__PURE__ */ jsx(
+      Base.SidebarList,
+      {
+        id: "nd-sidebar",
+        blockScrollingWidth: 768,
+        ...props.aside,
+        className: twMerge(
+          "fixed top-fd-layout-top z-30 bg-fd-card pt-2 text-sm md:sticky md:h-[var(--fd-sidebar-height)] md:flex-1 md:pt-4",
+          "max-md:inset-x-0 max-md:bottom-0 max-md:bg-fd-background/80 max-md:text-[15px] max-md:backdrop-blur-lg max-md:data-[open=false]:invisible",
+          props.aside?.className
+        ),
+        style: {
+          ...props.aside?.style,
+          "--fd-sidebar-height": "calc(100dvh - var(--fd-banner-height) - var(--fd-nav-height))"
+        },
+        children: /* @__PURE__ */ jsxs("div", { className: "flex size-full flex-col md:ms-auto md:w-[var(--fd-sidebar-width)] md:border-e", children: [
+          props.banner,
+          hasSearch ? /* @__PURE__ */ jsx(LargeSearchToggle, { className: "mx-4 rounded-lg max-md:hidden md:mx-3" }) : null,
+          /* @__PURE__ */ jsx(ScrollArea, { className: "h-full", children: /* @__PURE__ */ jsxs(
+            ScrollViewport,
+            {
+              style: {
+                maskImage: "linear-gradient(to bottom, transparent 2px, white 16px)"
+              },
+              children: [
+                props.children,
+                /* @__PURE__ */ jsx(Context.Provider, { value: context, children: /* @__PURE__ */ jsx(RootNodeList, {}) })
+              ]
+            }
+          ) }),
+          props.footer
+        ] })
+      }
+    );
+  }
+);
+Sidebar.displayName = "Sidebar";
+var SeparatorNode = memo(({ item }) => {
+  return /* @__PURE__ */ jsx("p", { className: "mb-2 mt-8 px-2 text-sm font-medium first:mt-0", children: item.name });
+});
+SeparatorNode.displayName = "SeparatorNode";
+function RootNodeList() {
+  const { root } = useTreeContext();
+  const { components } = useInternalContext();
+  return /* @__PURE__ */ jsx("div", { className: "px-2 py-4 md:px-3", children: renderList(root.children, 0, components) });
+}
+function renderList(items, level, { Separator, Item, Folder }) {
+  return items.map((item, i) => {
+    const id = `${item.type}_${i.toString()}`;
+    switch (item.type) {
+      case "separator":
+        return /* @__PURE__ */ jsx(Separator, { item }, id);
+      case "folder":
+        return /* @__PURE__ */ jsx(Folder, { item, level: level + 1 }, id);
+      default:
+        return /* @__PURE__ */ jsx(Item, { item }, item.url);
+    }
+  });
+}
+var PageNode = memo(({ item }) => {
+  const pathname = usePathname();
+  const active = isActive(item.url, pathname, false);
+  const { prefetch } = useInternalContext();
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      href: item.url,
+      external: item.external,
+      "data-active": active,
+      className: twMerge(itemVariants()),
+      prefetch,
+      children: [
+        item.icon ?? (item.external ? /* @__PURE__ */ jsx(ExternalLink, {}) : null),
+        item.name
+      ]
+    }
+  );
+});
+PageNode.displayName = "PageNode";
+var FolderNode = memo(
+  ({ item, level }) => {
+    const { defaultOpenLevel, prefetch, components } = useInternalContext();
+    const { path } = useTreeContext();
+    const pathname = usePathname();
+    const active = item.index !== void 0 && isActive(item.index.url, pathname, false);
+    const className = twMerge(itemVariants(), "w-full md:pe-1.5");
+    const shouldExtend = active || path.includes(item) || (item.defaultOpen ?? defaultOpenLevel >= level);
+    const [open, setOpen] = useState(shouldExtend);
+    useOnChange(shouldExtend, (v) => {
+      if (v) setOpen(v);
+    });
+    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,
+        {
+          "data-active": active,
+          className,
+          href: item.index.url,
+          onClick: (e) => {
+            if (
+              // clicking on icon
+              e.target.hasAttribute("data-icon") || active
+            ) {
+              setOpen((prev) => !prev);
+              e.preventDefault();
+            }
+          },
+          prefetch,
+          children: content
+        }
+      ) : /* @__PURE__ */ jsx(CollapsibleTrigger, { "data-active": active, className, children: content }),
+      /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: "ms-2 border-s py-1.5 ps-1", children: renderList(item.children, level, components) }) })
+    ] });
+  }
+);
+FolderNode.displayName = "FolderNode";
+function useInternalContext() {
+  const ctx = useContext(Context);
+  if (!ctx) throw new Error("<Sidebar /> component required.");
+  return ctx;
+}
+
+export {
+  itemVariants,
+  Sidebar
+};

package/dist/chunk-CDPVENXR.js

@@ -0,0 +1,8 @@
+// src/utils/shared.ts
+function isActive(url, pathname, nested = true) {
+  return url === pathname || nested && pathname.startsWith(`${url}/`);
+}
+
+export {
+  isActive
+};

package/dist/{chunk-KWZZNVSY.js → chunk-CPGKWLLV.js}

@@ -1,9 +1,13 @@
+import {
+  CircleX,
+  Info,
+  TriangleAlert
+} from "./chunk-5QPVK7QM.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
 
 // src/components/callout.tsx
-import { AlertTriangle, Info, OctagonAlert } from "lucide-react";
 import { forwardRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var Callout = forwardRef(
@@ -20,8 +24,8 @@ var Callout = forwardRef(
         children: [
           icon ?? {
             info: /* @__PURE__ */ jsx(Info, { className: "size-5 fill-blue-500 text-fd-card" }),
-            warn: /* @__PURE__ */ jsx(AlertTriangle, { className: "size-5 fill-orange-500 text-fd-card" }),
-            error: /* @__PURE__ */ jsx(OctagonAlert, { className: "size-5 fill-red-500 text-fd-card" })
+            warn: /* @__PURE__ */ jsx(TriangleAlert, { className: "size-5 fill-orange-500 text-fd-card" }),
+            error: /* @__PURE__ */ jsx(CircleX, { className: "size-5 fill-red-500 text-fd-card" })
           }[type],
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
             title ? /* @__PURE__ */ jsx("p", { className: "not-prose mb-2 font-medium", children: title }) : null,

package/dist/chunk-DN6Z5VW6.js

@@ -0,0 +1,61 @@
+// src/components/layout/toc-thumb.tsx
+import {
+  useEffect,
+  useRef
+} from "react";
+import * as Primitive from "fumadocs-core/toc";
+import { useOnChange } from "fumadocs-core/utils/use-on-change";
+import { jsx } from "react/jsx-runtime";
+function calc(container, active) {
+  if (active.length === 0 || container.clientHeight === 0) {
+    return [0, 0];
+  }
+  let upper = Number.MAX_VALUE, lower = 0;
+  for (const item of active) {
+    const element = container.querySelector(`a[href="#${item}"]`);
+    if (!element) continue;
+    const styles = getComputedStyle(element);
+    upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop));
+    lower = Math.max(
+      lower,
+      element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom)
+    );
+  }
+  return [upper, lower - upper];
+}
+function update(element, info) {
+  element.style.setProperty("--fd-top", `${info[0]}px`);
+  element.style.setProperty("--fd-height", `${info[1]}px`);
+}
+function TocThumb({
+  containerRef,
+  ...props
+}) {
+  const active = Primitive.useActiveAnchors();
+  const thumbRef = useRef(null);
+  const activeRef = useRef(active);
+  activeRef.current = active;
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const container = containerRef.current;
+    const onResize = () => {
+      if (!thumbRef.current) return;
+      update(thumbRef.current, calc(container, activeRef.current));
+    };
+    onResize();
+    const observer = new ResizeObserver(onResize);
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+    };
+  }, [containerRef]);
+  useOnChange(active, () => {
+    if (!containerRef.current || !thumbRef.current) return;
+    update(thumbRef.current, calc(containerRef.current, active));
+  });
+  return /* @__PURE__ */ jsx("div", { ref: thumbRef, role: "none", ...props });
+}
+
+export {
+  TocThumb
+};

package/dist/chunk-GHOAONNQ.js

@@ -0,0 +1,48 @@
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+
+// src/components/card.tsx
+import Link from "fumadocs-core/link";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Cards(props) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: twMerge("grid grid-cols-1 gap-4 sm:grid-cols-2", props.className),
+      children: props.children
+    }
+  );
+}
+function Card({
+  icon,
+  title,
+  description,
+  ...props
+}) {
+  const E = props.href ? Link : "div";
+  return /* @__PURE__ */ jsxs(
+    E,
+    {
+      ...props,
+      "data-card": true,
+      className: twMerge(
+        "block rounded-lg border bg-fd-card p-4 text-fd-card-foreground shadow-md transition-colors",
+        props.href && "hover:bg-fd-accent/80",
+        props.className
+      ),
+      children: [
+        icon ? /* @__PURE__ */ jsx("div", { className: "not-prose mb-2 w-fit rounded-md border bg-fd-muted p-1.5 text-fd-muted-foreground [&_svg]:size-4", children: icon }) : null,
+        /* @__PURE__ */ jsx("h3", { className: "not-prose mb-1 text-sm font-medium", children: title }),
+        description ? /* @__PURE__ */ jsx("p", { className: "my-0 text-sm text-fd-muted-foreground", children: description }) : null,
+        props.children ? /* @__PURE__ */ jsx("div", { className: "text-sm text-fd-muted-foreground prose-no-margin", children: props.children }) : null
+      ]
+    }
+  );
+}
+
+export {
+  Cards,
+  Card
+};

package/dist/{chunk-ERUVE5R6.js → chunk-IHIFNFRB.js}

@@ -1,9 +1,11 @@
+import {
+  Link
+} from "./chunk-5QPVK7QM.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
 
 // src/components/heading.tsx
-import { Link } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Heading({
   as,
@@ -18,7 +20,7 @@ function Heading({
       className: twMerge("flex scroll-m-28 flex-row items-center gap-2", className),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("a", { href: `#${props.id}`, className: "peer", children: props.children }),
+        /* @__PURE__ */ jsx("a", { "data-card": "", href: `#${props.id}`, className: "peer", children: props.children }),
         /* @__PURE__ */ jsx(
           Link,
           {

package/dist/{chunk-CP67AHDD.js → chunk-IVBHRX3O.js}

@@ -16,7 +16,7 @@ var PopoverContent = React.forwardRef(({ className, align = "center", sideOffset
     sideOffset,
     side: "bottom",
     className: twMerge(
-      "z-50 min-w-[220px] max-w-[98vw] rounded-lg border bg-fd-popover p-2 text-sm text-fd-popover-foreground shadow-md data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in",
+      "z-50 min-w-[220px] max-w-[98vw] rounded-lg border bg-fd-popover p-2 text-sm text-fd-popover-foreground shadow-md focus-visible:outline-none data-[state=closed]:animate-fd-popover-out data-[state=open]:animate-fd-popover-in",
       className
     ),
     ...props

package/dist/{chunk-NSEJBI4V.js → chunk-KZTWSBYY.js}

@@ -1,43 +1,47 @@
+import {
+  buttonVariants
+} from "./chunk-QKOA6KEZ.js";
 import {
   Popover,
   PopoverContent,
   PopoverTrigger
-} from "./chunk-CP67AHDD.js";
-import {
-  useI18n
-} from "./chunk-EFMHXXHW.js";
-import {
-  buttonVariants
-} from "./chunk-EDNTYBXS.js";
+} from "./chunk-IVBHRX3O.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
+import {
+  useI18n
+} from "./chunk-EFMHXXHW.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: [
+  return /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsx(
       PopoverTrigger,
       {
         "aria-label": context.text.chooseLanguage,
-        className: twMerge(buttonVariants({ size: "icon", color: "ghost" })),
-        children: /* @__PURE__ */ jsx(LanguagesIcon, {})
+        ...props,
+        className: twMerge(
+          buttonVariants({
+            color: "ghost",
+            className: "gap-1.5 p-1.5"
+          }),
+          props.className
+        ),
+        children: props.children
       }
     ),
-    /* @__PURE__ */ jsxs(PopoverContent, { className: "flex flex-col p-1", children: [
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "flex flex-col overflow-hidden p-0", 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",
+            "p-2 text-start text-sm",
             item.locale === context.locale ? "bg-fd-primary/10 font-medium text-fd-primary" : "hover:bg-fd-accent hover:text-fd-accent-foreground"
           ),
           onClick: () => {
@@ -50,7 +54,15 @@ function LanguageToggle(props) {
     ] })
   ] });
 }
+function LanguageToggleText(props) {
+  const context = useI18n();
+  const text = context.locales?.find(
+    (item) => item.locale === context.locale
+  )?.name;
+  return /* @__PURE__ */ jsx("span", { ...props, children: text });
+}
 
 export {
-  LanguageToggle
+  LanguageToggle,
+  LanguageToggleText
 };

package/dist/chunk-MCX7E6ZW.js

@@ -0,0 +1,57 @@
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+import {
+  useI18n
+} from "./chunk-EFMHXXHW.js";
+
+// src/components/layout/nav.tsx
+import Link from "fumadocs-core/link";
+import { createContext, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var NavContext = createContext({
+  isTransparent: false
+});
+function NavProvider({
+  transparentMode = "none",
+  children
+}) {
+  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__ */ jsx(NavContext.Provider, { value: { isTransparent: transparent }, children });
+}
+function Title({
+  title,
+  url,
+  ...props
+}) {
+  const { locale } = useI18n();
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      href: url ?? (locale ? `/${locale}` : "/"),
+      ...props,
+      className: twMerge(
+        "inline-flex items-center gap-2.5 font-semibold",
+        props.className
+      ),
+      children: title
+    }
+  );
+}
+
+export {
+  NavContext,
+  NavProvider,
+  Title
+};

package/dist/chunk-PZTQPB4U.js

@@ -0,0 +1,125 @@
+import {
+  isActive
+} from "./chunk-CDPVENXR.js";
+import {
+  buttonVariants
+} from "./chunk-QKOA6KEZ.js";
+import {
+  Moon,
+  Sun
+} from "./chunk-5QPVK7QM.js";
+import {
+  twMerge
+} from "./chunk-TK3TM3MR.js";
+
+// src/layouts/links.tsx
+import Link from "fumadocs-core/link";
+import { usePathname } from "next/navigation";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BaseLinkItem = forwardRef(({ item, ...props }, ref) => {
+  const pathname = usePathname();
+  const activeType = item.active ?? "url";
+  const active = activeType !== "none" && isActive(item.url, pathname, activeType === "nested-url");
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      ref,
+      href: item.url,
+      external: item.external,
+      ...props,
+      "data-active": active,
+      children: props.children
+    }
+  );
+});
+BaseLinkItem.displayName = "BaseLinkItem";
+var ButtonItem = forwardRef(({ item, ...props }, ref) => {
+  return /* @__PURE__ */ jsxs(
+    Link,
+    {
+      ref,
+      href: item.url,
+      external: item.external,
+      ...props,
+      className: twMerge(
+        buttonVariants({ color: "secondary" }),
+        "gap-1.5 [&_svg]:size-4",
+        props.className
+      ),
+      children: [
+        item.icon,
+        item.text
+      ]
+    }
+  );
+});
+ButtonItem.displayName = "ButtonItem";
+var IconItem = forwardRef(({ item, ...props }, ref) => {
+  return /* @__PURE__ */ jsx(
+    Link,
+    {
+      ref,
+      "aria-label": item.label,
+      href: item.url,
+      external: item.external,
+      ...props,
+      className: twMerge(
+        buttonVariants({
+          size: "icon",
+          color: "ghost"
+        }),
+        props.className
+      ),
+      children: item.icon
+    }
+  );
+});
+IconItem.displayName = "IconItem";
+
+// src/components/layout/theme-toggle.tsx
+import { cva } from "class-variance-authority";
+import { useTheme } from "next-themes";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var buttonVariants2 = cva("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 ThemeToggle({
+  className,
+  ...props
+}) {
+  const { setTheme, resolvedTheme } = useTheme();
+  const onToggle = () => {
+    setTheme(resolvedTheme === "dark" ? "light" : "dark");
+  };
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      className: twMerge(
+        "inline-flex items-center rounded-full border p-0.5",
+        className
+      ),
+      "data-theme-toggle": "",
+      "aria-label": "Toggle Theme",
+      onClick: onToggle,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx2(Sun, { className: twMerge(buttonVariants2({ dark: false })) }),
+        /* @__PURE__ */ jsx2(Moon, { className: twMerge(buttonVariants2({ dark: true })) })
+      ]
+    }
+  );
+}
+
+export {
+  BaseLinkItem,
+  ButtonItem,
+  IconItem,
+  ThemeToggle
+};

package/dist/{chunk-EDNTYBXS.js → chunk-QKOA6KEZ.js}

@@ -1,4 +1,4 @@
-// src/theme/variants.ts
+// src/components/ui/button.tsx
 import { cva } from "class-variance-authority";
 var buttonVariants = cva(
   "inline-flex items-center justify-center rounded-md p-2 text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50",
@@ -16,22 +16,7 @@ var buttonVariants = cva(
     }
   }
 );
-var itemVariants = cva(
-  "flex w-full flex-row items-center gap-2 rounded-md px-2 py-1.5 text-fd-muted-foreground transition-colors duration-100 [overflow-wrap:anywhere] [&_svg]:size-4",
-  {
-    variants: {
-      active: {
-        true: "bg-fd-primary/10 font-medium text-fd-primary",
-        false: "hover:bg-fd-accent/50 hover:text-fd-accent-foreground/80 hover:transition-none"
-      }
-    },
-    defaultVariants: {
-      active: false
-    }
-  }
-);
 
 export {
-  buttonVariants,
-  itemVariants
+  buttonVariants
 };