@videojs/react 10.0.0-alpha.6 → 10.0.0-alpha.9

package/dist/dev/ui/tooltip/tooltip-popup.d.ts

@@ -0,0 +1,15 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { TooltipState } from "@videojs/core";
+
+//#region src/ui/tooltip/tooltip-popup.d.ts
+interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}
+/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */
+declare const TooltipPopup: react.ForwardRefExoticComponent<Omit<TooltipPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare namespace TooltipPopup {
+  type Props = TooltipPopupProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipPopup, TooltipPopupProps };
+//# sourceMappingURL=tooltip-popup.d.ts.map

package/dist/dev/ui/tooltip/tooltip-popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-popup.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"mappings":";;;;;UAciB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAKtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA6HR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}

package/dist/dev/ui/tooltip/tooltip-popup.js

@@ -0,0 +1,97 @@
+'use client';
+
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useTooltipContext } from "./context.js";
+import { getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { TooltipCSSVars } from "@videojs/core";
+import { supportsAnchorPositioning } from "@videojs/utils/dom";
+
+//#region src/ui/tooltip/tooltip-popup.tsx
+const POPUP_RESET = {
+	position: "fixed",
+	inset: "auto",
+	margin: 0
+};
+/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */
+const TooltipPopup = forwardRef(function TooltipPopup({ render, className, style, ...elementProps }, forwardedRef) {
+	const { core, tooltip, state, stateAttrMap, anchorName, popupId } = useTooltipContext();
+	const internalRef = useRef(null);
+	const composedRef = useComposedRefs(forwardedRef, useCallback((el) => {
+		tooltip.setPopupElement(el);
+		if (el && supportsAnchorPositioning()) el.style.setProperty("position-anchor", `--${anchorName}`);
+	}, [tooltip, anchorName]), internalRef);
+	const posOpts = useMemo(() => ({
+		side: state.side,
+		align: state.align
+	}), [state.side, state.align]);
+	const anchorStyle = useMemo(() => {
+		if (!supportsAnchorPositioning()) return null;
+		const { positionAnchor: _, ...rest } = getAnchorPositionStyle(anchorName, posOpts, void 0, void 0, void 0, void 0, TooltipCSSVars);
+		return rest;
+	}, [anchorName, posOpts]);
+	const [manualStyle, setManualStyle] = useState(null);
+	useLayoutEffect(() => {
+		if (supportsAnchorPositioning()) return;
+		if (!state.open) {
+			setManualStyle(null);
+			return;
+		}
+		function measure() {
+			const triggerEl = tooltip.triggerElement;
+			const popupEl = internalRef.current;
+			if (!triggerEl || !popupEl) return;
+			setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), popupEl.getBoundingClientRect(), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl, TooltipCSSVars), TooltipCSSVars));
+		}
+		measure();
+		let rafId = 0;
+		function reposition() {
+			cancelAnimationFrame(rafId);
+			rafId = requestAnimationFrame(measure);
+		}
+		window.addEventListener("scroll", reposition, {
+			capture: true,
+			passive: true
+		});
+		window.addEventListener("resize", reposition);
+		return () => {
+			cancelAnimationFrame(rafId);
+			window.removeEventListener("scroll", reposition, true);
+			window.removeEventListener("resize", reposition);
+		};
+	}, [
+		state.open,
+		anchorName,
+		posOpts,
+		tooltip
+	]);
+	const positioningStyle = anchorStyle ?? manualStyle ?? POPUP_RESET;
+	if (!state.open) return null;
+	const { onFocusOut, ...restPopupProps } = tooltip.popupProps;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: composedRef,
+		props: [
+			{
+				id: popupId,
+				style: positioningStyle,
+				...core.getPopupAttrs(state)
+			},
+			{
+				...restPopupProps,
+				onBlur: onFocusOut
+			},
+			elementProps
+		]
+	});
+});
+
+//#endregion
+export { TooltipPopup };
+//# sourceMappingURL=tooltip-popup.js.map

