@videojs/react 10.0.0-beta.9 → 10.0.0-rc.2

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

@@ -1,14 +1,13 @@
-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
+import { SliderFill, SliderFillProps } from "../slider/fill.js";
+import { SliderPreview, SliderPreviewProps } from "../slider/preview.js";
+import { SliderThumb, SliderThumbProps } from "../slider/thumb.js";
+import { SliderTrack, SliderTrackProps } from "../slider/track.js";
+import { SliderValue, SliderValueProps } from "../slider/value.js";
+import "../slider/index.parts.js";
+import { VolumeSliderRoot, VolumeSliderRootProps } from "./root.js";
 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 };
+export { SliderFill as Fill, type SliderFillProps as FillProps, SliderPreview as Preview, type SliderPreviewProps as PreviewProps, VolumeSliderRoot as Root, type VolumeSliderRootProps as RootProps, SliderThumb as Thumb, type SliderThumbProps as ThumbProps, SliderTrack as Track, type SliderTrackProps as TrackProps, SliderValue as Value, type SliderValueProps as ValueProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

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

@@ -1,11 +1,10 @@
 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";
-
+import { SliderFill } from "../slider/fill.js";
+import { SliderPreview } from "../slider/preview.js";
+import { SliderThumb } from "../slider/thumb.js";
+import { SliderTrack } from "../slider/track.js";
+import { SliderValue } from "../slider/value.js";
+import { VolumeSliderRoot } from "./root.js";
 //#region src/ui/volume-slider/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Fill: () => SliderFill,
@@ -15,7 +14,7 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Track: () => SliderTrack,
 	Value: () => SliderValue
 });
-
 //#endregion
-export { index_parts_exports };
+export { SliderFill as Fill, SliderPreview as Preview, VolumeSliderRoot as Root, SliderThumb as Thumb, SliderTrack as Track, SliderValue as Value, index_parts_exports };
+
 //# sourceMappingURL=index.parts.js.map

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  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":""}
+{"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 './root';\n"],"mappings":""}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","names":[],"sources":["../../../../src/ui/volume-slider/root.tsx"],"mappings":";;;UAuBiB,8BAA8B,wBAAwB,iBAAiB,QAAQ,iBAAiB;EAC/G;EACA;;cAGW,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBAoIZ;OACH,QAAQ;OACR,QAAQ,iBAAiB"}

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

