@videojs/react 10.0.0-beta.2 → 10.0.0-beta.22

package/dist/dev/utils/use-destroy.js

@@ -1,7 +1,6 @@
-'use client';
-
+"use client";
+import { useLatestRef } from "./use-latest-ref.js";
 import { useEffect, useRef } from "react";
-
 //#region src/utils/use-destroy.ts
 /**
 * Destroy an instance on unmount, deferring destruction to survive React
@@ -14,20 +13,27 @@ import { useEffect, useRef } from "react";
 * @param instance - Object with a `destroy()` method.
 * @param setup - Optional setup called on first mount. Skipped on StrictMode
 *   re-mount since the previous setup was never torn down.
+* @param teardown - Optional teardown called right before `destroy()` on real
+*   unmount. Skipped on StrictMode simulated unmount.
 */
-function useDestroy(instance, setup) {
+function useDestroy(instance, setup, teardown) {
 	const pendingRef = useRef(null);
+	const setupRef = useLatestRef(setup);
+	const teardownRef = useLatestRef(teardown);
 	useEffect(() => {
 		if (pendingRef.current !== null) {
 			clearTimeout(pendingRef.current);
 			pendingRef.current = null;
-		} else setup?.();
+		} else setupRef.current?.();
 		return () => {
-			pendingRef.current = setTimeout(() => instance.destroy(), 0);
+			pendingRef.current = setTimeout(() => {
+				teardownRef.current?.();
+				instance.destroy();
+			}, 0);
 		};
-	}, [instance, setup]);
+	}, [instance]);
 }
-
 //#endregion
 export { useDestroy };
+
 //# sourceMappingURL=use-destroy.js.map

package/dist/dev/utils/use-destroy.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\n\ninterface Destroyable {\n  destroy(): void;\n}\n\n/**\n * Destroy an instance on unmount, deferring destruction to survive React\n * StrictMode's simulated unmount/re-mount cycle.\n *\n * StrictMode runs effects, then immediately runs cleanup, then re-runs\n * effects — all synchronously. By deferring `destroy()` to a macrotask,\n * the re-mount effect can cancel it before it fires.\n *\n * @param instance - Object with a `destroy()` method.\n * @param setup - Optional setup called on first mount. Skipped on StrictMode\n *   re-mount since the previous setup was never torn down.\n */\nexport function useDestroy(instance: Destroyable, setup?: () => void): void {\n  const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    if (pendingRef.current !== null) {\n      clearTimeout(pendingRef.current);\n      pendingRef.current = null;\n    } else {\n      setup?.();\n    }\n\n    return () => {\n      pendingRef.current = setTimeout(() => instance.destroy(), 0);\n    };\n  }, [instance, setup]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,SAAgB,WAAW,UAAuB,OAA0B;CAC1E,MAAM,aAAa,OAA6C,KAAK;AAErE,iBAAgB;AACd,MAAI,WAAW,YAAY,MAAM;AAC/B,gBAAa,WAAW,QAAQ;AAChC,cAAW,UAAU;QAErB,UAAS;AAGX,eAAa;AACX,cAAW,UAAU,iBAAiB,SAAS,SAAS,EAAE,EAAE;;IAE7D,CAAC,UAAU,MAAM,CAAC"}
+{"version":3,"file":"use-destroy.js","names":[],"sources":["../../../src/utils/use-destroy.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useRef } from 'react';\n\nimport { useLatestRef } from './use-latest-ref';\n\ninterface Destroyable {\n  destroy(): void;\n}\n\n/**\n * Destroy an instance on unmount, deferring destruction to survive React\n * StrictMode's simulated unmount/re-mount cycle.\n *\n * StrictMode runs effects, then immediately runs cleanup, then re-runs\n * effects — all synchronously. By deferring `destroy()` to a macrotask,\n * the re-mount effect can cancel it before it fires.\n *\n * @param instance - Object with a `destroy()` method.\n * @param setup - Optional setup called on first mount. Skipped on StrictMode\n *   re-mount since the previous setup was never torn down.\n * @param teardown - Optional teardown called right before `destroy()` on real\n *   unmount. Skipped on StrictMode simulated unmount.\n */\nexport function useDestroy(instance: Destroyable, setup?: () => void, teardown?: () => void): void {\n  const pendingRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const setupRef = useLatestRef(setup);\n  const teardownRef = useLatestRef(teardown);\n\n  useEffect(() => {\n    if (pendingRef.current !== null) {\n      clearTimeout(pendingRef.current);\n      pendingRef.current = null;\n    } else {\n      setupRef.current?.();\n    }\n\n    return () => {\n      pendingRef.current = setTimeout(() => {\n        teardownRef.current?.();\n        instance.destroy();\n      }, 0);\n    };\n  }, [instance]);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAwBA,SAAgB,WAAW,UAAuB,OAAoB,UAA6B;CACjG,MAAM,aAAa,OAA6C,KAAK;CACrE,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,cAAc,aAAa,SAAS;AAE1C,iBAAgB;AACd,MAAI,WAAW,YAAY,MAAM;AAC/B,gBAAa,WAAW,QAAQ;AAChC,cAAW,UAAU;QAErB,UAAS,WAAW;AAGtB,eAAa;AACX,cAAW,UAAU,iBAAiB;AACpC,gBAAY,WAAW;AACvB,aAAS,SAAS;MACjB,EAAE;;IAEN,CAAC,SAAS,CAAC"}

package/dist/dev/utils/use-force-render.js

@@ -1,13 +1,11 @@
-'use client';
-
+"use client";
 import { useReducer } from "react";
-
 //#region src/utils/use-force-render.ts
 function useForceRender() {
 	const [, forceRender] = useReducer((c) => c + 1, 0);
 	return forceRender;
 }
-
 //#endregion
 export { useForceRender };
+
 //# sourceMappingURL=use-force-render.js.map

package/dist/dev/utils/use-force-render.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-force-render.js","names":[],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["'use client';\n\nimport { useReducer } from 'react';\n\nexport function useForceRender() {\n  const [, forceRender] = useReducer((c: number) => c + 1, 0);\n  return forceRender;\n}\n\nexport namespace useForceRender {\n  export type Result = () => void;\n}\n"],"mappings":";;;;;AAIA,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,YAAY,MAAc,IAAI,GAAG,EAAE;AAC3D,QAAO"}
+{"version":3,"file":"use-force-render.js","names":[],"sources":["../../../src/utils/use-force-render.ts"],"sourcesContent":["'use client';\n\nimport { useReducer } from 'react';\n\nexport function useForceRender() {\n  const [, forceRender] = useReducer((c: number) => c + 1, 0);\n  return forceRender;\n}\n\nexport namespace useForceRender {\n  export type Result = () => void;\n}\n"],"mappings":";;;AAIA,SAAgB,iBAAiB;CAC/B,MAAM,GAAG,eAAe,YAAY,MAAc,IAAI,GAAG,EAAE;AAC3D,QAAO"}

package/dist/dev/utils/use-latest-ref.d.ts

@@ -0,0 +1,18 @@
+//#region src/utils/use-latest-ref.d.ts
+/**
+ * Keep a ref that always points to the latest value.
+ *
+ * Useful for capturing callbacks or derived values inside closures
+ * that are created once (e.g. factory callbacks) without stale reads.
+ */
+declare function useLatestRef<Value>(value: Value): Readonly<{
+  current: Value;
+}>;
+declare namespace useLatestRef {
+  type Result<Value> = Readonly<{
+    current: Value;
+  }>;
+}
+//#endregion
+export { useLatestRef };
+//# sourceMappingURL=use-latest-ref.d.ts.map

package/dist/dev/utils/use-latest-ref.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-latest-ref.d.ts","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"mappings":";;AAUA;;;;;iBAAgB,YAAA,OAAA,CAAoB,KAAA,EAAO,KAAA,GAAQ,QAAA;EAAW,OAAA,EAAS,KAAA;AAAA;AAAA,kBAMtD,YAAA;EAAA,KACH,MAAA,UAAgB,QAAA;IAAW,OAAA,EAAS,KAAA;EAAA;AAAA"}

