@vx-oss/docs-react 1.0.3

package/dist/components/tabs.js

@@ -0,0 +1,95 @@
+"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 { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useMemo, useState } from "react";
+//#region src/components/tabs.tsx
+const TabsContext = createContext(null);
+function useTabContext() {
+	const ctx = useContext(TabsContext);
+	if (!ctx) throw new Error("You must wrap your component in <Tabs>");
+	return ctx;
+}
+function TabsList(props) {
+	return /* @__PURE__ */ jsx(TabsList$1, {
+		...props,
+		className: cn("flex gap-3.5 text-fd-secondary-foreground overflow-x-auto px-4 not-prose", props.className)
+	});
+}
+function TabsTrigger(props) {
+	return /* @__PURE__ */ jsx(TabsTrigger$1, {
+		...props,
+		className: 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-[state=active]:border-fd-primary data-[state=active]:text-fd-primary", props.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(() => [], []);
+	return /* @__PURE__ */ jsxs(Tabs$1, {
+		ref,
+		className: cn("flex flex-col overflow-hidden rounded-xl border bg-fd-secondary my-4", className),
+		value,
+		onValueChange: (v) => {
+			if (items && !items.some((item) => escapeValue(item) === v)) return;
+			setValue(v);
+		},
+		...props,
+		children: [items && /* @__PURE__ */ jsxs(TabsList, { children: [label && /* @__PURE__ */ jsx("span", {
+			className: "text-sm font-medium my-auto me-auto",
+			children: label
+		}), items.map((item) => /* @__PURE__ */ jsx(TabsTrigger, {
+			value: escapeValue(item),
+			children: item
+		}, item))] }), /* @__PURE__ */ jsx(TabsContext.Provider, {
+			value: useMemo(() => ({
+				items,
+				collection
+			}), [collection, items]),
+			children: props.children
+		})]
+	});
+}
+function Tab({ value, ...props }) {
+	const { items } = useTabContext();
+	const resolved = value ?? items?.at(useCollectionIndex());
+	if (!resolved) throw new Error("Failed to resolve tab `value`, please pass a `value` prop to the Tab component.");
+	return /* @__PURE__ */ jsx(TabsContent, {
+		value: escapeValue(resolved),
+		...props,
+		children: props.children
+	});
+}
+function TabsContent({ value, className, ...props }) {
+	return /* @__PURE__ */ jsx(TabsContent$1, {
+		value,
+		className: cn("p-4 text-[0.9375rem] bg-fd-background rounded-xl outline-none prose-no-margin data-[state=inactive]:hidden [&>figure:only-child]:-m-4 [&>figure:only-child]:border-none", className),
+		...props,
+		children: props.children
+	});
+}
+/**
+* Inspired by Headless UI.
+*
+* Return the index of children, this is made possible by registering the order of render from children using React context.
+* This is supposed by work with pre-rendering & pure client-side rendering.
+*/
+function useCollectionIndex() {
+	const key = useId();
+	const { collection } = useTabContext();
+	useEffect(() => {
+		return () => {
+			const idx = collection.indexOf(key);
+			if (idx !== -1) collection.splice(idx, 1);
+		};
+	}, [key, collection]);
+	if (!collection.includes(key)) collection.push(key);
+	return collection.indexOf(key);
+}
+/**
+* only escape whitespaces in values in simple mode
+*/
+function escapeValue(v) {
+	return v.toLowerCase().replace(/\s/, "-");
+}
+//#endregion
+export { Tab, Tabs, TabsContent, TabsList, TabsTrigger };

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

@@ -0,0 +1,11 @@
+import { ComponentProps } from "react";
+import * as Primitive from "@vx-oss/docs-core/toc";
+//#region src/components/toc/clerk.d.ts
+type TOCItemsProps = ComponentProps<'div'>;
+declare function TOCItems({ ref, className, children, ...props }: TOCItemsProps): import("react").JSX.Element;
+declare function TOCEmpty(): import("react").JSX.Element;
+declare function TOCItem({ item, ...props }: Primitive.TOCItemProps & {
+  item: Primitive.TOCItemType;
+}): import("react").JSX.Element;
+//#endregion
+export { TOCEmpty, TOCItem, TOCItems, TOCItemsProps };

package/dist/components/toc/clerk.js

@@ -0,0 +1,227 @@
+"use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { useTOCItems } from "./index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+import * as Primitive from "@vx-oss/docs-core/toc";
+//#region src/components/toc/clerk.tsx
+var clerk_exports = /* @__PURE__ */ __exportAll({
+	TOCEmpty: () => TOCEmpty,
+	TOCItem: () => TOCItem,
+	TOCItems: () => TOCItems
+});
+function TOCItems({ ref, className, children, ...props }) {
+	const containerRef = useRef(null);
+	const items = useTOCItems();
+	const [svg, setSvg] = useState(null);
+	const onPrint = useCallback(() => {
+		const container = containerRef.current;
+		if (!container || container.clientHeight === 0) return;
+		if (items.length === 0) {
+			setSvg(null);
+			return;
+		}
+		let w = 0;
+		let h = 0;
+		let d = "";
+		const positions = [];
+		const output = [];
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i];
+			const element = container.querySelector(`a[href="${item.url}"]`);
+			if (!element) continue;
+			const styles = getComputedStyle(element);
+			const x = getLineOffset(item.depth) + .5;
+			const top = element.offsetTop + parseFloat(styles.paddingTop);
+			const bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
+			w = Math.max(x + 8, w);
+			h = Math.max(h, bottom);
+			if (i === 0) d += ` M${x} ${top} L${x} ${bottom}`;
+			else {
+				const [, upperBottom, upperX] = i > 0 ? positions[i - 1] : [
+					0,
+					0,
+					0
+				];
+				d += ` L ${upperX} ${upperBottom} ${x} ${top} L${x} ${bottom}`;
+			}
+			if (item._step !== void 0) output.push(/* @__PURE__ */ jsxs("g", {
+				transform: `translate(${x}, ${(top + bottom) / 2})`,
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "0",
+					cy: "0",
+					r: "8",
+					className: "fill-fd-primary"
+				}), /* @__PURE__ */ jsx("text", {
+					cx: "0",
+					cy: "0",
+					textAnchor: "middle",
+					alignmentBaseline: "central",
+					dominantBaseline: "middle",
+					className: "fill-fd-primary-foreground font-medium text-xs leading-none font-mono rtl:-scale-x-100",
+					children: item._step
+				})]
+			}, i));
+			positions.push([
+				top,
+				bottom,
+				x
+			]);
+		}
+		output.unshift(/* @__PURE__ */ jsx("path", {
+			d,
+			className: "stroke-fd-primary",
+			strokeWidth: "1",
+			fill: "none"
+		}, "path"));
+		setSvg({
+			content: output,
+			width: w,
+			height: h,
+			d,
+			itemLineLengths: [],
+			positions
+		});
+	}, [items]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver(onPrint);
+		observer.observe(container);
+		onPrint();
+		return () => {
+			observer.unobserve(container);
+		};
+	}, [onPrint]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: mergeRefs(containerRef, ref),
+		className: cn("relative flex flex-col", className),
+		...props,
+		children: [svg && /* @__PURE__ */ jsx(ThumbTrack, { computed: svg }), children]
+	});
+}
+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: t("No Headings")
+	});
+}
+function ThumbTrack({ computed }) {
+	const ref = useRef(null);
+	const tocInfo = Primitive.useTOC();
+	function calculate(items) {
+		const out = {};
+		const startIdx = items.findIndex((item) => item.active);
+		if (startIdx === -1) return out;
+		const endIdx = items.findLastIndex((item) => item.active);
+		out["--track-top"] = `${computed.positions[startIdx][0]}px`;
+		out["--track-bottom"] = `${computed.positions[endIdx][1]}px`;
+		return out;
+	}
+	Primitive.useTOCListener((items) => {
+		const element = ref.current;
+		if (!element) return;
+		for (const [k, v] of Object.entries(calculate(items))) element.style.setProperty(k, v);
+	});
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: "absolute top-0 inset-s-0 origin-center rtl:-scale-x-100",
+		style: {
+			width: computed.width,
+			height: computed.height,
+			...calculate(tocInfo.get())
+		},
+		children: /* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: `0 0 ${computed.width} ${computed.height}`,
+			className: "absolute transition-[clip-path]",
+			style: {
+				width: computed.width,
+				height: computed.height,
+				clipPath: `polygon(0 var(--track-top,0), 100% var(--track-top,0), 100% var(--track-bottom,0), 0 var(--track-bottom,0))`
+			},
+			children: computed.content
+		})
+	});
+}
+const BASE = 8;
+function getItemOffset(depth) {
+	if (depth <= 2) return 20;
+	if (depth === 3) return 32;
+	return 44;
+}
+function getLineOffset(depth) {
+	if (depth <= 2) return BASE;
+	if (depth === 3) return 20;
+	return 32;
+}
+function TOCItem({ item, ...props }) {
+	const items = useTOCItems();
+	const { isFirst, isLast, svg } = useMemo(() => {
+		const index = items.indexOf(item);
+		const isFirst = index === 0;
+		const isLast = index === items.length - 1;
+		const l1 = getLineOffset(item.depth);
+		const l0 = isFirst ? l1 : getLineOffset(items[index - 1].depth);
+		const l2 = isLast ? l1 : getLineOffset(items[index + 1].depth);
+		return {
+			isFirst,
+			isLast,
+			svg: /* @__PURE__ */ jsxs("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				className: cn("absolute -top-1.5 inset-s-0 bottom-0 h-[calc(100%+--spacing(1.5))] -z-1 rtl:-scale-x-100", l1 !== l2 && "h-full bottom-1.5"),
+				style: { width: Math.max(l0, l1) + 9 },
+				children: [
+					l0 !== l1 && /* @__PURE__ */ jsx("path", {
+						d: `M ${l0 + .5} 0 L ${l0 + .5} 0 ${l1 + .5} 12`,
+						stroke: "black",
+						strokeWidth: "1",
+						fill: "none",
+						className: "stroke-fd-foreground/10"
+					}),
+					/* @__PURE__ */ jsx("line", {
+						x1: l1 + .5,
+						y1: l0 === l1 ? "6" : "12",
+						x2: l1 + .5,
+						y2: "100%",
+						strokeWidth: "1",
+						className: "stroke-fd-foreground/10"
+					}),
+					item._step !== void 0 && /* @__PURE__ */ jsxs("g", {
+						transform: `translate(${l1 + .5}, ${l1 === l2 ? "3" : "6"})`,
+						children: [/* @__PURE__ */ jsx("circle", {
+							cx: "0",
+							cy: "50%",
+							r: "8",
+							className: "fill-fd-muted"
+						}), /* @__PURE__ */ jsx("text", {
+							x: "0",
+							y: "50%",
+							textAnchor: "middle",
+							alignmentBaseline: "central",
+							dominantBaseline: "middle",
+							className: "fill-fd-muted-foreground font-medium text-xs leading-none font-mono rtl:-scale-x-100",
+							children: item._step
+						})]
+					})
+				]
+			})
+		};
+	}, [items, item]);
+	return /* @__PURE__ */ jsxs(Primitive.TOCItem, {
+		href: item.url,
+		...props,
+		className: cn("prose relative py-1.5 text-sm scroll-m-4 text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere data-[active=true]:text-fd-primary", isFirst && "pt-0", isLast && "pb-0", props.className),
+		style: {
+			paddingInlineStart: getItemOffset(item.depth),
+			...props.style
+		},
+		children: [svg, item.title]
+	});
+}
+//#endregion
+export { TOCEmpty, TOCItem, TOCItems, clerk_exports };

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

