fumadocs-ui 16.14.0 → 16.14.2

package/css/generated/glass.css

@@ -1 +1 @@
-@source inline("!footer ---spacing --fd-left-width --fd-main-width --fd-right-width --row --width -me-1.5 -mt-1.5 -mx-1 -translate-x-[280px] @default @sm:max-w-[200px] [--fd-left-width:0px] [--fd-main-width:900px] [--fd-right-width:0px] [--row:calc(3*var(--spacing))] [--row:calc(6*var(--spacing))] [grid-area:left-margin/left-margin/right/right] [grid-area:left] [grid-area:main] [grid-area:right] [mask-image:linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent))] [mask-image:radial-gradient(circle_at_center_right,white,white_200px,transparent_500px)] after aiChat article autoScroll available backdrop-blur-sm base baseVariants before bg-fd-muted-foreground/50 bg-fd-popover/80 chat clientX collapse contentProps data-[active=false]:hover:text-fd-accent-foreground data-[state=closed]:animate-fd-sidebar-out data-[state=open]:animate-fd-sidebar-in data-fd-full defaultSlots defaultTabs desktop edit exitTimerRef fd-glass-layout first:mt-0 flex-row-reverse font-semibold footer footerList fumadocs-core/breadcrumb getBreadcrumbItemsFromPath grid-cols-1 gridTemplate gridTemplateRows group-data-[active=true]:bg-fd-primary h-0 h-6 h-8 h-[calc(100dvh---spacing(4))] handles hover hover:decoration-dashed hover:decoration-fd-muted-foreground hover:opacity-80 hover:underline hover:underline-offset-4 inAnimation including information innerWidth inset-e-0 isLayoutTabActive itemTriggerVariants items-start justify-end layout:[--fd-main-width:1200px] leaves left left-margin lg linkItems longer max-md:bg-linear-to-t max-md:bottom-0 max-md:from-fd-background max-md:h-16 max-md:hidden max-md:mt-auto max-md:pb-4 max-md:ps-[calc(--spacing(1.5)-1px)] max-md:w-4 max-w-[calc(100vw-3rem)] max-xl:-translate-y-1/2 max-xl:bg-fd-popover max-xl:border max-xl:end-1 max-xl:fixed max-xl:grid-cols-[calc(240px---spacing(6))] max-xl:mask-none max-xl:max-h-[calc(100dvh---spacing(32))] max-xl:overflow-clip max-xl:p-3 max-xl:ps-[calc(--spacing(2.5)-1px)] max-xl:rounded-xl max-xl:shadow-md max-xl:text-fd-popover-foreground max-xl:top-1/2 max-xl:w-6 max-xl:w-[240px] mb-8 md:bg-linear-to-b md:from-fd-background md:h-12 md:layout:[--fd-left-width:0px] md:layout:[--fd-left-width:280px] md:layout:[--fd-right-width:12px] md:pb-8 md:pt-16 md:pt-2 md:px-2 md:py-1.5 md:top-0 min-h-dvh mobile mt-2 mt-2.5 mt-4 mx-2 my-2 nd-toc nd-toc-title no onPointerDown opacity-100 overflow-x-clip overflow-y-hidden p-0 p-6 pagination pb-16 pb-4 pe-3 pen pointer pointer-events-none prose-sm provided ps-2.5 ps-3 pt-2 pt-4 px-3.5 reuse right right-margin rightIcon setDate setInAnimation setMobileOpen shadow-fd-background shouldOpen size-10 size-12 size-3.5! size-4! start text-[1.75em] text-end text-fd-foreground text-fd-primary/80 timeout timezone top-2 transition-[background-color,width,height] transition-[grid-template-rows] transition-[opacity,height] transition-[width,padding] transitionTimerRef typography under unlisted updated useBaseSlots useFooterItems useGlassLayout w-(--width) w-[360px] w-[calc(280px---spacing(2))] we well xl:[@media(hover:none)]:[--row:calc(6*var(--spacing))] xl:[@media(hover:none)]:h-6 xl:[@media(hover:none)]:h-px xl:[@media(hover:none)]:opacity-100 xl:[@media(hover:none)]:pointer-events-auto xl:[@media(hover:none)]:w-(--width) xl:flex-row-reverse xl:h-[calc(100dvh---spacing(10))] xl:hidden xl:items-center xl:items-end xl:layout:[--fd-right-width:240px] xl:pe-4 xl:sticky xl:text-end xl:top-10 z-10 z-20 z-30");
+@source inline("!footer ---spacing --fd-left-width --fd-main-width --fd-right-width --row --width -me-1.5 -mt-1.5 -mx-1 -translate-x-[280px] @default @sm:max-w-[200px] [--fd-left-width:0px] [--fd-main-width:900px] [--fd-right-width:0px] [--row:calc(3*var(--spacing))] [--row:calc(6*var(--spacing))] [grid-area:left-margin/left-margin/right/right] [grid-area:left] [grid-area:main] [grid-area:right] [mask-image:linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent))] [mask-image:radial-gradient(circle_at_center_right,white,white_200px,transparent_500px)] after aiChat article autoScroll available backdrop-blur-sm base baseVariants before bg-fd-muted-foreground/50 bg-fd-popover/80 chat clientX collapse contentProps data-[active=false]:hover:text-fd-accent-foreground data-[state=closed]:animate-fd-sidebar-out data-[state=open]:animate-fd-sidebar-in data-fd-full defaultSlots defaultTabs desktop edit exitTimerRef fd-glass-layout first:mt-0 flex-row-reverse font-semibold footer footerList fumadocs-core/breadcrumb getBreadcrumbItemsFromPath grid-cols-1 gridTemplate gridTemplateRows group-data-[active=true]:bg-fd-primary h-0 h-6 h-8 h-[calc(100dvh---spacing(4))] handles hover hover:decoration-dashed hover:decoration-fd-muted-foreground hover:opacity-80 hover:underline hover:underline-offset-4 inAnimation including information innerWidth inset-e-0 isLayoutTabActive itemTriggerVariants items-start justify-end layout:[--fd-main-width:1200px] leaves left left-margin leftSpace lg linkItems longer max-md:bg-linear-to-t max-md:bottom-0 max-md:from-fd-background max-md:h-16 max-md:hidden max-md:mt-auto max-md:pb-4 max-md:ps-[calc(--spacing(1.5)-1px)] max-md:w-4 max-w-[calc(100vw-3rem)] max-xl:-translate-y-1/2 max-xl:bg-fd-popover max-xl:border max-xl:end-1 max-xl:fixed max-xl:grid-cols-[calc(240px---spacing(6))] max-xl:mask-none max-xl:max-h-[calc(100dvh---spacing(32))] max-xl:overflow-clip max-xl:p-3 max-xl:ps-[calc(--spacing(2.5)-1px)] max-xl:rounded-xl max-xl:shadow-md max-xl:text-fd-popover-foreground max-xl:top-1/2 max-xl:w-6 max-xl:w-[240px] mb-8 md:bg-linear-to-b md:from-fd-background md:h-12 md:layout:[--fd-left-width:0px] md:layout:[--fd-left-width:280px] md:layout:[--fd-right-width:12px] md:pb-8 md:pt-16 md:pt-2 md:px-2 md:py-1.5 md:top-0 min-h-dvh mobile mt-2 mt-2.5 mt-4 mx-2 my-2 nd-toc nd-toc-title no onPointerDown opacity-100 overflow-x-clip overflow-y-hidden p-0 p-6 pagination pb-16 pb-4 pe-3 pe-3.5 pen pointer pointer-events-none prose-sm provided ps-2.5 ps-3 ps-4.5 pt-2 pt-4 reuse right right-margin rightIcon setDate setInAnimation setMobileOpen shadow-fd-background shouldOpen size-10 size-12 size-3.5! size-4! start text-[1.75em] text-end text-fd-foreground text-fd-primary/80 timeout timezone top-2 transition-[background-color,width,height] transition-[grid-template-rows] transition-[opacity,height] transition-[width,padding] transitionTimerRef typography under unlisted updated useBaseSlots useFooterItems useGlassLayout w-(--width) w-[360px] w-[calc(280px---spacing(2))] we well xl:[@media(hover:none)]:[--row:calc(6*var(--spacing))] xl:[@media(hover:none)]:h-6 xl:[@media(hover:none)]:h-px xl:[@media(hover:none)]:opacity-100 xl:[@media(hover:none)]:pointer-events-auto xl:[@media(hover:none)]:w-(--width) xl:flex-row-reverse xl:h-[calc(100dvh---spacing(10))] xl:hidden xl:items-center xl:items-end xl:layout:[--fd-right-width:240px] xl:pe-4 xl:sticky xl:text-end xl:top-10 z-10 z-20 z-30");

