@videojs/react 0.1.0-preview.9 → 10.0.0-alpha.11

package/dist/dev/utils/merge-props.js

@@ -0,0 +1,85 @@
+'use client';
+
+//#region src/utils/merge-props.ts
+/**
+* Check if a key is an event handler key (on* with capital letter).
+*/
+function isEventHandlerKey(key) {
+	return key.charCodeAt(0) === 111 && key.charCodeAt(1) === 110 && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90;
+}
+/**
+* Check if a key/value pair is an event handler (includes undefined values).
+*/
+function isEventHandler(key, value) {
+	return isEventHandlerKey(key) && (typeof value === "function" || typeof value === "undefined");
+}
+/**
+* Merge two event handlers - external runs first, ours runs second.
+*/
+function mergeEventHandlers(ours, theirs) {
+	if (!theirs) return ours;
+	if (!ours) return theirs;
+	return (event) => {
+		theirs(event);
+		ours(event);
+	};
+}
+/**
+* Merge two className values - concatenate strings.
+*/
+function mergeClassNames(ours, theirs) {
+	if (theirs && ours) return `${theirs} ${ours}`;
+	return theirs || ours;
+}
+/**
+* Merge two style objects - theirs overwrites conflicts.
+*/
+function mergeStyles(ours, theirs) {
+	if (!theirs) return ours;
+	if (!ours) return theirs;
+	return {
+		...ours,
+		...theirs
+	};
+}
+/**
+* Merge a single props object into accumulated result.
+*/
+function mergeOne(merged, props) {
+	if (!props) return merged;
+	for (const key in props) {
+		const value = props[key];
+		if (key === "className") merged.className = mergeClassNames(merged.className, value);
+		else if (key === "style") merged.style = mergeStyles(merged.style, value);
+		else if (isEventHandler(key, value)) merged[key] = mergeEventHandlers(merged[key], value);
+		else merged[key] = value;
+	}
+	return merged;
+}
+/**
+* Merge multiple props objects.
+*
+* - Event handlers (on*): chained - external first, ours second
+* - className: concatenated
+* - style: merged objects (external wins conflicts)
+* - other: last one wins
+*
+* @public
+* @example
+* ```ts
+* const merged = mergeProps(
+*   { onClick: ourHandler, className: 'base' },
+*   { onClick: theirHandler, className: 'custom' }
+* );
+* // { onClick: chainedHandler, className: 'custom base' }
+* ```
+*/
+function mergeProps(...propSets) {
+	let merged = {};
+	for (const props of propSets) merged = mergeOne(merged, props);
+	return merged;
+}
+
+//#endregion
+export { mergeProps };
+//# sourceMappingURL=merge-props.js.map