package/dist/dev/utils/use-latest-ref.js

@@ -1,7 +1,5 @@
-'use client';
-
+"use client";
 import { useRef } from "react";
-
 //#region src/utils/use-latest-ref.ts
 /**
 * Keep a ref that always points to the latest value.
@@ -14,7 +12,7 @@ function useLatestRef(value) {
 	ref.current = value;
 	return ref;
 }
-
 //#endregion
 export { useLatestRef };
+
 //# sourceMappingURL=use-latest-ref.js.map

package/dist/dev/utils/use-latest-ref.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-latest-ref.js","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\n\n/**\n * Keep a ref that always points to the latest value.\n *\n * Useful for capturing callbacks or derived values inside closures\n * that are created once (e.g. factory callbacks) without stale reads.\n */\nexport function useLatestRef<Value>(value: Value): Readonly<{ current: Value }> {\n  const ref = useRef(value);\n  ref.current = value;\n  return ref;\n}\n\nexport namespace useLatestRef {\n  export type Result<Value> = Readonly<{ current: Value }>;\n}\n"],"mappings":";;;;;;;;;;;AAUA,SAAgB,aAAoB,OAA4C;CAC9E,MAAM,MAAM,OAAO,MAAM;AACzB,KAAI,UAAU;AACd,QAAO"}
+{"version":3,"file":"use-latest-ref.js","names":[],"sources":["../../../src/utils/use-latest-ref.ts"],"sourcesContent":["'use client';\n\nimport { useRef } from 'react';\n\n/**\n * Keep a ref that always points to the latest value.\n *\n * Useful for capturing callbacks or derived values inside closures\n * that are created once (e.g. factory callbacks) without stale reads.\n */\nexport function useLatestRef<Value>(value: Value): Readonly<{ current: Value }> {\n  const ref = useRef(value);\n  ref.current = value;\n  return ref;\n}\n\nexport namespace useLatestRef {\n  export type Result<Value> = Readonly<{ current: Value }>;\n}\n"],"mappings":";;;;;;;;;AAUA,SAAgB,aAAoB,OAA4C;CAC9E,MAAM,MAAM,OAAO,MAAM;AACzB,KAAI,UAAU;AACd,QAAO"}

package/dist/dev/utils/use-media-instance.d.ts

@@ -0,0 +1,16 @@
+import { Media } from "@videojs/core";
+
+//#region src/utils/use-media-instance.d.ts
+/**
+ * Create and manage a media instance lifecycle within a player context.
+ *
+ * Instantiates the media class once, attaches it to the player on mount,
+ * and safely detaches on unmount using a functional updater to avoid race
+ * conditions when swapping media components (e.g. DashVideo → HlsVideo).
+ */
+declare function useMediaInstance<Instance extends Media & {
+  destroy(): void;
+}>(MediaClass: new () => Instance): Instance;
+//#endregion
+export { useMediaInstance };
+//# sourceMappingURL=use-media-instance.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-instance.d.ts","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"mappings":";;;;;AAeA;;;;;iBAAgB,gBAAA,kBAAkC,KAAA;EAAU,OAAA;AAAA,EAAA,CAC1D,UAAA,YAAsB,QAAA,GACrB,QAAA"}

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

@@ -0,0 +1,22 @@
+"use client";
+import { useMediaAttach } from "../player/context.js";
+import { useDestroy } from "./use-destroy.js";
+import { useState } from "react";
+//#region src/utils/use-media-instance.ts
+/**
+* Create and manage a media instance lifecycle within a player context.
+*
+* Instantiates the media class once, attaches it to the player on mount,
+* and safely detaches on unmount using a functional updater to avoid race
+* conditions when swapping media components (e.g. DashVideo → HlsVideo).
+*/
+function useMediaInstance(MediaClass) {
+	const [instance] = useState(() => new MediaClass());
+	const setMedia = useMediaAttach();
+	useDestroy(instance, () => setMedia?.(instance), () => setMedia?.((prev) => prev === instance ? null : prev));
+	return instance;
+}
+//#endregion
+export { useMediaInstance };
+
+//# sourceMappingURL=use-media-instance.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-instance.js","names":[],"sources":["../../../src/utils/use-media-instance.ts"],"sourcesContent":["'use client';\n\nimport type { Media } from '@videojs/core';\nimport { useState } from 'react';\n\nimport { useMediaAttach } from '../player/context';\nimport { useDestroy } from './use-destroy';\n\n/**\n * Create and manage a media instance lifecycle within a player context.\n *\n * Instantiates the media class once, attaches it to the player on mount,\n * and safely detaches on unmount using a functional updater to avoid race\n * conditions when swapping media components (e.g. DashVideo → HlsVideo).\n */\nexport function useMediaInstance<Instance extends Media & { destroy(): void }>(\n  MediaClass: new () => Instance\n): Instance {\n  const [instance] = useState(() => new MediaClass());\n  const setMedia = useMediaAttach();\n\n  useDestroy(\n    instance,\n    () => setMedia?.(instance),\n    () => setMedia?.((prev) => (prev === instance ? null : prev))\n  );\n\n  return instance;\n}\n"],"mappings":";;;;;;;;;;;;AAeA,SAAgB,iBACd,YACU;CACV,MAAM,CAAC,YAAY,eAAe,IAAI,YAAY,CAAC;CACnD,MAAM,WAAW,gBAAgB;AAEjC,YACE,gBACM,WAAW,SAAS,QACpB,YAAY,SAAU,SAAS,WAAW,OAAO,KAAM,CAC9D;AAED,QAAO"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-render.d.ts","names":[],"sources":["../../../src/utils/use-render.tsx"],"mappings":";;;;;KAUK,gBAAA,SAAyB,KAAA,CAAM,GAAA,CAAI,iBAAA;AAAA,UAEvB,uBAAA;EACf,SAAA,cAAuB,KAAA,EAAO,KAAA;EAC9B,KAAA,GAAQ,aAAA,KAAkB,KAAA,EAAO,KAAA,KAAU,aAAA;EAC3C,MAAA,GAAS,UAAA,CAAW,KAAA;AAAA;AAAA,UAGL,mBAAA,oCAAuD,OAAA;EACtE,KAAA,EAAO,KAAA;EACP,GAAA,GAAM,GAAA,CAAI,mBAAA,IAAuB,GAAA,CAAI,mBAAA;EACrC,KAAA;EACA,YAAA,GAAe,YAAA,CAAa,KAAA;AAAA;;;;;;;;;;;;;;;;;;;;;iBA4Cd,aAAA,mDAEc,OAAA,kBACZ,gBAAA,CAAA,CAEhB,OAAA,EAAS,OAAA,EACT,cAAA,EAAgB,uBAAA,CAAwB,KAAA,GACxC,MAAA,EAAQ,mBAAA,CAAoB,KAAA,EAAO,mBAAA,IAClC,YAAA;AAAA,kBAgDc,aAAA;EAAA,KACH,cAAA,UAAwB,uBAAA,CAAwB,KAAA;EAAA,KAChD,UAAA,oCAA8C,OAAA,IAAW,mBAAA,CAAoB,KAAA,EAAO,mBAAA;AAAA"}
+{"version":3,"file":"use-render.d.ts","names":[],"sources":["../../../src/utils/use-render.tsx"],"mappings":";;;;;KAeK,gBAAA,SAAyB,KAAA,CAAM,GAAA,CAAI,iBAAA;AAAA,UAEvB,uBAAA;EACf,SAAA,cAAuB,KAAA,EAAO,KAAA;EAC9B,KAAA,GAAQ,aAAA,KAAkB,KAAA,EAAO,KAAA,KAAU,aAAA;EAC3C,MAAA,GAAS,UAAA,CAAW,KAAA;AAAA;AAAA,UAGL,mBAAA,oCAAuD,OAAA;EACtE,KAAA,EAAO,KAAA;EACP,GAAA,GAAM,GAAA,CAAI,mBAAA,IAAuB,GAAA,CAAI,mBAAA;EACrC,KAAA;EACA,YAAA,GAAe,YAAA,CAAa,KAAA;AAAA;;;;;;;;;;;;;;;;;;;;;iBA4Cd,aAAA,mDAEc,OAAA,kBACZ,gBAAA,CAAA,CAEhB,OAAA,EAAS,OAAA,EACT,cAAA,EAAgB,uBAAA,CAAwB,KAAA,GACxC,MAAA,EAAQ,mBAAA,CAAoB,KAAA,EAAO,mBAAA,IAClC,YAAA;AAAA,kBAgDc,aAAA;EAAA,KACH,cAAA,UAAwB,uBAAA,CAAwB,KAAA;EAAA,KAChD,UAAA,oCAA8C,OAAA,IAAW,mBAAA,CAAoB,KAAA,EAAO,mBAAA;AAAA"}

