@fumadocs/base-ui 16.7.1 → 16.7.3

package/css/generated/shared.css

@@ -14,6 +14,7 @@
 @source inline("--accordion-panel-height");
 @source inline("--anchor-width");
 @source inline("--available-height");
+@source inline("--available-width");
 @source inline("--callout-color");
 @source inline("--collapsible-panel-height");
 @source inline("--color-fd-");
@@ -25,6 +26,9 @@
 @source inline("--fd-height");
 @source inline("--fd-top");
 @source inline("--padding-right");
+@source inline("--popup-height");
+@source inline("--popup-width");
+@source inline("--positioner-height");
 @source inline("--shiki-dark-bg");
 @source inline("--shiki-light-bg");
 @source inline("--spacing");
@@ -96,7 +100,10 @@
 @source inline("at");
 @source inline("attribute");
 @source inline("await");
+@source inline("b1");
+@source inline("b2");
 @source inline("backdrop-blur-lg");
+@source inline("backdrop-blur-md");
 @source inline("backdrop-blur-xs");
 @source inline("background");
 @source inline("background-position");
@@ -110,6 +117,8 @@
 @source inline("based");
 @source inline("be");
 @source inline("before");
+@source inline("before:absolute");
+@source inline("before:content-['']");
 @source inline("behaviour");
 @source inline("being");
 @source inline("bg-(--callout-color)/50");
@@ -123,10 +132,12 @@
 @source inline("bg-fd-overlay");
 @source inline("bg-fd-popover");
 @source inline("bg-fd-popover/60");
+@source inline("bg-fd-popover/80");
 @source inline("bg-fd-primary");
 @source inline("bg-fd-primary/10");
 @source inline("bg-fd-secondary");
 @source inline("bg-fd-secondary/50");
+@source inline("bg-linear-to-t");
 @source inline("bg-transparent");
 @source inline("bind");
 @source inline("black");
@@ -147,6 +158,7 @@
 @source inline("bottom-1.5");
 @source inline("bound");
 @source inline("boundary");
+@source inline("box-border");
 @source inline("breaking");
 @source inline("button");
 @source inline("buttonVariants");
@@ -173,6 +185,7 @@
 @source inline("client-side");
 @source inline("clientHeight");
 @source inline("clientWidth");
+@source inline("clipPath");
 @source inline("clone");
 @source inline("close");
 @source inline("closeOnRedirect");
@@ -183,6 +196,7 @@
 @source inline("collapsed");
 @source inline("collapsible");
 @source inline("collection");
+@source inline("collisionPadding");
 @source inline("color");
 @source inline("colors");
 @source inline("column");
@@ -213,6 +227,7 @@
 @source inline("custom");
 @source inline("customise");
 @source inline("cva");
+@source inline("d");
 @source inline("dangerouslySetInnerHTML");
 @source inline("dark");
 @source inline("dark:bg-(--shiki-dark-bg)");
@@ -221,9 +236,26 @@
 @source inline("data-[active]:border-fd-primary");
 @source inline("data-[active]:text-fd-primary");
 @source inline("data-[closed]:animate-fd-popover-out");
+@source inline("data-[ending-style]:easing-[ease]");
 @source inline("data-[ending-style]:h-0");
 @source inline("data-[inactive]:hidden");
 @source inline("data-[open]:animate-fd-popover-in");
+@source inline("data-[side=bottom]:before:h-2.5");
+@source inline("data-[side=bottom]:before:left-0");
+@source inline("data-[side=bottom]:before:right-0");
+@source inline("data-[side=bottom]:before:top-[-10px]");
+@source inline("data-[side=left]:before:bottom-0");
+@source inline("data-[side=left]:before:right-[-10px]");
+@source inline("data-[side=left]:before:top-0");
+@source inline("data-[side=left]:before:w-2.5");
+@source inline("data-[side=right]:before:bottom-0");
+@source inline("data-[side=right]:before:left-[-10px]");
+@source inline("data-[side=right]:before:top-0");
+@source inline("data-[side=right]:before:w-2.5");
+@source inline("data-[side=top]:before:bottom-[-10px]");
+@source inline("data-[side=top]:before:h-2.5");
+@source inline("data-[side=top]:before:left-0");
+@source inline("data-[side=top]:before:right-0");
 @source inline("data-[starting-style]:h-0");
 @source inline("data-[state=open]:bg-fd-accent");
 @source inline("data-[state=open]:text-fd-accent-foreground");
