fumadocs-ui 16.5.4 → 16.6.1

package/css/generated/shared.css

@@ -36,6 +36,7 @@
 @source inline("-translate-y-1/2");
 @source inline("@container");
 @source inline("@defaultValue");
+@source inline("@deprecated");
 @source inline("@example");
 @source inline("@keyframes");
 @source inline("@max-lg:col-span-full");
@@ -75,6 +76,7 @@
 @source inline("all");
 @source inline("allowClear");
 @source inline("allowCopy");
+@source inline("allowDangerousHtml");
 @source inline("allowedMode");
 @source inline("allowing");
 @source inline("always");
@@ -130,12 +132,14 @@
 @source inline("bg-transparent");
 @source inline("black");
 @source inline("block");
+@source inline("blocks");
 @source inline("body");
 @source inline("boolean");
 @source inline("border");
 @source inline("border-b");
 @source inline("border-fd-foreground/10");
 @source inline("border-l");
+@source inline("border-none");
 @source inline("border-s");
 @source inline("border-t");
 @source inline("border-transparent");
@@ -193,13 +197,13 @@
 @source inline("container");
 @source inline("containerRef");
 @source inline("content");
-@source inline("contentWithHighlights");
 @source inline("context");
 @source inline("controlled/uncontrolled");
 @source inline("copy");
 @source inline("core");
 @source inline("counterSet");
 @source inline("createContext");
+@source inline("createMarkdownRenderer");
 @source inline("createRelativeLink");
 @source inline("css");
 @source inline("ctx");
@@ -288,6 +292,7 @@
 @source inline("displayed");
 @source inline("div");
 @source inline("divide-fd-border");
+@source inline("divide-x");
 @source inline("divide-y");
 @source inline("docsLayoutCtx");
 @source inline("documented");
@@ -360,6 +365,7 @@
 @source inline("formattedValue");
 @source inline("forwardRef");
 @source inline("found");
+@source inline("fragment");
 @source inline("framework");
 @source inline("free");
 @source inline("from");
@@ -413,9 +419,11 @@
 @source inline("h4");
 @source inline("h5");
 @source inline("h6");
+@source inline("handle");
 @source inline("happens");
 @source inline("has-focus-visible:bg-fd-accent");
 @source inline("hash");
+@source inline("hast");
 @source inline("have");
 @source inline("headers");
 @source inline("heading");
@@ -423,7 +431,7 @@
 @source inline("hence");
 @source inline("here");
 @source inline("hidden");
-@source inline("highlights");
+@source inline("highlight");
 @source inline("hooks");
 @source inline("horizontal");
 @source inline("hotKey");
@@ -449,11 +457,11 @@
 @source inline("img");
 @source inline("import");
 @source inline("in");
+@source inline("inPre");
 @source inline("inTab");
 @source inline("index");
 @source inline("infinite");
 @source inline("info");
-@source inline("inline");
 @source inline("inline-flex");
 @source inline("input");
 @source inline("inputType");
@@ -485,7 +493,6 @@
 @source inline("k");
 @source inline("keepBackground");
 @source inline("key");
-@source inline("keyVariants");
 @source inline("keydown");
 @source inline("keyof");
 @source inline("label");
@@ -531,12 +538,15 @@
 @source inline("make");
 @source inline("mapped");
 @source inline("marginBottom");
+@source inline("mark");
 @source inline("marked");
 @source inline("mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)]");
+@source inline("mask-[linear-gradient(to_bottom,white,white_30px,transparent_80px)]");
 @source inline("maskComposite");
 @source inline("maskImage");
 @source inline("matching");
 @source inline("max-h-(--radix-popover-content-available-height)");
+@source inline("max-h-20");
 @source inline("max-h-[460px]");
 @source inline("max-h-[600px]");
 @source inline("max-h-[80svh]");
@@ -546,6 +556,7 @@
 @source inline("max-md:rounded-md");
 @source inline("max-w-[1400px]");
 @source inline("max-w-[98vw]");
+@source inline("max-w-full");
 @source inline("max-w-screen-sm");
 @source inline("max-width");
 @source inline("mb-1");
@@ -555,6 +566,8 @@
 @source inline("md:mb-auto");
 @source inline("md:size-5");
 @source inline("md:top-[calc(50%-250px)]");
+@source inline("mdComponents");
+@source inline("mdRenderer");
 @source inline("me-1");
 @source inline("me-2");
 @source inline("me-auto");
