@yahoo/uds 3.116.0-beta.2 → 3.116.0

package/dist/components/client/Tooltip/TooltipContent.js

@@ -4,19 +4,16 @@ import { cx, getStyles } from "../../../styles/styler.js";
 import { Box } from "../../Box.js";
 import { Text } from "../../Text.js";
 import { IconSlot } from "../../IconSlot.js";
-import { useForkRef } from "../../../hooks/useForkRef.js";
-import { useSvgFloatingContent } from "../../../hooks/useSvgFloatingContent.js";
-import { SvgFloatingOverlay } from "../../SvgFloatingOverlay.js";
 import { useTooltipConfig } from "./UDSTooltipConfigProvider.js";
 import { TooltipInternalContext } from "./tooltipContext.js";
-import { forwardRef, isValidElement, useContext, useMemo, useRef } from "react";
+import { useForkRef } from "../../../hooks/useForkRef.js";
+import { ARROW_HEIGHT } from "./util.js";
+import { useTooltipContent } from "./useTooltipContent.js";
+import { Fragment, forwardRef, isValidElement, useContext, useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip, TooltipArrow, useStoreState, useTooltipContext } from "@ariakit/react";
 
 //#region src/components/client/Tooltip/TooltipContent.tsx
-const ARROW_HEIGHT = 8;
-const ARROW_WIDTH = 12;
-const ARROW_TIP_RADIUS_FRACTION = .5;
 const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth, startTitleIcon, title, endContent, className, id }, ref) {
 	const store = useTooltipContext();
 	const open = useStoreState(store, "open");
@@ -27,30 +24,25 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
 	const { borderRadius, animationDuration } = useTooltipConfig();
 	const defaultBorderRadius = borderRadius["default"];
 	const arrowRef = useRef(null);
-	const { internalRef, shift, onPositionUpdate, ...svgFloatingContentProps } = useSvgFloatingContent({
+	const { internalRef, shadowFilterId, maxWidthClass, dimensions, shadows, shadowPadding, svgPath, blurStyle, childTransitionStyle, tooltipShift, onPositionUpdate } = useTooltipContent({
 		open: open ?? false,
 		effectivePlacement,
+		maxWidth,
 		borderRadius: defaultBorderRadius,
 		arrowRef,
-		animationDuration,
-		arrowWidth: ARROW_WIDTH,
-		arrowHeight: ARROW_HEIGHT,
-		arrowTipRadiusFraction: ARROW_TIP_RADIUS_FRACTION
+		animationDuration
 	});
 	const mergedRef = useForkRef(ref, internalRef);
 	const classNames = {
 		root: getStyles({
 			tooltipSizeRoot: "default",
 			tooltipVariantRoot: "default",
-			className: cx(useMemo(() => {
-				if (maxWidth !== void 0) return typeof maxWidth === "number" ? `max-w-[${maxWidth}px]` : `max-w-[${maxWidth}]`;
-				return "max-w-lg";
-			}, [maxWidth]), "flex", "z-[9999]", className)
+			className: cx(maxWidthClass, "flex", "z-[9999]", className)
 		}),
 		svg: getStyles({
 			tooltipSizeSvg: "default",
 			tooltipVariantSvg: "default",
-			className: cx("uds-bgBlurFillFallback")
+			className: cx("stroke-1", "uds-bgBlurFillFallback")
 		}),
 		blur: getStyles({
 			tooltipVariantBlur: "default",
@@ -70,50 +62,122 @@ const TooltipContent = forwardRef(function TooltipContent({ children, maxWidth,
 	return /* @__PURE__ */ jsxs(Tooltip, {
 		ref: mergedRef,
 		className: classNames.root,
-		hideOnHoverOutside: internalContext?.isControlled ? false : void 0,
-		hideOnInteractOutside: internalContext?.isControlled ? false : void 0,
+		hideOnHoverOutside: internalContext ? internalContext.hideOnHoverOutside : void 0,
 		portal: internalContext ? internalContext.portal : true,
 		gutter: 10,
 		updatePosition: onPositionUpdate,
-		style: shift.x !== 0 || shift.y !== 0 ? { transform: `translate(${shift.x}px, ${shift.y}px)` } : void 0,
-		children: [/* @__PURE__ */ jsxs(SvgFloatingOverlay, {
-			blurClassName: classNames.blur,
-			svgClassNames: { base: classNames.svg },
-			arrowHeight: ARROW_HEIGHT,
-			contentWrapperSlotProps: {
+		style: tooltipShift.x !== 0 || tooltipShift.y !== 0 ? { transform: `translate(${tooltipShift.x}px, ${tooltipShift.y}px)` } : void 0,
+		children: [
+			/* @__PURE__ */ jsx(Box, {
+				className: classNames.blur,
+				style: {
+					...blurStyle,
+					...childTransitionStyle
+				}
+			}),
+			svgPath && /* @__PURE__ */ jsxs("svg", {
+				"aria-hidden": true,
+				className: "absolute top-0 left-0 w-full h-full overflow-visible pointer-events-none z-[2]",
+				style: childTransitionStyle,
+				viewBox: `0 0 ${dimensions.width} ${dimensions.height}`,
+				children: [
+					shadows.length > 0 && /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("filter", {
+						id: shadowFilterId,
+						filterUnits: "userSpaceOnUse",
+						x: -(shadowPadding + ARROW_HEIGHT),
+						y: -(shadowPadding + ARROW_HEIGHT),
+						width: dimensions.width + 2 * (shadowPadding + ARROW_HEIGHT),
+						height: dimensions.height + 2 * (shadowPadding + ARROW_HEIGHT),
+						colorInterpolationFilters: "sRGB",
+						children: [
+							shadows.map((shadow, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
+								shadow.spread !== 0 && /* @__PURE__ */ jsx("feMorphology", {
+									in: "SourceAlpha",
+									operator: shadow.spread > 0 ? "dilate" : "erode",
+									radius: Math.abs(shadow.spread),
+									result: `spread${i}`
+								}),
+								/* @__PURE__ */ jsx("feGaussianBlur", {
+									in: shadow.spread !== 0 ? `spread${i}` : "SourceAlpha",
+									stdDeviation: shadow.blur / 2,
+									result: `blurred${i}`
+								}),
+								/* @__PURE__ */ jsx("feOffset", {
+									in: `blurred${i}`,
+									dx: shadow.x,
+									dy: shadow.y,
+									result: `offset${i}`
+								}),
+								/* @__PURE__ */ jsx("feFlood", {
+									floodColor: shadow.color,
+									result: `color${i}`
+								}),
+								/* @__PURE__ */ jsx("feComposite", {
+									in: `color${i}`,
+									in2: `offset${i}`,
+									operator: "in",
+									result: `shadow${i}`
+								})
+							] }, i)),
+							/* @__PURE__ */ jsx("feMerge", {
+								result: "mergedShadows",
+								children: shadows.map((_, i) => /* @__PURE__ */ jsx("feMergeNode", { in: `shadow${i}` }, i))
+							}),
+							/* @__PURE__ */ jsx("feComposite", {
+								in: "mergedShadows",
+								in2: "SourceAlpha",
+								operator: "out"
+							})
+						]
+					}) }),
+					shadows.length > 0 && /* @__PURE__ */ jsx("path", {
+						d: svgPath,
+						fill: "black",
+						filter: `url(#${shadowFilterId})`
+					}),
+					/* @__PURE__ */ jsx("path", {
+						d: svgPath,
+						className: classNames.svg
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs(Box, {
+				position: "relative",
 				flexDirection: "column",
-				id
-			},
-			...svgFloatingContentProps,
-			children: [title && /* @__PURE__ */ jsxs(Box, {
-				alignItems: "center",
-				columnGap: "1",
-				children: [startTitleIcon && /* @__PURE__ */ jsx(IconSlot, {
-					iconProps: { variant: "fill" },
-					icon: startTitleIcon,
-					className: classNames.icon
-				}), /* @__PURE__ */ jsx(Text, {
-					className: classNames.title,
-					color: "inherit",
-					children: title
+				className: "z-[3] gap-[inherit]",
+				style: childTransitionStyle,
+				id,
+				children: [title && /* @__PURE__ */ jsxs(Box, {
+					alignItems: "center",
+					columnGap: "1",
+					children: [startTitleIcon && /* @__PURE__ */ jsx(IconSlot, {
+						iconProps: { variant: "fill" },
+						icon: startTitleIcon,
+						className: classNames.icon
+					}), /* @__PURE__ */ jsx(Text, {
+						className: classNames.title,
+						color: "inherit",
+						children: title
+					})]
+				}), /* @__PURE__ */ jsxs(Box, {
+					alignItems: "center",
+					columnGap: "1.5",
+					children: [/* @__PURE__ */ jsx(Text, {
+						className: classNames.body,
+						color: "inherit",
+						children
+					}), endContent && !isValidElement(endContent) ? /* @__PURE__ */ jsx(Text, {
+						className: classNames.endContent,
+						color: "inherit",
+						children: endContent
+					}) : endContent]
 				})]
-			}), /* @__PURE__ */ jsxs(Box, {
-				alignItems: "center",
-				columnGap: "1.5",
-				children: [/* @__PURE__ */ jsx(Text, {
-					className: classNames.body,
-					color: "inherit",
-					children
-				}), endContent && !isValidElement(endContent) ? /* @__PURE__ */ jsx(Text, {
-					className: classNames.endContent,
-					color: "inherit",
-					children: endContent
-				}) : endContent]
-			})]
-		}), /* @__PURE__ */ jsx(TooltipArrow, {
-			ref: arrowRef,
-			style: { opacity: 0 }
-		})]
+			}),
+			/* @__PURE__ */ jsx(TooltipArrow, {
+				ref: arrowRef,
+				style: { opacity: 0 }
+			})
+		]
 	});
 });
 TooltipContent.displayName = "TooltipContent";

package/dist/components/client/Tooltip/tooltipContext.cjs

@@ -5,6 +5,7 @@ const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
 let react = require("react");
 
 //#region src/components/client/Tooltip/tooltipContext.tsx
+/** When true, tooltip content should hide when pointer leaves anchor/tooltip. */
 const TooltipInternalContext = (0, react.createContext)(null);
 
 //#endregion

package/dist/components/client/Tooltip/tooltipContext.d.cts

@@ -3,9 +3,10 @@ import * as react from "react";
 
 //#region src/components/client/Tooltip/tooltipContext.d.ts
 interface TooltipInternalContextType {
+  hideOnHoverOutside: boolean;
   portal: boolean;
-  isControlled: boolean;
 }
+/** When true, tooltip content should hide when pointer leaves anchor/tooltip. */
 declare const TooltipInternalContext: react.Context<TooltipInternalContextType | null>;
 //#endregion
 export { TooltipInternalContext };

package/dist/components/client/Tooltip/tooltipContext.d.ts

@@ -3,9 +3,10 @@ import * as react from "react";
 
 //#region src/components/client/Tooltip/tooltipContext.d.ts
 interface TooltipInternalContextType {
+  hideOnHoverOutside: boolean;
   portal: boolean;
-  isControlled: boolean;
 }
+/** When true, tooltip content should hide when pointer leaves anchor/tooltip. */
 declare const TooltipInternalContext: react.Context<TooltipInternalContextType | null>;
 //#endregion
 export { TooltipInternalContext };

package/dist/components/client/Tooltip/tooltipContext.js

@@ -3,6 +3,7 @@
 import { createContext } from "react";
 
 //#region src/components/client/Tooltip/tooltipContext.tsx
+/** When true, tooltip content should hide when pointer leaves anchor/tooltip. */
 const TooltipInternalContext = createContext(null);
 
 //#endregion

package/dist/{hooks/useSvgFloatingContent.cjs → components/client/Tooltip/useTooltipContent.cjs}

@@ -1,19 +1,23 @@
+"use client";
 /*! © 2026 Yahoo, Inc. UDS v0.0.0-development */
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const require_runtime = require('../_virtual/_rolldown/runtime.cjs');
-const require_index = require('../css-tokens/dist/index.cjs');
-const require_utils_parseShadow = require('../utils/parseShadow.cjs');
-const require_utils_svgFloatingContentUtils = require('../utils/svgFloatingContentUtils.cjs');
+const require_runtime = require('../../../_virtual/_rolldown/runtime.cjs');
+const require_index = require('../../../css-tokens/dist/index.cjs');
+const require_components_client_Tooltip_util = require('./util.cjs');
 let react = require("react");
 
-//#region src/hooks/useSvgFloatingContent.ts
-function useSvgFloatingContent({ open, effectivePlacement, borderRadius, arrowRef, animationDuration, hideArrow = false, arrowWidth, arrowHeight, arrowTipRadiusFraction }) {
+//#region src/components/client/Tooltip/useTooltipContent.ts
+function useTooltipContent({ open, effectivePlacement, maxWidth, borderRadius, arrowRef, animationDuration }) {
 	const internalRef = (0, react.useRef)(null);
 	const shadowFilterId = (0, react.useId)();
 	const [dimensions, setDimensions] = (0, react.useState)({
 		width: 0,
 		height: 0
 	});
+	const maxWidthClass = (0, react.useMemo)(() => {
+		if (maxWidth !== void 0) return typeof maxWidth === "number" ? `max-w-[${maxWidth}px]` : `max-w-[${maxWidth}]`;
+		return "max-w-lg";
+	}, [maxWidth]);
 	(0, react.useEffect)(() => {
 		const el = internalRef.current;
 		if (!el) return;
@@ -33,7 +37,7 @@ function useSvgFloatingContent({ open, effectivePlacement, borderRadius, arrowRe
 		const shadowValue = getComputedStyle(internalRef.current).getPropertyValue(`--${require_index.DROP_SHADOW_PREFIX}`);
 		if (shadowValue !== shadowValueRef.current) {
 			shadowValueRef.current = shadowValue;
-			setShadows(require_utils_parseShadow.parseShadow(shadowValue));
+			setShadows(require_components_client_Tooltip_util.parseShadow(shadowValue));
 		}
 	}, []);
 	const shadowPadding = (0, react.useMemo)(() => {
@@ -47,12 +51,12 @@ function useSvgFloatingContent({ open, effectivePlacement, borderRadius, arrowRe
 	const [arrowCenter, setArrowCenter] = (0, react.useState)(void 0);
 	const computeArrowCenter = (0, react.useCallback)(() => {
 		const arrowEl = arrowRef.current;
-		const el = internalRef.current;
-		if (!arrowEl || !el) return;
+		const tooltipEl = internalRef.current;
+		if (!arrowEl || !tooltipEl) return;
 		const arrowRect = arrowEl.getBoundingClientRect();
-		const rect = el.getBoundingClientRect();
-		const side = require_utils_svgFloatingContentUtils.getArrowSide(effectivePlacement);
-		const raw = side === "top" || side === "bottom" ? arrowRect.left + arrowRect.width / 2 - rect.left : arrowRect.top + arrowRect.height / 2 - rect.top;
+		const tooltipRect = tooltipEl.getBoundingClientRect();
+		const side = require_components_client_Tooltip_util.getArrowSide(effectivePlacement);
+		const raw = side === "top" || side === "bottom" ? arrowRect.left + arrowRect.width / 2 - tooltipRect.left : arrowRect.top + arrowRect.height / 2 - tooltipRect.top;
 		return Math.round(raw);
 	}, [arrowRef, effectivePlacement]);
 	const onPositionUpdate = (0, react.useCallback)(async ({ updatePosition }) => {
@@ -69,115 +73,81 @@ function useSvgFloatingContent({ open, effectivePlacement, borderRadius, arrowRe
 			});
 			readShadows();
 		}
-		if (!hideArrow) {
-			const next = computeArrowCenter();
-			if (next !== void 0) setArrowCenter((prev) => prev === next ? prev : next);
-		}
-	}, [
-		computeArrowCenter,
-		readShadows,
-		hideArrow
-	]);
+		const next = computeArrowCenter();
+		if (next !== void 0) setArrowCenter((prev) => prev === next ? prev : next);
+	}, [computeArrowCenter, readShadows]);
 	const svgPath = (0, react.useMemo)(() => {
-		return dimensions.width > 0 && dimensions.height > 0 ? require_utils_svgFloatingContentUtils.generateSvgFloatingContentPath({
+		return dimensions.width > 0 && dimensions.height > 0 ? require_components_client_Tooltip_util.generateTooltipPath({
 			width: dimensions.width,
 			height: dimensions.height,
 			placement: effectivePlacement,
 			borderRadius,
-			arrowCenter: hideArrow ? void 0 : arrowCenter,
-			arrowWidth,
-			arrowHeight,
-			arrowTipRadiusFraction,
-			...hideArrow && {
-				arrowWidth: 0,
-				arrowHeight: 0
-			}
+			arrowCenter
 		}) : null;
 	}, [
 		effectivePlacement,
 		dimensions.width,
 		dimensions.height,
 		borderRadius,
-		arrowCenter,
-		hideArrow,
-		arrowWidth,
-		arrowHeight,
-		arrowTipRadiusFraction
+		arrowCenter
 	]);
 	const blurClipPath = (0, react.useMemo)(() => {
 		if (dimensions.width <= 0 || dimensions.height <= 0) return null;
-		if (hideArrow) return require_utils_svgFloatingContentUtils.generateSvgFloatingContentPath({
-			width: dimensions.width,
-			height: dimensions.height,
-			placement: effectivePlacement,
-			borderRadius,
-			arrowWidth: 0,
-			arrowHeight: 0,
-			arrowTipRadiusFraction
-		});
-		const arrowSide = require_utils_svgFloatingContentUtils.getArrowSide(effectivePlacement);
-		const offsetX = arrowSide === "left" ? arrowHeight : 0;
-		const offsetY = arrowSide === "top" ? arrowHeight : 0;
-		return require_utils_svgFloatingContentUtils.generateSvgFloatingContentPath({
+		const arrowSide = require_components_client_Tooltip_util.getArrowSide(effectivePlacement);
+		const offsetX = arrowSide === "left" ? require_components_client_Tooltip_util.ARROW_HEIGHT : 0;
+		const offsetY = arrowSide === "top" ? require_components_client_Tooltip_util.ARROW_HEIGHT : 0;
+		return require_components_client_Tooltip_util.generateTooltipPath({
 			width: dimensions.width,
 			height: dimensions.height,
 			placement: effectivePlacement,
 			borderRadius,
 			arrowCenter,
 			offsetX,
-			offsetY,
-			arrowWidth,
-			arrowHeight,
-			arrowTipRadiusFraction
+			offsetY
 		});
 	}, [
 		effectivePlacement,
 		dimensions.width,
 		dimensions.height,
 		borderRadius,
-		arrowCenter,
-		hideArrow,
-		arrowHeight,
-		arrowWidth,
-		arrowTipRadiusFraction
+		arrowCenter
 	]);
 	const blurStyle = (0, react.useMemo)(() => {
 		const style = { clipPath: blurClipPath ? `path('${blurClipPath}')` : void 0 };
-		if (!hideArrow) switch (require_utils_svgFloatingContentUtils.getArrowSide(effectivePlacement)) {
+		switch (require_components_client_Tooltip_util.getArrowSide(effectivePlacement)) {
 			case "top":
-				style.height = `calc(100% + ${arrowHeight}px)`;
+				style.height = `calc(100% + ${require_components_client_Tooltip_util.ARROW_HEIGHT}px)`;
 				style.top = "auto";
 				style.bottom = "0";
 				break;
 			case "bottom":
-				style.height = `calc(100% + ${arrowHeight}px)`;
+				style.height = `calc(100% + ${require_components_client_Tooltip_util.ARROW_HEIGHT}px)`;
 				break;
 			case "left":
-				style.width = `calc(100% + ${arrowHeight}px)`;
+				style.width = `calc(100% + ${require_components_client_Tooltip_util.ARROW_HEIGHT}px)`;
 				style.left = "auto";
 				style.right = "0";
 				break;
 			case "right":
-				style.width = `calc(100% + ${arrowHeight}px)`;
+				style.width = `calc(100% + ${require_components_client_Tooltip_util.ARROW_HEIGHT}px)`;
 				break;
 		}
 		return style;
-	}, [
-		blurClipPath,
-		effectivePlacement,
-		hideArrow,
-		arrowHeight
-	]);
+	}, [blurClipPath, effectivePlacement]);
 	const [visible, setVisible] = (0, react.useState)(false);
+	if ((!open || !svgPath) && visible) setVisible(false);
 	(0, react.useEffect)(() => {
-		const raf = requestAnimationFrame(() => {
-			setVisible(open && !!svgPath);
-		});
-		return () => cancelAnimationFrame(raf);
+		if (open && svgPath) {
+			const raf = requestAnimationFrame(() => {
+				setVisible(true);
+			});
+			return () => cancelAnimationFrame(raf);
+		}
 	}, [open, svgPath]);
 	return {
 		internalRef,
 		shadowFilterId,
+		maxWidthClass,
 		dimensions,
 		shadows,
 		shadowPadding,
@@ -189,31 +159,28 @@ function useSvgFloatingContent({ open, effectivePlacement, borderRadius, arrowRe
 			opacity: visible ? 1 : 0,
 			transition: `opacity ${animationDuration}ms ease-in-out`
 		},
-		shift: (0, react.useMemo)(() => {
-			if (hideArrow || arrowCenter === void 0 || dimensions.width <= 0 || dimensions.height <= 0) return {
+		tooltipShift: (0, react.useMemo)(() => {
+			if (arrowCenter === void 0 || dimensions.width <= 0 || dimensions.height <= 0) return {
 				x: 0,
 				y: 0
 			};
-			return require_utils_svgFloatingContentUtils.getArrowClampDelta({
+			return require_components_client_Tooltip_util.getArrowClampDelta({
 				width: dimensions.width,
 				height: dimensions.height,
 				placement: effectivePlacement,
 				borderRadius,
-				arrowCenter,
-				arrowWidth
+				arrowCenter
 			});
 		}, [
-			hideArrow,
 			arrowCenter,
 			dimensions.width,
 			dimensions.height,
 			effectivePlacement,
-			borderRadius,
-			arrowWidth
+			borderRadius
 		]),
 		onPositionUpdate
 	};
 }
 
 //#endregion
-exports.useSvgFloatingContent = useSvgFloatingContent;
+exports.useTooltipContent = useTooltipContent;

package/dist/components/client/Tooltip/useTooltipContent.d.cts

@@ -0,0 +1,66 @@
+
+import { ParsedShadow } from "./util.cjs";
+import { CSSProperties, RefObject } from "react";
+
+//#region src/components/client/Tooltip/useTooltipContent.d.ts
+interface UseTooltipContentOptions {
+  /** Whether the tooltip is currently open. */
+  open: boolean;
+  /** Resolved placement after Ariakit positioning (e.g. `'top'`, `'bottom-start'`). */
+  effectivePlacement: string;
+  /** Optional max-width override (number = px, string = CSS value). */
+  maxWidth?: number | string;
+  /** Border-radius from the tooltip config (px). */
+  borderRadius: number;
+  /**
+   * Ref to the Ariakit `TooltipArrow` element. Its position (set by
+   * floating-ui) is read inside the `updatePosition` callback so the
+   * SVG arrow always mirrors where floating-ui places the native arrow.
+   */
+  arrowRef: RefObject<HTMLDivElement | null>;
+  /** Animation duration from the tooltip config (ms). */
+  animationDuration: number;
+}
+interface UseTooltipContentReturn {
+  internalRef: RefObject<HTMLElement | null>;
+  shadowFilterId: string;
+  maxWidthClass: string;
+  dimensions: {
+    width: number;
+    height: number;
+  };
+  shadows: ParsedShadow[];
+  shadowPadding: number;
+  svgPath: string | null;
+  blurClipPath: string | null;
+  blurStyle: CSSProperties;
+  visible: boolean;
+  childTransitionStyle: CSSProperties;
+  /**
+   * Pixel offset to apply as a CSS transform on the tooltip element so that
+   * the (clamped) SVG arrow aligns with the trigger center even when the
+   * trigger is too small / close to a rounded corner for the arrow to reach.
+   */
+  tooltipShift: {
+    x: number;
+    y: number;
+  };
+  /**
+   * Pass as the `updatePosition` prop to the Ariakit `<Tooltip>` component.
+   * This hooks into floating-ui's positioning lifecycle so the SVG arrow
+   * center is read after every `computePosition`
+   */
+  onPositionUpdate: (props: {
+    updatePosition: () => Promise<void>;
+  }) => Promise<void>;
+}
+declare function useTooltipContent({
+  open,
+  effectivePlacement,
+  maxWidth,
+  borderRadius,
+  arrowRef,
+  animationDuration
+}: UseTooltipContentOptions): UseTooltipContentReturn;
+//#endregion
+export { type UseTooltipContentOptions, type UseTooltipContentReturn, useTooltipContent };

package/dist/components/client/Tooltip/useTooltipContent.d.ts

@@ -0,0 +1,66 @@
+
+import { ParsedShadow } from "./util.js";
+import { CSSProperties, RefObject } from "react";
+
+//#region src/components/client/Tooltip/useTooltipContent.d.ts
+interface UseTooltipContentOptions {
+  /** Whether the tooltip is currently open. */
+  open: boolean;
+  /** Resolved placement after Ariakit positioning (e.g. `'top'`, `'bottom-start'`). */
+  effectivePlacement: string;
+  /** Optional max-width override (number = px, string = CSS value). */
+  maxWidth?: number | string;
+  /** Border-radius from the tooltip config (px). */
+  borderRadius: number;
+  /**
+   * Ref to the Ariakit `TooltipArrow` element. Its position (set by
+   * floating-ui) is read inside the `updatePosition` callback so the
+   * SVG arrow always mirrors where floating-ui places the native arrow.
+   */
+  arrowRef: RefObject<HTMLDivElement | null>;
+  /** Animation duration from the tooltip config (ms). */
+  animationDuration: number;
+}
+interface UseTooltipContentReturn {
+  internalRef: RefObject<HTMLElement | null>;
+  shadowFilterId: string;
+  maxWidthClass: string;
+  dimensions: {
+    width: number;
+    height: number;
+  };
+  shadows: ParsedShadow[];
+  shadowPadding: number;
+  svgPath: string | null;
+  blurClipPath: string | null;
+  blurStyle: CSSProperties;
+  visible: boolean;
+  childTransitionStyle: CSSProperties;
+  /**
+   * Pixel offset to apply as a CSS transform on the tooltip element so that
+   * the (clamped) SVG arrow aligns with the trigger center even when the
+   * trigger is too small / close to a rounded corner for the arrow to reach.
+   */
+  tooltipShift: {
+    x: number;
+    y: number;
+  };
+  /**
+   * Pass as the `updatePosition` prop to the Ariakit `<Tooltip>` component.
+   * This hooks into floating-ui's positioning lifecycle so the SVG arrow
+   * center is read after every `computePosition`
+   */
+  onPositionUpdate: (props: {
+    updatePosition: () => Promise<void>;
+  }) => Promise<void>;
+}
+declare function useTooltipContent({
+  open,
+  effectivePlacement,
+  maxWidth,
+  borderRadius,
+  arrowRef,
+  animationDuration
+}: UseTooltipContentOptions): UseTooltipContentReturn;
+//#endregion
+export { type UseTooltipContentOptions, type UseTooltipContentReturn, useTooltipContent };