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

package/dist/dev/ui/tooltip/popup.js

@@ -0,0 +1,99 @@
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useTooltipContext } from "./context.js";
+import { usePopupPosition } from "../popover/use-popup-position.js";
+import { TooltipLabel } from "./label.js";
+import { TooltipShortcut } from "./shortcut.js";
+import { TooltipCSSVars } from "@videojs/core";
+import { c } from "react-compiler-runtime";
+import { forwardRef, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/ui/tooltip/popup.tsx
+/**
+* Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript
+* fallback.
+*/
+const TooltipPopup = forwardRef(function TooltipPopup(t0, forwardedRef) {
+	const $ = c(15);
+	const { render, className, style, children, ...elementProps } = t0;
+	const { core, tooltip, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, popupId, boundary, container } = useTooltipContext();
+	const internalRef = useRef(null);
+	let t1;
+	if ($[0] !== tooltip) {
+		t1 = (el) => {
+			tooltip.setPopupElement(el);
+		};
+		$[0] = tooltip;
+		$[1] = t1;
+	} else t1 = $[1];
+	const composedRef = useComposedRefs(forwardedRef, t1, internalRef);
+	let t2;
+	if ($[2] !== preferredSide || $[3] !== state.align) {
+		t2 = {
+			side: preferredSide,
+			align: state.align
+		};
+		$[2] = preferredSide;
+		$[3] = state.align;
+		$[4] = t2;
+	} else t2 = $[4];
+	const posOpts = t2;
+	let t3;
+	if ($[5] !== anchorName || $[6] !== boundary || $[7] !== container || $[8] !== posOpts || $[9] !== setPositionedSide || $[10] !== state.open || $[11] !== tooltip) {
+		t3 = {
+			open: state.open,
+			anchorName,
+			position: posOpts,
+			triggerSource: tooltip,
+			popupRef: internalRef,
+			boundary,
+			container,
+			cssVars: TooltipCSSVars,
+			onSideChange: setPositionedSide
+		};
+		$[5] = anchorName;
+		$[6] = boundary;
+		$[7] = container;
+		$[8] = posOpts;
+		$[9] = setPositionedSide;
+		$[10] = state.open;
+		$[11] = tooltip;
+		$[12] = t3;
+	} else t3 = $[12];
+	const positioningStyle = usePopupPosition(t3);
+	if (!state.open) return null;
+	let t4;
+	if ($[13] !== children) {
+		t4 = children !== void 0 ? children : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(TooltipLabel, {}), /* @__PURE__ */ jsx(TooltipShortcut, {})] });
+		$[13] = children;
+		$[14] = t4;
+	} else t4 = $[14];
+	const body = t4;
+	const { onFocusOut, ...restPopupProps } = tooltip.popupProps;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: composedRef,
+		props: [
+			{
+				id: popupId,
+				style: positioningStyle,
+				...core.getPopupAttrs(state)
+			},
+			{ children: body },
+			{
+				...restPopupProps,
+				onBlur: onFocusOut
+			},
+			elementProps
+		]
+	});
+});
+//#endregion
+export { TooltipPopup };
+
+//# sourceMappingURL=popup.js.map