package/dist/dev/utils/merge-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-props.js","names":[],"sources":["../../../src/utils/merge-props.ts"],"sourcesContent":["'use client';\n\nimport type { ComponentPropsWithRef, CSSProperties, ElementType, SyntheticEvent } from 'react';\n\ntype Props<T extends ElementType = ElementType> = ComponentPropsWithRef<T>;\n\n/**\n * Check if a key is an event handler key (on* with capital letter).\n */\nfunction isEventHandlerKey(key: string): boolean {\n  return (\n    key.charCodeAt(0) === 111 /* o */ &&\n    key.charCodeAt(1) === 110 /* n */ &&\n    key.charCodeAt(2) >= 65 /* A */ &&\n    key.charCodeAt(2) <= 90 /* Z */\n  );\n}\n\n/**\n * Check if a key/value pair is an event handler (includes undefined values).\n */\nfunction isEventHandler(key: string, value: unknown): boolean {\n  return isEventHandlerKey(key) && (typeof value === 'function' || typeof value === 'undefined');\n}\n\n/**\n * Merge two event handlers - external runs first, ours runs second.\n */\nfunction mergeEventHandlers(\n  ours: ((event: SyntheticEvent) => void) | undefined,\n  theirs: ((event: SyntheticEvent) => void) | undefined\n): ((event: SyntheticEvent) => void) | undefined {\n  if (!theirs) return ours;\n  if (!ours) return theirs;\n\n  return (event: SyntheticEvent) => {\n    theirs(event);\n    ours(event);\n  };\n}\n\n/**\n * Merge two className values - concatenate strings.\n */\nfunction mergeClassNames(ours: string | undefined, theirs: string | undefined): string | undefined {\n  if (theirs && ours) return `${theirs} ${ours}`;\n  return theirs || ours;\n}\n\n/**\n * Merge two style objects - theirs overwrites conflicts.\n */\nfunction mergeStyles(ours: CSSProperties | undefined, theirs: CSSProperties | undefined): CSSProperties | undefined {\n  if (!theirs) return ours;\n  if (!ours) return theirs;\n  return { ...ours, ...theirs };\n}\n\n/**\n * Merge a single props object into accumulated result.\n */\nfunction mergeOne<T extends ElementType>(\n  merged: Record<string, unknown>,\n  props: Props<T> | undefined\n): Record<string, unknown> {\n  if (!props) return merged;\n\n  for (const key in props) {\n    const value = props[key as keyof typeof props];\n\n    if (key === 'className') {\n      merged.className = mergeClassNames(merged.className as string | undefined, value as string);\n    } else if (key === 'style') {\n      merged.style = mergeStyles(merged.style as CSSProperties | undefined, value as CSSProperties);\n    } else if (isEventHandler(key, value)) {\n      merged[key] = mergeEventHandlers(\n        merged[key] as ((event: SyntheticEvent) => void) | undefined,\n        value as (event: SyntheticEvent) => void\n      );\n    } else {\n      merged[key] = value;\n    }\n  }\n\n  return merged;\n}\n\n/**\n * Merge multiple props objects.\n *\n * - Event handlers (on*): chained - external first, ours second\n * - className: concatenated\n * - style: merged objects (external wins conflicts)\n * - other: last one wins\n *\n * @public\n * @example\n * ```ts\n * const merged = mergeProps(\n *   { onClick: ourHandler, className: 'base' },\n *   { onClick: theirHandler, className: 'custom' }\n * );\n * // { onClick: chainedHandler, className: 'custom base' }\n * ```\n */\nexport function mergeProps<T extends ElementType>(...propSets: (Props<T> | undefined)[]): Props<T> {\n  let merged: Record<string, unknown> = {};\n\n  for (const props of propSets) {\n    merged = mergeOne(merged, props);\n  }\n\n  return merged as Props<T>;\n}\n"],"mappings":";;;;;;AASA,SAAS,kBAAkB,KAAsB;AAC/C,QACE,IAAI,WAAW,EAAE,KAAK,OACtB,IAAI,WAAW,EAAE,KAAK,OACtB,IAAI,WAAW,EAAE,IAAI,MACrB,IAAI,WAAW,EAAE,IAAI;;;;;AAOzB,SAAS,eAAe,KAAa,OAAyB;AAC5D,QAAO,kBAAkB,IAAI,KAAK,OAAO,UAAU,cAAc,OAAO,UAAU;;;;;AAMpF,SAAS,mBACP,MACA,QAC+C;AAC/C,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,CAAC,KAAM,QAAO;AAElB,SAAQ,UAA0B;AAChC,SAAO,MAAM;AACb,OAAK,MAAM;;;;;;AAOf,SAAS,gBAAgB,MAA0B,QAAgD;AACjG,KAAI,UAAU,KAAM,QAAO,GAAG,OAAO,GAAG;AACxC,QAAO,UAAU;;;;;AAMnB,SAAS,YAAY,MAAiC,QAA8D;AAClH,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,CAAC,KAAM,QAAO;AAClB,QAAO;EAAE,GAAG;EAAM,GAAG;EAAQ;;;;;AAM/B,SAAS,SACP,QACA,OACyB;AACzB,KAAI,CAAC,MAAO,QAAO;AAEnB,MAAK,MAAM,OAAO,OAAO;EACvB,MAAM,QAAQ,MAAM;AAEpB,MAAI,QAAQ,YACV,QAAO,YAAY,gBAAgB,OAAO,WAAiC,MAAgB;WAClF,QAAQ,QACjB,QAAO,QAAQ,YAAY,OAAO,OAAoC,MAAuB;WACpF,eAAe,KAAK,MAAM,CACnC,QAAO,OAAO,mBACZ,OAAO,MACP,MACD;MAED,QAAO,OAAO;;AAIlB,QAAO;;;;;;;;;;;;;;;;;;;;AAqBT,SAAgB,WAAkC,GAAG,UAA8C;CACjG,IAAI,SAAkC,EAAE;AAExC,MAAK,MAAM,SAAS,SAClB,UAAS,SAAS,QAAQ,MAAM;AAGlC,QAAO"}