package/dist/dev/ui/tooltip/tooltip-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-popup.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipState } from '@videojs/core';\nimport { TooltipCSSVars } from '@videojs/core';\nimport { getAnchorPositionStyle, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\nconst POPUP_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, tooltip, state, stateAttrMap, anchorName, popupId } = useTooltipContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const popupRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      tooltip.setPopupElement(el);\n      if (el && supportsAnchorPositioning()) {\n        el.style.setProperty('position-anchor', `--${anchorName}`);\n      }\n    },\n    [tooltip, anchorName]\n  );\n\n  const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n  // --- Positioning ---\n\n  const posOpts = useMemo(() => ({ side: state.side, align: state.align }), [state.side, state.align]);\n\n  // CSS Anchor Positioning — computed from state, no measurement needed.\n  // `position-anchor` is set imperatively in the ref callback above\n  // because React's style prop silently drops unrecognised CSS properties.\n  const anchorStyle = useMemo(() => {\n    if (!supportsAnchorPositioning()) return null;\n    const { positionAnchor: _, ...rest } = getAnchorPositionStyle(\n      anchorName,\n      posOpts,\n      undefined,\n      undefined,\n      undefined,\n      undefined,\n      TooltipCSSVars\n    );\n    return rest as CSSProperties;\n  }, [anchorName, posOpts]);\n\n  // Manual fallback — measure rects after layout, before paint.\n  const [manualStyle, setManualStyle] = useState<CSSProperties | null>(null);\n\n  useLayoutEffect(() => {\n    if (supportsAnchorPositioning()) return;\n    if (!state.open) {\n      setManualStyle(null);\n      return;\n    }\n\n    function measure(): void {\n      const triggerEl = tooltip.triggerElement;\n      const popupEl = internalRef.current;\n      if (!triggerEl || !popupEl) return;\n\n      const triggerRect = triggerEl.getBoundingClientRect();\n      const popupRect = popupEl.getBoundingClientRect();\n      const boundaryRect = document.documentElement.getBoundingClientRect();\n      const offsets = resolveOffsets(popupEl, TooltipCSSVars);\n\n      setManualStyle(\n        getAnchorPositionStyle(\n          anchorName,\n          posOpts,\n          triggerRect,\n          popupRect,\n          boundaryRect,\n          offsets,\n          TooltipCSSVars\n        ) as CSSProperties\n      );\n    }\n\n    measure();\n\n    // Recompute on scroll/resize so the tooltip tracks its trigger.\n    let rafId = 0;\n    function reposition(): void {\n      cancelAnimationFrame(rafId);\n      rafId = requestAnimationFrame(measure);\n    }\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true });\n    window.addEventListener('resize', reposition);\n\n    return () => {\n      cancelAnimationFrame(rafId);\n      window.removeEventListener('scroll', reposition, true);\n      window.removeEventListener('resize', reposition);\n    };\n  }, [state.open, anchorName, posOpts, tooltip]);\n\n  // Anchor path uses computed styles; manual path uses measured styles;\n  // fallback resets UA [popover] defaults until positioning is computed.\n  const positioningStyle = anchorStyle ?? manualStyle ?? POPUP_RESET;\n\n  // --- Visibility ---\n\n  if (!state.open) {\n    return null;\n  }\n\n  // Remap DOM focus events to React synthetic event names.\n  const { onFocusOut, ...restPopupProps } = tooltip.popupProps;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: composedRef,\n      props: [\n        {\n          id: popupId,\n          style: positioningStyle,\n          ...core.getPopupAttrs(state),\n        },\n        { ...restPopupProps, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace TooltipPopup {\n  export type Props = TooltipPopupProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,cAA6B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGlF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAYhD,MAAM,cAAc,gBAAgB,cAVnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;AAC3B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,mBAAmB,KAAK,aAAa;IAG9D,CAAC,SAAS,WAAW,CACtB,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;EACzC,MAAM,EAAE,gBAAgB,GAAG,GAAG,SAAS,uBACrC,YACA,SACA,QACA,QACA,QACA,QACA,eACD;AACD,SAAO;IACN,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBACE,YACA,SARgB,UAAU,uBAAuB,EACnC,QAAQ,uBAAuB,EAC5B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,SAAS,eAAe,EAUnD,eACD,CACF;;AAGH,WAAS;EAGT,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;AAGxC,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}

package/dist/dev/ui/tooltip/tooltip-provider.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from "react";
+import { TooltipGroupProps } from "@videojs/core";
+
+//#region src/ui/tooltip/tooltip-provider.d.ts
+interface TooltipProviderProps extends TooltipGroupProps {
+  children?: ReactNode;
+}
+declare function TooltipProvider({
+  delay,
+  closeDelay,
+  timeout,
+  children
+}: TooltipProviderProps): ReactNode;
+declare namespace TooltipProvider {
+  type Props = TooltipProviderProps;
+}
+//#endregion
+export { TooltipProvider, TooltipProviderProps };
+//# sourceMappingURL=tooltip-provider.d.ts.map

package/dist/dev/ui/tooltip/tooltip-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-provider.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-provider.tsx"],"mappings":";;;;UAQiB,oBAAA,SAA6B,iBAAA;EAC5C,QAAA,GAAW,SAAA;AAAA;AAAA,iBAGG,eAAA,CAAA;EAAkB,KAAA;EAAO,UAAA;EAAY,OAAA;EAAS;AAAA,GAAY,oBAAA,GAAuB,SAAA;AAAA,kBAOhF,eAAA;EAAA,KACH,KAAA,GAAQ,oBAAA;AAAA"}

package/dist/dev/ui/tooltip/tooltip-provider.js

@@ -0,0 +1,28 @@
+'use client';
+
+import { TooltipGroupContextProvider } from "./group-context.js";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { TooltipGroupCore } from "@videojs/core";
+
+//#region src/ui/tooltip/tooltip-provider.tsx
+function TooltipProvider({ delay, closeDelay, timeout, children }) {
+	const [group] = useState(() => new TooltipGroupCore({
+		delay,
+		closeDelay,
+		timeout
+	}));
+	group.setProps({
+		delay,
+		closeDelay,
+		timeout
+	});
+	return /* @__PURE__ */ jsx(TooltipGroupContextProvider, {
+		value: { group },
+		children
+	});
+}
+
+//#endregion
+export { TooltipProvider };
+//# sourceMappingURL=tooltip-provider.js.map