package/dist/dev/utils/use-render.js

@@ -1,12 +1,14 @@
-'use client';
-
+"use client";
 import { composeRefs } from "./use-composed-refs.js";
 import { mergeProps } from "./merge-props.js";
 import { getStateDataAttrs } from "@videojs/core/dom";
 import { cloneElement, createElement, isValidElement } from "react";
 import { isFunction } from "@videojs/utils/predicate";
-
 //#region src/utils/use-render.tsx
+/** Check if a value is a render prop (function or React element). */
+function isRenderProp(value) {
+	return isFunction(value) || isValidElement(value);
+}
 function resolveClassName(className, state) {
 	return isFunction(className) ? className(state) : className;
 }
@@ -65,7 +67,7 @@ function renderElement(element, componentProps, params) {
 	mergedProps.ref = composeRefs(ref, mergedProps.ref);
 	return createElement(element, mergedProps);
 }
-
 //#endregion
-export { renderElement };
+export { isRenderProp, renderElement };
+
 //# sourceMappingURL=use-render.js.map

package/dist/dev/utils/use-render.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["'use client';\n\nimport { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\nimport { mergeProps } from './merge-props';\nimport type { HTMLProps, RenderProp } from './types';\nimport { composeRefs } from './use-composed-refs';\n\ntype IntrinsicTagName = keyof React.JSX.IntrinsicElements;\n\nexport interface UseRenderComponentProps<State> {\n  className?: string | ((state: State) => string | undefined) | undefined;\n  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;\n  render?: RenderProp<State> | undefined;\n}\n\nexport interface UseRenderParameters<State, RenderedElementType extends Element> {\n  state: State;\n  ref?: Ref<RenderedElementType> | Ref<RenderedElementType>[] | undefined;\n  props?: object | object[] | undefined;\n  stateAttrMap?: StateAttrMap<State> | undefined;\n}\n\nfunction resolveClassName<State>(\n  className: string | ((state: State) => string | undefined) | undefined,\n  state: State\n): string | undefined {\n  return isFunction(className) ? className(state) : className;\n}\n\nfunction resolveStyle<State>(\n  style: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined,\n  state: State\n): CSSProperties | undefined {\n  return isFunction(style) ? style(state) : style;\n}\n\nfunction getElementRef(element: ReactElement): Ref<unknown> | undefined {\n  // React 19+ uses element.props.ref, older versions use element.ref\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const elementAny = element as any;\n  return elementAny.ref ?? elementAny.props?.ref;\n}\n\n/**\n * Render a UI component element.\n *\n * Handles:\n * - Default tag rendering\n * - Render prop (element or function)\n * - Props merging (event handlers chained, className concatenated, style merged)\n * - Ref composition\n * - className/style as functions of state\n *\n * @public\n * @example\n * ```tsx\n * return renderElement('button', componentProps, {\n *   state,\n *   ref: [forwardedRef, buttonRef],\n *   props: [{ type: 'button' }, elementProps, getButtonProps],\n * });\n * ```\n */\nexport function renderElement<\n  State extends object,\n  RenderedElementType extends Element,\n  TagName extends IntrinsicTagName,\n>(\n  element: TagName,\n  componentProps: UseRenderComponentProps<State>,\n  params: UseRenderParameters<State, RenderedElementType>\n): ReactElement | null {\n  const { className: classNameProp, style: styleProp, render } = componentProps;\n  const { state, ref, props, stateAttrMap } = params;\n\n  // Resolve className and style if they're functions\n  const className = resolveClassName(classNameProp, state);\n  const style = resolveStyle(styleProp, state);\n\n  // Generate data attributes from state\n  const stateDataAttrs = getStateDataAttrs(state, stateAttrMap);\n\n  // Merge: state data attrs first, then props (so props can override)\n  const propsArray = Array.isArray(props) ? props : props ? [props] : [];\n  const mergedProps = mergeProps(stateDataAttrs, ...(propsArray as Record<string, unknown>[]));\n\n  if (className !== undefined) {\n    // Add resolved className and style\n    mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;\n  }\n\n  if (style !== undefined) {\n    mergedProps.style = mergedProps.style ? { ...(mergedProps.style as CSSProperties), ...style } : style;\n  }\n\n  if (isFunction(render)) {\n    // Render function: call with props and state\n    const mergedRef = composeRefs(ref, mergedProps.ref);\n    return render({ ...mergedProps, ref: mergedRef } as HTMLProps, state);\n  }\n\n  if (isValidElement(render)) {\n    const elementRef = getElementRef(render);\n\n    const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);\n\n    const elementProps = mergeProps(mergedProps, render.props as Record<string, unknown>);\n    elementProps.ref = mergedRef;\n\n    return cloneElement(render, elementProps);\n  }\n\n  // Default tag\n  const mergedRef = composeRefs(ref, mergedProps.ref);\n  mergedProps.ref = mergedRef;\n\n  return createElement(element, mergedProps);\n}\n\nexport namespace renderElement {\n  export type ComponentProps<State> = UseRenderComponentProps<State>;\n  export type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;\n}\n"],"mappings":";;;;;;;;;AAyBA,SAAS,iBACP,WACA,OACoB;AACpB,QAAO,WAAW,UAAU,GAAG,UAAU,MAAM,GAAG;;AAGpD,SAAS,aACP,OACA,OAC2B;AAC3B,QAAO,WAAW,MAAM,GAAG,MAAM,MAAM,GAAG;;AAG5C,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;AACnB,QAAO,WAAW,OAAO,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;AAuB7C,SAAgB,cAKd,SACA,gBACA,QACqB;CACrB,MAAM,EAAE,WAAW,eAAe,OAAO,WAAW,WAAW;CAC/D,MAAM,EAAE,OAAO,KAAK,OAAO,iBAAiB;CAG5C,MAAM,YAAY,iBAAiB,eAAe,MAAM;CACxD,MAAM,QAAQ,aAAa,WAAW,MAAM;CAO5C,MAAM,cAAc,WAJG,kBAAkB,OAAO,aAAa,EAId,GAD5B,MAAM,QAAQ,MAAM,GAAG,QAAQ,QAAQ,CAAC,MAAM,GAAG,EAAE,CACsB;AAE5F,KAAI,cAAc,OAEhB,aAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;AAG5F,KAAI,UAAU,OACZ,aAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;EAAO,GAAG;AAGlG,KAAI,WAAW,OAAO,EAAE;EAEtB,MAAM,YAAY,YAAY,KAAK,YAAY,IAAI;AACnD,SAAO,OAAO;GAAE,GAAG;GAAa,KAAK;GAAW,EAAe,MAAM;;AAGvE,KAAI,eAAe,OAAO,EAAE;EAC1B,MAAM,aAAa,cAAc,OAAO;EAExC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,WAAW;EAE/D,MAAM,eAAe,WAAW,aAAa,OAAO,MAAiC;AACrF,eAAa,MAAM;AAEnB,SAAO,aAAa,QAAQ,aAAa;;AAK3C,aAAY,MADM,YAAY,KAAK,YAAY,IAAI;AAGnD,QAAO,cAAc,SAAS,YAAY"}
+{"version":3,"file":"use-render.js","names":[],"sources":["../../../src/utils/use-render.tsx"],"sourcesContent":["'use client';\n\nimport { getStateDataAttrs, type StateAttrMap } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement, Ref } from 'react';\nimport { cloneElement, createElement, isValidElement } from 'react';\nimport { mergeProps } from './merge-props';\nimport type { HTMLProps, RenderProp } from './types';\nimport { composeRefs } from './use-composed-refs';\n\n/** Check if a value is a render prop (function or React element). */\nexport function isRenderProp(value: unknown): value is RenderProp<any> {\n  return isFunction(value) || isValidElement(value);\n}\n\ntype IntrinsicTagName = keyof React.JSX.IntrinsicElements;\n\nexport interface UseRenderComponentProps<State> {\n  className?: string | ((state: State) => string | undefined) | undefined;\n  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;\n  render?: RenderProp<State> | undefined;\n}\n\nexport interface UseRenderParameters<State, RenderedElementType extends Element> {\n  state: State;\n  ref?: Ref<RenderedElementType> | Ref<RenderedElementType>[] | undefined;\n  props?: object | object[] | undefined;\n  stateAttrMap?: StateAttrMap<State> | undefined;\n}\n\nfunction resolveClassName<State>(\n  className: string | ((state: State) => string | undefined) | undefined,\n  state: State\n): string | undefined {\n  return isFunction(className) ? className(state) : className;\n}\n\nfunction resolveStyle<State>(\n  style: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined,\n  state: State\n): CSSProperties | undefined {\n  return isFunction(style) ? style(state) : style;\n}\n\nfunction getElementRef(element: ReactElement): Ref<unknown> | undefined {\n  // React 19+ uses element.props.ref, older versions use element.ref\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const elementAny = element as any;\n  return elementAny.ref ?? elementAny.props?.ref;\n}\n\n/**\n * Render a UI component element.\n *\n * Handles:\n * - Default tag rendering\n * - Render prop (element or function)\n * - Props merging (event handlers chained, className concatenated, style merged)\n * - Ref composition\n * - className/style as functions of state\n *\n * @public\n * @example\n * ```tsx\n * return renderElement('button', componentProps, {\n *   state,\n *   ref: [forwardedRef, buttonRef],\n *   props: [{ type: 'button' }, elementProps, getButtonProps],\n * });\n * ```\n */\nexport function renderElement<\n  State extends object,\n  RenderedElementType extends Element,\n  TagName extends IntrinsicTagName,\n>(\n  element: TagName,\n  componentProps: UseRenderComponentProps<State>,\n  params: UseRenderParameters<State, RenderedElementType>\n): ReactElement | null {\n  const { className: classNameProp, style: styleProp, render } = componentProps;\n  const { state, ref, props, stateAttrMap } = params;\n\n  // Resolve className and style if they're functions\n  const className = resolveClassName(classNameProp, state);\n  const style = resolveStyle(styleProp, state);\n\n  // Generate data attributes from state\n  const stateDataAttrs = getStateDataAttrs(state, stateAttrMap);\n\n  // Merge: state data attrs first, then props (so props can override)\n  const propsArray = Array.isArray(props) ? props : props ? [props] : [];\n  const mergedProps = mergeProps(stateDataAttrs, ...(propsArray as Record<string, unknown>[]));\n\n  if (className !== undefined) {\n    // Add resolved className and style\n    mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;\n  }\n\n  if (style !== undefined) {\n    mergedProps.style = mergedProps.style ? { ...(mergedProps.style as CSSProperties), ...style } : style;\n  }\n\n  if (isFunction(render)) {\n    // Render function: call with props and state\n    const mergedRef = composeRefs(ref, mergedProps.ref);\n    return render({ ...mergedProps, ref: mergedRef } as HTMLProps, state);\n  }\n\n  if (isValidElement(render)) {\n    const elementRef = getElementRef(render);\n\n    const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);\n\n    const elementProps = mergeProps(mergedProps, render.props as Record<string, unknown>);\n    elementProps.ref = mergedRef;\n\n    return cloneElement(render, elementProps);\n  }\n\n  // Default tag\n  const mergedRef = composeRefs(ref, mergedProps.ref);\n  mergedProps.ref = mergedRef;\n\n  return createElement(element, mergedProps);\n}\n\nexport namespace renderElement {\n  export type ComponentProps<State> = UseRenderComponentProps<State>;\n  export type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;\n}\n"],"mappings":";;;;;;;;AAWA,SAAgB,aAAa,OAA0C;AACrE,QAAO,WAAW,MAAM,IAAI,eAAe,MAAM;;AAkBnD,SAAS,iBACP,WACA,OACoB;AACpB,QAAO,WAAW,UAAU,GAAG,UAAU,MAAM,GAAG;;AAGpD,SAAS,aACP,OACA,OAC2B;AAC3B,QAAO,WAAW,MAAM,GAAG,MAAM,MAAM,GAAG;;AAG5C,SAAS,cAAc,SAAiD;CAGtE,MAAM,aAAa;AACnB,QAAO,WAAW,OAAO,WAAW,OAAO;;;;;;;;;;;;;;;;;;;;;;AAuB7C,SAAgB,cAKd,SACA,gBACA,QACqB;CACrB,MAAM,EAAE,WAAW,eAAe,OAAO,WAAW,WAAW;CAC/D,MAAM,EAAE,OAAO,KAAK,OAAO,iBAAiB;CAG5C,MAAM,YAAY,iBAAiB,eAAe,MAAM;CACxD,MAAM,QAAQ,aAAa,WAAW,MAAM;CAO5C,MAAM,cAAc,WAJG,kBAAkB,OAAO,aAAa,EAId,GAD5B,MAAM,QAAQ,MAAM,GAAG,QAAQ,QAAQ,CAAC,MAAM,GAAG,EAAE,CACsB;AAE5F,KAAI,cAAc,KAAA,EAEhB,aAAY,YAAY,YAAY,YAAY,GAAG,YAAY,UAAU,GAAG,cAAc;AAG5F,KAAI,UAAU,KAAA,EACZ,aAAY,QAAQ,YAAY,QAAQ;EAAE,GAAI,YAAY;EAAyB,GAAG;EAAO,GAAG;AAGlG,KAAI,WAAW,OAAO,EAAE;EAEtB,MAAM,YAAY,YAAY,KAAK,YAAY,IAAI;AACnD,SAAO,OAAO;GAAE,GAAG;GAAa,KAAK;GAAW,EAAe,MAAM;;AAGvE,KAAI,eAAe,OAAO,EAAE;EAC1B,MAAM,aAAa,cAAc,OAAO;EAExC,MAAM,YAAY,YAAY,KAAK,YAAY,KAAK,WAAW;EAE/D,MAAM,eAAe,WAAW,aAAa,OAAO,MAAiC;AACrF,eAAa,MAAM;AAEnB,SAAO,aAAa,QAAQ,aAAa;;AAK3C,aAAY,MADM,YAAY,KAAK,YAAY,IAAI;AAGnD,QAAO,cAAc,SAAS,YAAY"}

