@videojs/react 10.0.0-beta.11 → 10.0.0-beta.12

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

@@ -1,307 +1,8 @@
 import { MediaApi } from "@videojs/core/dom";
-import * as react from "react";
-import { VideoHTMLAttributes } from "react";
 
 //#region src/utils/media-props.d.ts
-interface VideoProps extends VideoHTMLAttributes<HTMLVideoElement> {}
-declare function mediaProps(media: MediaApi, props: VideoProps): {
-  height?: number | string | undefined;
-  playsInline?: boolean | undefined;
-  poster?: string | undefined;
-  width?: number | string | undefined;
-  disablePictureInPicture?: boolean | undefined;
-  disableRemotePlayback?: boolean | undefined;
-  onResize?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onResizeCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  autoPlay?: boolean | undefined;
-  controls?: boolean | undefined;
-  controlsList?: string | undefined;
-  crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
-  loop?: boolean | undefined;
-  mediaGroup?: string | undefined;
-  muted?: boolean | undefined;
-  preload?: string | undefined;
-  defaultChecked?: boolean | undefined;
-  defaultValue?: string | number | readonly string[] | undefined;
-  suppressContentEditableWarning?: boolean | undefined;
-  suppressHydrationWarning?: boolean | undefined;
-  accessKey?: string | undefined;
-  autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
-  autoFocus?: boolean | undefined;
-  className?: string | undefined;
-  contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
-  contextMenu?: string | undefined;
-  dir?: string | undefined;
-  draggable?: (boolean | "true" | "false") | undefined;
-  enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
-  hidden?: boolean | undefined;
-  id?: string | undefined;
-  lang?: string | undefined;
-  nonce?: string | undefined;
-  slot?: string | undefined;
-  spellCheck?: (boolean | "true" | "false") | undefined;
-  style?: react.CSSProperties | undefined;
-  tabIndex?: number | undefined;
-  title?: string | undefined;
-  translate?: "yes" | "no" | undefined;
-  radioGroup?: string | undefined;
-  role?: react.AriaRole | undefined;
-  about?: string | undefined;
-  content?: string | undefined;
-  datatype?: string | undefined;
-  inlist?: any;
-  prefix?: string | undefined;
-  property?: string | undefined;
-  rel?: string | undefined;
-  resource?: string | undefined;
-  rev?: string | undefined;
-  typeof?: string | undefined;
-  vocab?: string | undefined;
-  autoCorrect?: string | undefined;
-  autoSave?: string | undefined;
-  color?: string | undefined;
-  itemProp?: string | undefined;
-  itemScope?: boolean | undefined;
-  itemType?: string | undefined;
-  itemID?: string | undefined;
-  itemRef?: string | undefined;
-  results?: number | undefined;
-  security?: string | undefined;
-  unselectable?: "on" | "off" | undefined;
-  popover?: "" | "auto" | "manual" | "hint" | undefined;
-  popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
-  popoverTarget?: string | undefined;
-  inert?: boolean | undefined;
-  inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
-  is?: string | undefined;
-  exportparts?: string | undefined;
-  part?: string | undefined;
-  "aria-activedescendant"?: string | undefined;
-  "aria-atomic"?: (boolean | "true" | "false") | undefined;
-  "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
-  "aria-braillelabel"?: string | undefined;
-  "aria-brailleroledescription"?: string | undefined;
-  "aria-busy"?: (boolean | "true" | "false") | undefined;
-  "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
-  "aria-colcount"?: number | undefined;
-  "aria-colindex"?: number | undefined;
-  "aria-colindextext"?: string | undefined;
-  "aria-colspan"?: number | undefined;
-  "aria-controls"?: string | undefined;
-  "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
-  "aria-describedby"?: string | undefined;
-  "aria-description"?: string | undefined;
-  "aria-details"?: string | undefined;
-  "aria-disabled"?: (boolean | "true" | "false") | undefined;
-  "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
-  "aria-errormessage"?: string | undefined;
-  "aria-expanded"?: (boolean | "true" | "false") | undefined;
-  "aria-flowto"?: string | undefined;
-  "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-  "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
-  "aria-hidden"?: (boolean | "true" | "false") | undefined;
-  "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
-  "aria-keyshortcuts"?: string | undefined;
-  "aria-label"?: string | undefined;
-  "aria-labelledby"?: string | undefined;
-  "aria-level"?: number | undefined;
-  "aria-live"?: "off" | "assertive" | "polite" | undefined;
-  "aria-modal"?: (boolean | "true" | "false") | undefined;
-  "aria-multiline"?: (boolean | "true" | "false") | undefined;
-  "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
-  "aria-orientation"?: "horizontal" | "vertical" | undefined;
-  "aria-owns"?: string | undefined;
-  "aria-placeholder"?: string | undefined;
-  "aria-posinset"?: number | undefined;
-  "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
-  "aria-readonly"?: (boolean | "true" | "false") | undefined;
-  "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
-  "aria-required"?: (boolean | "true" | "false") | undefined;
-  "aria-roledescription"?: string | undefined;
-  "aria-rowcount"?: number | undefined;
-  "aria-rowindex"?: number | undefined;
-  "aria-rowindextext"?: string | undefined;
-  "aria-rowspan"?: number | undefined;
-  "aria-selected"?: (boolean | "true" | "false") | undefined;
-  "aria-setsize"?: number | undefined;
-  "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
-  "aria-valuemax"?: number | undefined;
-  "aria-valuemin"?: number | undefined;
-  "aria-valuenow"?: number | undefined;
-  "aria-valuetext"?: string | undefined;
-  children?: react.ReactNode | undefined;
-  dangerouslySetInnerHTML?: {
-    __html: string | TrustedHTML;
-  } | undefined;
-  onCopy?: react.ClipboardEventHandler<HTMLVideoElement> | undefined;
-  onCopyCapture?: react.ClipboardEventHandler<HTMLVideoElement> | undefined;
-  onCut?: react.ClipboardEventHandler<HTMLVideoElement> | undefined;
-  onCutCapture?: react.ClipboardEventHandler<HTMLVideoElement> | undefined;
-  onPaste?: react.ClipboardEventHandler<HTMLVideoElement> | undefined;
-  onPasteCapture?: react.ClipboardEventHandler<HTMLVideoElement> | undefined;
-  onCompositionEnd?: react.CompositionEventHandler<HTMLVideoElement> | undefined;
-  onCompositionEndCapture?: react.CompositionEventHandler<HTMLVideoElement> | undefined;
-  onCompositionStart?: react.CompositionEventHandler<HTMLVideoElement> | undefined;
-  onCompositionStartCapture?: react.CompositionEventHandler<HTMLVideoElement> | undefined;
-  onCompositionUpdate?: react.CompositionEventHandler<HTMLVideoElement> | undefined;
-  onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLVideoElement> | undefined;
-  onFocus?: react.FocusEventHandler<HTMLVideoElement> | undefined;
-  onFocusCapture?: react.FocusEventHandler<HTMLVideoElement> | undefined;
-  onBlur?: react.FocusEventHandler<HTMLVideoElement> | undefined;
-  onBlurCapture?: react.FocusEventHandler<HTMLVideoElement> | undefined;
-  onChange?: react.ChangeEventHandler<HTMLVideoElement, Element> | undefined;
-  onChangeCapture?: react.ChangeEventHandler<HTMLVideoElement, Element> | undefined;
-  onBeforeInput?: react.InputEventHandler<HTMLVideoElement> | undefined;
-  onBeforeInputCapture?: react.InputEventHandler<HTMLVideoElement> | undefined;
-  onInput?: react.InputEventHandler<HTMLVideoElement> | undefined;
-  onInputCapture?: react.InputEventHandler<HTMLVideoElement> | undefined;
-  onReset?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onResetCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onSubmit?: react.SubmitEventHandler<HTMLVideoElement> | undefined;
-  onSubmitCapture?: react.SubmitEventHandler<HTMLVideoElement> | undefined;
-  onInvalid?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onInvalidCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onLoad?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onLoadCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onError?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onErrorCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onKeyDown?: react.KeyboardEventHandler<HTMLVideoElement> | undefined;
-  onKeyDownCapture?: react.KeyboardEventHandler<HTMLVideoElement> | undefined;
-  onKeyPress?: react.KeyboardEventHandler<HTMLVideoElement> | undefined;
-  onKeyPressCapture?: react.KeyboardEventHandler<HTMLVideoElement> | undefined;
-  onKeyUp?: react.KeyboardEventHandler<HTMLVideoElement> | undefined;
-  onKeyUpCapture?: react.KeyboardEventHandler<HTMLVideoElement> | undefined;
-  onAbort?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onAbortCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onCanPlay?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onCanPlayCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onCanPlayThrough?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onCanPlayThroughCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onDurationChange?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onDurationChangeCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onEmptied?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onEmptiedCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onEncrypted?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onEncryptedCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onEnded?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onEndedCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onLoadedData?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onLoadedDataCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onLoadedMetadata?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onLoadedMetadataCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onLoadStart?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onLoadStartCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onPause?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onPauseCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onPlay?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onPlayCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onPlaying?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onPlayingCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onProgress?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onProgressCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onRateChange?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onRateChangeCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onSeeked?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onSeekedCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onSeeking?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onSeekingCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onStalled?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onStalledCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onSuspend?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onSuspendCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onTimeUpdate?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onTimeUpdateCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onVolumeChange?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onVolumeChangeCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onWaiting?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onWaitingCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onAuxClick?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onAuxClickCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onClick?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onClickCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onContextMenu?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onContextMenuCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onDoubleClick?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onDoubleClickCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onDrag?: react.DragEventHandler<HTMLVideoElement> | undefined;
-  onDragCapture?: react.DragEventHandler<HTMLVideoElement> | undefined;
-  onDragEnd?: react.DragEventHandler<HTMLVideoElement> | undefined;
-  onDragEndCapture?: react.DragEventHandler<HTMLVideoElement> | undefined;
-  onDragEnter?: react.DragEventHandler<HTMLVideoElement> | undefined;
-  onDragEnterCapture?: react.DragEventHandler<HTMLVideoElement> | undefined;
-  onDragExit?: react.DragEventHandler<HTMLVideoElement> | undefined;
-  onDragExitCapture?: react.DragEventHandler<HTMLVideoElement> | undefined;
-  onDragLeave?: react.DragEventHandler<HTMLVideoElement> | undefined;
-  onDragLeaveCapture?: react.DragEventHandler<HTMLVideoElement> | undefined;
-  onDragOver?: react.DragEventHandler<HTMLVideoElement> | undefined;
-  onDragOverCapture?: react.DragEventHandler<HTMLVideoElement> | undefined;
-  onDragStart?: react.DragEventHandler<HTMLVideoElement> | undefined;
-  onDragStartCapture?: react.DragEventHandler<HTMLVideoElement> | undefined;
-  onDrop?: react.DragEventHandler<HTMLVideoElement> | undefined;
-  onDropCapture?: react.DragEventHandler<HTMLVideoElement> | undefined;
-  onMouseDown?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onMouseDownCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onMouseEnter?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onMouseLeave?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onMouseMove?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onMouseMoveCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onMouseOut?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onMouseOutCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onMouseOver?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onMouseOverCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onMouseUp?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onMouseUpCapture?: react.MouseEventHandler<HTMLVideoElement> | undefined;
-  onSelect?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onSelectCapture?: react.ReactEventHandler<HTMLVideoElement> | undefined;
-  onTouchCancel?: react.TouchEventHandler<HTMLVideoElement> | undefined;
-  onTouchCancelCapture?: react.TouchEventHandler<HTMLVideoElement> | undefined;
-  onTouchEnd?: react.TouchEventHandler<HTMLVideoElement> | undefined;
-  onTouchEndCapture?: react.TouchEventHandler<HTMLVideoElement> | undefined;
-  onTouchMove?: react.TouchEventHandler<HTMLVideoElement> | undefined;
-  onTouchMoveCapture?: react.TouchEventHandler<HTMLVideoElement> | undefined;
-  onTouchStart?: react.TouchEventHandler<HTMLVideoElement> | undefined;
-  onTouchStartCapture?: react.TouchEventHandler<HTMLVideoElement> | undefined;
-  onPointerDown?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onPointerDownCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onPointerMove?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onPointerMoveCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onPointerUp?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onPointerUpCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onPointerCancel?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onPointerCancelCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onPointerEnter?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onPointerLeave?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onPointerOver?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onPointerOverCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onPointerOut?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onPointerOutCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onGotPointerCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onLostPointerCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLVideoElement> | undefined;
-  onScroll?: react.UIEventHandler<HTMLVideoElement> | undefined;
-  onScrollCapture?: react.UIEventHandler<HTMLVideoElement> | undefined;
-  onScrollEnd?: react.UIEventHandler<HTMLVideoElement> | undefined;
-  onScrollEndCapture?: react.UIEventHandler<HTMLVideoElement> | undefined;
-  onWheel?: react.WheelEventHandler<HTMLVideoElement> | undefined;
-  onWheelCapture?: react.WheelEventHandler<HTMLVideoElement> | undefined;
-  onAnimationStart?: react.AnimationEventHandler<HTMLVideoElement> | undefined;
-  onAnimationStartCapture?: react.AnimationEventHandler<HTMLVideoElement> | undefined;
-  onAnimationEnd?: react.AnimationEventHandler<HTMLVideoElement> | undefined;
-  onAnimationEndCapture?: react.AnimationEventHandler<HTMLVideoElement> | undefined;
-  onAnimationIteration?: react.AnimationEventHandler<HTMLVideoElement> | undefined;
-  onAnimationIterationCapture?: react.AnimationEventHandler<HTMLVideoElement> | undefined;
-  onToggle?: react.ToggleEventHandler<HTMLVideoElement> | undefined;
-  onBeforeToggle?: react.ToggleEventHandler<HTMLVideoElement> | undefined;
-  onTransitionCancel?: react.TransitionEventHandler<HTMLVideoElement> | undefined;
-  onTransitionCancelCapture?: react.TransitionEventHandler<HTMLVideoElement> | undefined;
-  onTransitionEnd?: react.TransitionEventHandler<HTMLVideoElement> | undefined;
-  onTransitionEndCapture?: react.TransitionEventHandler<HTMLVideoElement> | undefined;
-  onTransitionRun?: react.TransitionEventHandler<HTMLVideoElement> | undefined;
-  onTransitionRunCapture?: react.TransitionEventHandler<HTMLVideoElement> | undefined;
-  onTransitionStart?: react.TransitionEventHandler<HTMLVideoElement> | undefined;
-  onTransitionStartCapture?: react.TransitionEventHandler<HTMLVideoElement> | undefined;
-};
+type AnyClass = abstract new (...args: any[]) => any;
+declare function mediaProps(media: MediaApi, DelegateClass: AnyClass, props: Record<string, any>): Record<string, any>;
 //#endregion
 export { mediaProps };
 //# sourceMappingURL=media-props.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"media-props.d.ts","names":[],"sources":["../../../src/utils/media-props.ts"],"mappings":";;;;;UAGU,UAAA,SAAmB,mBAAA,CAAoB,gBAAA;AAAA,iBAEjC,UAAA,CAAW,KAAA,EAAO,QAAA,EAAU,KAAA,EAAO,UAAA"}