package/dist/dev/utils/types.d.ts

@@ -0,0 +1,27 @@
+import { CSSProperties, ComponentPropsWithRef, ElementType, ReactElement } from "react";
+
+//#region src/utils/types.d.ts
+/** Props that can be spread on any HTML element. */
+type HTMLProps<T = any> = React.HTMLAttributes<T> & {
+  ref?: React.Ref<T> | undefined;
+};
+/** Render function signature - receives props and state, returns element. */
+type RenderFunction<Props, State> = (props: Props, state: State) => ReactElement | null;
+/** Render prop - either a React element or a render function. */
+type RenderProp<State> = ReactElement | RenderFunction<HTMLProps, State>;
+/**
+ * Standard props for UI components.
+ *
+ * Provides consistent API across all UI components:
+ * - `className` as string or function of state
+ * - `style` as object or function of state
+ * - `render` prop for element customization
+ */
+type UIComponentProps<TagName extends keyof React.JSX.IntrinsicElements, State> = Omit<React.JSX.IntrinsicElements[TagName], 'className' | 'style'> & {
+  /** Class name or function returning class name from state. */className?: string | ((state: State) => string | undefined) | undefined; /** Style or function returning style from state. */
+  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined; /** Render prop for custom element. */
+  render?: RenderProp<State> | undefined;
+};
+//#endregion
+export { HTMLProps, RenderFunction, RenderProp, UIComponentProps };
+//# sourceMappingURL=types.d.ts.map

package/dist/dev/utils/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../src/utils/types.ts"],"mappings":";;;;KAGY,SAAA,YAAqB,KAAA,CAAM,cAAA,CAAe,CAAA;EACpD,GAAA,GAAM,KAAA,CAAM,GAAA,CAAI,CAAA;AAAA;;KAIN,cAAA,kBAAgC,KAAA,EAAO,KAAA,EAAO,KAAA,EAAO,KAAA,KAAU,YAAA;;KAG/D,UAAA,UAAoB,YAAA,GAAe,cAAA,CAAe,SAAA,EAAW,KAAA;;;;;;;;;KAU7D,gBAAA,uBAAuC,KAAA,CAAM,GAAA,CAAI,iBAAA,WAA4B,IAAA,CACvF,KAAA,CAAM,GAAA,CAAI,iBAAA,CAAkB,OAAA;EAlBhB,8DAsBZ,SAAA,cAAuB,KAAA,EAAO,KAAA,sCAtBb;EAwBjB,KAAA,GAAQ,aAAA,KAAkB,KAAA,EAAO,KAAA,KAAU,aAAA,2BApBjC;EAsBV,MAAA,GAAS,UAAA,CAAW,KAAA;AAAA"}

package/dist/dev/utils/use-composed-refs.js