package/dist/dev/ui/tooltip/popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.js","names":["{ render, className, style, children, ...elementProps }","(el: HTMLDivElement | null) => {\n      tooltip.setPopupElement(el);\n    }","useCallback(\n    (el: HTMLDivElement | null) => {\n      tooltip.setPopupElement(el);\n    },\n    [tooltip]\n  )","{ side: preferredSide, align: state.align }","align","useMemo(() => ({ side: preferredSide, align: state.align }), [preferredSide, state.align])","{\n    open: state.open,\n    anchorName,\n    position: posOpts,\n    triggerSource: tooltip,\n    popupRef: internalRef,\n    boundary,\n    container,\n    cssVars: TooltipCSSVars,\n    onSideChange: setPositionedSide,\n  }","open","children !== undefined ? (\n      children\n    ) : (\n      <>\n        <TooltipLabel />\n        <TooltipShortcut />\n      </>\n    )"],"sources":["../../../../src/ui/tooltip/popup.tsx"],"sourcesContent":["import { TooltipCSSVars, type TooltipState } from '@videojs/core';\nimport { forwardRef, useCallback, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopupPosition } from '../popover/use-popup-position';\nimport { useTooltipContext } from './context';\nimport { TooltipLabel } from './label';\nimport { TooltipShortcut } from './shortcut';\n\nexport interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}\n\n/**\n * Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript\n * fallback.\n */\nexport const TooltipPopup = forwardRef<HTMLDivElement, TooltipPopupProps>(function TooltipPopup(\n  { render, className, style, children, ...elementProps },\n  forwardedRef\n) {\n  const {\n    core,\n    tooltip,\n    state,\n    preferredSide,\n    setPositionedSide,\n    stateAttrMap,\n    anchorName,\n    popupId,\n    boundary,\n    container,\n  } = useTooltipContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const popupRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      tooltip.setPopupElement(el);\n    },\n    [tooltip]\n  );\n\n  const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n  // --- Positioning ---\n\n  const posOpts = useMemo(() => ({ side: preferredSide, align: state.align }), [preferredSide, state.align]);\n\n  const positioningStyle = usePopupPosition({\n    open: state.open,\n    anchorName,\n    position: posOpts,\n    triggerSource: tooltip,\n    popupRef: internalRef,\n    boundary,\n    container,\n    cssVars: TooltipCSSVars,\n    onSideChange: setPositionedSide,\n  });\n\n  // --- Visibility ---\n\n  if (!state.open) {\n    return null;\n  }\n\n  const body =\n    children !== undefined ? (\n      children\n    ) : (\n      <>\n        <TooltipLabel />\n        <TooltipShortcut />\n      </>\n    );\n\n  // Remap DOM focus events to React synthetic event names.\n  const { onFocusOut, ...restPopupProps } = tooltip.popupProps;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: composedRef,\n      props: [\n        {\n          id: popupId,\n          style: positioningStyle,\n          ...core.getPopupAttrs(state),\n        },\n        { children: body },\n        { ...restPopupProps, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace TooltipPopup {\n  export type Props = TooltipPopupProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAa,eAAe,WAA8C,SAAS,aAAA,IAEjF,cACA;;CAFA,MAAA,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAzCA;CAGA,MAAM,EACJ,MACA,SACA,OACA,eACA,mBACA,cACA,YACA,SACA,UACA,cACE,kBAAkB;CACtB,MAAM,cAAc,OAAuB,IAAI;CAG7CC,IAAAA;CACE,IAAA,EAAA,OAAA,SAAA;EADF,MAAC,OAA8B;GAC7B,QAAQ,gBAAgB,EAAE;EAC5B;EADE,EAAA,KAAA;;;CAKJ,MAAM,cAAc,gBAAgB,cAAc,IAAU,WAAW;CAIxCE,IAAAA;CAAQ,IAAA,EAAA,OAAA,iBAAA,EAAA,OAA4BC,MAAAA,OAAAA;EAApC,KAAA;GAAE,MAAM;GAAe,OAAO,MAAM;EAAM;EAAlC,EAAA,KAAA;EAA4BA,EAAAA,KAAAA,MAAAA;;;CAAnE,MAAM,UAAUC;CAE0BC,IAAAA;CAExC,IAAA,EAAA,OAAA,cAAA,EAAA,OAIA,YAAA,EAAA,OACA,aAAA,EAAA,OAJU,WAAA,EAAA,OAMI,qBAAA,EAAA,QARFC,MAAAA,QAAAA,EAAAA,QAGG,SAAA;EAJyB,KAAA;GACxC,MAAM,MAAM;GACZ;GACA,UAAU;GACV,eAAe;GACf,UAAU;GACV;GACA;GACA,SAAS;GACT,cAAc;EAChB;EARE,EAAA,KAAA;EAIA,EAAA,KAAA;EACA,EAAA,KAAA;EAJU,EAAA,KAAA;EAMI,EAAA,KAAA;EARFA,EAAAA,MAAAA,MAAAA;EAGG,EAAA,MAAA;;;CAJjB,MAAM,mBAAmB,iBAAiBD,EAUzC;CAID,IAAI,CAAC,MAAM,MACT,OAAO;CAIPE,IAAAA;;EAAa,KAAA,aAAA,KAAA,IACX,WAEA,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,oBAAC,iBAAD,CAAkB,CAAA,CAClB,EAAA,CAAA;EANJ,EAAA,MAAA;;;CADF,MAAM,OACJA;CAUF,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;CAElD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,KAAK;GAC7B;GACA,EAAE,UAAU,KAAK;GACjB;IAAE,GAAG;IAAgB,QAAQ;GAAW;GACxC;EACF;CACF,CACF;AACF,CAAC"}

package/dist/dev/ui/tooltip/provider.d.ts

@@ -0,0 +1,13 @@
+import { TooltipGroupProps } from "@videojs/core";
+import { ReactNode } from "react";
+//#region src/ui/tooltip/provider.d.ts
+interface TooltipProviderProps extends TooltipGroupProps {
+  children?: ReactNode;
+}
+declare function TooltipProvider({ delay, closeDelay, timeout, children }: TooltipProviderProps): ReactNode;
+declare namespace TooltipProvider {
+  type Props = TooltipProviderProps;
+}
+//#endregion
+export { TooltipProvider, TooltipProviderProps };
+//# sourceMappingURL=provider.d.ts.map

package/dist/dev/ui/tooltip/provider.js