package/dist/dev/ui/tooltip/tooltip-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-provider.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-provider.tsx"],"sourcesContent":["'use client';\n\nimport { TooltipGroupCore, type TooltipGroupProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { TooltipGroupContextProvider } from './group-context';\n\nexport interface TooltipProviderProps extends TooltipGroupProps {\n  children?: ReactNode;\n}\n\nexport function TooltipProvider({ delay, closeDelay, timeout, children }: TooltipProviderProps): ReactNode {\n  const [group] = useState(() => new TooltipGroupCore({ delay, closeDelay, timeout }));\n  group.setProps({ delay, closeDelay, timeout });\n\n  return <TooltipGroupContextProvider value={{ group }}>{children}</TooltipGroupContextProvider>;\n}\n\nexport namespace TooltipProvider {\n  export type Props = TooltipProviderProps;\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,gBAAgB,EAAE,OAAO,YAAY,SAAS,YAA6C;CACzG,MAAM,CAAC,SAAS,eAAe,IAAI,iBAAiB;EAAE;EAAO;EAAY;EAAS,CAAC,CAAC;AACpF,OAAM,SAAS;EAAE;EAAO;EAAY;EAAS,CAAC;AAE9C,QAAO,oBAAC;EAA4B,OAAO,EAAE,OAAO;EAAG;GAAuC"}

package/dist/dev/ui/tooltip/tooltip-root.d.ts

@@ -0,0 +1,30 @@
+import { TooltipChangeDetails } from "@videojs/core/dom";
+import { ReactNode } from "react";
+import { TooltipProps } from "@videojs/core";
+
+//#region src/ui/tooltip/tooltip-root.d.ts
+interface TooltipRootProps extends TooltipProps {
+  /** Called when the tooltip open state changes (fires immediately, before animations). */
+  onOpenChange?: (open: boolean, details: TooltipChangeDetails) => void;
+  /** Called after open/close animations complete. */
+  onOpenChangeComplete?: (open: boolean) => void;
+  children?: ReactNode;
+}
+declare function TooltipRoot({
+  open: controlledOpen,
+  defaultOpen,
+  onOpenChange: onOpenChangeProp,
+  onOpenChangeComplete: onOpenChangeCompleteProp,
+  delay,
+  closeDelay,
+  disableHoverablePopup,
+  disabled,
+  children,
+  ...coreProps
+}: TooltipRootProps): ReactNode;
+declare namespace TooltipRoot {
+  type Props = TooltipRootProps;
+}
+//#endregion
+export { TooltipRoot, TooltipRootProps };
+//# sourceMappingURL=tooltip-root.d.ts.map

package/dist/dev/ui/tooltip/tooltip-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-root.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"mappings":";;;;;UAaiB,gBAAA,SAAyB,YAAA;;EAExC,YAAA,IAAgB,IAAA,WAAe,OAAA,EAAS,oBAAA;EAFR;EAIhC,oBAAA,IAAwB,IAAA;EACxB,QAAA,GAAW,SAAA;AAAA;AAAA,iBAGG,WAAA,CAAA;EACd,IAAA,EAAM,cAAA;EACN,WAAA;EACA,YAAA,EAAc,gBAAA;EACd,oBAAA,EAAsB,wBAAA;EACtB,KAAA;EACA,UAAA;EACA,qBAAA;EACA,QAAA;EACA,QAAA;EAAA,GACG;AAAA,GACF,gBAAA,GAAmB,SAAA;AAAA,kBAyEL,WAAA;EAAA,KACH,KAAA,GAAQ,gBAAA;AAAA"}

package/dist/dev/ui/tooltip/tooltip-root.js

@@ -0,0 +1,71 @@
+'use client';
+
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { TooltipContextProvider } from "./context.js";
+import { useTooltipGroup } from "./group-context.js";
+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 { TooltipCore, TooltipDataAttrs } from "@videojs/core";
+
+//#region src/ui/tooltip/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, children, ...coreProps }) {
+	const [core] = useState(() => new TooltipCore(coreProps));
+	core.setProps(coreProps);
+	const isControlled = controlledOpen !== void 0;
+	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 groupRef = useLatestRef(groupFromContext);
+	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,
+			group: () => groupRef.current
+		});
+		if (!isControlled && defaultOpen) instance.open();
+		return instance;
+	});
+	const anchorName = useSafeId();
+	const popupId = useSafeId("tooltip-");
+	useEffect(() => {
+		if (controlledOpen === void 0) return;
+		const { active: inputOpen } = tooltip.input.current;
+		if (controlledOpen === inputOpen) return;
+		if (controlledOpen) tooltip.open();
+		else tooltip.close();
+	}, [controlledOpen, tooltip]);
+	useEffect(() => () => tooltip.destroy(), [tooltip]);
+	const input = useSnapshot(tooltip.input);
+	core.setInput(input);
+	return /* @__PURE__ */ jsx(TooltipContextProvider, {
+		value: {
+			core,
+			tooltip,
+			state: core.getState(),
+			stateAttrMap: TooltipDataAttrs,
+			anchorName,
+			popupId
+		},
+		children
+	});
+}
+
+//#endregion
+export { TooltipRoot };
+//# sourceMappingURL=tooltip-root.js.map

