@videojs/react 10.0.0-rc.1 → 10.0.0-rc.3

package/dist/default/ui/time-slider/root.js

@@ -0,0 +1,275 @@
+import { useLocale, useTranslator } from "../../i18n/context.js";
+import { usePlayer } from "../../player/context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useSlider } from "../hooks/use-slider.js";
+import { SliderProvider } from "../slider/context.js";
+import { TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
+import { getTimeSliderCSSVars, selectBuffer, selectPlayback, selectTime } from "@videojs/core/dom";
+import { hasTimeRange } from "@videojs/media";
+import { translateText } from "@videojs/core/i18n";
+import { c } from "react-compiler-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { formatTime } from "@videojs/utils/time";
+//#region src/ui/time-slider/root.tsx
+const noopSeek = () => Promise.resolve(0);
+const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwardedRef) {
+	const $ = c(69);
+	const { render, className, style, label, changeThrottle: t0, step: t1, largeStep: t2, orientation, disabled, thumbAlignment, onDragStart, onDragEnd, pauseOnDrag, ...elementProps } = componentProps;
+	const changeThrottle = t0 === void 0 ? TimeSliderCore.defaultProps.changeThrottle : t0;
+	const step = t1 === void 0 ? TimeSliderCore.defaultProps.step : t1;
+	const largeStep = t2 === void 0 ? TimeSliderCore.defaultProps.largeStep : t2;
+	const time = usePlayer(selectTime);
+	const buffer = usePlayer(selectBuffer);
+	const playback = usePlayer(selectPlayback);
+	const translator = useTranslator();
+	const locale = useLocale();
+	const [core] = useState(_temp);
+	core.setProps({
+		label,
+		step,
+		largeStep,
+		orientation,
+		disabled,
+		thumbAlignment,
+		pauseOnDrag,
+		changeThrottle
+	});
+	core.setFormatLocale(locale);
+	let t3;
+	if ($[0] !== buffer || $[1] !== time) {
+		t3 = time ? {
+			...time,
+			...buffer ?? {
+				buffered: [],
+				seekable: []
+			}
+		} : null;
+		$[0] = buffer;
+		$[1] = time;
+		$[2] = t3;
+	} else t3 = $[2];
+	const media = t3;
+	const mediaRef = useLatestRef(media);
+	const playbackRef = useLatestRef(playback);
+	let t4;
+	if ($[3] !== core || $[4] !== playbackRef) {
+		t4 = () => () => core.endDrag(playbackRef.current);
+		$[3] = core;
+		$[4] = playbackRef;
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== core) {
+		t5 = [core];
+		$[6] = core;
+		$[7] = t5;
+	} else t5 = $[7];
+	useEffect(t4, t5);
+	let t6;
+	if ($[8] !== core || $[9] !== media) {
+		t6 = (input) => {
+			core.setInput(input);
+			core.setMedia(media ?? {
+				currentTime: 0,
+				duration: 0,
+				seeking: false,
+				seek: noopSeek,
+				buffered: [],
+				seekable: []
+			});
+			return core.getState();
+		};
+		$[8] = core;
+		$[9] = media;
+		$[10] = t6;
+	} else t6 = $[10];
+	let t7;
+	if ($[11] !== core || $[12] !== time?.currentTime) {
+		t7 = () => core.percentFromValue(time?.currentTime ?? 0);
+		$[11] = core;
+		$[12] = time?.currentTime;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
+	let t9;
+	if ($[14] !== core) {
+		t8 = () => core.getStepPercent();
+		t9 = () => core.getLargeStepPercent();
+		$[14] = core;
+		$[15] = t8;
+		$[16] = t9;
+	} else {
+		t8 = $[15];
+		t9 = $[16];
+	}
+	let t10;
+	if ($[17] !== disabled || $[18] !== media) {
+		t10 = disabled || !media || !hasTimeRange(media);
+		$[17] = disabled;
+		$[18] = media;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== core) {
+		t11 = (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize);
+		$[20] = core;
+		$[21] = t11;
+	} else t11 = $[21];
+	let t12;
+	if ($[22] !== core || $[23] !== mediaRef) {
+		t12 = (percent) => {
+			const media_0 = mediaRef.current;
+			if (media_0) media_0.seek(core.rawValueFromPercent(percent));
+		};
+		$[22] = core;
+		$[23] = mediaRef;
+		$[24] = t12;
+	} else t12 = $[24];
+	let t13;
+	if ($[25] !== core || $[26] !== onDragStart || $[27] !== playbackRef) {
+		t13 = () => {
+			core.startDrag(playbackRef.current);
+			onDragStart?.();
+		};
+		$[25] = core;
+		$[26] = onDragStart;
+		$[27] = playbackRef;
+		$[28] = t13;
+	} else t13 = $[28];
+	let t14;
+	if ($[29] !== core || $[30] !== onDragEnd || $[31] !== playbackRef) {
+		t14 = () => {
+			core.endDrag(playbackRef.current);
+			onDragEnd?.();
+		};
+		$[29] = core;
+		$[30] = onDragEnd;
+		$[31] = playbackRef;
+		$[32] = t14;
+	} else t14 = $[32];
+	let t15;
+	if ($[33] !== changeThrottle || $[34] !== orientation || $[35] !== t10 || $[36] !== t11 || $[37] !== t12 || $[38] !== t13 || $[39] !== t14 || $[40] !== t6 || $[41] !== t7 || $[42] !== t8 || $[43] !== t9) {
+		t15 = {
+			computeState: t6,
+			getPercent: t7,
+			getStepPercent: t8,
+			getLargeStepPercent: t9,
+			orientation,
+			disabled: t10,
+			changeThrottle,
+			adjustPercent: t11,
+			getCSSVars: getTimeSliderCSSVars,
+			onValueCommit: t12,
+			onDragStart: t13,
+			onDragEnd: t14
+		};
+		$[33] = changeThrottle;
+		$[34] = orientation;
+		$[35] = t10;
+		$[36] = t11;
+		$[37] = t12;
+		$[38] = t13;
+		$[39] = t14;
+		$[40] = t6;
+		$[41] = t7;
+		$[42] = t8;
+		$[43] = t9;
+		$[44] = t15;
+	} else t15 = $[44];
+	const { state, input: input_0, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider(t15);
+	if (!time) return null;
+	const T0 = SliderProvider;
+	let t16;
+	if ($[45] !== core || $[46] !== state.pointerPercent) {
+		t16 = core.rawValueFromPercent(state.pointerPercent);
+		$[45] = core;
+		$[46] = state.pointerPercent;
+		$[47] = t16;
+	} else t16 = $[47];
+	let t17;
+	if ($[48] !== core) {
+		t17 = (percent_0) => core.rawValueFromPercent(percent_0);
+		$[48] = core;
+		$[49] = t17;
+	} else t17 = $[49];
+	let t18;
+	if ($[50] !== core || $[51] !== translator) {
+		t18 = (sliderState) => {
+			const attrs = core.getAttrs(sliderState);
+			return {
+				...attrs,
+				"aria-label": translateText(attrs["aria-label"], translator),
+				"aria-valuetext": translateText(attrs["aria-valuetext"], translator, core.getValueTextParams(sliderState))
+			};
+		};
+		$[50] = core;
+		$[51] = translator;
+		$[52] = t18;
+	} else t18 = $[52];
+	let t19;
+	if ($[53] !== locale || $[54] !== state.duration) {
+		t19 = (value) => formatTime(value, state.duration, { locale });
+		$[53] = locale;
+		$[54] = state.duration;
+		$[55] = t19;
+	} else t19 = $[55];
+	let t20;
+	if ($[56] !== input_0 || $[57] !== state || $[58] !== t16 || $[59] !== t17 || $[60] !== t18 || $[61] !== t19 || $[62] !== thumbProps || $[63] !== thumbRef) {
+		t20 = {
+			state,
+			pointerValue: t16,
+			input: input_0,
+			getPointerValue: t17,
+			thumbRef,
+			thumbProps,
+			stateAttrMap: TimeSliderDataAttrs,
+			getAttrs: t18,
+			formatValue: t19
+		};
+		$[56] = input_0;
+		$[57] = state;
+		$[58] = t16;
+		$[59] = t17;
+		$[60] = t18;
+		$[61] = t19;
+		$[62] = thumbProps;
+		$[63] = thumbRef;
+		$[64] = t20;
+	} else t20 = $[64];
+	const t21 = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: TimeSliderDataAttrs,
+		ref: [forwardedRef, rootRef],
+		props: [
+			{ style: {
+				...cssVars,
+				...rootStyle
+			} },
+			rootProps,
+			elementProps
+		]
+	});
+	let t22;
+	if ($[65] !== T0 || $[66] !== t20 || $[67] !== t21) {
+		t22 = /* @__PURE__ */ jsx(T0, {
+			value: t20,
+			children: t21
+		});
+		$[65] = T0;
+		$[66] = t20;
+		$[67] = t21;
+		$[68] = t22;
+	} else t22 = $[68];
+	return t22;
+});
+function _temp() {
+	return new TimeSliderCore();
+}
+//#endregion
+export { TimeSliderRoot };