@@ -238,9 +270,13 @@
 @source inline("data-empty");
 @source inline("data-ending-style:data-[activation-direction=left]:translate-x-1/2");
 @source inline("data-ending-style:data-[activation-direction=right]:-translate-x-1/2");
+@source inline("data-ending-style:duration-150");
+@source inline("data-ending-style:h-0");
 @source inline("data-ending-style:opacity-0");
+@source inline("data-ending-style:scale-90");
 @source inline("data-hidden");
 @source inline("data-icon");
+@source inline("data-instant:transition-none");
 @source inline("data-line-numbers");
 @source inline("data-line-numbers-start");
 @source inline("data-open:animate-fd-dialog-in");
@@ -251,7 +287,9 @@
 @source inline("data-search-full");
 @source inline("data-starting-style:data-[activation-direction=left]:-translate-x-1/2");
 @source inline("data-starting-style:data-[activation-direction=right]:translate-x-1/2");
+@source inline("data-starting-style:h-0");
 @source inline("data-starting-style:opacity-0");
+@source inline("data-starting-style:scale-90");
 @source inline("data-state");
 @source inline("data-theme-toggle");
 @source inline("date");
@@ -276,6 +314,7 @@
 @source inline("defineI18nUI");
 @source inline("defined");
 @source inline("delay");
+@source inline("delay-25");
 @source inline("dependencies");
 @source inline("depends");
 @source inline("deprecated");
@@ -306,7 +345,6 @@
 @source inline("duration-200");
 @source inline("duration-400");
 @source inline("ease-(--easing)");
-@source inline("ease-linear");
 @source inline("ease-out");
 @source inline("editOnGithub");
 @source inline("element");
@@ -317,6 +355,7 @@
 @source inline("en");
 @source inline("enableSystem");
 @source inline("enabled");
+@source inline("end");
 @source inline("end-2");
 @source inline("endpoint");
 @source inline("environment");
@@ -370,7 +409,6 @@
 @source inline("footerCache");
 @source inline("for");
 @source inline("forks");
-@source inline("forwardRef");
 @source inline("found");
 @source inline("fragment");
 @source inline("framework");
@@ -421,6 +459,8 @@
 @source inline("h-(--collapsible-panel-height)");
 @source inline("h-(--fd-animated-height)");
 @source inline("h-(--fd-height)");
+@source inline("h-(--popup-height)");
+@source inline("h-(--positioner-height)");
 @source inline("h-1.5");
 @source inline("h-9.5");
 @source inline("h-full");
@@ -453,6 +493,7 @@
 @source inline("hover:bg-fd-accent");
 @source inline("hover:bg-fd-accent/80");
 @source inline("hover:bg-fd-primary/80");
+@source inline("hover:delay-0");
 @source inline("hover:text-fd-accent-foreground");
 @source inline("hovered");
 @source inline("hovering");
@@ -466,6 +507,7 @@
 @source inline("iconClass");
 @source inline("id");
 @source inline("idea");
+@source inline("ids");
 @source inline("idx");
 @source inline("if");
 @source inline("if-needed");
@@ -482,6 +524,7 @@
 @source inline("inputType");
 @source inline("insert");
 @source inline("inset-0");
+@source inline("inset-s-0");
 @source inline("inset-x-2");
 @source inline("inset-y-0");
 @source inline("insetInlineStart");
@@ -524,6 +567,7 @@
 @source inline("lazy");
 @source inline("leading-none");
 @source inline("leaving");
+@source inline("left");
 @source inline("left-1/2");
 @source inline("length");
 @source inline("let");
@@ -556,6 +600,7 @@
 @source inline("mark");
 @source inline("markdownUrl");
 @source inline("marked");
+@source inline("mask-[linear-gradient(to_bottom,transparent,white_12px,white_calc(100%-12px),transparent)]");
 @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");
@@ -569,6 +614,7 @@
 @source inline("max-md:border");
 @source inline("max-md:p-1.5");
 @source inline("max-md:rounded-md");