@@ -580,6 +593,7 @@
 @source inline("mx-auto");
 @source inline("my-0");
 @source inline("my-0!");
+@source inline("my-0.5");
 @source inline("my-4");
 @source inline("my-6");
 @source inline("my-auto");
@@ -613,6 +627,7 @@
 @source inline("not");
 @source inline("not-last:mb-2");
 @source inline("not-prose");
+@source inline("now");
 @source inline("null");
 @source inline("num");
 @source inline("number");
@@ -633,13 +648,17 @@
 @source inline("onKey");
 @source inline("onKeyDown");
 @source inline("onOpenChange");
+@source inline("onOpenChangeCallback");
 @source inline("onPointerEnter");
 @source inline("onPointerLeave");
 @source inline("onPointerMove");
 @source inline("onPrint");
 @source inline("onSearchChange");
+@source inline("onSearchChangeCallback");
 @source inline("onSelect");
+@source inline("onSelectCallback");
 @source inline("onTagChange");
+@source inline("onTagChangeCallback");
 @source inline("onValueChange");
 @source inline("one");
 @source inline("only");
@@ -670,6 +689,7 @@
 @source inline("owner");
 @source inline("p");
 @source inline("p-0");
+@source inline("p-0.5");
 @source inline("p-1");
 @source inline("p-1.5");
 @source inline("p-2");
@@ -680,6 +700,7 @@
 @source inline("page");
 @source inline("parameters");
 @source inline("params");
+@source inline("parentId");
 @source inline("pass");
 @source inline("passed");
 @source inline("path");
@@ -724,11 +745,14 @@
 @source inline("pt-0");
 @source inline("pure");
 @source inline("px");
+@source inline("px-0.5");
+@source inline("px-1");
 @source inline("px-1.5");
 @source inline("px-2");
 @source inline("px-2.5");
 @source inline("px-3");
 @source inline("px-4");
+@source inline("px-px");
 @source inline("py-0.5");
 @source inline("py-1");
 @source inline("py-1.5");
@@ -753,11 +777,17 @@
 @source inline("refs");
 @source inline("region");
 @source inline("registering");
+@source inline("rehype-raw");
+@source inline("rehypeCustomElements");
+@source inline("rehypePlugins");
+@source inline("rehypeRaw");
 @source inline("rel");
 @source inline("relative");
+@source inline("remarkRehypeOptions");
 @source inline("remove");
 @source inline("render");
 @source inline("renderHighlights");
+@source inline("renderMarkdown");
 @source inline("repo");
 @source inline("repository");
 @source inline("required");
@@ -791,6 +821,7 @@
 @source inline("s");
 @source inline("scroll");
 @source inline("scroll-into-view-if-needed");
+@source inline("scroll-m-20");
 @source inline("scroll-m-24");
 @source inline("scroll-m-28");
 @source inline("scrollIntoView");
@@ -860,6 +891,7 @@
 @source inline("stars");
 @source inline("start-0");
 @source inline("start-3");
+@source inline("start-6");
 @source inline("state");
 @source inline("static");
 @source inline("sticky");
@@ -868,6 +900,7 @@
 @source inline("stroke-fd-foreground/10");
 @source inline("stroke-width");
 @source inline("strokeWidth");
+@source inline("strong");
 @source inline("style");
 @source inline("styles");
 @source inline("success");
@@ -886,6 +919,7 @@
 @source inline("tabs");
 @source inline("tabsRef");
 @source inline("tag");
+@source inline("tagName");
 @source inline("tags");
 @source inline("tailwind-merge");
 @source inline("target");
@@ -934,6 +968,7 @@
 @source inline("top-0");
 @source inline("top-1.5");
 @source inline("top-1/2");
+@source inline("top-2.5");
 @source inline("top-3");
 @source inline("top-4");
 @source inline("touch");
@@ -960,6 +995,8 @@
 @source inline("under");
 @source inline("underline");
 @source inline("underlying");
+@source inline("unified");
+@source inline("unist-util-visit");
 @source inline("unknown");
 @source inline("unmounted");
 @source inline("updateAnchor");
@@ -989,12 +1026,12 @@
 @source inline("useTheme");
 @source inline("useTreeContext");
 @source inline("useTreePath");
