fumadocs-ui 16.6.1 → 16.6.2

package/css/generated/notebook.css

@@ -398,7 +398,6 @@
 @source inline("start-0");
 @source inline("sticky");
 @source inline("still");
-@source inline("string");
 @source inline("stroke");
 @source inline("stroke-current/25");
 @source inline("strokeDasharray");

package/css/generated/shared.css

@@ -66,7 +66,6 @@
 @source inline("absolute");
 @source inline("action");
 @source inline("active");
-@source inline("activeType");
 @source inline("add");
 @source inline("advanced");
 @source inline("after");
@@ -93,6 +92,7 @@
 @source inline("aria-selected");
 @source inline("as");
 @source inline("aside");
+@source inline("assume");
 @source inline("assumes");
 @source inline("async");
 @source inline("at");
@@ -619,6 +619,7 @@
 @source inline("nextIdRef");
 @source inline("nextPage");
 @source inline("node");
+@source inline("nodes");
 @source inline("none");
 @source inline("noopener");
 @source inline("noreferrer");
@@ -991,6 +992,7 @@
 @source inline("type");
 @source inline("typeof");
 @source inline("types");
+@source inline("unchanged");
 @source inline("undefined");
 @source inline("under");
 @source inline("underline");

package/dist/components/sidebar/base.d.ts

@@ -74,9 +74,11 @@ declare function SidebarViewport(props: ScrollAreaProps): react_jsx_runtime0.JSX
 declare function SidebarSeparator(props: ComponentProps<'p'>): react_jsx_runtime0.JSX.Element;
 declare function SidebarItem({
   icon,
+  active,
   children,
   ...props
 }: LinkProps & {
+  active?: boolean;
   icon?: ReactNode;
 }): react_jsx_runtime0.JSX.Element;
 declare function SidebarFolder({
@@ -96,8 +98,11 @@ declare function SidebarFolderTrigger({
 }: CollapsibleTriggerProps): react_jsx_runtime0.JSX.Element;
 declare function SidebarFolderLink({
   children,
+  active,
   ...props
-}: LinkProps): react_jsx_runtime0.JSX.Element;
+}: LinkProps & {
+  active?: boolean;
+}): react_jsx_runtime0.JSX.Element;
 declare function SidebarFolderContent(props: CollapsibleContentProps): react_jsx_runtime0.JSX.Element;
 declare function SidebarTrigger({
   children,

package/dist/components/sidebar/base.js

@@ -1,7 +1,6 @@
 'use client';
 
 import { cn } from "../../utils/cn.js";
-import { isActive } from "../../utils/urls.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../ui/collapsible.js";
 import { ScrollArea, ScrollViewport } from "../ui/scroll-area.js";
 import { createContext, use, useEffect, useMemo, useRef, useState } from "react";
@@ -134,11 +133,9 @@ function SidebarSeparator(props) {
 		children: props.children
 	});
 }