package/dist/default/ui/time-slider/segments.js

@@ -0,0 +1,58 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useSliderContext, useSliderPointerValue } from "../slider/context.js";
+import { SliderSegmentsCore, TimeSliderChapterCSSVars } from "@videojs/core";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { Fragment, forwardRef, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/time-slider/segments.tsx
+/** Private React adapter for rendering normalized numeric slider segments. */
+const SliderSegments = forwardRef(function SliderSegments(componentProps, ref) {
+	const { ranges, min, max, renderSegment, render, className, style, ...elementProps } = componentProps;
+	const slider = useSliderContext();
+	const pointerValue = useSliderPointerValue();
+	const [core] = useState(() => new SliderSegmentsCore());
+	const geometry = useMemo(() => core.getGeometry({
+		ranges,
+		min,
+		max,
+		orientation: slider.state.orientation
+	}), [
+		core,
+		ranges,
+		min,
+		max,
+		slider.state.orientation
+	]);
+	const sliderAttrs = getStateDataAttrs(slider.state, slider.stateAttrMap);
+	const segments = geometry.map((segment) => {
+		const state = core.getState(segment, slider.state, pointerValue);
+		const segmentStyle = {
+			[TimeSliderChapterCSSVars.start]: state.startPercent,
+			[TimeSliderChapterCSSVars.end]: state.endPercent,
+			[TimeSliderChapterCSSVars.width]: state.width ?? state.height,
+			[TimeSliderChapterCSSVars.fill]: `${state.fillPercent}%`
+		};
+		return /* @__PURE__ */ jsx(Fragment, { children: renderSegment({
+			...sliderAttrs,
+			style: segmentStyle
+		}, state) }, state.key);
+	});
+	const state = geometry.length > 0 ? core.getState(geometry[0], slider.state, pointerValue) : null;
+	if (!state) return null;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref,
+		props: [
+			{ "aria-hidden": "true" },
+			sliderAttrs,
+			elementProps,
+			{ children: segments }
+		]
+	});
+});
+//#endregion
+export { SliderSegments };