+{"version":3,"file":"media-props.d.ts","names":[],"sources":["../../../src/utils/media-props.ts"],"mappings":";;;KAEK,QAAA,oBAA4B,IAAA;AAAA,iBAajB,UAAA,CAAW,KAAA,EAAO,QAAA,EAAU,aAAA,EAAe,QAAA,EAAU,KAAA,EAAO,MAAA,gBAAmB,MAAA"}

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

@@ -1,11 +1,19 @@
 //#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;
+function getSettableProps(DelegateClass) {
+	const props = /* @__PURE__ */ new Set();
+	for (let proto = DelegateClass.prototype; proto && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) for (const key of Object.getOwnPropertyNames(proto)) if (Object.getOwnPropertyDescriptor(proto, key)?.set) props.add(key);
+	return props;
+}
+function mediaProps(media, DelegateClass, props) {
+	const delegateKeys = getSettableProps(DelegateClass);
+	const rest = {};
+	for (const key of Object.keys(props)) if (delegateKeys.has(key)) {
+		const value = props[key];
+		if (media[key] !== value) media[key] = value;
+	} else rest[key] = props[key];
+	return rest;
 }
-
 //#endregion
 export { mediaProps };
+
 //# sourceMappingURL=media-props.js.map

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

@@ -1 +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"}
+{"version":3,"file":"media-props.js","names":[],"sources":["../../../src/utils/media-props.ts"],"sourcesContent":["import type { MediaApi } from '@videojs/core/dom';\n\ntype AnyClass = abstract new (...args: any[]) => any;\n\nfunction getSettableProps(DelegateClass: AnyClass): Set<string> {\n  const props = new Set<string>();\n  for (let proto = DelegateClass.prototype; proto && proto !== Object.prototype; proto = Object.getPrototypeOf(proto)) {\n    for (const key of Object.getOwnPropertyNames(proto)) {\n      const desc = Object.getOwnPropertyDescriptor(proto, key);\n      if (desc?.set) props.add(key);\n    }\n  }\n  return props;\n}\n\nexport function mediaProps(media: MediaApi, DelegateClass: AnyClass, props: Record<string, any>) {\n  const delegateKeys = getSettableProps(DelegateClass);\n  const rest: Record<string, any> = {};\n\n  for (const key of Object.keys(props)) {\n    if (delegateKeys.has(key)) {\n      const value = props[key];\n      if ((media as any)[key] !== value) {\n        (media as any)[key] = value;\n      }\n    } else {\n      rest[key] = props[key];\n    }\n  }\n\n  return rest;\n}\n"],"mappings":";AAIA,SAAS,iBAAiB,eAAsC;CAC9D,MAAM,wBAAQ,IAAI,KAAa;AAC/B,MAAK,IAAI,QAAQ,cAAc,WAAW,SAAS,UAAU,OAAO,WAAW,QAAQ,OAAO,eAAe,MAAM,CACjH,MAAK,MAAM,OAAO,OAAO,oBAAoB,MAAM,CAEjD,KADa,OAAO,yBAAyB,OAAO,IAAI,EAC9C,IAAK,OAAM,IAAI,IAAI;AAGjC,QAAO;;AAGT,SAAgB,WAAW,OAAiB,eAAyB,OAA4B;CAC/F,MAAM,eAAe,iBAAiB,cAAc;CACpD,MAAM,OAA4B,EAAE;AAEpC,MAAK,MAAM,OAAO,OAAO,KAAK,MAAM,CAClC,KAAI,aAAa,IAAI,IAAI,EAAE;EACzB,MAAM,QAAQ,MAAM;AACpB,MAAK,MAAc,SAAS,MACzB,OAAc,OAAO;OAGxB,MAAK,OAAO,MAAM;AAItB,QAAO"}

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

@@ -1,5 +1,4 @@
-'use client';
-
+"use client";
 //#region src/utils/merge-props.ts
 /**
 * Check if a key is an event handler key (on* with capital letter).
@@ -79,7 +78,7 @@ function mergeProps(...propSets) {
 	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

@@ -1 +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"}
+{"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/use-composed-refs.js

@@ -1,8 +1,6 @@
-'use client';
-
+"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.
@@ -51,7 +49,7 @@ function composeRefs(...refs) {
 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

@@ -1 +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"}
+{"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,KAAA,EACjC,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

@@ -1,8 +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
@@ -35,7 +33,7 @@ function useDestroy(instance, setup, teardown) {
 		};
 	}, [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\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"}
+{"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.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.js

@@ -1,9 +1,7 @@
-'use client';
-
+"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.
@@ -18,7 +16,7 @@ function useMediaInstance(MediaClass) {
 	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

@@ -1 +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/dom';\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"}
+{"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/dom';\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.js

@@ -1,11 +1,9 @@
-'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) {
@@ -69,7 +67,7 @@ function renderElement(element, componentProps, params) {
 	mergedProps.ref = composeRefs(ref, mergedProps.ref);
 	return createElement(element, mergedProps);
 }
-
 //#endregion
 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\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,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"}