@@ -0,0 +1,49 @@
+import { TooltipGroupContextProvider } from "./group-context.js";
+import { TooltipGroupCore } from "@videojs/core";
+import { c } from "react-compiler-runtime";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/tooltip/provider.tsx
+function TooltipProvider(t0) {
+	const $ = c(9);
+	const { delay, closeDelay, timeout, children } = t0;
+	let t1;
+	if ($[0] !== closeDelay || $[1] !== delay || $[2] !== timeout) {
+		t1 = () => new TooltipGroupCore({
+			delay,
+			closeDelay,
+			timeout
+		});
+		$[0] = closeDelay;
+		$[1] = delay;
+		$[2] = timeout;
+		$[3] = t1;
+	} else t1 = $[3];
+	const [group] = useState(t1);
+	group.setProps({
+		delay,
+		closeDelay,
+		timeout
+	});
+	let t2;
+	if ($[4] !== group) {
+		t2 = { group };
+		$[4] = group;
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== children || $[7] !== t2) {
+		t3 = /* @__PURE__ */ jsx(TooltipGroupContextProvider, {
+			value: t2,
+			children
+		});
+		$[6] = children;
+		$[7] = t2;
+		$[8] = t3;
+	} else t3 = $[8];
+	return t3;
+}
+//#endregion
+export { TooltipProvider };
+
+//# sourceMappingURL=provider.js.map

package/dist/dev/ui/tooltip/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","names":["{ delay, closeDelay, timeout, children }: TooltipProviderProps","() => new TooltipGroupCore({ delay, closeDelay, timeout })","{ group }","<TooltipGroupContextProvider value={{ group }}>{children}</TooltipGroupContextProvider>"],"sources":["../../../../src/ui/tooltip/provider.tsx"],"sourcesContent":["import { TooltipGroupCore, type TooltipGroupProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { TooltipGroupContextProvider } from './group-context';\n\nexport interface TooltipProviderProps extends TooltipGroupProps {\n  children?: ReactNode;\n}\n\nexport function TooltipProvider({ delay, closeDelay, timeout, children }: TooltipProviderProps): ReactNode {\n  const [group] = useState(() => new TooltipGroupCore({ delay, closeDelay, timeout }));\n\n  group.setProps({ delay, closeDelay, timeout });\n\n  return <TooltipGroupContextProvider value={{ group }}>{children}</TooltipGroupContextProvider>;\n}\n\nexport namespace TooltipProvider {\n  export type Props = TooltipProviderProps;\n}\n"],"mappings":";;;;;;AAUA,SAAgB,gBAAA,IAA2F;;CAA3E,MAAA,EAAE,OAAO,YAAY,SAAS,aAA9BA;CACLC,IAAAA;CAAoC,IAAA,EAAA,OAAA,cAAA,EAAA,OAAP,SAAA,EAAA,OAAmB,SAAA;EAAhD,WAAM,IAAI,iBAAiB;GAAE;GAAO;GAAY;EAAQ,CAAC;EAArB,EAAA,KAAA;EAAP,EAAA,KAAA;EAAmB,EAAA,KAAA;;;CAAzE,MAAM,CAAC,SAAS,SAASA,EAA0D;CAEnF,MAAM,SAAS;EAAE;EAAO;EAAY;CAAQ,CAAC;CAEFC,IAAAA;CAAE,IAAA,EAAA,OAAA,OAAA;EAAF,KAAA,EAAE,MAAM;EAAN,EAAA,KAAA;;;CAAtCC,IAAAA;CAAgD,IAAA,EAAA,OAAA,YAAA,EAAA,OAAZD,IAAAA;EAApC,KAAA,oBAAC,6BAAD;GAA6B,OAAOA;GAAY;EAAsC,CAAA;EAAtC,EAAA,KAAA;EAAZA,EAAAA,KAAAA;;;CAA3C,OAAOC;AACT"}

package/dist/dev/ui/tooltip/root.d.ts

@@ -0,0 +1,20 @@
+import { TooltipProps } from "@videojs/core";
+import { PositioningBoundary, TooltipChangeDetails } from "@videojs/core/dom";
+import { ReactNode } from "react";
+//#region src/ui/tooltip/root.d.ts
+interface TooltipRootProps extends Omit<TooltipProps, 'boundary'> {
+  /** Boundary used to constrain the popup size. */
+  boundary?: PositioningBoundary;
+  /** Called when the tooltip open state changes (fires immediately, before animations). */
+  onOpenChange?: (open: boolean, details: TooltipChangeDetails) => void;
+  /** Called after open/close animations complete. */
+  onOpenChangeComplete?: (open: boolean) => void;
+  children?: ReactNode;
+}
+declare function TooltipRoot({ open: controlledOpen, defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, delay, closeDelay, disableHoverablePopup, disabled, sticky, boundary, children, ...coreProps }: TooltipRootProps): ReactNode;
+declare namespace TooltipRoot {
+  type Props = TooltipRootProps;
+}
+//#endregion
+export { TooltipRoot, TooltipRootProps };
+//# sourceMappingURL=root.d.ts.map

package/dist/dev/ui/tooltip/root.js

@@ -0,0 +1,94 @@
+import { useOptionalContainer } from "../../player/context.js";
+import { useOptionalPopupGroup } from "../../player/popup-group-context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { TooltipContextProvider } from "./context.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { useOptionalControlsContext } from "../controls/context.js";
+import { usePositionedState } from "../hooks/use-positioned-state.js";
+import { useTooltipGroup } from "./group-context.js";
+import { TooltipCore, TooltipDataAttrs } from "@videojs/core";
+import { createTooltip, createTransition } from "@videojs/core/dom";
+import { useSnapshot } from "@videojs/store/react";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isUndefined } from "@videojs/utils/predicate";
+//#region src/ui/tooltip/root.tsx
+function TooltipRoot({ open: controlledOpen, defaultOpen = TooltipCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, delay = TooltipCore.defaultProps.delay, closeDelay = TooltipCore.defaultProps.closeDelay, disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup, disabled = TooltipCore.defaultProps.disabled, sticky = TooltipCore.defaultProps.sticky, boundary = "container", children, ...coreProps }) {
+	const container = useOptionalContainer();
+	const popupGroup = useOptionalPopupGroup();
+	const controls = useOptionalControlsContext();
+	const [core] = useState(() => new TooltipCore(coreProps));
+	core.setProps(coreProps);
+	const isControlled = !isUndefined(controlledOpen);
+	const groupFromContext = useTooltipGroup();
+	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
+	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
+	const delayRef = useLatestRef(delay);
+	const closeDelayRef = useLatestRef(closeDelay);
+	const disableHoverablePopupRef = useLatestRef(disableHoverablePopup);
+	const disabledRef = useLatestRef(disabled);
+	const stickyRef = useLatestRef(sticky);
+	const groupRef = useLatestRef(groupFromContext);
+	const popupGroupRef = useLatestRef(popupGroup);
+	const [tooltip] = useState(() => {
+		const instance = createTooltip({
+			transition: createTransition(),
+			onOpenChange: (nextOpen, details) => {
+				onOpenChangeRef.current?.(nextOpen, details);
+			},
+			onOpenChangeComplete: (nextOpen) => {
+				onOpenChangeCompleteRef.current?.(nextOpen);
+			},
+			delay: () => delayRef.current,
+			closeDelay: () => closeDelayRef.current,
+			disableHoverablePopup: () => disableHoverablePopupRef.current,
+			disabled: () => disabledRef.current,
+			sticky: () => stickyRef.current,
+			group: () => groupRef.current,
+			popupGroup: () => popupGroupRef.current
+		});
+		if (!isControlled && defaultOpen) instance.open();
+		return instance;
+	});
+	const [content, setContent] = useState();
+	const anchorName = useSafeId();
+	const popupId = useSafeId("tooltip");
+	useEffect(() => {
+		if (isUndefined(controlledOpen)) return;
+		const { active: inputOpen } = tooltip.input.current;
+		if (controlledOpen === inputOpen) return;
+		if (controlledOpen) tooltip.open();
+		else tooltip.close();
+	}, [controlledOpen, tooltip]);
+	useEffect(() => {
+		if (isUndefined(controls?.state.visible)) return;
+		if (controls.state.visible) return;
+		tooltip.close("imperative-action");
+	}, [controls?.state.visible, tooltip]);
+	useDestroy(tooltip);
+	const input = useSnapshot(tooltip.input);
+	core.setInput(input);
+	const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());
+	return /* @__PURE__ */ jsx(TooltipContextProvider, {
+		value: {
+			core,
+			tooltip,
+			state,
+			preferredSide,
+			setPositionedSide,
+			stateAttrMap: TooltipDataAttrs,
+			anchorName,
+			popupId,
+			content,
+			setContent,
+			boundary,
+			container
+		},
+		children
+	});
+}
+//#endregion
+export { TooltipRoot };
+
+//# sourceMappingURL=root.js.map

