@ctrl-ui/react 0.8.0

package/dist/ui/resizable.js

@@ -0,0 +1,82 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { createContext, useContext } 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,
+		children: /* @__PURE__ */ jsx(Group, {
+			"data-control-ui": "resizable",
+			"data-control-family": "resizable",
+			"data-slot": "panel-group",
+			"data-surface": "panel",
+			"data-variant": variant,
+			orientation,
+			className: cn("flex h-full w-full", className),
+			...props,
+			children
+		})
+	});
+}
+function ResizablePanel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Panel, {
+		"data-control-ui": "resizable",
+		"data-control-family": "resizable",
+		"data-slot": "panel",
+		className,
+		...props
+	});
+}
+function ResizableHandle({ className, variant = "solid", withHandle, children, ...props }) {
+	const axis = useContext(OrientationContext) === "horizontal" ? "vertical" : "horizontal";
+	return /* @__PURE__ */ jsxs(Separator, {
+		"data-control-ui": "resizable",
+		"data-control-family": "resizable",
+		"data-slot": "handle",
+		"data-variant": variant,
+		"data-axis": axis,
+		className: cn("relative flex items-center justify-center", axis === "vertical" ? "w-px" : "h-px", className),
+		...props,
+		children: [withHandle ? /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "resizable",
+			"data-control-family": "resizable",
+			"data-slot": "handle-grip",
+			"data-variant": variant,
+			"data-axis": axis,
+			className: "absolute top-1/2 left-1/2 z-10 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center",
+			children: /* @__PURE__ */ jsx(GripIcon, { className: axis === "horizontal" ? "rotate-90" : void 0 })
+		}) : null, children]
+	});
+}
+function GripIcon({ className }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 4 16",
+		width: "4",
+		height: "16",
+		fill: "currentColor",
+		"aria-hidden": "true",
+		className,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "2",
+				cy: "3",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "2",
+				cy: "8",
+				r: "1"
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "2",
+				cy: "13",
+				r: "1"
+			})
+		]
+	});
+}
+//#endregion
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

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

@@ -0,0 +1,18 @@
+import { DialogCloseProps, DialogContentProps, DialogDescription, DialogFooter, DialogHeader, DialogProps, DialogTitle, DialogTrigger } from "./dialog.js";
+import { ComponentProps } from "react";
+//#region src/ui/responsive-dialog.d.ts
+type ResponsiveDialogProps = DialogProps;
+type ResponsiveDialogContentProps = DialogContentProps & {
+  dialogClassName?: string;
+  drawerClassName?: string;
+};
+declare function ResponsiveDialog({ open: controlledOpen, defaultOpen, onOpenChange, children }: ResponsiveDialogProps): import("react").JSX.Element;
+declare function ResponsiveDialogTrigger(props: Omit<ComponentProps<typeof DialogTrigger>, "handle">): import("react").JSX.Element;
+declare function ResponsiveDialogClose({ className, children, variant, size, tone, iconOnly, ...props }: DialogCloseProps): import("react").JSX.Element;
+declare function ResponsiveDialogContent({ className, dialogClassName, drawerClassName, children, showCloseButton, ...props }: ResponsiveDialogContentProps): import("react").JSX.Element;
+declare function ResponsiveDialogHeader(props: ComponentProps<typeof DialogHeader>): import("react").JSX.Element;
+declare function ResponsiveDialogFooter(props: ComponentProps<typeof DialogFooter>): import("react").JSX.Element;
+declare function ResponsiveDialogTitle(props: ComponentProps<typeof DialogTitle>): import("react").JSX.Element;
+declare function ResponsiveDialogDescription(props: ComponentProps<typeof DialogDescription>): import("react").JSX.Element;
+//#endregion
+export { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogContentProps, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogProps, ResponsiveDialogTitle, ResponsiveDialogTrigger };

package/dist/ui/responsive-dialog.js