@@ -0,0 +1,13 @@
+import { ComponentProps } from "react";
+import * as Primitive from "@vx-oss/docs-core/toc";
+//#region src/components/toc/default.d.ts
+interface TOCItemsProps extends ComponentProps<'div'> {
+  thumbBox?: boolean;
+}
+declare function TOCItems({ ref, className, thumbBox, children, ...props }: TOCItemsProps): import("react").JSX.Element;
+declare function TOCEmpty(): import("react").JSX.Element;
+declare function TOCItem({ item, ...props }: Primitive.TOCItemProps & {
+  item: Primitive.TOCItemType;
+}): import("react").JSX.Element;
+//#endregion
+export { TOCEmpty, TOCItem, TOCItems, TOCItemsProps };

package/dist/components/toc/default.js

@@ -0,0 +1,260 @@
+"use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { useTOCItems } from "./index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslations } from "@fuma-translate/react";
+import * as Primitive from "@vx-oss/docs-core/toc";
+//#region src/components/toc/default.tsx
+var default_exports = /* @__PURE__ */ __exportAll({
+	TOCEmpty: () => TOCEmpty,
+	TOCItem: () => TOCItem,
+	TOCItems: () => TOCItems
+});
+function TOCItems({ ref, className, thumbBox = true, children, ...props }) {
+	const containerRef = useRef(null);
+	const items = useTOCItems();
+	const [svg, setSvg] = useState(null);
+	const onPrint = useCallback(() => {
+		const container = containerRef.current;
+		if (!container || container.clientHeight === 0) return;
+		if (items.length === 0) {
+			setSvg(null);
+			return;
+		}
+		let w = 0;
+		let h = 0;
+		let d = "";
+		const positions = [];
+		const output = [];
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i];
+			const element = container.querySelector(`a[href="${item.url}"]`);
+			if (!element) continue;
+			const styles = getComputedStyle(element);
+			const x = getLineOffset(item.depth) + .5;
+			const top = element.offsetTop + parseFloat(styles.paddingTop);
+			const bottom = element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom);
+			w = Math.max(x + 8, w);
+			h = Math.max(h, bottom);
+			if (i === 0) d += ` M${x} ${top} L${x} ${bottom}`;
+			else {
+				const [, upperBottom, upperX] = i > 0 ? positions[i - 1] : [
+					0,
+					0,
+					0
+				];
+				d += ` C ${upperX} ${top - 4} ${x} ${upperBottom + 4} ${x} ${top} L${x} ${bottom}`;
+			}
+			if (item._step !== void 0) output.push(/* @__PURE__ */ jsxs("g", {
+				transform: `translate(${x}, ${(top + bottom) / 2})`,
+				children: [/* @__PURE__ */ jsx("circle", {
+					cx: "0",
+					cy: "0",
+					r: "8",
+					className: "fill-fd-primary"
+				}), /* @__PURE__ */ jsx("text", {
+					cx: "0",
+					cy: "0",
+					textAnchor: "middle",
+					alignmentBaseline: "central",
+					dominantBaseline: "middle",
+					className: "fill-fd-primary-foreground font-medium text-xs leading-none font-mono rtl:-scale-x-100",
+					children: item._step
+				})]
+			}, i));
+			positions.push([
+				top,
+				bottom,
+				x
+			]);
+		}
+		output.unshift(/* @__PURE__ */ jsx("path", {
+			d,
+			className: "stroke-fd-primary",
+			strokeWidth: "1",
+			fill: "none"
+		}, "path"));
+		const itemLineLengths = [];
+		if (thumbBox) {
+			const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+			path.setAttribute("d", d);
+			const n = path.getTotalLength();
+			for (let i = 0; i < positions.length; i++) {
+				const [top, bottom] = positions[i];
+				let l = i > 0 ? itemLineLengths[i - 1][1] + (top - positions[i - 1][1]) : top;
+				while (l < n && path.getPointAtLength(l).y < top) l++;
+				itemLineLengths.push([l, l + bottom - top]);
+			}
+		}
+		setSvg({
+			content: output,
+			width: w,
+			height: h,
+			d,
+			itemLineLengths,
+			positions
+		});
+	}, [items, thumbBox]);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver(onPrint);
+		observer.observe(container);
+		onPrint();
+		return () => {
+			observer.unobserve(container);
+		};
+	}, [onPrint]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: mergeRefs(containerRef, ref),
+		className: cn("relative flex flex-col", className),
+		...props,
+		children: [svg && /* @__PURE__ */ jsx(ThumbTrack, {
+			computed: svg,
+			thumbBox
+		}), children]
+	});
+}
+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: t("No Headings")
+	});
+}
+function ThumbTrack({ computed, thumbBox }) {
+	const ref = useRef(null);
+	const previousRef = useRef(null);
+	const tocInfo = Primitive.useTOC();
+	function calculate(items) {
+		const out = {};
+		const startIdx = items.findIndex((item) => item.active);
+		if (startIdx === -1) return out;
+		const endIdx = items.findLastIndex((item) => item.active);
+		out["--track-top"] = `${computed.positions[startIdx][0]}px`;
+		out["--track-bottom"] = `${computed.positions[endIdx][1]}px`;
+		if (thumbBox) {
+			let isUp = false;
+			if (previousRef.current) {
+				const prev = previousRef.current;
+				isUp = prev.startIdx > startIdx || prev.endIdx > endIdx || prev.startIdx === startIdx && prev.endIdx === endIdx && prev.isUp;
+			}
+			previousRef.current = {
+				startIdx,
+				endIdx,
+				isUp
+			};
+			out["--offset-distance"] = isUp ? `${computed.itemLineLengths[startIdx][0]}px` : `${computed.itemLineLengths[endIdx][1]}px`;
+			out["--opacity"] = items[isUp ? startIdx : endIdx].original._step !== void 0 ? "0" : "1";
+		}
+		return out;
+	}
+	Primitive.useTOCListener((items) => {
+		const element = ref.current;
+		if (!element) return;
+		for (const [k, v] of Object.entries(calculate(items))) element.style.setProperty(k, v);
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "absolute top-0 inset-s-0 origin-center rtl:-scale-x-100",
+		style: {
+			width: computed.width,
+			height: computed.height,
+			...calculate(tocInfo.get())
+		},
+		children: [/* @__PURE__ */ jsx("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: `0 0 ${computed.width} ${computed.height}`,
+			className: "absolute transition-[clip-path]",
+			style: {
+				width: computed.width,
+				height: computed.height,
+				clipPath: `polygon(0 var(--track-top,0), 100% var(--track-top,0), 100% var(--track-bottom,0), 0 var(--track-bottom,0))`
+			},
+			children: computed.content
+		}), thumbBox && /* @__PURE__ */ jsx("div", {
+			className: "absolute left-0 size-1 bg-fd-primary rounded-full [offset-distance:var(--offset-distance,0)] opacity-(--opacity,0) transition-[opacity,offset-distance]",
+			style: { offsetPath: `path("${computed.d}")` }
+		})]
+	});
+}
+const BASE = 8;
+function getItemOffset(depth) {
+	if (depth <= 2) return 20;
+	if (depth === 3) return 32;
+	return 44;
+}
+function getLineOffset(depth) {
+	if (depth <= 2) return BASE;
+	if (depth === 3) return 16;
+	return 24;
+}
+function TOCItem({ item, ...props }) {
+	const items = useTOCItems();
+	const { isFirst, isLast, svg } = useMemo(() => {
+		const index = items.indexOf(item);
+		const isFirst = index === 0;
+		const isLast = index === items.length - 1;
+		const l1 = getLineOffset(item.depth);
+		const l0 = isFirst ? l1 : getLineOffset(items[index - 1].depth);
+		const l2 = isLast ? l1 : getLineOffset(items[index + 1].depth);
+		return {
+			isFirst,
+			isLast,
+			svg: /* @__PURE__ */ jsxs("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				className: cn("absolute -top-1.5 inset-s-0 bottom-0 h-[calc(100%+--spacing(1.5))] -z-1 rtl:-scale-x-100", l1 !== l2 && "h-full bottom-1.5"),
+				style: { width: Math.max(l0, l1) + 9 },
+				children: [
+					l0 !== l1 && /* @__PURE__ */ jsx("path", {
+						d: `M ${l0 + .5} 0 C ${l0 + .5} 8 ${l1 + .5} 4 ${l1 + .5} 12`,
+						stroke: "black",
+						strokeWidth: "1",
+						fill: "none",
+						className: "stroke-fd-foreground/10"
+					}),
+					/* @__PURE__ */ jsx("line", {
+						x1: l1 + .5,
+						y1: l0 === l1 ? "6" : "12",
+						x2: l1 + .5,
+						y2: "100%",
+						strokeWidth: "1",
+						className: "stroke-fd-foreground/10"
+					}),
+					item._step !== void 0 && /* @__PURE__ */ jsxs("g", {
+						transform: `translate(${l1 + .5}, ${l1 === l2 ? "3" : "6"})`,
+						children: [/* @__PURE__ */ jsx("circle", {
+							cx: "0",
+							cy: "50%",
+							r: "8",
+							className: "fill-fd-muted"
+						}), /* @__PURE__ */ jsx("text", {
+							x: "0",
+							y: "50%",
+							textAnchor: "middle",
+							alignmentBaseline: "central",
+							dominantBaseline: "middle",
+							className: "fill-fd-muted-foreground font-medium text-xs leading-none font-mono rtl:-scale-x-100",
+							children: item._step
+						})]
+					})
+				]
+			})
+		};
+	}, [items, item]);
+	return /* @__PURE__ */ jsxs(Primitive.TOCItem, {
+		href: item.url,
+		...props,
+		className: cn("prose relative py-1.5 text-sm scroll-m-4 text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere data-[active=true]:text-fd-primary", isFirst && "pt-0", isLast && "pb-0", props.className),
+		style: {
+			paddingInlineStart: getItemOffset(item.depth),
+			...props.style
+		},
+		children: [svg, item.title]
+	});
+}
+//#endregion
+export { TOCEmpty, TOCItem, TOCItems, default_exports };

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