package/dist/dev/ui/tooltip/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/tooltip/root.tsx"],"sourcesContent":["import { type TooltipProps as CoreTooltipProps, TooltipCore, TooltipDataAttrs } from '@videojs/core';\nimport {\n  createTooltip,\n  createTransition,\n  type PositioningBoundary,\n  type TooltipChangeDetails,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isUndefined } from '@videojs/utils/predicate';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useOptionalContainer } from '../../player/context';\nimport { useOptionalPopupGroup } from '../../player/popup-group-context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { type TooltipContent, TooltipContextProvider } from './context';\nimport { useTooltipGroup } from './group-context';\n\nexport interface TooltipRootProps extends Omit<CoreTooltipProps, 'boundary'> {\n  /** Boundary used to constrain the popup size. */\n  boundary?: PositioningBoundary;\n  /** Called when the tooltip open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean, details: TooltipChangeDetails) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function TooltipRoot({\n  open: controlledOpen,\n  defaultOpen = TooltipCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  delay = TooltipCore.defaultProps.delay,\n  closeDelay = TooltipCore.defaultProps.closeDelay,\n  disableHoverablePopup = TooltipCore.defaultProps.disableHoverablePopup,\n  disabled = TooltipCore.defaultProps.disabled,\n  sticky = TooltipCore.defaultProps.sticky,\n  boundary = 'container',\n  children,\n  ...coreProps\n}: TooltipRootProps): ReactNode {\n  const container = useOptionalContainer();\n  const popupGroup = useOptionalPopupGroup();\n  const controls = useOptionalControlsContext();\n  const [core] = useState(() => new TooltipCore(coreProps));\n\n  core.setProps(coreProps);\n\n  const isControlled = !isUndefined(controlledOpen);\n\n  const groupFromContext = useTooltipGroup();\n\n  // Keep refs that always point to the latest values so the\n  // createTooltip closure never reads stale props.\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const delayRef = useLatestRef(delay);\n  const closeDelayRef = useLatestRef(closeDelay);\n  const disableHoverablePopupRef = useLatestRef(disableHoverablePopup);\n  const disabledRef = useLatestRef(disabled);\n  const stickyRef = useLatestRef(sticky);\n  const groupRef = useLatestRef(groupFromContext);\n  const popupGroupRef = useLatestRef(popupGroup);\n\n  const [tooltip] = useState(() => {\n    const instance = createTooltip({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: TooltipChangeDetails) => {\n        onOpenChangeRef.current?.(nextOpen, details);\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n      delay: () => delayRef.current,\n      closeDelay: () => closeDelayRef.current,\n      disableHoverablePopup: () => disableHoverablePopupRef.current,\n      disabled: () => disabledRef.current,\n      sticky: () => stickyRef.current,\n      group: () => groupRef.current,\n      popupGroup: () => popupGroupRef.current,\n    });\n\n    // Apply defaultOpen on creation (uncontrolled only)\n    if (!isControlled && defaultOpen) {\n      instance.open();\n    }\n\n    return instance;\n  });\n\n  const [content, setContent] = useState<TooltipContent | undefined>();\n\n  const anchorName = useSafeId();\n  const popupId = useSafeId('tooltip');\n\n  // Sync controlled open prop -> internal input state.\n  useEffect(() => {\n    if (isUndefined(controlledOpen)) return;\n\n    const { active: inputOpen } = tooltip.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) {\n      tooltip.open();\n    } else {\n      tooltip.close();\n    }\n  }, [controlledOpen, tooltip]);\n\n  useEffect(() => {\n    if (isUndefined(controls?.state.visible)) return;\n\n    if (controls.state.visible) return;\n\n    tooltip.close('imperative-action');\n  }, [controls?.state.visible, tooltip]);\n\n  useDestroy(tooltip);\n\n  const input = useSnapshot(tooltip.input);\n\n  core.setInput(input);\n  const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());\n\n  return (\n    <TooltipContextProvider\n      value={{\n        core,\n        tooltip,\n        state,\n        preferredSide,\n        setPositionedSide,\n        stateAttrMap: TooltipDataAttrs,\n        anchorName,\n        popupId,\n        content,\n        setContent,\n        boundary,\n        container,\n      }}\n    >\n      {children}\n    </TooltipContextProvider>\n  );\n}\n\nexport namespace TooltipRoot {\n  export type Props = TooltipRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAgCA,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,wBAAwB,YAAY,aAAa,uBACjD,WAAW,YAAY,aAAa,UACpC,SAAS,YAAY,aAAa,QAClC,WAAW,aACX,UACA,GAAG,aAC2B;CAC9B,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,WAAW,2BAA2B;CAC5C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,SAAS,CAAC;CAExD,KAAK,SAAS,SAAS;CAEvB,MAAM,eAAe,CAAC,YAAY,cAAc;CAEhD,MAAM,mBAAmB,gBAAgB;CAIzC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,gBAAgB,aAAa,UAAU;CAC7C,MAAM,2BAA2B,aAAa,qBAAqB;CACnE,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,YAAY,aAAa,MAAM;CACrC,MAAM,WAAW,aAAa,gBAAgB;CAC9C,MAAM,gBAAgB,aAAa,UAAU;CAE7C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,iBAAiB;GAC7B,eAAe,UAAmB,YAAkC;IAClE,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,uBAAuB,aAAsB;IAC3C,wBAAwB,UAAU,QAAQ;GAC5C;GACA,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,6BAA6B,yBAAyB;GACtD,gBAAgB,YAAY;GAC5B,cAAc,UAAU;GACxB,aAAa,SAAS;GACtB,kBAAkB,cAAc;EAClC,CAAC;EAGD,IAAI,CAAC,gBAAgB,aACnB,SAAS,KAAK;EAGhB,OAAO;CACT,CAAC;CAED,MAAM,CAAC,SAAS,cAAc,SAAqC;CAEnE,MAAM,aAAa,UAAU;CAC7B,MAAM,UAAU,UAAU,SAAS;CAGnC,gBAAgB;EACd,IAAI,YAAY,cAAc,GAAG;EAEjC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;EAC5C,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBACF,QAAQ,KAAK;OAEb,QAAQ,MAAM;CAElB,GAAG,CAAC,gBAAgB,OAAO,CAAC;CAE5B,gBAAgB;EACd,IAAI,YAAY,UAAU,MAAM,OAAO,GAAG;EAE1C,IAAI,SAAS,MAAM,SAAS;EAE5B,QAAQ,MAAM,mBAAmB;CACnC,GAAG,CAAC,UAAU,MAAM,SAAS,OAAO,CAAC;CAErC,WAAW,OAAO;CAElB,MAAM,QAAQ,YAAY,QAAQ,KAAK;CAEvC,KAAK,SAAS,KAAK;CACnB,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAAmB,KAAK,SAAS,CAAC;CAEtF,OACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA,cAAc;GACd;GACA;GACA;GACA;GACA;GACA;EACF;EAEC;CACqB,CAAA;AAE5B"}

