opin-ui 0.0.1

package/dist/components/sidebar/page-tree.d.ts

@@ -0,0 +1,28 @@
+import { base_d_exports } from "./base.js";
+import { FC, ReactNode } from "react";
+import * as PageTree from "fumadocs-core/page-tree";
+
+//#region src/components/sidebar/page-tree.d.ts
+interface SidebarPageTreeComponents {
+  Item: FC<{
+    item: PageTree.Item;
+  }>;
+  Folder: FC<{
+    item: PageTree.Folder;
+    children: ReactNode;
+  }>;
+  Separator: FC<{
+    item: PageTree.Separator;
+  }>;
+}
+type InternalComponents = Pick<typeof base_d_exports, 'SidebarSeparator' | 'SidebarFolder' | 'SidebarFolderLink' | 'SidebarFolderContent' | 'SidebarFolderTrigger' | 'SidebarItem'>;
+declare function createPageTreeRenderer({
+  SidebarFolder,
+  SidebarFolderContent,
+  SidebarFolderLink,
+  SidebarFolderTrigger,
+  SidebarSeparator,
+  SidebarItem
+}: InternalComponents): (components: Partial<SidebarPageTreeComponents>) => import("react").JSX.Element;
+//#endregion
+export { SidebarPageTreeComponents, createPageTreeRenderer };

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

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

package/dist/components/sidebar/tabs/dropdown.d.ts

@@ -0,0 +1,16 @@
+import { LayoutTab, isLayoutTabActive } from "../../../layouts/shared/index.js";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/components/sidebar/tabs/dropdown.d.ts
+type SidebarTabWithProps = LayoutTab;
+declare function SidebarTabsDropdown({
+  options,
+  placeholder,
+  ...props
+}: {
+  placeholder?: ReactNode;
+  options: LayoutTab[];
+} & ComponentProps<'button'>): import("react").JSX.Element;
+declare const isTabActive: typeof isLayoutTabActive;
+//#endregion
+export { SidebarTabWithProps, SidebarTabsDropdown, isTabActive };

package/dist/components/sidebar/tabs/dropdown.js

@@ -0,0 +1,71 @@
+"use client";
+import { cn } from "../../../utils/cn.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../../ui/popover.js";
+import { isLayoutTabActive } from "../../../layouts/shared/index.js";
+import { useSidebar } from "../base.js";
+import Link from "fumadocs-core/link";
+import { usePathname } from "fumadocs-core/framework";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Check, ChevronsUpDown } from "lucide-react";
+import { useMemo, useState } from "react";
+//#region src/components/sidebar/tabs/dropdown.tsx
+function SidebarTabsDropdown({ options, placeholder, ...props }) {
+	const [open, setOpen] = useState(false);
+	const { closeOnRedirect } = useSidebar();
+	const pathname = usePathname();
+	const selected = useMemo(() => {
+		return options.findLast((item) => isLayoutTabActive(item, pathname));
+	}, [options, pathname]);
+	const onClick = () => {
+		closeOnRedirect.current = false;
+		setOpen(false);
+	};
+	const item = selected ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+		className: "size-9 shrink-0 empty:hidden md:size-5",
+		children: selected.icon
+	}), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+		className: "text-sm font-medium",
+		children: selected.title
+	}), /* @__PURE__ */ jsx("p", {
+		className: "text-sm text-fd-muted-foreground empty:hidden md:hidden",
+		children: selected.description
+	})] })] }) : placeholder;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [item && /* @__PURE__ */ jsxs(PopoverTrigger, {
+			...props,
+			className: cn("flex items-center gap-2 rounded-lg p-2 bg-fd-secondary/50 text-start text-fd-secondary-foreground transition-colors hover:bg-fd-accent data-[state=open]:bg-fd-accent data-[state=open]:text-fd-accent-foreground", props.className),
+			children: [item, /* @__PURE__ */ jsx(ChevronsUpDown, { className: "shrink-0 ms-auto size-4 text-fd-muted-foreground" })]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "flex flex-col gap-1 w-(--radix-popover-trigger-width) p-1 fd-scroll-container",
+			children: options.map((item) => {
+				const isActive = selected && item.url === selected.url;
+				if (!isActive && item.unlisted) return;
+				return /* @__PURE__ */ jsxs(Link, {
+					href: item.url,
+					onClick,
+					...item.props,
+					className: cn("flex items-center gap-2 rounded-2xl p-1.5 hover:bg-fd-accent hover:text-fd-accent-foreground", item.props?.className),
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: "shrink-0 size-9 md:mb-auto md:size-5 empty:hidden",
+							children: item.icon
+						}),
+						/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("p", {
+							className: "text-sm font-medium leading-none",
+							children: item.title
+						}), /* @__PURE__ */ jsx("p", {
+							className: "text-[0.8125rem] text-fd-muted-foreground mt-1 empty:hidden",
+							children: item.description
+						})] }),
+						/* @__PURE__ */ jsx(Check, { className: cn("shrink-0 ms-auto size-3.5 text-fd-primary", !isActive && "invisible") })
+					]
+				}, item.url);
+			})
+		})]
+	});
+}
+const isTabActive = isLayoutTabActive;
+//#endregion
+export { SidebarTabsDropdown, isTabActive };

package/dist/components/sidebar/tabs/index.d.ts