package/dist/default/ui/title/component.js

@@ -0,0 +1,38 @@
+"use client";
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { TitleCore, TitleDataAttrs } from "@videojs/core";
+import { selectControls, selectMetadata } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+//#region src/ui/title/component.tsx
+/**
+* Displays the resolved content title. Renders nothing when no title resolves.
+*
+* The component owns its text content. Set the title through the player's `title` prop rather than by passing children.
+*
+* @example
+*   ```tsx
+*   <Title />
+*   ```;
+*/
+const Title = forwardRef(function Title(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const metadata = usePlayer(selectMetadata);
+	const controls = usePlayer(selectControls);
+	const [core] = useState(() => new TitleCore());
+	if (!metadata) return null;
+	const state = core.getState(metadata, controls);
+	if (state.hidden) return null;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: TitleDataAttrs,
+		ref: [forwardedRef],
+		props: [{ children: state.title }, elementProps]
+	});
+});
+//#endregion
+export { Title };

package/dist/default/ui/title/index.js

@@ -1,2 +1,2 @@
-import { Title } from "./title.js";
+import { Title } from "./component.js";
 export { Title };

package/dist/default/ui/tooltip/arrow.js

@@ -0,0 +1,12 @@
+import { useTooltipContext } from "./context.js";
+import { createContextPart } from "../create-context-part.js";
+//#region src/ui/tooltip/arrow.tsx
+/** Decorative arrow pointing from the tooltip toward the trigger. Hidden from assistive technology. */
+const TooltipArrow = createContextPart({
+	displayName: "TooltipArrow",
+	tag: "div",
+	useContext: useTooltipContext,
+	staticProps: { "aria-hidden": "true" }
+});
+//#endregion
+export { TooltipArrow };

