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

package/dist/default/ui/slider/context.js

@@ -1,24 +1,61 @@
+import { c } from "react-compiler-runtime";
 import { createContext, useContext, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/slider/context.tsx
 const SliderContext = createContext(null);
-function SliderProvider({ value, children }) {
-	return /* @__PURE__ */ jsx(SliderContext.Provider, {
-		value,
-		children
-	});
+function SliderProvider(t0) {
+	const $ = c(3);
+	const { value, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== value) {
+		t1 = /* @__PURE__ */ jsx(SliderContext.Provider, {
+			value,
+			children
+		});
+		$[0] = children;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 }
 function useSliderContext() {
 	const ctx = useContext(SliderContext);
 	if (!ctx) throw new Error("Slider compound components must be used within a Slider.Root");
 	return ctx;
 }
-function useSliderPointerValue(enabled = true) {
+function useSliderPointerValue(t0) {
+	const $ = c(9);
+	const enabled = t0 === void 0 ? true : t0;
 	const context = useSliderContext();
-	const percent = useSyncExternalStore((onChange) => context.input?.subscribe(onChange) ?? (() => {}), () => enabled ? context.input?.current.pointerPercent ?? null : null, () => enabled ? context.input?.current.pointerPercent ?? null : null);
-	return percent === null ? context.pointerValue : context.getPointerValue?.(percent) ?? context.pointerValue;
+	let t1;
+	if ($[0] !== context.input) {
+		t1 = (onChange) => context.input?.subscribe(onChange) ?? _temp;
+		$[0] = context.input;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	let t3;
+	if ($[2] !== context.input?.current || $[3] !== enabled) {
+		t2 = () => enabled ? context.input?.current.pointerPercent ?? null : null;
+		t3 = () => enabled ? context.input?.current.pointerPercent ?? null : null;
+		$[2] = context.input?.current;
+		$[3] = enabled;
+		$[4] = t2;
+		$[5] = t3;
+	} else {
+		t2 = $[4];
+		t3 = $[5];
+	}
+	const percent = useSyncExternalStore(t1, t2, t3);
+	let t4;
+	if ($[6] !== context || $[7] !== percent) {
+		t4 = percent === null ? context.pointerValue : context.getPointerValue?.(percent) ?? context.pointerValue;
+		$[6] = context;
+		$[7] = percent;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
 }
+function _temp() {}
 //#endregion
 export { SliderProvider, useSliderContext, useSliderPointerValue };
-
-//# sourceMappingURL=context.js.map

package/dist/default/ui/slider/fill.js

@@ -0,0 +1,11 @@
+import { createContextPart } from "../create-context-part.js";
+import { useSliderContext } from "./context.js";
+//#region src/ui/slider/fill.tsx
+/** Displays the filled portion from start to the current value. */
+const SliderFill = createContextPart({
+	displayName: "SliderFill",
+	tag: "div",
+	useContext: useSliderContext
+});
+//#endregion
+export { SliderFill };

package/dist/default/ui/slider/index.parts.js

@@ -1,12 +1,12 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { SliderBuffer } from "./slider-buffer.js";
-import { SliderFill } from "./slider-fill.js";
-import { SliderPreview } from "./slider-preview.js";
-import { SliderRoot } from "./slider-root.js";
-import { SliderThumb } from "./slider-thumb.js";
-import { SliderThumbnail } from "./slider-thumbnail.js";
-import { SliderTrack } from "./slider-track.js";
-import { SliderValue } from "./slider-value.js";
+import { SliderBuffer } from "./buffer.js";
+import { SliderFill } from "./fill.js";
+import { SliderPreview } from "./preview.js";
+import { SliderRoot } from "./root.js";
+import { SliderThumb } from "./thumb.js";
+import { index_parts_exports as index_parts_exports$1 } from "./thumbnail/index.parts.js";
+import { SliderTrack } from "./track.js";
+import { SliderValue } from "./value.js";
 //#region src/ui/slider/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Buffer: () => SliderBuffer,
@@ -14,11 +14,9 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Preview: () => SliderPreview,
 	Root: () => SliderRoot,
 	Thumb: () => SliderThumb,
-	Thumbnail: () => SliderThumbnail,
+	Thumbnail: () => index_parts_exports$1,
 	Track: () => SliderTrack,
 	Value: () => SliderValue
 });
 //#endregion
-export { SliderBuffer as Buffer, SliderFill as Fill, SliderPreview as Preview, SliderRoot as Root, SliderThumb as Thumb, SliderThumbnail as Thumbnail, SliderTrack as Track, SliderValue as Value, index_parts_exports };
-
-//# sourceMappingURL=index.parts.js.map
+export { SliderBuffer as Buffer, SliderFill as Fill, SliderPreview as Preview, SliderRoot as Root, SliderThumb as Thumb, index_parts_exports$1 as Thumbnail, SliderTrack as Track, SliderValue as Value, index_parts_exports };

package/dist/default/ui/slider/preview.js

@@ -0,0 +1,34 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useSliderContext } from "./context.js";
+import { getSliderPreviewStyle } from "@videojs/core/dom";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { observeResize } from "@videojs/utils/dom";
+//#region src/ui/slider/preview.tsx
+/** Positioning container for preview content that tracks the pointer along the slider. */
+const SliderPreview = forwardRef(function SliderPreview(componentProps, forwardedRef) {
+	const { render, className, style, overflow = "clamp", ...elementProps } = componentProps;
+	const context = useSliderContext();
+	const { state } = context;
+	const measureRef = useRef(null);
+	const [width, setWidth] = useState(0);
+	useEffect(() => {
+		const el = measureRef.current;
+		if (!el) return;
+		return observeResize(el, ([entry]) => {
+			setWidth(entry.contentRect.width);
+		});
+	}, []);
+	const positionStyle = getSliderPreviewStyle(width, overflow);
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: context.stateAttrMap,
+		ref: [forwardedRef, measureRef],
+		props: [{ style: positionStyle }, elementProps]
+	});
+});
+//#endregion
+export { SliderPreview };

package/dist/default/ui/slider/root.js

@@ -0,0 +1,189 @@
+import { useTranslator } from "../../i18n/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useSlider } from "../hooks/use-slider.js";
+import { SliderProvider } from "./context.js";
+import { SliderCore, SliderDataAttrs } from "@videojs/core";
+import { getSliderCSSVars } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+import { c } from "react-compiler-runtime";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/slider/root.tsx
+const SliderRoot = forwardRef(function SliderRoot(componentProps, forwardedRef) {
+	const $ = c(47);
+	const { render, className, style, label, min, max, step, largeStep, orientation, disabled, thumbAlignment, value: t0, onValueChange, onValueCommit, onDragStart, onDragEnd, ...elementProps } = componentProps;
+	const value = t0 === void 0 ? 0 : t0;
+	const [core] = useState(_temp);
+	const translator = useTranslator();
+	core.setProps({
+		label,
+		min,
+		max,
+		step,
+		largeStep,
+		orientation,
+		disabled,
+		thumbAlignment
+	});
+	let t1;
+	let t2;
+	if ($[0] !== core || $[1] !== value) {
+		t1 = (input) => {
+			core.setInput(input);
+			return core.getSliderState(value);
+		};
+		t2 = () => core.percentFromValue(value);
+		$[0] = core;
+		$[1] = value;
+		$[2] = t1;
+		$[3] = t2;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+	}
+	let t3;
+	let t4;
+	if ($[4] !== core) {
+		t3 = () => core.getStepPercent();
+		t4 = () => core.getLargeStepPercent();
+		$[4] = core;
+		$[5] = t3;
+		$[6] = t4;
+	} else {
+		t3 = $[5];
+		t4 = $[6];
+	}
+	let t5;
+	if ($[7] !== core) {
+		t5 = (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize);
+		$[7] = core;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== core || $[10] !== onValueChange) {
+		t6 = (percent) => onValueChange?.(core.valueFromPercent(percent));
+		$[9] = core;
+		$[10] = onValueChange;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
+	if ($[12] !== core || $[13] !== onValueCommit) {
+		t7 = (percent_0) => onValueCommit?.(core.valueFromPercent(percent_0));
+		$[12] = core;
+		$[13] = onValueCommit;
+		$[14] = t7;
+	} else t7 = $[14];
+	let t8;
+	if ($[15] !== disabled || $[16] !== onDragEnd || $[17] !== onDragStart || $[18] !== orientation || $[19] !== t1 || $[20] !== t2 || $[21] !== t3 || $[22] !== t4 || $[23] !== t5 || $[24] !== t6 || $[25] !== t7) {
+		t8 = {
+			computeState: t1,
+			getPercent: t2,
+			getStepPercent: t3,
+			getLargeStepPercent: t4,
+			orientation,
+			disabled,
+			adjustPercent: t5,
+			getCSSVars: getSliderCSSVars,
+			onValueChange: t6,
+			onValueCommit: t7,
+			onDragStart,
+			onDragEnd
+		};
+		$[15] = disabled;
+		$[16] = onDragEnd;
+		$[17] = onDragStart;
+		$[18] = orientation;
+		$[19] = t1;
+		$[20] = t2;
+		$[21] = t3;
+		$[22] = t4;
+		$[23] = t5;
+		$[24] = t6;
+		$[25] = t7;
+		$[26] = t8;
+	} else t8 = $[26];
+	const { state, input: input_0, cssVars, rootRef, thumbRef: sliderThumbRef, rootProps, rootStyle, thumbProps } = useSlider(t8);
+	const T0 = SliderProvider;
+	let t9;
+	if ($[27] !== core || $[28] !== state.pointerPercent) {
+		t9 = core.valueFromPercent(state.pointerPercent);
+		$[27] = core;
+		$[28] = state.pointerPercent;
+		$[29] = t9;
+	} else t9 = $[29];
+	let t10;
+	if ($[30] !== core) {
+		t10 = (percent_1) => core.valueFromPercent(percent_1);
+		$[30] = core;
+		$[31] = t10;
+	} else t10 = $[31];
+	let t11;
+	if ($[32] !== core || $[33] !== translator) {
+		t11 = (sliderState) => {
+			const attrs = core.getAttrs(sliderState);
+			return {
+				...attrs,
+				"aria-label": translateText(attrs["aria-label"], translator)
+			};
+		};
+		$[32] = core;
+		$[33] = translator;
+		$[34] = t11;
+	} else t11 = $[34];
+	let t12;
+	if ($[35] !== input_0 || $[36] !== sliderThumbRef || $[37] !== state || $[38] !== t10 || $[39] !== t11 || $[40] !== t9 || $[41] !== thumbProps) {
+		t12 = {
+			state,
+			pointerValue: t9,
+			input: input_0,
+			getPointerValue: t10,
+			thumbRef: sliderThumbRef,
+			thumbProps,
+			stateAttrMap: SliderDataAttrs,
+			getAttrs: t11,
+			formatValue: void 0
+		};
+		$[35] = input_0;
+		$[36] = sliderThumbRef;
+		$[37] = state;
+		$[38] = t10;
+		$[39] = t11;
+		$[40] = t9;
+		$[41] = thumbProps;
+		$[42] = t12;
+	} else t12 = $[42];
+	const t13 = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: SliderDataAttrs,
+		ref: [forwardedRef, rootRef],
+		props: [
+			{ style: {
+				...cssVars,
+				...rootStyle
+			} },
+			rootProps,
+			elementProps
+		]
+	});
+	let t14;
+	if ($[43] !== T0 || $[44] !== t12 || $[45] !== t13) {
+		t14 = /* @__PURE__ */ jsx(T0, {
+			value: t12,
+			children: t13
+		});
+		$[43] = T0;
+		$[44] = t12;
+		$[45] = t13;
+		$[46] = t14;
+	} else t14 = $[46];
+	return t14;
+});
+function _temp() {
+	return new SliderCore();
+}
+//#endregion
+export { SliderRoot };

