@ctrl-ui/react 0.8.6 → 0.8.8

package/dist/ui/resizable.js

@@ -1,13 +1,24 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Group, Panel, Separator } from "react-resizable-panels";
 //#region src/ui/resizable.tsx
-const OrientationContext = createContext("horizontal");
-function ResizablePanelGroup({ className, orientation = "horizontal", variant = "framed", children, ...props }) {
-	return /* @__PURE__ */ jsx(OrientationContext.Provider, {
-		value: orientation,
+const ResizableGroupContext = createContext({
+	orientation: "horizontal",
+	disableCursor: false
+});
+const FLOATING_KEYBOARD_STEP_PX = 10;
+const FLOATING_ARROW_DIRECTIONS = {
+	ArrowLeft: -1,
+	ArrowRight: 1
+};
+function ResizablePanelGroup({ className, orientation = "horizontal", variant = "framed", disableCursor = false, children, ...props }) {
+	return /* @__PURE__ */ jsx(ResizableGroupContext.Provider, {
+		value: {
+			orientation,
+			disableCursor
+		},
 		children: /* @__PURE__ */ jsx(Group, {
 			"data-control-ui": "resizable",
 			"data-control-family": "resizable",
@@ -15,6 +26,7 @@ function ResizablePanelGroup({ className, orientation = "horizontal", variant =
 			"data-surface": "panel",
 			"data-variant": variant,
 			orientation,
+			disableCursor: true,
 			className: cn("flex h-full w-full", className),
 			...props,
 			children
@@ -30,15 +42,18 @@ function ResizablePanel({ className, ...props }) {
 		...props
 	});
 }
-function ResizableHandle({ className, variant = "solid", withHandle, children, ...props }) {
-	const axis = useContext(OrientationContext) === "horizontal" ? "vertical" : "horizontal";
+function ResizableHandle({ className, variant = "solid", withHandle, children, "aria-label": ariaLabel = "Resize panel", ...props }) {
+	const { orientation, disableCursor } = useContext(ResizableGroupContext);
+	const axis = orientation === "horizontal" ? "vertical" : "horizontal";
 	return /* @__PURE__ */ jsxs(Separator, {
 		"data-control-ui": "resizable",
 		"data-control-family": "resizable",
 		"data-slot": "handle",
 		"data-variant": variant,
 		"data-axis": axis,
+		"data-cursor": disableCursor ? "none" : void 0,
 		className: cn("relative flex items-center justify-center", axis === "vertical" ? "w-px touch-pan-y" : "h-px touch-pan-x", className),
+		"aria-label": ariaLabel,
 		...props,
 		children: [withHandle ? /* @__PURE__ */ jsx("span", {
 			"data-control-ui": "resizable",
@@ -51,6 +66,113 @@ function ResizableHandle({ className, variant = "solid", withHandle, children, .
 		}) : null, children]
 	});
 }
+function ResizableFloatingPanel({ side = "right", size: controlledSize, defaultSize = 280, onSizeChange, minSize = 160, maxSize = 640, handleVariant = "hover", handleLabel = "Resize panel", getAriaValueText = (value) => `${value} pixels`, className, style, children, ...props }) {
+	const [uncontrolledSize, setUncontrolledSize] = useState(defaultSize);
+	const [hovered, setHovered] = useState(false);
+	const [focused, setFocused] = useState(false);
+	const [resizing, setResizing] = useState(false);
+	const panelRef = useRef(null);
+	const resizeRef = useRef(null);
+	const size = controlledSize ?? uncontrolledSize;
+	const growthPerPointerPx = side === "right" ? -1 : 1;
+	function changeSize(next) {
+		const clamped = Math.round(Math.min(Math.max(next, minSize), maxSize));
+		if (clamped === size) return;
+		if (controlledSize === void 0) setUncontrolledSize(clamped);
+		onSizeChange?.(clamped);
+	}
+	function beginResize(event) {
+		const panel = panelRef.current;
+		if (!panel || !event.isPrimary || event.button !== 0) return;
+		event.preventDefault();
+		event.currentTarget.focus({ preventScroll: true });
+		event.currentTarget.setPointerCapture(event.pointerId);
+		resizeRef.current = {
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startSize: panel.getBoundingClientRect().width
+		};
+		setResizing(true);
+	}
+	function updateResize(event) {
+		const session = resizeRef.current;
+		if (session?.pointerId !== event.pointerId) return;
+		changeSize(session.startSize + (event.clientX - session.startX) * growthPerPointerPx);
+	}
+	function endResize(event) {
+		if (resizeRef.current?.pointerId !== event.pointerId) return;
+		resizeRef.current = null;
+		setResizing(false);
+	}
+	function resizeWithKeyboard(event) {
+		const arrowDirection = FLOATING_ARROW_DIRECTIONS[event.key];
+		const step = event.shiftKey ? 50 : FLOATING_KEYBOARD_STEP_PX;
+		if (arrowDirection) changeSize(size + arrowDirection * step * growthPerPointerPx);
+		else if (event.key === "Home") changeSize(minSize);
+		else if (event.key === "End") changeSize(maxSize);
+		else return;
+		event.preventDefault();
+	}
+	let separatorState = "inactive";
+	if (resizing) separatorState = "active";
+	else if (focused) separatorState = "focus";
+	else if (hovered) separatorState = "hover";
+	const panelStyle = {
+		...style,
+		"--resizable-floating-width": `${size}px`
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref: panelRef,
+		...props,
+		"data-control-ui": "resizable",
+		"data-control-family": "resizable",
+		"data-slot": "floating",
+		"data-side": side,
+		className: cn("absolute inset-y-2 isolate flex w-(--resizable-floating-width) max-w-[calc(100%-1rem)] flex-col", side === "right" ? "right-2" : "left-2", className),
+		style: panelStyle,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				"data-control-ui": "resizable",
+				"data-control-family": "popup",
+				"data-popup-kind": "resizable",
+				"data-popup-part": "surface",
+				"data-popup-static": "",
+				"data-surface": "floating",
+				"data-slot": "surface",
+				className: "pointer-events-none absolute inset-0 -z-1"
+			}),
+			children,
+			/* @__PURE__ */ jsx("div", {
+				role: "separator",
+				tabIndex: 0,
+				"aria-label": handleLabel,
+				"aria-orientation": "vertical",
+				"aria-valuenow": size,
+				"aria-valuemin": minSize,
+				"aria-valuemax": maxSize,
+				"aria-valuetext": getAriaValueText(size),
+				"data-control-ui": "resizable",
+				"data-control-family": "resizable",
+				"data-slot": "handle",
+				"data-variant": handleVariant,
+				"data-axis": "vertical",
+				"data-separator": separatorState,
+				className: cn("absolute inset-y-0 w-px touch-none after:absolute after:inset-y-0 after:inset-x-[calc((1px_-_var(--target-min))/2)] after:content-['']", side === "right" ? "left-0" : "right-0"),
+				onPointerDown: beginResize,
+				onPointerMove: updateResize,
+				onPointerUp: endResize,
+				onPointerCancel: endResize,
+				onPointerEnter: () => setHovered(true),
+				onPointerLeave: () => setHovered(false),
+				onFocus: () => setFocused(true),
+				onBlur: () => setFocused(false),
+				onKeyDown: resizeWithKeyboard,
+				onDoubleClick: () => changeSize(defaultSize)
+			})
+		]
+	});
+}
 function GripIcon({ className }) {
 	return /* @__PURE__ */ jsxs("svg", {
 		viewBox: "0 0 4 16",
@@ -79,4 +201,4 @@ function GripIcon({ className }) {
 	});
 }
 //#endregion
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
+export { ResizableFloatingPanel, ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/dist/ui/responsive-dialog.d.ts

@@ -9,7 +9,7 @@ export type ResponsiveDialogContentProps = DialogContentProps & {
 export declare function ResponsiveDialog({ open: controlledOpen, defaultOpen, onOpenChange, children }: ResponsiveDialogProps): import("react").JSX.Element;
 export declare function ResponsiveDialogTrigger(props: Omit<ComponentProps<typeof DialogTrigger>, "handle">): import("react").JSX.Element;
 export declare function ResponsiveDialogClose({ className, children, variant, size, tone, iconOnly, ...props }: DialogCloseProps): import("react").JSX.Element;
-export declare function ResponsiveDialogContent({ className, dialogClassName, drawerClassName, children, showCloseButton, ...props }: ResponsiveDialogContentProps): import("react").JSX.Element;
+export declare function ResponsiveDialogContent({ className, dialogClassName, drawerClassName, children, showCloseButton, closeLabel, ...props }: ResponsiveDialogContentProps): import("react").JSX.Element;
 export declare function ResponsiveDialogHeader(props: ComponentProps<typeof DialogHeader>): import("react").JSX.Element;
 export declare function ResponsiveDialogFooter(props: ComponentProps<typeof DialogFooter>): import("react").JSX.Element;
 export declare function ResponsiveDialogTitle(props: ComponentProps<typeof DialogTitle>): import("react").JSX.Element;

package/dist/ui/responsive-dialog.js

@@ -1,8 +1,9 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { Button } from "./button.js";
+import { PopupCloseButton } from "../popup-parts.js";
+import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./drawer.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./dialog.js";
-import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./drawer.js";
 import { createContext, useContext, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ui/responsive-dialog.tsx
@@ -73,36 +74,21 @@ function ResponsiveDialogClose({ className, children, variant = "surface", size
 		})
 	});
 }
-function ResponsiveDialogContent({ className, dialogClassName, drawerClassName, children, showCloseButton = true, ...props }) {
+function ResponsiveDialogContent({ className, dialogClassName, drawerClassName, children, showCloseButton = true, closeLabel = "Close", ...props }) {
 	if (!useResponsiveDialogContext()) return /* @__PURE__ */ jsx(DialogContent, {
 		className: cn(className, dialogClassName),
 		showCloseButton,
+		closeLabel,
 		...props,
 		children
 	});
 	return /* @__PURE__ */ jsxs(DrawerContent, {
-		className: cn("relative pb-[max(1rem,env(safe-area-inset-bottom))]", className, drawerClassName),
+		className: cn("relative", className, drawerClassName),
 		...props,
-		children: [children, showCloseButton ? /* @__PURE__ */ jsxs(ResponsiveDialogClose, {
-			variant: "ghost",
-			size: "xs",
-			className: "absolute right-3 top-3 w-[var(--control-h-xs)] px-0",
-			children: [/* @__PURE__ */ jsx("svg", {
-				viewBox: "0 0 16 16",
-				className: "size-4",
-				"aria-hidden": "true",
-				fill: "none",
-				children: /* @__PURE__ */ jsx("path", {
-					d: "M4 4 12 12M12 4 4 12",
-					stroke: "currentColor",
-					strokeWidth: "1.4",
-					strokeLinecap: "round"
-				})
-			}), /* @__PURE__ */ jsx("span", {
-				className: "sr-only",
-				children: "Close"
-			})]
-		}) : null]
+		children: [/* @__PURE__ */ jsx(DrawerBody, {
+			padding: "none",
+			children
+		}), showCloseButton ? /* @__PURE__ */ jsx(DrawerClose, { render: /* @__PURE__ */ jsx(PopupCloseButton, { label: closeLabel }) }) : null]
 	});
 }
 function ResponsiveDialogHeader(props) {

package/dist/ui/rich-tooltip.d.ts

@@ -30,9 +30,10 @@ export type RichTooltipProps = Omit<ComponentProps<typeof Popover.Root>, "modal"
   tone?: RichTooltipTone;
   storageKey?: string;
   dismissOnOutsidePress?: boolean;
+  dismissOnFocusOut?: boolean;
   trapFocus?: boolean;
 };
-export declare function RichTooltip({ step, tone, storageKey, dismissOnOutsidePress, trapFocus, open, defaultOpen, onOpenChange, children, ...props }: RichTooltipProps): import("react").JSX.Element;
+export declare function RichTooltip({ step, tone, storageKey, dismissOnOutsidePress, dismissOnFocusOut, trapFocus, open, defaultOpen, onOpenChange, children, ...props }: RichTooltipProps): import("react").JSX.Element;
 export declare function RichTooltipTrigger({ className, ...props }: ComponentProps<typeof Popover.Trigger> & {
   style?: CSSProperties & PopupKnobStyle;
 }): import("react").JSX.Element;
@@ -69,13 +70,18 @@ export type RichTooltipProgressProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
 };
 export declare function RichTooltipProgress({ className, variant, children, ...props }: RichTooltipProgressProps): import("react").JSX.Element | null;
-export declare function RichTooltipPrevious({ className, children, onClick, ...props }: Omit<ComponentProps<"button">, "style"> & {
+export declare function RichTooltipPrevious({ className, children, label, onClick, ...props }: Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
+  label?: string;
 }): import("react").JSX.Element | null;
-export declare function RichTooltipNext({ className, children, onClick, ...props }: Omit<ComponentProps<"button">, "style"> & {
+export declare function RichTooltipNext({ className, children, nextLabel, finishLabel, gotItLabel, onClick, ref, ...props }: Omit<ComponentProps<"button">, "style"> & {
   style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
+  nextLabel?: string;
+  finishLabel?: string;
+  gotItLabel?: string;
 }): import("react").JSX.Element;
-export declare function RichTooltipClose({ className, children, ...props }: Omit<ComponentProps<typeof Popover.Close>, "style"> & {
+export declare function RichTooltipClose({ className, children, label, ...props }: Omit<ComponentProps<typeof Popover.Close>, "style"> & {
   style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
+  label?: string;
 }): import("react").JSX.Element;
 //#endregion

package/dist/ui/rich-tooltip.js

@@ -2,10 +2,12 @@
 import { cn } from "../lib/cn.js";
 import { controlEffectsAttribute } from "../skin.js";
 import { useSkin } from "../skin-provider.js";
+import { prefersReducedMotion } from "../lib/motion.js";
+import { PopupArrowShape } from "../popup-parts.js";
 import { stepAfter, stepBefore, tourPosition } from "./rich-tooltip-tour.js";
-import { createContext, useContext, useEffect, useState } from "react";
+import { createContext, useContext, useEffect, useId, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { ChevronLeftIcon, ChevronRightIcon, XIcon } from "lucide-react";
+import { CheckIcon, ChevronLeftIcon, ChevronRightIcon, XIcon } from "lucide-react";
 import { Popover } from "@base-ui/react/popover";
 //#region src/ui/rich-tooltip.tsx
 const TourContext = createContext(null);
@@ -66,11 +68,14 @@ function useRichTooltipContext() {
 	if (!context) throw new Error("RichTooltip parts must be rendered inside <RichTooltip>.");
 	return context;
 }
-function RichTooltip({ step, tone = "accent", storageKey, dismissOnOutsidePress = false, trapFocus = false, open, defaultOpen = true, onOpenChange, children, ...props }) {
+function RichTooltip({ step, tone = "accent", storageKey, dismissOnOutsidePress = false, dismissOnFocusOut = false, trapFocus = false, open, defaultOpen = true, onOpenChange, children, ...props }) {
 	const tour = useTour();
 	const inTour = tour !== null && step !== void 0;
 	const [standaloneOpen, setStandaloneOpen] = useState(defaultOpen);
 	const standaloneAllowed = useSeenGate(storageKey, open === void 0 && !inTour);
+	const nextRef = useRef(null);
+	const [descriptionId, setDescriptionId] = useState();
+	const [progressId, setProgressId] = useState();
 	const resolvedOpen = open ?? (inTour ? tour.activeStep === step : standaloneOpen && standaloneAllowed);
 	function dismiss() {
 		if (inTour) {
@@ -82,12 +87,19 @@ function RichTooltip({ step, tone = "accent", storageKey, dismissOnOutsidePress
 	}
 	const handleOpenChange = (nextOpen, details) => {
 		if (!dismissOnOutsidePress && details.reason === "outside-press") return;
+		if (!dismissOnFocusOut && details.reason === "focus-out") return;
 		onOpenChange?.(nextOpen, details);
 		if (!nextOpen) dismiss();
 	};
 	const context = {
 		tone,
-		dismiss
+		inTour,
+		dismiss,
+		nextRef,
+		descriptionId,
+		setDescriptionId,
+		progressId,
+		setProgressId
 	};
 	return /* @__PURE__ */ jsx(RichTooltipContext.Provider, {
 		value: context,
@@ -122,11 +134,10 @@ function useAnchorScroll(anchor, open, enabled) {
 		if (!(open && enabled)) return;
 		const element = resolveAnchorElement(anchor);
 		if (!element) return;
-		const reduced = globalThis.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
 		element.scrollIntoView({
 			block: "center",
 			inline: "nearest",
-			behavior: reduced ? "auto" : "smooth"
+			behavior: prefersReducedMotion(element) ? "auto" : "smooth"
 		});
 	}, [
 		anchor,
@@ -134,11 +145,20 @@ function useAnchorScroll(anchor, open, enabled) {
 		open
 	]);
 }
+const richTooltipContentSelector = "[data-control-ui=\"rich-tooltip\"][data-slot=\"content\"]";
 function RichTooltipContent({ className, children, side = "bottom", align = "center", sideOffset = 10, anchor, collisionPadding = 12, arrow = true, scrollAnchorIntoView = true, ...props }) {
 	const skin = useSkin();
-	const { tone } = useRichTooltipContext();
+	const { tone, inTour, nextRef, descriptionId, progressId } = useRichTooltipContext();
 	const isSurface = tone === "surface";
 	useAnchorScroll(anchor, true, scrollAnchorIntoView);
+	const describedBy = [descriptionId, progressId].filter(Boolean).join(" ") || void 0;
+	const initialFocus = (openType) => {
+		const active = document.activeElement;
+		const openedWithoutInteraction = !openType;
+		const focusIsElsewhere = active !== null && active !== document.body && active.closest(richTooltipContentSelector) === null;
+		if (openedWithoutInteraction && focusIsElsewhere) return false;
+		return inTour && nextRef.current ? nextRef.current : true;
+	};
 	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
 		"data-control-ui": "rich-tooltip",
 		"data-popup-kind": "rich-tooltip",
@@ -161,6 +181,8 @@ function RichTooltipContent({ className, children, side = "bottom", align = "cen
 			"data-surface": isSurface ? "floating" : void 0,
 			"data-popup-part": isSurface ? "surface" : void 0,
 			className: cn("relative grid w-80 max-w-[calc(100vw-2rem)]", className),
+			initialFocus,
+			"aria-describedby": describedBy,
 			...props,
 			children: [children, arrow ? /* @__PURE__ */ jsx(Popover.Arrow, {
 				"data-control-ui": "rich-tooltip",
@@ -168,24 +190,12 @@ function RichTooltipContent({ className, children, side = "bottom", align = "cen
 				"data-control-family": "popup",
 				"data-slot": "arrow",
 				"data-tone": tone,
-				className: cn("flex", "data-[side=top]:-bottom-[8px]", "data-[side=bottom]:-top-[8px]", "data-[side=left]:-right-[10px]", "data-[side=right]:-left-[10px]"),
-				children: /* @__PURE__ */ jsx(RichTooltipArrowSvg, {})
+				className: "flex",
+				children: /* @__PURE__ */ jsx(PopupArrowShape, {})
 			}) : null]
 		})
 	}) });
 }
-function RichTooltipArrowSvg() {
-	return /* @__PURE__ */ jsx("svg", {
-		"aria-hidden": "true",
-		focusable: "false",
-		width: "12",
-		height: "8",
-		viewBox: "0 0 12 8",
-		fill: "none",
-		overflow: "visible",
-		children: /* @__PURE__ */ jsx("path", { d: "M0 7L4 2Q6 0 8 2L12 7L12 8L0 8Z" })
-	});
-}
 function RichTooltipMedia({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-control-ui": "rich-tooltip",
@@ -217,8 +227,15 @@ function RichTooltipTitle({ className, ...props }) {
 	});
 }
 function RichTooltipDescription({ className, ...props }) {
-	const { tone } = useRichTooltipContext();
+	const { tone, setDescriptionId } = useRichTooltipContext();
+	const generatedId = useId();
+	const id = props.id ?? generatedId;
+	useEffect(() => {
+		setDescriptionId(id);
+		return () => setDescriptionId(void 0);
+	}, [id, setDescriptionId]);
 	return /* @__PURE__ */ jsx(Popover.Description, {
+		id,
 		"data-control-ui": "rich-tooltip",
 		"data-control-family": "popup",
 		"data-popup-kind": "rich-tooltip",
@@ -239,9 +256,20 @@ function RichTooltipFooter({ className, ...props }) {
 	});
 }
 function RichTooltipProgress({ className, variant = "count", children, ...props }) {
-	const { tone } = useRichTooltipContext();
+	const { tone, setProgressId } = useRichTooltipContext();
 	const tour = useTour();
-	if (!tour || tour.total < 2 || tour.index < 0) return null;
+	const statusId = useId();
+	const rendered = tour !== null && tour.total >= 2 && tour.index >= 0;
+	useEffect(() => {
+		if (!rendered) return;
+		setProgressId(statusId);
+		return () => setProgressId(void 0);
+	}, [
+		rendered,
+		statusId,
+		setProgressId
+	]);
+	if (!tour || !rendered) return null;
 	return /* @__PURE__ */ jsxs("div", {
 		"data-control-ui": "rich-tooltip",
 		"data-control-family": "popup",
@@ -252,6 +280,7 @@ function RichTooltipProgress({ className, variant = "count", children, ...props
 		className: cn("flex items-center", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
+			id: statusId,
 			className: "sr-only",
 			children: `Step ${tour.index + 1} of ${tour.total}`
 		}), children ?? (variant === "dots" ? Array.from({ length: tour.total }, (_, dot) => /* @__PURE__ */ jsx("span", {
@@ -267,8 +296,12 @@ function RichTooltipProgress({ className, variant = "count", children, ...props
 		}))]
 	});
 }
+function assignRef(ref, node) {
+	if (typeof ref === "function") ref(node);
+	else if (ref) ref.current = node;
+}
 const actionClasses = "inline-flex shrink-0 cursor-pointer items-center justify-center disabled:pointer-events-none [&_svg]:size-4";
-function RichTooltipPrevious({ className, children, onClick, ...props }) {
+function RichTooltipPrevious({ className, children, label = "Previous step", onClick, ...props }) {
 	const tour = useTour();
 	if (!tour || tour.total < 2) return null;
 	return /* @__PURE__ */ jsx("button", {
@@ -277,6 +310,7 @@ function RichTooltipPrevious({ className, children, onClick, ...props }) {
 		"data-control-family": "popup",
 		"data-popup-kind": "rich-tooltip",
 		"data-slot": "previous",
+		"data-icon-only": children === void 0 ? "true" : void 0,
 		disabled: tour.isFirst,
 		onClick: (event) => {
 			onClick?.(event);
@@ -284,21 +318,30 @@ function RichTooltipPrevious({ className, children, onClick, ...props }) {
 		},
 		className: cn(actionClasses, className),
 		...props,
-		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChevronLeftIcon, {
+			"aria-hidden": "true",
+			"data-icon-dir": "inline"
+		}), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
-			children: "Previous step"
+			children: label
 		})] })
 	});
 }
-function RichTooltipNext({ className, children, onClick, ...props }) {
-	const { dismiss } = useRichTooltipContext();
+function RichTooltipNext({ className, children, nextLabel = "Next step", finishLabel = "Finish", gotItLabel = "Got it", onClick, ref, ...props }) {
+	const { dismiss, nextRef } = useRichTooltipContext();
 	const tour = useTour();
+	const setRef = (node) => {
+		nextRef.current = node;
+		assignRef(ref, node);
+	};
 	return /* @__PURE__ */ jsx("button", {
 		type: "button",
 		"data-control-ui": "rich-tooltip",
 		"data-control-family": "popup",
 		"data-popup-kind": "rich-tooltip",
 		"data-slot": "next",
+		"data-icon-only": children === void 0 && tour ? "true" : void 0,
+		ref: setRef,
 		onClick: (event) => {
 			onClick?.(event);
 			if (event.defaultPrevented) return;
@@ -309,21 +352,26 @@ function RichTooltipNext({ className, children, onClick, ...props }) {
 		...props,
 		children: children ?? (tour ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
 			className: "sr-only",
-			children: tour.isLast ? "Finish" : "Next step"
-		}), /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true" })] }) : "Got it")
+			children: tour.isLast ? finishLabel : nextLabel
+		}), tour.isLast ? /* @__PURE__ */ jsx(CheckIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRightIcon, {
+			"aria-hidden": "true",
+			"data-icon-dir": "inline"
+		})] }) : gotItLabel)
 	});
 }
-function RichTooltipClose({ className, children, ...props }) {
+function RichTooltipClose({ className, children, label, ...props }) {
+	const { inTour } = useRichTooltipContext();
 	return /* @__PURE__ */ jsx(Popover.Close, {
 		"data-control-ui": "rich-tooltip",
 		"data-control-family": "popup",
 		"data-popup-kind": "rich-tooltip",
 		"data-slot": "close",
+		"data-icon-only": children === void 0 ? "true" : void 0,
 		className: cn(actionClasses, className),
 		...props,
 		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
-			children: "Dismiss"
+			children: label ?? (inTour ? "End tour" : "Dismiss")
 		})] })
 	});
 }

package/dist/ui/scroll-area.d.ts

@@ -1,6 +1,7 @@
 import { ScrollAreaKnobStyle } from "../knob-contracts/scroll-area-knobs.js";
 import { ProgressiveBlurProps } from "./progressive-blur.js";
 import { CSSProperties, ComponentProps, Ref } from "react";
+import { ScrollArea as ScrollArea$1 } from "@base-ui/react/scroll-area";
 //#region src/ui/scroll-area.d.ts
 export declare const scrollAreaScrollbarVisibilities: readonly ["scroll", "hover", "always"];
 export type ScrollAreaScrollbarVisibility = (typeof scrollAreaScrollbarVisibilities)[number];
@@ -9,11 +10,13 @@ export type ScrollAreaViewportProps = Omit<ComponentProps<"div">, "children" | "
   "data-control-ui"?: string;
   "data-control-family"?: string;
   "data-slot"?: string;
+  render?: ComponentProps<typeof ScrollArea$1.Viewport>["render"];
 };
 export type ScrollAreaProps = Omit<ComponentProps<"div">, "style"> & {
   style?: CSSProperties & ScrollAreaKnobStyle;
 } & {
   viewportClassName?: string;
+  contentClassName?: string;
   viewportProps?: ScrollAreaViewportProps;
   viewportRef?: Ref<HTMLDivElement>;
   maxHeight?: string;
@@ -23,5 +26,5 @@ export type ScrollAreaProps = Omit<ComponentProps<"div">, "style"> & {
   lockAxis?: ScrollAreaLockAxis;
   scrollbarVisibility?: ScrollAreaScrollbarVisibility;
 };
-export declare function ScrollArea({ className, viewportClassName, viewportProps, viewportRef, maxHeight, mask, blur, blurProps, lockAxis, scrollbarVisibility, children, style, ...props }: ScrollAreaProps): import("react").JSX.Element;
+export declare function ScrollArea({ className, viewportClassName, contentClassName, viewportProps, viewportRef, maxHeight, mask, blur, blurProps, lockAxis, scrollbarVisibility, children, style, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ...props }: ScrollAreaProps): import("react").JSX.Element;
 //#endregion