package/dist/dev/ui/tooltip/tooltip-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-root.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-root.tsx"],"sourcesContent":["'use client';\n\nimport { type TooltipProps as CoreTooltipProps, TooltipCore, TooltipDataAttrs } from '@videojs/core';\nimport { createTooltip, createTransition, type TooltipChangeDetails } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { TooltipContextProvider } from './context';\nimport { useTooltipGroup } from './group-context';\n\nexport interface TooltipRootProps extends CoreTooltipProps {\n  /** Called when the tooltip open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean, details: TooltipChangeDetails) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function TooltipRoot({\n  open: controlledOpen,\n  defaultOpen = TooltipCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  delay = TooltipCore.defaultProps.delay,\n  closeDelay = TooltipCore.defaultProps.closeDelay,\n  disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup,\n  disabled = TooltipCore.defaultProps.disabled,\n  children,\n  ...coreProps\n}: TooltipRootProps): ReactNode {\n  const [core] = useState(() => new TooltipCore(coreProps));\n  core.setProps(coreProps);\n\n  const isControlled = controlledOpen !== undefined;\n\n  const groupFromContext = useTooltipGroup();\n\n  // Keep refs that always point to the latest values so the\n  // createTooltip closure never reads stale props.\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const delayRef = useLatestRef(delay);\n  const closeDelayRef = useLatestRef(closeDelay);\n  const disableHoverablePopupRef = useLatestRef(disableHoverablePopup);\n  const disabledRef = useLatestRef(disabled);\n  const groupRef = useLatestRef(groupFromContext);\n\n  const [tooltip] = useState(() => {\n    const instance = createTooltip({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n        onOpenChangeRef.current?.(nextOpen, details);\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n      delay: () => delayRef.current,\n      closeDelay: () => closeDelayRef.current,\n      disableHoverablePopup: () => disableHoverablePopupRef.current,\n      disabled: () => disabledRef.current,\n      group: () => groupRef.current,\n    });\n\n    // Apply defaultOpen on creation (uncontrolled only)\n    if (!isControlled && defaultOpen) {\n      instance.open();\n    }\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const popupId = useSafeId('tooltip-');\n\n  // Sync controlled open prop -> internal input state.\n  useEffect(() => {\n    if (controlledOpen === undefined) return;\n\n    const { active: inputOpen } = tooltip.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) {\n      tooltip.open();\n    } else {\n      tooltip.close();\n    }\n  }, [controlledOpen, tooltip]);\n\n  // Cleanup on unmount\n  useEffect(() => () => tooltip.destroy(), [tooltip]);\n\n  const input = useSnapshot(tooltip.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  return (\n    <TooltipContextProvider value={{ core, tooltip, state, stateAttrMap: TooltipDataAttrs, anchorName, popupId }}>\n      {children}\n    </TooltipContextProvider>\n  );\n}\n\nexport namespace TooltipRoot {\n  export type Props = TooltipRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;AAqBA,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,wBAAwB,YAAY,aAAa,uBACjD,WAAW,YAAY,aAAa,UACpC,UACA,GAAG,aAC2B;CAC9B,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,UAAU,CAAC;AACzD,MAAK,SAAS,UAAU;CAExB,MAAM,eAAe,mBAAmB;CAExC,MAAM,mBAAmB,iBAAiB;CAI1C,MAAM,kBAAkB,aAAa,iBAAiB;CACtD,MAAM,0BAA0B,aAAa,yBAAyB;CACtE,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,gBAAgB,aAAa,WAAW;CAC9C,MAAM,2BAA2B,aAAa,sBAAsB;CACpE,MAAM,cAAc,aAAa,SAAS;CAC1C,MAAM,WAAW,aAAa,iBAAiB;CAE/C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,kBAAkB;GAC9B,eAAe,UAAmB,YAAkC;AAClE,oBAAgB,UAAU,UAAU,QAAQ;;GAE9C,uBAAuB,aAAsB;AAC3C,4BAAwB,UAAU,SAAS;;GAE7C,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,6BAA6B,yBAAyB;GACtD,gBAAgB,YAAY;GAC5B,aAAa,SAAS;GACvB,CAAC;AAGF,MAAI,CAAC,gBAAgB,YACnB,UAAS,MAAM;AAGjB,SAAO;GACP;CAEF,MAAM,aAAa,WAAW;CAC9B,MAAM,UAAU,UAAU,WAAW;AAGrC,iBAAgB;AACd,MAAI,mBAAmB,OAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;AAC5C,MAAI,mBAAmB,UAAW;AAElC,MAAI,eACF,SAAQ,MAAM;MAEd,SAAQ,OAAO;IAEhB,CAAC,gBAAgB,QAAQ,CAAC;AAG7B,uBAAsB,QAAQ,SAAS,EAAE,CAAC,QAAQ,CAAC;CAEnD,MAAM,QAAQ,YAAY,QAAQ,MAAM;AACxC,MAAK,SAAS,MAAM;AAGpB,QACE,oBAAC;EAAuB,OAAO;GAAE;GAAM;GAAS,OAHpC,KAAK,UAAU;GAG4B,cAAc;GAAkB;GAAY;GAAS;EACzG;GACsB"}

package/dist/dev/ui/tooltip/tooltip-trigger.d.ts

@@ -0,0 +1,15 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { TooltipState } from "@videojs/core";
+
+//#region src/ui/tooltip/tooltip-trigger.d.ts
+interface TooltipTriggerProps extends UIComponentProps<'button', TooltipState> {}
+/** Element that triggers the tooltip on hover and focus. Renders a `<button>` element. */
+declare const TooltipTrigger: react.ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare namespace TooltipTrigger {
+  type Props = TooltipTriggerProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipTrigger, TooltipTriggerProps };
+//# sourceMappingURL=tooltip-trigger.d.ts.map

package/dist/dev/ui/tooltip/tooltip-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-trigger.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-trigger.tsx"],"mappings":";;;;;UAUiB,mBAAA,SAA4B,gBAAA,WAA2B,YAAA;;cAG3D,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,mBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAwCV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}

package/dist/dev/ui/tooltip/tooltip-trigger.js

