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

package/dist/dev/ui/time/time-separator.js

@@ -0,0 +1,34 @@
+'use client';
+
+import { renderElement } from "../../utils/use-render.js";
+import { forwardRef } from "react";
+
+//#region src/ui/time/time-separator.tsx
+/**
+* Divider between time values. Hidden from screen readers.
+*
+* @example
+* ```tsx
+* <Time.Separator />
+* <Time.Separator> of </Time.Separator>
+* ```
+*/
+const Separator = forwardRef(function Separator(componentProps, forwardedRef) {
+	const { render, className, style, children = "/", ...elementProps } = componentProps;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state: {},
+		ref: [forwardedRef],
+		props: [{
+			"aria-hidden": "true",
+			children
+		}, elementProps]
+	});
+});
+
+//#endregion
+export { Separator };
+//# sourceMappingURL=time-separator.js.map

package/dist/dev/ui/time/time-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-separator.js","names":[],"sources":["../../../../src/ui/time/time-separator.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Separator (no dynamic state)\ntype SeparatorState = Record<string, never>;\n\nexport interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {\n  /** Separator content. Defaults to \"/\". */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Divider between time values. Hidden from screen readers.\n *\n * @example\n * ```tsx\n * <Time.Separator />\n * <Time.Separator> of </Time.Separator>\n * ```\n */\nexport const Separator = forwardRef(function Separator(\n  componentProps: SeparatorProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children = '/', ...elementProps } = componentProps;\n\n  const state: SeparatorState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ 'aria-hidden': 'true', children }, elementProps],\n    }\n  );\n});\n\nexport namespace Separator {\n  export type Props = SeparatorProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAyBA,MAAa,YAAY,WAAW,SAAS,UAC3C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,WAAW,KAAK,GAAG,iBAAiB;AAItE,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAN0B,EAAE;EAO5B,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC;GAAE,eAAe;GAAQ;GAAU,EAAE,aAAa;EAC3D,CACF;EACD"}

package/dist/dev/ui/time/time-value.d.ts

@@ -0,0 +1,24 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { TimeCore } from "@videojs/core";
+
+//#region src/ui/time/time-value.d.ts
+interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}
+/**
+ * Displays a formatted time value (current, duration, or remaining).
+ *
+ * @example
+ * ```tsx
+ * <Time.Value />
+ * <Time.Value type="duration" />
+ * <Time.Value type="remaining" negativeSign="−" />
+ * ```
+ */
+declare const Value: react.ForwardRefExoticComponent<Omit<ValueProps, "ref"> & react.RefAttributes<HTMLTimeElement>>;
+declare namespace Value {
+  type Props = ValueProps;
+  type State = TimeCore.State;
+}
+//#endregion
+export { Value, ValueProps };
+//# sourceMappingURL=time-value.d.ts.map

package/dist/dev/ui/time/time-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-value.d.ts","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"mappings":";;;;;UAWiB,UAAA,SAAmB,IAAA,CAAK,gBAAA,SAAyB,QAAA,CAAS,KAAA,gBAAqB,QAAA,CAAS,KAAA;;AAAzG;;;;;;;;;cAYa,KAAA,EAAK,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,UAAA,WAAA,KAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBA8CD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;EAAA,KACR,KAAA,GAAQ,QAAA,CAAS,KAAA;AAAA"}

package/dist/dev/ui/time/time-value.js

@@ -0,0 +1,57 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { logMissingFeature, selectTime } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { TimeCore, TimeDataAttrs } from "@videojs/core";
+
+//#region src/ui/time/time-value.tsx
+/**
+* Displays a formatted time value (current, duration, or remaining).
+*
+* @example
+* ```tsx
+* <Time.Value />
+* <Time.Value type="duration" />
+* <Time.Value type="remaining" negativeSign="−" />
+* ```
+*/
+const Value = forwardRef(function Value(componentProps, forwardedRef) {
+	const { render, className, style, type, negativeSign, label, ...elementProps } = componentProps;
+	const time = usePlayer(selectTime);
+	const [core] = useState(() => new TimeCore());
+	core.setProps({
+		type,
+		negativeSign,
+		label
+	});
+	if (!time) {
+		logMissingFeature("Time.Value", "time");
+		return null;
+	}
+	const state = core.getState(time);
+	const content = state.negative ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		children: negativeSign ?? TimeCore.defaultProps.negativeSign
+	}), state.text] }) : state.text;
+	return renderElement("time", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: TimeDataAttrs,
+		ref: [forwardedRef],
+		props: [{
+			dateTime: state.datetime,
+			children: content,
+			...core.getAttrs(state)
+		}, elementProps]
+	});
+});
+
+//#endregion
+export { Value };
+//# sourceMappingURL=time-value.js.map