package/dist/default/ui/slider/thumb.js

@@ -0,0 +1,27 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useSliderContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/slider/thumb.tsx
+/** Draggable handle for setting the slider value. Receives focus and handles keyboard interaction. */
+const SliderThumb = forwardRef(function SliderThumb(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const context = useSliderContext();
+	const { state, thumbRef, thumbProps, getAttrs } = context;
+	const attrs = getAttrs(state);
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: context.stateAttrMap,
+		ref: [forwardedRef, thumbRef],
+		props: [
+			attrs,
+			thumbProps,
+			elementProps
+		]
+	});
+});
+//#endregion
+export { SliderThumb };

package/dist/default/ui/slider/thumbnail/index.parts.js

@@ -0,0 +1,10 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { ThumbnailImage } from "../../thumbnail/image.js";
+import { SliderThumbnailRoot } from "./root.js";
+//#region src/ui/slider/thumbnail/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Image: () => ThumbnailImage,
+	Root: () => SliderThumbnailRoot
+});
+//#endregion
+export { ThumbnailImage as Image, SliderThumbnailRoot as Root, index_parts_exports };

package/dist/default/ui/slider/thumbnail/root.js

@@ -0,0 +1,31 @@
+import { useSliderPointerValue } from "../context.js";
+import { ThumbnailRoot } from "../../thumbnail/root.js";
+import { c } from "react-compiler-runtime";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/slider/thumbnail/root.tsx
+/**
+* Resolves, sizes, and clips the thumbnail at the slider pointer.
+*
+* Render `Slider.Thumbnail.Image` inside it for the controlled image. Other children can provide loading indicators,
+* overlays, or temporary presentation layers.
+*/
+const SliderThumbnailRoot = forwardRef(function SliderThumbnailRoot(componentProps, forwardedRef) {
+	const $ = c(4);
+	const pointerValue = useSliderPointerValue();
+	let t0;
+	if ($[0] !== componentProps || $[1] !== forwardedRef || $[2] !== pointerValue) {
+		t0 = /* @__PURE__ */ jsx(ThumbnailRoot, {
+			ref: forwardedRef,
+			...componentProps,
+			time: pointerValue
+		});
+		$[0] = componentProps;
+		$[1] = forwardedRef;
+		$[2] = pointerValue;
+		$[3] = t0;
+	} else t0 = $[3];
+	return t0;
+});
+//#endregion
+export { SliderThumbnailRoot };