@@ -0,0 +1,10 @@
+import { ComponentProps } from "react";
+import * as Primitive from "@vx-oss/docs-core/toc";
+//#region src/components/toc/index.d.ts
+declare function useTOCItems(): Primitive.TOCItemType[];
+type TOCProviderProps = Primitive.AnchorProviderProps;
+declare const useActiveAnchor: typeof Primitive.useActiveAnchor, useActiveAnchors: typeof Primitive.useActiveAnchors, useItems: typeof Primitive.useItems;
+declare function TOCProvider({ toc, children, ...props }: TOCProviderProps): import("react").JSX.Element;
+declare function TOCScrollArea({ ref, className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+export { TOCProvider, TOCProviderProps, TOCScrollArea, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };

package/dist/components/toc/index.js

@@ -0,0 +1,45 @@
+"use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { cn } from "../../utils/cn.js";
+import { mergeRefs } from "../../utils/merge-refs.js";
+import { jsx } from "react/jsx-runtime";
+import { createContext, use, useRef } from "react";
+import * as Primitive from "@vx-oss/docs-core/toc";
+//#region src/components/toc/index.tsx
+var toc_exports = /* @__PURE__ */ __exportAll({
+	TOCProvider: () => TOCProvider,
+	TOCScrollArea: () => TOCScrollArea,
+	useActiveAnchor: () => useActiveAnchor,
+	useActiveAnchors: () => useActiveAnchors,
+	useItems: () => useItems,
+	useTOCItems: () => useTOCItems
+});
+const TOCContext = createContext([]);
+function useTOCItems() {
+	return use(TOCContext);
+}
+const { useActiveAnchor, useActiveAnchors, useItems } = Primitive;
+function TOCProvider({ toc, children, ...props }) {
+	return /* @__PURE__ */ jsx(TOCContext, {
+		value: toc,
+		children: /* @__PURE__ */ jsx(Primitive.AnchorProvider, {
+			toc,
+			...props,
+			children
+		})
+	});
+}
+function TOCScrollArea({ ref, className, ...props }) {
+	const viewRef = useRef(null);
+	return /* @__PURE__ */ jsx("div", {
+		ref: mergeRefs(viewRef, ref),
+		className: cn("relative min-h-0 text-sm ms-px overflow-auto overscroll-contain [scrollbar-width:none] mask-[linear-gradient(to_bottom,transparent,white_16px,white_calc(100%-16px),transparent)] py-3", className),
+		...props,
+		children: /* @__PURE__ */ jsx(Primitive.ScrollProvider, {
+			containerRef: viewRef,
+			children: props.children
+		})
+	});
+}
+//#endregion
+export { TOCProvider, TOCScrollArea, toc_exports, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };