fumadocs-ui 9.0.0 → 10.0.0

package/dist/{chunk-EDUYFB4P.js → chunk-7F2LGCS6.js}

@@ -20,24 +20,10 @@ function hasActive(items, url) {
     return false;
   });
 }
-function flattenTree(tree) {
-  return tree.flatMap((node) => {
-    if (node.type === "separator")
-      return [];
-    if (node.type === "folder") {
-      const children = flattenTree(node.children);
-      if (!node.root && node.index)
-        return [node.index, ...children];
-      return children;
-    }
-    return [node];
-  });
-}
 
 export {
   defaultImageSizes,
   isActive,
   replaceOrDefault,
-  hasActive,
-  flattenTree
+  hasActive
 };

package/dist/{chunk-UIZNMCLD.js → chunk-C4PI62MH.js}

@@ -1,7 +1,6 @@
 import {
-  flattenTree,
   hasActive
-} from "./chunk-EDUYFB4P.js";
+} from "./chunk-7F2LGCS6.js";
 
 // src/contexts/tree.tsx
 import { usePathname } from "next/navigation";
@@ -20,6 +19,19 @@ function findRoot(items, pathname) {
     }
   }
 }
+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
@@ -27,10 +39,9 @@ function TreeContextProvider({
   const pathname = usePathname();
   const value = useMemo(() => {
     const root = findRoot(tree.children, pathname) ?? tree;
-    const list = flattenTree(root.children);
     return {
       root,
-      list,
+      navigation: getNavigationList(root.children),
       tree
     };
   }, [pathname, tree]);

package/dist/components/image-zoom.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   defaultImageSizes
-} from "../chunk-EDUYFB4P.js";
+} from "../chunk-7F2LGCS6.js";
 import "../chunk-6C3VEZWH.js";
 
 // src/components/image-zoom.tsx

package/dist/components/type-table.d.mts

@@ -7,7 +7,7 @@ interface ObjectType {
     /**
      * Additional description of the field
      */
-    description?: string;
+    description?: ReactNode;
     type: string;
     typeDescription?: string;
     /**

package/dist/components/type-table.js

@@ -12,37 +12,42 @@ import "../chunk-6C3VEZWH.js";
 // src/components/type-table.tsx
 import { InfoIcon } from "lucide-react";
 import Link from "next/link";
+import { cva } from "class-variance-authority";
 import { jsx, jsxs } from "react/jsx-runtime";
 function Info({ children }) {
   return /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "text-sm", children })
+    /* @__PURE__ */ jsx(PopoverContent, { className: "prose text-sm", children })
   ] });
 }
