fumadocs-ui 9.0.0 → 9.1.0

package/dist/components/callout.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
-declare const Callout: React.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "type" | "icon"> & {
+declare const Callout: React.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "title" | "icon" | "type"> & {
     title?: ReactNode;
     /**
      * @defaultValue info

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 { N as Nav, S as Sidebar } from './layout-W7dJ6OHQ.mjs';
 import 'fumadocs-core/server';
 import 'react';

package/dist/layout.client.js

@@ -303,17 +303,31 @@ var itemVariants = cva3(
     }
   }
 );
+var defaultComponents = {
+  Folder: FolderNode,
+  Separator: SeparatorNode,
+  Item: ({ item }) => /* @__PURE__ */ jsx3(BaseItem, { item: { text: item.name, url: item.url, icon: item.icon } })
+};
 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);
     }
   }) });
 }
@@ -384,8 +393,8 @@ function BaseItem({
     }
   );
 }
-function Folder({
-  item: { name, children, index, icon },
+function FolderNode({
+  item: { name, children, index, icon, defaultOpen = false },
   level
 }) {
   const { defaultOpenLevel } = useContext(SidebarContext);
@@ -396,7 +405,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "9.0.0",
+  "version": "9.1.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": "9.1.0"
   },
   "devDependencies": {
     "@algolia/client-search": "^4.20.0",