@@ -0,0 +1,42 @@
+'use client';
+
+import { renderElement } from "../../utils/use-render.js";
+import { useTooltipContext } from "./context.js";
+import { forwardRef, useCallback } from "react";
+import { supportsAnchorPositioning } from "@videojs/utils/dom";
+
+//#region src/ui/tooltip/tooltip-trigger.tsx
+/** Element that triggers the tooltip on hover and focus. Renders a `<button>` element. */
+const TooltipTrigger = forwardRef(function TooltipTrigger({ render, className, style, ...elementProps }, forwardedRef) {
+	const { core, tooltip, state, stateAttrMap, anchorName, popupId } = useTooltipContext();
+	const triggerRef = useCallback((el) => {
+		tooltip.setTriggerElement(el);
+		if (el && supportsAnchorPositioning()) el.style.setProperty("anchor-name", `--${anchorName}`);
+	}, [tooltip, anchorName]);
+	const { onFocusIn, onFocusOut, ...restTriggerProps } = tooltip.triggerProps;
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef, triggerRef],
+		props: [
+			{
+				type: "button",
+				...core.getTriggerAttrs(state, popupId)
+			},
+			{
+				...restTriggerProps,
+				onFocus: onFocusIn,
+				onBlur: onFocusOut
+			},
+			elementProps
+		]
+	});
+});
+
+//#endregion
+export { TooltipTrigger };
+//# sourceMappingURL=tooltip-trigger.js.map

package/dist/dev/ui/tooltip/tooltip-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-trigger.js","names":[],"sources":["../../../../src/ui/tooltip/tooltip-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipState } from '@videojs/core';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipTriggerProps extends UIComponentProps<'button', TooltipState> {}\n\n/** Element that triggers the tooltip on hover and focus. Renders a `<button>` element. */\nexport const TooltipTrigger = forwardRef<HTMLButtonElement, TooltipTriggerProps>(function TooltipTrigger(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, tooltip, state, stateAttrMap, anchorName, popupId } = useTooltipContext();\n\n  const triggerRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      tooltip.setTriggerElement(el);\n      if (el && supportsAnchorPositioning()) {\n        el.style.setProperty('anchor-name', `--${anchorName}`);\n      }\n    },\n    [tooltip, anchorName]\n  );\n\n  // Remap DOM focus events to React synthetic event names.\n  // createTooltip() uses onFocusIn/onFocusOut (matching DOM focusin/focusout),\n  // but React maps those to onFocus/onBlur.\n  const { onFocusIn, onFocusOut, ...restTriggerProps } = tooltip.triggerProps;\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, triggerRef],\n      props: [\n        {\n          type: 'button' as const,\n          ...core.getTriggerAttrs(state, popupId),\n        },\n        { ...restTriggerProps, onFocus: onFocusIn, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace TooltipTrigger {\n  export type Props = TooltipTriggerProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;;;;;;AAaA,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CAEvF,MAAM,aAAa,aAChB,OAAiC;AAChC,UAAQ,kBAAkB,GAAG;AAC7B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,eAAe,KAAK,aAAa;IAG1D,CAAC,SAAS,WAAW,CACtB;CAKD,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;AAE/D,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK,CAAC,cAAc,WAAW;EAC/B,OAAO;GACL;IACE,MAAM;IACN,GAAG,KAAK,gBAAgB,OAAO,QAAQ;IACxC;GACD;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;IAAY;GAC/D;GACD;EACF,CACF;EACD"}

package/dist/dev/ui/volume-slider/index.parts.d.ts

@@ -1,4 +1,5 @@
 import { SliderFill, SliderFillProps } from "../slider/slider-fill.js";
+import { SliderPreview, SliderPreviewProps } from "../slider/slider-preview.js";
 import { SliderThumb, SliderThumbProps } from "../slider/slider-thumb.js";
 import { SliderTrack, SliderTrackProps } from "../slider/slider-track.js";
 import { SliderValue, SliderValueProps } from "../slider/slider-value.js";
@@ -7,7 +8,7 @@ import { VolumeSliderRoot, VolumeSliderRootProps } from "./volume-slider-root.js
 
 //#region src/ui/volume-slider/index.parts.d.ts
 declare namespace index_parts_d_exports {
-  export { SliderFill as Fill, SliderFillProps as FillProps, VolumeSliderRoot as Root, VolumeSliderRootProps as RootProps, SliderThumb as Thumb, SliderThumbProps as ThumbProps, SliderTrack as Track, SliderTrackProps as TrackProps, SliderValue as Value, SliderValueProps as ValueProps };
+  export { SliderFill as Fill, SliderFillProps as FillProps, SliderPreview as Preview, SliderPreviewProps as PreviewProps, VolumeSliderRoot as Root, VolumeSliderRootProps as RootProps, SliderThumb as Thumb, SliderThumbProps as ThumbProps, SliderTrack as Track, SliderTrackProps as TrackProps, SliderValue as Value, SliderValueProps as ValueProps };
 }
 //#endregion
 export { index_parts_d_exports };

package/dist/dev/ui/volume-slider/index.parts.js

@@ -1,5 +1,6 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { SliderFill } from "../slider/slider-fill.js";
+import { SliderPreview } from "../slider/slider-preview.js";
 import { SliderThumb } from "../slider/slider-thumb.js";
 import { SliderTrack } from "../slider/slider-track.js";
 import { SliderValue } from "../slider/slider-value.js";
@@ -8,6 +9,7 @@ import { VolumeSliderRoot } from "./volume-slider-root.js";
 //#region src/ui/volume-slider/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Fill: () => SliderFill,
+	Preview: () => SliderPreview,
 	Root: () => VolumeSliderRoot,
 	Thumb: () => SliderThumb,
 	Track: () => SliderTrack,

