fumadocs-ui 13.4.9 → 14.0.0

package/dist/{toc-clerk-CAID2WGC.js → toc-clerk-SKE4LBT7.js}

@@ -1,32 +1,32 @@
 "use client";
 import {
-  useTocThumb
-} from "./chunk-P4HLRHHV.js";
+  TocThumb
+} from "./chunk-DN6Z5VW6.js";
 import {
   ScrollArea,
   ScrollViewport
 } from "./chunk-2FLZOPQN.js";
-import {
-  useI18n
-} from "./chunk-EFMHXXHW.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";
+import {
+  useI18n
+} from "./chunk-EFMHXXHW.js";
 import "./chunk-MLKGABMK.js";
 
 // src/components/layout/toc-clerk.tsx
 import * as Primitive from "fumadocs-core/toc";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function ClerkTOCItems({
   items,
   isMenu = false
 }) {
   const { text } = useI18n();
+  const viewRef = useRef(null);
   const containerRef = useRef(null);
-  const pos = useTocThumb(containerRef);
   const [svg, setSvg] = useState();
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (!containerRef.current) return;
     const container = containerRef.current;
     function onResize() {
@@ -60,48 +60,38 @@ function ClerkTOCItems({
   }, [items]);
   if (items.length === 0)
     return /* @__PURE__ */ jsx("div", { className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground", children: text.tocNoHeadings });
-  return /* @__PURE__ */ jsx(ScrollArea, { className: twMerge("flex flex-col", isMenu && "-ms-3"), children: /* @__PURE__ */ jsxs(
-    ScrollViewport,
-    {
-      className: "relative min-h-0 text-sm text-fd-muted-foreground",
-      ref: containerRef,
-      children: [
-        svg ? /* @__PURE__ */ jsx(
-          "div",
+  return /* @__PURE__ */ jsx(ScrollArea, { className: twMerge("flex flex-col", isMenu && "-ms-3"), children: /* @__PURE__ */ jsxs(ScrollViewport, { className: "relative min-h-0", ref: viewRef, children: [
+    svg ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute start-0 top-0 rtl:-scale-x-100",
+        style: {
+          width: svg.width,
+          height: svg.height,
+          maskImage: `url("data:image/svg+xml,${// Inline SVG
+          encodeURIComponent(
+            `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`
+          )}")`
+        },
+        children: /* @__PURE__ */ jsx(
+          TocThumb,
           {
-            className: "absolute start-0 top-0 rtl:-scale-x-100",
-            style: {
-              width: svg.width,
-              height: svg.height,
-              maskImage: `url("data:image/svg+xml,${// Inline SVG
-              encodeURIComponent(
-                `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`
-              )}")`
-            },
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: "bg-fd-primary transition-all",
-                style: {
-                  marginTop: pos[0],
-                  height: pos[1]
-                }
-              }
-            )
+            containerRef,
+            className: "mt-[var(--fd-top)] h-[var(--fd-height)] bg-fd-primary transition-all"
           }
-        ) : null,
-        /* @__PURE__ */ jsx(Primitive.ScrollProvider, { containerRef, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: items.map((item, i) => /* @__PURE__ */ jsx(
-          TOCItem2,
-          {
-            item,
-            upper: items[i - 1]?.depth,
-            lower: items[i + 1]?.depth
-          },
-          item.url
-        )) }) })
-      ]
-    }
-  ) });
+        )
+      }
+    ) : null,
+    /* @__PURE__ */ jsx(Primitive.ScrollProvider, { containerRef: viewRef, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", ref: containerRef, children: items.map((item, i) => /* @__PURE__ */ jsx(
+      TOCItem2,
+      {
+        item,
+        upper: items[i - 1]?.depth,
+        lower: items[i + 1]?.depth
+      },
+      item.url
+    )) }) })
+  ] }) });
 }
 function getItemOffset(depth) {
   if (depth <= 2) return 16;
@@ -122,9 +112,9 @@ function TOCItem2({
     {
       href: item.url,
       style: {
-        paddingInlineStart: `${getItemOffset(item.depth)}px`
+        paddingInlineStart: getItemOffset(item.depth)
       },
-      className: "relative py-2 transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary",
+      className: "prose relative py-2 text-sm text-fd-muted-foreground transition-colors [overflow-wrap:anywhere] first:pt-0 last:pb-0 data-[active=true]:text-fd-primary",
       children: [
         offset !== upperOffset ? /* @__PURE__ */ jsx(
           "svg",

package/dist/{tree-CrKzI9Nz.d.ts → tree-06ley65N.d.ts}

@@ -2,14 +2,20 @@ import { PageTree } from 'fumadocs-core/server';
 import { ReactNode } from 'react';
 
 interface TreeContextType {
-    tree: PageTree.Root;
-    navigation: PageTree.Item[];
+    /**
+     * The path to the current node
+     */
+    path: PageTree.Node[];
+    /**
+     * Get neighbours of current `pathname`
+     */
+    getNeighbours: () => [PageTree.Item | undefined, PageTree.Item | undefined];
     root: PageTree.Root | PageTree.Folder;
 }
 declare function TreeContextProvider({ children, tree, }: {
     tree: PageTree.Root;
     children: ReactNode;
-}): React.ReactElement;
+}): ReactNode;
 declare function useTreeContext(): TreeContextType;
 
 export { TreeContextProvider as T, useTreeContext as u };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "13.4.9",
+  "version": "14.0.0",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -13,7 +13,6 @@
   "type": "module",
   "exports": {
     "./style.css": "./dist/style.css",
-    "./twoslash.css": "./dist/twoslash.css",
     "./image-zoom.css": "./dist/image-zoom.css",
     "./tailwind-plugin": {
       "import": "./dist/tailwind-plugin.js",
@@ -24,21 +23,13 @@
       "import": "./dist/components/*.js",
       "types": "./dist/components/*.d.ts"
     },
-    "./twoslash/*": {
-      "import": "./dist/twoslash/*.js",
-      "types": "./dist/twoslash/*.d.ts"
-    },
     "./i18n": {
       "import": "./dist/i18n.js",
       "types": "./dist/i18n.d.ts"
     },
-    "./layout": {
-      "import": "./dist/layout.js",
-      "types": "./dist/layout.d.ts"
-    },
-    "./home-layout": {
-      "import": "./dist/home-layout.js",
-      "types": "./dist/home-layout.d.ts"
+    "./layouts/*": {
+      "import": "./dist/layouts/*.js",
+      "types": "./dist/layouts/*.d.ts"
     },
     "./page": {
       "import": "./dist/page.js",
@@ -57,87 +48,59 @@
       "types": "./dist/og.d.ts"
     }
   },
-  "typesVersions": {
-    "*": {
-      "tailwind-plugin": [
-        "./dist/tailwind-plugin.d.ts"
-      ],
-      "components/*": [
-        "./dist/components/*.d.ts"
-      ],
-      "twoslash/*": [
-        "./dist/twoslash/*.d.ts"
-      ],
-      "i18n": [
-        "./dist/i18n.d.ts"
-      ],
-      "layout": [
-        "./dist/layout.d.ts"
-      ],
-      "home-layout": [
-        "./dist/home-layout.d.ts"
-      ],
-      "page": [
-        "./dist/page.d.ts"
-      ],
-      "provider": [
-        "./dist/provider.d.ts"
-      ],
-      "mdx": [
-        "./dist/mdx.d.ts"
-      ],
-      "og": [
-        "./dist/og.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist/*"
   ],
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.2.0",
-    "@radix-ui/react-collapsible": "^1.1.0",
-    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-direction": "^1.1.0",
-    "@radix-ui/react-popover": "^1.1.1",
-    "@radix-ui/react-scroll-area": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-navigation-menu": "^1.2.1",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-scroll-area": "^1.2.0",
+    "@radix-ui/react-tabs": "^1.1.1",
     "@tailwindcss/typography": "^0.5.15",
     "class-variance-authority": "^0.7.0",
     "cmdk": "^1.0.0",
-    "lucide-react": "^0.438.0",
     "next-themes": "^0.3.0",
-    "react-medium-image-zoom": "^5.2.9",
-    "swr": "^2.2.5",
-    "tailwind-merge": "^2.5.2",
-    "fumadocs-core": "13.4.9"
+    "react-medium-image-zoom": "^5.2.10",
+    "tailwind-merge": "^2.5.4",
+    "fumadocs-core": "14.0.0"
   },
   "devDependencies": {
-    "@algolia/client-search": "^4.24.0",
-    "@next/eslint-plugin-next": "^14.2.8",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
-    "algoliasearch": "^4.24.0",
-    "next": "^14.2.8",
-    "postcss": "^8.4.45",
+    "@algolia/client-search": "4.24.0",
+    "@next/eslint-plugin-next": "^15.0.0",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
+    "algoliasearch": "4.24.0",
+    "lucide-react": "^0.453.0",
+    "next": "15.0.0",
+    "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
     "postcss-lightningcss": "^1.0.1",
-    "tailwindcss": "^3.4.10",
+    "tailwindcss": "^3.4.13",
     "eslint-config-custom": "0.0.0",
+    "fumadocs": "^0.0.0",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
-    "next": ">= 14.1.0",
+    "next": "14.x.x || 15.x.x",
     "react": ">= 18",
     "react-dom": ">= 18"
   },
+  "optionalDependencies": {
+    "@algolia/client-search": "^4.0.0",
+    "algoliasearch": "^4.24.0",
+    "tailwindcss": "3.4.14"
+  },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
     "build": "pnpm build:layout && pnpm build:tailwind",
     "build:layout": "tsup",
-    "build:tailwind": "postcss css/*.css --dir dist",
+    "build:tailwind": "postcss css/*.css --dir dist && postcss src/components/*.css --dir dist/components",
     "clean": "rimraf dist",
     "dev": "concurrently \"pnpm dev:layout\" \"pnpm dev:tailwind\"",
     "dev:layout": "tsup --watch",

package/dist/chunk-KCZRDPB4.js

@@ -1,308 +0,0 @@
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger
-} from "./chunk-CP67AHDD.js";
-import {
-  isActive
-} from "./chunk-UOD2T27N.js";
-import {
-  useSearchContext
-} from "./chunk-ET4TW6M5.js";
-import {
-  useI18n
-} from "./chunk-EFMHXXHW.js";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger
-} from "./chunk-TQJ6YPJ3.js";
-import {
-  buttonVariants,
-  itemVariants
-} from "./chunk-EDNTYBXS.js";
-import {
-  twMerge
-} from "./chunk-TK3TM3MR.js";
-
-// 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 as useState2 } from "react";
-import { useOnChange } from "fumadocs-core/utils/use-on-change";
-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",
-  {
-    variants: {
-      active: {
-        true: "text-fd-primary",
-        false: "hover:text-fd-accent-foreground"
-      }
-    },
-    defaultVariants: {
-      active: false
-    }
-  }
-);
-function LinkItem({
-  item,
-  on = "nav",
-  className,
-  ...props
-}) {
-  const pathname = usePathname();
-  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__ */ jsxs2(
-      LinksMenu,
-      {
-        items: item.items,
-        className: twMerge(linkItemVariants({ className })),
-        ...props,
-        children: [
-          item.icon,
-          item.text,
-          /* @__PURE__ */ jsx3(ChevronDown, { className: "ms-auto !size-3.5" })
-        ]
-      }
-    );
-  }
-  if (item.type === "menu") {
-    return /* @__PURE__ */ jsxs2(Collapsible, { className: "flex flex-col", children: [
-      /* @__PURE__ */ jsxs2(
-        CollapsibleTrigger,
-        {
-          className: twMerge(itemVariants({ className }), "group/link"),
-          ...props,
-          children: [
-            item.icon,
-            item.text,
-            /* @__PURE__ */ jsx3(ChevronDown, { className: "ms-auto transition-transform group-data-[state=closed]/link:-rotate-90" })
-          ]
-        }
-      ),
-      /* @__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__ */ jsxs2(
-      Link2,
-      {
-        href: item.url,
-        external: item.external,
-        className: twMerge(
-          buttonVariants({ color: "secondary" }),
-          "gap-1.5 [&_svg]:size-4",
-          className
-        ),
-        children: [
-          item.icon,
-          item.text
-        ]
-      }
-    );
-  }
-  const activeType = item.active ?? "url";
-  const active = activeType !== "none" && isActive(item.url, pathname, activeType === "nested-url");
-  if (item.type === "icon" && on === "nav") {
-    return /* @__PURE__ */ jsx3(
-      Link2,
-      {
-        "aria-label": item.label,
-        href: item.url,
-        external: item.external,
-        className: twMerge(
-          buttonVariants({
-            size: "icon",
-            color: "ghost",
-            className
-          })
-        ),
-        ...props,
-        children: item.icon
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxs2(
-    Link2,
-    {
-      href: item.url,
-      external: item.external,
-      className: twMerge(
-        on === "nav" ? linkItemVariants({
-          active
-        }) : itemVariants({ active }),
-        className
-      ),
-      ...props,
-      children: [
-        on === "menu" ? item.icon : null,
-        item.text
-      ]
-    }
-  );
-}
-function LinksMenu({
-  items,
-  footer,
-  ...props
-}) {
-  const [open, setOpen] = useState2(false);
-  const pathname = usePathname();
-  useOnChange(pathname, () => {
-    setOpen(false);
-  });
-  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/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 ThemeToggle({
-  className,
-  ...props
-}) {
-  const { setTheme, resolvedTheme } = useTheme();
-  const onToggle = useCallback2(() => {
-    setTheme(resolvedTheme === "dark" ? "light" : "dark");
-  }, [setTheme, resolvedTheme]);
-  return /* @__PURE__ */ jsxs3(
-    "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__ */ jsx4(Sun, { className: twMerge(buttonVariants2({ dark: false })) }),
-        /* @__PURE__ */ jsx4(Moon, { className: twMerge(buttonVariants2({ dark: true })) })
-      ]
-    }
-  );
-}
-
-export {
-  SearchToggle,
-  LargeSearchToggle,
-  NavBox,
-  Title,
-  LinkItem,
-  LinksMenu,
-  ThemeToggle
-};

package/dist/chunk-LSTPTAZ5.js

@@ -1,58 +0,0 @@
-import {
-  hasActive
-} from "./chunk-UOD2T27N.js";
-
-// src/contexts/tree.tsx
-import { usePathname } from "next/navigation";
-import { createContext, useContext, useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-var TreeContext = createContext(void 0);
-function findRoot(items, pathname) {
-  for (const item of items) {
-    if (item.type === "folder") {
-      const root = findRoot(item.children, pathname);
-      if (root) return root;
-      if (item.root === true && hasActive(item.children, pathname)) {
-        return item;
-      }
-    }
-  }
-}
-function getNavigationList(tree) {
-  return tree.flatMap((node) => {
-    if (node.type === "separator") return [];
-    if (node.type === "folder") {
-      const children = getNavigationList(node.children);
-      if (!node.root && node.index) children.unshift(node.index);
-      return children;
-    }
-    return !node.external ? [node] : [];
-  });
-}
-function TreeContextProvider({
-  children,
-  tree
-}) {
-  const pathname = usePathname();
-  const value = useMemo(() => {
-    const root = findRoot(tree.children, pathname) ?? tree;
-    const navigation = getNavigationList(root.children);
-    return {
-      root,
-      navigation,
-      tree
-    };
-  }, [pathname, tree]);
-  return /* @__PURE__ */ jsx(TreeContext.Provider, { value, children });
-}
-function useTreeContext() {
-  const ctx = useContext(TreeContext);
-  if (!ctx)
-    throw new Error("You must wrap this component under <DocsLayout />");
-  return ctx;
-}
-
-export {
-  TreeContextProvider,
-  useTreeContext
-};