+@source inline("max-w-(--available-width)");
 @source inline("max-w-[1400px]");
 @source inline("max-w-[98vw]");
 @source inline("max-w-full");
@@ -716,6 +762,7 @@
 @source inline("p-2");
 @source inline("p-3");
 @source inline("p-4");
+@source inline("pOffset");
 @source inline("padding");
 @source inline("paddingInlineStart");
 @source inline("page");
@@ -831,6 +878,7 @@
 @source inline("results");
 @source inline("return");
 @source inline("revalidate");
+@source inline("right");
 @source inline("right-2");
 @source inline("role");
 @source inline("root");
@@ -838,7 +886,7 @@
 @source inline("round");
 @source inline("rounded-2xl");
 @source inline("rounded-[inherit]");
-@source inline("rounded-e-sm");
+@source inline("rounded-e-full");
 @source inline("rounded-full");
 @source inline("rounded-lg");
 @source inline("rounded-md");
@@ -847,7 +895,6 @@
 @source inline("router");
 @source inline("row");
 @source inline("rtl");
-@source inline("rtl:-scale-x-100");
 @source inline("rtl:rotate-180");
 @source inline("rtl:rotate-90");
 @source inline("s");
@@ -909,6 +956,7 @@
 @source inline("simple");
 @source inline("since");
 @source inline("size");
+@source inline("size-1");
 @source inline("size-3");
 @source inline("size-3.5");
 @source inline("size-4");
@@ -927,7 +975,6 @@
 @source inline("specific");
 @source inline("src");
 @source inline("stars");
-@source inline("start-0");
 @source inline("start-3");
 @source inline("start-6");
 @source inline("state");
@@ -937,7 +984,7 @@
 @source inline("string");
 @source inline("stroke");
 @source inline("stroke-fd-foreground/10");
-@source inline("stroke-width");
+@source inline("stroke-fd-primary");
 @source inline("strokeLinecap");
 @source inline("strokeLinejoin");
 @source inline("strokeWidth");
@@ -950,9 +997,11 @@
 @source inline("supposed");
 @source inline("sure");
 @source inline("svg");
+@source inline("svgRef");
 @source inline("switch");
 @source inline("system");
 @source inline("t");
+@source inline("t2");
 @source inline("tab");
 @source inline("tabIndex");
 @source inline("table");
@@ -1016,13 +1065,18 @@
 @source inline("top-4");
 @source inline("touch");
 @source inline("transform");
+@source inline("transition-[clip-path]");
+@source inline("transition-[height,opacity]");
 @source inline("transition-[height]");
 @source inline("transition-[opacity,transform,translate]");
+@source inline("transition-[opacity,transform,width,height,scale,translate]");
 @source inline("transition-[top,height]");
 @source inline("transition-all");
 @source inline("transition-colors");
 @source inline("transition-opacity");
 @source inline("transition-transform");
+@source inline("translate");
+@source inline("translate-y-1/2");
 @source inline("translations");
 @source inline("transparent");
 @source inline("tree");
@@ -1088,6 +1142,7 @@
 @source inline("variants");
 @source inline("vertical");
 @source inline("via");
+@source inline("via-fd-primary");
 @source inline("viewBox");
 @source inline("viewRef");
 @source inline("viewport");
@@ -1096,6 +1151,7 @@
 @source inline("void");
 @source inline("w");
 @source inline("w-(--anchor-width)");
+@source inline("w-(--popup-width)");
 @source inline("w-0");
 @source inline("w-0.5");
 @source inline("w-1.5");
@@ -1124,11 +1180,8 @@
 @source inline("wrapElement");
 @source inline("wrapInSuspense");
 @source inline("wrapped");
-@source inline("x1");
-@source inline("x2");
 @source inline("xmlns");
-@source inline("y1");
-@source inline("y2");
+@source inline("y");
 @source inline("you");
 @source inline("your");
 @source inline("z-2");

package/dist/components/sidebar/base.js

