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

package/dist/dev/ui/volume-indicator/fill.js

@@ -0,0 +1,36 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useVolumeIndicatorContext } from "./context.js";
+import { VolumeIndicatorCSSVars } from "@videojs/core";
+import { forwardRef } from "react";
+import { isFunction } from "@videojs/utils/predicate";
+//#region src/ui/volume-indicator/fill.tsx
+const VolumeIndicatorFill = forwardRef(function VolumeIndicatorFill(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const { state } = useVolumeIndicatorContext();
+	const fillStyle = getVolumeIndicatorFillStyle(state, style);
+	return renderElement("div", {
+		render,
+		className,
+		style: fillStyle
+	}, {
+		state,
+		ref: forwardedRef,
+		props: [elementProps]
+	});
+});
+function getVolumeIndicatorFillStyle(state, style) {
+	const vars = state.fill ? { [VolumeIndicatorCSSVars.fill]: state.fill } : void 0;
+	if (!vars) return style;
+	if (isFunction(style)) return (nextState) => ({
+		...style(nextState),
+		...vars
+	});
+	return {
+		...style,
+		...vars
+	};
+}
+//#endregion
+export { VolumeIndicatorFill };
+
+//# sourceMappingURL=fill.js.map

package/dist/dev/ui/volume-indicator/fill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fill.js","names":[],"sources":["../../../../src/ui/volume-indicator/fill.tsx"],"sourcesContent":["import { type VolumeIndicatorCore, VolumeIndicatorCSSVars } from '@videojs/core';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useVolumeIndicatorContext } from './context';\n\nexport interface VolumeIndicatorFillProps extends UIComponentProps<'div', VolumeIndicatorCore.State> {}\n\nexport const VolumeIndicatorFill = forwardRef(function VolumeIndicatorFill(\n  componentProps: VolumeIndicatorFillProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n  const { state } = useVolumeIndicatorContext();\n  const fillStyle = getVolumeIndicatorFillStyle(state, style);\n\n  return renderElement(\n    'div',\n    { render, className, style: fillStyle },\n    {\n      state,\n      ref: forwardedRef,\n      props: [elementProps],\n    }\n  );\n});\n\nexport namespace VolumeIndicatorFill {\n  export type Props = VolumeIndicatorFillProps;\n}\n\nfunction getVolumeIndicatorFillStyle(\n  state: VolumeIndicatorCore.State,\n  style: VolumeIndicatorFillProps['style']\n): VolumeIndicatorFillProps['style'] {\n  const vars = state.fill\n    ? ({\n        [VolumeIndicatorCSSVars.fill]: state.fill,\n      } as CSSProperties)\n    : undefined;\n  if (!vars) return style;\n\n  if (isFunction(style)) {\n    return (nextState) => ({\n      ...style(nextState),\n      ...vars,\n    });\n  }\n\n  return {\n    ...style,\n    ...vars,\n  };\n}\n"],"mappings":";;;;;;AAWA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,0BAA0B;CAC5C,MAAM,YAAY,4BAA4B,OAAO,KAAK;CAE1D,OAAO,cACL,OACA;EAAE;EAAQ;EAAW,OAAO;CAAU,GACtC;EACE;EACA,KAAK;EACL,OAAO,CAAC,YAAY;CACtB,CACF;AACF,CAAC;AAMD,SAAS,4BACP,OACA,OACmC;CACnC,MAAM,OAAO,MAAM,OACd,GACE,uBAAuB,OAAO,MAAM,KACvC,IACA,KAAA;CACJ,IAAI,CAAC,MAAM,OAAO;CAElB,IAAI,WAAW,KAAK,GAClB,QAAQ,eAAe;EACrB,GAAG,MAAM,SAAS;EAClB,GAAG;CACL;CAGF,OAAO;EACL,GAAG;EACH,GAAG;CACL;AACF"}

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