package/dist/dev/ui/volume-slider/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-slider/index.parts.ts"],"sourcesContent":["export {\n  Fill,\n  type FillProps,\n  Thumb,\n  type ThumbProps,\n  Track,\n  type TrackProps,\n  Value,\n  type ValueProps,\n} from '../slider/index.parts';\nexport { VolumeSliderRoot as Root, type VolumeSliderRootProps as RootProps } from './volume-slider-root';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-slider/index.parts.ts"],"sourcesContent":["export {\n  Fill,\n  type FillProps,\n  Preview,\n  type PreviewProps,\n  Thumb,\n  type ThumbProps,\n  Track,\n  type TrackProps,\n  Value,\n  type ValueProps,\n} from '../slider/index.parts';\nexport { VolumeSliderRoot as Root, type VolumeSliderRootProps as RootProps } from './volume-slider-root';\n"],"mappings":""}

package/dist/dev/ui/volume-slider/volume-slider-root.js

@@ -15,8 +15,8 @@ const noopVolume = {
 	volume: 0,
 	muted: false,
 	volumeAvailability: "unsupported",
-	changeVolume: () => 0,
-	toggleMute: () => false
+	setVolume: () => 0,
+	toggleMuted: () => false
 };
 const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, forwardedRef) {
 	const { render, className, style, label, orientation, step = VolumeSliderCore.defaultProps.step, largeStep = VolumeSliderCore.defaultProps.largeStep, disabled, thumbAlignment, onDragStart, onDragEnd, ...elementProps } = componentProps;
@@ -45,10 +45,10 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
 		getCSSVars: getSliderCSSVars,
 		onValueChange: (percent) => {
-			volumeRef.current?.changeVolume(percent / 100);
+			volumeRef.current?.setVolume(percent / 100);
 		},
 		onValueCommit: (percent) => {
-			volumeRef.current?.changeVolume(percent / 100);
+			volumeRef.current?.setVolume(percent / 100);
 		},
 		onDragStart,
 		onDragEnd

package/dist/dev/ui/volume-slider/volume-slider-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"volume-slider-root.js","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { SliderDataAttrs, VolumeSliderCore } from '@videojs/core';\nimport { getSliderCSSVars, logMissingFeature, selectVolume } from '@videojs/core/dom';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopVolume = {\n  volume: 0,\n  muted: false,\n  volumeAvailability: 'unsupported' as const,\n  changeVolume: () => 0,\n  toggleMute: () => false,\n};\n\nexport interface VolumeSliderRootProps extends UIComponentProps<'div', VolumeSliderCore.State>, VolumeSliderCore.Props {\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const VolumeSliderRoot = forwardRef<HTMLDivElement, VolumeSliderRootProps>(\n  function VolumeSliderRoot(componentProps, forwardedRef) {\n    const {\n      render,\n      className,\n      style,\n      label,\n      orientation,\n      step = VolumeSliderCore.defaultProps.step,\n      largeStep = VolumeSliderCore.defaultProps.largeStep,\n      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      ...elementProps\n    } = componentProps;\n\n    const volume = usePlayer(selectVolume);\n\n    const [core] = useState(() => new VolumeSliderCore());\n    core.setProps({ label, orientation, step, largeStep, disabled, thumbAlignment });\n\n    // Keep a ref to the latest volume state for callbacks.\n    const volumeRef = useLatestRef(volume);\n\n    const { state, cssVars, rootRef, thumbRef, rootProps, thumbProps } = useSlider<VolumeSliderCore.State>({\n      computeState: (input) => {\n        core.setInput(input);\n        core.setMedia(volume ?? noopVolume);\n        return core.getState();\n      },\n      getPercent: () => (volume ? volume.volume * 100 : 0),\n      getStepPercent: () => core.getStepPercent(),\n      getLargeStepPercent: () => core.getLargeStepPercent(),\n      orientation,\n      disabled,\n      adjustPercent: (rawPercent, thumbSize, trackSize) =>\n        core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n      getCSSVars: getSliderCSSVars,\n      onValueChange: (percent) => {\n        volumeRef.current?.changeVolume(percent / 100);\n      },\n      onValueCommit: (percent) => {\n        volumeRef.current?.changeVolume(percent / 100);\n      },\n      onDragStart,\n      onDragEnd,\n    });\n\n    if (!volume) {\n      if (__DEV__) logMissingFeature('VolumeSlider', 'volume');\n      return null;\n    }\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.valueFromPercent(state.pointerPercent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: SliderDataAttrs,\n          getAttrs: (sliderState) => core.getAttrs(sliderState as VolumeSliderCore.State),\n          formatValue: (value) => `${Math.round(value)}%`,\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: SliderDataAttrs,\n            ref: [forwardedRef, rootRef],\n            props: [{ style: cssVars }, rootProps, elementProps],\n          }\n        )}\n      </SliderProvider>\n    );\n  }\n);\n\nexport namespace VolumeSliderRoot {\n  export type Props = VolumeSliderRootProps;\n  export type State = VolumeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,aAAa;CACjB,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,oBAAoB;CACpB,kBAAkB;CACnB;AAOD,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,gBAAgB,cAAc;CACtD,MAAM,EACJ,QACA,WACA,OACA,OACA,aACA,OAAO,iBAAiB,aAAa,MACrC,YAAY,iBAAiB,aAAa,WAC1C,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,kBAAkB,CAAC;AACrD,MAAK,SAAS;EAAE;EAAO;EAAa;EAAM;EAAW;EAAU;EAAgB,CAAC;CAGhF,MAAM,YAAY,aAAa,OAAO;CAEtC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,eAAe,UAAkC;EACrG,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,QAAK,SAAS,UAAU,WAAW;AACnC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,SAAS,OAAO,SAAS,MAAM;EAClD,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;AAC1B,aAAU,SAAS,aAAa,UAAU,IAAI;;EAEhD,gBAAgB,YAAY;AAC1B,aAAU,SAAS,aAAa,UAAU,IAAI;;EAEhD;EACA;EACD,CAAC;AAEF,KAAI,CAAC,QAAQ;AACE,oBAAkB,gBAAgB,SAAS;AACxD,SAAO;;AAGT,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAsC;GAC/E,cAAc,UAAU,GAAG,KAAK,MAAM,MAAM,CAAC;GAC9C;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO,SAAS;IAAE;IAAW;IAAa;GACrD,CACF;GACc;EAGtB"}
+{"version":3,"file":"volume-slider-root.js","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { SliderDataAttrs, VolumeSliderCore } from '@videojs/core';\nimport { getSliderCSSVars, logMissingFeature, selectVolume } from '@videojs/core/dom';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopVolume = {\n  volume: 0,\n  muted: false,\n  volumeAvailability: 'unsupported' as const,\n  setVolume: () => 0,\n  toggleMuted: () => false,\n};\n\nexport interface VolumeSliderRootProps extends UIComponentProps<'div', VolumeSliderCore.State>, VolumeSliderCore.Props {\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const VolumeSliderRoot = forwardRef<HTMLDivElement, VolumeSliderRootProps>(\n  function VolumeSliderRoot(componentProps, forwardedRef) {\n    const {\n      render,\n      className,\n      style,\n      label,\n      orientation,\n      step = VolumeSliderCore.defaultProps.step,\n      largeStep = VolumeSliderCore.defaultProps.largeStep,\n      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      ...elementProps\n    } = componentProps;\n\n    const volume = usePlayer(selectVolume);\n\n    const [core] = useState(() => new VolumeSliderCore());\n    core.setProps({ label, orientation, step, largeStep, disabled, thumbAlignment });\n\n    // Keep a ref to the latest volume state for callbacks.\n    const volumeRef = useLatestRef(volume);\n\n    const { state, cssVars, rootRef, thumbRef, rootProps, thumbProps } = useSlider<VolumeSliderCore.State>({\n      computeState: (input) => {\n        core.setInput(input);\n        core.setMedia(volume ?? noopVolume);\n        return core.getState();\n      },\n      getPercent: () => (volume ? volume.volume * 100 : 0),\n      getStepPercent: () => core.getStepPercent(),\n      getLargeStepPercent: () => core.getLargeStepPercent(),\n      orientation,\n      disabled,\n      adjustPercent: (rawPercent, thumbSize, trackSize) =>\n        core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n      getCSSVars: getSliderCSSVars,\n      onValueChange: (percent) => {\n        volumeRef.current?.setVolume(percent / 100);\n      },\n      onValueCommit: (percent) => {\n        volumeRef.current?.setVolume(percent / 100);\n      },\n      onDragStart,\n      onDragEnd,\n    });\n\n    if (!volume) {\n      if (__DEV__) logMissingFeature('VolumeSlider', 'volume');\n      return null;\n    }\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.valueFromPercent(state.pointerPercent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: SliderDataAttrs,\n          getAttrs: (sliderState) => core.getAttrs(sliderState as VolumeSliderCore.State),\n          formatValue: (value) => `${Math.round(value)}%`,\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: SliderDataAttrs,\n            ref: [forwardedRef, rootRef],\n            props: [{ style: cssVars }, rootProps, elementProps],\n          }\n        )}\n      </SliderProvider>\n    );\n  }\n);\n\nexport namespace VolumeSliderRoot {\n  export type Props = VolumeSliderRootProps;\n  export type State = VolumeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;AAaA,MAAM,aAAa;CACjB,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,iBAAiB;CACjB,mBAAmB;CACpB;AAOD,MAAa,mBAAmB,WAC9B,SAAS,iBAAiB,gBAAgB,cAAc;CACtD,MAAM,EACJ,QACA,WACA,OACA,OACA,aACA,OAAO,iBAAiB,aAAa,MACrC,YAAY,iBAAiB,aAAa,WAC1C,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,kBAAkB,CAAC;AACrD,MAAK,SAAS;EAAE;EAAO;EAAa;EAAM;EAAW;EAAU;EAAgB,CAAC;CAGhF,MAAM,YAAY,aAAa,OAAO;CAEtC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,eAAe,UAAkC;EACrG,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,QAAK,SAAS,UAAU,WAAW;AACnC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,SAAS,OAAO,SAAS,MAAM;EAClD,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;AAC1B,aAAU,SAAS,UAAU,UAAU,IAAI;;EAE7C,gBAAgB,YAAY;AAC1B,aAAU,SAAS,UAAU,UAAU,IAAI;;EAE7C;EACA;EACD,CAAC;AAEF,KAAI,CAAC,QAAQ;AACE,oBAAkB,gBAAgB,SAAS;AACxD,SAAO;;AAGT,QACE,oBAAC;EACC,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAsC;GAC/E,cAAc,UAAU,GAAG,KAAK,MAAM,MAAM,CAAC;GAC9C;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO,SAAS;IAAE;IAAW;IAAa;GACrD,CACF;GACc;EAGtB"}