-function SidebarItem({ icon, children, ...props }) {
-	const pathname = usePathname();
+function SidebarItem({ icon, active = false, children, ...props }) {
 	const ref = useRef(null);
 	const { prefetch } = useSidebar();
-	const active = props.href !== void 0 && isActive(props.href, pathname, false);
 	useAutoScroll(active, ref);
 	return /* @__PURE__ */ jsxs(Link, {
 		ref,
@@ -190,12 +187,10 @@ function SidebarFolderTrigger({ children, ...props }) {
 		children
 	});
 }
-function SidebarFolderLink({ children, ...props }) {
+function SidebarFolderLink({ children, active = false, ...props }) {
 	const ref = useRef(null);
 	const { open, setOpen, collapsible } = use(FolderContext);
 	const { prefetch } = useSidebar();
-	const pathname = usePathname();
-	const active = props.href !== void 0 && isActive(props.href, pathname, false);
 	useAutoScroll(active, ref);
 	return /* @__PURE__ */ jsxs(Link, {
 		ref,

package/dist/components/sidebar/link-item.js

@@ -1,3 +1,6 @@
+'use client';
+
+import { useLinkItemActive } from "../../utils/link-item.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/sidebar/link-item.tsx
@@ -6,6 +9,7 @@ function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFo
 	* Render sidebar items from page tree
 	*/
 	return function SidebarLinkItem({ item, ...props }) {
+		const active = useLinkItemActive(item);
 		if (item.type === "custom") return /* @__PURE__ */ jsx("div", {
 			...props,
 			children: item.children
@@ -14,6 +18,7 @@ function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFo
 			...props,
 			children: [item.url ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
 				href: item.url,
+				active,
 				external: item.external,
 				children: [item.icon, item.text]
 			}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [item.icon, item.text] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children: item.items.map((child, i) => /* @__PURE__ */ jsx(SidebarLinkItem, { item: child }, i)) })]
@@ -22,6 +27,7 @@ function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFo
 			href: item.url,
 			icon: item.icon,
 			external: item.external,
+			active,
 			...props,
 			children: item.text
 		});

package/dist/components/sidebar/page-tree.js

@@ -1,55 +1,69 @@
 import { useTreeContext, useTreePath } from "../../contexts/tree.js";
-import { Fragment, useMemo } from "react";
+import { isActive } from "../../utils/urls.js";
+import { Fragment, createContext, use, useMemo } from "react";
+import { usePathname } from "fumadocs-core/framework";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/components/sidebar/page-tree.tsx
+const RendererContext = createContext(null);
 function createPageTreeRenderer({ SidebarFolder, SidebarFolderContent, SidebarFolderLink, SidebarFolderTrigger, SidebarSeparator, SidebarItem }) {
-	function PageTreeFolder({ item, children }) {
-		const path = useTreePath();
-		return /* @__PURE__ */ jsxs(SidebarFolder, {
-			collapsible: item.collapsible,
-			active: path.includes(item),
-			defaultOpen: item.defaultOpen,
-			children: [item.index ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
-				href: item.index.url,
-				external: item.index.external,
-				children: [item.icon, item.name]
-			}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [item.icon, item.name] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children })]
+	function renderList(nodes) {
+		return nodes.map((node, i) => /* @__PURE__ */ jsx(PageTreeNode, { node }, i));
+	}
+	function PageTreeNode({ node }) {
+		const { Separator, Item, Folder, pathname } = use(RendererContext);
+		if (node.type === "separator") {
+			if (Separator) return /* @__PURE__ */ jsx(Separator, { item: node });
+			return /* @__PURE__ */ jsxs(SidebarSeparator, { children: [node.icon, node.name] });
+		}
+		if (node.type === "folder") {
+			const path = useTreePath();
+			if (Folder) return /* @__PURE__ */ jsx(Folder, {
+				item: node,
+				children: renderList(node.children)
+			});
+			return /* @__PURE__ */ jsxs(SidebarFolder, {
+				collapsible: node.collapsible,
+				active: path.includes(node),
+				defaultOpen: node.defaultOpen,
+				children: [node.index ? /* @__PURE__ */ jsxs(SidebarFolderLink, {
+					href: node.index.url,
+					active: isActive(node.index.url, pathname),
+					external: node.index.external,
+					children: [node.icon, node.name]
+				}) : /* @__PURE__ */ jsxs(SidebarFolderTrigger, { children: [node.icon, node.name] }), /* @__PURE__ */ jsx(SidebarFolderContent, { children: renderList(node.children) })]
+			});
+		}
+		if (Item) return /* @__PURE__ */ jsx(Item, { item: node });
+		return /* @__PURE__ */ jsx(SidebarItem, {
+			href: node.url,
+			external: node.external,
+			active: isActive(node.url, pathname),
+			icon: node.icon,
+			children: node.name
 		});
 	}
 	/**
 	* Render sidebar items from page tree
 	*/
 	return function SidebarPageTree(components) {
+		const { Folder, Item, Separator } = components;
 		const { root } = useTreeContext();
-		const { Separator, Item, Folder = PageTreeFolder } = components;
-		return useMemo(() => {
-			function renderSidebarList(items) {
-				return items.map((item, i) => {
-					if (item.type === "separator") {
-						if (Separator) return /* @__PURE__ */ jsx(Separator, { item }, i);
-						return /* @__PURE__ */ jsxs(SidebarSeparator, { children: [item.icon, item.name] }, i);
-					}
-					if (item.type === "folder") return /* @__PURE__ */ jsx(Folder, {
-						item,
-						children: renderSidebarList(item.children)
-					}, i);
-					if (Item) return /* @__PURE__ */ jsx(Item, { item }, item.url);
-					return /* @__PURE__ */ jsx(SidebarItem, {
-						href: item.url,
-						external: item.external,
-						icon: item.icon,
-						children: item.name
-					}, item.url);
-				});
-			}
-			return /* @__PURE__ */ jsx(Fragment, { children: renderSidebarList(root.children) }, root.$id);
-		}, [
-			Folder,
-			Item,
-			Separator,
-			root
-		]);
+		const pathname = usePathname();
+		return /* @__PURE__ */ jsx(RendererContext, {
+			value: useMemo(() => ({
+				Folder,
+				Item,
+				Separator,
+				pathname
+			}), [
+				Folder,
+				Item,
+				Separator,
+				pathname
+			]),
+			children: /* @__PURE__ */ jsx(Fragment, { children: renderList(root.children) }, root.$id)
+		});
 	};
 }
 

package/dist/layouts/docs/page/client.js

@@ -150,7 +150,7 @@ function PageFooter({ items, children, className, ...props }) {
 	const pathname = usePathname();
 	const { previous, next } = useMemo(() => {
 		if (items) return items;
-		const idx = footerList.findIndex((item) => isActive(item.url, pathname, false));
+		const idx = footerList.findIndex((item) => isActive(item.url, pathname));
 		if (idx === -1) return {};
 		return {
 			previous: footerList[idx - 1],

package/dist/layouts/flux/page/client.js

@@ -178,7 +178,7 @@ function PageFooter({ items, children, className, ...props }) {
 	const pathname = usePathname();
 	const { previous, next } = useMemo(() => {
 		if (items) return items;
-		const idx = footerList.findIndex((item) => isActive(item.url, pathname, false));
+		const idx = footerList.findIndex((item) => isActive(item.url, pathname));
 		if (idx === -1) return {};
 		return {
 			previous: footerList[idx - 1],

package/dist/layouts/home/client.d.ts

@@ -4,7 +4,7 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
 
 //#region src/layouts/home/client.d.ts
 declare const navItemVariants: (props?: ({
-  variant?: "icon" | "button" | "main" | null | undefined;
+  variant?: "main" | "icon" | "button" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Header({
   nav,

package/dist/layouts/notebook/page/client.js

@@ -150,7 +150,7 @@ function PageFooter({ items, children, className, ...props }) {
 	const pathname = usePathname();
 	const { previous, next } = useMemo(() => {
 		if (items) return items;
-		const idx = footerList.findIndex((item) => isActive(item.url, pathname, false));
+		const idx = footerList.findIndex((item) => isActive(item.url, pathname));
 		if (idx === -1) return {};
 		return {
 			previous: footerList[idx - 1],

package/dist/layouts/shared/index.d.ts

@@ -1,4 +1,4 @@
-import { ButtonItemType, CustomItemType, IconItemType, LinkItem, LinkItemType, MainItemType, MenuItemType } from "../../utils/link-item.js";
+import { ButtonItemType, CustomItemType, IconItemType, LinkItem, LinkItemType, MainItemType, MenuItemType, useLinkItemActive } from "../../utils/link-item.js";
 import * as react from "react";
 import { ComponentProps, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
@@ -72,4 +72,4 @@ declare function useLinkItems({
   all: LinkItemType[];
 };
 //#endregion
-export { BaseLayoutProps, ButtonItemType, CustomItemType, IconItemType, LinkItem, LinkItemType, MainItemType, MenuItemType, NavOptions, renderTitleNav, resolveLinkItems, useLinkItems };
+export { BaseLayoutProps, ButtonItemType, CustomItemType, IconItemType, LinkItem, LinkItemType, MainItemType, MenuItemType, NavOptions, renderTitleNav, resolveLinkItems, useLinkItemActive, useLinkItems };

package/dist/utils/link-item.d.ts

@@ -79,7 +79,8 @@ declare function LinkItem({
   item,
   ...props
 }: Omit<ComponentProps<'a'>, 'href'> & {
-  item: WithHref;
+  item: LinkItemType & WithHref;
 }): react_jsx_runtime0.JSX.Element;
+declare function useLinkItemActive(link: LinkItemType): boolean;
 //#endregion
-export { ButtonItemType, CustomItemType, IconItemType, LinkItem, LinkItemType, MainItemType, MenuItemType };
+export { ButtonItemType, CustomItemType, IconItemType, LinkItem, LinkItemType, MainItemType, MenuItemType, useLinkItemActive };

package/dist/utils/link-item.js

@@ -7,9 +7,7 @@ import Link from "fumadocs-core/link";
 
 //#region src/utils/link-item.tsx
 function LinkItem({ ref, item, ...props }) {
-	const pathname = usePathname();
-	const activeType = item.active ?? "url";
-	const active = activeType !== "none" && isActive(item.url, pathname, activeType === "nested-url");
+	const active = useLinkItemActive(item);
 	return /* @__PURE__ */ jsx(Link, {
 		ref,
 		href: item.url,
@@ -19,6 +17,12 @@ function LinkItem({ ref, item, ...props }) {
 		children: props.children
 	});
 }
+function useLinkItemActive(link) {
+	const pathname = usePathname();
+	if (link.type === "custom" || !link.url) return false;
+	if (link.active === "none") return false;
+	return isActive(link.url, pathname, link.active === "nested-url");
+}
 
 //#endregion
-export { LinkItem };
+export { LinkItem, useLinkItemActive };

package/dist/utils/urls.js

@@ -6,7 +6,7 @@ function normalize(urlOrPath) {
 /**
 * @returns if `href` is matching the given pathname
 */
-function isActive(href, pathname, nested = true) {
+function isActive(href, pathname, nested = false) {
 	href = normalize(href);
 	pathname = normalize(pathname);
 	return href === pathname || nested && pathname.startsWith(`${href}/`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "16.6.1",
+  "version": "16.6.2",
   "description": "The Radix UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -135,7 +135,7 @@
     "unified": "^11.0.5",
     "@fumadocs/cli": "1.2.4",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "16.6.1",
+    "fumadocs-core": "16.6.2",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
@@ -143,7 +143,7 @@
     "next": "16.x.x",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "fumadocs-core": "16.6.1"
+    "fumadocs-core": "16.6.2"
   },
   "peerDependenciesMeta": {
     "next": {