@hanzo/docs-base-ui 16.5.3 → 16.7.5

package/dist/components/toc/clerk.js

@@ -1,101 +1,158 @@
-'use client';
-
+"use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { useI18n } from "../../contexts/i18n.js";
 import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
 import { TocThumb, useTOCItems } from "./index.js";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import * as Primitive from "@hanzo/docs-core/toc";
-
 //#region src/components/toc/clerk.tsx
+var clerk_exports = /* @__PURE__ */ __exportAll({
+	TOCEmpty: () => TOCEmpty,
+	TOCItem: () => TOCItem,
+	TOCItems: () => TOCItems
+});
 function TOCItems({ ref, className, ...props }) {
 	const containerRef = useRef(null);
 	const items = useTOCItems();
-	const { text } = useI18n();
 	const [svg, setSvg] = useState();
-	useEffect(() => {
-		if (!containerRef.current) return;
+	const onResize = useEffectEvent(() => {
 		const container = containerRef.current;
-		function onResize() {
-			if (container.clientHeight === 0) return;
-			let w = 0, h = 0;
-			const 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);
-				w = Math.max(offset, w);
-				h = Math.max(h, bottom);
-				d.push(`${i === 0 ? "M" : "L"}${offset} ${top}`);
-				d.push(`L${offset} ${bottom}`);
+		if (!container || container.clientHeight === 0) return;
+		let w = 0;
+		let h = 0;
+		let b0 = 0;
+		let 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);
+			w = Math.max(offset, w);
+			h = Math.max(h, bottom);
+			if (i === 0) d += ` M${offset} ${top} L${offset} ${bottom}`;
+			else {
+				const pOffset = getLineOffset(items[i - 1].depth) + 1;
+				d += ` C ${pOffset} ${top - 4} ${offset} ${b0 + 4} ${offset} ${top} L${offset} ${bottom}`;
 			}
-			setSvg({
-				path: d.join(" "),
-				width: w + 1,
-				height: h
-			});
+			b0 = bottom;
 		}
+		setSvg({
+			d,
+			width: w + 1,
+			height: h
+		});
+	});
+	useEffect(() => {
+		if (!containerRef.current) return;
 		const observer = new ResizeObserver(onResize);
 		onResize();
-		observer.observe(container);
+		observer.observe(containerRef.current);
 		return () => {
 			observer.disconnect();
 		};
-	}, [items]);
-	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
-		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 transition-[clip-path]",
+			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),
-		...props,
-		children: items.map((item, i) => /* @__PURE__ */ jsx(TOCItem, {
-			item,
-			upper: items[i - 1]?.depth,
-			lower: items[i + 1]?.depth
-		}, item.url))
+		...props
 	})] });
 }