package/dist/dev/utils/use-destroy.js

@@ -0,0 +1,33 @@
+'use client';
+
+import { useEffect, useRef } from "react";
+
+//#region src/utils/use-destroy.ts
+/**
+* Destroy an instance on unmount, deferring destruction to survive React
+* StrictMode's simulated unmount/re-mount cycle.
+*
+* StrictMode runs effects, then immediately runs cleanup, then re-runs
+* effects — all synchronously. By deferring `destroy()` to a macrotask,
+* the re-mount effect can cancel it before it fires.
+*
+* @param instance - Object with a `destroy()` method.
+* @param setup - Optional setup called on first mount. Skipped on StrictMode
+*   re-mount since the previous setup was never torn down.
+*/
+function useDestroy(instance, setup) {
+	const pendingRef = useRef(null);
+	useEffect(() => {
+		if (pendingRef.current !== null) {
+			clearTimeout(pendingRef.current);
+			pendingRef.current = null;
+		} else setup?.();
+		return () => {
+			pendingRef.current = setTimeout(() => instance.destroy(), 0);
+		};
+	}, [instance, setup]);
+}
+
+//#endregion
+export { useDestroy };
+//# sourceMappingURL=use-destroy.js.map

package/dist/dev/utils/use-destroy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\n\ninterface Destroyable {\n  destroy(): void;\n}\n\n/**\n * Destroy an instance on unmount, deferring destruction to survive React\n * StrictMode's simulated unmount/re-mount cycle.\n *\n * StrictMode runs effects, then immediately runs cleanup, then re-runs\n * effects — all synchronously. By deferring `destroy()` to a macrotask,\n * the re-mount effect can cancel it before it fires.\n *\n * @param instance - Object with a `destroy()` method.\n * @param setup - Optional setup called on first mount. Skipped on StrictMode\n *   re-mount since the previous setup was never torn down.\n */\nexport function useDestroy(instance: Destroyable, setup?: () => void): void {\n  const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (pendingRef.current !== null) {\n      clearTimeout(pendingRef.current);\n      pendingRef.current = null;\n    } else {\n      setup?.();\n    }\n\n    return () => {\n      pendingRef.current = setTimeout(() => instance.destroy(), 0);\n    };\n  }, [instance, setup]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,SAAgB,WAAW,UAAuB,OAA0B;CAC1E,MAAM,aAAa,OAA6C,KAAK;AAErE,iBAAgB;AACd,MAAI,WAAW,YAAY,MAAM;AAC/B,gBAAa,WAAW,QAAQ;AAChC,cAAW,UAAU;QAErB,UAAS;AAGX,eAAa;AACX,cAAW,UAAU,iBAAiB,SAAS,SAAS,EAAE,EAAE;;IAE7D,CAAC,UAAU,MAAM,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/react",
   "type": "module",