package/dist/dev/utils/use-safe-id.js

@@ -1,7 +1,5 @@
-'use client';
-
+"use client";
 import { useId } from "react";
-
 //#region src/utils/use-safe-id.ts
 const UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;
 /**
@@ -14,9 +12,9 @@ const UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;
 */
 function useSafeId(prefix) {
 	const raw = useId().replace(UNSAFE_CHARS, "");
-	return prefix ? `${prefix}${raw}` : raw;
+	return prefix ? `${prefix}-${raw}` : raw;
 }
-
 //#endregion
 export { useSafeId };
+
 //# sourceMappingURL=use-safe-id.js.map

package/dist/dev/utils/use-safe-id.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-safe-id.js","names":[],"sources":["../../../src/utils/use-safe-id.ts"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nconst UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;\n\n/**\n * Generate a CSS-safe identifier from React's `useId()`.\n *\n * `useId()` returns values like `:r0:` which contain colons — invalid\n * in CSS `<dashed-ident>` tokens (used by `anchor-name` / `position-anchor`).\n * This hook strips non-alphanumeric/underscore/hyphen characters and\n * optionally prepends a prefix.\n */\nexport function useSafeId(prefix?: string): string {\n  const raw = useId().replace(UNSAFE_CHARS, '');\n  return prefix ? `${prefix}${raw}` : raw;\n}\n"],"mappings":";;;;;AAIA,MAAM,eAAe;;;;;;;;;AAUrB,SAAgB,UAAU,QAAyB;CACjD,MAAM,MAAM,OAAO,CAAC,QAAQ,cAAc,GAAG;AAC7C,QAAO,SAAS,GAAG,SAAS,QAAQ"}
+{"version":3,"file":"use-safe-id.js","names":[],"sources":["../../../src/utils/use-safe-id.ts"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\n\nconst UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;\n\n/**\n * Generate a CSS-safe identifier from React's `useId()`.\n *\n * `useId()` returns values like `:r0:` which contain colons — invalid\n * in CSS `<dashed-ident>` tokens (used by `anchor-name` / `position-anchor`).\n * This hook strips non-alphanumeric/underscore/hyphen characters and\n * optionally prepends a prefix.\n */\nexport function useSafeId(prefix?: string): string {\n  const raw = useId().replace(UNSAFE_CHARS, '');\n  return prefix ? `${prefix}-${raw}` : raw;\n}\n"],"mappings":";;;AAIA,MAAM,eAAe;;;;;;;;;AAUrB,SAAgB,UAAU,QAAyB;CACjD,MAAM,MAAM,OAAO,CAAC,QAAQ,cAAc,GAAG;AAC7C,QAAO,SAAS,GAAG,OAAO,GAAG,QAAQ"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@videojs/react",
   "type": "module",
-  "version": "10.0.0-beta.2",
+  "version": "10.0.0-beta.22",
   "description": "React library for building media players",
   "license": "Apache-2.0",
   "repository": {
@@ -62,25 +62,25 @@
     }
   },
   "peerDependencies": {
-    "react": ">=16.8.0"
+    "react": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@videojs/spf": "10.0.0-beta.2",
-    "@videojs/core": "10.0.0-beta.2",
-    "@videojs/store": "10.0.0-beta.2",
-    "@videojs/utils": "10.0.0-beta.2"
+    "@videojs/core": "10.0.0-beta.22",
+    "@videojs/spf": "10.0.0-beta.22",
+    "@videojs/store": "10.0.0-beta.22",
+    "@videojs/utils": "10.0.0-beta.22"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.2.7",
+    "@types/react": "^19.2.14",
     "jsdom": "^26.1.0",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
-    "tsdown": "^0.20.3",
-    "typescript": "^5.9.3",
-    "vitest": "^3.2.4",
-    "@videojs/skins": "10.0.0-alpha.4",
-    "@videojs/icons": "10.0.0-beta.2"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tsdown": "^0.21.4",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.0",
+    "@videojs/icons": "10.0.0-beta.22",
+    "@videojs/skins": "10.0.0-beta.22"
   },
   "publishConfig": {
     "access": "public"
@@ -99,6 +99,6 @@
     "dev": "pnpm build:watch",
     "test": "vitest run",
     "test:watch": "vitest",
-    "clean": "rm -rf dist types"
+    "clean": "rimraf --glob dist types '*.tsbuildinfo'"
   }
 }