@@ -0,0 +1,125 @@
+import { useLocale, useTranslator } from "../../i18n/context.js";
+import { usePlayer } from "../../player/context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useSlider } from "../hooks/use-slider.js";
+import { SliderProvider } from "../slider/context.js";
+import { VolumeSliderCore, VolumeSliderDataAttrs } from "@videojs/core";
+import { createWheelStep, getSliderCSSVars, logMissingFeature, selectVolume } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+import { forwardRef, useCallback, useRef, useState } from "react";
+import { listen } from "@videojs/utils/dom";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/volume-slider/root.tsx
+const noopVolume = {
+	volume: 0,
+	muted: false,
+	volumeAvailability: "unsupported",
+	mutedAvailability: "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, wheelStep = VolumeSliderCore.defaultProps.wheelStep, disabled, thumbAlignment, onDragStart, onDragEnd, ...elementProps } = componentProps;
+	const volume = usePlayer(selectVolume);
+	const translator = useTranslator();
+	const locale = useLocale();
+	const isUnavailable = volume?.volumeAvailability !== "available";
+	const isDisabled = Boolean(disabled) || isUnavailable;
+	const [core] = useState(() => new VolumeSliderCore());
+	core.setProps({
+		label,
+		orientation,
+		step,
+		largeStep,
+		wheelStep,
+		disabled,
+		thumbAlignment
+	});
+	core.setFormatLocale(locale);
+	const volumeRef = useLatestRef(volume);
+	const disabledRef = useLatestRef(isDisabled);
+	const getPercent = () => (volumeRef.current?.volume ?? 0) * 100;
+	const getStepPercent = () => core.getStepPercent();
+	const setVolume = (percent) => volumeRef.current?.setVolume(percent / 100);
+	const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
+		computeState: (input) => {
+			core.setInput(input);
+			core.setMedia(volume ?? noopVolume);
+			return core.getState();
+		},
+		getPercent,
+		getStepPercent,
+		getLargeStepPercent: () => core.getLargeStepPercent(),
+		orientation,
+		disabled: isDisabled,
+		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
+		getCSSVars: getSliderCSSVars,
+		onValueChange: setVolume,
+		onValueCommit: setVolume,
+		onDragStart,
+		onDragEnd
+	});
+	const [wheelHandler] = useState(() => createWheelStep({
+		isDisabled: () => disabledRef.current,
+		getPercent: () => (volumeRef.current?.volume ?? 0) * 100,
+		getStepPercent: () => core.getWheelStepPercent(),
+		onValueChange: (percent) => volumeRef.current?.setVolume(percent / 100)
+	}));
+	const wheelCleanupRef = useRef(null);
+	const wheelRef = useCallback((element) => {
+		wheelCleanupRef.current?.();
+		wheelCleanupRef.current = null;
+		if (element) wheelCleanupRef.current = listen(element, "wheel", wheelHandler.onWheel, { passive: false });
+	}, [wheelHandler]);
+	if (!volume) {
+		logMissingFeature("VolumeSlider", "volume");
+		return null;
+	}
+	if (state.hidden) return null;
+	return /* @__PURE__ */ jsx(SliderProvider, {
+		value: {
+			state,
+			pointerValue: core.valueFromPercent(state.pointerPercent),
+			input,
+			getPointerValue: (percent) => core.valueFromPercent(percent),
+			thumbRef,
+			thumbProps,
+			stateAttrMap: VolumeSliderDataAttrs,
+			getAttrs: (sliderState) => {
+				const attrs = core.getAttrs(sliderState);
+				return {
+					...attrs,
+					"aria-label": translateText(attrs["aria-label"], translator),
+					"aria-valuetext": translateText(attrs["aria-valuetext"], translator, core.getValueTextParams(sliderState))
+				};
+			},
+			formatValue: (value) => `${Math.round(value)}%`
+		},
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: VolumeSliderDataAttrs,
+			ref: [
+				forwardedRef,
+				rootRef,
+				wheelRef
+			],
+			props: [
+				{ style: {
+					...cssVars,
+					...rootStyle
+				} },
+				rootProps,
+				elementProps
+			]
+		})
+	});
+});
+//#endregion
+export { VolumeSliderRoot };
+
+//# sourceMappingURL=root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/volume-slider/root.tsx"],"sourcesContent":["import { VolumeSliderCore, VolumeSliderDataAttrs } from '@videojs/core';\nimport { createWheelStep, getSliderCSSVars, logMissingFeature, selectVolume } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { listen } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useRef, useState } from 'react';\n\nimport { useLocale, useTranslator } from '../../i18n/context';\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  mutedAvailability: '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      wheelStep = VolumeSliderCore.defaultProps.wheelStep,\n      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      ...elementProps\n    } = componentProps;\n\n    const volume = usePlayer(selectVolume);\n    const translator = useTranslator();\n    const locale = useLocale();\n\n    const isUnavailable = volume?.volumeAvailability !== 'available';\n    const isDisabled = Boolean(disabled) || isUnavailable;\n\n    const [core] = useState(() => new VolumeSliderCore());\n\n    core.setProps({ label, orientation, step, largeStep, wheelStep, disabled, thumbAlignment });\n    core.setFormatLocale(locale);\n\n    // Keep refs to the latest dynamic values for stable closures.\n    const volumeRef = useLatestRef(volume);\n    const disabledRef = useLatestRef(isDisabled);\n\n    const getPercent = () => (volumeRef.current?.volume ?? 0) * 100;\n    const getStepPercent = () => core.getStepPercent();\n    const setVolume = (percent: number) => volumeRef.current?.setVolume(percent / 100);\n\n    const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } =\n      useSlider<VolumeSliderCore.State>({\n        computeState: (input) => {\n          core.setInput(input);\n          core.setMedia(volume ?? noopVolume);\n          return core.getState();\n        },\n        getPercent,\n        getStepPercent,\n        getLargeStepPercent: () => core.getLargeStepPercent(),\n        orientation,\n        disabled: isDisabled,\n        adjustPercent: (rawPercent, thumbSize, trackSize) =>\n          core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n        getCSSVars: getSliderCSSVars,\n        onValueChange: setVolume,\n        onValueCommit: setVolume,\n        onDragStart,\n        onDragEnd,\n      });\n\n    const [wheelHandler] = useState(() =>\n      createWheelStep({\n        isDisabled: () => disabledRef.current,\n        getPercent: () => (volumeRef.current?.volume ?? 0) * 100,\n        getStepPercent: () => core.getWheelStepPercent(),\n        onValueChange: (percent) => volumeRef.current?.setVolume(percent / 100),\n      })\n    );\n\n    // Attach non-passive wheel listener via callback ref so it covers\n    // late-mounted elements (null → mounted after volume appears).\n    const wheelCleanupRef = useRef<(() => void) | null>(null);\n    const wheelRef = useCallback(\n      (element: HTMLDivElement | null) => {\n        wheelCleanupRef.current?.();\n        wheelCleanupRef.current = null;\n\n        if (element) {\n          wheelCleanupRef.current = listen(element, 'wheel', wheelHandler.onWheel, { passive: false });\n        }\n      },\n      [wheelHandler]\n    );\n\n    if (!volume) {\n      if (__DEV__) logMissingFeature('VolumeSlider', 'volume');\n\n      return null;\n    }\n\n    if (state.hidden) return null;\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.valueFromPercent(state.pointerPercent),\n          input,\n          getPointerValue: (percent) => core.valueFromPercent(percent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: VolumeSliderDataAttrs,\n          getAttrs: (sliderState) => {\n            const attrs = core.getAttrs(sliderState as VolumeSliderCore.State);\n\n            return {\n              ...attrs,\n              'aria-label': translateText(attrs['aria-label'], translator),\n              'aria-valuetext': translateText(\n                attrs['aria-valuetext'],\n                translator,\n                core.getValueTextParams(sliderState as VolumeSliderCore.State)\n              ),\n            };\n          },\n          formatValue: (value) => `${Math.round(value)}%`,\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: VolumeSliderDataAttrs,\n            ref: [forwardedRef, rootRef, wheelRef],\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":"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"}

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

@@ -1,24 +1,25 @@
 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
+ * - Event handlers (`on*`): chained right to left
+ * - `className`: concatenated right to left
+ * - `style`: merged with rightmost values winning conflicts
+ * - Other props: rightmost value wins
  *
- * @public
  * @example