-  "version": "10.0.0-alpha.6",
+  "version": "10.0.0-alpha.9",
   "description": "React library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -27,21 +27,47 @@
       "development": "./dist/dev/media/*/index.js",
       "default": "./dist/default/media/*/index.js"
     },
-    "./*.css": "./dist/default/presets/*.css",
-    "./*": {
-      "types": "./dist/dev/presets/*/index.d.ts",
-      "development": "./dist/dev/presets/*/index.js",
-      "default": "./dist/default/presets/*/index.js"
+    "./video": {
+      "types": "./dist/dev/presets/video/index.d.ts",
+      "development": "./dist/dev/presets/video/index.js",
+      "default": "./dist/default/presets/video/index.js"
+    },
+    "./video/*.css": "./dist/default/presets/video/*.css",
+    "./video/*": {
+      "types": "./dist/dev/presets/video/*.d.ts",
+      "development": "./dist/dev/presets/video/*.js",
+      "default": "./dist/default/presets/video/*.js"
+    },
+    "./audio": {
+      "types": "./dist/dev/presets/audio/index.d.ts",
+      "development": "./dist/dev/presets/audio/index.js",
+      "default": "./dist/default/presets/audio/index.js"
+    },
+    "./audio/*.css": "./dist/default/presets/audio/*.css",
+    "./audio/*": {
+      "types": "./dist/dev/presets/audio/*.d.ts",
+      "development": "./dist/dev/presets/audio/*.js",
+      "default": "./dist/default/presets/audio/*.js"
+    },
+    "./background": {
+      "types": "./dist/dev/presets/background/index.d.ts",
+      "development": "./dist/dev/presets/background/index.js",
+      "default": "./dist/default/presets/background/index.js"
+    },
+    "./background/*.css": "./dist/default/presets/background/*.css",
+    "./background/*": {
+      "types": "./dist/dev/presets/background/*.d.ts",
+      "development": "./dist/dev/presets/background/*.js",
+      "default": "./dist/default/presets/background/*.js"
     }
   },
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "@videojs/core": "10.0.0-alpha.6",
-    "@videojs/skins": "10.0.0-alpha.4",
-    "@videojs/utils": "10.0.0-alpha.6",
-    "@videojs/store": "10.0.0-alpha.6"
+    "@videojs/core": "10.0.0-alpha.9",
+    "@videojs/utils": "10.0.0-alpha.9",
+    "@videojs/store": "10.0.0-alpha.9"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
@@ -52,7 +78,8 @@
     "tsdown": "^0.20.3",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4",
-    "@videojs/icons": "10.0.0-alpha.6"
+    "@videojs/skins": "10.0.0-alpha.4",
+    "@videojs/icons": "10.0.0-alpha.9"
   },
   "publishConfig": {
     "access": "public"