package/dist/default/icons/dist/react/default/pip.js

@@ -1,27 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region ../icons/dist/react/default/pip.js
-const PipIcon = (props) => /* @__PURE__ */ jsxs("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 18,
-	height: 18,
-	fill: "none",
-	"aria-hidden": "true",
-	viewBox: "0 0 18 18",
-	...props,
-	children: [/* @__PURE__ */ jsx("path", {
-		fill: "currentColor",
-		d: "M13 2a4 4 0 0 1 4 4v2.035A3.5 3.5 0 0 0 16.5 8H15V6.273C15 5.018 13.96 4 12.679 4H4.32C3.04 4 2 5.018 2 6.273v5.454C2 12.982 3.04 14 4.321 14H6v1.5q0 .255.035.5H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"
-	}), /* @__PURE__ */ jsx("rect", {
-		width: 10,
-		height: 7,
-		x: 8,
-		y: 10,
-		fill: "currentColor",
-		rx: 2
-	})]
-});
-
-//#endregion
-export { PipIcon as default };
-//# sourceMappingURL=pip.js.map

package/dist/default/icons/dist/react/default/pip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pip.js","names":[],"sources":["../../../../../../../icons/dist/react/default/pip.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst PipIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", viewBox: \"0 0 18 18\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M13 2a4 4 0 0 1 4 4v2.035A3.5 3.5 0 0 0 16.5 8H15V6.273C15 5.018 13.96 4 12.679 4H4.32C3.04 4 2 5.018 2 6.273v5.454C2 12.982 3.04 14 4.321 14H6v1.5q0 .255.035.5H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z\" }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 10, height: 7, x: 8, y: 10, fill: \"currentColor\", rx: 2 })\n] });\nexport default PipIcon;\n"],"mappings":";;;AACA,MAAM,WAAW,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU,CAClL,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAqM,CAAC,EAC7O,oBAAI,QAAQ;EAAE,OAAO;EAAI,QAAQ;EAAG,GAAG;EAAG,GAAG;EAAI,MAAM;EAAgB,IAAI;EAAG,CAAC,CAChG;CAAE,CAAC"}