- * ```ts
- * const merged = mergeProps(
- *   { onClick: ourHandler, className: 'base' },
- *   { onClick: theirHandler, className: 'custom' }
- * );
- * // { onClick: chainedHandler, className: 'custom base' }
- * ```
+ *   ```ts
+ *   const merged = mergeProps(
+ *     { onClick: ourHandler, className: 'base' },
+ *     { onClick: theirHandler, className: 'custom' }
+ *   );
+ *   // { onClick: chainedHandler, className: 'custom base' }
+ *   ```;
+ *
+ * @param propSets - Props objects to merge in order.
+ * @public
  */
 declare function mergeProps<T extends ElementType>(...propSets: (Props<T> | undefined)[]): Props<T>;
 //#endregion

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

@@ -1 +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"}
+{"version":3,"file":"merge-props.d.ts","names":[],"sources":["../../../src/utils/merge-props.ts"],"mappings":";;KAEK,MAAM,UAAU,cAAc,eAAe,sBAAsB;;;;;;;;;;;;;;;;;;;;;iBA+FxD,WAAW,UAAU,gBAAgB,WAAW,MAAM,oBAAoB,MAAM"}

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

@@ -1,21 +1,13 @@
-'use client';
-
 //#region src/utils/merge-props.ts
-/**
-* Check if a key is an event handler key (on* with capital letter).
-*/
+/** Check if a key is an event handler key (on* with capital letter). */
 function isEventHandlerKey(key) {
 	return key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90;
 }
-/**
-* Check if a key/value pair is an event handler (includes undefined values).
-*/
+/** Check if a key/value pair is an event handler (includes undefined values). */
 function isEventHandler(key, value) {
 	return isEventHandlerKey(key) && (typeof value === "function" || typeof value === "undefined");
 }
-/**
-* Merge two event handlers - external runs first, ours runs second.
-*/
+/** Merge two event handlers - external runs first, ours runs second. */
 function mergeEventHandlers(ours, theirs) {
 	if (!theirs) return ours;
 	if (!ours) return theirs;
@@ -24,16 +16,12 @@ function mergeEventHandlers(ours, theirs) {
 		ours(event);
 	};
 }
-/**
-* Merge two className values - concatenate strings.
-*/
+/** Merge two className values - concatenate strings. */
 function mergeClassNames(ours, theirs) {
 	if (theirs && ours) return `${theirs} ${ours}`;
 	return theirs || ours;
 }
-/**
-* Merge two style objects - theirs overwrites conflicts.
-*/
+/** Merge two style objects - theirs overwrites conflicts. */
 function mergeStyles(ours, theirs) {
 	if (!theirs) return ours;
 	if (!ours) return theirs;
@@ -42,9 +30,7 @@ function mergeStyles(ours, theirs) {
 		...theirs
 	};
 }