@@ -140,8 +140,7 @@ function SidebarViewport({ className, ...props }) {
 		className: (s) => cn("min-h-0 flex-1", typeof className === "function" ? className(s) : className),
 		...props,
 		children: /* @__PURE__ */ jsx(ScrollViewport, {
-			className: "p-4 overscroll-contain",
-			style: { maskImage: "linear-gradient(to bottom, transparent, white 12px, white calc(100% - 12px), transparent)" },
+			className: "p-4 overscroll-contain mask-[linear-gradient(to_bottom,transparent,white_12px,white_calc(100%-12px),transparent)]",
 			children: props.children
 		})
 	});

package/dist/components/tabs.d.ts

@@ -1,8 +1,7 @@
-import { Tabs as Tabs$1, TabsContent as TabsContent$1 } from "./ui/tabs.js";
+import { Tabs as Tabs$1, TabsContent as TabsContent$1, TabsList as TabsList$1, TabsTrigger as TabsTrigger$1 } from "./ui/tabs.js";
 import * as React$1 from "react";
 import { ComponentProps, ReactNode } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import * as _base_ui_react0 from "@base-ui/react";
 
 //#region src/components/tabs.d.ts
 interface TabsProps extends Omit<ComponentProps<typeof Tabs$1>, 'value' | 'onValueChange'> {
@@ -21,8 +20,14 @@ interface TabsProps extends Omit<ComponentProps<typeof Tabs$1>, 'value' | 'onVal
    */
   label?: ReactNode;
 }