@@ -1,6 +1,6 @@
-import { VolumeIndicatorFill, VolumeIndicatorFillProps } from "./volume-indicator-fill.js";
-import { VolumeIndicatorRoot, VolumeIndicatorRootProps } from "./volume-indicator-root.js";
-import { VolumeIndicatorValue, VolumeIndicatorValueProps } from "./volume-indicator-value.js";
+import { VolumeIndicatorFill, VolumeIndicatorFillProps } from "./fill.js";
+import { VolumeIndicatorRoot, VolumeIndicatorRootProps } from "./root.js";
+import { VolumeIndicatorValue, VolumeIndicatorValueProps } from "./value.js";
 declare namespace index_parts_d_exports {
   export { VolumeIndicatorFill as Fill, VolumeIndicatorFillProps as FillProps, VolumeIndicatorRoot as Root, VolumeIndicatorRootProps as RootProps, VolumeIndicatorValue as Value, VolumeIndicatorValueProps as ValueProps };
 }

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

@@ -1,7 +1,7 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { VolumeIndicatorFill } from "./volume-indicator-fill.js";
-import { VolumeIndicatorRoot } from "./volume-indicator-root.js";
-import { VolumeIndicatorValue } from "./volume-indicator-value.js";
+import { VolumeIndicatorFill } from "./fill.js";
+import { VolumeIndicatorRoot } from "./root.js";
+import { VolumeIndicatorValue } from "./value.js";
 //#region src/ui/volume-indicator/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Fill: () => VolumeIndicatorFill,

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

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-indicator/index.parts.ts"],"sourcesContent":["export { VolumeIndicatorFill as Fill, type VolumeIndicatorFillProps as FillProps } from './volume-indicator-fill';\nexport { VolumeIndicatorRoot as Root, type VolumeIndicatorRootProps as RootProps } from './volume-indicator-root';\nexport { VolumeIndicatorValue as Value, type VolumeIndicatorValueProps as ValueProps } from './volume-indicator-value';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/volume-indicator/index.parts.ts"],"sourcesContent":["export { VolumeIndicatorFill as Fill, type VolumeIndicatorFillProps as FillProps } from './fill';\nexport { VolumeIndicatorRoot as Root, type VolumeIndicatorRootProps as RootProps } from './root';\nexport { VolumeIndicatorValue as Value, type VolumeIndicatorValueProps as ValueProps } from './value';\n"],"mappings":""}

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

@@ -0,0 +1,12 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { VolumeIndicatorCore } from "@videojs/core";
+//#region src/ui/volume-indicator/root.d.ts
+interface VolumeIndicatorRootProps extends UIComponentProps<'div', VolumeIndicatorCore.State>, Omit<VolumeIndicatorCore.Props, 'labels'> {}
+declare const VolumeIndicatorRoot: import("react").ForwardRefExoticComponent<Omit<VolumeIndicatorRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace VolumeIndicatorRoot {
+  type Props = VolumeIndicatorRootProps;
+  type State = VolumeIndicatorCore.State;
+}
+//#endregion
+export { VolumeIndicatorRoot, VolumeIndicatorRootProps };
+//# sourceMappingURL=root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/root.tsx"],"mappings":";;;UAUiB,iCACP,wBAAwB,oBAAoB,QAAQ,KAAK,oBAAoB;cAE1E,qCAAmB,0BAAA,KAAA,mDAAA,cAAA;kBAgCf;OACH,QAAQ;OACR,QAAQ,oBAAoB"}

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

