@videojs/react 0.1.0-preview.8 → 10.0.0-alpha.11

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.d.ts

@@ -0,0 +1,2 @@
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as VolumeSlider };

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

@@ -0,0 +1,3 @@
+import { index_parts_exports } from "./index.parts.js";
+
+export { index_parts_exports as VolumeSlider };

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

@@ -0,0 +1,14 @@
+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";
+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, 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 };
+//# sourceMappingURL=index.parts.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../../src/ui/volume-slider/index.parts.ts"],"mappings":""}

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

@@ -0,0 +1,21 @@
+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";
+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,
+	Value: () => SliderValue
+});
+
+//#endregion
+export { index_parts_exports };
+//# sourceMappingURL=index.parts.js.map

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,17 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { VolumeSliderCore } from "@videojs/core";
+
+//#region src/ui/volume-slider/volume-slider-root.d.ts
+interface VolumeSliderRootProps extends UIComponentProps<'div', VolumeSliderCore.State>, VolumeSliderCore.Props {
+  onDragStart?: (() => void) | undefined;
+  onDragEnd?: (() => void) | undefined;
+}
+declare const VolumeSliderRoot: react.ForwardRefExoticComponent<Omit<VolumeSliderRootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare namespace VolumeSliderRoot {
+  type Props = VolumeSliderRootProps;
+  type State = VolumeSliderCore.State;
+}
+//#endregion
+export { VolumeSliderRoot, VolumeSliderRootProps };
+//# sourceMappingURL=volume-slider-root.d.ts.map

package/dist/dev/ui/volume-slider/volume-slider-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-slider-root.d.ts","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"mappings":";;;;;UAqBiB,qBAAA,SAA8B,gBAAA,QAAwB,gBAAA,CAAiB,KAAA,GAAQ,gBAAA,CAAiB,KAAA;EAC/G,WAAA;EACA,SAAA;AAAA;AAAA,cAGW,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,qBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAiFZ,gBAAA;EAAA,KACH,KAAA,GAAQ,qBAAA;EAAA,KACR,KAAA,GAAQ,gBAAA,CAAiB,KAAA;AAAA"}

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

@@ -0,0 +1,92 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useSlider } from "../hooks/use-slider.js";
+import { SliderProvider } from "../slider/context.js";
+import { getSliderCSSVars, logMissingFeature, selectVolume } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { SliderDataAttrs, VolumeSliderCore } from "@videojs/core";
+
+//#region src/ui/volume-slider/volume-slider-root.tsx
+const noopVolume = {
+	volume: 0,
+	muted: false,
+	volumeAvailability: "unsupported",
+	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;
+	const volume = usePlayer(selectVolume);
+	const [core] = useState(() => new VolumeSliderCore());
+	core.setProps({
+		label,
+		orientation,
+		step,
+		largeStep,
+		disabled,
+		thumbAlignment
+	});
+	const volumeRef = useLatestRef(volume);
+	const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
+		computeState: (input) => {
+			core.setInput(input);
+			core.setMedia(volume ?? noopVolume);
+			return core.getState();
+		},
+		getPercent: () => volume ? volume.volume * 100 : 0,
+		getStepPercent: () => core.getStepPercent(),
+		getLargeStepPercent: () => core.getLargeStepPercent(),
+		orientation,
+		disabled,
+		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
+		getCSSVars: getSliderCSSVars,
+		onValueChange: (percent) => {
+			volumeRef.current?.setVolume(percent / 100);
+		},
+		onValueCommit: (percent) => {
+			volumeRef.current?.setVolume(percent / 100);
+		},
+		onDragStart,
+		onDragEnd
+	});
+	if (!volume) {
+		logMissingFeature("VolumeSlider", "volume");
+		return null;
+	}
+	return /* @__PURE__ */ jsx(SliderProvider, {
+		value: {
+			state,
+			pointerValue: core.valueFromPercent(state.pointerPercent),
+			thumbRef,
+			thumbProps,
+			stateAttrMap: SliderDataAttrs,
+			getAttrs: (sliderState) => core.getAttrs(sliderState),
+			formatValue: (value) => `${Math.round(value)}%`
+		},
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: SliderDataAttrs,
+			ref: [forwardedRef, rootRef],
+			props: [
+				{ style: {
+					...cssVars,
+					...rootStyle
+				} },
+				rootProps,
+				elementProps
+			]
+		})
+	});
+});
+
+//#endregion
+export { VolumeSliderRoot };
+//# sourceMappingURL=volume-slider-root.js.map

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

@@ -0,0 +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  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, rootStyle, 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, ...rootStyle } }, 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,WAAW,eAAe,UAAkC;EAChH,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;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;GACc;EAGtB"}