package/dist/dev/ui/tooltip/shortcut.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { TooltipState } from "@videojs/core";
+//#region src/ui/tooltip/shortcut.d.ts
+interface TooltipShortcutProps extends UIComponentProps<'kbd', TooltipState> {}
+/** Keyboard shortcut hint; apply skin `className` (CSS: `media-tooltip__kbd`; Tailwind: `popup.tooltipShortcut`). */
+declare const TooltipShortcut: import("react").ForwardRefExoticComponent<Omit<TooltipShortcutProps, "ref"> & import("react").RefAttributes<HTMLElement>>;
+declare namespace TooltipShortcut {
+  type Props = TooltipShortcutProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipShortcut, TooltipShortcutProps };
+//# sourceMappingURL=shortcut.d.ts.map

package/dist/dev/ui/tooltip/shortcut.js

@@ -0,0 +1,24 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useTooltipContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/tooltip/shortcut.tsx
+/** Keyboard shortcut hint; apply skin `className` (CSS: `media-tooltip__kbd`; Tailwind: `popup.tooltipShortcut`). */
+const TooltipShortcut = forwardRef(function TooltipShortcut({ render, className, style, children, ...elementProps }, forwardedRef) {
+	const { state, stateAttrMap, content } = useTooltipContext();
+	const shortcut = children !== void 0 && children !== null ? children : content?.shortcut ?? null;
+	if (!shortcut) return null;
+	return renderElement("kbd", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: forwardedRef,
+		props: [elementProps, { children: shortcut }]
+	});
+});
+//#endregion
+export { TooltipShortcut };
+
+//# sourceMappingURL=shortcut.js.map