package/dist/default/icons/dist/react/minimal/pip.js

@@ -1,27 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region ../icons/dist/react/minimal/pip.js
-const PipIcon = (props) => /* @__PURE__ */ jsxs("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 18,
-	height: 18,
-	fill: "none",
-	"aria-hidden": "true",
-	viewBox: "0 0 18 18",
-	...props,
-	children: [/* @__PURE__ */ jsx("path", {
-		fill: "currentColor",
-		d: "M13 2a4 4 0 0 1 4 4v2.645a3.5 3.5 0 0 0-1-.145h-.5V6A2.5 2.5 0 0 0 13 3.5H4A2.5 2.5 0 0 0 1.5 6v6A2.5 2.5 0 0 0 4 14.5h2.5v.5c0 .347.05.683.145 1H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"
-	}), /* @__PURE__ */ jsx("rect", {
-		width: 10,
-		height: 7,
-		x: 8,
-		y: 10,
-		fill: "currentColor",
-		rx: 2
-	})]
-});
-
-//#endregion
-export { PipIcon as default };
-//# sourceMappingURL=pip.js.map

package/dist/default/icons/dist/react/minimal/pip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pip.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/pip.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst PipIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", viewBox: \"0 0 18 18\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M13 2a4 4 0 0 1 4 4v2.645a3.5 3.5 0 0 0-1-.145h-.5V6A2.5 2.5 0 0 0 13 3.5H4A2.5 2.5 0 0 0 1.5 6v6A2.5 2.5 0 0 0 4 14.5h2.5v.5c0 .347.05.683.145 1H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z\" }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 10, height: 7, x: 8, y: 10, fill: \"currentColor\", rx: 2 })\n] });\nexport default PipIcon;\n"],"mappings":";;;AACA,MAAM,WAAW,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU,CAClL,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAsL,CAAC,EAC9N,oBAAI,QAAQ;EAAE,OAAO;EAAI,QAAQ;EAAG,GAAG;EAAG,GAAG;EAAI,MAAM;EAAgB,IAAI;EAAG,CAAC,CAChG;CAAE,CAAC"}

package/dist/default/presets/video/error-dialog.js

@@ -1,51 +0,0 @@
-'use client';
-
-import { usePlayer } from "../../player/context.js";
-import { AlertDialogClose } from "../../ui/alert-dialog/alert-dialog-close.js";
-import { AlertDialogDescription } from "../../ui/alert-dialog/alert-dialog-description.js";
-import { AlertDialogPopup } from "../../ui/alert-dialog/alert-dialog-popup.js";
-import { AlertDialogRoot } from "../../ui/alert-dialog/alert-dialog-root.js";
-import { AlertDialogTitle } from "../../ui/alert-dialog/alert-dialog-title.js";
-import { selectError } from "@videojs/core/dom";
-import { useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/presets/video/error-dialog.tsx
-function ErrorDialog({ classes }) {
-	const errorState = usePlayer(selectError);
-	const lastError = useRef(errorState?.error);
-	if (errorState?.error) lastError.current = errorState.error;
-	if (!errorState) return null;
-	return /* @__PURE__ */ jsx(AlertDialogRoot, {
-		open: !!errorState.error,
-		onOpenChange: (open) => {
-			if (!open) errorState.dismissError();
-		},
-		children: /* @__PURE__ */ jsx(AlertDialogPopup, {
-			className: classes?.root,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: classes?.dialog,
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: classes?.content,
-					children: [/* @__PURE__ */ jsx(AlertDialogTitle, {
-						className: classes?.title,
-						children: "Something went wrong."
-					}), /* @__PURE__ */ jsx(AlertDialogDescription, {
-						className: classes?.description,
-						children: lastError.current?.message ?? "An error occurred while trying to play the video. Please try again."
-					})]
-				}), /* @__PURE__ */ jsx("div", {
-					className: classes?.actions,
-					children: /* @__PURE__ */ jsx(AlertDialogClose, {
-						className: classes?.close,
-						children: "OK"
-					})
-				})]
-			})
-		})
-	});
-}
-
-//#endregion
-export { ErrorDialog };
-//# sourceMappingURL=error-dialog.js.map

