@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/ui/table-of-contents.js

@@ -1,17 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { TrackHighlight } from "../extensions/track-highlight.js";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/table-of-contents.tsx
-const tableOfContentsVariants = [
-	"background",
-	"trail",
-	"both"
-];
-const DETECTION_MARGIN = "-80px 0px -20% 0px";
-const TOC_ITEM_SELECTOR = "[data-control-ui=\"table-of-contents\"][data-slot=\"item\"]";
-const TOC_ACTIVE_SELECTOR = "[data-control-ui=\"table-of-contents\"][data-slot=\"item\"][data-active]";
+const tableOfContentsVariants = ["range", "progress"];
 function getScrollContainer(el) {
 	let node = el.parentElement;
 	while (node) {
@@ -20,7 +12,7 @@ function getScrollContainer(el) {
 	}
 	return null;
 }
-function useVisibleSections(ids) {
+function useVisibleSections(ids, knobSourceRef) {
 	const [visibleState, setVisibleState] = useState({
 		idsKey: "",
 		visibleIds: []
@@ -30,6 +22,8 @@ function useVisibleSections(ids) {
 		const elements = (idsKey ? idsKey.split("|") : []).map((id) => document.getElementById(id)).filter((el) => el !== null);
 		const firstElement = elements[0];
 		if (!firstElement) return;
+		const knobSource = knobSourceRef.current;
+		const scrollInset = knobSource ? readLengthKnob(getComputedStyle(knobSource), "--cui-table-of-contents-scroll-inset") : 0;
 		const order = new Map(elements.map((el, index) => [el.id, index]));
 		const visible = /* @__PURE__ */ new Set();
 		const observer = new IntersectionObserver((entries) => {
@@ -41,14 +35,21 @@ function useVisibleSections(ids) {
 			});
 		}, {
 			root: getScrollContainer(firstElement),
-			rootMargin: DETECTION_MARGIN,
+			rootMargin: `-${scrollInset}px 0px -20% 0px`,
 			threshold: 0
 		});
 		for (const el of elements) observer.observe(el);
 		return () => observer.disconnect();
-	}, [idsKey]);
+	}, [idsKey, knobSourceRef]);
 	return visibleState.idsKey === idsKey ? visibleState.visibleIds : [];
 }