-declare const TabsList: React$1.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.TabsListProps, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
-declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.TabsTabProps, "ref"> & React$1.RefAttributes<HTMLElement>, "ref"> & React$1.RefAttributes<HTMLElement>>;
+declare function TabsList({
+  className,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof TabsList$1>): react_jsx_runtime0.JSX.Element;
+declare function TabsTrigger({
+  className,
+  ...props
+}: React$1.ComponentPropsWithRef<typeof TabsTrigger$1>): react_jsx_runtime0.JSX.Element;
 declare function Tabs({
   ref,
   className,

package/dist/components/tabs.js

@@ -1,7 +1,6 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { Tabs as Tabs$1, TabsContent as TabsContent$1, TabsList as TabsList$1, TabsTrigger as TabsTrigger$1 } from "./ui/tabs.js";
-import * as React$1 from "react";
 import { createContext, useContext, useEffect, useId, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/tabs.tsx
@@ -11,18 +10,18 @@ function useTabContext() {
 	if (!ctx) throw new Error("You must wrap your component in <Tabs>");
 	return ctx;
 }
-const TabsList = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsList$1, {
-	ref,
-	...props,
-	className: (s) => cn("flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4 not-prose", typeof className === "function" ? className(s) : className)
-}));
-TabsList.displayName = "TabsList";
-const TabsTrigger = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(TabsTrigger$1, {
-	ref,
-	...props,
-	className: (s) => cn("inline-flex items-center gap-2 whitespace-nowrap text-fd-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors [&_svg]:size-4 hover:text-fd-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[active]:border-fd-primary data-[active]:text-fd-primary", typeof className === "function" ? className(s) : className)
-}));
-TabsTrigger.displayName = "TabsTrigger";
+function TabsList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(TabsList$1, {
+		...props,
+		className: (s) => cn("flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4 not-prose", typeof className === "function" ? className(s) : className)
+	});
+}
+function TabsTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(TabsTrigger$1, {
+		...props,
+		className: (s) => cn("inline-flex items-center gap-2 whitespace-nowrap text-fd-muted-foreground border-b border-transparent py-2 text-sm font-medium transition-colors [&_svg]:size-4 hover:text-fd-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[active]:border-fd-primary data-[active]:text-fd-primary", typeof className === "function" ? className(s) : className)
+	});
+}
 function Tabs({ ref, className, items, label, defaultIndex = 0, defaultValue = items ? escapeValue(items[defaultIndex]) : void 0, ...props }) {
 	const [value, setValue] = useState(defaultValue);
 	const collection = useMemo(() => [], []);

package/dist/components/toc/clerk.js

@@ -11,29 +11,37 @@ function TOCItems({ ref, className, ...props }) {
 	const containerRef = useRef(null);
 	const items = useTOCItems();
 	const { text } = useI18n();
+	const svgRef = useRef(null);
 	const [svg, setSvg] = useState();
 	useEffect(() => {
 		if (!containerRef.current) return;
 		const container = containerRef.current;
 		function onResize() {
 			if (container.clientHeight === 0) return;
-			let w = 0, h = 0;
-			const d = [];
+			let w = 0, h = 0, b1 = 0, d = "";
 			for (let i = 0; i < items.length; i++) {
 				const element = container.querySelector(`a[href="#${items[i].url.slice(1)}"]`);
 				if (!element) continue;
 				const styles = getComputedStyle(element);
-				const offset = getLineOffset(items[i].depth) + 1, top = element.offsetTop + parseFloat(styles.paddingTop), bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
+				const offset = getLineOffset(items[i].depth) + 1, t2 = element.offsetTop + parseFloat(styles.paddingTop), b2 = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
 				w = Math.max(offset, w);
-				h = Math.max(h, bottom);
-				d.push(`${i === 0 ? "M" : "L"}${offset} ${top}`);
-				d.push(`L${offset} ${bottom}`);
+				h = Math.max(h, b2);
+				if (i === 0) d += ` M${offset} ${t2} L${offset} ${b2}`;
+				else {
+					const pOffset = getLineOffset(items[i - 1].depth) + 1;
+					d += ` C ${pOffset} ${t2 - 4} ${offset} ${b1 + 4} ${offset} ${t2} L${offset} ${b2}`;
+				}
+				b1 = b2;
+			}
+			w += 1;
+			if (!svgRef.current || svgRef.current.d !== d) {
+				svgRef.current = {
+					d,
+					width: w,
+					height: h
+				};
+				setSvg(svgRef.current);
 			}
-			setSvg({
-				path: d.join(" "),
-				width: w + 1,
-				height: h
-			});
 		}
 		const observer = new ResizeObserver(onResize);
 		onResize();
@@ -46,17 +54,29 @@ function TOCItems({ ref, className, ...props }) {
 		className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
 		children: text.tocNoHeadings
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsx("div", {
-		className: "absolute start-0 top-0 rtl:-scale-x-100",
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [svg && /* @__PURE__ */ jsxs(TocThumb, {
+		containerRef,
+		className: "absolute top-0 inset-s-0",
 		style: {
 			width: svg.width,
-			height: svg.height,
-			maskImage: `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${svg.width} ${svg.height}"><path d="${svg.path}" stroke="black" stroke-width="1" fill="none" /></svg>`)}")`
+			height: svg.height
 		},
-		children: /* @__PURE__ */ jsx(TocThumb, {
-			containerRef,
-			className: "absolute w-full top-(--fd-top) h-(--fd-height) bg-fd-primary transition-[top,height]"
-		})
+		children: [/* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: `0 0 ${svg.width} ${svg.height}`,
+			className: "absolute inset-0 transition-[clip-path] delay-25",
+			style: {
+				width: svg.width,
+				height: svg.height,
+				clipPath: `polygon(0 var(--fd-top), 100% var(--fd-top), 100% calc(var(--fd-top) + var(--fd-height)), 0 calc(var(--fd-top) + var(--fd-height)))`
+			},
+			children: /* @__PURE__ */ jsx("path", {
+				d: svg.d,
+				className: "stroke-fd-primary",
+				strokeWidth: "1",
+				fill: "none"
+			})
+		}), /* @__PURE__ */ jsx(ThumbBox, {})]
 	}), /* @__PURE__ */ jsx("div", {
 		ref: mergeRefs(containerRef, ref),
 		className: cn("flex flex-col", className),
@@ -68,13 +88,25 @@ function TOCItems({ ref, className, ...props }) {
 		}, item.url))
 	})] });
 }