package/dist/default/ui/tooltip/context.js

@@ -13,5 +13,3 @@ function useOptionalTooltipContext() {
 }
 //#endregion
 export { TooltipContextProvider, useOptionalTooltipContext, useTooltipContext };
-
-//# sourceMappingURL=context.js.map

package/dist/default/ui/tooltip/group-context.js

@@ -8,5 +8,3 @@ function useTooltipGroup() {
 }
 //#endregion
 export { TooltipGroupContextProvider, useTooltipGroup };
-
-//# sourceMappingURL=group-context.js.map

package/dist/default/ui/tooltip/index.parts.js

@@ -1,11 +1,11 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { TooltipArrow } from "./tooltip-arrow.js";
-import { TooltipLabel } from "./tooltip-label.js";
-import { TooltipShortcut } from "./tooltip-shortcut.js";
-import { TooltipPopup } from "./tooltip-popup.js";
-import { TooltipProvider } from "./tooltip-provider.js";
-import { TooltipRoot } from "./tooltip-root.js";
-import { TooltipTrigger } from "./tooltip-trigger.js";
+import { TooltipArrow } from "./arrow.js";
+import { TooltipLabel } from "./label.js";
+import { TooltipShortcut } from "./shortcut.js";
+import { TooltipPopup } from "./popup.js";
+import { TooltipProvider } from "./provider.js";
+import { TooltipRoot } from "./root.js";
+import { TooltipTrigger } from "./trigger.js";
 //#region src/ui/tooltip/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Arrow: () => TooltipArrow,
@@ -18,5 +18,3 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 });
 //#endregion
 export { TooltipArrow as Arrow, TooltipLabel as Label, TooltipPopup as Popup, TooltipProvider as Provider, TooltipRoot as Root, TooltipShortcut as Shortcut, TooltipTrigger as Trigger, index_parts_exports };
-
-//# sourceMappingURL=index.parts.js.map

package/dist/default/ui/tooltip/label.js

@@ -0,0 +1,21 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useTooltipContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/tooltip/label.tsx
+/** Tooltip body label; defaults to context `content.label` from the linked trigger. */
+const TooltipLabel = forwardRef(function TooltipLabel({ render, className, style, children, ...elementProps }, forwardedRef) {
+	const { state, stateAttrMap, content } = useTooltipContext();
+	const body = children !== void 0 ? children : content?.label ?? "";
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: forwardedRef,
+		props: [elementProps, { children: body }]
+	});
+});
+//#endregion
+export { TooltipLabel };

package/dist/default/ui/tooltip/popup.js