package/dist/components/card.js

@@ -10,7 +10,8 @@ function Cards(props) {
 	});
 }
 function Card({ icon, title, description, ...props }) {
-	return /* @__PURE__ */ jsxs(props.href ? Link : "div", {
+	const E = props.href ? Link : "div";
+	return /* @__PURE__ */ jsxs(E, {
 		...props,
 		"data-card": true,
 		className: cn("block rounded-xl border bg-fd-card p-4 text-fd-card-foreground transition-colors @max-lg:col-span-full", props.href && "hover:bg-fd-accent/80", props.className),

package/dist/components/dialog/search.js

@@ -152,9 +152,10 @@ function SearchDialogInput(props) {
 }
 function SearchDialogClose({ children = "ESC", className, ...props }) {
 	const { onOpenChange } = useSearch();
+	const t = useTranslations({ note: "search dialog" });
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		"aria-label": useTranslations({ note: "search dialog" })("Close Search", { note: "aria-label" }),
+		"aria-label": t("Close Search", { note: "aria-label" }),
 		onClick: () => onOpenChange(false),
 		className: cn(buttonVariants({
 			color: "outline",

package/dist/components/dynamic-codeblock.core.js

@@ -23,7 +23,7 @@ function DynamicCodeBlock({ lang, code, codeblock, options, wrapInSuspense = tru
 		...options,
 		components: {
 			pre: DefaultPre,
-			...options.components
+			...options?.components
 		}
 	};
 	let node = useShikiDynamic(highlighter, code, shikiOptions, [

package/dist/components/sidebar/base.js

@@ -245,9 +245,10 @@ function SidebarTrigger({ children, ...props }) {
 }
 function SidebarCollapseTrigger(props) {
 	const { collapsed, setCollapsed } = useSidebar();
+	const t = useTranslations({ note: "sidebar" });
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
-		"aria-label": useTranslations({ note: "sidebar" })("Collapse Sidebar", { note: "aria-label" }),
+		"aria-label": t("Collapse Sidebar", { note: "aria-label" }),
 		"data-collapsed": collapsed,
 		onClick: () => {
 			setCollapsed((prev) => !prev);

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

@@ -8,7 +8,8 @@ function createLinkItemRenderer({ SidebarFolder, SidebarFolderContent, SidebarFo
 	* Render sidebar items from page tree
 	*/
 	return function SidebarLinkItem({ item, ...props }) {
-		const active = isLinkItemActive(item, usePathname());
+		const pathname = usePathname();
+		const active = isLinkItemActive(item, pathname);
 		if (item.type === "custom") return /* @__PURE__ */ jsx("div", {
 			...props,
 			children: item.children

package/dist/components/toc/clerk.js

@@ -104,9 +104,10 @@ function TOCItems({ ref, className, children, ...props }) {
 	});
 }
 function TOCEmpty() {
+	const t = useTranslations({ note: "table of contents" });
 	return /* @__PURE__ */ jsx("div", {
 		className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
-		children: useTranslations({ note: "table of contents" })("No Headings")
+		children: t("No Headings")
 	});
 }
 function ThumbTrack({ computed }) {

package/dist/components/toc/default.js

@@ -119,9 +119,10 @@ function TOCItems({ ref, className, thumbBox = true, children, ...props }) {
 	});
 }
 function TOCEmpty() {
+	const t = useTranslations({ note: "table of contents" });
 	return /* @__PURE__ */ jsx("div", {
 		className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
-		children: useTranslations({ note: "table of contents" })("No Headings")
+		children: t("No Headings")
 	});
 }
 function ThumbTrack({ computed, thumbBox }) {

package/dist/layouts/docs/index.js

@@ -4,14 +4,15 @@ import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 //#region src/layouts/docs/index.tsx
 function DocsLayout({ tree, sidebar: { tabs: _tabs, tabMode: _tabMode, ...sidebarProps } = {}, tabs: layoutTabs = _tabs, tabMode = _tabMode, children, ...props }) {
+	const tabs = useMemo(() => {
+		if (Array.isArray(layoutTabs)) return layoutTabs;
+		if (typeof layoutTabs === "object") return getLayoutTabs(tree, layoutTabs);
+		if (layoutTabs !== false) return getLayoutTabs(tree);
+		return [];
+	}, [tree, layoutTabs]);
 	return /* @__PURE__ */ jsx(LayoutBody, {
 		tree,
-		tabs: useMemo(() => {
-			if (Array.isArray(layoutTabs)) return layoutTabs;
-			if (typeof layoutTabs === "object") return getLayoutTabs(tree, layoutTabs);
-			if (layoutTabs !== false) return getLayoutTabs(tree);
-			return [];
-		}, [tree, layoutTabs]),
+		tabs,
 		tabMode,
 		sidebar: sidebarProps,
 		...props,

package/dist/layouts/docs/slots/sidebar.js

@@ -238,8 +238,9 @@ function SidebarFolderLink({ className, style, ...props }) {
 	});
 }
 function SidebarFolderContent({ className, children, ...props }) {
+	const depth = useFolderDepth();
 	return /* @__PURE__ */ jsx(SidebarFolderContent$1, {
-		className: cn("relative", useFolderDepth() === 1 && "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:inset-s-2.5", className),
+		className: cn("relative", depth === 1 && "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:inset-s-2.5", className),
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col gap-0.5 pt-0.5",

package/dist/layouts/glass/index.js

@@ -36,6 +36,7 @@ function GlassLayout(props) {
 			use: useSidebar
 		}
 	};
+	const leftSpace = "calc(50% - var(--fd-main-width)/2 - var(--fd-left-width))";
 	return /* @__PURE__ */ jsx(LayoutContext, {
 		value: {
 			props: {
@@ -53,7 +54,7 @@ function GlassLayout(props) {
 				children: /* @__PURE__ */ jsxs("div", {
 					id: "fd-glass-layout",
 					className: "grid overflow-x-clip min-h-dvh [--fd-main-width:900px] [--fd-left-width:0px] [--fd-right-width:0px]",
-					style: { gridTemplate: `"left left-margin main right-margin right" 1fr / var(--fd-left-width) calc(50% - var(--fd-main-width)/2 - var(--fd-left-width)) 1fr calc(50% - var(--fd-main-width)/2 - var(--fd-right-width)) var(--fd-right-width)` },
+					style: { gridTemplate: `"left left-margin main right-margin right" 1fr / var(--fd-left-width) ${leftSpace} 1fr calc(50% - var(--fd-main-width)/2 - var(--fd-right-width) + min(${leftSpace}, 0px)) var(--fd-right-width)` },
 					children: [
 						/* @__PURE__ */ jsx(slots.sidebar.drawer, {}),
 						/* @__PURE__ */ jsx(slots.sidebar.main, {}),

package/dist/layouts/glass/slots/sidebar.js

@@ -110,7 +110,7 @@ function Sidebar({ className, children, ...props }) {
 		...props,
 		children: [
 			/* @__PURE__ */ jsxs("div", {
-				className: "flex items-start gap-1 pt-4 px-3.5 empty:hidden",
+				className: "flex items-start gap-1 pt-4 ps-4.5 pe-3.5 empty:hidden",
 				children: [/* @__PURE__ */ jsx(slots.navTitle, { className: "flex text-sm items-center font-semibold gap-2 me-auto" }), /* @__PURE__ */ jsxs("div", {
 					className: "flex -mt-1.5 -me-1.5 empty:hidden",
 					children: [menuItems.map((item, i) => item.type === "icon" && /* @__PURE__ */ jsx(SidebarIconLinkItem, { item }, i)), collapsible && /* @__PURE__ */ jsx("button", {

package/dist/layouts/home/slots/header.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps } from "react";
 //#region src/layouts/home/slots/header.d.ts
 declare const navItemVariants: (props?: ({
-  variant?: "icon" | "main" | "button" | null | undefined;
+  variant?: "button" | "main" | "icon" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Header(props: ComponentProps<'header'>): string | number | bigint | true | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined>;
 //#endregion

package/dist/layouts/notebook/index.js

@@ -4,14 +4,15 @@ import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 //#region src/layouts/notebook/index.tsx
 function DocsLayout({ tree, tabMode = "sidebar", sidebar: { tabs: defaultTabs, ...sidebarProps } = {}, children, tabs = defaultTabs, ...props }) {
+	const resolvedTabs = useMemo(() => {
+		if (Array.isArray(tabs)) return tabs;
+		if (typeof tabs === "object") return getLayoutTabs(tree, tabs);
+		if (tabs !== false) return getLayoutTabs(tree);
+		return [];
+	}, [tabs, tree]);
 	return /* @__PURE__ */ jsx(LayoutBody, {
 		tree,
-		tabs: useMemo(() => {
-			if (Array.isArray(tabs)) return tabs;
-			if (typeof tabs === "object") return getLayoutTabs(tree, tabs);
-			if (tabs !== false) return getLayoutTabs(tree);
-			return [];
-		}, [tabs, tree]),
+		tabs: resolvedTabs,
 		tabMode,
 		sidebar: sidebarProps,
 		...props,

package/dist/layouts/notebook/slots/sidebar.js

@@ -123,8 +123,9 @@ function SidebarFolderLink({ className, style, ...props }) {
 	});
 }
 function SidebarFolderContent({ className, children, ...props }) {
+	const depth = useFolderDepth();
 	return /* @__PURE__ */ jsx(SidebarFolderContent$1, {
-		className: cn("relative", useFolderDepth() === 1 && "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:inset-s-2.5", className),
+		className: cn("relative", depth === 1 && "before:content-[''] before:absolute before:w-px before:inset-y-1 before:bg-fd-border before:inset-s-2.5", className),
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col gap-0.5 pt-0.5",

package/dist/layouts/shared/client.js

@@ -9,7 +9,8 @@ import { usePathname } from "fumadocs-core/framework";
 import { jsx } from "react/jsx-runtime";
 //#region src/layouts/shared/client.tsx
 function LinkItem({ ref, item, ...props }) {
-	const active = isLinkItemActive(item, usePathname());
+	const pathname = usePathname();
+	const active = isLinkItemActive(item, pathname);
 	return /* @__PURE__ */ jsx(Link, {
 		ref,
 		href: item.url,

package/dist/legacy/sidebar.js

@@ -14,7 +14,8 @@ function SidebarProvider({ children }) {
 	const [open, setOpen] = useState(false);
 	const [collapsed, setCollapsed] = useState(false);
 	const closeOnRedirect = useRef(true);
-	useOnChange(usePathname(), () => {
+	const pathname = usePathname();
+	useOnChange(pathname, () => {
 		if (closeOnRedirect.current) setOpen(false);
 		else closeOnRedirect.current = true;
 	});

package/dist/style.css

@@ -1648,9 +1648,6 @@
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
-  .px-3\.5 {
-    padding-inline: calc(var(--spacing) * 3.5);
-  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
@@ -1714,6 +1711,9 @@
   .ps-4 {
     padding-inline-start: calc(var(--spacing) * 4);
   }
+  .ps-4\.5 {
+    padding-inline-start: calc(var(--spacing) * 4.5);
+  }
   .ps-8 {
     padding-inline-start: calc(var(--spacing) * 8);
   }
@@ -1729,6 +1729,9 @@
   .pe-3 {
     padding-inline-end: calc(var(--spacing) * 3);
   }
+  .pe-3\.5 {
+    padding-inline-end: calc(var(--spacing) * 3.5);
+  }
   .pe-4 {
     padding-inline-end: calc(var(--spacing) * 4);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "16.14.0",
+  "version": "16.14.2",
   "description": "The Radix UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -147,13 +147,13 @@
     "@radix-ui/react-tabs": "^1.1.21",
     "class-variance-authority": "^0.7.1",
     "cnfast": "^0.1.0",
-    "lucide-react": "^1.27.0",
+    "lucide-react": "^1.28.0",
     "motion": "^12.43.0",
     "next-themes": "^0.4.6",
     "react-remove-scroll": "^2.7.2",
     "rehype-raw": "^7.0.0",
     "scroll-into-view-if-needed": "^3.1.0",
-    "shiki": "^4.3.1",
+    "shiki": "^4.4.1",
     "unist-util-visit": "^5.1.0",
     "@fumadocs/tailwind": "0.1.1"
   },
@@ -164,8 +164,8 @@
     "@types/hast": "^3.0.5",
     "@types/mdx": "^2.0.14",
     "@types/node": "^26.1.2",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "fuma-cli": "^0.1.1",
     "react-medium-image-zoom": "^5.4.8",
     "tailwindcss": "^4.3.3",
@@ -173,7 +173,7 @@
     "unified": "^11.0.5",
     "@fumadocs/cli": "1.4.1",
     "tsconfig": "0.0.0",
-    "fumadocs-core": "16.14.0"
+    "fumadocs-core": "16.14.2"
   },
   "peerDependencies": {
     "@types/mdx": "*",
@@ -182,7 +182,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "takumi-js": "*",
-    "fumadocs-core": "16.14.0"
+    "fumadocs-core": "16.14.2"
   },
   "peerDependenciesMeta": {
     "next": {