-/**
-* Merge a single props object into accumulated result.
-*/
+/** Merge a single props object into accumulated result. */
 function mergeOne(merged, props) {
 	if (!props) return merged;
 	for (const key in props) {
@@ -59,27 +45,29 @@ function mergeOne(merged, props) {
 /**
 * Merge multiple props objects.
 *
-* - Event handlers (on*): chained - external first, ours second
-* - className: concatenated
-* - style: merged objects (external wins conflicts)
-* - other: last one wins
+* - Event handlers (`on*`): chained right to left
+* - `className`: concatenated right to left
+* - `style`: merged with rightmost values winning conflicts
+* - Other props: rightmost value wins
 *
-* @public
 * @example
-* ```ts
-* const merged = mergeProps(
-*   { onClick: ourHandler, className: 'base' },
-*   { onClick: theirHandler, className: 'custom' }
-* );
-* // { onClick: chainedHandler, className: 'custom base' }
-* ```
+*   ```ts
+*   const merged = mergeProps(
+*     { onClick: ourHandler, className: 'base' },
+*     { onClick: theirHandler, className: 'custom' }
+*   );
+*   // { onClick: chainedHandler, className: 'custom base' }
+*   ```;
+*
+* @param propSets - Props objects to merge in order.
+* @public
 */
 function mergeProps(...propSets) {
 	let merged = {};
 	for (const props of propSets) merged = mergeOne(merged, props);
 	return merged;
 }
-
 //#endregion
 export { mergeProps };
+
 //# sourceMappingURL=merge-props.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/utils/merge-props.ts"],"sourcesContent":["'use client';\n\nimport type { ComponentPropsWithRef, CSSProperties, ElementType, SyntheticEvent } from 'react';\n\ntype Props<T extends ElementType = ElementType> = ComponentPropsWithRef<T>;\n\n/**\n * Check if a key is an event handler key (on* with capital letter).\n */\nfunction isEventHandlerKey(key: string): boolean {\n  return (\n    key.charCodeAt(0) === 111 /* o */ &&\n    key.charCodeAt(1) === 110 /* n */ &&\n    key.charCodeAt(2) >= 65 /* A */ &&\n    key.charCodeAt(2) <= 90 /* Z */\n  );\n}\n\n/**\n * Check if a key/value pair is an event handler (includes undefined values).\n */\nfunction isEventHandler(key: string, value: unknown): boolean {\n  return isEventHandlerKey(key) && (typeof value === 'function' || typeof value === 'undefined');\n}\n\n/**\n * Merge two event handlers - external runs first, ours runs second.\n */\nfunction mergeEventHandlers(\n  ours: ((event: SyntheticEvent) => void) | undefined,\n  theirs: ((event: SyntheticEvent) => void) | undefined\n): ((event: SyntheticEvent) => void) | undefined {\n  if (!theirs) return ours;\n  if (!ours) return theirs;\n\n  return (event: SyntheticEvent) => {\n    theirs(event);\n    ours(event);\n  };\n}\n\n/**\n * Merge two className values - concatenate strings.\n */\nfunction mergeClassNames(ours: string | undefined, theirs: string | undefined): string | undefined {\n  if (theirs && ours) return `${theirs} ${ours}`;\n  return theirs || ours;\n}\n\n/**\n * Merge two style objects - theirs overwrites conflicts.\n */\nfunction mergeStyles(ours: CSSProperties | undefined, theirs: CSSProperties | undefined): CSSProperties | undefined {\n  if (!theirs) return ours;\n  if (!ours) return theirs;\n  return { ...ours, ...theirs };\n}\n\n/**\n * Merge a single props object into accumulated result.\n */\nfunction mergeOne<T extends ElementType>(\n  merged: Record<string, unknown>,\n  props: Props<T> | undefined\n): Record<string, unknown> {\n  if (!props) return merged;\n\n  for (const key in props) {\n    const value = props[key as keyof typeof props];\n\n    if (key === 'className') {\n      merged.className = mergeClassNames(merged.className as string | undefined, value as string);\n    } else if (key === 'style') {\n      merged.style = mergeStyles(merged.style as CSSProperties | undefined, value as CSSProperties);\n    } else if (isEventHandler(key, value)) {\n      merged[key] = mergeEventHandlers(\n        merged[key] as ((event: SyntheticEvent) => void) | undefined,\n        value as (event: SyntheticEvent) => void\n      );\n    } else {\n      merged[key] = value;\n    }\n  }\n\n  return merged;\n}\n\n/**\n * Merge multiple props objects.\n *\n * - Event handlers (on*): chained - external first, ours second\n * - className: concatenated\n * - style: merged objects (external wins conflicts)\n * - other: last one wins\n *\n * @public\n * @example\n * ```ts\n * const merged = mergeProps(\n *   { onClick: ourHandler, className: 'base' },\n *   { onClick: theirHandler, className: 'custom' }\n * );\n * // { onClick: chainedHandler, className: 'custom base' }\n * ```\n */\nexport function mergeProps<T extends ElementType>(...propSets: (Props<T> | undefined)[]): Props<T> {\n  let merged: Record<string, unknown> = {};\n\n  for (const props of propSets) {\n    merged = mergeOne(merged, props);\n  }\n\n  return merged as Props<T>;\n}\n"],"mappings":";;;;;;AASA,SAAS,kBAAkB,KAAsB;AAC/C,QACE,IAAI,WAAW,EAAE,KAAK,OACtB,IAAI,WAAW,EAAE,KAAK,OACtB,IAAI,WAAW,EAAE,IAAI,MACrB,IAAI,WAAW,EAAE,IAAI;;;;;AAOzB,SAAS,eAAe,KAAa,OAAyB;AAC5D,QAAO,kBAAkB,IAAI,KAAK,OAAO,UAAU,cAAc,OAAO,UAAU;;;;;AAMpF,SAAS,mBACP,MACA,QAC+C;AAC/C,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,CAAC,KAAM,QAAO;AAElB,SAAQ,UAA0B;AAChC,SAAO,MAAM;AACb,OAAK,MAAM;;;;;;AAOf,SAAS,gBAAgB,MAA0B,QAAgD;AACjG,KAAI,UAAU,KAAM,QAAO,GAAG,OAAO,GAAG;AACxC,QAAO,UAAU;;;;;AAMnB,SAAS,YAAY,MAAiC,QAA8D;AAClH,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,CAAC,KAAM,QAAO;AAClB,QAAO;EAAE,GAAG;EAAM,GAAG;EAAQ;;;;;AAM/B,SAAS,SACP,QACA,OACyB;AACzB,KAAI,CAAC,MAAO,QAAO;AAEnB,MAAK,MAAM,OAAO,OAAO;EACvB,MAAM,QAAQ,MAAM;AAEpB,MAAI,QAAQ,YACV,QAAO,YAAY,gBAAgB,OAAO,WAAiC,MAAgB;WAClF,QAAQ,QACjB,QAAO,QAAQ,YAAY,OAAO,OAAoC,MAAuB;WACpF,eAAe,KAAK,MAAM,CACnC,QAAO,OAAO,mBACZ,OAAO,MACP,MACD;MAED,QAAO,OAAO;;AAIlB,QAAO;;;;;;;;;;;;;;;;;;;;AAqBT,SAAgB,WAAkC,GAAG,UAA8C;CACjG,IAAI,SAAkC,EAAE;AAExC,MAAK,MAAM,SAAS,SAClB,UAAS,SAAS,QAAQ,MAAM;AAGlC,QAAO"}
+{"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/utils/merge-props.ts"],"sourcesContent":["import type { ComponentPropsWithRef, CSSProperties, ElementType, SyntheticEvent } from 'react';\n\ntype Props<T extends ElementType = ElementType> = ComponentPropsWithRef<T>;\n\n/** Check if a key is an event handler key (on* with capital letter). */\nfunction isEventHandlerKey(key: string): boolean {\n  return (\n    key.charCodeAt(0) === 111 /* o */ &&\n    key.charCodeAt(1) === 110 /* n */ &&\n    key.charCodeAt(2) >= 65 /* A */ &&\n    key.charCodeAt(2) <= 90 /* Z */\n  );\n}\n\n/** Check if a key/value pair is an event handler (includes undefined values). */\nfunction isEventHandler(key: string, value: unknown): boolean {\n  return isEventHandlerKey(key) && (typeof value === 'function' || typeof value === 'undefined');\n}\n\n/** Merge two event handlers - external runs first, ours runs second. */\nfunction mergeEventHandlers(\n  ours: ((event: SyntheticEvent) => void) | undefined,\n  theirs: ((event: SyntheticEvent) => void) | undefined\n): ((event: SyntheticEvent) => void) | undefined {\n  if (!theirs) return ours;\n\n  if (!ours) return theirs;\n\n  return (event: SyntheticEvent) => {\n    theirs(event);\n    ours(event);\n  };\n}\n\n/** Merge two className values - concatenate strings. */\nfunction mergeClassNames(ours: string | undefined, theirs: string | undefined): string | undefined {\n  if (theirs && ours) return `${theirs} ${ours}`;\n\n  return theirs || ours;\n}\n\n/** Merge two style objects - theirs overwrites conflicts. */\nfunction mergeStyles(ours: CSSProperties | undefined, theirs: CSSProperties | undefined): CSSProperties | undefined {\n  if (!theirs) return ours;\n\n  if (!ours) return theirs;\n\n  return { ...ours, ...theirs };\n}\n\n/** Merge a single props object into accumulated result. */\nfunction mergeOne<T extends ElementType>(\n  merged: Record<string, unknown>,\n  props: Props<T> | undefined\n): Record<string, unknown> {\n  if (!props) return merged;\n\n  for (const key in props) {\n    const value = props[key as keyof typeof props];\n\n    if (key === 'className') {\n      merged.className = mergeClassNames(merged.className as string | undefined, value as string);\n    } else if (key === 'style') {\n      merged.style = mergeStyles(merged.style as CSSProperties | undefined, value as CSSProperties);\n    } else if (isEventHandler(key, value)) {\n      merged[key] = mergeEventHandlers(\n        merged[key] as ((event: SyntheticEvent) => void) | undefined,\n        value as (event: SyntheticEvent) => void\n      );\n    } else {\n      merged[key] = value;\n    }\n  }\n\n  return merged;\n}\n\n/**\n * Merge multiple props objects.\n *\n * - Event handlers (`on*`): chained right to left\n * - `className`: concatenated right to left\n * - `style`: merged with rightmost values winning conflicts\n * - Other props: rightmost value wins\n *\n * @example\n *   ```ts\n *   const merged = mergeProps(\n *     { onClick: ourHandler, className: 'base' },\n *     { onClick: theirHandler, className: 'custom' }\n *   );\n *   // { onClick: chainedHandler, className: 'custom base' }\n *   ```;\n *\n * @param propSets - Props objects to merge in order.\n * @public\n */\nexport function mergeProps<T extends ElementType>(...propSets: (Props<T> | undefined)[]): Props<T> {\n  let merged: Record<string, unknown> = {};\n\n  for (const props of propSets) {\n    merged = mergeOne(merged, props);\n  }\n\n  return merged as Props<T>;\n}\n"],"mappings":";;AAKA,SAAS,kBAAkB,KAAsB;CAC/C,OACE,IAAI,WAAW,CAAC,MAAM,OACtB,IAAI,WAAW,CAAC,MAAM,OACtB,IAAI,WAAW,CAAC,KAAK,MACrB,IAAI,WAAW,CAAC,KAAK;AAEzB;;AAGA,SAAS,eAAe,KAAa,OAAyB;CAC5D,OAAO,kBAAkB,GAAG,MAAM,OAAO,UAAU,cAAc,OAAO,UAAU;AACpF;;AAGA,SAAS,mBACP,MACA,QAC+C;CAC/C,IAAI,CAAC,QAAQ,OAAO;CAEpB,IAAI,CAAC,MAAM,OAAO;CAElB,QAAQ,UAA0B;EAChC,OAAO,KAAK;EACZ,KAAK,KAAK;CACZ;AACF;;AAGA,SAAS,gBAAgB,MAA0B,QAAgD;CACjG,IAAI,UAAU,MAAM,OAAO,GAAG,OAAO,GAAG;CAExC,OAAO,UAAU;AACnB;;AAGA,SAAS,YAAY,MAAiC,QAA8D;CAClH,IAAI,CAAC,QAAQ,OAAO;CAEpB,IAAI,CAAC,MAAM,OAAO;CAElB,OAAO;EAAE,GAAG;EAAM,GAAG;CAAO;AAC9B;;AAGA,SAAS,SACP,QACA,OACyB;CACzB,IAAI,CAAC,OAAO,OAAO;CAEnB,KAAK,MAAM,OAAO,OAAO;EACvB,MAAM,QAAQ,MAAM;EAEpB,IAAI,QAAQ,aACV,OAAO,YAAY,gBAAgB,OAAO,WAAiC,KAAe;OACrF,IAAI,QAAQ,SACjB,OAAO,QAAQ,YAAY,OAAO,OAAoC,KAAsB;OACvF,IAAI,eAAe,KAAK,KAAK,GAClC,OAAO,OAAO,mBACZ,OAAO,MACP,KACF;OAEA,OAAO,OAAO;CAElB;CAEA,OAAO;AACT;;;;;;;;;;;;;;;;;;;;;AAsBA,SAAgB,WAAkC,GAAG,UAA8C;CACjG,IAAI,SAAkC,CAAC;CAEvC,KAAK,MAAM,SAAS,UAClB,SAAS,SAAS,QAAQ,KAAK;CAGjC,OAAO;AACT"}

package/dist/dev/utils/types.d.ts

@@ -1,5 +1,4 @@
 import { CSSProperties, ComponentPropsWithRef, ElementType, ReactElement } from "react";
-
 //#region src/utils/types.d.ts
 /** Props that can be spread on any HTML element. */
 type HTMLProps<T = any> = React.HTMLAttributes<T> & {
@@ -12,14 +11,15 @@ type RenderProp<State> = ReactElement | RenderFunction<HTMLProps, State>;
 /**
  * Standard props for UI components.
  *
- * Provides consistent API across all UI components:
- * - `className` as string or function of state
- * - `style` as object or function of state
- * - `render` prop for element customization
+ * Provides consistent API across all UI components: - `className` as string or function of state - `style` as object or
+ * function of state - `render` prop for element customization
  */
 type UIComponentProps<TagName extends keyof React.JSX.IntrinsicElements, State> = Omit<React.JSX.IntrinsicElements[TagName], 'className' | 'style'> & {
-  /** Class name or function returning class name from state. */className?: string | ((state: State) => string | undefined) | undefined; /** Style or function returning style from state. */
-  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined; /** Render prop for custom element. */
+  /** Class name or function returning class name from state. */
+  className?: string | ((state: State) => string | undefined) | undefined;
+  /** Style or function returning style from state. */
+  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;
+  /** Render prop for custom element. */
   render?: RenderProp<State> | undefined;
 };
 //#endregion

package/dist/dev/utils/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/utils/types.ts"],"mappings":";;;;KAGY,SAAA,YAAqB,KAAA,CAAM,cAAA,CAAe,CAAA;EACpD,GAAA,GAAM,KAAA,CAAM,GAAA,CAAI,CAAA;AAAA;;KAIN,cAAA,kBAAgC,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,KAAA,KAAU,YAAA;;KAG/D,UAAA,UAAoB,YAAA,GAAe,cAAA,CAAe,SAAA,EAAW,KAAA;;;;;;;;;KAU7D,gBAAA,uBAAuC,KAAA,CAAM,GAAA,CAAI,iBAAA,WAA4B,IAAA,CACvF,KAAA,CAAM,GAAA,CAAI,iBAAA,CAAkB,OAAA;EAlBhB,8DAsBZ,SAAA,cAAuB,KAAA,EAAO,KAAA,sCAtBb;EAwBjB,KAAA,GAAQ,aAAA,KAAkB,KAAA,EAAO,KAAA,KAAU,aAAA,2BApBjC;EAsBV,MAAA,GAAS,UAAA,CAAW,KAAA;AAAA"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/utils/types.ts"],"mappings":";;;KAGY,UAAU,WAAW,MAAM,eAAe;EACpD,MAAM,MAAM,IAAI;;;KAIN,eAAe,OAAO,UAAU,OAAO,OAAO,OAAO,UAAU;;KAG/D,WAAW,SAAS,eAAe,eAAe,WAAW;;;;;;;KAQ7D,iBAAiB,sBAAsB,MAAM,IAAI,mBAAmB,SAAS,KACvF,MAAM,IAAI,kBAAkB;;EAI5B,uBAAuB,OAAO;;EAE9B,QAAQ,kBAAkB,OAAO,UAAU;;EAE3C,SAAS,WAAW"}

package/dist/dev/utils/use-attach-iframe.js

@@ -0,0 +1,13 @@
+import { useCallback } from "react";
+//#region src/utils/use-attach-iframe.ts
+function useAttachIframe(media) {
+	return useCallback((element) => {
+		if (element) media.attach?.(element);
+		else media.detach?.();
+		return () => media.detach?.();
+	}, [media]);
+}
+//#endregion
+export { useAttachIframe };
+
+//# sourceMappingURL=use-attach-iframe.js.map

package/dist/dev/utils/use-attach-iframe.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-attach-iframe.js","names":[],"sources":["../../../src/utils/use-attach-iframe.ts"],"sourcesContent":["import type { EngineAdapter } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachIframe<T extends HTMLIFrameElement>(media: EngineAdapter): RefCallback<T> {\n  return useCallback(\n    (element: T | null) => {\n      if (element) media.attach?.(element);\n      else media.detach?.();\n\n      return () => media.detach?.();\n    },\n    [media]\n  );\n}\n"],"mappings":";;AAIA,SAAgB,gBAA6C,OAAsC;CACjG,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EAEpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}

package/dist/dev/utils/use-attach-media.d.ts

@@ -0,0 +1,12 @@
+import { EngineAdapter } from "@videojs/media";
+import { RefCallback } from "react";
+//#region src/utils/use-attach-media.d.ts
+/**
+ * Returns a callback ref that attaches an HTML media element to a playback adapter and detaches it during cleanup.
+ *
+ * @param media - Playback adapter to attach and detach.
+ */
+declare function useAttachMedia<T extends HTMLMediaElement>(media: EngineAdapter): RefCallback<T>;
+//#endregion
+export { useAttachMedia };
+//# sourceMappingURL=use-attach-media.d.ts.map

package/dist/dev/utils/use-attach-media.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-attach-media.d.ts","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"mappings":";;;;;;;;iBASgB,eAAe,UAAU,kBAAkB,OAAO,gBAAgB,YAAY"}

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

@@ -0,0 +1,18 @@
+import { useCallback } from "react";
+//#region src/utils/use-attach-media.ts
+/**
+* Returns a callback ref that attaches an HTML media element to a playback adapter and detaches it during cleanup.
+*
+* @param media - Playback adapter to attach and detach.
+*/
+function useAttachMedia(media) {
+	return useCallback((element) => {
+		if (element) media.attach?.(element);
+		else media.detach?.();
+		return () => media.detach?.();
+	}, [media]);
+}
+//#endregion
+export { useAttachMedia };
+
+//# sourceMappingURL=use-attach-media.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["import type { EngineAdapter } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\n/**\n * Returns a callback ref that attaches an HTML media element to a playback adapter and detaches it during cleanup.\n *\n * @param media - Playback adapter to attach and detach.\n */\nexport function useAttachMedia<T extends HTMLMediaElement>(media: EngineAdapter): RefCallback<T> {\n  return useCallback(\n    (element: T | null) => {\n      if (element) media.attach?.(element);\n      else media.detach?.();\n\n      return () => media.detach?.();\n    },\n    [media]\n  );\n}\n"],"mappings":";;;;;;;AASA,SAAgB,eAA2C,OAAsC;CAC/F,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EAEpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}

package/dist/dev/utils/use-composed-refs.d.ts

@@ -0,0 +1,30 @@
+import { Ref, RefCallback } from "react";
+//#region src/utils/use-composed-refs.d.ts
+type OptionalRef<T> = Ref<T> | undefined;
+/**
+ * Compose multiple refs into a single callback ref.
+ *
+ * @example
+ *   ```tsx
+ *   const composedRef = composeRefs(ref1, ref2, ref3);
+ *   return <div ref={composedRef} />;
+ *   ```;
+ */
+declare function composeRefs<T>(...refs: (OptionalRef<T> | OptionalRef<T>[])[]): RefCallback<T>;
+/**
+ * Hook that composes multiple refs into a single callback ref.
+ *
+ * Memoized for stable reference.
+ *
+ * @example
+ *   ```tsx
+ *   const composedRef = useComposedRefs(forwardedRef, localRef);
+ *   return <div ref={composedRef} />;
+ *   ```;
+ *
+ * @param refs - Refs to update from the returned callback.
+ */
+declare function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T>;
+//#endregion
+export { composeRefs, useComposedRefs };
+//# sourceMappingURL=use-composed-refs.d.ts.map

package/dist/dev/utils/use-composed-refs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-composed-refs.d.ts","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"mappings":";;KAIK,YAAY,KAAK,IAAI;;;;;;;;;;iBA0BV,YAAY,MAAM,OAAO,YAAY,KAAK,YAAY,UAAU,YAAY;;;;;;;;;;;;;;iBAqC5E,gBAAgB,MAAM,MAAM,YAAY,OAAO,YAAY"}

