@soroush.tech/design-system 2.0.0-rc.6 → 2.1.0-alpha.0

package/dist/Tooltip.cjs

@@ -5,7 +5,7 @@ const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
 const require_getSurfaceRadius = require("./getSurfaceRadius-DwOn3ALC.cjs");
 const require_useControlled = require("./useControlled-CzCxM4J3.cjs");
 const require_Portal = require("./Portal.cjs");
-const require_useAnchoredPlacement = require("./useAnchoredPlacement-ee6KzG3t.cjs");
+const require_useAnchoredPlacement = require("./useAnchoredPlacement-BSfjNMut.cjs");
 const require_useMergedRefs = require("./useMergedRefs-BtctsnmX.cjs");
 const require_getTooltipOrigins = require("./getTooltipOrigins-8b5zQafY.cjs");
 let react = require("react");
@@ -25,7 +25,7 @@ const isKeyboardFocus = (event) => {
 * delayed; moving from the child onto the tooltip does not close it, so its text can be read and
 * selected (WCAG 1.4.13); Escape closes it at once.
 */
-function useTooltip({ isOpen: isOpenProp, defaultOpen, onOpen, onClose, enterDelay, leaveDelay, enterTouchDelay, leaveTouchDelay, shouldOpenOnHover, shouldOpenOnFocus, shouldOpenOnTouch }) {
+function useTooltip({ isOpen: isOpenProp, defaultOpen, isAtPoint = false, onOpen, onClose, enterDelay, leaveDelay, enterTouchDelay, leaveTouchDelay, shouldOpenOnHover, shouldOpenOnFocus, shouldOpenOnTouch }) {
 	const [isOpen, setIsOpen] = require_useControlled.useControlled({
 		controlled: isOpenProp,
 		default: defaultOpen
@@ -34,6 +34,7 @@ function useTooltip({ isOpen: isOpenProp, defaultOpen, onOpen, onClose, enterDel
 	const latest = (0, react.useRef)({
 		isOpen,
 		isOpenProp,
+		isAtPoint,
 		onOpen,
 		onClose
 	});
@@ -41,6 +42,7 @@ function useTooltip({ isOpen: isOpenProp, defaultOpen, onOpen, onClose, enterDel
 		latest.current = {
 			isOpen,
 			isOpenProp,
+			isAtPoint,
 			onOpen,
 			onClose
 		};
@@ -51,6 +53,7 @@ function useTooltip({ isOpen: isOpenProp, defaultOpen, onOpen, onClose, enterDel
 		timer.current = window.setTimeout(() => {
 			const current = latest.current;
 			if (current.isOpen === next) return;
+			if (next && current.isAtPoint) return;
 			if (current.isOpenProp === void 0) setIsOpen(next);
 			(next ? current.onOpen : current.onClose)?.(event);
 		}, delay);
@@ -87,6 +90,9 @@ function useTooltip({ isOpen: isOpenProp, defaultOpen, onOpen, onClose, enterDel
 			},
 			onTouchCancel: (event) => {
 				if (shouldOpenOnTouch) ask(false, event, leaveTouchDelay);
+			},
+			onPointerDown: (event) => {
+				if (event.pointerType !== "touch") ask(false, event, 0);
 			}
 		},
 		surfaceHandlers: {
@@ -108,12 +114,14 @@ const TooltipSurface = require_src.styled("div", {
 	label: "Tooltip",
 	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
 		"layer",
+		"isInteractive",
 		"borderRadius",
 		"bg",
 		"textColor"
 	])
-})(({ theme, layer, borderRadius, bg, textColor }) => ({
+})(({ theme, layer, isInteractive, borderRadius, bg, textColor }) => ({
 	position: "fixed",
+	...!isInteractive && { pointerEvents: "none" },
 	top: 0,
 	left: 0,
 	visibility: "hidden",
@@ -130,6 +138,18 @@ const TooltipSurface = require_src.styled("div", {
 	lineHeight: (0, require_src.src_exports.get)(theme, "lineHeights.base"),
 	overflowWrap: "break-word"
 }));
+const TooltipDescription = require_src.styled("span", { label: "TooltipDescription" })({
+	position: "absolute",
+	width: 1,
+	height: 1,
+	margin: -1,
+	padding: 0,
+	border: 0,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	whiteSpace: "nowrap"
+});
+const TooltipTarget = require_src.styled("span", { label: "TooltipTarget" })({ display: "inline-grid" });
 const TooltipArrow = require_src.styled("span", {
 	name: "Tooltip",
 	slot: "arrow",
@@ -186,19 +206,23 @@ const getArrowStyle = ({ side, offset }) => {
 * `shouldDescribeChild`). It opens and closes after their delays, stays open while the pointer is
 * on the tooltip itself, closes on Escape, and never takes or traps the focus.
 */
-function Tooltip({ children, title, placement: placementProp, hasArrow: hasArrowProp, enterDelay: enterDelayProp, leaveDelay: leaveDelayProp, enterTouchDelay: enterTouchDelayProp, leaveTouchDelay: leaveTouchDelayProp, shouldDescribeChild: shouldDescribeChildProp, isOpen: isOpenProp, defaultOpen = false, onOpen, onClose, shouldOpenOnHover: shouldOpenOnHoverProp, shouldOpenOnFocus: shouldOpenOnFocusProp, shouldOpenOnTouch: shouldOpenOnTouchProp, slots, slotProps, layer: layerProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, className, "data-testid": dataTestid }) {
+function Tooltip({ children, anchorPosition, title, placement: placementProp, hasArrow: hasArrowProp, enterDelay: enterDelayProp, leaveDelay: leaveDelayProp, enterTouchDelay: enterTouchDelayProp, leaveTouchDelay: leaveTouchDelayProp, shouldDescribeChild: shouldDescribeChildProp, isDescriptionPersistent: isDescriptionPersistentProp, isOpen: isOpenProp, defaultOpen = false, onOpen, onClose, isInteractive: isInteractiveProp, shouldOpenOnHover: shouldOpenOnHoverProp, shouldOpenOnFocus: shouldOpenOnFocusProp, shouldOpenOnTouch: shouldOpenOnTouchProp, slots, slotProps, layer: layerProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, className, "data-testid": dataTestid }) {
 	const dp = require_theme.useDefaultProps("Tooltip");
 	const placement = placementProp ?? dp.placement ?? "top";
 	const hasArrow = hasArrowProp ?? dp.hasArrow ?? false;
 	const shouldDescribeChild = shouldDescribeChildProp ?? dp.shouldDescribeChild ?? false;
+	const isDescriptionPersistent = isDescriptionPersistentProp ?? dp.isDescriptionPersistent ?? false;
+	const isInteractive = isInteractiveProp ?? dp.isInteractive ?? true;
 	const layer = layerProp ?? dp.layer ?? "tooltip";
 	const borderRadius = borderRadiusProp ?? dp.borderRadius;
 	const bg = bgProp ?? dp.bg;
 	const textColor = textColorProp ?? dp.textColor;
 	const id = (0, react.useId)();
+	const isAtPoint = anchorPosition !== void 0;
 	const { isOpen, childHandlers, surfaceHandlers } = useTooltip({
 		isOpen: isOpenProp,
 		defaultOpen,
+		isAtPoint,
 		onOpen,
 		onClose,
 		enterDelay: enterDelayProp ?? dp.enterDelay ?? 100,
@@ -209,11 +233,14 @@ function Tooltip({ children, title, placement: placementProp, hasArrow: hasArrow
 		shouldOpenOnFocus: shouldOpenOnFocusProp ?? dp.shouldOpenOnFocus ?? true,
 		shouldOpenOnTouch: shouldOpenOnTouchProp ?? dp.shouldOpenOnTouch ?? true
 	});
-	const isShown = isOpen && title !== void 0 && title !== null && title !== "";
+	const hasTitle = title !== void 0 && title !== null && title !== "";
+	const isShown = isOpen && hasTitle;
 	const anchorRef = (0, react.useRef)(null);
+	const noAnchorRef = (0, react.useRef)(null);
 	const surfaceRef = (0, react.useRef)(null);
-	const own = children.props;
-	const ref = require_useMergedRefs.useMergedRefs(anchorRef, own.ref);
+	const own = children?.props ?? {};
+	const isChildDisabled = own.disabled === true;
+	const ref = require_useMergedRefs.useMergedRefs(isChildDisabled ? void 0 : anchorRef, own.ref);
 	const [arrow, setArrow] = (0, react.useState)(null);
 	const getOrigins = (0, react.useCallback)((context) => require_getTooltipOrigins.getTooltipOrigins(require_getTooltipOrigins.resolveTooltipPlacement(placement, context), context.isRtl), [placement]);
 	const onPlaced = (0, react.useCallback)((placed) => {
@@ -223,7 +250,8 @@ function Tooltip({ children, title, placement: placementProp, hasArrow: hasArrow
 	}, [hasArrow]);
 	require_useAnchoredPlacement.useAnchoredPlacement({
 		isOpen: isShown,
-		anchorRef,
+		anchorRef: anchorPosition ? noAnchorRef : anchorRef,
+		anchorPosition,
 		surfaceRef,
 		getOrigins,
 		margin: MARGIN,
@@ -236,33 +264,49 @@ function Tooltip({ children, title, placement: placementProp, hasArrow: hasArrow
 	}]));
 	const ownDescription = own["aria-describedby"];
 	const names = typeof title === "string" && own["aria-label"] === void 0 && own["aria-labelledby"] === void 0 ? { "aria-label": title } : {};
-	const ariaProps = shouldDescribeChild ? { "aria-describedby": isShown ? [ownDescription, id].filter(Boolean).join(" ") : ownDescription } : names;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react.cloneElement)(children, {
-		...handlers,
+	const descriptionId = `${id}-description`;
+	const hasPersistentDescription = children !== void 0 && shouldDescribeChild && isDescriptionPersistent && hasTitle;
+	const describedBy = (shown) => hasPersistentDescription ? [ownDescription, descriptionId].filter(Boolean).join(" ") : [ownDescription, shown ? id : void 0].filter(Boolean).join(" ") || void 0;
+	const ariaProps = shouldDescribeChild ? { "aria-describedby": describedBy(isShown) } : names;
+	const child = children ? (0, react.cloneElement)(children, {
+		...isChildDisabled || isAtPoint ? {} : handlers,
 		...ariaProps,
 		ref
-	}), isShown && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TooltipSurface, {
-		...slotProps?.root,
-		as: slots?.root,
-		ref: surfaceRef,
-		id,
-		role: "tooltip",
-		layer,
-		borderRadius,
-		bg,
-		textColor,
-		className: [slotProps?.root?.className, className].filter(Boolean).join(" ") || void 0,
-		"data-testid": dataTestid ?? slotProps?.root?.["data-testid"],
-		...surfaceHandlers,
-		children: [title, hasArrow && arrow ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipArrow, {
-			...slotProps?.arrow,
-			as: slots?.arrow,
-			style: {
-				...slotProps?.arrow?.style,
-				...getArrowStyle(arrow)
-			},
-			"aria-hidden": "true"
-		}) : null]
-	}) })] });
+	}) : null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		isChildDisabled && !isAtPoint ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTarget, {
+			ref: anchorRef,
+			...handlers,
+			children: child
+		}) : child,
+		hasPersistentDescription && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipDescription, {
+			id: descriptionId,
+			children: title
+		}),
+		isShown && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Portal.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TooltipSurface, {
+			...slotProps?.root,
+			as: slots?.root,
+			ref: surfaceRef,
+			id,
+			role: "tooltip",
+			layer,
+			isInteractive,
+			borderRadius,
+			bg,
+			textColor,
+			className: [slotProps?.root?.className, className].filter(Boolean).join(" ") || void 0,
+			"data-testid": dataTestid ?? slotProps?.root?.["data-testid"],
+			...isAtPoint || !isInteractive ? {} : surfaceHandlers,
+			children: [title, hasArrow && arrow ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipArrow, {
+				...slotProps?.arrow,
+				as: slots?.arrow,
+				style: {
+					...slotProps?.arrow?.style,
+					...getArrowStyle(arrow)
+				},
+				"aria-hidden": "true"
+			}) : null]
+		}) })
+	] });
 }
 exports.Tooltip = Tooltip;

package/dist/Tooltip.d.cts

@@ -1,4 +1,5 @@
-import { nt as Theme } from "./index-Lsm4v8fB.cjs";
+import { nt as Theme } from "./index-DvVQLBZc.cjs";
+import { n as PopoverPosition } from "./computePopoverPosition-JgOwCM7k.cjs";
 import { ElementType, HTMLAttributes, ReactElement, ReactNode, SyntheticEvent } from "react";
 /** A side of its child a tooltip sits on - and, after the dash, which end of that side it lines up with. */
 type FixedTooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
@@ -16,8 +17,17 @@ interface TooltipSlotProps {
   arrow?: SlotProps;
 }
 interface TooltipProps {
-  /** The one element the tooltip is about - it holds a `ref` and takes the handlers. */
-  children: ReactElement;
+  /**
+   * The one element the tooltip is about - it holds a `ref` and takes the handlers. Without it, the
+   * tooltip is at `anchorPosition`, and open when `isOpen` says so.
+   */
+  children?: ReactElement;
+  /**
+   * A point in the window - client coordinates, as Popover's - to place the tooltip at instead of
+   * beside the child: a hint that depends on where the pointer is. It follows the point and the
+   * `title` as they change.
+   */
+  anchorPosition?: PopoverPosition;
   /** What the tooltip says. Nothing says no tooltip. */
   title?: ReactNode;
   /** The side of the child it sits on, and the end it lines up with; `auto` takes the side with the most room. Flips for want of room. Default: `'top'`. */
@@ -38,6 +48,12 @@ interface TooltipProps {
   leaveTouchDelay?: number;
   /** Describes the child (`aria-describedby`, while open) instead of naming it (`aria-label`). Default: `false`. */
   shouldDescribeChild?: boolean;
+  /**
+   * With `shouldDescribeChild`: the child is described the whole time, as by a native `title`, not
+   * only while the tooltip is open. A visually hidden copy of a `title` sits beside the child for it
+   * to point at. Default: `false`.
+   */
+  isDescriptionPersistent?: boolean;
   /** Whether it is shown. Controlled with `onOpen` and `onClose`. */
   isOpen?: boolean;
   /** Whether it is shown at first, when uncontrolled. Default: `false`. */
@@ -46,6 +62,12 @@ interface TooltipProps {
   onOpen?: (event: Event | SyntheticEvent) => void;
   /** Fired when it asks to close. */
   onClose?: (event: Event | SyntheticEvent) => void;
+  /**
+   * Whether the pointer can be moved onto the tooltip, which then stays open (WCAG 1.4.13). With
+   * `false` it takes no pointer events - a click goes to what is under it - and closes as the
+   * pointer leaves the child: for a text hint that holds nothing to use. Default: `true`.
+   */
+  isInteractive?: boolean;
   /** Opens on hover. Default: `true`. */
   shouldOpenOnHover?: boolean;
   /** Opens on keyboard focus. Default: `true`. */
@@ -70,5 +92,5 @@ interface TooltipProps {
  * `shouldDescribeChild`). It opens and closes after their delays, stays open while the pointer is
  * on the tooltip itself, closes on Escape, and never takes or traps the focus.
  */
-declare function Tooltip({ children, title, placement: placementProp, hasArrow: hasArrowProp, enterDelay: enterDelayProp, leaveDelay: leaveDelayProp, enterTouchDelay: enterTouchDelayProp, leaveTouchDelay: leaveTouchDelayProp, shouldDescribeChild: shouldDescribeChildProp, isOpen: isOpenProp, defaultOpen, onOpen, onClose, shouldOpenOnHover: shouldOpenOnHoverProp, shouldOpenOnFocus: shouldOpenOnFocusProp, shouldOpenOnTouch: shouldOpenOnTouchProp, slots, slotProps, layer: layerProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, className, 'data-testid': dataTestid }: Readonly<TooltipProps>): import("react").JSX.Element;
+declare function Tooltip({ children, anchorPosition, title, placement: placementProp, hasArrow: hasArrowProp, enterDelay: enterDelayProp, leaveDelay: leaveDelayProp, enterTouchDelay: enterTouchDelayProp, leaveTouchDelay: leaveTouchDelayProp, shouldDescribeChild: shouldDescribeChildProp, isDescriptionPersistent: isDescriptionPersistentProp, isOpen: isOpenProp, defaultOpen, onOpen, onClose, isInteractive: isInteractiveProp, shouldOpenOnHover: shouldOpenOnHoverProp, shouldOpenOnFocus: shouldOpenOnFocusProp, shouldOpenOnTouch: shouldOpenOnTouchProp, slots, slotProps, layer: layerProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, className, 'data-testid': dataTestid }: Readonly<TooltipProps>): import("react").JSX.Element;
 export { Tooltip, type TooltipPlacement, TooltipProps, TooltipSlotProps, TooltipSlots };

package/dist/Tooltip.d.mts

@@ -1,4 +1,5 @@
-import { nt as Theme } from "./index-CR8qkP8U.mjs";
+import { nt as Theme } from "./index-BWiDilH8.mjs";
+import { n as PopoverPosition } from "./computePopoverPosition-JgOwCM7k.mjs";
 import { ElementType, HTMLAttributes, ReactElement, ReactNode, SyntheticEvent } from "react";
 /** A side of its child a tooltip sits on - and, after the dash, which end of that side it lines up with. */
 type FixedTooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
@@ -16,8 +17,17 @@ interface TooltipSlotProps {
   arrow?: SlotProps;
 }
 interface TooltipProps {
-  /** The one element the tooltip is about - it holds a `ref` and takes the handlers. */
-  children: ReactElement;
+  /**
+   * The one element the tooltip is about - it holds a `ref` and takes the handlers. Without it, the
+   * tooltip is at `anchorPosition`, and open when `isOpen` says so.
+   */
+  children?: ReactElement;
+  /**
+   * A point in the window - client coordinates, as Popover's - to place the tooltip at instead of
+   * beside the child: a hint that depends on where the pointer is. It follows the point and the
+   * `title` as they change.
+   */
+  anchorPosition?: PopoverPosition;
   /** What the tooltip says. Nothing says no tooltip. */
   title?: ReactNode;
   /** The side of the child it sits on, and the end it lines up with; `auto` takes the side with the most room. Flips for want of room. Default: `'top'`. */
@@ -38,6 +48,12 @@ interface TooltipProps {
   leaveTouchDelay?: number;
   /** Describes the child (`aria-describedby`, while open) instead of naming it (`aria-label`). Default: `false`. */
   shouldDescribeChild?: boolean;
+  /**
+   * With `shouldDescribeChild`: the child is described the whole time, as by a native `title`, not
+   * only while the tooltip is open. A visually hidden copy of a `title` sits beside the child for it
+   * to point at. Default: `false`.
+   */
+  isDescriptionPersistent?: boolean;
   /** Whether it is shown. Controlled with `onOpen` and `onClose`. */
   isOpen?: boolean;
   /** Whether it is shown at first, when uncontrolled. Default: `false`. */
@@ -46,6 +62,12 @@ interface TooltipProps {
   onOpen?: (event: Event | SyntheticEvent) => void;
   /** Fired when it asks to close. */
   onClose?: (event: Event | SyntheticEvent) => void;
+  /**
+   * Whether the pointer can be moved onto the tooltip, which then stays open (WCAG 1.4.13). With
+   * `false` it takes no pointer events - a click goes to what is under it - and closes as the
+   * pointer leaves the child: for a text hint that holds nothing to use. Default: `true`.
+   */
+  isInteractive?: boolean;
   /** Opens on hover. Default: `true`. */
   shouldOpenOnHover?: boolean;
   /** Opens on keyboard focus. Default: `true`. */
@@ -70,5 +92,5 @@ interface TooltipProps {
  * `shouldDescribeChild`). It opens and closes after their delays, stays open while the pointer is
  * on the tooltip itself, closes on Escape, and never takes or traps the focus.
  */
-declare function Tooltip({ children, title, placement: placementProp, hasArrow: hasArrowProp, enterDelay: enterDelayProp, leaveDelay: leaveDelayProp, enterTouchDelay: enterTouchDelayProp, leaveTouchDelay: leaveTouchDelayProp, shouldDescribeChild: shouldDescribeChildProp, isOpen: isOpenProp, defaultOpen, onOpen, onClose, shouldOpenOnHover: shouldOpenOnHoverProp, shouldOpenOnFocus: shouldOpenOnFocusProp, shouldOpenOnTouch: shouldOpenOnTouchProp, slots, slotProps, layer: layerProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, className, 'data-testid': dataTestid }: Readonly<TooltipProps>): import("react").JSX.Element;
+declare function Tooltip({ children, anchorPosition, title, placement: placementProp, hasArrow: hasArrowProp, enterDelay: enterDelayProp, leaveDelay: leaveDelayProp, enterTouchDelay: enterTouchDelayProp, leaveTouchDelay: leaveTouchDelayProp, shouldDescribeChild: shouldDescribeChildProp, isDescriptionPersistent: isDescriptionPersistentProp, isOpen: isOpenProp, defaultOpen, onOpen, onClose, isInteractive: isInteractiveProp, shouldOpenOnHover: shouldOpenOnHoverProp, shouldOpenOnFocus: shouldOpenOnFocusProp, shouldOpenOnTouch: shouldOpenOnTouchProp, slots, slotProps, layer: layerProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, className, 'data-testid': dataTestid }: Readonly<TooltipProps>): import("react").JSX.Element;
 export { Tooltip, type TooltipPlacement, TooltipProps, TooltipSlotProps, TooltipSlots };

package/dist/Tooltip.mjs

@@ -4,7 +4,7 @@ import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import { t as getSurfaceRadius } from "./getSurfaceRadius-B1QE_VLa.mjs";
 import { t as useControlled } from "./useControlled-B4uQ9Bj6.mjs";
 import { Portal } from "./Portal.mjs";
-import { t as useAnchoredPlacement } from "./useAnchoredPlacement-COrXZxhm.mjs";
+import { t as useAnchoredPlacement } from "./useAnchoredPlacement-txSaWzfk.mjs";
 import { t as useMergedRefs } from "./useMergedRefs-CdfwtmUd.mjs";
 import { n as resolveTooltipPlacement, t as getTooltipOrigins } from "./getTooltipOrigins-D0bLLXwY.mjs";
 import { cloneElement, useCallback, useEffect, useId, useRef, useState } from "react";
@@ -23,7 +23,7 @@ const isKeyboardFocus = (event) => {
 * delayed; moving from the child onto the tooltip does not close it, so its text can be read and
 * selected (WCAG 1.4.13); Escape closes it at once.
 */
-function useTooltip({ isOpen: isOpenProp, defaultOpen, onOpen, onClose, enterDelay, leaveDelay, enterTouchDelay, leaveTouchDelay, shouldOpenOnHover, shouldOpenOnFocus, shouldOpenOnTouch }) {
+function useTooltip({ isOpen: isOpenProp, defaultOpen, isAtPoint = false, onOpen, onClose, enterDelay, leaveDelay, enterTouchDelay, leaveTouchDelay, shouldOpenOnHover, shouldOpenOnFocus, shouldOpenOnTouch }) {
 	const [isOpen, setIsOpen] = useControlled({
 		controlled: isOpenProp,
 		default: defaultOpen
@@ -32,6 +32,7 @@ function useTooltip({ isOpen: isOpenProp, defaultOpen, onOpen, onClose, enterDel
 	const latest = useRef({
 		isOpen,
 		isOpenProp,
+		isAtPoint,
 		onOpen,
 		onClose
 	});
@@ -39,6 +40,7 @@ function useTooltip({ isOpen: isOpenProp, defaultOpen, onOpen, onClose, enterDel
 		latest.current = {
 			isOpen,
 			isOpenProp,
+			isAtPoint,
 			onOpen,
 			onClose
 		};
@@ -49,6 +51,7 @@ function useTooltip({ isOpen: isOpenProp, defaultOpen, onOpen, onClose, enterDel
 		timer.current = window.setTimeout(() => {
 			const current = latest.current;
 			if (current.isOpen === next) return;
+			if (next && current.isAtPoint) return;
 			if (current.isOpenProp === void 0) setIsOpen(next);
 			(next ? current.onOpen : current.onClose)?.(event);
 		}, delay);
@@ -85,6 +88,9 @@ function useTooltip({ isOpen: isOpenProp, defaultOpen, onOpen, onClose, enterDel
 			},
 			onTouchCancel: (event) => {
 				if (shouldOpenOnTouch) ask(false, event, leaveTouchDelay);
+			},
+			onPointerDown: (event) => {
+				if (event.pointerType !== "touch") ask(false, event, 0);
 			}
 		},
 		surfaceHandlers: {
@@ -106,12 +112,14 @@ const TooltipSurface = styled("div", {
 	label: "Tooltip",
 	shouldForwardProp: createShouldForwardProp([
 		"layer",
+		"isInteractive",
 		"borderRadius",
 		"bg",
 		"textColor"
 	])
-})(({ theme, layer, borderRadius, bg, textColor }) => ({
+})(({ theme, layer, isInteractive, borderRadius, bg, textColor }) => ({
 	position: "fixed",
+	...!isInteractive && { pointerEvents: "none" },
 	top: 0,
 	left: 0,
 	visibility: "hidden",
@@ -128,6 +136,18 @@ const TooltipSurface = styled("div", {
 	lineHeight: (0, src_exports.get)(theme, "lineHeights.base"),
 	overflowWrap: "break-word"
 }));
+const TooltipDescription = styled("span", { label: "TooltipDescription" })({
+	position: "absolute",
+	width: 1,
+	height: 1,
+	margin: -1,
+	padding: 0,
+	border: 0,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	whiteSpace: "nowrap"
+});
+const TooltipTarget = styled("span", { label: "TooltipTarget" })({ display: "inline-grid" });
 const TooltipArrow = styled("span", {
 	name: "Tooltip",
 	slot: "arrow",
@@ -184,19 +204,23 @@ const getArrowStyle = ({ side, offset }) => {
 * `shouldDescribeChild`). It opens and closes after their delays, stays open while the pointer is
 * on the tooltip itself, closes on Escape, and never takes or traps the focus.
 */
-function Tooltip({ children, title, placement: placementProp, hasArrow: hasArrowProp, enterDelay: enterDelayProp, leaveDelay: leaveDelayProp, enterTouchDelay: enterTouchDelayProp, leaveTouchDelay: leaveTouchDelayProp, shouldDescribeChild: shouldDescribeChildProp, isOpen: isOpenProp, defaultOpen = false, onOpen, onClose, shouldOpenOnHover: shouldOpenOnHoverProp, shouldOpenOnFocus: shouldOpenOnFocusProp, shouldOpenOnTouch: shouldOpenOnTouchProp, slots, slotProps, layer: layerProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, className, "data-testid": dataTestid }) {
+function Tooltip({ children, anchorPosition, title, placement: placementProp, hasArrow: hasArrowProp, enterDelay: enterDelayProp, leaveDelay: leaveDelayProp, enterTouchDelay: enterTouchDelayProp, leaveTouchDelay: leaveTouchDelayProp, shouldDescribeChild: shouldDescribeChildProp, isDescriptionPersistent: isDescriptionPersistentProp, isOpen: isOpenProp, defaultOpen = false, onOpen, onClose, isInteractive: isInteractiveProp, shouldOpenOnHover: shouldOpenOnHoverProp, shouldOpenOnFocus: shouldOpenOnFocusProp, shouldOpenOnTouch: shouldOpenOnTouchProp, slots, slotProps, layer: layerProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, className, "data-testid": dataTestid }) {
 	const dp = useDefaultProps("Tooltip");
 	const placement = placementProp ?? dp.placement ?? "top";
 	const hasArrow = hasArrowProp ?? dp.hasArrow ?? false;
 	const shouldDescribeChild = shouldDescribeChildProp ?? dp.shouldDescribeChild ?? false;
+	const isDescriptionPersistent = isDescriptionPersistentProp ?? dp.isDescriptionPersistent ?? false;
+	const isInteractive = isInteractiveProp ?? dp.isInteractive ?? true;
 	const layer = layerProp ?? dp.layer ?? "tooltip";
 	const borderRadius = borderRadiusProp ?? dp.borderRadius;
 	const bg = bgProp ?? dp.bg;
 	const textColor = textColorProp ?? dp.textColor;
 	const id = useId();
+	const isAtPoint = anchorPosition !== void 0;
 	const { isOpen, childHandlers, surfaceHandlers } = useTooltip({
 		isOpen: isOpenProp,
 		defaultOpen,
+		isAtPoint,
 		onOpen,
 		onClose,
 		enterDelay: enterDelayProp ?? dp.enterDelay ?? 100,
@@ -207,11 +231,14 @@ function Tooltip({ children, title, placement: placementProp, hasArrow: hasArrow
 		shouldOpenOnFocus: shouldOpenOnFocusProp ?? dp.shouldOpenOnFocus ?? true,
 		shouldOpenOnTouch: shouldOpenOnTouchProp ?? dp.shouldOpenOnTouch ?? true
 	});
-	const isShown = isOpen && title !== void 0 && title !== null && title !== "";
+	const hasTitle = title !== void 0 && title !== null && title !== "";
+	const isShown = isOpen && hasTitle;
 	const anchorRef = useRef(null);
+	const noAnchorRef = useRef(null);
 	const surfaceRef = useRef(null);
-	const own = children.props;
-	const ref = useMergedRefs(anchorRef, own.ref);
+	const own = children?.props ?? {};
+	const isChildDisabled = own.disabled === true;
+	const ref = useMergedRefs(isChildDisabled ? void 0 : anchorRef, own.ref);
 	const [arrow, setArrow] = useState(null);
 	const getOrigins = useCallback((context) => getTooltipOrigins(resolveTooltipPlacement(placement, context), context.isRtl), [placement]);
 	const onPlaced = useCallback((placed) => {
@@ -221,7 +248,8 @@ function Tooltip({ children, title, placement: placementProp, hasArrow: hasArrow
 	}, [hasArrow]);
 	useAnchoredPlacement({
 		isOpen: isShown,
-		anchorRef,
+		anchorRef: anchorPosition ? noAnchorRef : anchorRef,
+		anchorPosition,
 		surfaceRef,
 		getOrigins,
 		margin: MARGIN,
@@ -234,33 +262,49 @@ function Tooltip({ children, title, placement: placementProp, hasArrow: hasArrow
 	}]));
 	const ownDescription = own["aria-describedby"];
 	const names = typeof title === "string" && own["aria-label"] === void 0 && own["aria-labelledby"] === void 0 ? { "aria-label": title } : {};
-	const ariaProps = shouldDescribeChild ? { "aria-describedby": isShown ? [ownDescription, id].filter(Boolean).join(" ") : ownDescription } : names;
-	return /* @__PURE__ */ jsxs(Fragment$1, { children: [cloneElement(children, {
-		...handlers,
+	const descriptionId = `${id}-description`;
+	const hasPersistentDescription = children !== void 0 && shouldDescribeChild && isDescriptionPersistent && hasTitle;
+	const describedBy = (shown) => hasPersistentDescription ? [ownDescription, descriptionId].filter(Boolean).join(" ") : [ownDescription, shown ? id : void 0].filter(Boolean).join(" ") || void 0;
+	const ariaProps = shouldDescribeChild ? { "aria-describedby": describedBy(isShown) } : names;
+	const child = children ? cloneElement(children, {
+		...isChildDisabled || isAtPoint ? {} : handlers,
 		...ariaProps,
 		ref
-	}), isShown && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(TooltipSurface, {
-		...slotProps?.root,
-		as: slots?.root,
-		ref: surfaceRef,
-		id,
-		role: "tooltip",
-		layer,
-		borderRadius,
-		bg,
-		textColor,
-		className: [slotProps?.root?.className, className].filter(Boolean).join(" ") || void 0,
-		"data-testid": dataTestid ?? slotProps?.root?.["data-testid"],
-		...surfaceHandlers,
-		children: [title, hasArrow && arrow ? /* @__PURE__ */ jsx(TooltipArrow, {
-			...slotProps?.arrow,
-			as: slots?.arrow,
-			style: {
-				...slotProps?.arrow?.style,
-				...getArrowStyle(arrow)
-			},
-			"aria-hidden": "true"
-		}) : null]
-	}) })] });
+	}) : null;
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		isChildDisabled && !isAtPoint ? /* @__PURE__ */ jsx(TooltipTarget, {
+			ref: anchorRef,
+			...handlers,
+			children: child
+		}) : child,
+		hasPersistentDescription && /* @__PURE__ */ jsx(TooltipDescription, {
+			id: descriptionId,
+			children: title
+		}),
+		isShown && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(TooltipSurface, {
+			...slotProps?.root,
+			as: slots?.root,
+			ref: surfaceRef,
+			id,
+			role: "tooltip",
+			layer,
+			isInteractive,
+			borderRadius,
+			bg,
+			textColor,
+			className: [slotProps?.root?.className, className].filter(Boolean).join(" ") || void 0,
+			"data-testid": dataTestid ?? slotProps?.root?.["data-testid"],
+			...isAtPoint || !isInteractive ? {} : surfaceHandlers,
+			children: [title, hasArrow && arrow ? /* @__PURE__ */ jsx(TooltipArrow, {
+				...slotProps?.arrow,
+				as: slots?.arrow,
+				style: {
+					...slotProps?.arrow?.style,
+					...getArrowStyle(arrow)
+				},
+				"aria-hidden": "true"
+			}) : null]
+		}) })
+	] });
 }
 export { Tooltip };

package/dist/TransferList.d.cts

@@ -1,4 +1,4 @@
-import { nt as Theme } from "./index-Lsm4v8fB.cjs";
+import { nt as Theme } from "./index-DvVQLBZc.cjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 type TransferListValue = string | number;
 interface TransferListItem {

package/dist/TransferList.d.mts

@@ -1,4 +1,4 @@
-import { nt as Theme } from "./index-CR8qkP8U.mjs";
+import { nt as Theme } from "./index-BWiDilH8.mjs";
 import { SpaceProps } from "@soroush.tech/styled-system";
 type TransferListValue = string | number;
 interface TransferListItem {

package/dist/Typography.d.cts

@@ -1,3 +1,3 @@
-import { jt as TypographyVariant } from "./index-Lsm4v8fB.cjs";
-import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-CGyIuCRh.cjs";
+import { jt as TypographyVariant } from "./index-DvVQLBZc.cjs";
+import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-CyOSmefH.cjs";
 export { BackgroundToken, TextColorToken, Typography, TypographyAlign, TypographyProps, type TypographyVariant };

package/dist/Typography.d.mts

@@ -1,3 +1,3 @@
-import { jt as TypographyVariant } from "./index-CR8qkP8U.mjs";
-import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-C2a-5yop.mjs";
+import { jt as TypographyVariant } from "./index-BWiDilH8.mjs";
+import { a as TypographyProps, i as TypographyAlign, n as TextColorToken, r as Typography, t as BackgroundToken } from "./index-DtVrZFJI.mjs";
 export { BackgroundToken, TextColorToken, Typography, TypographyAlign, TypographyProps, type TypographyVariant };

package/dist/View.d.cts

@@ -1,2 +1,2 @@
-import { _n as ViewBorderWidthToken, gn as ViewBorderRadiusToken, hn as ViewBorderColorToken, mn as ViewBackgroundToken, pn as View, vn as ViewColorToken, yn as ViewProps } from "./index-Lsm4v8fB.cjs";
+import { _n as ViewBorderWidthToken, gn as ViewBorderRadiusToken, hn as ViewBorderColorToken, mn as ViewBackgroundToken, pn as View, vn as ViewColorToken, yn as ViewProps } from "./index-DvVQLBZc.cjs";
 export { View, ViewBackgroundToken, ViewBorderColorToken, ViewBorderRadiusToken, ViewBorderWidthToken, ViewColorToken, ViewProps };

package/dist/View.d.mts

@@ -1,2 +1,2 @@
-import { _n as ViewBorderWidthToken, gn as ViewBorderRadiusToken, hn as ViewBorderColorToken, mn as ViewBackgroundToken, pn as View, vn as ViewColorToken, yn as ViewProps } from "./index-CR8qkP8U.mjs";
+import { _n as ViewBorderWidthToken, gn as ViewBorderRadiusToken, hn as ViewBorderColorToken, mn as ViewBackgroundToken, pn as View, vn as ViewColorToken, yn as ViewProps } from "./index-BWiDilH8.mjs";
 export { View, ViewBackgroundToken, ViewBorderColorToken, ViewBorderRadiusToken, ViewBorderWidthToken, ViewColorToken, ViewProps };

package/dist/Zoom.d.cts

@@ -1,4 +1,4 @@
-import { n as TransitionProps } from "./useTransition-C89K0mS7.cjs";
+import { n as TransitionProps } from "./useTransition-CF_Zy_tM.cjs";
 type ZoomProps = TransitionProps;
 /**
  * @description Zooms one child in from nothing and out to nothing. The child holds a `ref` and

package/dist/Zoom.d.mts

@@ -1,4 +1,4 @@
-import { n as TransitionProps } from "./useTransition-3EoagwIe.mjs";
+import { n as TransitionProps } from "./useTransition-B-hzi7Sm.mjs";
 type ZoomProps = TransitionProps;
 /**
  * @description Zooms one child in from nothing and out to nothing. The child holds a `ref` and

package/dist/catalog.cjs

@@ -618,6 +618,14 @@ const tooltipCatalog = defineCatalogEntry()({
 			values: [true, false],
 			default: false
 		},
+		isInteractive: {
+			values: [true, false],
+			default: true
+		},
+		isDescriptionPersistent: {
+			values: [true, false],
+			default: false
+		},
 		shouldOpenOnHover: {
 			values: [true, false],
 			default: true

package/dist/catalog.d.cts

@@ -1,4 +1,4 @@
-import { nt as Theme } from "./index-Lsm4v8fB.cjs";
+import { nt as Theme } from "./index-DvVQLBZc.cjs";
 /** A value that survives `JSON.stringify` - all a catalog holds. */
 type JsonValue = string | number | boolean | null | JsonValue[] | {
   [key: string]: JsonValue;

package/dist/catalog.d.mts

@@ -1,4 +1,4 @@
-import { nt as Theme } from "./index-CR8qkP8U.mjs";
+import { nt as Theme } from "./index-BWiDilH8.mjs";
 /** A value that survives `JSON.stringify` - all a catalog holds. */
 type JsonValue = string | number | boolean | null | JsonValue[] | {
   [key: string]: JsonValue;