@@ -0,0 +1,57 @@
+'use client';
+
+import { useCallback } from "react";
+import { isFunction } from "@videojs/utils/predicate";
+
+//#region src/utils/use-composed-refs.ts
+/**
+* Set a given ref to a given value.
+*
+* Handles both callback refs and RefObject(s).
+*
+* @returns Cleanup function if the ref callback returned one (React 19+)
+*/
+function setRef(ref, value) {
+	if (isFunction(ref)) return ref(value);
+	else if (ref !== null && ref !== void 0) ref.current = value;
+}
+/**
+* Compose multiple refs into a single callback ref.
+*
+* @example
+* ```tsx
+* const composedRef = composeRefs(ref1, ref2, ref3);
+* return <div ref={composedRef} />;
+* ```
+*/
+function composeRefs(...refs) {
+	const flatRefs = refs.flat();
+	return (node) => {
+		const cleanups = flatRefs.map((ref) => setRef(ref, node));
+		if (cleanups.some(isFunction)) return () => {
+			for (let i = 0; i < cleanups.length; i++) {
+				const cleanup = cleanups[i];
+				if (isFunction(cleanup)) cleanup();
+				else setRef(flatRefs[i], null);
+			}
+		};
+	};
+}
+/**
+* Hook that composes multiple refs into a single callback ref.
+*
+* Memoized for stable reference.
+*
+* @example
+* ```tsx
+* const composedRef = useComposedRefs(forwardedRef, localRef);
+* return <div ref={composedRef} />;
+* ```
+*/
+function useComposedRefs(...refs) {
+	return useCallback(composeRefs(...refs), [...refs]);
+}
+
+//#endregion
+export { composeRefs, useComposedRefs };
+//# sourceMappingURL=use-composed-refs.js.map