+var th = cva("p-2 font-medium first:pl-0 last:pr-0");
+var td = cva("p-2 first:pl-0 last:pr-0");
+var field = cva("inline-flex flex-row items-center gap-1");
+var code = cva("rounded-md bg-secondary p-1 text-secondary-foreground", {
+  variants: {
+    color: { primary: "bg-primary/10 text-primary" }
+  }
+});
 function TypeTable({
   type
 }) {
-  const th = twMerge("p-2 font-medium first:pl-0 last:pr-0");
-  const td = twMerge("p-2 first:pl-0 last:pr-0");
-  const field = twMerge("inline-flex flex-row items-center gap-1");
-  const code = twMerge("rounded-md bg-secondary p-1 text-secondary-foreground");
   return /* @__PURE__ */ jsx("div", { className: "not-prose overflow-auto whitespace-nowrap", children: /* @__PURE__ */ jsxs("table", { className: "my-4 w-full text-left text-sm text-muted-foreground", children: [
     /* @__PURE__ */ jsx("thead", { className: "border-b", children: /* @__PURE__ */ jsxs("tr", { children: [
-      /* @__PURE__ */ jsx("th", { className: twMerge(th, "w-[45%]"), children: "Prop" }),
-      /* @__PURE__ */ jsx("th", { className: twMerge(th, "w-[30%]"), children: "Type" }),
-      /* @__PURE__ */ jsx("th", { className: twMerge(th, "w-[25%]"), children: "Default" })
+      /* @__PURE__ */ jsx("th", { className: twMerge(th(), "w-[45%]"), children: "Prop" }),
+      /* @__PURE__ */ jsx("th", { className: twMerge(th(), "w-[30%]"), children: "Type" }),
+      /* @__PURE__ */ jsx("th", { className: twMerge(th(), "w-[25%]"), children: "Default" })
     ] }) }),
     /* @__PURE__ */ jsx("tbody", { className: "border-collapse divide-y divide-border", children: Object.entries(type).map(([key, value]) => /* @__PURE__ */ jsxs("tr", { children: [
-      /* @__PURE__ */ jsx("td", { className: td, children: /* @__PURE__ */ jsxs("div", { className: field, children: [
-        /* @__PURE__ */ jsx("code", { className: twMerge(code, "bg-primary/10 text-primary"), children: key }),
+      /* @__PURE__ */ jsx("td", { className: td(), children: /* @__PURE__ */ jsxs("div", { className: field(), children: [
+        /* @__PURE__ */ jsx("code", { className: twMerge(code({ color: "primary" })), children: key }),
         value.description ? /* @__PURE__ */ jsx(Info, { children: value.description }) : null
       ] }) }),
-      /* @__PURE__ */ jsx("td", { className: td, children: /* @__PURE__ */ jsxs("div", { className: field, children: [
-        /* @__PURE__ */ jsx("code", { className: code, children: value.type }),
+      /* @__PURE__ */ jsx("td", { className: td(), children: /* @__PURE__ */ jsxs("div", { className: field(), children: [
+        /* @__PURE__ */ jsx("code", { className: code(), children: value.type }),
         value.typeDescription ? /* @__PURE__ */ jsx(Info, { children: /* @__PURE__ */ jsx("pre", { className: "overflow-auto bg-secondary text-secondary-foreground", children: value.typeDescription }) }) : null,
         value.typeDescriptionLink ? /* @__PURE__ */ jsx(Link, { href: value.typeDescriptionLink, children: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }) }) : null
       ] }) }),
-      /* @__PURE__ */ jsx("td", { className: td, children: value.default ? /* @__PURE__ */ jsx("code", { className: code, children: value.default }) : /* @__PURE__ */ jsx("span", { children: "-" }) })
+      /* @__PURE__ */ jsx("td", { className: td(), children: value.default ? /* @__PURE__ */ jsx("code", { className: code(), children: value.default }) : /* @__PURE__ */ jsx("span", { children: "-" }) })
     ] }, key)) })
   ] }) });
 }

package/dist/{layout-YB7EFpgW.d.mts → layout-W7dJ6OHQ.d.mts}

@@ -1,5 +1,5 @@
 import { PageTree } from 'fumadocs-core/server';
-import { ReactNode, HTMLAttributes } from 'react';
+import { ReactNode, FC, HTMLAttributes } from 'react';
 
 interface NavLinkProps {
     icon: ReactNode;
@@ -36,10 +36,23 @@ interface SidebarProps {
      * @defaultValue 1
      */
     defaultOpenLevel?: number;
+    components?: Partial<Components>;
     banner?: ReactNode;
     footer?: ReactNode;
 }
-declare function Sidebar({ banner, footer, items, defaultOpenLevel, }: SidebarProps): JSX.Element;
+interface Components {
+    Item: FC<{
+        item: PageTree.Item;
+    }>;
+    Folder: FC<{
+        item: PageTree.Folder;
+        level: number;
+    }>;
+    Separator: FC<{
+        item: PageTree.Separator;
+    }>;
+}
+declare function Sidebar({ banner, footer, components, items, defaultOpenLevel, }: SidebarProps): JSX.Element;
 
 interface LinkItem {
     url: string;

package/dist/layout.client.d.mts

@@ -1,4 +1,4 @@
-export { T as TreeContextProvider } from './tree-Zwtp9xPv.mjs';
-export { N as Nav, S as Sidebar } from './layout-YB7EFpgW.mjs';
+export { T as TreeContextProvider } from './tree-ersey5_u.mjs';
+export { N as Nav, S as Sidebar } from './layout-W7dJ6OHQ.mjs';
 import 'fumadocs-core/server';
 import 'react';

package/dist/layout.client.js

@@ -5,7 +5,7 @@ import {
 import {
   TreeContextProvider,
   useTreeContext
-} from "./chunk-UIZNMCLD.js";
+} from "./chunk-C4PI62MH.js";
 import {
   ScrollArea
 } from "./chunk-ZOR33LFA.js";
@@ -17,7 +17,7 @@ import {
 import {
   hasActive,
   isActive
-} from "./chunk-EDUYFB4P.js";
+} from "./chunk-7F2LGCS6.js";
 import {
   useSearchContext
 } from "./chunk-36MVEJ25.js";
@@ -286,7 +286,7 @@ NavItem.displayName = "NavItem";
 
 // src/components/sidebar.tsx
 import { cva as cva3 } from "class-variance-authority";
-import { ChevronDown } from "lucide-react";
+import { ChevronDown, ExternalLinkIcon } from "lucide-react";
 import * as Base from "fumadocs-core/sidebar";
 import { usePathname as usePathname2 } from "next/navigation";
 import { createContext, useContext, useEffect as useEffect2, useMemo, useState as useState2 } from "react";
@@ -303,17 +303,31 @@ var itemVariants = cva3(
     }
   }
 );
+var defaultComponents = {
+  Folder: FolderNode,
+  Separator: SeparatorNode,
+  Item: ({ item: { name, ...rest } }) => /* @__PURE__ */ jsx3(BaseItem, { item: { text: name, ...rest } })
+};
 var SidebarContext = createContext({
-  defaultOpenLevel: 1
+  defaultOpenLevel: 1,
+  components: defaultComponents
 });
 function Sidebar({
   banner,
   footer,
+  components,
   items = [],
   defaultOpenLevel = 1
 }) {
   const [open] = useSidebarCollapse();
   const { root } = useTreeContext();
+  const context = useMemo(
+    () => ({
+      defaultOpenLevel,
+      components: { ...defaultComponents, ...components }
+    }),
+    [components, defaultOpenLevel]
+  );
   return /* @__PURE__ */ jsx3(
     Base.SidebarList,
     {
@@ -323,10 +337,10 @@ function Sidebar({
         !open ? "md:hidden" : "md:sticky md:top-16 md:h-body md:w-[240px] md:text-sm xl:w-[260px]",
         "max-md:fixed max-md:inset-0 max-md:z-40 max-md:bg-background/80 max-md:pt-16 max-md:backdrop-blur-md max-md:data-[open=false]:hidden"
       ),
-      children: /* @__PURE__ */ jsxs3(SidebarContext.Provider, { value: { defaultOpenLevel }, children: [
+      children: /* @__PURE__ */ jsxs3(SidebarContext.Provider, { value: context, children: [
         /* @__PURE__ */ jsx3(ScrollArea, { className: "flex-1", children: /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-8 pb-10 pt-4 max-md:px-4 md:pr-3 md:pt-10", children: [
           banner,
-          /* @__PURE__ */ jsx3("div", { className: "lg:hidden", children: items.map((item) => /* @__PURE__ */ jsx3(BaseItem, { item, nested: true }, item.url)) }),
+          items.length > 0 && /* @__PURE__ */ jsx3("div", { className: "lg:hidden", children: items.map((item) => /* @__PURE__ */ jsx3(BaseItem, { item, nested: true }, item.url)) }),
           /* @__PURE__ */ jsx3(NodeList, { items: root.children })
         ] }) }),
         /* @__PURE__ */ jsxs3(
@@ -347,21 +361,16 @@ function Sidebar({
   );
 }
 function NodeList({ items, level = 0, ...props }) {
+  const { components } = useContext(SidebarContext);
   return /* @__PURE__ */ jsx3("div", { ...props, children: items.map((item) => {
     const id = `${item.type}_${item.name}`;
     switch (item.type) {
       case "separator":
-        return /* @__PURE__ */ jsx3(SeparatorNode, { item }, id);
+        return /* @__PURE__ */ jsx3(components.Separator, { item }, id);
       case "folder":
-        return /* @__PURE__ */ jsx3(Folder, { item, level: level + 1 }, id);
+        return /* @__PURE__ */ jsx3(components.Folder, { item, level: level + 1 }, id);
       default:
-        return /* @__PURE__ */ jsx3(
-          BaseItem,
-          {
-            item: { text: item.name, url: item.url, icon: item.icon }
-          },
-          item.url
-        );
+        return /* @__PURE__ */ jsx3(components.Item, { item }, item.url);
     }
   }) });
 }
@@ -371,6 +380,7 @@ function BaseItem({
 }) {
   const pathname = usePathname2();
   const active = isActive(item.url, pathname, nested);
+  const defaultIcon = item.external ? /* @__PURE__ */ jsx3(ExternalLinkIcon, {}) : null;
   return /* @__PURE__ */ jsxs3(
     Link2,
     {
@@ -378,14 +388,14 @@ function BaseItem({
       external: item.external,
       className: twMerge(itemVariants({ active })),
       children: [
-        item.icon,
+        item.icon ?? defaultIcon,
         item.text
       ]
     }
   );
 }
-function Folder({
-  item: { name, children, index, icon },
+function FolderNode({
+  item: { name, children, index, icon, defaultOpen = false },
   level
 }) {
   const { defaultOpenLevel } = useContext(SidebarContext);
@@ -396,7 +406,7 @@ function Folder({
     [children, pathname]
   );
   const [extend, setExtend] = useState2(
-    active || childActive || defaultOpenLevel >= level
+    active || childActive || defaultOpenLevel >= level || defaultOpen
   );
   useEffect2(() => {
     if (active || childActive)

package/dist/layout.d.mts

@@ -1,3 +1,3 @@
 import 'fumadocs-core/server';
 import 'react';
-export { B as BaseLayoutProps, b as DocsLayout, D as DocsLayoutProps, a as Layout, L as LinkItem } from './layout-YB7EFpgW.mjs';
+export { B as BaseLayoutProps, b as DocsLayout, D as DocsLayoutProps, a as Layout, L as LinkItem } from './layout-W7dJ6OHQ.mjs';

package/dist/layout.js

@@ -5,7 +5,7 @@ import {
 } from "./layout.client.js"
 import {
   replaceOrDefault
-} from "./chunk-EDUYFB4P.js";
+} from "./chunk-7F2LGCS6.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";

package/dist/mdx.js

@@ -1,7 +1,7 @@
 import { Pre } from "./mdx.client.js"
 import {
   defaultImageSizes
-} from "./chunk-EDUYFB4P.js";
+} from "./chunk-7F2LGCS6.js";
 import {
   Card,
   Cards

package/dist/page.client.js

@@ -1,8 +1,8 @@
 "use client";
 import {
   useTreeContext
-} from "./chunk-UIZNMCLD.js";
-import "./chunk-EDUYFB4P.js";
+} from "./chunk-C4PI62MH.js";
+import "./chunk-7F2LGCS6.js";
 import {
   useI18n
 } from "./chunk-YAHHY62W.js";
@@ -143,12 +143,14 @@ function Footer({ items }) {
   const { previous, next } = useMemo(() => {
     if (items)
       return items;
-    const currentIndex = tree.list.findIndex((item) => item.url === pathname);
+    const currentIndex = tree.navigation.findIndex(
+      (item) => item.url === pathname
+    );
     return {
-      previous: tree.list[currentIndex - 1],
-      next: tree.list[currentIndex + 1]
+      previous: tree.navigation[currentIndex - 1],
+      next: tree.navigation[currentIndex + 1]
     };
-  }, [items, pathname, tree.list]);
+  }, [items, pathname, tree.navigation]);
   return /* @__PURE__ */ jsxs3("div", { className: "mt-4 flex flex-row flex-wrap gap-4 border-t py-12", children: [
     previous ? /* @__PURE__ */ jsxs3(Link2, { href: previous.url, className: footerItem(), children: [
       /* @__PURE__ */ jsx3(ChevronLeftIcon, { className: "size-5 shrink-0" }),

package/dist/page.js

@@ -6,7 +6,7 @@ import {
 } from "./page.client.js"
 import {
   replaceOrDefault
-} from "./chunk-EDUYFB4P.js";
+} from "./chunk-7F2LGCS6.js";
 import {
   twMerge
 } from "./chunk-TK3TM3MR.js";

package/dist/provider.d.mts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ComponentType, ReactNode } from 'react';
 import { SharedProps } from './components/dialog/search.mjs';
 export { u as useI18n } from './i18n-dw7ODAws.mjs';
-export { u as useTreeContext } from './tree-Zwtp9xPv.mjs';
+export { u as useTreeContext } from './tree-ersey5_u.mjs';
 import 'fumadocs-core/search/shared';
 import 'fumadocs-core/server';
 

package/dist/provider.js

@@ -5,8 +5,8 @@ import {
 } from "./chunk-PLXR6QNH.js";
 import {
   useTreeContext
-} from "./chunk-UIZNMCLD.js";
-import "./chunk-EDUYFB4P.js";
+} from "./chunk-C4PI62MH.js";
+import "./chunk-7F2LGCS6.js";
 import {
   SearchProvider,
   useSearchContext

package/dist/{tree-Zwtp9xPv.d.mts → tree-ersey5_u.d.mts}

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 
 interface TreeContextType {
     tree: PageTree.Root;
-    list: PageTree.Item[];
+    navigation: PageTree.Item[];
     root: PageTree.Root | PageTree.Folder;
 }
 declare function TreeContextProvider({ children, tree, }: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "9.0.0",
+  "version": "10.0.0",
   "description": "The framework for building a documentation website in Next.js",
   "keywords": [
     "NextJs",
@@ -97,7 +97,7 @@
     "react-medium-image-zoom": "^5.1.8",
     "tailwind-merge": "^2.0.0",
     "tailwindcss": "^3.4.1",
-    "fumadocs-core": "9.0.0"
+    "fumadocs-core": "10.0.0"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.20.0",
@@ -105,7 +105,7 @@
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.1",
     "algoliasearch": "^4.20.0",
-    "next": "14.1.0",
+    "next": "14.1.1",
     "postcss": "8.4.35",
     "postcss-cli": "^11.0.0",
     "postcss-lightningcss": "^1.0.0",

package/dist/components/auto-type-table.d.mts

@@ -1,14 +0,0 @@
-import { Options } from 'fumadocs-core/typescript';
-
-/**
- * **Server Component Only**
- *
- * Display properties in an exported interface via Type Table
- */
-declare function AutoTypeTable({ path, name, options, }: {
-    path: string;
-    name: string;
-    options?: Options['options'];
-}): JSX.Element;
-
-export { AutoTypeTable };

package/dist/components/auto-type-table.js

@@ -1,32 +0,0 @@
-import { TypeTable } from "./type-table.js"
-import "../chunk-6C3VEZWH.js";
-
-// src/components/auto-type-table.tsx
-import { generateDocumentation } from "fumadocs-core/typescript";
-import "server-only";
-import { jsx } from "react/jsx-runtime";
-function AutoTypeTable({
-  path,
-  name,
-  options
-}) {
-  const output = generateDocumentation({ file: path, name, options });
-  return /* @__PURE__ */ jsx(
-    TypeTable,
-    {
-      type: Object.fromEntries(
-        output.map((entry) => [
-          entry.name,
-          {
-            type: entry.type,
-            description: entry.description,
-            default: entry.default
-          }
-        ])
-      )
-    }
-  );
-}
-export {
-  AutoTypeTable
-};