package/dist/dev/utils/use-composed-refs.js

@@ -1,8 +1,5 @@
-'use client';
-
 import { useCallback } from "react";
 import { isFunction } from "@videojs/utils/predicate";
-
 //#region src/utils/use-composed-refs.ts
 /**
 * Set a given ref to a given value.
@@ -19,10 +16,10 @@ function setRef(ref, value) {
 * Compose multiple refs into a single callback ref.
 *
 * @example
-* ```tsx
-* const composedRef = composeRefs(ref1, ref2, ref3);
-* return <div ref={composedRef} />;
-* ```
+*   ```tsx
+*   const composedRef = composeRefs(ref1, ref2, ref3);
+*   return <div ref={composedRef} />;
+*   ```;
 */
 function composeRefs(...refs) {
 	const flatRefs = refs.flat();
@@ -43,15 +40,17 @@ function composeRefs(...refs) {
 * Memoized for stable reference.
 *
 * @example
-* ```tsx
-* const composedRef = useComposedRefs(forwardedRef, localRef);
-* return <div ref={composedRef} />;
-* ```
+*   ```tsx
+*   const composedRef = useComposedRefs(forwardedRef, localRef);
+*   return <div ref={composedRef} />;
+*   ```;
+*
+* @param refs - Refs to update from the returned callback.
 */
 function useComposedRefs(...refs) {
 	return useCallback(composeRefs(...refs), [...refs]);
 }
-
 //#endregion
 export { composeRefs, useComposedRefs };
+
 //# sourceMappingURL=use-composed-refs.js.map

package/dist/dev/utils/use-composed-refs.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-composed-refs.js","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"sourcesContent":["'use client';\n\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { Ref, RefCallback } from 'react';\n\nimport { useCallback } from 'react';\n\ntype OptionalRef<T> = Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value.\n *\n * Handles both callback refs and RefObject(s).\n *\n * @returns Cleanup function if the ref callback returned one (React 19+)\n */\nfunction setRef<T>(ref: OptionalRef<T>, value: T): (() => void) | void | undefined {\n  if (isFunction(ref)) {\n    return ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    ref.current = value;\n  }\n}\n\n/**\n * Compose multiple refs into a single callback ref.\n *\n * @example\n * ```tsx\n * const composedRef = composeRefs(ref1, ref2, ref3);\n * return <div ref={composedRef} />;\n * ```\n */\nexport function composeRefs<T>(...refs: (OptionalRef<T> | OptionalRef<T>[])[]): RefCallback<T> {\n  const flatRefs = refs.flat();\n\n  return (node): (() => void) | void => {\n    const cleanups = flatRefs.map((ref) => setRef(ref, node));\n\n    // Only return cleanup if any refs returned one (React 19+).\n    // React 18 handles cleanup by calling the ref callback with null.\n    if (cleanups.some(isFunction)) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n          if (isFunction(cleanup)) {\n            cleanup();\n          } else {\n            setRef(flatRefs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * Hook that composes multiple refs into a single callback ref.\n *\n * Memoized for stable reference.\n *\n * @example\n * ```tsx\n * const composedRef = useComposedRefs(forwardedRef, localRef);\n * return <div ref={composedRef} />;\n * ```\n */\nexport function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T> {\n  return useCallback(composeRefs(...refs), [...refs]);\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,SAAS,OAAU,KAAqB,OAA2C;AACjF,KAAI,WAAW,IAAI,CACjB,QAAO,IAAI,MAAM;UACR,QAAQ,QAAQ,QAAQ,OACjC,KAAI,UAAU;;;;;;;;;;;AAalB,SAAgB,YAAe,GAAG,MAA6D;CAC7F,MAAM,WAAW,KAAK,MAAM;AAE5B,SAAQ,SAA8B;EACpC,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO,KAAK,KAAK,CAAC;AAIzD,MAAI,SAAS,KAAK,WAAW,CAC3B,cAAa;AACX,QAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;AACzB,QAAI,WAAW,QAAQ,CACrB,UAAS;QAET,QAAO,SAAS,IAAI,KAAK;;;;;;;;;;;;;;;;AAmBrC,SAAgB,gBAAmB,GAAG,MAAwC;AAC5E,QAAO,YAAY,YAAY,GAAG,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC"}
+{"version":3,"file":"use-composed-refs.js","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"sourcesContent":["import { isFunction } from '@videojs/utils/predicate';\nimport type { Ref, RefCallback } from 'react';\nimport { useCallback } from 'react';\n\ntype OptionalRef<T> = Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value.\n *\n * Handles both callback refs and RefObject(s).\n *\n * @returns Cleanup function if the ref callback returned one (React 19+)\n */\nfunction setRef<T>(ref: OptionalRef<T>, value: T): (() => void) | void | undefined {\n  if (isFunction(ref)) {\n    return ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    ref.current = value;\n  }\n}\n\n/**\n * Compose multiple refs into a single callback ref.\n *\n * @example\n *   ```tsx\n *   const composedRef = composeRefs(ref1, ref2, ref3);\n *   return <div ref={composedRef} />;\n *   ```;\n */\nexport function composeRefs<T>(...refs: (OptionalRef<T> | OptionalRef<T>[])[]): RefCallback<T> {\n  const flatRefs = refs.flat();\n\n  return (node): (() => void) | void => {\n    const cleanups = flatRefs.map((ref) => setRef(ref, node));\n\n    // Only return cleanup if any refs returned one (React 19+).\n    // React 18 handles cleanup by calling the ref callback with null.\n    if (cleanups.some(isFunction)) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n\n          if (isFunction(cleanup)) {\n            cleanup();\n          } else {\n            setRef(flatRefs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * Hook that composes multiple refs into a single callback ref.\n *\n * Memoized for stable reference.\n *\n * @example\n *   ```tsx\n *   const composedRef = useComposedRefs(forwardedRef, localRef);\n *   return <div ref={composedRef} />;\n *   ```;\n *\n * @param refs - Refs to update from the returned callback.\n */\nexport function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T> {\n  return useCallback(composeRefs(...refs), [...refs]);\n}\n"],"mappings":";;;;;;;;;;AAaA,SAAS,OAAU,KAAqB,OAA2C;CACjF,IAAI,WAAW,GAAG,GAChB,OAAO,IAAI,KAAK;MACX,IAAI,QAAQ,QAAQ,QAAQ,KAAA,GACjC,IAAI,UAAU;AAElB;;;;;;;;;;AAWA,SAAgB,YAAe,GAAG,MAA6D;CAC7F,MAAM,WAAW,KAAK,KAAK;CAE3B,QAAQ,SAA8B;EACpC,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO,KAAK,IAAI,CAAC;EAIxD,IAAI,SAAS,KAAK,UAAU,GAC1B,aAAa;GACX,KAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;IAEzB,IAAI,WAAW,OAAO,GACpB,QAAQ;SAER,OAAO,SAAS,IAAI,IAAI;GAE5B;EACF;CAEJ;AACF;;;;;;;;;;;;;;AAeA,SAAgB,gBAAmB,GAAG,MAAwC;CAC5E,OAAO,YAAY,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;AACpD"}

package/dist/dev/utils/use-destroy.d.ts

@@ -0,0 +1,20 @@
+//#region src/utils/use-destroy.d.ts
+interface Destroyable {
+  destroy(): void;
+}
+/**
+ * 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.
+ * @param teardown - Optional teardown called right before `destroy()` on real unmount. Skipped on StrictMode simulated
+ *   unmount.
+ */
+declare function useDestroy(instance: Destroyable, setup?: () => void, teardown?: () => void): void;
+//#endregion
+export { useDestroy };
+//# sourceMappingURL=use-destroy.d.ts.map

package/dist/dev/utils/use-destroy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-destroy.d.ts","names":[],"sources":["../../../src/utils/use-destroy.ts"],"mappings":";UAIU;EACR;;;;;;;;;;;;;;iBAec,WAAW,UAAU,aAAa,oBAAoB"}