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

package/dist/dev/ui/volume-indicator/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/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=volume-indicator-fill.js.map

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

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

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

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

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

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

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

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

package/dist/dev/ui/volume-indicator/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/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=volume-indicator-value.js.map

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

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

@@ -0,0 +1,13 @@
+import { createContext, useContext } from "react";
+//#region src/ui/volume-popover/context.tsx
+const VolumePopoverContext = createContext(null);
+const VolumePopoverContextProvider = VolumePopoverContext.Provider;
+function useVolumePopoverContext() {
+	const context = useContext(VolumePopoverContext);
+	if (!context) throw new Error("VolumePopover compound components must be used within a VolumePopover.Root");
+	return context;
+}
+//#endregion
+export { VolumePopoverContextProvider, useVolumePopoverContext };
+
+//# sourceMappingURL=context.js.map

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 { 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/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 { VolumePopoverCore } from "@videojs/core";
+import { ReactNode } from "react";
+//#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 { 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/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/index.js

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

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

@@ -3,12 +3,11 @@ 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 "../slider/index.parts.js";
 import { VolumeSliderRoot, VolumeSliderRootProps } from "./volume-slider-root.js";
-
-//#region src/ui/volume-slider/index.parts.d.ts
 declare namespace index_parts_d_exports {
   export { SliderFill as Fill, SliderFillProps as FillProps, SliderPreview as Preview, SliderPreviewProps as PreviewProps, VolumeSliderRoot as Root, VolumeSliderRootProps as RootProps, SliderThumb as Thumb, SliderThumbProps as ThumbProps, SliderTrack as Track, SliderTrackProps as TrackProps, SliderValue as Value, SliderValueProps as ValueProps };
 }
 //#endregion
-export { index_parts_d_exports };
+export { SliderFill as Fill, type SliderFillProps as FillProps, SliderPreview as Preview, type SliderPreviewProps as PreviewProps, VolumeSliderRoot as Root, type VolumeSliderRootProps as RootProps, SliderThumb as Thumb, type SliderThumbProps as ThumbProps, SliderTrack as Track, type SliderTrackProps as TrackProps, SliderValue as Value, type SliderValueProps as ValueProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

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

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

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

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

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":";;;;;UAqBiB,qBAAA,SAA8B,gBAAA,QAAwB,gBAAA,CAAiB,KAAA,GAAQ,gBAAA,CAAiB,KAAA;EAC/G,WAAA;EACA,SAAA;AAAA;AAAA,cAGW,gBAAA,EAAgB,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,qBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAiFZ,gBAAA;EAAA,KACH,KAAA,GAAQ,qBAAA;EAAA,KACR,KAAA,GAAQ,gBAAA,CAAiB,KAAA;AAAA"}
+{"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

@@ -1,70 +1,99 @@
-'use client';
-
+import { useLocale, useTranslator } from "../../i18n/context.js";
 import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.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 { getSliderCSSVars, logMissingFeature, selectVolume } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
 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/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, disabled, thumbAlignment, onDragStart, onDragEnd, ...elementProps } = componentProps;
+	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 { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
+	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: () => volume ? volume.volume * 100 : 0,
-		getStepPercent: () => core.getStepPercent(),
+		getPercent,
+		getStepPercent,
 		getLargeStepPercent: () => core.getLargeStepPercent(),
 		orientation,
-		disabled,
+		disabled: isDisabled,
 		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
 		getCSSVars: getSliderCSSVars,
-		onValueChange: (percent) => {
-			volumeRef.current?.setVolume(percent / 100);
-		},
-		onValueCommit: (percent) => {
-			volumeRef.current?.setVolume(percent / 100);
-		},
+		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) => core.getAttrs(sliderState),
+			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", {
@@ -74,7 +103,11 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 		}, {
 			state,
 			stateAttrMap: VolumeSliderDataAttrs,
-			ref: [forwardedRef, rootRef],
+			ref: [
+				forwardedRef,
+				rootRef,
+				wheelRef
+			],
 			props: [
 				{ style: {
 					...cssVars,
@@ -86,7 +119,7 @@ const VolumeSliderRoot = forwardRef(function VolumeSliderRoot(componentProps, fo
 		})
 	});
 });
-
 //#endregion
 export { VolumeSliderRoot };
+
 //# sourceMappingURL=volume-slider-root.js.map