@@ -0,0 +1,34 @@
+import { useTranslator } from "../../i18n/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useInputIndicatorRoot } from "../input-indicator/use-input-indicator-root.js";
+import { VolumeIndicatorProvider } from "./context.js";
+import { VolumeIndicatorCore, VolumeIndicatorDataAttrs, createInputIndicatorLabels } from "@videojs/core";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/volume-indicator/root.tsx
+const VolumeIndicatorRoot = forwardRef(function VolumeIndicatorRoot(componentProps, forwardedRef) {
+	const { render, className, style, closeDelay, ...elementProps } = componentProps;
+	const translator = useTranslator();
+	const { elementRef, present, state } = useInputIndicatorRoot(() => new VolumeIndicatorCore(), {
+		closeDelay,
+		labels: createInputIndicatorLabels(translator)
+	}, { replayOnUpdate: false });
+	if (!present) return null;
+	return /* @__PURE__ */ jsx(VolumeIndicatorProvider, {
+		value: { state },
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: VolumeIndicatorDataAttrs,
+			ref: [forwardedRef, elementRef],
+			props: [elementProps]
+		})
+	});
+});
+//#endregion
+export { VolumeIndicatorRoot };
+
+//# sourceMappingURL=root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/volume-indicator/root.tsx"],"sourcesContent":["import { createInputIndicatorLabels, VolumeIndicatorCore, VolumeIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicator/use-input-indicator-root';\nimport { VolumeIndicatorProvider } from './context';\n\nexport interface VolumeIndicatorRootProps\n  extends UIComponentProps<'div', VolumeIndicatorCore.State>, Omit<VolumeIndicatorCore.Props, 'labels'> {}\n\nexport const VolumeIndicatorRoot = forwardRef(function VolumeIndicatorRoot(\n  componentProps: VolumeIndicatorRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, closeDelay, ...elementProps } = componentProps;\n  const translator = useTranslator();\n  const { elementRef, present, state } = useInputIndicatorRoot(\n    () => new VolumeIndicatorCore(),\n    {\n      closeDelay,\n      labels: createInputIndicatorLabels(translator),\n    },\n    { replayOnUpdate: false }\n  );\n  if (!present) return null;\n\n  return (\n    <VolumeIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: VolumeIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </VolumeIndicatorProvider>\n  );\n});\n\nexport namespace VolumeIndicatorRoot {\n  export type Props = VolumeIndicatorRootProps;\n  export type State = VolumeIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,GAAG,iBAAiB;CAClE,MAAM,aAAa,cAAc;CACjC,MAAM,EAAE,YAAY,SAAS,UAAU,4BAC/B,IAAI,oBAAoB,GAC9B;EACE;EACA,QAAQ,2BAA2B,UAAU;CAC/C,GACA,EAAE,gBAAgB,MAAM,CAC1B;CACA,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,yBAAD;EAAyB,OAAO,EAAE,MAAM;EACrC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CAAC,YAAY;EACtB,CACF;CACuB,CAAA;AAE7B,CAAC"}

package/dist/dev/ui/volume-indicator/value.d.ts

@@ -0,0 +1,11 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { VolumeIndicatorCore } from "@videojs/core";
+//#region src/ui/volume-indicator/value.d.ts
+interface VolumeIndicatorValueProps extends UIComponentProps<'span', VolumeIndicatorCore.State> {}
+declare const VolumeIndicatorValue: import("react").ForwardRefExoticComponent<Omit<VolumeIndicatorValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare namespace VolumeIndicatorValue {
+  type Props = VolumeIndicatorValueProps;
+}
+//#endregion
+export { VolumeIndicatorValue, VolumeIndicatorValueProps };
+//# sourceMappingURL=value.d.ts.map

package/dist/dev/ui/volume-indicator/value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.d.ts","names":[],"sources":["../../../../src/ui/volume-indicator/value.tsx"],"mappings":";;;UAQiB,kCAAkC,yBAAyB,oBAAoB;cAEnF,sCAAoB,0BAAA,KAAA,oDAAA,cAAA;kBAkBhB;OACH,QAAQ"}

package/dist/dev/ui/volume-indicator/value.js

@@ -0,0 +1,22 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useVolumeIndicatorContext } from "./context.js";
+import { getVolumeIndicatorDisplayValue } from "@videojs/core";
+import { forwardRef } from "react";
+//#region src/ui/volume-indicator/value.tsx
+const VolumeIndicatorValue = forwardRef(function VolumeIndicatorValue(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const { state } = useVolumeIndicatorContext();
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: forwardedRef,
+		props: [{ children: getVolumeIndicatorDisplayValue(state) }, elementProps]
+	});
+});
+//#endregion
+export { VolumeIndicatorValue };
+
+//# sourceMappingURL=value.js.map