@@ -0,0 +1,11 @@
+import { GetLayoutTabsOptions, LayoutTab } from "../../../layouts/shared/index.js";
+import * as PageTree from "fumadocs-core/page-tree";
+
+//#region src/components/sidebar/tabs/index.d.ts
+type SidebarTab = LayoutTab;
+type GetSidebarTabsOptions = GetLayoutTabsOptions;
+declare function getSidebarTabs(tree: PageTree.Root, {
+  transform
+}?: GetSidebarTabsOptions): SidebarTab[];
+//#endregion
+export { GetSidebarTabsOptions, SidebarTab, getSidebarTabs };

package/dist/components/sidebar/tabs/index.js

@@ -0,0 +1,46 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/sidebar/tabs/index.tsx
+const defaultTransform = (option, node) => {
+	if (!node.icon) return option;
+	return {
+		...option,
+		icon: /* @__PURE__ */ jsx("div", {
+			className: "size-full [&_svg]:size-full max-md:p-1.5 max-md:rounded-md max-md:bg-fd-secondary",
+			children: node.icon
+		})
+	};
+};
+function getSidebarTabs(tree, { transform = defaultTransform } = {}) {
+	const results = [];
+	function scanOptions(node, unlisted) {
+		if ("root" in node && node.root) {
+			const urls = getFolderUrls(node);
+			if (urls.size > 0) {
+				const option = {
+					url: urls.values().next().value ?? "",
+					title: node.name,
+					icon: node.icon,
+					unlisted,
+					description: node.description,
+					urls
+				};
+				const mapped = transform ? transform(option, node) : option;
+				if (mapped) results.push(mapped);
+			}
+		}
+		for (const child of node.children) if (child.type === "folder") scanOptions(child, unlisted);
+	}
+	scanOptions(tree);
+	if (tree.fallback) scanOptions(tree.fallback, true);
+	return results;
+}
+function getFolderUrls(folder, output = /* @__PURE__ */ new Set()) {
+	if (folder.index) output.add(folder.index.url);
+	for (const child of folder.children) {
+		if (child.type === "page" && !child.external) output.add(child.url);
+		if (child.type === "folder") getFolderUrls(child, output);
+	}
+	return output;
+}
+//#endregion
+export { getSidebarTabs };

package/dist/components/steps.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+//#region src/components/steps.d.ts
+declare function Steps({
+  children
+}: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+declare function Step({
+  children
+}: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+//#endregion
+export { Step, Steps };

package/dist/components/steps.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/steps.tsx
+function Steps({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "fd-steps",
+		children
+	});
+}
+function Step({ children }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "fd-step",
+		children
+	});
+}
+//#endregion
+export { Step, Steps };

package/dist/components/tabs.d.ts

@@ -0,0 +1,49 @@
+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";
+
+//#region src/components/tabs.d.ts
+interface TabsProps extends Omit<ComponentProps<typeof Tabs$1>, 'value' | 'onValueChange'> {
+  /**
+   * Use simple mode instead of advanced usage as documented in https://radix-ui.com/primitives/docs/components/tabs.
+   */
+  items?: string[];
+  /**
+   * Shortcut for `defaultValue` when `items` is provided.
+   *
+   * @defaultValue 0
+   */
+  defaultIndex?: number;
+  /**
+   * Additional label in tabs list when `items` is provided.
+   */
+  label?: ReactNode;
+}
+declare function TabsList(props: React$1.ComponentPropsWithRef<typeof TabsList$1>): React$1.JSX.Element;
+declare function TabsTrigger(props: React$1.ComponentPropsWithRef<typeof TabsTrigger$1>): React$1.JSX.Element;
+declare function Tabs({
+  ref,
+  className,
+  items,
+  label,
+  defaultIndex,
+  defaultValue,
+  ...props
+}: TabsProps): React$1.JSX.Element;
+interface TabProps extends Omit<ComponentProps<typeof TabsContent$1>, 'value'> {
+  /**
+   * Value of tab, detect from index if unspecified.
+   */
+  value?: string;
+}
+declare function Tab({
+  value,
+  ...props
+}: TabProps): React$1.JSX.Element;
+declare function TabsContent({
+  value,
+  className,
+  ...props
+}: ComponentProps<typeof TabsContent$1>): React$1.JSX.Element;
+//#endregion
+export { Tab, TabProps, Tabs, TabsContent, TabsList, TabsProps, TabsTrigger };

package/dist/components/tabs.js

@@ -0,0 +1,88 @@
+"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__ */ jsxs(TabsTrigger$1, {
+		...props,
+		className: cn("inline-flex items-center gap-2 whitespace-nowrap text-fd-muted-foreground relative 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]:text-fd-primary focus-visible:outline-none focus-visible:bg-fd-accent/30 rounded-sm", props.className),
+		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 bottom-0 h-px bg-transparent data-[state=active]:bg-fd-primary" }), props.children]
+	});
+}
+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-3xl 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,
+		forceMount: true,
+		className: cn("p-4 text-[0.9375rem] bg-fd-background outline-none prose-no-margin data-[state=inactive]:hidden [&>figure:only-child]:-m-4", className),
+		...props,
+		children: props.children
+	});
+}
+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);
+}
+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,20 @@
+import { ComponentProps } from "react";
+import * as Primitive from "fumadocs-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,226 @@
+"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 "fumadocs-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() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-3xl bg-fd-card p-3 text-xs text-fd-muted-foreground",
+		children: useTranslations({ note: "table of contents" })("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 };