-@source inline("used");
 @source inline("useful");
 @source inline("user");
 @source inline("users");
 @source inline("using");
 @source inline("usually");
+@source inline("v");
 @source inline("v17");
 @source inline("value");
 @source inline("valueToIdMap");
@@ -1007,13 +1044,14 @@
 @source inline("viewRef");
 @source inline("viewport");
 @source inline("viewportProps");
+@source inline("visit");
 @source inline("void");
 @source inline("w");
 @source inline("w-(--radix-popover-trigger-width)");
 @source inline("w-0");
 @source inline("w-0.5");
 @source inline("w-1.5");
-@source inline("w-[25%]");
+@source inline("w-1/4");
 @source inline("w-[calc(100%-1rem)]");
 @source inline("w-fit");
 @source inline("w-full");

package/dist/components/dialog/search.d.ts

@@ -65,10 +65,12 @@ declare function SearchDialogListItem({
   item,
   className,
   children,
-  renderHighlights: render,
+  renderMarkdown,
+  renderHighlights: _,
   ...props
 }: ComponentProps<'button'> & {
-  renderHighlights?: typeof renderHighlights;
+  renderMarkdown?: (v: string) => ReactNode; /** @deprecated highlight blocks is now wrapped in `<mark />`, use `renderMarkdown` to handle instead. */
+  renderHighlights?: (blocks: HighlightedText<ReactNode>[]) => ReactNode;
   item: SearchItemType;
 }): react_jsx_runtime0.JSX.Element;
 declare function SearchDialogIcon(props: ComponentProps<'svg'>): react_jsx_runtime0.JSX.Element;
@@ -90,7 +92,6 @@ declare function TagsListItem({
 }: ComponentProps<'button'> & {
   value: string;
 }): react_jsx_runtime0.JSX.Element;
-declare function renderHighlights(highlights: HighlightedText<ReactNode>[]): ReactNode;
 declare function useSearch(): {
   open: boolean;
   onOpenChange: (open: boolean) => void;

package/dist/components/dialog/search.js

@@ -11,35 +11,123 @@ import { cva } from "class-variance-authority";
 import { useOnChange } from "fumadocs-core/utils/use-on-change";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { Dialog, DialogContent, DialogOverlay, DialogTitle } from "@radix-ui/react-dialog";
+import { createMarkdownRenderer } from "fumadocs-core/content/md";
+import rehypeRaw from "rehype-raw";
+import { visit } from "unist-util-visit";
 
 //#region src/components/dialog/search.tsx
-const Context = createContext(null);
+const RootContext = createContext(null);
 const ListContext = createContext(null);
 const TagsListContext = createContext(null);
+const PreContext = createContext(false);
+const mdRenderer = createMarkdownRenderer({
+	remarkRehypeOptions: { allowDangerousHtml: true },
+	rehypePlugins: [rehypeRaw, rehypeCustomElements]
+});
+const mdComponents = {
+	mark(props) {
+		return /* @__PURE__ */ jsx("span", {
+			...props,
+			className: "text-fd-primary underline"
+		});
+	},
+	a: "span",
+	p(props) {
+		return /* @__PURE__ */ jsx("p", {
+			...props,
+			className: "min-w-0"
+		});
+	},
+	strong(props) {
+		return /* @__PURE__ */ jsx("strong", {
+			...props,
+			className: "text-fd-accent-foreground font-medium"
+		});
+	},
+	code(props) {
+		if (use(PreContext)) return /* @__PURE__ */ jsx("code", {
+			...props,
+			className: "mask-[linear-gradient(to_bottom,white,white_30px,transparent_80px)]"
+		});
+		return /* @__PURE__ */ jsx("code", {
+			...props,
+			className: "border rounded-md px-px bg-fd-secondary text-fd-secondary-foreground"
+		});
+	},
+	custom({ _tagName = "fragment", children, ...rest }) {
+		return /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex max-w-full items-center border p-0.5 rounded-md bg-fd-card text-fd-card-foreground divide-x divide-fd-border",
+			children: [
+				/* @__PURE__ */ jsx("code", {
+					className: "rounded-sm px-0.5 me-1 bg-fd-primary font-medium text-xs text-fd-primary-foreground border-none",
+					children: _tagName
+				}),
+				Object.entries(rest).map(([k, v]) => {
+					if (typeof v !== "string") return;
+					return /* @__PURE__ */ jsxs("code", {
+						className: "truncate text-xs text-fd-muted-foreground px-1",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "text-fd-card-foreground",
+							children: [k, ": "]
+						}), v]
+					}, k);
+				}),
+				children && /* @__PURE__ */ jsx("span", {
+					className: "ps-1",
+					children
+				})
+			]
+		});
+	},
+	pre(props) {
+		return /* @__PURE__ */ jsx("pre", {
+			...props,
+			className: cn("flex flex-col border rounded-md my-0.5 p-2 bg-fd-secondary text-fd-secondary-foreground max-h-20 overflow-hidden", props.className),
+			children: /* @__PURE__ */ jsx(PreContext, {
+				value: true,
+				children: props.children
+			})
+		});
+	}
+};
+function rehypeCustomElements() {
+	return (tree) => {
+		visit(tree, (node) => {
+			if (node.type === "element" && document.createElement(node.tagName) instanceof HTMLUnknownElement) {
+				node.properties._tagName = node.tagName;
+				node.tagName = "custom";
+			}
+		});
+	};
+}
 function SearchDialog({ open, onOpenChange, search, onSearchChange, isLoading = false, onSelect: onSelectProp, children }) {
 	const router = useRouter();
-	const onSelect = useEffectEvent((item) => {
+	const onOpenChangeCallback = useRef(onOpenChange);
+	onOpenChangeCallback.current = onOpenChange;
+	const onSearchChangeCallback = useRef(onSearchChange);
+	onSearchChangeCallback.current = onSearchChange;
+	const onSelect = (item) => {
 		if (item.type === "action") item.onSelect();
 		else if (item.external) window.open(item.url, "_blank")?.focus();
 		else router.push(item.url);
 		onOpenChange(false);
 		onSelectProp?.(item);
-	});
+	};
+	const onSelectCallback = useRef(onSelect);
+	onSelectCallback.current = onSelect;
 	return /* @__PURE__ */ jsx(Dialog, {
 		open,
 		onOpenChange,
-		children: /* @__PURE__ */ jsx(Context.Provider, {
+		children: /* @__PURE__ */ jsx(RootContext, {
 			value: useMemo(() => ({
 				open,
-				onOpenChange,
 				search,
-				onSearchChange,
-				onSelect,
-				isLoading
+				isLoading,
+				onOpenChange: (v) => onOpenChangeCallback.current(v),
+				onSearchChange: (v) => onSearchChangeCallback.current(v),
+				onSelect: (v) => onSelectCallback.current(v)
 			}), [
 				isLoading,
-				onOpenChange,
-				onSearchChange,
 				open,
 				search
 			]),
@@ -150,7 +238,7 @@ function SearchDialogList({ items = null, Empty = () => /* @__PURE__ */ jsx("div
 		className: cn("overflow-hidden h-(--fd-animated-height) transition-[height]", props.className),
 		children: /* @__PURE__ */ jsx("div", {
 			className: cn("w-full flex flex-col overflow-y-auto max-h-[460px] p-1", !items && "hidden"),
-			children: /* @__PURE__ */ jsxs(ListContext.Provider, {
+			children: /* @__PURE__ */ jsxs(ListContext, {
 				value: useMemo(() => ({
 					active,
 					setActive
@@ -163,7 +251,10 @@ function SearchDialogList({ items = null, Empty = () => /* @__PURE__ */ jsx("div
 		})
 	});
 }
-function SearchDialogListItem({ item, className, children, renderHighlights: render = renderHighlights, ...props }) {
+function SearchDialogListItem({ item, className, children, renderMarkdown = (s) => /* @__PURE__ */ jsx(mdRenderer.Markdown, {
+	components: mdComponents,
+	children: s
+}), renderHighlights: _, ...props }) {
 	const { active: activeId, setActive } = useSearchList();
 	const active = item.id === activeId;
 	if (item.type === "action") children ??= item.node;
@@ -176,9 +267,10 @@ function SearchDialogListItem({ item, className, children, renderHighlights: ren
 			role: "none",
 			className: "absolute start-3 inset-y-0 w-px bg-fd-border"
 		}),
-		/* @__PURE__ */ jsxs("p", {
-			className: cn("min-w-0 truncate", item.type !== "page" && "ps-4", item.type === "page" || item.type === "heading" ? "font-medium" : "text-fd-popover-foreground/80"),
-			children: [item.type === "heading" && /* @__PURE__ */ jsx(Hash, { className: "inline me-1 size-4 text-fd-muted-foreground" }), item.contentWithHighlights ? render(item.contentWithHighlights) : item.content]
+		item.type === "heading" && /* @__PURE__ */ jsx(Hash, { className: "absolute start-6 top-2.5 size-4 text-fd-muted-foreground" }),
+		/* @__PURE__ */ jsx("div", {
+			className: cn("min-w-0", item.type === "text" && "ps-4", item.type === "heading" && "ps-8", item.type === "page" || item.type === "heading" ? "font-medium" : "text-fd-popover-foreground/80"),
+			children: typeof item.content === "string" ? renderMarkdown(item.content) : item.content
 		})
 	] });
 	return /* @__PURE__ */ jsx("button", {
@@ -191,7 +283,7 @@ function SearchDialogListItem({ item, className, children, renderHighlights: ren
 			});
 		}, [active]),
 		"aria-selected": active,
-		className: cn("relative select-none px-2.5 py-2 text-start text-sm rounded-lg", active && "bg-fd-accent text-fd-accent-foreground", className),
+		className: cn("relative select-none shrink-0 px-2.5 py-2 text-start text-sm overflow-hidden rounded-lg", active && "bg-fd-accent text-fd-accent-foreground", className),
 		onPointerMove: () => setActive(item.id),
 		...props,
 		children
@@ -206,19 +298,17 @@ function SearchDialogIcon(props) {
 }
 const itemVariants = cva("rounded-md border px-2 py-0.5 text-xs font-medium text-fd-muted-foreground transition-colors", { variants: { active: { true: "bg-fd-accent text-fd-accent-foreground" } } });
 function TagsList({ tag, onTagChange, allowClear = false, ...props }) {
+	const onTagChangeCallback = useRef(onTagChange);
+	onTagChangeCallback.current = onTagChange;
 	return /* @__PURE__ */ jsx("div", {
 		...props,
 		className: cn("flex items-center gap-1 flex-wrap", props.className),
-		children: /* @__PURE__ */ jsx(TagsListContext.Provider, {
+		children: /* @__PURE__ */ jsx(TagsListContext, {
 			value: useMemo(() => ({
 				value: tag,
-				onValueChange: onTagChange,
+				onValueChange: (v) => onTagChangeCallback.current(v),
 				allowClear
-			}), [
-				allowClear,
-				onTagChange,
-				tag
-			]),
+			}), [allowClear, tag]),
 			children: props.children
 		})
 	});
@@ -233,25 +323,14 @@ function TagsListItem({ value, className, ...props }) {
 			active: selected,
 			className
 		})),
-		onClick: () => {
-			onValueChange(selected && allowClear ? void 0 : value);
-		},
+		onClick: () => onValueChange(selected && allowClear ? void 0 : value),
 		tabIndex: -1,
 		...props,
 		children: props.children
 	});
 }
-function renderHighlights(highlights) {
-	return highlights.map((node, i) => {
-		if (node.styles?.highlight) return /* @__PURE__ */ jsx("span", {
-			className: "text-fd-primary underline",
-			children: node.content
-		}, i);
-		return /* @__PURE__ */ jsx(Fragment, { children: node.content }, i);
-	});
-}
 function useSearch() {
-	const ctx = use(Context);
+	const ctx = use(RootContext);
 	if (!ctx) throw new Error("Missing <SearchDialog />");
 	return ctx;
 }

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ComponentProps, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/type-table.d.ts
@@ -30,9 +30,12 @@ interface TypeNode {
   returns?: ReactNode;
 }
 declare function TypeTable({
-  type
+  id,
+  type,
+  className,
+  ...props
 }: {
   type: Record<string, TypeNode>;
-}): react_jsx_runtime0.JSX.Element;
+} & ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { ParameterNode, TypeNode, TypeTable };

package/dist/components/type-table.js

@@ -2,47 +2,56 @@
 
 import { cn } from "../utils/cn.js";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./ui/collapsible.js";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import Link from "fumadocs-core/link";
 import { ChevronDown } from "lucide-react";
 import { cva } from "class-variance-authority";
 
 //#region src/components/type-table.tsx
-const keyVariants = cva("text-fd-primary", { variants: { deprecated: { true: "line-through text-fd-primary/50" } } });
 const fieldVariants = cva("text-fd-muted-foreground not-prose pe-2");
-function TypeTable({ type }) {
+function TypeTable({ id, type, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: "@container flex flex-col p-1 bg-fd-card text-fd-card-foreground rounded-2xl border my-6 text-sm overflow-hidden",
+		id,
+		className: cn("@container flex flex-col p-1 bg-fd-card text-fd-card-foreground rounded-2xl border my-6 text-sm overflow-hidden", className),
+		...props,
 		children: [/* @__PURE__ */ jsxs("div", {
 			className: "flex font-medium items-center px-3 py-1 not-prose text-fd-muted-foreground",
 			children: [/* @__PURE__ */ jsx("p", {
-				className: "w-[25%]",
+				className: "w-1/4",
 				children: "Prop"
 			}), /* @__PURE__ */ jsx("p", {
 				className: "@max-xl:hidden",
 				children: "Type"
 			})]
 		}), Object.entries(type).map(([key, value]) => /* @__PURE__ */ jsx(Item, {
+			parentId: id,
 			name: key,
 			item: value
 		}, key))]
 	});
 }
-function Item({ name, item: { parameters = [], description, required = false, deprecated, typeDescription, default: defaultValue, type, typeDescriptionLink, returns } }) {
+function Item({ parentId, name, item: { parameters = [], description, required = false, deprecated, typeDescription, default: defaultValue, type, typeDescriptionLink, returns } }) {
 	const [open, setOpen] = useState(false);
+	const id = parentId ? `${parentId}-${name}` : void 0;
+	useEffect(() => {
+		const hash = window.location.hash;
+		if (!id || !hash) return;
+		if (`#${id}` === hash) setOpen(true);
+	}, [id]);
 	return /* @__PURE__ */ jsxs(Collapsible, {
+		id,
 		open,
-		onOpenChange: setOpen,
-		className: cn("rounded-xl border overflow-hidden transition-all", open ? "shadow-sm bg-fd-background not-last:mb-2" : "border-transparent"),
+		onOpenChange: (v) => {
+			if (v && id) window.history.replaceState(null, "", `#${id}`);
+			setOpen(v);
+		},
+		className: cn("rounded-xl border overflow-hidden scroll-m-20 transition-all", open ? "shadow-sm bg-fd-background not-last:mb-2" : "border-transparent"),
 		children: [/* @__PURE__ */ jsxs(CollapsibleTrigger, {
 			className: "relative flex flex-row items-center w-full group text-start px-3 py-2 not-prose hover:bg-fd-accent",
 			children: [
 				/* @__PURE__ */ jsxs("code", {
-					className: cn(keyVariants({
-						deprecated,
-						className: "min-w-fit w-[25%] font-medium pe-2"
-					})),
+					className: cn("text-fd-primary min-w-fit w-1/4 font-mono font-medium pe-2", deprecated && "line-through text-fd-primary/50"),
 					children: [name, !required && "?"]
 				}),
 				typeDescriptionLink ? /* @__PURE__ */ jsx(Link, {

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?: "main" | "icon" | "button" | null | undefined;
+  variant?: "icon" | "button" | "main" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function Header({
   nav,

package/dist/style.css

@@ -318,6 +318,9 @@
   .start-4 {
     inset-inline-start: calc(var(--spacing) * 4);
   }
+  .start-6 {
+    inset-inline-start: calc(var(--spacing) * 6);
+  }
   .end-0 {
     inset-inline-end: calc(var(--spacing) * 0);
   }
@@ -348,6 +351,9 @@
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
+  .top-2\.5 {
+    top: calc(var(--spacing) * 2.5);
+  }
   .top-3 {
     top: calc(var(--spacing) * 3);
   }
@@ -432,6 +438,9 @@
   .my-0\! {
     margin-block: calc(var(--spacing) * 0) !important;
   }
+  .my-0\.5 {
+    margin-block: calc(var(--spacing) * 0.5);
+  }
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
@@ -1002,6 +1011,9 @@
   .max-h-\(--radix-popover-content-available-height\) {
     max-height: var(--radix-popover-content-available-height);
   }
+  .max-h-20 {
+    max-height: calc(var(--spacing) * 20);
+  }
   .max-h-\[50vh\] {
     max-height: 50vh;
   }
@@ -1041,12 +1053,12 @@
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
+  .w-1\/4 {
+    width: calc(1/4 * 100%);
+  }
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
-  .w-\[25\%\] {
-    width: 25%;
-  }
   .w-\[85\%\] {
     width: 85%;
   }
@@ -1086,6 +1098,9 @@
   .max-w-\[1400px\] {
     max-width: 1400px;
   }
+  .max-w-full {
+    max-width: 100%;
+  }
   .max-w-screen-sm {
     max-width: var(--breakpoint-sm);
   }
@@ -1165,6 +1180,9 @@
   .animate-pulse {
     animation: var(--animate-pulse);
   }
+  .scroll-m-20 {
+    scroll-margin: calc(var(--spacing) * 20);
+  }
   .scroll-m-24 {
     scroll-margin: calc(var(--spacing) * 24);
   }
@@ -1246,6 +1264,14 @@
   .gap-y-4 {
     row-gap: calc(var(--spacing) * 4);
   }
+  .divide-x {
+    :where(& > :not(:last-child)) {
+      --tw-divide-x-reverse: 0;
+      border-inline-style: var(--tw-border-style);
+      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
+      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
+    }
+  }
   .divide-y {
     :where(& > :not(:last-child)) {
       --tw-divide-y-reverse: 0;
@@ -1346,6 +1372,10 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 1px;
   }
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
   .border-fd-foreground\/10 {
     border-color: color-mix(in srgb, hsl(0, 0%, 3.9%) 10%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1445,6 +1475,9 @@
   .mask-\[linear-gradient\(to_bottom\,transparent\,white_calc\(var\(--spacing\)\*14\)\,white_calc\(100\%-var\(--spacing\)\*14\)\,transparent\)\] {
     mask-image: linear-gradient(to bottom,transparent,white calc(var(--spacing) * 14),white calc(100% - var(--spacing) * 14),transparent);
   }
+  .mask-\[linear-gradient\(to_bottom\,white\,white_30px\,transparent_80px\)\] {
+    mask-image: linear-gradient(to bottom,white,white 30px,transparent 80px);
+  }
   .fill-\(--callout-color\) {
     fill: var(--callout-color);
   }
@@ -1484,6 +1517,9 @@
   .px-0\.5 {
     padding-inline: calc(var(--spacing) * 0.5);
   }
+  .px-1 {
+    padding-inline: calc(var(--spacing) * 1);
+  }
   .px-1\.5 {
     padding-inline: calc(var(--spacing) * 1.5);
   }
@@ -1502,6 +1538,9 @@
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
+  .px-px {
+    padding-inline: 1px;
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -2971,6 +3010,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-divide-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-divide-y-reverse {
   syntax: "*";
   inherits: false;
@@ -3340,6 +3384,7 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-divide-x-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-leading: initial;
       --tw-font-weight: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fumadocs-ui",
-  "version": "16.5.4",
+  "version": "16.6.1",
   "description": "The Radix UI version of Fumadocs UI",
   "keywords": [
     "Docs",
@@ -114,24 +114,28 @@
     "@radix-ui/react-tabs": "^1.1.13",
     "class-variance-authority": "^0.7.1",
     "lucide-react": "^0.563.0",
-    "motion": "^12.33.0",
+    "motion": "^12.34.0",
     "next-themes": "^0.4.6",
     "react-medium-image-zoom": "^5.4.0",
     "react-remove-scroll": "^2.7.2",
+    "rehype-raw": "^7.0.0",
     "scroll-into-view-if-needed": "^3.1.0",
     "tailwind-merge": "^3.4.0",
+    "unist-util-visit": "^5.1.0",
     "@fumadocs/tailwind": "0.0.2"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.18",
-    "@types/node": "^25.2.1",
-    "@types/react": "^19.2.13",
+    "@types/hast": "^3.0.4",
+    "@types/node": "^25.2.3",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "tailwindcss": "^4.1.18",
     "tsdown": "^0.20.3",
+    "unified": "^11.0.5",
     "@fumadocs/cli": "1.2.4",
     "eslint-config-custom": "0.0.0",
-    "fumadocs-core": "16.5.4",
+    "fumadocs-core": "16.6.1",
     "tsconfig": "0.0.0"
   },
   "peerDependencies": {
@@ -139,7 +143,7 @@
     "next": "16.x.x",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "fumadocs-core": "16.5.4"
+    "fumadocs-core": "16.6.1"
   },
   "peerDependenciesMeta": {
     "next": {