package/dist/dev/utils/attach-media-element.js

@@ -0,0 +1,12 @@
+//#region src/utils/attach-media-element.ts
+function attachMediaElement(media) {
+	return (element) => {
+		if (element) media.attach(element);
+		else media.detach();
+		return () => media.detach();
+	};
+}
+
+//#endregion
+export { attachMediaElement };
+//# sourceMappingURL=attach-media-element.js.map

package/dist/dev/utils/attach-media-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attach-media-element.js","names":[],"sources":["../../../src/utils/attach-media-element.ts"],"sourcesContent":["interface Attachable {\n  attach(target: EventTarget): void;\n  detach(): void;\n}\n\nexport function attachMediaElement<T extends HTMLVideoElement>(media: Attachable): (element: T | null) => void {\n  return (element: T | null) => {\n    if (element) {\n      media.attach(element);\n    } else {\n      media.detach();\n    }\n    // React 19+ accepts a cleanup function as the return value\n    return () => media.detach();\n  };\n}\n"],"mappings":";AAKA,SAAgB,mBAA+C,OAAgD;AAC7G,SAAQ,YAAsB;AAC5B,MAAI,QACF,OAAM,OAAO,QAAQ;MAErB,OAAM,QAAQ;AAGhB,eAAa,MAAM,QAAQ"}

package/dist/dev/utils/media-props.js

@@ -0,0 +1,11 @@
+//#region src/utils/media-props.ts
+function mediaProps(media, props) {
+	const { src, ...remainingProps } = props;
+	if (props.preload && media.preload !== props.preload) media.preload = props.preload;
+	if (media.src !== src) media.src = src ?? "";
+	return remainingProps;
+}
+
+//#endregion
+export { mediaProps };
+//# sourceMappingURL=media-props.js.map

package/dist/dev/utils/media-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-props.js","names":[],"sources":["../../../src/utils/media-props.ts"],"sourcesContent":["import type { MediaApi } from '@videojs/core/dom';\nimport type { VideoHTMLAttributes } from 'react';\n\ninterface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport function mediaProps(media: MediaApi, props: VideoProps) {\n  const { src, ...remainingProps } = props;\n\n  // Preload can still be passed as a prop to the native media element\n  if (props.preload && media.preload !== props.preload) {\n    media.preload = props.preload as '' | 'none' | 'metadata' | 'auto';\n  }\n\n  if (media.src !== src) {\n    media.src = src ?? '';\n  }\n\n  // The remaining props are passed to the native media element\n  return remainingProps;\n}\n"],"mappings":";AAKA,SAAgB,WAAW,OAAiB,OAAmB;CAC7D,MAAM,EAAE,KAAK,GAAG,mBAAmB;AAGnC,KAAI,MAAM,WAAW,MAAM,YAAY,MAAM,QAC3C,OAAM,UAAU,MAAM;AAGxB,KAAI,MAAM,QAAQ,IAChB,OAAM,MAAM,OAAO;AAIrB,QAAO"}

package/dist/dev/utils/merge-props.d.ts

@@ -0,0 +1,26 @@
+import { ComponentPropsWithRef, ElementType } from "react";
+
+//#region src/utils/merge-props.d.ts
+type Props<T extends ElementType = ElementType> = ComponentPropsWithRef<T>;
+/**
+ * Merge multiple props objects.
+ *
+ * - Event handlers (on*): chained - external first, ours second
+ * - className: concatenated
+ * - style: merged objects (external wins conflicts)
+ * - other: last one wins
+ *
+ * @public
+ * @example
+ * ```ts
+ * const merged = mergeProps(
+ *   { onClick: ourHandler, className: 'base' },
+ *   { onClick: theirHandler, className: 'custom' }
+ * );
+ * // { onClick: chainedHandler, className: 'custom base' }
+ * ```
+ */
+declare function mergeProps<T extends ElementType>(...propSets: (Props<T> | undefined)[]): Props<T>;
+//#endregion
+export { mergeProps };
+//# sourceMappingURL=merge-props.d.ts.map

package/dist/dev/utils/merge-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-props.d.ts","names":[],"sources":["../../../src/utils/merge-props.ts"],"mappings":";;;KAIK,KAAA,WAAgB,WAAA,GAAc,WAAA,IAAe,qBAAA,CAAsB,CAAA;;AAFuB;;;;;;;;;;;;;;;;AAuG/F;iBAAgB,UAAA,WAAqB,WAAA,CAAA,CAAA,GAAgB,QAAA,GAAW,KAAA,CAAM,CAAA,mBAAoB,KAAA,CAAM,CAAA"}