package/dist/dev/ui/tooltip/shortcut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shortcut.js","names":[],"sources":["../../../../src/ui/tooltip/shortcut.tsx"],"sourcesContent":["import type { TooltipState } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipShortcutProps extends UIComponentProps<'kbd', TooltipState> {}\n\n/** Keyboard shortcut hint; apply skin `className` (CSS: `media-tooltip__kbd`; Tailwind: `popup.tooltipShortcut`). */\nexport const TooltipShortcut = forwardRef<HTMLElement, TooltipShortcutProps>(function TooltipShortcut(\n  { render, className, style, children, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap, content } = useTooltipContext();\n  const shortcut = children !== undefined && children !== null ? children : (content?.shortcut ?? null);\n  if (!shortcut) return null;\n\n  return renderElement(\n    'kbd',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [elementProps, { children: shortcut }],\n    }\n  );\n});\n\nexport namespace TooltipShortcut {\n  export type Props = TooltipShortcutProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;;AAUA,MAAa,kBAAkB,WAA8C,SAAS,gBACpF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,OAAO,cAAc,YAAY,kBAAkB;CAC3D,MAAM,WAAW,aAAa,KAAA,KAAa,aAAa,OAAO,WAAY,SAAS,YAAY;CAChG,IAAI,CAAC,UAAU,OAAO;CAEtB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC,cAAc,EAAE,UAAU,SAAS,CAAC;CAC9C,CACF;AACF,CAAC"}

package/dist/dev/ui/tooltip/trigger.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { TooltipState } from "@videojs/core";
+//#region src/ui/tooltip/trigger.d.ts
+interface TooltipTriggerProps extends UIComponentProps<'button', TooltipState> {}
+/** Element that triggers the tooltip on hover and focus. Renders a `<button>` element. */
+declare const TooltipTrigger: import("react").ForwardRefExoticComponent<Omit<TooltipTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace TooltipTrigger {
+  type Props = TooltipTriggerProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipTrigger, TooltipTriggerProps };
+//# sourceMappingURL=trigger.d.ts.map

package/dist/dev/ui/tooltip/trigger.js

@@ -0,0 +1,34 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useTooltipContext } from "./context.js";
+import { forwardRef, useCallback } from "react";
+//#region src/ui/tooltip/trigger.tsx
+/** Element that triggers the tooltip on hover and focus. Renders a `<button>` element. */
+const TooltipTrigger = forwardRef(function TooltipTrigger({ render, className, style, ...elementProps }, forwardedRef) {
+	const { tooltip, state, stateAttrMap } = useTooltipContext();
+	const triggerRef = useCallback((el) => {
+		tooltip.setTriggerElement(el);
+	}, [tooltip]);
+	const { onFocusIn, onFocusOut, ...restTriggerProps } = tooltip.triggerProps;
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef, triggerRef],
+		props: [
+			{ type: "button" },
+			{
+				...restTriggerProps,
+				onFocus: onFocusIn,
+				onBlur: onFocusOut
+			},
+			elementProps
+		]
+	});
+});
+//#endregion
+export { TooltipTrigger };
+
+//# sourceMappingURL=trigger.js.map