package/dist/dev/ui/volume-indicator/value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.js","names":[],"sources":["../../../../src/ui/volume-indicator/value.tsx"],"sourcesContent":["import { getVolumeIndicatorDisplayValue, type VolumeIndicatorCore } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useVolumeIndicatorContext } from './context';\n\nexport interface VolumeIndicatorValueProps extends UIComponentProps<'span', VolumeIndicatorCore.State> {}\n\nexport const VolumeIndicatorValue = forwardRef(function VolumeIndicatorValue(\n  componentProps: VolumeIndicatorValueProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n  const { state } = useVolumeIndicatorContext();\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: forwardedRef,\n      props: [{ children: getVolumeIndicatorDisplayValue(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace VolumeIndicatorValue {\n  export type Props = VolumeIndicatorValueProps;\n}\n"],"mappings":";;;;;AAUA,MAAa,uBAAuB,WAAW,SAAS,qBACtD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,0BAA0B;CAE5C,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,+BAA+B,KAAK,EAAE,GAAG,YAAY;CAC3E,CACF;AACF,CAAC"}

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

@@ -1,6 +1,6 @@
-import { VolumePopoverPopup, VolumePopoverPopupProps } from "./volume-popover-popup.js";
-import { VolumePopoverRoot, VolumePopoverRootProps } from "./volume-popover-root.js";
-import { VolumePopoverTrigger, VolumePopoverTriggerProps } from "./volume-popover-trigger.js";
+import { VolumePopoverPopup, VolumePopoverPopupProps } from "./popup.js";
+import { VolumePopoverRoot, VolumePopoverRootProps } from "./root.js";
+import { VolumePopoverTrigger, VolumePopoverTriggerProps } from "./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 };
 }

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

@@ -1,7 +1,7 @@
 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";
+import { VolumePopoverPopup } from "./popup.js";
+import { VolumePopoverRoot } from "./root.js";
+import { VolumePopoverTrigger } from "./trigger.js";
 //#region src/ui/volume-popover/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Popup: () => VolumePopoverPopup,

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

@@ -1 +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":""}
+{"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 './popup';\nexport { VolumePopoverRoot as Root, type VolumePopoverRootProps as RootProps } from './root';\nexport { VolumePopoverTrigger as Trigger, type VolumePopoverTriggerProps as TriggerProps } from './trigger';\n"],"mappings":""}

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

@@ -0,0 +1,11 @@
+import { PopoverPopupProps } from "../popover/popup.js";
+//#region src/ui/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=popup.d.ts.map

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

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

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

@@ -0,0 +1,21 @@
+import { PopoverPopup } from "../popover/popup.js";
+import { useVolumePopoverContext } from "./context.js";
+import { VolumePopoverDataAttrs } from "@videojs/core";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/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=popup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popup.js","names":[],"sources":["../../../../src/ui/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/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/root.d.ts

@@ -0,0 +1,14 @@
+import { PopoverRootProps } from "../popover/root.js";
+import { VolumePopoverCore } from "@videojs/core";
+import { ReactNode } from "react";
+//#region src/ui/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=root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","names":[],"sources":["../../../../src/ui/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/root.js

@@ -0,0 +1,47 @@
+import { usePlayer } from "../../player/context.js";
+import { usePopoverContext } from "../popover/context.js";
+import { PopoverRoot } from "../popover/root.js";
+import { VolumePopoverContextProvider } from "./context.js";
+import { VolumePopoverCore } from "@videojs/core";
+import { selectVolume } from "@videojs/core/dom";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/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=root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":["Popover.Root"],"sources":["../../../../src/ui/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/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/trigger.d.ts

@@ -0,0 +1,11 @@
+import { PopoverTriggerProps } from "../popover/trigger.js";
+//#region src/ui/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=trigger.d.ts.map

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

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

package/dist/dev/ui/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/trigger.js";
+import { useVolumePopoverContext } from "./context.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/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=trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.js","names":[],"sources":["../../../../src/ui/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/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/index.parts.d.ts

@@ -1,10 +1,10 @@
-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 { 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 "./volume-slider-root.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 };
 }

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

@@ -1,10 +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,

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/docs/README.md

@@ -1,6 +1,6 @@
 # @videojs/react documentation
 
-Bundled markdown documentation for `@videojs/react` v10.0.0-rc.1.
+Bundled markdown documentation for `@videojs/react` v10.0.0-rc.2.
 
 Start at [`./llms.txt`](./llms.txt) — it's the structured index of every page in this directory.