package/dist/default/ui/slider/track.js

@@ -0,0 +1,11 @@
+import { createContextPart } from "../create-context-part.js";
+import { useSliderContext } from "./context.js";
+//#region src/ui/slider/track.tsx
+/** Contains the slider's visual track and interactive hit zone. */
+const SliderTrack = createContextPart({
+	displayName: "SliderTrack",
+	tag: "div",
+	useContext: useSliderContext
+});
+//#endregion
+export { SliderTrack };

package/dist/default/ui/slider/value.js

@@ -0,0 +1,28 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useSliderContext, useSliderPointerValue } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/slider/value.tsx
+/** Displays a formatted text representation of the slider value. Renders an `<output>` element. */
+const SliderValue = forwardRef(function SliderValue(componentProps, forwardedRef) {
+	const { render, className, style, type = "current", format, ...elementProps } = componentProps;
+	const context = useSliderContext();
+	const { state, formatValue } = context;
+	const pointerValue = useSliderPointerValue(type === "pointer");
+	const rawValue = type === "pointer" ? pointerValue : state.value;
+	const text = format ? format(rawValue) : formatValue ? formatValue(rawValue, type) : String(Math.round(rawValue));
+	return renderElement("output", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: context.stateAttrMap,
+		ref: forwardedRef,
+		props: [{
+			"aria-live": "off",
+			children: text
+		}, elementProps]
+	});
+});
+//#endregion
+export { SliderValue };