package/dist/default/presets/video/error-dialog.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-dialog.js","names":["AlertDialog.Root","AlertDialog.Popup","AlertDialog.Title","AlertDialog.Description","AlertDialog.Close"],"sources":["../../../../src/presets/video/error-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { selectError } from '@videojs/core/dom';\nimport { type ReactNode, useRef } from 'react';\nimport { usePlayer } from '@/player/context';\nimport { AlertDialog } from '@/ui/alert-dialog';\n\nexport interface ErrorDialogClasses {\n  root?: string;\n  dialog?: string;\n  content?: string;\n  title?: string;\n  description?: string;\n  actions?: string;\n  close?: string;\n}\n\nexport function ErrorDialog({ classes }: { classes?: ErrorDialogClasses }): ReactNode {\n  const errorState = usePlayer(selectError);\n  const lastError = useRef(errorState?.error);\n  if (errorState?.error) lastError.current = errorState.error;\n\n  if (!errorState) return null;\n\n  return (\n    <AlertDialog.Root\n      open={!!errorState.error}\n      onOpenChange={(open) => {\n        if (!open) errorState.dismissError();\n      }}\n    >\n      <AlertDialog.Popup className={classes?.root}>\n        <div className={classes?.dialog}>\n          <div className={classes?.content}>\n            <AlertDialog.Title className={classes?.title}>Something went wrong.</AlertDialog.Title>\n            <AlertDialog.Description className={classes?.description}>\n              {lastError.current?.message ?? 'An error occurred while trying to play the video. Please try again.'}\n            </AlertDialog.Description>\n          </div>\n          <div className={classes?.actions}>\n            <AlertDialog.Close className={classes?.close}>OK</AlertDialog.Close>\n          </div>\n        </div>\n      </AlertDialog.Popup>\n    </AlertDialog.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,SAAgB,YAAY,EAAE,WAAwD;CACpF,MAAM,aAAa,UAAU,YAAY;CACzC,MAAM,YAAY,OAAO,YAAY,MAAM;AAC3C,KAAI,YAAY,MAAO,WAAU,UAAU,WAAW;AAEtD,KAAI,CAAC,WAAY,QAAO;AAExB,QACE,oBAACA;EACC,MAAM,CAAC,CAAC,WAAW;EACnB,eAAe,SAAS;AACtB,OAAI,CAAC,KAAM,YAAW,cAAc;;YAGtC,oBAACC;GAAkB,WAAW,SAAS;aACrC,qBAAC;IAAI,WAAW,SAAS;eACvB,qBAAC;KAAI,WAAW,SAAS;gBACvB,oBAACC;MAAkB,WAAW,SAAS;gBAAO;OAAyC,EACvF,oBAACC;MAAwB,WAAW,SAAS;gBAC1C,UAAU,SAAS,WAAW;OACP;MACtB,EACN,oBAAC;KAAI,WAAW,SAAS;eACvB,oBAACC;MAAkB,WAAW,SAAS;gBAAO;OAAsB;MAChE;KACF;IACY;GACH"}

package/dist/default/skins/dist/default/default/tailwind/components/icon-state.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-state.js","names":[],"sources":["../../../../../../../../../skins/dist/default/default/tailwind/components/icon-state.js"],"sourcesContent":["//#region src/default/tailwind/components/icon-state.ts\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-active:block group-data-active:opacity-100\"\n\t}\n};\n\n//#endregion\nexport { iconState };\n//# sourceMappingURL=icon-state.js.map"],"mappings":";AACA,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD"}

package/dist/default/skins/dist/default/minimal/tailwind/components/icon-state.js

@@ -1,29 +0,0 @@
-//#region ../skins/dist/default/minimal/tailwind/components/icon-state.js
-const iconState = {
-	play: {
-		button: "group",
-		restart: "hidden opacity-0 group-data-ended:block group-data-ended:opacity-100",
-		play: "hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100",
-		pause: "hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100"
-	},
-	mute: {
-		button: "group",
-		volumeOff: "hidden opacity-0 group-data-muted:block group-data-muted:opacity-100",
-		volumeLow: "hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100",
-		volumeHigh: "hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100"
-	},
-	fullscreen: {
-		button: "group",
-		enter: "hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100",
-		exit: "hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100"
-	},
-	captions: {
-		button: "group",
-		off: "hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100",
-		on: "hidden opacity-0 group-data-active:block group-data-active:opacity-100"
-	}
-};
-
-//#endregion
-export { iconState };
-//# sourceMappingURL=icon-state.js.map

package/dist/default/skins/dist/default/minimal/tailwind/components/icon-state.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"icon-state.js","names":[],"sources":["../../../../../../../../../skins/dist/default/minimal/tailwind/components/icon-state.js"],"sourcesContent":["//#region src/minimal/tailwind/components/icon-state.ts\nconst iconState = {\n\tplay: {\n\t\tbutton: \"group\",\n\t\trestart: \"hidden opacity-0 group-data-ended:block group-data-ended:opacity-100\",\n\t\tplay: \"hidden opacity-0 group-not-data-ended:group-data-paused:block group-not-data-ended:group-data-paused:opacity-100\",\n\t\tpause: \"hidden opacity-0 group-not-data-paused:group-not-data-ended:block group-not-data-paused:group-not-data-ended:opacity-100\"\n\t},\n\tmute: {\n\t\tbutton: \"group\",\n\t\tvolumeOff: \"hidden opacity-0 group-data-muted:block group-data-muted:opacity-100\",\n\t\tvolumeLow: \"hidden opacity-0 group-not-data-muted:group-data-[volume-level=low]:block group-not-data-muted:group-data-[volume-level=low]:opacity-100\",\n\t\tvolumeHigh: \"hidden opacity-0 group-not-data-muted:group-not-data-[volume-level=low]:block group-not-data-muted:group-not-data-[volume-level=low]:opacity-100\"\n\t},\n\tfullscreen: {\n\t\tbutton: \"group\",\n\t\tenter: \"hidden opacity-0 group-not-data-fullscreen:block group-not-data-fullscreen:opacity-100\",\n\t\texit: \"hidden opacity-0 group-data-fullscreen:block group-data-fullscreen:opacity-100\"\n\t},\n\tcaptions: {\n\t\tbutton: \"group\",\n\t\toff: \"hidden opacity-0 group-not-data-active:block group-not-data-active:opacity-100\",\n\t\ton: \"hidden opacity-0 group-data-active:block group-data-active:opacity-100\"\n\t}\n};\n\n//#endregion\nexport { iconState };\n//# sourceMappingURL=icon-state.js.map"],"mappings":";AACA,MAAM,YAAY;CACjB,MAAM;EACL,QAAQ;EACR,SAAS;EACT,MAAM;EACN,OAAO;EACP;CACD,MAAM;EACL,QAAQ;EACR,WAAW;EACX,WAAW;EACX,YAAY;EACZ;CACD,YAAY;EACX,QAAQ;EACR,OAAO;EACP,MAAM;EACN;CACD,UAAU;EACT,QAAQ;EACR,KAAK;EACL,IAAI;EACJ;CACD"}

package/dist/dev/icons/dist/react/default/pip.js

@@ -1,27 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region ../icons/dist/react/default/pip.js
-const PipIcon = (props) => /* @__PURE__ */ jsxs("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 18,
-	height: 18,
-	fill: "none",
-	"aria-hidden": "true",
-	viewBox: "0 0 18 18",
-	...props,
-	children: [/* @__PURE__ */ jsx("path", {
-		fill: "currentColor",
-		d: "M13 2a4 4 0 0 1 4 4v2.035A3.5 3.5 0 0 0 16.5 8H15V6.273C15 5.018 13.96 4 12.679 4H4.32C3.04 4 2 5.018 2 6.273v5.454C2 12.982 3.04 14 4.321 14H6v1.5q0 .255.035.5H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"
-	}), /* @__PURE__ */ jsx("rect", {
-		width: 10,
-		height: 7,
-		x: 8,
-		y: 10,
-		fill: "currentColor",
-		rx: 2
-	})]
-});
-
-//#endregion
-export { PipIcon as default };
-//# sourceMappingURL=pip.js.map

package/dist/dev/icons/dist/react/default/pip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pip.js","names":[],"sources":["../../../../../../../icons/dist/react/default/pip.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst PipIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", viewBox: \"0 0 18 18\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M13 2a4 4 0 0 1 4 4v2.035A3.5 3.5 0 0 0 16.5 8H15V6.273C15 5.018 13.96 4 12.679 4H4.32C3.04 4 2 5.018 2 6.273v5.454C2 12.982 3.04 14 4.321 14H6v1.5q0 .255.035.5H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z\" }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 10, height: 7, x: 8, y: 10, fill: \"currentColor\", rx: 2 })\n] });\nexport default PipIcon;\n"],"mappings":";;;AACA,MAAM,WAAW,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU,CAClL,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAqM,CAAC,EAC7O,oBAAI,QAAQ;EAAE,OAAO;EAAI,QAAQ;EAAG,GAAG;EAAG,GAAG;EAAI,MAAM;EAAgB,IAAI;EAAG,CAAC,CAChG;CAAE,CAAC"}

package/dist/dev/icons/dist/react/minimal/pip.js

@@ -1,27 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region ../icons/dist/react/minimal/pip.js
-const PipIcon = (props) => /* @__PURE__ */ jsxs("svg", {
-	xmlns: "http://www.w3.org/2000/svg",
-	width: 18,
-	height: 18,
-	fill: "none",
-	"aria-hidden": "true",
-	viewBox: "0 0 18 18",
-	...props,
-	children: [/* @__PURE__ */ jsx("path", {
-		fill: "currentColor",
-		d: "M13 2a4 4 0 0 1 4 4v2.645a3.5 3.5 0 0 0-1-.145h-.5V6A2.5 2.5 0 0 0 13 3.5H4A2.5 2.5 0 0 0 1.5 6v6A2.5 2.5 0 0 0 4 14.5h2.5v.5c0 .347.05.683.145 1H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z"
-	}), /* @__PURE__ */ jsx("rect", {
-		width: 10,
-		height: 7,
-		x: 8,
-		y: 10,
-		fill: "currentColor",
-		rx: 2
-	})]
-});
-
-//#endregion
-export { PipIcon as default };
-//# sourceMappingURL=pip.js.map