@@ -0,0 +1,121 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.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
+const MOBILE_QUERY = "(max-width: 767px)";
+const ResponsiveDialogContext = createContext(null);
+function subscribeToMobileDialog(onStoreChange) {
+	const query = window.matchMedia(MOBILE_QUERY);
+	query.addEventListener("change", onStoreChange);
+	return () => query.removeEventListener("change", onStoreChange);
+}
+function getMobileDialogSnapshot() {
+	return window.matchMedia(MOBILE_QUERY).matches;
+}
+function getMobileDialogServerSnapshot() {
+	return false;
+}
+function useResponsiveDialogContext() {
+	const isMobile = useContext(ResponsiveDialogContext);
+	if (isMobile === null) throw new Error("Responsive dialog parts must be used within ResponsiveDialog");
+	return isMobile;
+}
+function ResponsiveDialog({ open: controlledOpen, defaultOpen = false, onOpenChange, children }) {
+	const isMobile = useSyncExternalStore(subscribeToMobileDialog, getMobileDialogSnapshot, getMobileDialogServerSnapshot);
+	const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+	const open = controlledOpen ?? uncontrolledOpen;
+	function handleOpenChange(nextOpen, eventDetails) {
+		if (controlledOpen === void 0) setUncontrolledOpen(nextOpen);
+		onOpenChange?.(nextOpen, eventDetails);
+	}
+	return /* @__PURE__ */ jsx(ResponsiveDialogContext.Provider, {
+		value: isMobile,
+		children: isMobile ? /* @__PURE__ */ jsx(Drawer, {
+			open,
+			onOpenChange: handleOpenChange,
+			side: "bottom",
+			children
+		}) : /* @__PURE__ */ jsx(Dialog, {
+			open,
+			onOpenChange: handleOpenChange,
+			children
+		})
+	});
+}
+function ResponsiveDialogTrigger(props) {
+	return useResponsiveDialogContext() ? /* @__PURE__ */ jsx(DrawerTrigger, { ...props }) : /* @__PURE__ */ jsx(DialogTrigger, { ...props });
+}
+function ResponsiveDialogClose({ className, children, variant = "surface", size = "sm", tone = "neutral", iconOnly, ...props }) {
+	if (!useResponsiveDialogContext()) return /* @__PURE__ */ jsx(DialogClose, {
+		className,
+		variant,
+		size,
+		tone,
+		iconOnly,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsx(DrawerClose, {
+		...props,
+		render: (renderProps) => /* @__PURE__ */ jsx(Button, {
+			...renderProps,
+			"data-popup-part": "close",
+			variant,
+			size,
+			tone,
+			iconOnly,
+			className: cn(renderProps.className, className),
+			children
+		})
+	});
+}
+function ResponsiveDialogContent({ className, dialogClassName, drawerClassName, children, showCloseButton = true, ...props }) {
+	if (!useResponsiveDialogContext()) return /* @__PURE__ */ jsx(DialogContent, {
+		className: cn(className, dialogClassName),
+		showCloseButton,
+		...props,
+		children
+	});
+	return /* @__PURE__ */ jsxs(DrawerContent, {
+		className: cn("relative pb-[max(1rem,env(safe-area-inset-bottom))]", 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]
+	});
+}
+function ResponsiveDialogHeader(props) {
+	return useResponsiveDialogContext() ? /* @__PURE__ */ jsx(DrawerHeader, { ...props }) : /* @__PURE__ */ jsx(DialogHeader, { ...props });
+}
+function ResponsiveDialogFooter(props) {
+	return useResponsiveDialogContext() ? /* @__PURE__ */ jsx(DrawerFooter, { ...props }) : /* @__PURE__ */ jsx(DialogFooter, { ...props });
+}
+function ResponsiveDialogTitle(props) {
+	return useResponsiveDialogContext() ? /* @__PURE__ */ jsx(DrawerTitle, { ...props }) : /* @__PURE__ */ jsx(DialogTitle, { ...props });
+}
+function ResponsiveDialogDescription(props) {
+	return useResponsiveDialogContext() ? /* @__PURE__ */ jsx(DrawerDescription, { ...props }) : /* @__PURE__ */ jsx(DialogDescription, { ...props });
+}
+//#endregion
+export { ResponsiveDialog, ResponsiveDialogClose, ResponsiveDialogContent, ResponsiveDialogDescription, ResponsiveDialogFooter, ResponsiveDialogHeader, ResponsiveDialogTitle, ResponsiveDialogTrigger };

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

@@ -0,0 +1,12 @@
+//#region src/ui/rich-tooltip-tour.d.ts
+type TourPosition = {
+  index: number;
+  total: number;
+  isFirst: boolean;
+  isLast: boolean;
+};
+declare function tourPosition(steps: readonly string[], activeStep: string | null): TourPosition;
+declare function stepAfter(steps: readonly string[], index: number): string | null;
+declare function stepBefore(steps: readonly string[], index: number): string | null;
+//#endregion
+export { TourPosition, stepAfter, stepBefore, tourPosition };

package/dist/ui/rich-tooltip-tour.js

@@ -0,0 +1,20 @@
+//#region src/ui/rich-tooltip-tour.ts
+function tourPosition(steps, activeStep) {
+	const index = activeStep === null ? -1 : steps.indexOf(activeStep);
+	return {
+		index,
+		total: steps.length,
+		isFirst: index <= 0,
+		isLast: index >= 0 && index === steps.length - 1
+	};
+}
+function stepAfter(steps, index) {
+	if (index < 0) return null;
+	return steps[index + 1] ?? null;
+}
+function stepBefore(steps, index) {
+	if (index < 0) return null;
+	return steps[Math.max(0, index - 1)] ?? null;
+}
+//#endregion
+export { stepAfter, stepBefore, tourPosition };

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

@@ -0,0 +1,83 @@
+import { PopupKnobStyle } from "../knob-contracts/popup-knobs.js";
+import { RichTooltipKnobStyle } from "../knob-contracts/rich-tooltip-knobs.js";
+import { TourPosition } from "./rich-tooltip-tour.js";
+import { CSSProperties, ComponentProps, ReactNode } from "react";
+import { Popover } from "@base-ui/react/popover";
+//#region src/ui/rich-tooltip.d.ts
+type RichTooltipTone = "accent" | "surface";
+type RichTooltipProgressVariant = "count" | "dots";
+type RichTooltipContentKnobStyle = RichTooltipKnobStyle & PopupKnobStyle;
+type TourValue = TourPosition & {
+  activeStep: string | null;
+  next: () => void;
+  previous: () => void;
+  goTo: (step: string) => void;
+  finish: () => void;
+};
+/** Null outside `<RichTooltipTour>` — single-use rich tooltips read it and skip their step affordances. */
+declare function useTour(): TourValue | null;
+type RichTooltipTourProps = {
+  steps: readonly string[];
+  step?: string | null;
+  defaultStep?: string;
+  onStepChange?: (step: string | null) => void;
+  onComplete?: () => void;
+  storageKey?: string;
+  children?: ReactNode;
+};
+declare function RichTooltipTour({ steps, step, defaultStep, onStepChange, onComplete, storageKey, children }: RichTooltipTourProps): import("react").JSX.Element;
+type RichTooltipProps = Omit<ComponentProps<typeof Popover.Root>, "modal"> & {
+  step?: string;
+  tone?: RichTooltipTone;
+  storageKey?: string;
+  dismissOnOutsidePress?: boolean;
+  trapFocus?: boolean;
+};
+declare function RichTooltip({ step, tone, storageKey, dismissOnOutsidePress, trapFocus, open, defaultOpen, onOpenChange, children, ...props }: RichTooltipProps): import("react").JSX.Element;
+declare function RichTooltipTrigger({ className, ...props }: ComponentProps<typeof Popover.Trigger> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+type AnchorProp = ComponentProps<typeof Popover.Positioner>["anchor"];
+type RichTooltipContentProps = Omit<ComponentProps<typeof Popover.Popup>, "style"> & {
+  style?: CSSProperties & RichTooltipContentKnobStyle;
+} & {
+  side?: ComponentProps<typeof Popover.Positioner>["side"];
+  align?: ComponentProps<typeof Popover.Positioner>["align"];
+  sideOffset?: number;
+  anchor?: AnchorProp;
+  collisionPadding?: ComponentProps<typeof Popover.Positioner>["collisionPadding"];
+  arrow?: boolean;
+  scrollAnchorIntoView?: boolean;
+};
+declare function RichTooltipContent({ className, children, side, align, sideOffset, anchor, collisionPadding, arrow, scrollAnchorIntoView, ...props }: RichTooltipContentProps): import("react").JSX.Element;
+declare function RichTooltipMedia({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function RichTooltipHeader({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function RichTooltipTitle({ className, ...props }: Omit<ComponentProps<typeof Popover.Title>, "style"> & {
+  style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function RichTooltipDescription({ className, ...props }: Omit<ComponentProps<typeof Popover.Description>, "style"> & {
+  style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function RichTooltipFooter({ className, ...props }: ComponentProps<"div"> & {
+  style?: CSSProperties & PopupKnobStyle;
+}): import("react").JSX.Element;
+type RichTooltipProgressProps = Omit<ComponentProps<"div">, "style"> & {
+  variant?: RichTooltipProgressVariant;
+  style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
+};
+declare function RichTooltipProgress({ className, variant, children, ...props }: RichTooltipProgressProps): import("react").JSX.Element | null;
+declare function RichTooltipPrevious({ className, children, onClick, ...props }: Omit<ComponentProps<"button">, "style"> & {
+  style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
+}): import("react").JSX.Element | null;
+declare function RichTooltipNext({ className, children, onClick, ...props }: Omit<ComponentProps<"button">, "style"> & {
+  style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
+}): import("react").JSX.Element;
+declare function RichTooltipClose({ className, children, ...props }: Omit<ComponentProps<typeof Popover.Close>, "style"> & {
+  style?: CSSProperties & RichTooltipKnobStyle & PopupKnobStyle;
+}): import("react").JSX.Element;
+//#endregion
+export { RichTooltip, RichTooltipClose, RichTooltipContent, RichTooltipContentProps, RichTooltipDescription, RichTooltipFooter, RichTooltipHeader, RichTooltipMedia, RichTooltipNext, RichTooltipPrevious, RichTooltipProgress, RichTooltipProgressProps, RichTooltipProgressVariant, RichTooltipProps, RichTooltipTitle, RichTooltipTone, RichTooltipTour, RichTooltipTourProps, RichTooltipTrigger, useTour };

package/dist/ui/rich-tooltip.js

@@ -0,0 +1,331 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { skinEffects, skinId } from "../skin.js";
+import { stepAfter, stepBefore, tourPosition } from "./rich-tooltip-tour.js";
+import { createContext, useContext, useEffect, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon, XIcon } from "lucide-react";
+import { Popover } from "@base-ui/react/popover";
+//#region src/ui/rich-tooltip.tsx
+const TourContext = createContext(null);
+/** Null outside `<RichTooltipTour>` — single-use rich tooltips read it and skip their step affordances. */
+function useTour() {
+	return useContext(TourContext);
+}
+function readSeen(storageKey) {
+	if (!storageKey) return false;
+	try {
+		return globalThis.localStorage?.getItem(storageKey) === "seen";
+	} catch {
+		return false;
+	}
+}
+function writeSeen(storageKey) {
+	if (!storageKey) return;
+	try {
+		globalThis.localStorage?.setItem(storageKey, "seen");
+	} catch {}
+}
+/** Starts closed so the server and first client pass agree, then opens once storage has been read. */
+function useSeenGate(storageKey, enabled) {
+	const [allowed, setAllowed] = useState(false);
+	useEffect(() => {
+		if (!enabled) return;
+		setAllowed(!readSeen(storageKey));
+	}, [enabled, storageKey]);
+	return allowed;
+}
+function RichTooltipTour({ steps, step, defaultStep, onStepChange, onComplete, storageKey, children }) {
+	const [uncontrolledStep, setUncontrolledStep] = useState(defaultStep ?? steps[0] ?? null);
+	const uncontrolledActiveStep = useSeenGate(storageKey, step === void 0) ? uncontrolledStep : null;
+	const activeStep = step === void 0 ? uncontrolledActiveStep : step;
+	function setStep(next) {
+		if (step === void 0) setUncontrolledStep(next);
+		onStepChange?.(next);
+		if (next === null) {
+			writeSeen(storageKey);
+			onComplete?.();
+		}
+	}
+	const position = tourPosition(steps, activeStep);
+	const value = {
+		activeStep,
+		...position,
+		next: () => setStep(stepAfter(steps, position.index)),
+		previous: () => setStep(stepBefore(steps, position.index)),
+		goTo: (target) => setStep(target),
+		finish: () => setStep(null)
+	};
+	return /* @__PURE__ */ jsx(TourContext.Provider, {
+		value,
+		children
+	});
+}
+const RichTooltipContext = createContext(null);
+function useRichTooltipContext() {
+	const context = useContext(RichTooltipContext);
+	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 }) {
+	const tour = useTour();
+	const inTour = tour !== null && step !== void 0;
+	const [standaloneOpen, setStandaloneOpen] = useState(defaultOpen);
+	const standaloneAllowed = useSeenGate(storageKey, open === void 0 && !inTour);
+	const resolvedOpen = open ?? (inTour ? tour.activeStep === step : standaloneOpen && standaloneAllowed);
+	function dismiss() {
+		if (inTour) {
+			tour.finish();
+			return;
+		}
+		setStandaloneOpen(false);
+		writeSeen(storageKey);
+	}
+	const handleOpenChange = (nextOpen, details) => {
+		if (!dismissOnOutsidePress && details.reason === "outside-press") return;
+		onOpenChange?.(nextOpen, details);
+		if (!nextOpen) dismiss();
+	};
+	const context = {
+		tone,
+		dismiss
+	};
+	return /* @__PURE__ */ jsx(RichTooltipContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Popover.Root, {
+			open: resolvedOpen,
+			onOpenChange: handleOpenChange,
+			modal: trapFocus ? "trap-focus" : false,
+			...props,
+			children
+		})
+	});
+}
+function RichTooltipTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Trigger, {
+		"data-control-ui": "rich-tooltip",
+		"data-control-family": "popup",
+		"data-popup-kind": "rich-tooltip",
+		"data-slot": "trigger",
+		className,
+		...props
+	});
+}
+function resolveAnchorElement(anchor) {
+	const candidate = typeof anchor === "function" ? anchor() : anchor;
+	if (!candidate) return null;
+	if (candidate instanceof Element) return candidate;
+	if ("current" in candidate) return candidate.current;
+	return null;
+}
+function useAnchorScroll(anchor, open, enabled) {
+	useEffect(() => {
+		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"
+		});
+	}, [
+		anchor,
+		enabled,
+		open
+	]);
+}
+function RichTooltipContent({ className, children, side = "bottom", align = "center", sideOffset = 10, anchor, collisionPadding = 12, arrow = true, scrollAnchorIntoView = true, ...props }) {
+	const { tone } = useRichTooltipContext();
+	const isSurface = tone === "surface";
+	useAnchorScroll(anchor, true, scrollAnchorIntoView);
+	return /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+		"data-control-ui": "rich-tooltip",
+		"data-popup-kind": "rich-tooltip",
+		"data-control-family": "popup",
+		"data-slot": "positioner",
+		"data-skin": skinId(),
+		"data-effects": skinEffects(),
+		side,
+		align,
+		sideOffset,
+		anchor,
+		collisionPadding,
+		className: "z-[80]",
+		children: /* @__PURE__ */ jsxs(Popover.Popup, {
+			"data-control-ui": "rich-tooltip",
+			"data-popup-kind": "rich-tooltip",
+			"data-control-family": "popup",
+			"data-slot": "content",
+			"data-tone": tone,
+			"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),
+			...props,
+			children: [children, arrow ? /* @__PURE__ */ jsx(Popover.Arrow, {
+				"data-control-ui": "rich-tooltip",
+				"data-popup-kind": "rich-tooltip",
+				"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, {})
+			}) : 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",
+		"data-control-family": "popup",
+		"data-popup-kind": "rich-tooltip",
+		"data-slot": "media",
+		className: cn("overflow-hidden [&_img]:w-full [&_img]:object-cover [&_video]:w-full", className),
+		...props
+	});
+}
+function RichTooltipHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "rich-tooltip",
+		"data-control-family": "popup",
+		"data-popup-kind": "rich-tooltip",
+		"data-slot": "header",
+		className: cn("flex items-start justify-between", className),
+		...props
+	});
+}
+function RichTooltipTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Title, {
+		"data-control-ui": "rich-tooltip",
+		"data-control-family": "popup",
+		"data-popup-kind": "rich-tooltip",
+		"data-slot": "title",
+		className,
+		...props
+	});
+}
+function RichTooltipDescription({ className, ...props }) {
+	const { tone } = useRichTooltipContext();
+	return /* @__PURE__ */ jsx(Popover.Description, {
+		"data-control-ui": "rich-tooltip",
+		"data-control-family": "popup",
+		"data-popup-kind": "rich-tooltip",
+		"data-slot": "description",
+		"data-tone": tone,
+		className,
+		...props
+	});
+}
+function RichTooltipFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-control-ui": "rich-tooltip",
+		"data-control-family": "popup",
+		"data-popup-kind": "rich-tooltip",
+		"data-slot": "footer",
+		className: cn("flex items-center justify-between", className),
+		...props
+	});
+}
+function RichTooltipProgress({ className, variant = "count", children, ...props }) {
+	const { tone } = useRichTooltipContext();
+	const tour = useTour();
+	if (!tour || tour.total < 2 || tour.index < 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-control-ui": "rich-tooltip",
+		"data-control-family": "popup",
+		"data-popup-kind": "rich-tooltip",
+		"data-slot": "progress",
+		"data-variant": variant,
+		"data-tone": tone,
+		className: cn("flex items-center", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: `Step ${tour.index + 1} of ${tour.total}`
+		}), children ?? (variant === "dots" ? Array.from({ length: tour.total }, (_, dot) => /* @__PURE__ */ jsx("span", {
+			"data-control-ui": "rich-tooltip",
+			"data-control-family": "popup",
+			"data-popup-kind": "rich-tooltip",
+			"data-slot": "dot",
+			"data-active": dot === tour.index ? "true" : void 0,
+			className: ""
+		}, dot)) : /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: `${tour.index + 1}/${tour.total}`
+		}))]
+	});
+}
+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 }) {
+	const tour = useTour();
+	if (!tour || tour.total < 2) return null;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-control-ui": "rich-tooltip",
+		"data-control-family": "popup",
+		"data-popup-kind": "rich-tooltip",
+		"data-slot": "previous",
+		disabled: tour.isFirst,
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) tour.previous();
+		},
+		className: cn(actionClasses, className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Previous step"
+		})] })
+	});
+}
+function RichTooltipNext({ className, children, onClick, ...props }) {
+	const { dismiss } = useRichTooltipContext();
+	const tour = useTour();
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"data-control-ui": "rich-tooltip",
+		"data-control-family": "popup",
+		"data-popup-kind": "rich-tooltip",
+		"data-slot": "next",
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			if (tour) tour.next();
+			else dismiss();
+		},
+		className: cn(actionClasses, className),
+		...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")
+	});
+}
+function RichTooltipClose({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Popover.Close, {
+		"data-control-ui": "rich-tooltip",
+		"data-control-family": "popup",
+		"data-popup-kind": "rich-tooltip",
+		"data-slot": "close",
+		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"
+		})] })
+	});
+}
+//#endregion
+export { RichTooltip, RichTooltipClose, RichTooltipContent, RichTooltipDescription, RichTooltipFooter, RichTooltipHeader, RichTooltipMedia, RichTooltipNext, RichTooltipPrevious, RichTooltipProgress, RichTooltipTitle, RichTooltipTour, RichTooltipTrigger, useTour };