@videojs/react 10.0.0-beta.30 → 10.0.0-beta.32

package/dist/dev/ui/volume-popover/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/volume-popover/context.tsx"],"sourcesContent":["import type { VolumePopoverCore } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\nexport interface VolumePopoverContextValue {\n  state: VolumePopoverCore.State;\n}\n\nconst VolumePopoverContext = createContext<VolumePopoverContextValue | null>(null);\n\nexport const VolumePopoverContextProvider = VolumePopoverContext.Provider;\n\nexport function useVolumePopoverContext(): VolumePopoverContextValue {\n  const context = useContext(VolumePopoverContext);\n  if (!context) throw new Error('VolumePopover compound components must be used within a VolumePopover.Root');\n\n  return context;\n}\n"],"mappings":";;AAOA,MAAM,uBAAuB,cAAgD,IAAI;AAEjF,MAAa,+BAA+B,qBAAqB;AAEjE,SAAgB,0BAAqD;CACnE,MAAM,UAAU,WAAW,oBAAoB;CAC/C,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,4EAA4E;CAE1G,OAAO;AACT"}

package/dist/dev/ui/volume-popover/index.d.ts

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

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

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

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

@@ -0,0 +1,9 @@
+import { VolumePopoverPopup, VolumePopoverPopupProps } from "./volume-popover-popup.js";
+import { VolumePopoverRoot, VolumePopoverRootProps } from "./volume-popover-root.js";
+import { VolumePopoverTrigger, VolumePopoverTriggerProps } from "./volume-popover-trigger.js";
+declare namespace index_parts_d_exports {
+  export { VolumePopoverPopup as Popup, VolumePopoverPopupProps as PopupProps, VolumePopoverRoot as Root, VolumePopoverRootProps as RootProps, VolumePopoverTrigger as Trigger, VolumePopoverTriggerProps as TriggerProps };
+}
+//#endregion
+export { VolumePopoverPopup as Popup, type VolumePopoverPopupProps as PopupProps, VolumePopoverRoot as Root, type VolumePopoverRootProps as RootProps, VolumePopoverTrigger as Trigger, type VolumePopoverTriggerProps as TriggerProps, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

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

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

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

@@ -0,0 +1,14 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { VolumePopoverPopup } from "./volume-popover-popup.js";
+import { VolumePopoverRoot } from "./volume-popover-root.js";
+import { VolumePopoverTrigger } from "./volume-popover-trigger.js";
+//#region src/ui/volume-popover/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Popup: () => VolumePopoverPopup,
+	Root: () => VolumePopoverRoot,
+	Trigger: () => VolumePopoverTrigger
+});
+//#endregion
+export { VolumePopoverPopup as Popup, VolumePopoverRoot as Root, VolumePopoverTrigger as Trigger, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-popover/index.parts.ts"],"sourcesContent":["export { VolumePopoverPopup as Popup, type VolumePopoverPopupProps as PopupProps } from './volume-popover-popup';\nexport { VolumePopoverRoot as Root, type VolumePopoverRootProps as RootProps } from './volume-popover-root';\nexport {\n  VolumePopoverTrigger as Trigger,\n  type VolumePopoverTriggerProps as TriggerProps,\n} from './volume-popover-trigger';\n"],"mappings":""}

package/dist/dev/ui/volume-popover/volume-popover-popup.d.ts

@@ -0,0 +1,11 @@
+import { PopoverPopupProps } from "../popover/popover-popup.js";
+//#region src/ui/volume-popover/volume-popover-popup.d.ts
+interface VolumePopoverPopupProps extends PopoverPopupProps {}
+/** Positioned volume content. Omitted when volume level controls are unavailable. */
+declare const VolumePopoverPopup: import("react").ForwardRefExoticComponent<Omit<VolumePopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace VolumePopoverPopup {
+  type Props = VolumePopoverPopupProps;
+}
+//#endregion
+export { VolumePopoverPopup, VolumePopoverPopupProps };
+//# sourceMappingURL=volume-popover-popup.d.ts.map

package/dist/dev/ui/volume-popover/volume-popover-popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-popover-popup.d.ts","names":[],"sources":["../../../../src/ui/volume-popover/volume-popover-popup.tsx"],"mappings":";;UAOiB,gCAAgC;;cAGpC,oCAAkB,0BAAA,KAAA,kDAAA,cAAA;kBASd;OACH,QAAQ"}

package/dist/dev/ui/volume-popover/volume-popover-popup.js

@@ -0,0 +1,21 @@
+import { PopoverPopup } from "../popover/popover-popup.js";
+import { useVolumePopoverContext } from "./context.js";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { VolumePopoverDataAttrs } from "@videojs/core";
+//#region src/ui/volume-popover/volume-popover-popup.tsx
+/** Positioned volume content. Omitted when volume level controls are unavailable. */
+const VolumePopoverPopup = forwardRef(function VolumePopoverPopup(props, forwardedRef) {
+	const { state } = useVolumePopoverContext();
+	if (state.hidden) return null;
+	return /* @__PURE__ */ jsx(PopoverPopup, {
+		ref: forwardedRef,
+		...getStateDataAttrs(state, VolumePopoverDataAttrs),
+		...props
+	});
+});
+//#endregion
+export { VolumePopoverPopup };
+
+//# sourceMappingURL=volume-popover-popup.js.map

package/dist/dev/ui/volume-popover/volume-popover-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-popover-popup.js","names":[],"sources":["../../../../src/ui/volume-popover/volume-popover-popup.tsx"],"sourcesContent":["import { VolumePopoverDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { forwardRef } from 'react';\n\nimport { PopoverPopup, type PopoverPopupProps } from '../popover/popover-popup';\nimport { useVolumePopoverContext } from './context';\n\nexport interface VolumePopoverPopupProps extends PopoverPopupProps {}\n\n/** Positioned volume content. Omitted when volume level controls are unavailable. */\nexport const VolumePopoverPopup = forwardRef<HTMLDivElement, VolumePopoverPopupProps>(\n  function VolumePopoverPopup(props, forwardedRef) {\n    const { state } = useVolumePopoverContext();\n    if (state.hidden) return null;\n\n    return <PopoverPopup ref={forwardedRef} {...getStateDataAttrs(state, VolumePopoverDataAttrs)} {...props} />;\n  }\n);\n\nexport namespace VolumePopoverPopup {\n  export type Props = VolumePopoverPopupProps;\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,OAAO,cAAc;CAC/C,MAAM,EAAE,UAAU,wBAAwB;CAC1C,IAAI,MAAM,QAAQ,OAAO;CAEzB,OAAO,oBAAC,cAAD;EAAc,KAAK;EAAc,GAAI,kBAAkB,OAAO,sBAAsB;EAAG,GAAI;CAAQ,CAAA;AAC5G,CACF"}

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

@@ -0,0 +1,14 @@
+import { PopoverRootProps } from "../popover/popover-root.js";
+import { ReactNode } from "react";
+import { VolumePopoverCore } from "@videojs/core";
+//#region src/ui/volume-popover/volume-popover-root.d.ts
+interface VolumePopoverRootProps extends PopoverRootProps {}
+/** Owns volume availability and the popover interaction lifecycle. */
+declare function VolumePopoverRoot({ children, ...props }: VolumePopoverRootProps): ReactNode;
+declare namespace VolumePopoverRoot {
+  type Props = VolumePopoverRootProps;
+  type State = VolumePopoverCore.State;
+}
+//#endregion
+export { VolumePopoverRoot, VolumePopoverRootProps };
+//# sourceMappingURL=volume-popover-root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"volume-popover-root.d.ts","names":[],"sources":["../../../../src/ui/volume-popover/volume-popover-root.tsx"],"mappings":";;;;UAqBiB,+BAA+B;;iBAGhC,oBAAoB,aAAa,SAAS,yBAAyB;kBA2BlE;OACH,QAAQ;OACR,QAAQ,kBAAkB"}

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

@@ -0,0 +1,47 @@
+import { usePlayer } from "../../player/context.js";
+import { usePopoverContext } from "../popover/context.js";
+import { PopoverRoot } from "../popover/popover-root.js";
+import { VolumePopoverContextProvider } from "./context.js";
+import { selectVolume } from "@videojs/core/dom";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { VolumePopoverCore } from "@videojs/core";
+//#region src/ui/volume-popover/volume-popover-root.tsx
+const unavailableVolume = {
+	volume: 0,
+	muted: false,
+	volumeAvailability: "unsupported",
+	mutedAvailability: "unsupported",
+	setVolume: () => 0,
+	toggleMuted: () => false
+};
+/** Owns volume availability and the popover interaction lifecycle. */
+function VolumePopoverRoot({ children, ...props }) {
+	const volume = usePlayer(selectVolume);
+	const [core] = useState(() => new VolumePopoverCore(props));
+	core.setProps(props);
+	core.setMedia(volume ?? unavailableVolume);
+	return /* @__PURE__ */ jsx(PopoverRoot, {
+		...props,
+		children: /* @__PURE__ */ jsx(VolumePopoverState, {
+			core,
+			children
+		})
+	});
+}
+function VolumePopoverState({ core, children }) {
+	const { popover } = usePopoverContext();
+	core.setInput(popover.input.current);
+	const state = core.getState();
+	useEffect(() => {
+		if (state.hidden) popover.close("imperative-action");
+	}, [popover, state.hidden]);
+	return /* @__PURE__ */ jsx(VolumePopoverContextProvider, {
+		value: { state },
+		children
+	});
+}
+//#endregion
+export { VolumePopoverRoot };
+
+//# sourceMappingURL=volume-popover-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"volume-popover-root.js","names":["Popover.Root"],"sources":["../../../../src/ui/volume-popover/volume-popover-root.tsx"],"sourcesContent":["import { VolumePopoverCore } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\nimport type { MediaVolumeState } from '@videojs/media';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { Popover } from '../popover';\nimport { usePopoverContext } from '../popover/context';\nimport type { PopoverRootProps } from '../popover/popover-root';\nimport { VolumePopoverContextProvider } from './context';\n\nconst unavailableVolume: MediaVolumeState = {\n  volume: 0,\n  muted: false,\n  volumeAvailability: 'unsupported',\n  mutedAvailability: 'unsupported',\n  setVolume: () => 0,\n  toggleMuted: () => false,\n};\n\nexport interface VolumePopoverRootProps extends PopoverRootProps {}\n\n/** Owns volume availability and the popover interaction lifecycle. */\nexport function VolumePopoverRoot({ children, ...props }: VolumePopoverRootProps): ReactNode {\n  const volume = usePlayer(selectVolume);\n  const [core] = useState(() => new VolumePopoverCore(props));\n\n  core.setProps(props);\n  core.setMedia(volume ?? unavailableVolume);\n\n  return (\n    <Popover.Root {...props}>\n      <VolumePopoverState core={core}>{children}</VolumePopoverState>\n    </Popover.Root>\n  );\n}\n\nfunction VolumePopoverState({ core, children }: { core: VolumePopoverCore; children?: ReactNode }): ReactNode {\n  const { popover } = usePopoverContext();\n\n  core.setInput(popover.input.current);\n  const state = core.getState();\n\n  useEffect(() => {\n    if (state.hidden) popover.close('imperative-action');\n  }, [popover, state.hidden]);\n\n  return <VolumePopoverContextProvider value={{ state }}>{children}</VolumePopoverContextProvider>;\n}\n\nexport namespace VolumePopoverRoot {\n  export type Props = VolumePopoverRootProps;\n  export type State = VolumePopoverCore.State;\n}\n"],"mappings":";;;;;;;;;AAYA,MAAM,oBAAsC;CAC1C,QAAQ;CACR,OAAO;CACP,oBAAoB;CACpB,mBAAmB;CACnB,iBAAiB;CACjB,mBAAmB;AACrB;;AAKA,SAAgB,kBAAkB,EAAE,UAAU,GAAG,SAA4C;CAC3F,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,CAAC,QAAQ,eAAe,IAAI,kBAAkB,KAAK,CAAC;CAE1D,KAAK,SAAS,KAAK;CACnB,KAAK,SAAS,UAAU,iBAAiB;CAEzC,OACE,oBAACA,aAAD;EAAc,GAAI;EAChB,UAAA,oBAAC,oBAAD;GAA0B;GAAO;EAA6B,CAAA;CAClD,CAAA;AAElB;AAEA,SAAS,mBAAmB,EAAE,MAAM,YAA0E;CAC5G,MAAM,EAAE,YAAY,kBAAkB;CAEtC,KAAK,SAAS,QAAQ,MAAM,OAAO;CACnC,MAAM,QAAQ,KAAK,SAAS;CAE5B,gBAAgB;EACd,IAAI,MAAM,QAAQ,QAAQ,MAAM,mBAAmB;CACrD,GAAG,CAAC,SAAS,MAAM,MAAM,CAAC;CAE1B,OAAO,oBAAC,8BAAD;EAA8B,OAAO,EAAE,MAAM;EAAI;CAAuC,CAAA;AACjG"}

package/dist/dev/ui/volume-popover/volume-popover-trigger.d.ts

@@ -0,0 +1,11 @@
+import { PopoverTriggerProps } from "../popover/popover-trigger.js";
+//#region src/ui/volume-popover/volume-popover-trigger.d.ts
+interface VolumePopoverTriggerProps extends PopoverTriggerProps {}
+/** Opens the volume popup, or renders its mute-button fallback when volume level controls are unavailable. */
+declare const VolumePopoverTrigger: import("react").ForwardRefExoticComponent<Omit<VolumePopoverTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace VolumePopoverTrigger {
+  type Props = VolumePopoverTriggerProps;
+}
+//#endregion
+export { VolumePopoverTrigger, VolumePopoverTriggerProps };
+//# sourceMappingURL=volume-popover-trigger.d.ts.map

package/dist/dev/ui/volume-popover/volume-popover-trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-popover-trigger.d.ts","names":[],"sources":["../../../../src/ui/volume-popover/volume-popover-trigger.tsx"],"mappings":";;UAOiB,kCAAkC;;cAGtC,sCAAoB,0BAAA,KAAA,oDAAA,cAAA;kBAuBhB;OACH,QAAQ"}

package/dist/dev/ui/volume-popover/volume-popover-trigger.js

@@ -0,0 +1,32 @@
+import { renderElement } from "../../utils/use-render.js";
+import { usePopoverContext } from "../popover/context.js";
+import { PopoverTrigger } from "../popover/popover-trigger.js";
+import { useVolumePopoverContext } from "./context.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/volume-popover/volume-popover-trigger.tsx
+/** Opens the volume popup, or renders its mute-button fallback when volume level controls are unavailable. */
+const VolumePopoverTrigger = forwardRef(function VolumePopoverTrigger({ render, className, style, ...elementProps }, forwardedRef) {
+	const { state: popoverState } = usePopoverContext();
+	const { state } = useVolumePopoverContext();
+	if (!state.hidden) return /* @__PURE__ */ jsx(PopoverTrigger, {
+		ref: forwardedRef,
+		render,
+		className,
+		style,
+		...elementProps
+	});
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state: popoverState,
+		ref: forwardedRef,
+		props: [{ type: "button" }, elementProps]
+	});
+});
+//#endregion
+export { VolumePopoverTrigger };
+
+//# sourceMappingURL=volume-popover-trigger.js.map

package/dist/dev/ui/volume-popover/volume-popover-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-popover-trigger.js","names":[],"sources":["../../../../src/ui/volume-popover/volume-popover-trigger.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from '../popover/context';\nimport { PopoverTrigger, type PopoverTriggerProps } from '../popover/popover-trigger';\nimport { useVolumePopoverContext } from './context';\n\nexport interface VolumePopoverTriggerProps extends PopoverTriggerProps {}\n\n/** Opens the volume popup, or renders its mute-button fallback when volume level controls are unavailable. */\nexport const VolumePopoverTrigger = forwardRef<HTMLButtonElement, VolumePopoverTriggerProps>(\n  function VolumePopoverTrigger({ render, className, style, ...elementProps }, forwardedRef) {\n    const { state: popoverState } = usePopoverContext();\n    const { state } = useVolumePopoverContext();\n\n    if (!state.hidden) {\n      return (\n        <PopoverTrigger ref={forwardedRef} render={render} className={className} style={style} {...elementProps} />\n      );\n    }\n\n    return renderElement(\n      'button',\n      { render, className, style },\n      {\n        state: popoverState,\n        ref: forwardedRef,\n        props: [{ type: 'button' as const }, elementProps],\n      }\n    );\n  }\n);\n\nexport namespace VolumePopoverTrigger {\n  export type Props = VolumePopoverTriggerProps;\n}\n"],"mappings":";;;;;;;;AAUA,MAAa,uBAAuB,WAClC,SAAS,qBAAqB,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAAgB,cAAc;CACzF,MAAM,EAAE,OAAO,iBAAiB,kBAAkB;CAClD,MAAM,EAAE,UAAU,wBAAwB;CAE1C,IAAI,CAAC,MAAM,QACT,OACE,oBAAC,gBAAD;EAAgB,KAAK;EAAsB;EAAmB;EAAkB;EAAO,GAAI;CAAe,CAAA;CAI9G,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE,OAAO;EACP,KAAK;EACL,OAAO,CAAC,EAAE,MAAM,SAAkB,GAAG,YAAY;CACnD,CACF;AACF,CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"volume-slider-root.d.ts","names":[],"sources":["../../../../src/ui/volume-slider/volume-slider-root.tsx"],"mappings":";;;UAuBiB,8BAA8B,wBAAwB,iBAAiB,QAAQ,iBAAiB;EAC/G;EACA;;cAGW,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBA+HZ;OACH,QAAQ;OACR,QAAQ,iBAAiB"}
+{"version":3,"file":"volume-slider-root.d.ts","names":[],"sources":["../../../../src/ui/volume-slider/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/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":["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    const isUnavailable = volume?.volumeAvailability !== 'available';\n    const isDisabled = Boolean(disabled) || isUnavailable;\n\n    const [core] = useState(() => new VolumeSliderCore());\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        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      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            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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"}
+{"version":3,"file":"volume-slider-root.js","names":[],"sources":["../../../../src/ui/volume-slider/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

@@ -4,20 +4,22 @@ 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":";;KAEK,MAAM,UAAU,cAAc,eAAe,sBAAsB;;;;;;;;;;;;;;;;;;;iBAqGxD,WAAW,UAAU,gBAAgB,WAAW,MAAM,oBAAoB,MAAM"}
+{"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,19 +1,13 @@
 //#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;
@@ -22,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;
@@ -40,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) {
@@ -57,20 +45,22 @@ 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 = {};

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

@@ -1 +1 @@
-{"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/**\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":";;;;AAOA,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;;;;AAKA,SAAS,eAAe,KAAa,OAAyB;CAC5D,OAAO,kBAAkB,GAAG,MAAM,OAAO,UAAU,cAAc,OAAO,UAAU;AACpF;;;;AAKA,SAAS,mBACP,MACA,QAC+C;CAC/C,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,CAAC,MAAM,OAAO;CAElB,QAAQ,UAA0B;EAChC,OAAO,KAAK;EACZ,KAAK,KAAK;CACZ;AACF;;;;AAKA,SAAS,gBAAgB,MAA0B,QAAgD;CACjG,IAAI,UAAU,MAAM,OAAO,GAAG,OAAO,GAAG;CACxC,OAAO,UAAU;AACnB;;;;AAKA,SAAS,YAAY,MAAiC,QAA8D;CAClH,IAAI,CAAC,QAAQ,OAAO;CACpB,IAAI,CAAC,MAAM,OAAO;CAClB,OAAO;EAAE,GAAG;EAAM,GAAG;CAAO;AAC9B;;;;AAKA,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;;;;;;;;;;;;;;;;;;;AAoBA,SAAgB,WAAkC,GAAG,UAA8C;CACjG,IAAI,SAAkC,CAAC;CAEvC,KAAK,MAAM,SAAS,UAClB,SAAS,SAAS,QAAQ,KAAK;CAGjC,OAAO;AACT"}
+{"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

@@ -11,10 +11,8 @@ 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. */

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

@@ -1 +1 @@
-{"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;;;;;;;;;KAU7D,iBAAiB,sBAAsB,MAAM,IAAI,mBAAmB,SAAS,KACvF,MAAM,IAAI,kBAAkB;;EAI5B,uBAAuB,OAAO;;EAE9B,QAAQ,kBAAkB,OAAO,UAAU;;EAE3C,SAAS,WAAW"}
+{"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.map

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

@@ -1,6 +1,11 @@
 import { MediaEngineHost } 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 media engine host and detaches it during cleanup.
+ *
+ * @param media - Media engine host to attach and detach.
+ */
 declare function useAttachMedia<T extends HTMLMediaElement>(media: MediaEngineHost): RefCallback<T>;
 //#endregion
 export { useAttachMedia };

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

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

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

@@ -1,5 +1,10 @@
 import { useCallback } from "react";
 //#region src/utils/use-attach-media.ts
+/**
+* Returns a callback ref that attaches an HTML media element to a media engine host and detaches it during cleanup.
+*
+* @param media - Media engine host to attach and detach.
+*/
 function useAttachMedia(media) {
 	return useCallback((element) => {
 		if (element) media.attach?.(element);

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

@@ -1 +1 @@
-{"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["import type { MediaEngineHost } from '@videojs/media';\nimport type { RefCallback } from 'react';\nimport { useCallback } from 'react';\n\nexport function useAttachMedia<T extends HTMLMediaElement>(media: MediaEngineHost): RefCallback<T> {\n  return useCallback(\n    (element: T | null) => {\n      if (element) media.attach?.(element);\n      else media.detach?.();\n      return () => media.detach?.();\n    },\n    [media]\n  );\n}\n"],"mappings":";;AAIA,SAAgB,eAA2C,OAAwC;CACjG,OAAO,aACJ,YAAsB;EACrB,IAAI,SAAS,MAAM,SAAS,OAAO;OAC9B,MAAM,SAAS;EACpB,aAAa,MAAM,SAAS;CAC9B,GACA,CAAC,KAAK,CACR;AACF"}
+{"version":3,"file":"use-attach-media.js","names":[],"sources":["../../../src/utils/use-attach-media.ts"],"sourcesContent":["import type { MediaEngineHost } 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 media engine host and detaches it during cleanup.\n *\n * @param media - Media engine host to attach and detach.\n */\nexport function useAttachMedia<T extends HTMLMediaElement>(media: MediaEngineHost): 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,OAAwC;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-composed-refs.d.ts

@@ -5,10 +5,10 @@ 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} />;
- * ```
+ *   ```tsx
+ *   const composedRef = composeRefs(ref1, ref2, ref3);
+ *   return <div ref={composedRef} />;
+ *   ```;
  */
 declare function composeRefs<T>(...refs: (OptionalRef<T> | OptionalRef<T>[])[]): RefCallback<T>;
 /**
@@ -17,10 +17,12 @@ declare function composeRefs<T>(...refs: (OptionalRef<T> | OptionalRef<T>[])[]):
  * 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.
  */
 declare function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T>;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"use-composed-refs.d.ts","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"mappings":";;KAKK,YAAY,KAAK,IAAI;;;;;;;;;;iBA0BV,YAAY,MAAM,OAAO,YAAY,KAAK,YAAY,UAAU,YAAY;;;;;;;;;;;;iBAkC5E,gBAAgB,MAAM,MAAM,YAAY,OAAO,YAAY"}
+{"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

@@ -16,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();
@@ -40,10 +40,12 @@ 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]);

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":["import { 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":";;;;;;;;;;AAcA,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;IACzB,IAAI,WAAW,OAAO,GACpB,QAAQ;SAER,OAAO,SAAS,IAAI,IAAI;GAE5B;EACF;CAEJ;AACF;;;;;;;;;;;;AAaA,SAAgB,gBAAmB,GAAG,MAAwC;CAC5E,OAAO,YAAY,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,IAAI,CAAC;AACpD"}
+{"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

@@ -3,18 +3,16 @@ interface Destroyable {
   destroy(): void;
 }
 /**
- * Destroy an instance on unmount, deferring destruction to survive React
- * StrictMode's simulated unmount/re-mount cycle.
+ * 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.
+ * 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.
+ * @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

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

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