package/dist/default/ui/status-announcer/component.js

@@ -0,0 +1,45 @@
+import { useLocale, useTranslator } from "../../i18n/context.js";
+import { useContainer, usePlayer } from "../../player/context.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { renderElement } from "../../utils/use-render.js";
+import { StatusAnnouncerCore, createStatusAnnouncerLabels } from "@videojs/core";
+import { shouldAnnounceStatusChange, subscribeToStatusAnnouncer } from "@videojs/core/dom";
+import { forwardRef, useEffect, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/status-announcer/component.tsx
+const StatusAnnouncer = forwardRef(function StatusAnnouncer(componentProps, forwardedRef) {
+	const { render, className, style, closeDelay, labels, ...elementProps } = componentProps;
+	const translator = useTranslator();
+	const locale = useLocale();
+	const [core] = useState(() => new StatusAnnouncerCore());
+	const store = usePlayer();
+	const container = useContainer();
+	useDestroy(core);
+	core.setProps({
+		closeDelay,
+		labels: {
+			...createStatusAnnouncerLabels(translator, locale),
+			...labels
+		},
+		shouldAnnounce: () => shouldAnnounceStatusChange(container)
+	});
+	useEffect(() => subscribeToStatusAnnouncer(store, core), [core, store]);
+	const state = useSyncExternalStore((callback) => core.state.subscribe(callback), () => core.state.current, () => core.state.current);
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: forwardedRef,
+		props: [elementProps, {
+			role: "status",
+			children: /* @__PURE__ */ jsx("span", {
+				"data-status-announcer-content": "",
+				children: state.label ?? ""
+			}, state.generation)
+		}]
+	});
+});
+//#endregion
+export { StatusAnnouncer };