+function subscribeToHash(onChange) {
+	window.addEventListener("hashchange", onChange);
+	return () => window.removeEventListener("hashchange", onChange);
+}
+function useLocationHash() {
+	return useSyncExternalStore(subscribeToHash, () => window.location.hash, () => "");
+}
 function collectLevels(items, fallbackLevel = 2) {
 	return items.flatMap((item) => {
 		const level = item.level ?? fallbackLevel;
@@ -72,22 +73,98 @@ function normalizeItems(items, baseLevel, fallbackLevel = 2, nestingDepth = 0) {
 function flattenItems(items) {
 	return items.flatMap((item) => [item, ...flattenItems(item.children ?? [])]);
 }
-function activeIdsInRange(visibleIds, targetIds) {
-	let firstIndex = targetIds.length;
-	let lastIndex = -1;
-	for (const id of visibleIds) {
-		const index = targetIds.indexOf(id);
-		if (index < 0) continue;
-		firstIndex = Math.min(firstIndex, index);
-		lastIndex = Math.max(lastIndex, index);
+function findActiveItems(visibleIds, flatItems, targetIds) {
+	const indexes = visibleIds.map((id) => targetIds.indexOf(id)).filter((index) => index >= 0);
+	if (indexes.length === 0) return [];
+	return flatItems.slice(Math.min(...indexes), Math.max(...indexes) + 1);
+}
+function readLengthKnob(style, knob) {
+	return Number.parseFloat(style.getPropertyValue(knob)) || 0;
+}
+function inDocumentOrder([, a], [, b]) {
+	return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+}
+function measureRail(track, itemElements) {
+	const style = getComputedStyle(track);
+	const indentSize = readLengthKnob(style, "--cui-table-of-contents-item-indent-size");
+	const strokeInset = Math.max(readLengthKnob(style, "--cui-table-of-contents-rail-size"), readLengthKnob(style, "--cui-table-of-contents-trail-size")) / 2;
+	const isRtl = style.direction === "rtl";
+	const points = [];
+	let length = 0;
+	const lineTo = (x, y) => {
+		const previous = points.at(-1);
+		if (previous) length += Math.hypot(x - previous.x, y - previous.y);
+		points.push({
+			x,
+			y
+		});
+		return length;
+	};
+	const stops = /* @__PURE__ */ new Map();
+	for (const [href, item] of [...itemElements].sort(inDocumentOrder)) {
+		const inlineOffset = Number(item.dataset.depth) * indentSize + strokeInset;
+		const x = isRtl ? track.clientWidth - inlineOffset : inlineOffset;
+		const top = item.offsetTop;
+		const previous = points.at(-1);
+		const topStop = lineTo(previous?.x ?? x, top);
+		if (previous && previous.x !== x) lineTo(x, top + Math.min(indentSize, item.offsetHeight / 2));
+		stops.set(href, {
+			top: topStop,
+			center: lineTo(x, top + item.offsetHeight / 2),
+			bottom: lineTo(x, top + item.offsetHeight)
+		});
 	}
-	if (lastIndex < 0) return /* @__PURE__ */ new Set();
-	return new Set(targetIds.slice(firstIndex, lastIndex + 1));
+	return {
+		path: points.map(({ x, y }, index) => `${index === 0 ? "M" : "L"}${x} ${y}`).join(""),
+		length,
+		stops
+	};
+}
+function useRailGeometry(trackRef, itemElements) {
+	const [rail, setRail] = useState(null);
+	useEffect(() => {
+		const track = trackRef.current;
+		if (!track) return;
+		const measure = () => setRail(measureRail(track, itemElements));
+		const resizeObserver = new ResizeObserver(measure);
+		const mutationObserver = new MutationObserver(measure);
+		resizeObserver.observe(track);
+		mutationObserver.observe(track, {
+			subtree: true,
+			childList: true,
+			attributeFilter: ["data-depth"]
+		});
+		return () => {
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+		};
+	}, [trackRef, itemElements]);
+	return rail;
 }
-function TableOfContents({ items, label = "On this page", variant = "both", className, style, ...props }) {
+function trailStyle(rail, activeItems, variant) {
+	const firstStop = rail.stops.get(activeItems[0]?.href ?? "");
+	const lastStop = rail.stops.get(activeItems.at(-1)?.href ?? "");
+	const start = variant === "progress" ? 0 : firstStop?.top ?? 0;
+	const end = variant === "progress" ? firstStop?.center ?? 0 : lastStop?.bottom ?? 0;
+	return {
+		"--_toc-rail-length": `${rail.length}px`,
+		"--_toc-trail-start": `${start}px`,
+		"--_toc-trail-length": `${Math.max(0, end - start)}px`,
+		"--_toc-indicator-distance": `${firstStop?.center ?? 0}px`
+	};
+}
+function TableOfContents({ items, label = "On this page", variant = "range", indicator, className, style, ...props }) {
+	const trackRef = useRef(null);
+	const [itemElements] = useState(() => /* @__PURE__ */ new Map());
 	const normalizedItems = normalizeItems(items, Math.min(...collectLevels(items), 2));
-	const targetIds = flattenItems(normalizedItems).map((item) => item.href.replace(/^#/, ""));
-	const activeSet = activeIdsInRange(useVisibleSections(targetIds), targetIds);
+	const flatItems = flattenItems(normalizedItems);
+	const targetIds = flatItems.map((item) => item.href.replace(/^#/, ""));
+	const activeItems = findActiveItems(useVisibleSections(targetIds, trackRef), flatItems, targetIds);
+	const activeHrefs = new Set(activeItems.map((item) => item.href));
+	const locationHash = useLocationHash();
+	const currentHref = activeHrefs.has(locationHash) ? locationHash : activeItems[0]?.href;
+	const rail = useRailGeometry(trackRef, itemElements);
+	const hasActiveSection = activeItems.length > 0;
 	if (items.length === 0) return null;
 	return /* @__PURE__ */ jsxs("nav", {
 		"data-control-ui": "table-of-contents",
@@ -104,69 +181,83 @@ function TableOfContents({ items, label = "On this page", variant = "both", clas
 			"data-slot": "label",
 			children: label
 		}), /* @__PURE__ */ jsxs("div", {
+			ref: trackRef,
 			"data-control-ui": "table-of-contents",
 			"data-control-family": "table-of-contents",
 			"data-slot": "track",
-			className: "relative isolate",
+			className: "relative",
+			style: rail ? trailStyle(rail, activeItems, variant) : void 0,
 			children: [
-				/* @__PURE__ */ jsx("span", {
+				rail && /* @__PURE__ */ jsxs("svg", {
 					"aria-hidden": true,
-					"data-control-ui": "table-of-contents",
-					"data-control-family": "table-of-contents",
-					"data-slot": "rail",
-					className: "pointer-events-none absolute inset-y-0 start-0 -z-20"
-				}),
-				/* @__PURE__ */ jsx(TrackHighlight, {
-					"data-variant": variant,
-					itemSelector: TOC_ITEM_SELECTOR,
-					activeSelector: TOC_ACTIVE_SELECTOR,
-					range: true,
-					followHover: false,
-					children: variant !== "background" && /* @__PURE__ */ jsx("div", {
-						"aria-hidden": true,
+					className: "pointer-events-none absolute inset-0 size-full overflow-visible",
+					children: [/* @__PURE__ */ jsx("path", {
+						"data-control-ui": "table-of-contents",
+						"data-control-family": "table-of-contents",
+						"data-slot": "rail",
+						d: rail.path
+					}), /* @__PURE__ */ jsx("path", {
 						"data-control-ui": "table-of-contents",
 						"data-control-family": "table-of-contents",
 						"data-slot": "trail",
-						className: "absolute inset-y-0 start-0"
-					})
+						"data-visible": hasActiveSection || void 0,
+						d: rail.path
+					})]
 				}),
 				/* @__PURE__ */ jsx(TocList, {
 					items: normalizedItems,
-					activeSet,
-					variant,
+					activeHrefs,
+					currentHref,
+					itemElements,
 					root: true
+				}),
+				rail && indicator && /* @__PURE__ */ jsx("span", {
+					"aria-hidden": true,
+					"data-control-ui": "table-of-contents",
+					"data-control-family": "table-of-contents",
+					"data-slot": "indicator",
+					"data-visible": hasActiveSection || void 0,
+					className: "pointer-events-none absolute top-0 left-0",
+					style: { offsetPath: `path("${rail.path}")` },
+					children: indicator
 				})
 			]
 		})]
 	});
 }
-function TocList({ items, activeSet, variant, root = false }) {
+function TocList({ items, activeHrefs, currentHref, itemElements, root = false }) {
 	return /* @__PURE__ */ jsx("ul", {
 		"data-control-ui": "table-of-contents",
 		"data-control-family": "table-of-contents",
 		"data-slot": "list",
 		"data-nested": root ? void 0 : "true",
 		children: items.map((item) => {
-			const targetId = item.href.replace(/^#/, "");
-			const isActive = activeSet.has(targetId);
+			const isActive = activeHrefs.has(item.href);
 			const itemStyle = { "--_toc-depth": item.depth };
 			return /* @__PURE__ */ jsxs("li", { children: [/* @__PURE__ */ jsx("a", {
+				ref: (element) => {
+					if (!element) return;
+					itemElements.set(item.href, element);
+					return () => {
+						itemElements.delete(item.href);
+					};
+				},
 				"data-control-ui": "table-of-contents",
 				"data-control-family": "table-of-contents",
 				"data-slot": "item",
 				"data-active": isActive || void 0,
-				"data-variant": variant,
 				"data-level": item.level,
 				"data-depth": item.depth,
-				"aria-current": isActive ? "location" : void 0,
+				"aria-current": item.href === currentHref ? "location" : void 0,
 				href: item.href,
 				className: "block",
 				style: itemStyle,
 				children: item.label
 			}), item.children && /* @__PURE__ */ jsx(TocList, {
 				items: item.children,
-				activeSet,
-				variant
+				activeHrefs,
+				currentHref,
+				itemElements
 			})] }, item.href);
 		})
 	});

package/dist/ui/table.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/cn.js";
+import { ScrollArea } from "./scroll-area.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/table.tsx
 function Table({ className, ...props }) {
@@ -6,13 +7,18 @@ function Table({ className, ...props }) {
 		"data-control-ui": "table",
 		"data-control-family": "table",
 		"data-slot": "container",
-		className: "relative w-full overflow-x-auto",
-		children: /* @__PURE__ */ jsx("table", {
-			"data-control-ui": "table",
-			"data-control-family": "table",
-			"data-slot": "root",
-			className: cn("w-full caption-bottom", className),
-			...props
+		className: "relative w-full",
+		children: /* @__PURE__ */ jsx(ScrollArea, {
+			lockAxis: "y",
+			"aria-label": props["aria-label"],
+			"aria-labelledby": props["aria-labelledby"],
+			children: /* @__PURE__ */ jsx("table", {
+				"data-control-ui": "table",
+				"data-control-family": "table",
+				"data-slot": "root",
+				className: cn("w-full caption-bottom", className),
+				...props
+			})
 		})
 	});
 }
@@ -57,7 +63,7 @@ function TableHead({ className, ...props }) {
 		"data-control-ui": "table",
 		"data-control-family": "table",
 		"data-slot": "head",
-		className: cn("whitespace-nowrap align-middle [&:has([role=checkbox])]:pr-0", className),
+		className: cn("whitespace-nowrap align-middle [&:has([role=checkbox])]:pe-0", className),
 		...props
 	});
 }
@@ -66,7 +72,7 @@ function TableCell({ className, ...props }) {
 		"data-control-ui": "table",
 		"data-control-family": "table",
 		"data-slot": "cell",
-		className: cn("whitespace-nowrap align-middle [&:has([role=checkbox])]:pr-0", className),
+		className: cn("whitespace-nowrap align-middle [&:has([role=checkbox])]:pe-0", className),
 		...props
 	});
 }

package/dist/ui/textarea.d.ts

@@ -4,5 +4,5 @@ import { CSSProperties, ComponentProps } from "react";
 export type TextareaProps = Omit<ComponentProps<"textarea">, "style"> & {
   style?: CSSProperties & FieldKnobStyle;
 };
-export declare function Textarea({ className, ...props }: TextareaProps): import("react").JSX.Element;
+export declare function Textarea({ ref, id, name, value, defaultValue, disabled, autoFocus, className, ...props }: TextareaProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/textarea.js

@@ -1,15 +1,26 @@
+"use client";
 import { cn } from "../lib/cn.js";
 import { jsx } from "react/jsx-runtime";
+import { Input } from "@base-ui/react/input";
 //#region src/ui/textarea.tsx
-function Textarea({ className, ...props }) {
-	return /* @__PURE__ */ jsx("textarea", {
-		"data-control-ui": "textarea",
-		"data-field-kind": "textarea",
-		"data-slot": "root",
-		"data-control-family": "field",
-		"data-control": "true",
-		className: cn("field-sizing-content w-full min-w-0 resize-none", className),
-		...props
+function Textarea({ ref, id, name, value, defaultValue, disabled, autoFocus, className, ...props }) {
+	return /* @__PURE__ */ jsx(Input, {
+		ref,
+		id,
+		name,
+		value,
+		defaultValue,
+		disabled,
+		autoFocus,
+		render: /* @__PURE__ */ jsx("textarea", {
+			...props,
+			"data-control-ui": "textarea",
+			"data-field-kind": "textarea",
+			"data-slot": "root",
+			"data-control-family": "field",
+			"data-control": "true",
+			className: cn("field-sizing-content w-full min-w-0 resize-none", className)
+		})
 	});
 }
 //#endregion

package/dist/ui/timeline.d.ts

@@ -1,3 +1,4 @@
+import { RenderProp } from "../control-props.js";
 import { TimelineKnobStyle } from "../knob-contracts/timeline-knobs.js";
 import { CSSProperties, ComponentProps } from "react";
 //#region src/ui/timeline.d.ts
@@ -20,6 +21,7 @@ export type TimelineContentProps = ComponentProps<"div"> & {
   style?: CSSProperties & TimelineKnobStyle;
 };
 export type TimelineTitleProps = Omit<ComponentProps<"div">, "style"> & {
+  render?: RenderProp<ComponentProps<"div">>;
   style?: CSSProperties & TimelineKnobStyle;
 };
 export type TimelineDescriptionProps = Omit<ComponentProps<"div">, "style"> & {
@@ -33,7 +35,7 @@ export declare function TimelineItem({ state, className, ...props }: TimelineIte
 export declare function TimelineIndicator({ className, ...props }: TimelineIndicatorProps): import("react").JSX.Element;
 export declare function TimelineSeparator({ className, ...props }: TimelineSeparatorProps): import("react").JSX.Element;
 export declare function TimelineContent({ className, ...props }: TimelineContentProps): import("react").JSX.Element;
-export declare function TimelineTitle({ className, ...props }: TimelineTitleProps): import("react").JSX.Element;
+export declare function TimelineTitle({ render, className, ...props }: TimelineTitleProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare function TimelineDescription({ className, ...props }: TimelineDescriptionProps): import("react").JSX.Element;
 export declare function TimelineMeta({ className, ...props }: TimelineMetaProps): import("react").JSX.Element;
 //#endregion

package/dist/ui/timeline.js

@@ -1,4 +1,6 @@
+"use client";
 import { cn } from "../lib/cn.js";
+import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/timeline.tsx
 function Timeline({ className, ...props }) {
@@ -16,13 +18,15 @@ function TimelineItem({ state = "neutral", className, ...props }) {
 		"data-control-family": "timeline",
 		"data-slot": "item",
 		"data-state": state,
+		"aria-current": state === "running" ? "step" : void 0,
 		...props,
 		className: cn("group/timeline-item relative grid min-w-0 grid-cols-[1rem_minmax(0,1fr)]", className)
 	});
 }
 function TimelineIndicator({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
-		"aria-hidden": "true",
+		role: props["aria-label"] ? "img" : void 0,
+		"aria-hidden": props["aria-label"] ? void 0 : true,
 		"data-control-ui": "timeline",
 		"data-control-family": "timeline",
 		"data-slot": "indicator",
@@ -37,7 +41,7 @@ function TimelineSeparator({ className, ...props }) {
 		"data-control-family": "timeline",
 		"data-slot": "separator",
 		...props,
-		className: cn("absolute top-5 bottom-0 left-[calc(0.5rem-0.5px)] col-start-1 w-px group-last/timeline-item:hidden", className)
+		className: cn("absolute top-5 bottom-0 start-[calc(0.5rem-0.5px)] col-start-1 w-px group-last/timeline-item:hidden", className)
 	});
 }
 function TimelineContent({ className, ...props }) {
@@ -49,13 +53,17 @@ function TimelineContent({ className, ...props }) {
 		className: cn("col-start-2 row-start-1 grid min-w-0", className)
 	});
 }
-function TimelineTitle({ className, ...props }) {
-	return /* @__PURE__ */ jsx("div", {
-		"data-control-ui": "timeline",
-		"data-control-family": "timeline",
-		"data-slot": "title",
-		...props,
-		className: cn("min-w-0", className)
+function TimelineTitle({ render, className, ...props }) {
+	return useRender({
+		defaultTagName: "div",
+		render,
+		props: {
+			...props,
+			"data-control-ui": "timeline",
+			"data-control-family": "timeline",
+			"data-slot": "title",
+			className: cn("min-w-0", className)
+		}
 	});
 }
 function TimelineDescription({ className, ...props }) {

package/dist/ui/toast.d.ts

@@ -1,7 +1,7 @@
 import { ButtonProps } from "./button.js";
 import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
 import { CSSProperties, ReactNode } from "react";
-import { Toast } from "@base-ui/react/toast";
+import { Toast, ToastManagerAddOptions, ToastManagerPromiseOptions } from "@base-ui/react/toast";
 //#region src/ui/toast.d.ts
 export type ToasterProps = {
   className?: string;
@@ -11,18 +11,24 @@ export type ToasterProps = {
   indicatorStyle?: CSSProperties & PopupKnobStyle;
   actionStyle?: ButtonProps["style"];
   closeStyle?: ButtonProps["style"];
+  closeLabel?: string;
+  successLabel?: string;
+  errorLabel?: string;
+  warningLabel?: string;
+  infoLabel?: string;
 };
 export declare const toastManager: import("@base-ui/react").ToastManager<any>;
-type ToastOptions = Omit<Parameters<typeof toastManager.add>[0], "title">;
-export declare const toast: ((title: ReactNode, options?: ToastOptions) => string) & {
+type ToastOptions = Omit<ToastManagerAddOptions<object>, "title">;
+declare function show(title: ReactNode, options?: ToastOptions): string;
+export declare const toast: typeof show & {
   success: (title: ReactNode, options?: ToastOptions) => string;
   error: (title: ReactNode, options?: ToastOptions) => string;
   warning: (title: ReactNode, options?: ToastOptions) => string;
   info: (title: ReactNode, options?: ToastOptions) => string;
   message: (title: ReactNode, options?: ToastOptions) => string;
-  promise: (...args: Parameters<typeof toastManager.promise>) => Promise<unknown>;
+  promise: <Value>(promise: Promise<Value>, options: ToastManagerPromiseOptions<Value, object>) => Promise<Value>;
   dismiss: (id?: string) => void;
 };
 export declare const useToast: typeof Toast.useToastManager;
-export declare function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionStyle, closeStyle }: ToasterProps): import("react").JSX.Element;
+export declare function Toaster({ className, timeout, limit, rootStyle, indicatorStyle, actionStyle, closeStyle, closeLabel, successLabel, errorLabel, warningLabel, infoLabel }: ToasterProps): import("react").JSX.Element;
 //#endregion