package/dist/dev/ui/time/time-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["'use client';\n\nimport { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}\n\n/**\n * Displays a formatted time value (current, duration, or remaining).\n *\n * @example\n * ```tsx\n * <Time.Value />\n * <Time.Value type=\"duration\" />\n * <Time.Value type=\"remaining\" negativeSign=\"−\" />\n * ```\n */\nexport const Value = forwardRef(function Value(\n  componentProps: ValueProps,\n  forwardedRef: ForwardedRef<HTMLTimeElement>\n) {\n  const { render, className, style, type, negativeSign, label, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n\n  const [core] = useState(() => new TimeCore());\n  core.setProps({ type, negativeSign, label });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('Time.Value', 'time');\n    return null;\n  }\n\n  const state = core.getState(time);\n\n  const content = state.negative ? (\n    <>\n      <span aria-hidden=\"true\">{negativeSign ?? TimeCore.defaultProps.negativeSign}</span>\n      {state.text}\n    </>\n  ) : (\n    state.text\n  );\n\n  return renderElement(\n    'time',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TimeDataAttrs,\n      ref: [forwardedRef],\n      props: [\n        {\n          dateTime: state.datetime,\n          children: content,\n          ...core.getAttrs(state),\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace Value {\n  export type Props = ValueProps;\n  export type State = TimeCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuBA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM,cAAc,OAAO,GAAG,iBAAiB;CAEjF,MAAM,OAAO,UAAU,WAAW;CAElC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;AAC7C,MAAK,SAAS;EAAE;EAAM;EAAc;EAAO,CAAC;AAE5C,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;CAGT,MAAM,QAAQ,KAAK,SAAS,KAAK;CAEjC,MAAM,UAAU,MAAM,WACpB,4CACE,oBAAC;EAAK,eAAY;YAAQ,gBAAgB,SAAS,aAAa;GAAoB,EACnF,MAAM,QACN,GAEH,MAAM;AAGR,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CACL;GACE,UAAU,MAAM;GAChB,UAAU;GACV,GAAG,KAAK,SAAS,MAAM;GACxB,EACD,aACD;EACF,CACF;EACD"}

package/dist/dev/utils/attach-media-element.js

@@ -0,0 +1,12 @@
+//#region src/utils/attach-media-element.ts
+function attachMediaElement(media) {
+	return (element) => {
+		if (element) media.attach(element);
+		else media.detach();
+		return () => media.detach();
+	};
+}
+
+//#endregion
+export { attachMediaElement };
+//# sourceMappingURL=attach-media-element.js.map

package/dist/dev/utils/attach-media-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attach-media-element.js","names":[],"sources":["../../../src/utils/attach-media-element.ts"],"sourcesContent":["interface Attachable {\n  attach(target: EventTarget): void;\n  detach(): void;\n}\n\nexport function attachMediaElement<T extends HTMLVideoElement>(media: Attachable): (element: T | null) => void {\n  return (element: T | null) => {\n    if (element) {\n      media.attach(element);\n    } else {\n      media.detach();\n    }\n    // React 19+ accepts a cleanup function as the return value\n    return () => media.detach();\n  };\n}\n"],"mappings":";AAKA,SAAgB,mBAA+C,OAAgD;AAC7G,SAAQ,YAAsB;AAC5B,MAAI,QACF,OAAM,OAAO,QAAQ;MAErB,OAAM,QAAQ;AAGhB,eAAa,MAAM,QAAQ"}

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

@@ -0,0 +1,11 @@
+//#region src/utils/media-props.ts
+function mediaProps(media, props) {
+	const { src, ...remainingProps } = props;
+	if (props.preload && media.preload !== props.preload) media.preload = props.preload;
+	if (media.src !== src) media.src = src ?? "";
+	return remainingProps;
+}
+
+//#endregion
+export { mediaProps };
+//# sourceMappingURL=media-props.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"media-props.js","names":[],"sources":["../../../src/utils/media-props.ts"],"sourcesContent":["import type { MediaApi } from '@videojs/core/dom';\nimport type { VideoHTMLAttributes } from 'react';\n\ninterface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}\n\nexport function mediaProps(media: MediaApi, props: VideoProps) {\n  const { src, ...remainingProps } = props;\n\n  // Preload can still be passed as a prop to the native media element\n  if (props.preload && media.preload !== props.preload) {\n    media.preload = props.preload as '' | 'none' | 'metadata' | 'auto';\n  }\n\n  if (media.src !== src) {\n    media.src = src ?? '';\n  }\n\n  // The remaining props are passed to the native media element\n  return remainingProps;\n}\n"],"mappings":";AAKA,SAAgB,WAAW,OAAiB,OAAmB;CAC7D,MAAM,EAAE,KAAK,GAAG,mBAAmB;AAGnC,KAAI,MAAM,WAAW,MAAM,YAAY,MAAM,QAC3C,OAAM,UAAU,MAAM;AAGxB,KAAI,MAAM,QAAQ,IAChB,OAAM,MAAM,OAAO;AAIrB,QAAO"}

package/dist/dev/utils/merge-props.d.ts

@@ -0,0 +1,26 @@
+import { ComponentPropsWithRef, ElementType } from "react";
+
+//#region src/utils/merge-props.d.ts
+type Props<T extends ElementType = ElementType> = ComponentPropsWithRef<T>;
+/**
+ * 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' }
+ * ```
+ */
+declare function mergeProps<T extends ElementType>(...propSets: (Props<T> | undefined)[]): Props<T>;
+//#endregion
+export { mergeProps };
+//# sourceMappingURL=merge-props.d.ts.map

package/dist/dev/utils/merge-props.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"merge-props.d.ts","names":[],"sources":["../../../src/utils/merge-props.ts"],"mappings":";;;KAIK,KAAA,WAAgB,WAAA,GAAc,WAAA,IAAe,qBAAA,CAAsB,CAAA;;AAFuB;;;;;;;;;;;;;;;;AAuG/F;iBAAgB,UAAA,WAAqB,WAAA,CAAA,CAAA,GAAgB,QAAA,GAAW,KAAA,CAAM,CAAA,mBAAoB,KAAA,CAAM,CAAA"}

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-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"}