package/dist/default/ui/status-announcer/index.js

@@ -1,2 +1,2 @@
-import { StatusAnnouncer } from "./status-announcer.js";
+import { StatusAnnouncer } from "./component.js";
 export { StatusAnnouncer };

package/dist/default/ui/status-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/status-indicator/context.tsx
 const StatusIndicatorContext = createContext(null);
-function StatusIndicatorProvider({ value, children }) {
-	return /* @__PURE__ */ jsx(StatusIndicatorContext.Provider, {
-		value,
-		children
-	});
+function StatusIndicatorProvider(t0) {
+	const $ = c(3);
+	const { value, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== value) {
+		t1 = /* @__PURE__ */ jsx(StatusIndicatorContext.Provider, {
+			value,
+			children
+		});
+		$[0] = children;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
 }
 function useStatusIndicatorContext() {
 	const ctx = useContext(StatusIndicatorContext);
@@ -15,5 +25,3 @@ function useStatusIndicatorContext() {
 }
 //#endregion
 export { StatusIndicatorProvider, useStatusIndicatorContext };
-
-//# sourceMappingURL=context.js.map

package/dist/default/ui/status-indicator/index.parts.js

@@ -1,6 +1,6 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { StatusIndicatorRoot } from "./status-indicator-root.js";
-import { StatusIndicatorValue } from "./status-indicator-value.js";
+import { StatusIndicatorRoot } from "./root.js";
+import { StatusIndicatorValue } from "./value.js";
 //#region src/ui/status-indicator/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Root: () => StatusIndicatorRoot,
@@ -8,5 +8,3 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 });
 //#endregion
 export { StatusIndicatorRoot as Root, StatusIndicatorValue as Value, index_parts_exports };
-
-//# sourceMappingURL=index.parts.js.map

package/dist/default/ui/status-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 { StatusIndicatorProvider } from "./context.js";
+import { StatusIndicatorCore, StatusIndicatorDataAttrs, createInputIndicatorLabels } from "@videojs/core";
+import { c } from "react-compiler-runtime";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/status-indicator/root.tsx
+const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(componentProps, forwardedRef) {
+	const $ = c(13);
+	const { render, className, style, actions, 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] !== actions || $[3] !== closeDelay || $[4] !== t0) {
+		t1 = {
+			actions,
+			closeDelay,
+			labels: t0
+		};
+		$[2] = actions;
+		$[3] = closeDelay;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { replayOnUpdate: false };
+		$[6] = t2;
+	} else t2 = $[6];
+	const { elementRef, present, state } = useInputIndicatorRoot(_temp, t1, t2);
+	if (!present) return null;
+	const T0 = StatusIndicatorProvider;
+	let t3;
+	if ($[7] !== state) {
+		t3 = { state };
+		$[7] = state;
+		$[8] = t3;
+	} else t3 = $[8];
+	const t4 = renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: StatusIndicatorDataAttrs,
+		ref: [forwardedRef, elementRef],
+		props: [elementProps]
+	});
+	let t5;
+	if ($[9] !== T0 || $[10] !== t3 || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(T0, {
+			value: t3,
+			children: t4
+		});
+		$[9] = T0;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+});
+function _temp() {
+	return new StatusIndicatorCore();
+}
+//#endregion
+export { StatusIndicatorRoot };

package/dist/default/ui/status-indicator/value.js

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

package/dist/default/ui/thumbnail/context.js

@@ -0,0 +1,27 @@
+import { c } from "react-compiler-runtime";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/thumbnail/context.tsx
+const ThumbnailContext = createContext(null);
+function ThumbnailProvider(t0) {
+	const $ = c(3);
+	const { value, children } = t0;
+	let t1;
+	if ($[0] !== children || $[1] !== value) {
+		t1 = /* @__PURE__ */ jsx(ThumbnailContext.Provider, {
+			value,
+			children
+		});
+		$[0] = children;
+		$[1] = value;
+		$[2] = t1;
+	} else t1 = $[2];
+	return t1;
+}
+function useThumbnailContext() {
+	const ctx = useContext(ThumbnailContext);
+	if (!ctx) throw new Error("Thumbnail compound components must be used within a Thumbnail.Root");
+	return ctx;
+}
+//#endregion
+export { ThumbnailProvider, useThumbnailContext };