package/dist/dev/icons/dist/react/minimal/pip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pip.js","names":[],"sources":["../../../../../../../icons/dist/react/minimal/pip.js"],"sourcesContent":["import { jsx, jsxs } from \"react/jsx-runtime\";\nconst PipIcon = (props) => /* @__PURE__ */ jsxs(\"svg\", { xmlns: \"http://www.w3.org/2000/svg\", width: 18, height: 18, fill: \"none\", \"aria-hidden\": \"true\", viewBox: \"0 0 18 18\", ...props, children: [\n  /* @__PURE__ */ jsx(\"path\", { fill: \"currentColor\", d: \"M13 2a4 4 0 0 1 4 4v2.645a3.5 3.5 0 0 0-1-.145h-.5V6A2.5 2.5 0 0 0 13 3.5H4A2.5 2.5 0 0 0 1.5 6v6A2.5 2.5 0 0 0 4 14.5h2.5v.5c0 .347.05.683.145 1H4a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4z\" }),\n  /* @__PURE__ */ jsx(\"rect\", { width: 10, height: 7, x: 8, y: 10, fill: \"currentColor\", rx: 2 })\n] });\nexport default PipIcon;\n"],"mappings":";;;AACA,MAAM,WAAW,UAA0B,qBAAK,OAAO;CAAE,OAAO;CAA8B,OAAO;CAAI,QAAQ;CAAI,MAAM;CAAQ,eAAe;CAAQ,SAAS;CAAa,GAAG;CAAO,UAAU,CAClL,oBAAI,QAAQ;EAAE,MAAM;EAAgB,GAAG;EAAsL,CAAC,EAC9N,oBAAI,QAAQ;EAAE,OAAO;EAAI,QAAQ;EAAG,GAAG;EAAG,GAAG;EAAI,MAAM;EAAgB,IAAI;EAAG,CAAC,CAChG;CAAE,CAAC"}

package/dist/dev/presets/video/error-dialog.js

@@ -1,51 +0,0 @@
-'use client';
-
-import { usePlayer } from "../../player/context.js";
-import { AlertDialogClose } from "../../ui/alert-dialog/alert-dialog-close.js";
-import { AlertDialogDescription } from "../../ui/alert-dialog/alert-dialog-description.js";
-import { AlertDialogPopup } from "../../ui/alert-dialog/alert-dialog-popup.js";
-import { AlertDialogRoot } from "../../ui/alert-dialog/alert-dialog-root.js";
-import { AlertDialogTitle } from "../../ui/alert-dialog/alert-dialog-title.js";
-import { selectError } from "@videojs/core/dom";
-import { useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-
-//#region src/presets/video/error-dialog.tsx
-function ErrorDialog({ classes }) {
-	const errorState = usePlayer(selectError);
-	const lastError = useRef(errorState?.error);
-	if (errorState?.error) lastError.current = errorState.error;
-	if (!errorState) return null;
-	return /* @__PURE__ */ jsx(AlertDialogRoot, {
-		open: !!errorState.error,
-		onOpenChange: (open) => {
-			if (!open) errorState.dismissError();
-		},
-		children: /* @__PURE__ */ jsx(AlertDialogPopup, {
-			className: classes?.root,
-			children: /* @__PURE__ */ jsxs("div", {
-				className: classes?.dialog,
-				children: [/* @__PURE__ */ jsxs("div", {
-					className: classes?.content,
-					children: [/* @__PURE__ */ jsx(AlertDialogTitle, {
-						className: classes?.title,
-						children: "Something went wrong."
-					}), /* @__PURE__ */ jsx(AlertDialogDescription, {
-						className: classes?.description,
-						children: lastError.current?.message ?? "An error occurred while trying to play the video. Please try again."
-					})]
-				}), /* @__PURE__ */ jsx("div", {
-					className: classes?.actions,
-					children: /* @__PURE__ */ jsx(AlertDialogClose, {
-						className: classes?.close,
-						children: "OK"
-					})
-				})]
-			})
-		})
-	});
-}
-
-//#endregion
-export { ErrorDialog };
-//# sourceMappingURL=error-dialog.js.map

package/dist/dev/presets/video/error-dialog.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"error-dialog.js","names":["AlertDialog.Root","AlertDialog.Popup","AlertDialog.Title","AlertDialog.Description","AlertDialog.Close"],"sources":["../../../../src/presets/video/error-dialog.tsx"],"sourcesContent":["'use client';\n\nimport { selectError } from '@videojs/core/dom';\nimport { type ReactNode, useRef } from 'react';\nimport { usePlayer } from '@/player/context';\nimport { AlertDialog } from '@/ui/alert-dialog';\n\nexport interface ErrorDialogClasses {\n  root?: string;\n  dialog?: string;\n  content?: string;\n  title?: string;\n  description?: string;\n  actions?: string;\n  close?: string;\n}\n\nexport function ErrorDialog({ classes }: { classes?: ErrorDialogClasses }): ReactNode {\n  const errorState = usePlayer(selectError);\n  const lastError = useRef(errorState?.error);\n  if (errorState?.error) lastError.current = errorState.error;\n\n  if (!errorState) return null;\n\n  return (\n    <AlertDialog.Root\n      open={!!errorState.error}\n      onOpenChange={(open) => {\n        if (!open) errorState.dismissError();\n      }}\n    >\n      <AlertDialog.Popup className={classes?.root}>\n        <div className={classes?.dialog}>\n          <div className={classes?.content}>\n            <AlertDialog.Title className={classes?.title}>Something went wrong.</AlertDialog.Title>\n            <AlertDialog.Description className={classes?.description}>\n              {lastError.current?.message ?? 'An error occurred while trying to play the video. Please try again.'}\n            </AlertDialog.Description>\n          </div>\n          <div className={classes?.actions}>\n            <AlertDialog.Close className={classes?.close}>OK</AlertDialog.Close>\n          </div>\n        </div>\n      </AlertDialog.Popup>\n    </AlertDialog.Root>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,SAAgB,YAAY,EAAE,WAAwD;CACpF,MAAM,aAAa,UAAU,YAAY;CACzC,MAAM,YAAY,OAAO,YAAY,MAAM;AAC3C,KAAI,YAAY,MAAO,WAAU,UAAU,WAAW;AAEtD,KAAI,CAAC,WAAY,QAAO;AAExB,QACE,oBAACA;EACC,MAAM,CAAC,CAAC,WAAW;EACnB,eAAe,SAAS;AACtB,OAAI,CAAC,KAAM,YAAW,cAAc;;YAGtC,oBAACC;GAAkB,WAAW,SAAS;aACrC,qBAAC;IAAI,WAAW,SAAS;eACvB,qBAAC;KAAI,WAAW,SAAS;gBACvB,oBAACC;MAAkB,WAAW,SAAS;gBAAO;OAAyC,EACvF,oBAACC;MAAwB,WAAW,SAAS;gBAC1C,UAAU,SAAS,WAAW;OACP;MACtB,EACN,oBAAC;KAAI,WAAW,SAAS;eACvB,oBAACC;MAAkB,WAAW,SAAS;gBAAO;OAAsB;MAChE;KACF;IACY;GACH"}