+function TOCEmpty() {
+	const { text } = useI18n();
+	return /* @__PURE__ */ jsx("div", {
+		className: "rounded-lg border bg-fd-card p-3 text-xs text-fd-muted-foreground",
+		children: text.tocNoHeadings
+	});
+}
+function ThumbBox() {
+	const items = Primitive.useItems();
+	let startIdx = -1;
+	let endIdx = -1;
+	let lastInactiveIdx = -1;
+	for (let i = 0; i < items.length; i++) {
+		const item = items[i];
+		if (item.active) {
+			if (startIdx === -1) startIdx = i;
+			endIdx = i;
+		} else if (lastInactiveIdx === -1 || items[lastInactiveIdx].t < item.t) lastInactiveIdx = i;
+	}
+	if (startIdx === -1) return;
+	const isStart = endIdx < lastInactiveIdx;
+	return /* @__PURE__ */ jsx("div", {
+		className: "absolute size-1 bg-fd-primary rounded-full transition-transform",
+		style: { translate: `calc(${getLineOffset(items[isStart ? startIdx : endIdx].original.depth)}px - 1.25px) ${isStart ? "var(--fd-top)" : "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);
+function TOCItem({ item, ...props }) {
+	const items = useTOCItems();
+	const { lowerOffset, offset, upperOffset } = useMemo(() => {
+		const index = items.indexOf(item);
+		const offset = getLineOffset(item.depth);
+		return {
+			offset,
+			upperOffset: index > 0 ? getLineOffset(items[index - 1].depth) : offset,
+			lowerOffset: index + 1 < items.length ? getLineOffset(items[index + 1].depth) : offset
+		};
+	}, [items, item]);
 	return /* @__PURE__ */ jsxs(Primitive.TOCItem, {
 		href: item.url,
-		style: { paddingInlineStart: getItemOffset(item.depth) },
-		className: "prose relative py-1.5 text-sm text-fd-muted-foreground hover:text-fd-accent-foreground transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary",
+		...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 first:pt-0 last:pb-0 data-[active=true]:text-fd-primary", props.className),
+		style: {
+			paddingInlineStart: getItemOffset(item.depth),
+			...props.style
+		},
 		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", {
@@ -106,7 +163,5 @@ function TOCItem({ item, upper = item.depth, lower = item.depth }) {
 		]
 	});
 }
-
 //#endregion
-export { TOCItems };
-//# sourceMappingURL=clerk.js.map
+export { TOCEmpty, TOCItem, TOCItems, clerk_exports };

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

@@ -1,5 +1,6 @@
 import { ComponentProps } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as Primitive from "@hanzo/docs-core/toc";
 
 //#region src/components/toc/default.d.ts
 declare function TOCItems({
@@ -7,6 +8,12 @@ declare function TOCItems({
   className,
   ...props
 }: ComponentProps<'div'>): react_jsx_runtime0.JSX.Element;
+declare function TOCEmpty(): react_jsx_runtime0.JSX.Element;
+declare function TOCItem({
+  item,
+  ...props
+}: Primitive.TOCItemProps & {
+  item: Primitive.TOCItemType;
+}): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { TOCItems };
-//# sourceMappingURL=default.d.ts.map
+export { TOCEmpty, TOCItem, TOCItems };

package/dist/components/toc/default.js

@@ -1,40 +1,47 @@
-'use client';
-
+"use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { useI18n } from "../../contexts/i18n.js";
 import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
-import { TocThumb, useTOCItems } from "./index.js";
+import { TocThumb } from "./index.js";
 import { useRef } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import * as Primitive from "@hanzo/docs-core/toc";
-
 //#region src/components/toc/default.tsx
+var default_exports = /* @__PURE__ */ __exportAll({
+	TOCEmpty: () => TOCEmpty,
+	TOCItem: () => TOCItem,
+	TOCItems: () => TOCItems
+});
 function TOCItems({ ref, className, ...props }) {
 	const containerRef = useRef(null);
-	const items = useTOCItems();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ jsx(TocThumb, {
+			containerRef,
+			className: "absolute inset-y-0 inset-s-0 bg-fd-primary w-px transition-[clip-path]",
+			style: { 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)))" }
+		}), /* @__PURE__ */ jsx("div", {
+			ref: mergeRefs(ref, containerRef),
+			className: cn("flex flex-col border-s border-fd-foreground/10", className),
+			...props
+		})]
+	});
+}
+function TOCEmpty() {
 	const { text } = useI18n();
-	if (items.length === 0) return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsx("div", {
 		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, {
-		containerRef,
-		className: "absolute top-(--fd-top) h-(--fd-height) w-0.5 rounded-e-sm bg-fd-primary transition-[top,height] ease-linear"
-	}), /* @__PURE__ */ jsx("div", {
-		ref: mergeRefs(ref, containerRef),
-		className: cn("flex flex-col border-s border-fd-foreground/10", className),
-		...props,
-		children: items.map((item) => /* @__PURE__ */ jsx(TOCItem, { item }, item.url))
-	})] });
 }
-function TOCItem({ item }) {
+function TOCItem({ item, ...props }) {
 	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"),
+		...props,
+		className: cn("prose py-1.5 text-sm text-fd-muted-foreground scroll-m-4 transition-colors wrap-anywhere first:pt-0 last:pb-0 data-[active=true]:text-fd-primary hover:text-fd-accent-foreground", item.depth <= 2 && "ps-3", item.depth === 3 && "ps-6", item.depth >= 4 && "ps-8", props.className),
 		children: item.title
 	});
 }
-
 //#endregion
-export { TOCItems };
-//# sourceMappingURL=default.js.map
+export { TOCEmpty, TOCItem, TOCItems, default_exports };

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

@@ -4,23 +4,26 @@ import * as Primitive from "@hanzo/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
-}: ComponentProps<typeof Primitive.AnchorProvider>): react_jsx_runtime0.JSX.Element;
+}: TOCProviderProps): react_jsx_runtime0.JSX.Element;
 declare function TOCScrollArea({
   ref,
   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, TOCScrollArea, TocThumb, useTOCItems };
-//# sourceMappingURL=index.d.ts.map
+export { TOCProvider, TOCProviderProps, TOCScrollArea, TocThumb, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };

package/dist/components/toc/index.js

@@ -1,17 +1,26 @@
-'use client';
-
+"use client";
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { cn } from "../../utils/cn.js";
 import { mergeRefs } from "../../utils/merge-refs.js";
 import { createContext, use, useEffect, useEffectEvent, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import * as Primitive from "@hanzo/docs-core/toc";
 import { useOnChange } from "@hanzo/docs-core/utils/use-on-change";
-
 //#region src/components/toc/index.tsx
+var toc_exports = /* @__PURE__ */ __exportAll({
+	TOCProvider: () => TOCProvider,
+	TOCScrollArea: () => TOCScrollArea,
+	TocThumb: () => TocThumb,
+	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,
@@ -34,17 +43,46 @@ function TOCScrollArea({ ref, className, ...props }) {
 		})
 	});
 }
-function TocThumb({ containerRef, ...props }) {
+function TocThumb({ containerRef, align = "end", ...props }) {
 	const thumbRef = useRef(null);
-	const active = Primitive.useActiveAnchors();
+	const active = useActiveAnchors();
 	function update(info) {
 		const element = thumbRef.current;
-		if (!element) return;
-		element.style.setProperty("--fd-top", `${info[0]}px`);
-		element.style.setProperty("--fd-height", `${info[1]}px`);
+		const container = containerRef.current;
+		if (!element || !container) return;
+		element.style.setProperty("--fd-top", `${info.top}px`);
+		element.style.setProperty("--fd-height", `${info.height}px`);
+	}
+	function calc(active) {
+		const container = containerRef.current;
+		if (!container || container.clientHeight === 0) return null;
+		if (active.length === 0) return {
+			height: 0,
+			top: 0
+		};
+		let upper = Number.MAX_VALUE;
+		let lower = 0;
+		for (const item of active) {
+			const element = container.querySelector(`a[href="#${item}"]`);
+			if (!element) continue;
+			if (align === "center") {
+				const y = element.offsetTop + element.clientHeight / 2;
+				upper = Math.min(upper, y);
+				lower = Math.max(lower, y);
+			} else {
+				const styles = getComputedStyle(element);
+				upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop));
+				lower = Math.max(lower, element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom));
+			}
+		}
+		return {
+			top: upper,
+			height: lower - upper
+		};
 	}
 	const onPrint = useEffectEvent(() => {
-		if (containerRef.current) update(calc(containerRef.current, active));
+		const result = calc(active);
+		if (result) update(result);
 	});
 	useEffect(() => {
 		if (!containerRef.current) return;
@@ -56,7 +94,8 @@ function TocThumb({ containerRef, ...props }) {
 		};
 	}, [containerRef]);
 	useOnChange(active, () => {
-		if (containerRef.current) update(calc(containerRef.current, active));
+		const result = calc(active);
+		if (result) update(result);
 	});
 	return /* @__PURE__ */ jsx("div", {
 		ref: thumbRef,
@@ -64,19 +103,5 @@ function TocThumb({ containerRef, ...props }) {
 		...props
 	});
 }
-function calc(container, active) {
-	if (active.length === 0 || container.clientHeight === 0) return [0, 0];
-	let upper = Number.MAX_VALUE, lower = 0;
-	for (const item of active) {
-		const element = container.querySelector(`a[href="#${item}"]`);
-		if (!element) continue;
-		const styles = getComputedStyle(element);
-		upper = Math.min(upper, element.offsetTop + parseFloat(styles.paddingTop));
-		lower = Math.max(lower, element.offsetTop + element.clientHeight - parseFloat(styles.paddingBottom));
-	}
-	return [upper, lower - upper];
-}
-
 //#endregion
-export { TOCProvider, TOCScrollArea, TocThumb, useTOCItems };
-//# sourceMappingURL=index.js.map
+export { TOCProvider, TOCScrollArea, TocThumb, toc_exports, useActiveAnchor, useActiveAnchors, useItems, useTOCItems };

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
@@ -26,14 +26,19 @@ interface TypeNode {
   default?: ReactNode;
   required?: boolean;
   deprecated?: boolean;
+  /**
+   * a list of parameters info if the type is a function.
+   */
   parameters?: ParameterNode[];
   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 };
-//# sourceMappingURL=type-table.d.ts.map
+export { ParameterNode, TypeNode, TypeTable };

package/dist/components/type-table.js

@@ -1,48 +1,55 @@
-'use client';
-
+"use client";
 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 "@hanzo/docs-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, {
@@ -103,7 +110,5 @@ function Item({ name, item: { parameters = [], description, required = false, de
 		}) })]
 	});
 }
-
 //#endregion
 export { TypeTable };
-//# sourceMappingURL=type-table.js.map

package/dist/components/ui/accordion.d.ts

@@ -27,5 +27,4 @@ declare function AccordionContent({
   ...props
 }: ComponentProps<typeof Accordion$1.Panel>): react_jsx_runtime0.JSX.Element;
 //#endregion
-export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger };
-//# sourceMappingURL=accordion.d.ts.map
+export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger };

package/dist/components/ui/accordion.js

@@ -1,10 +1,8 @@
-'use client';
-
+"use client";
 import { cn } from "../../utils/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRight } from "lucide-react";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
-
 //#region src/components/ui/accordion.tsx
 function Accordion({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Root, {
@@ -39,7 +37,5 @@ function AccordionContent({ className, children, ...props }) {
 		children
 	});
 }
-
 //#endregion
 export { Accordion, AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger };
-//# sourceMappingURL=accordion.js.map

package/dist/components/ui/button.d.ts

@@ -5,9 +5,8 @@ import * as class_variance_authority_types0 from "class-variance-authority/types
 declare const buttonVariants: (props?: ({
   variant?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
   color?: "primary" | "outline" | "ghost" | "secondary" | null | undefined;
-  size?: "sm" | "icon" | "icon-sm" | "icon-xs" | null | undefined;
+  size?: "icon" | "sm" | "icon-sm" | "icon-xs" | null | undefined;
 } & class_variance_authority_types0.ClassProp) | undefined) => string;
 type ButtonProps = VariantProps<typeof buttonVariants>;
 //#endregion
-export { ButtonProps, buttonVariants };
-//# sourceMappingURL=button.d.ts.map
+export { ButtonProps, buttonVariants };

package/dist/components/ui/button.js

@@ -1,5 +1,4 @@
 import { cva } from "class-variance-authority";
-
 //#region src/components/ui/button.tsx
 const variants = {
 	primary: "bg-fd-primary text-fd-primary-foreground hover:bg-fd-primary/80",
@@ -17,7 +16,5 @@ const buttonVariants = cva("inline-flex items-center justify-center rounded-md p
 		"icon-xs": "p-1 [&_svg]:size-4"
 	}
 } });
-
 //#endregion
 export { buttonVariants };
-//# sourceMappingURL=button.js.map

package/dist/components/ui/collapsible.d.ts

@@ -16,5 +16,4 @@ type CollapsibleProps = Collapsible$1.Root.Props;
 type CollapsibleContentProps = Collapsible$1.Panel.Props;
 type CollapsibleTriggerProps = Collapsible$1.Trigger.Props;
 //#endregion
-export { Collapsible, CollapsibleContent, CollapsibleContentProps, CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerProps };
-//# sourceMappingURL=collapsible.d.ts.map
+export { Collapsible, CollapsibleContent, CollapsibleContentProps, CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerProps };

package/dist/components/ui/collapsible.js

@@ -1,20 +1,16 @@
-'use client';
-
+"use client";
 import { cn } from "../../utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
-
 //#region src/components/ui/collapsible.tsx
 const Collapsible = Collapsible$1.Root;
 const CollapsibleTrigger = Collapsible$1.Trigger;
 function CollapsibleContent({ children, className, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible$1.Panel, {
 		...props,
-		className: (s) => cn("overflow-hidden [&[hidden]:not([hidden='until-found'])]:hidden h-(--collapsible-panel-height) transition-[height] data-[starting-style]:h-0 data-[ending-style]:h-0", typeof className === "function" ? className(s) : className),
+		className: (s) => cn("overflow-hidden [&[hidden]:not([hidden='until-found'])]:hidden h-(--collapsible-panel-height) transition-[height,opacity] data-starting-style:opacity-0 data-starting-style:h-0 data-ending-style:h-0 data-ending-style:opacity-0", typeof className === "function" ? className(s) : className),
 		children
 	});
 }
-
 //#endregion
 export { Collapsible, CollapsibleContent, CollapsibleTrigger };
-//# sourceMappingURL=collapsible.js.map