package/dist/dev/ui/tooltip/trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.js","names":[],"sources":["../../../../src/ui/tooltip/trigger.tsx"],"sourcesContent":["import type { TooltipState } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useTooltipContext } from './context';\n\nexport interface TooltipTriggerProps extends UIComponentProps<'button', TooltipState> {}\n\n/** Element that triggers the tooltip on hover and focus. Renders a `<button>` element. */\nexport const TooltipTrigger = forwardRef<HTMLButtonElement, TooltipTriggerProps>(function TooltipTrigger(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { tooltip, state, stateAttrMap } = useTooltipContext();\n\n  const triggerRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      tooltip.setTriggerElement(el);\n    },\n    [tooltip]\n  );\n\n  // Remap DOM focus events to React synthetic event names.\n  // createTooltip() uses onFocusIn/onFocusOut (matching DOM focusin/focusout),\n  // but React maps those to onFocus/onBlur.\n  const { onFocusIn, onFocusOut, ...restTriggerProps } = tooltip.triggerProps;\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, triggerRef],\n      props: [\n        {\n          type: 'button' as const,\n        },\n        { ...restTriggerProps, onFocus: onFocusIn, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace TooltipTrigger {\n  export type Props = TooltipTriggerProps;\n  export type State = TooltipState;\n}\n"],"mappings":";;;;;AAUA,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,SAAS,OAAO,iBAAiB,kBAAkB;CAE3D,MAAM,aAAa,aAChB,OAAiC;EAChC,QAAQ,kBAAkB,EAAE;CAC9B,GACA,CAAC,OAAO,CACV;CAKA,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;CAE/D,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GACL,EACE,MAAM,SACR;GACA;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;GAAW;GAC9D;EACF;CACF,CACF;AACF,CAAC"}

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

@@ -1,12 +1,22 @@
+import { c } from "react-compiler-runtime";
 import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/volume-indicator/context.tsx
 const VolumeIndicatorContext = createContext(null);