+function ThumbBox() {
+	const items = useTOCItems();
+	const ids = Primitive.useActiveAnchors();
+	const item = items.findLast((item) => ids.includes(item.url.slice(1)));
+	if (!item) return;
+	return /* @__PURE__ */ jsx("div", {
+		className: "absolute size-1 bg-fd-primary rounded-full delay-25 transition-transform",
+		style: { translate: `calc(${getLineOffset(item.depth)}px - 1.25px) calc(var(--fd-top) + var(--fd-height))` }
+	});
+}
 function getItemOffset(depth) {
 	if (depth <= 2) return 14;
 	if (depth === 3) return 26;
 	return 36;
 }
 function getLineOffset(depth) {
-	return depth >= 3 ? 10 : 0;
+	if (depth <= 2) return 2;
+	if (depth === 3) return 10;
+	return 20;
 }
 function TOCItem({ item, upper = item.depth, lower = item.depth }) {
 	const offset = getLineOffset(item.depth), upperOffset = getLineOffset(upper), lowerOffset = getLineOffset(lower);
@@ -85,15 +117,19 @@ function TOCItem({ item, upper = item.depth, lower = item.depth }) {
 		children: [
 			offset !== upperOffset && /* @__PURE__ */ jsx("svg", {
 				xmlns: "http://www.w3.org/2000/svg",
-				viewBox: "0 0 16 16",
-				className: "absolute -top-1.5 start-0 size-4 rtl:-scale-x-100",
-				children: /* @__PURE__ */ jsx("line", {
-					x1: upperOffset,
-					y1: "0",
-					x2: offset,
-					y2: "12",
-					className: "stroke-fd-foreground/10",
-					strokeWidth: "1"
+				viewBox: `${Math.min(offset, upperOffset)} 0 ${Math.abs(upperOffset - offset)} 12`,
+				className: "absolute -top-1.5",
+				style: {
+					width: Math.abs(upperOffset - offset) + 1,
+					height: 12,
+					insetInlineStart: Math.min(offset, upperOffset)
+				},
+				children: /* @__PURE__ */ jsx("path", {
+					d: `M ${upperOffset} 0 C ${upperOffset} 8 ${offset} 4 ${offset} 12`,
+					stroke: "black",
+					strokeWidth: "1",
+					fill: "none",
+					className: "stroke-fd-foreground/10"
 				})
 			}),
 			/* @__PURE__ */ jsx("div", {

package/dist/components/toc/default.js

@@ -15,9 +15,11 @@ function TOCItems({ ref, className, ...props }) {
 		className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
 		children: text.tocNoHeadings
 	});
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TocThumb, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs(TocThumb, {
 		containerRef,
-		className: "absolute top-(--fd-top) h-(--fd-height) w-0.5 rounded-e-sm bg-fd-primary transition-[top,height] ease-linear"
+		align: "center",
+		className: "absolute top-(--fd-top) h-(--fd-height) w-px bg-linear-to-t via-fd-primary transition-[top,height] delay-25",
+		children: [/* @__PURE__ */ jsx("div", { className: "absolute top-0 -translate-y-1/2 size-1 rounded-e-full bg-fd-primary" }), /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 translate-y-1/2 size-1 rounded-e-full bg-fd-primary" })]
 	}), /* @__PURE__ */ jsx("div", {
 		ref: mergeRefs(ref, containerRef),
 		className: cn("flex flex-col border-s border-fd-foreground/10", className),
@@ -28,7 +30,7 @@ function TOCItems({ ref, className, ...props }) {
 function TOCItem({ item }) {
 	return /* @__PURE__ */ jsx(Primitive.TOCItem, {
 		href: item.url,
-		className: cn("prose py-1.5 text-sm text-fd-muted-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary", item.depth <= 2 && "ps-3", item.depth === 3 && "ps-6", item.depth >= 4 && "ps-8"),
+		className: cn("prose py-1.5 text-sm text-fd-muted-foreground transition-colors delay-25 wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary hover:text-fd-accent-foreground hover:delay-0", item.depth <= 2 && "ps-3", item.depth === 3 && "ps-6", item.depth >= 4 && "ps-8"),
 		children: item.title
 	});
 }

package/dist/components/toc/index.d.ts

@@ -16,12 +16,14 @@ declare function TOCScrollArea({
   className,
   ...props
 }: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
-interface RefProps {
+interface TocThumbProps extends ComponentProps<'div'> {
   containerRef: RefObject<HTMLElement | null>;
+  align?: 'center' | 'end';
 }
 declare function TocThumb({
   containerRef,
+  align,
   ...props
-}: ComponentProps<'div'> & RefProps): react_jsx_runtime0.JSX.Element;
+}: TocThumbProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { TOCProvider, TOCProviderProps, TOCScrollArea, TocThumb, useActiveAnchor, useActiveAnchors, useTOCItems };