@ctrl-ui/react 0.8.6 → 0.8.7

package/dist/ui/sidebar-provider.js

@@ -1,12 +1,12 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
-import { SIDEBAR_COOKIE_NAME } from "../control-props.js";
 import { TooltipProvider } from "./tooltip.js";
+import { SIDEBAR_COOKIE_NAME } from "../control-props.js";
 import { useIsMobile } from "../hooks/use-mobile.js";
 import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/sidebar-provider.tsx
 const SIDEBAR_COOKIE_MAX_AGE = 604800;
 const SIDEBAR_WIDTH = "16rem";

package/dist/ui/sidebar-resize-rail.js

@@ -2,8 +2,8 @@
 import { cn } from "../lib/cn.js";
 import { useSidebar, useSidebarElements, useSidebarSurface } from "./sidebar-provider.js";
 import { useEffect, useLayoutEffect, useRef, useState } from "react";
-import { useRender } from "@base-ui/react/use-render";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/ui/sidebar-resize-rail.tsx
 const DRAG_THRESHOLD_PX = 5;
 const KEYBOARD_STEP_PX = 10;

package/dist/ui/sidebar.js

@@ -8,9 +8,9 @@ import { SidebarProvider, SidebarSurfaceContext, useSidebar, useSidebarElements,
 import { SidebarResizeRail } from "./sidebar-resize-rail.js";
 import { SidebarGroup, SidebarGroupContent, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, sidebarMenuButtonSizes, sidebarMenuButtonVariants } from "./sidebar-menu.js";
 import { useState } from "react";
-import { useRender } from "@base-ui/react/use-render";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { PanelLeftIcon } from "lucide-react";
+import { useRender } from "@base-ui/react/use-render";
 import { createPortal } from "react-dom";
 //#region src/ui/sidebar.tsx
 const SIDEBAR_WIDTH_MOBILE = "18rem";

package/dist/ui/table-of-contents.d.ts

@@ -1,5 +1,5 @@
 import { TableOfContentsKnobStyle } from "../knob-contracts/table-of-contents-knobs.js";
-import { CSSProperties, ComponentProps } from "react";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
 //#region src/ui/table-of-contents.d.ts
 export type TocItem = {
   href: string;
@@ -7,7 +7,7 @@ export type TocItem = {
   level?: number;
   children?: TocItem[];
 };
-export declare const tableOfContentsVariants: readonly ["background", "trail", "both"];
+export declare const tableOfContentsVariants: readonly ["range", "progress"];
 export type TableOfContentsVariant = (typeof tableOfContentsVariants)[number];
 export type TableOfContentsProps = Omit<Omit<ComponentProps<"nav">, "children">, "style"> & {
   style?: CSSProperties & TableOfContentsKnobStyle;
@@ -15,7 +15,8 @@ export type TableOfContentsProps = Omit<Omit<ComponentProps<"nav">, "children">,
   items: TocItem[];
   label?: string;
   variant?: TableOfContentsVariant;
+  indicator?: ReactNode;
 };
 export declare function useVisibleSections(ids: string[]): string[];
-export declare function TableOfContents({ items, label, variant, className, style, ...props }: TableOfContentsProps): import("react").JSX.Element | null;
+export declare function TableOfContents({ items, label, variant, indicator, className, style, ...props }: TableOfContentsProps): import("react").JSX.Element | null;
 //#endregion

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

@@ -1,17 +1,10 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { TrackHighlight } from "../extensions/track-highlight.js";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/table-of-contents.tsx
-const tableOfContentsVariants = [
-	"background",
-	"trail",
-	"both"
-];
+const tableOfContentsVariants = ["range", "progress"];
 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]";
 function getScrollContainer(el) {
 	let node = el.parentElement;
 	while (node) {
@@ -72,22 +65,96 @@ 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 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 = "both", className, style, ...props }) {
+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), flatItems, targetIds);
+	const activeHrefs = new Set(activeItems.map((item) => item.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,58 +171,70 @@ 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,
+					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, 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,
@@ -165,8 +244,8 @@ function TocList({ items, activeSet, variant, root = false }) {
 				children: item.label
 			}), item.children && /* @__PURE__ */ jsx(TocList, {
 				items: item.children,
-				activeSet,
-				variant
+				activeHrefs,
+				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,16 @@ 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",
+			children: /* @__PURE__ */ jsx("table", {
+				"data-control-ui": "table",
+				"data-control-family": "table",
+				"data-slot": "root",
+				className: cn("w-full caption-bottom", className),
+				...props
+			})
 		})
 	});
 }