-function VolumeIndicatorProvider({ value, children }) {
-	return /* @__PURE__ */ jsx(VolumeIndicatorContext.Provider, {
-		value,
-		children
-	});
+function VolumeIndicatorProvider(t0) {
+	const $ = c(3);
+	const { value, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== value) {
+		t1 = /* @__PURE__ */ jsx(VolumeIndicatorContext.Provider, {
+			value,
+			children
+		});
+		$[0] = children;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 }
 function useVolumeIndicatorContext() {
 	const ctx = useContext(VolumeIndicatorContext);

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/volume-indicator/context.tsx"],"sourcesContent":["import type { VolumeIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface VolumeIndicatorContextValue {\n  state: VolumeIndicatorCore.State;\n}\n\nconst VolumeIndicatorContext = createContext<VolumeIndicatorContextValue | null>(null);\n\nexport function VolumeIndicatorProvider({ value, children }: ProviderProps<VolumeIndicatorContextValue>) {\n  return <VolumeIndicatorContext.Provider value={value}>{children}</VolumeIndicatorContext.Provider>;\n}\n\nexport function useVolumeIndicatorContext(): VolumeIndicatorContextValue {\n  const ctx = useContext(VolumeIndicatorContext);\n  if (!ctx) throw new Error('VolumeIndicator child compounds must be used within a VolumeIndicator.Root');\n\n  return ctx;\n}\n"],"mappings":";;;AAOA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,SAAgB,wBAAwB,EAAE,OAAO,YAAwD;CACvG,OAAO,oBAAC,uBAAuB,UAAxB;EAAwC;EAAQ;CAA0C,CAAA;AACnG;AAEA,SAAgB,4BAAyD;CACvE,MAAM,MAAM,WAAW,sBAAsB;CAC7C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,4EAA4E;CAEtG,OAAO;AACT"}
+{"version":3,"file":"context.js","names":["{ value, children }: ProviderProps<VolumeIndicatorContextValue>","<VolumeIndicatorContext.Provider value={value}>{children}</VolumeIndicatorContext.Provider>","VolumeIndicatorContext.Provider"],"sources":["../../../../src/ui/volume-indicator/context.tsx"],"sourcesContent":["import type { VolumeIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface VolumeIndicatorContextValue {\n  state: VolumeIndicatorCore.State;\n}\n\nconst VolumeIndicatorContext = createContext<VolumeIndicatorContextValue | null>(null);\n\nexport function VolumeIndicatorProvider({ value, children }: ProviderProps<VolumeIndicatorContextValue>) {\n  return <VolumeIndicatorContext.Provider value={value}>{children}</VolumeIndicatorContext.Provider>;\n}\n\nexport function useVolumeIndicatorContext(): VolumeIndicatorContextValue {\n  const ctx = useContext(VolumeIndicatorContext);\n  if (!ctx) throw new Error('VolumeIndicator child compounds must be used within a VolumeIndicator.Root');\n\n  return ctx;\n}\n"],"mappings":";;;;AAOA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,SAAgB,wBAAA,IAAyF;;CAAjE,MAAA,EAAE,OAAO,aAATA;CAC/BC,IAAAA;CAAgD,IAAA,EAAA,OAAA,YAAA,EAAA,OAAR,OAAA;EAAxC,KAAA,oBAACC,uBAAAA,UAAD;GAAwC;GAAQ;EAA0C,CAAA;EAA1C,EAAA,KAAA;EAAR,EAAA,KAAA;;;CAA/C,OAAOD;AACT;AAEA,SAAgB,4BAAyD;CACvE,MAAM,MAAM,WAAW,sBAAsB;CAC7C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,4EAA4E;CAEtG,OAAO;AACT"}

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

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

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.js

@@ -0,0 +1,73 @@
+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 { c } from "react-compiler-runtime";
+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 $ = c(12);
+	const { render, className, style, closeDelay, ...elementProps } = componentProps;
+	const translator = useTranslator();
+	let t0;
+	if ($[0] !== translator) {
+		t0 = createInputIndicatorLabels(translator);
+		$[0] = translator;
+		$[1] = t0;
+	} else t0 = $[1];
+	let t1;
+	if ($[2] !== closeDelay || $[3] !== t0) {
+		t1 = {
+			closeDelay,
+			labels: t0
+		};
+		$[2] = closeDelay;
+		$[3] = t0;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { replayOnUpdate: false };
+		$[5] = t2;
+	} else t2 = $[5];
+	const { elementRef, present, state } = useInputIndicatorRoot(_temp, t1, t2);
+	if (!present) return null;
+	const T0 = VolumeIndicatorProvider;
+	let t3;
+	if ($[6] !== state) {
+		t3 = { state };
+		$[6] = state;
+		$[7] = t3;
+	} else t3 = $[7];
+	const t4 = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: VolumeIndicatorDataAttrs,
+		ref: [forwardedRef, elementRef],
+		props: [elementProps]
+	});
+	let t5;
+	if ($[8] !== T0 || $[9] !== t3 || $[10] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			value: t3,
+			children: t4
+		});
+		$[8] = T0;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	return t5;
+});
+function _temp() {
+	return new VolumeIndicatorCore();
+}
+//#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":["createInputIndicatorLabels(translator)","{\n      closeDelay,\n      labels: createInputIndicatorLabels(translator),\n    }","{ replayOnUpdate: false }","() => new VolumeIndicatorCore()","{ state }","<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>","VolumeIndicatorProvider","renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: VolumeIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )"],"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;CAKrBA,IAAAA;CAA2B,IAAA,EAAA,OAAA,YAAA;EAA3B,KAAA,2BAA2B,UAAU;EAAV,EAAA,KAAA;;;CAFrCC,IAAAA;CACE,IAAA,EAAA,OAAA,cAAA,EAAA,OACQD,IAAAA;EAFV,KAAA;GACE;GACA,QAAQA;EACV;EAFE,EAAA,KAAA;EACQA,EAAAA,KAAAA;;;CAEVE,IAAAA;;EAAE,KAAA,EAAA,gBAAgB,MAAM;;;CAN1B,MAAM,EAAE,YAAY,SAAS,UAAU,sBACrCC,OACAF,IAIAC,EACF;CACA,IAAI,CAAC,SAAS,OAAO;CAGlB,MAAA,KAAA;CAA+BE,IAAAA;CAAE,IAAA,EAAA,OAAA,OAAA;EAAF,KAAA,EAAE,MAAM;EAAN,EAAA,KAAA;;;CAC/B,MAAA,KAAA,cACC,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CAAC,YAAY;CACtB,CACF;CAVFC,IAAAA;CAACC,IAAAA,EAAAA,OAAAA,MAAAA,EAAAA,OAA+BF,MAAAA,EAAAA,QAC7BG,IAAAA;EADH,KAAA,oBAACD,IAAD;GAAyB,OAAOF;GAC7BG,UAAAA;EAUsB,CAAA;EAXxBD,EAAAA,KAAAA;EAA+BF,EAAAA,KAAAA;EAC7BG,EAAAA,MAAAA;;;CAFL,OACEF;AAaJ,CAAC;AAvBG,SAAA,QAAA;CAAM,OAAA,IAAI,oBAAoB"}