package/dist/dev/utils/use-composed-refs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-composed-refs.js","names":[],"sources":["../../../src/utils/use-composed-refs.ts"],"sourcesContent":["'use client';\n\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { Ref, RefCallback } from 'react';\n\nimport { useCallback } from 'react';\n\ntype OptionalRef<T> = Ref<T> | undefined;\n\n/**\n * Set a given ref to a given value.\n *\n * Handles both callback refs and RefObject(s).\n *\n * @returns Cleanup function if the ref callback returned one (React 19+)\n */\nfunction setRef<T>(ref: OptionalRef<T>, value: T): (() => void) | void | undefined {\n  if (isFunction(ref)) {\n    return ref(value);\n  } else if (ref !== null && ref !== undefined) {\n    ref.current = value;\n  }\n}\n\n/**\n * Compose multiple refs into a single callback ref.\n *\n * @example\n * ```tsx\n * const composedRef = composeRefs(ref1, ref2, ref3);\n * return <div ref={composedRef} />;\n * ```\n */\nexport function composeRefs<T>(...refs: (OptionalRef<T> | OptionalRef<T>[])[]): RefCallback<T> {\n  const flatRefs = refs.flat();\n\n  return (node): (() => void) | void => {\n    const cleanups = flatRefs.map((ref) => setRef(ref, node));\n\n    // Only return cleanup if any refs returned one (React 19+).\n    // React 18 handles cleanup by calling the ref callback with null.\n    if (cleanups.some(isFunction)) {\n      return () => {\n        for (let i = 0; i < cleanups.length; i++) {\n          const cleanup = cleanups[i];\n          if (isFunction(cleanup)) {\n            cleanup();\n          } else {\n            setRef(flatRefs[i], null);\n          }\n        }\n      };\n    }\n  };\n}\n\n/**\n * Hook that composes multiple refs into a single callback ref.\n *\n * Memoized for stable reference.\n *\n * @example\n * ```tsx\n * const composedRef = useComposedRefs(forwardedRef, localRef);\n * return <div ref={composedRef} />;\n * ```\n */\nexport function useComposedRefs<T>(...refs: OptionalRef<T>[]): RefCallback<T> {\n  return useCallback(composeRefs(...refs), [...refs]);\n}\n"],"mappings":";;;;;;;;;;;;;AAgBA,SAAS,OAAU,KAAqB,OAA2C;AACjF,KAAI,WAAW,IAAI,CACjB,QAAO,IAAI,MAAM;UACR,QAAQ,QAAQ,QAAQ,OACjC,KAAI,UAAU;;;;;;;;;;;AAalB,SAAgB,YAAe,GAAG,MAA6D;CAC7F,MAAM,WAAW,KAAK,MAAM;AAE5B,SAAQ,SAA8B;EACpC,MAAM,WAAW,SAAS,KAAK,QAAQ,OAAO,KAAK,KAAK,CAAC;AAIzD,MAAI,SAAS,KAAK,WAAW,CAC3B,cAAa;AACX,QAAK,IAAI,IAAI,GAAG,IAAI,SAAS,QAAQ,KAAK;IACxC,MAAM,UAAU,SAAS;AACzB,QAAI,WAAW,QAAQ,CACrB,UAAS;QAET,QAAO,SAAS,IAAI,KAAK;;;;;;;;;;;;;;;;AAmBrC,SAAgB,gBAAmB,GAAG,MAAwC;AAC5E,QAAO,YAAY,YAAY,GAAG,KAAK,EAAE,CAAC,GAAG,KAAK,CAAC"}

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

@@ -0,0 +1,33 @@
+'use client';
+
+import { useEffect, useRef } from "react";
+
+//#region src/utils/use-destroy.ts
+/**
+* Destroy an instance on unmount, deferring destruction to survive React
+* StrictMode's simulated unmount/re-mount cycle.
+*
+* StrictMode runs effects, then immediately runs cleanup, then re-runs
+* effects — all synchronously. By deferring `destroy()` to a macrotask,
+* the re-mount effect can cancel it before it fires.
+*
+* @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.
+*/
+function useDestroy(instance, setup) {
+	const pendingRef = useRef(null);
+	useEffect(() => {
+		if (pendingRef.current !== null) {
+			clearTimeout(pendingRef.current);
+			pendingRef.current = null;
+		} else setup?.();
+		return () => {
+			pendingRef.current = setTimeout(() => instance.destroy(), 0);
+		};
+	}, [instance, setup]);
+}
+
+//#endregion
+export { useDestroy };
+//# sourceMappingURL=use-destroy.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,13 @@
+'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

@@ -0,0 +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"}

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

@@ -0,0 +1,20 @@
+'use client';
+
+import { useRef } from "react";
+
+//#region src/utils/use-latest-ref.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.
+*/
+function useLatestRef(value) {
+	const ref = useRef(value);
+	ref.current = value;
+	return ref;
+}
+
+//#endregion
+export { useLatestRef };
+//# sourceMappingURL=use-latest-ref.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,45 @@
+import { RenderProp } from "./types.js";
+import { StateAttrMap } from "@videojs/core/dom";
+import { CSSProperties, ReactElement, Ref } from "react";
+
+//#region src/utils/use-render.d.ts
+type IntrinsicTagName = keyof React.JSX.IntrinsicElements;
+interface UseRenderComponentProps<State> {
+  className?: string | ((state: State) => string | undefined) | undefined;
+  style?: CSSProperties | ((state: State) => CSSProperties | undefined) | undefined;
+  render?: RenderProp<State> | undefined;
+}
+interface UseRenderParameters<State, RenderedElementType extends Element> {
+  state: State;
+  ref?: Ref<RenderedElementType> | Ref<RenderedElementType>[] | undefined;
+  props?: object | object[] | undefined;
+  stateAttrMap?: StateAttrMap<State> | undefined;
+}
+/**
+ * Render a UI component element.
+ *
+ * Handles:
+ * - Default tag rendering
+ * - Render prop (element or function)
+ * - Props merging (event handlers chained, className concatenated, style merged)
+ * - Ref composition
+ * - className/style as functions of state
+ *
+ * @public
+ * @example
+ * ```tsx
+ * return renderElement('button', componentProps, {
+ *   state,
+ *   ref: [forwardedRef, buttonRef],
+ *   props: [{ type: 'button' }, elementProps, getButtonProps],
+ * });
+ * ```
+ */
+declare function renderElement<State extends object, RenderedElementType extends Element, TagName extends IntrinsicTagName>(element: TagName, componentProps: UseRenderComponentProps<State>, params: UseRenderParameters<State, RenderedElementType>): ReactElement | null;
+declare namespace renderElement {
+  type ComponentProps<State> = UseRenderComponentProps<State>;
+  type Parameters<State, RenderedElementType extends Element> = UseRenderParameters<State, RenderedElementType>;
+}
+//#endregion
+export { renderElement };
+//# sourceMappingURL=use-render.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,71 @@
+'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
+function resolveClassName(className, state) {
+	return isFunction(className) ? className(state) : className;
+}
+function resolveStyle(style, state) {
+	return isFunction(style) ? style(state) : style;
+}
+function getElementRef(element) {
+	const elementAny = element;
+	return elementAny.ref ?? elementAny.props?.ref;
+}
+/**
+* Render a UI component element.
+*
+* Handles:
+* - Default tag rendering
+* - Render prop (element or function)
+* - Props merging (event handlers chained, className concatenated, style merged)
+* - Ref composition
+* - className/style as functions of state
+*
+* @public
+* @example
+* ```tsx
+* return renderElement('button', componentProps, {
+*   state,
+*   ref: [forwardedRef, buttonRef],
+*   props: [{ type: 'button' }, elementProps, getButtonProps],
+* });
+* ```
+*/
+function renderElement(element, componentProps, params) {
+	const { className: classNameProp, style: styleProp, render } = componentProps;
+	const { state, ref, props, stateAttrMap } = params;
+	const className = resolveClassName(classNameProp, state);
+	const style = resolveStyle(styleProp, state);
+	const mergedProps = mergeProps(getStateDataAttrs(state, stateAttrMap), ...Array.isArray(props) ? props : props ? [props] : []);
+	if (className !== void 0) mergedProps.className = mergedProps.className ? `${mergedProps.className} ${className}` : className;
+	if (style !== void 0) mergedProps.style = mergedProps.style ? {
+		...mergedProps.style,
+		...style
+	} : style;
+	if (isFunction(render)) {
+		const mergedRef = composeRefs(ref, mergedProps.ref);
+		return render({
+			...mergedProps,
+			ref: mergedRef
+		}, state);
+	}
+	if (isValidElement(render)) {
+		const elementRef = getElementRef(render);
+		const mergedRef = composeRefs(ref, mergedProps.ref, elementRef);
+		const elementProps = mergeProps(mergedProps, render.props);
+		elementProps.ref = mergedRef;
+		return cloneElement(render, elementProps);
+	}
+	mergedProps.ref = composeRefs(ref, mergedProps.ref);
+	return createElement(element, mergedProps);
+}
+
+//#endregion
+export { renderElement };
+//# sourceMappingURL=use-render.js.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,22 @@
+'use client';
+
+import { useId } from "react";
+
+//#region src/utils/use-safe-id.ts
+const UNSAFE_CHARS = /[^a-zA-Z0-9_-]/g;
+/**
+* Generate a CSS-safe identifier from React's `useId()`.
+*
+* `useId()` returns values like `:r0:` which contain colons — invalid
+* in CSS `<dashed-ident>` tokens (used by `anchor-name` / `position-anchor`).
+* This hook strips non-alphanumeric/underscore/hyphen characters and
+* optionally prepends a prefix.
+*/
+function useSafeId(prefix) {
+	const raw = useId().replace(UNSAFE_CHARS, "");
+	return prefix ? `${prefix}${raw}` : raw;
+}
+
+//#endregion
+export { useSafeId };
+//# sourceMappingURL=use-safe-id.js.map

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

@@ -0,0 +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"}

package/package.json

@@ -1,80 +1,104 @@
 {
   "name": "@videojs/react",
   "type": "module",
-  "version": "0.1.0-preview.9",
+  "version": "10.0.0-alpha.11",
   "description": "React library for building media players",
   "license": "Apache-2.0",
-  "keywords": [
-    "media",
-    "player",
-    "react",
-    "components",
-    "hooks",
-    "videojs"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/videojs/v10",
+    "directory": "packages/react"
+  },
+  "main": "dist/default/index.js",
+  "module": "dist/default/index.js",
+  "types": "dist/dev/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "default": "./dist/index.js"
+      "types": "./dist/dev/index.d.ts",
+      "development": "./dist/dev/index.js",
+      "default": "./dist/default/index.js"
+    },
+    "./media/*": {
+      "types": "./dist/dev/media/*/index.d.ts",
+      "development": "./dist/dev/media/*/index.js",
+      "default": "./dist/default/media/*/index.js"
+    },
+    "./video": {
+      "types": "./dist/dev/presets/video/index.d.ts",
+      "development": "./dist/dev/presets/video/index.js",
+      "default": "./dist/default/presets/video/index.js"
     },
-    "./store": {
-      "types": "./dist/store.d.ts",
-      "default": "./dist/store.js"
+    "./video/*.css": "./dist/default/presets/video/*.css",
+    "./video/*": {
+      "types": "./dist/dev/presets/video/*.d.ts",
+      "development": "./dist/dev/presets/video/*.js",
+      "default": "./dist/default/presets/video/*.js"
     },
-    "./icons": {
-      "types": "./dist/icons.d.ts",
-      "default": "./dist/icons.js"
+    "./audio": {
+      "types": "./dist/dev/presets/audio/index.d.ts",
+      "development": "./dist/dev/presets/audio/index.js",
+      "default": "./dist/default/presets/audio/index.js"
     },
-    "./skins/frosted": {
-      "types": "./dist/skins/frosted.d.ts",
-      "default": "./dist/skins/frosted.js"
+    "./audio/*.css": "./dist/default/presets/audio/*.css",
+    "./audio/*": {
+      "types": "./dist/dev/presets/audio/*.d.ts",
+      "development": "./dist/dev/presets/audio/*.js",
+      "default": "./dist/default/presets/audio/*.js"
     },
-    "./skins/minimal": {
-      "types": "./dist/skins/minimal.d.ts",
-      "default": "./dist/skins/minimal.js"
+    "./background": {
+      "types": "./dist/dev/presets/background/index.d.ts",
+      "development": "./dist/dev/presets/background/index.js",
+      "default": "./dist/default/presets/background/index.js"
     },
-    "./skins/frosted.css": "./dist/skins/frosted.css",
-    "./skins/minimal.css": "./dist/skins/minimal.css"
+    "./background/*.css": "./dist/default/presets/background/*.css",
+    "./background/*": {
+      "types": "./dist/dev/presets/background/*.d.ts",
+      "development": "./dist/dev/presets/background/*.js",
+      "default": "./dist/default/presets/background/*.js"
+    }
   },
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
   "peerDependencies": {
     "react": ">=16.8.0"
   },
   "dependencies": {
-    "@videojs/icons": "0.1.0-preview.9",
-    "@videojs/core": "0.1.0-preview.9",
-    "@videojs/utils": "0.1.0-preview.9"
+    "@videojs/spf": "10.0.0-alpha.11",
+    "@videojs/store": "10.0.0-alpha.11",
+    "@videojs/core": "10.0.0-alpha.11",
+    "@videojs/utils": "10.0.0-alpha.11"
   },
   "devDependencies": {
-    "@svgr/babel-plugin-add-jsx-attribute": "^8.0.0",
-    "@svgr/cli": "^8.1.0",
-    "@svgr/core": "^8.1.0",
-    "@svgr/plugin-jsx": "^8.1.0",
-    "@tailwindcss/cli": "^4.1.0",
-    "@types/postcss-prefix-selector": "^1.16.3",
-    "@types/react": "^18.0.0",
-    "postcss": "^8.4.49",
-    "postcss-prefix-selector": "^1.16.1",
-    "react": "^18.0.0",
-    "tailwindcss": "^4.1.13",
-    "tsdown": "^0.15.9",
-    "typescript": "^5.9.2"
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.2.7",
+    "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/icons": "10.0.0-alpha.11",
+    "@videojs/skins": "10.0.0-alpha.4"
   },
   "publishConfig": {
     "access": "public"
   },
+  "keywords": [
+    "media",
+    "player",
+    "react",
+    "components",
+    "hooks",
+    "videojs"
+  ],
   "scripts": {
     "build": "tsdown",
-    "build:watch": "tsdown --watch ./src --ignore-watch ./src/icons/generated-icons --silent",
-    "dev": "pnpm run build:watch",
-    "format:icons": "echo noop. Need to replace based on eslint vs. prettier decisions!",
-    "generate:icons": "svgr --config-file svgr.config.js --out-dir src/icons/generated-icons ../icons/assets && pnpm format:icons",
-    "test": "echo \"No tests yet\"",
-    "clean": "rm -rf dist src/icons/generated-icons"
+    "build:watch": "tsdown --watch ./src --no-clean",
+    "dev": "pnpm build:watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist types"
   }
 }

package/dist/FrostedSkin-t8edr5LV.d.ts

@@ -1,13 +0,0 @@
-import { PropsWithChildren } from "react";
-
-//#region src/skins/frosted/FrostedSkin.d.ts
-type SkinProps = PropsWithChildren<{
-  className?: string;
-}>;
-declare function FrostedSkin({
-  children,
-  className
-}: SkinProps): JSX.Element;
-//#endregion
-export { FrostedSkin as t };
-//# sourceMappingURL=FrostedSkin-t8edr5LV.d.ts.map

package/dist/FrostedSkin-t8edr5LV.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FrostedSkin-t8edr5LV.d.ts","names":[],"sources":["../src/skins/frosted/FrostedSkin.tsx"],"sourcesContent":[],"mappings":";;;KAwBK,SAAA,GAAY;;AAxBsB,CAAA,CAAA;AA4Bf,iBAAA,WAAA,CAAA;EAAA,QAAA;EAAA;AAAA,CAAA,EAA0C,SAA1C,CAAA,EAAsD,GAAA,CAAI,OAA1D"}

package/dist/MinimalSkin-DzHkJgW-.d.ts

@@ -1,13 +0,0 @@
-import { PropsWithChildren } from "react";
-
-//#region src/skins/minimal/MinimalSkin.d.ts
-type SkinProps = PropsWithChildren<{
-  className?: string;
-}>;
-declare function MinimalSkin({
-  children,
-  className
-}: SkinProps): JSX.Element;
-//#endregion
-export { MinimalSkin as t };
-//# sourceMappingURL=MinimalSkin-DzHkJgW-.d.ts.map

package/dist/MinimalSkin-DzHkJgW-.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MinimalSkin-DzHkJgW-.d.ts","names":[],"sources":["../src/skins/minimal/MinimalSkin.tsx"],"sourcesContent":[],"mappings":";;;KAwBK,SAAA,GAAY;;AAxBsB,CAAA,CAAA;AA4Bf,iBAAA,WAAA,CAAA;EAAA,QAAA;EAAA;AAAA,CAAA,EAA0C,SAA1C,CAAA,EAAsD,GAAA,CAAI,OAA1D"}