@@ -0,0 +1,97 @@
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useTooltipContext } from "./context.js";
+import { usePopupPosition } from "../popover/use-popup-position.js";
+import { TooltipLabel } from "./label.js";
+import { TooltipShortcut } from "./shortcut.js";
+import { TooltipCSSVars } from "@videojs/core";
+import { c } from "react-compiler-runtime";
+import { forwardRef, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/tooltip/popup.tsx
+/**
+* Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript
+* fallback.
+*/
+const TooltipPopup = forwardRef(function TooltipPopup(t0, forwardedRef) {
+	const $ = c(15);
+	const { render, className, style, children, ...elementProps } = t0;
+	const { core, tooltip, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, popupId, boundary, container } = useTooltipContext();
+	const internalRef = useRef(null);
+	let t1;
+	if ($[0] !== tooltip) {
+		t1 = (el) => {
+			tooltip.setPopupElement(el);
+		};
+		$[0] = tooltip;
+		$[1] = t1;
+	} else t1 = $[1];
+	const composedRef = useComposedRefs(forwardedRef, t1, internalRef);
+	let t2;
+	if ($[2] !== preferredSide || $[3] !== state.align) {
+		t2 = {
+			side: preferredSide,
+			align: state.align
+		};
+		$[2] = preferredSide;
+		$[3] = state.align;
+		$[4] = t2;
+	} else t2 = $[4];
+	const posOpts = t2;
+	let t3;
+	if ($[5] !== anchorName || $[6] !== boundary || $[7] !== container || $[8] !== posOpts || $[9] !== setPositionedSide || $[10] !== state.open || $[11] !== tooltip) {
+		t3 = {
+			open: state.open,
+			anchorName,
+			position: posOpts,
+			triggerSource: tooltip,
+			popupRef: internalRef,
+			boundary,
+			container,
+			cssVars: TooltipCSSVars,
+			onSideChange: setPositionedSide
+		};
+		$[5] = anchorName;
+		$[6] = boundary;
+		$[7] = container;
+		$[8] = posOpts;
+		$[9] = setPositionedSide;
+		$[10] = state.open;
+		$[11] = tooltip;
+		$[12] = t3;
+	} else t3 = $[12];
+	const positioningStyle = usePopupPosition(t3);
+	if (!state.open) return null;
+	let t4;
+	if ($[13] !== children) {
+		t4 = children !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TooltipLabel, {}), /* @__PURE__ */ jsx(TooltipShortcut, {})] });
+		$[13] = children;
+		$[14] = t4;
+	} else t4 = $[14];
+	const body = t4;
+	const { onFocusOut, ...restPopupProps } = tooltip.popupProps;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: composedRef,
+		props: [
+			{
+				id: popupId,
+				style: positioningStyle,
+				...core.getPopupAttrs(state)
+			},
+			{ children: body },
+			{
+				...restPopupProps,
+				onBlur: onFocusOut
+			},
+			elementProps
+		]
+	});
+});
+//#endregion
+export { TooltipPopup };

package/dist/default/ui/tooltip/provider.js