package/dist/ui/toast.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/ui/toggle.d.ts

@@ -15,6 +15,6 @@ export type ToggleGroupProps<TValue extends string = string> = Omit<ComponentPro
   orientation?: "horizontal" | "vertical";
   indicator?: HoverIndicator;
 };
-export declare function Toggle({ variant, size, tone, active, showCheck, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }: ToggleProps): import("react").JSX.Element;
+export declare function Toggle({ variant, size, tone, active, iconOnly, showCheck, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }: ToggleProps): import("react").JSX.Element;
 export declare function ToggleGroup<TValue extends string = string>({ className, orientation, indicator, children, ...props }: ToggleGroupProps<TValue>): import("react").JSX.Element;
 //#endregion

package/dist/ui/toggle.js

@@ -8,7 +8,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Toggle as Toggle$1 } from "@base-ui/react/toggle";
 import { ToggleGroup as ToggleGroup$1 } from "@base-ui/react/toggle-group";
 //#region src/ui/toggle.tsx
-function Toggle({ variant = "surface", size = "sm", tone = "neutral", active, showCheck = false, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }) {
+function Toggle({ variant = "surface", size = "sm", tone = "neutral", active, iconOnly = false, showCheck = false, className, pressed, defaultPressed, onPressedChange, value, disabled, children, ...props }) {
 	const tracksHover = useContext(ButtonTrackContext);
 	return /* @__PURE__ */ jsx(Toggle$1, {
 		"data-track-item": tracksHover ? "" : void 0,
@@ -30,6 +30,7 @@ function Toggle({ variant = "surface", size = "sm", tone = "neutral", active, sh
 				"data-variant": variant,
 				"data-tone": tone,
 				"data-size": size,
+				"data-icon-only": iconOnly ? "true" : void 0,
 				className: cn(buttonStructureClasses, renderProps.className, className),
 				children: /* @__PURE__ */ jsxs("span", {
 					"data-control-ui": "toggle",

package/dist/ui/tooltip.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";

package/dist/ui/tree.js

@@ -3,9 +3,9 @@ import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
 import { TrackHighlight } from "../extensions/track-highlight.js";
 import { Children, createContext, isValidElement, useContext, useRef, useState } from "react";
-import { useRender } from "@base-ui/react/use-render";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronRightIcon } from "lucide-react";
+import { useRender } from "@base-ui/react/use-render";
 import { Collapsible } from "@base-ui/react/collapsible";
 //#region src/ui/tree.tsx
 const TYPEAHEAD_TIMEOUT = 500;

package/dist/ui/trigger-menu.js

@@ -1,7 +1,8 @@
 "use client";
-import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
+import { cn } from "../lib/cn.js";
 import { useSkin } from "../skin-provider.js";
+import { ScrollArea } from "./scroll-area.js";
 import { popupItemStructureClasses } from "../surface-variants.js";
 import { jsx } from "react/jsx-runtime";
 import { Popover } from "@base-ui/react/popover";
@@ -33,8 +34,11 @@ function TriggerMenu({ open, onOpenChange, anchorRect, side = "top", align = "st
 				"data-popup-part": "list-surface",
 				initialFocus: false,
 				finalFocus: false,
-				className: cn("max-h-[min(18rem,var(--available-height))] w-64 max-w-[var(--available-width)] overflow-y-auto", className),
-				children
+				className: cn("grid max-h-[min(18rem,var(--available-height))] w-64 max-w-[var(--available-width)] grid-rows-[minmax(0,1fr)]", className),
+				children: /* @__PURE__ */ jsx(ScrollArea, {
+					lockAxis: "x",
+					children
+				})
 			})
 		}) })
 	});

package/dist/user-ask.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "./lib/cn.js";
-import { Button } from "./ui/button.js";
 import { useUserAsk } from "./hooks/use-user-ask.js";
+import { Button } from "./ui/button.js";
 import { Kbd } from "./ui/kbd.js";
 import { createContext, useContext, useEffect, useId, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ctrl-ui/react",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "Control UI components, blocks, and primitives with neutral defaults and consumer-owned themes.",
   "license": "MIT",
   "repository": {