@@ -0,0 +1,47 @@
+import { TooltipGroupContextProvider } from "./group-context.js";
+import { TooltipGroupCore } from "@videojs/core";
+import { c } from "react-compiler-runtime";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/tooltip/provider.tsx
+function TooltipProvider(t0) {
+	const $ = c(9);
+	const { delay, closeDelay, timeout, children } = t0;
+	let t1;
+	if ($[0] !== closeDelay || $[1] !== delay || $[2] !== timeout) {
+		t1 = () => new TooltipGroupCore({
+			delay,
+			closeDelay,
+			timeout
+		});
+		$[0] = closeDelay;
+		$[1] = delay;
+		$[2] = timeout;
+		$[3] = t1;
+	} else t1 = $[3];
+	const [group] = useState(t1);
+	group.setProps({
+		delay,
+		closeDelay,
+		timeout
+	});
+	let t2;
+	if ($[4] !== group) {
+		t2 = { group };
+		$[4] = group;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== children || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(TooltipGroupContextProvider, {
+			value: t2,
+			children
+		});
+		$[6] = children;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+//#endregion
+export { TooltipProvider };

package/dist/default/ui/tooltip/root.js

@@ -0,0 +1,92 @@
+import { useOptionalContainer } from "../../player/context.js";
+import { useOptionalPopupGroup } from "../../player/popup-group-context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { TooltipContextProvider } from "./context.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { useOptionalControlsContext } from "../controls/context.js";
+import { usePositionedState } from "../hooks/use-positioned-state.js";
+import { useTooltipGroup } from "./group-context.js";
+import { TooltipCore, TooltipDataAttrs } from "@videojs/core";
+import { createTooltip, createTransition } from "@videojs/core/dom";
+import { useSnapshot } from "@videojs/store/react";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isUndefined } from "@videojs/utils/predicate";
+//#region src/ui/tooltip/root.tsx
+function TooltipRoot({ open: controlledOpen, defaultOpen = TooltipCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, delay = TooltipCore.defaultProps.delay, closeDelay = TooltipCore.defaultProps.closeDelay, disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup, disabled = TooltipCore.defaultProps.disabled, sticky = TooltipCore.defaultProps.sticky, boundary = "container", children, ...coreProps }) {
+	const container = useOptionalContainer();
+	const popupGroup = useOptionalPopupGroup();
+	const controls = useOptionalControlsContext();
+	const [core] = useState(() => new TooltipCore(coreProps));
+	core.setProps(coreProps);
+	const isControlled = !isUndefined(controlledOpen);
+	const groupFromContext = useTooltipGroup();
+	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
+	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
+	const delayRef = useLatestRef(delay);
+	const closeDelayRef = useLatestRef(closeDelay);
+	const disableHoverablePopupRef = useLatestRef(disableHoverablePopup);
+	const disabledRef = useLatestRef(disabled);
+	const stickyRef = useLatestRef(sticky);
+	const groupRef = useLatestRef(groupFromContext);
+	const popupGroupRef = useLatestRef(popupGroup);
+	const [tooltip] = useState(() => {
+		const instance = createTooltip({
+			transition: createTransition(),
+			onOpenChange: (nextOpen, details) => {
+				onOpenChangeRef.current?.(nextOpen, details);
+			},
+			onOpenChangeComplete: (nextOpen) => {
+				onOpenChangeCompleteRef.current?.(nextOpen);
+			},
+			delay: () => delayRef.current,
+			closeDelay: () => closeDelayRef.current,
+			disableHoverablePopup: () => disableHoverablePopupRef.current,
+			disabled: () => disabledRef.current,
+			sticky: () => stickyRef.current,
+			group: () => groupRef.current,
+			popupGroup: () => popupGroupRef.current
+		});
+		if (!isControlled && defaultOpen) instance.open();
+		return instance;
+	});
+	const [content, setContent] = useState();
+	const anchorName = useSafeId();
+	const popupId = useSafeId("tooltip");
+	useEffect(() => {
+		if (isUndefined(controlledOpen)) return;
+		const { active: inputOpen } = tooltip.input.current;
+		if (controlledOpen === inputOpen) return;
+		if (controlledOpen) tooltip.open();
+		else tooltip.close();
+	}, [controlledOpen, tooltip]);
+	useEffect(() => {
+		if (isUndefined(controls?.state.visible)) return;
+		if (controls.state.visible) return;
+		tooltip.close("imperative-action");
+	}, [controls?.state.visible, tooltip]);
+	useDestroy(tooltip);
+	const input = useSnapshot(tooltip.input);
+	core.setInput(input);
+	const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());
+	return /* @__PURE__ */ jsx(TooltipContextProvider, {
+		value: {
+			core,
+			tooltip,
+			state,
+			preferredSide,
+			setPositionedSide,
+			stateAttrMap: TooltipDataAttrs,
+			anchorName,
+			popupId,
+			content,
+			setContent,
+			boundary,
+			container
+		},
+		children
+	});
+}
+//#endregion
+export { TooltipRoot };