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

package/dist/dev/presets/video/skin.css

@@ -403,8 +403,6 @@
     .media-poster {
       pointer-events: none;
       border-radius: inherit;
-      object-fit: var(--media-object-fit, contain);
-      object-position: var(--media-object-position, center);
       width: 100%;
       height: 100%;
       transition-property: opacity;
@@ -419,7 +417,7 @@
       opacity: 0;
     }
 
-    .media-poster img {
+    .media-poster-image {
       border-radius: inherit;
       object-fit: var(--media-object-fit, contain);
       object-position: var(--media-object-position, center);
@@ -429,11 +427,42 @@
       inset: 0;
     }
 
-    .media-poster:is(img):not([src]):not([srcset]) {
+    .media-poster-image:not([src]):not([srcset]) {
       visibility: hidden;
     }
   }
 
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-poster {
+    pointer-events: none;
+    border-radius: inherit;
+    width: 100%;
+    height: 100%;
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: var(--media-duration-slower);
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-poster:not([data-visible]) {
+    opacity: 0;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-poster-image {
+    border-radius: inherit;
+    object-fit: var(--media-object-fit, contain);
+    object-position: var(--media-object-position, center);
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-poster-image:not([src]):not([srcset]) {
+    visibility: hidden;
+  }
+
   @scope (.media-skin[data-theme="default"][data-preset="video"]) {
     .media-seek-indicator {
       place-content: center;
@@ -1026,6 +1055,25 @@
     }
   }
 
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-popup-surface {
+    background-color: var(--media-popover);
+    color: var(--media-popover-foreground);
+    box-shadow:
+      0 0 0 1px var(--media-surface-border, var(--media-border)),
+      var(--media-shadow-surface);
+    backdrop-filter: var(--media-backdrop-filter-surface);
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-popup-surface:after {
+    content: "";
+    z-index: 10;
+    pointer-events: none;
+    border-radius: inherit;
+    box-shadow: var(--media-shadow-surface-inset);
+    position: absolute;
+    inset: 0;
+  }
+
   @scope (.media-skin[data-theme="default"][data-preset="video"]) {
     .media-captions-button-off-icon {
       opacity: 0;
@@ -1215,6 +1263,7 @@
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-buffer,
       &[data-dragging] .media-slider-buffer,
       &[data-seeking] .media-slider-buffer {
         transition-duration: 0s;
@@ -1247,6 +1296,7 @@
     }
 
     @scope (.media-slider) {
+      &:focus-within .media-slider-fill,
       &[data-dragging] .media-slider-fill,
       &[data-seeking] .media-slider-fill {
         transition-duration: 0s;
@@ -1305,6 +1355,14 @@
       translate: -50% -50%;
     }
 
+    @scope (.media-slider) {
+      &:focus-within .media-slider-thumb {
+        transition-property: opacity, height, width, outline-offset, scale;
+        transition-duration: 0.15s;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+
     @scope (.media-slider) {
       &[data-dragging] .media-slider-thumb {
         transition-property: opacity, height, width, outline-offset, scale;
@@ -1427,13 +1485,17 @@
       }
     }
 
+    .media-slider[data-disabled] {
+      pointer-events: none;
+    }
+
     .media-slider[data-orientation="horizontal"] {
       height: var(--media-slider-height, calc(var(--media-spacing) * 8));
-      min-width: calc(var(--media-spacing) * 20);
+      min-width: calc(var(--media-spacing) * 18);
     }
 
     .media-slider[data-orientation="vertical"] {
-      height: calc(var(--media-spacing) * 20);
+      height: calc(var(--media-spacing) * 18);
       width: calc(var(--media-spacing) * 8);
       min-width: calc(var(--media-spacing) * 0);
     }
@@ -1476,7 +1538,7 @@
       height: calc(var(--media-spacing) * 1);
       min-width: var(--media-slider-preview-max-width);
       --media-slider-preview-max-height: var(--media-slider-preview-max-width);
-      --media-slider-preview-max-width: min(calc(var(--media-spacing) * 36), 100cqi);
+      --media-slider-preview-max-width: min(calc(var(--media-spacing) * 32), 100cqi);
       position: relative;
     }
 
@@ -1506,6 +1568,12 @@
       scale: 1;
     }
 
+    @container media-root (width >= 30rem) {
+      .media-slider-preview {
+        --media-slider-preview-max-width: min(calc(var(--media-spacing) * 40), 100cqi);
+      }
+    }
+
     @container media-root (width >= 42rem) {
       .media-slider-preview {
         --media-slider-preview-max-width: min(calc(var(--media-spacing) * 48), 100cqi);
@@ -1536,6 +1604,7 @@
     .media-slider-thumbnail {
       pointer-events: none;
       bottom: calc(100% + var(--media-slider-preview-offset));
+      max-height: var(--media-slider-preview-max-height);
       border-radius: var(--media-popup-radius);
       background-color: var(--media-backdrop);
       left: 50%;
@@ -1548,12 +1617,36 @@
       }
     }
 
-    .media-slider-thumbnail:has([data-loading]) {
+    .media-slider-thumbnail:after {
+      pointer-events: none;
+      inset: calc(var(--media-spacing) * 0);
+      border-radius: inherit;
+      content: "";
+      background-image: var(--media-thumbnail-gradient);
+      position: absolute;
+    }
+
+    .media-slider-thumbnail[data-loading] {
       aspect-ratio: 16 / 9;
       width: var(--media-slider-preview-max-width);
     }
 
+    .media-slider-thumbnail-image {
+      transition-property: opacity;
+      transition-duration: 0.15s;
+      transition-duration: var(--media-duration);
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+      display: block;
+    }
+
+    @scope (.media-slider-thumbnail) {
+      &[data-loading] .media-slider-thumbnail-image {
+        opacity: 0;
+      }
+    }
+
     .media-slider-thumbnail-spinner-icon {
+      z-index: 10;
       width: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
       height: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
       opacity: 0;
@@ -1569,13 +1662,13 @@
     }
 
     @scope (.media-slider-thumbnail) {
-      &:not(:has([role="img"][data-loading])) .media-slider-thumbnail-spinner-icon {
+      &:not([data-loading]) .media-slider-thumbnail-spinner-icon {
         --media-spinner-animation: none;
       }
     }
 
     @scope (.media-slider-thumbnail) {
-      &:has([role="img"][data-loading]) .media-slider-thumbnail-spinner-icon {
+      &[data-loading] .media-slider-thumbnail-spinner-icon {
         opacity: 1;
       }
     }
@@ -1703,20 +1796,48 @@
     }
   }
 
-  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail-image {
-    max-height: var(--media-slider-preview-max-height);
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-preview-content {
     max-width: var(--media-slider-preview-max-width);
-    border-radius: inherit;
-    transition-property: opacity;
+    transform-origin: bottom;
+    translate: -50% var(--media-hidden-preview-offset);
+    scale: var(--media-hidden-preview-scale) var(--media-hidden-preview-scale);
+    opacity: 0;
+    filter: blur(var(--media-hidden-blur));
+    transition-property: filter, opacity, scale;
     transition-duration: 0.15s;
     transition-duration: var(--media-duration);
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-    display: block;
-    position: relative;
-    overflow: clip;
+    position: absolute;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"])
+    :where(.media-slider):has(:focus-visible)
+    .media-slider-preview-content,
+  :where(.media-skin[data-theme="default"][data-preset="video"])
+    :where(.media-slider-preview)[data-pointing]
+    .media-slider-preview-content {
+    opacity: 1;
+    filter: none;
+    scale: 1;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail {
+    pointer-events: none;
+    bottom: calc(100% + var(--media-slider-preview-offset));
+    max-height: var(--media-slider-preview-max-height);
+    border-radius: var(--media-popup-radius);
+    background-color: var(--media-backdrop);
+    left: 50%;
+    overflow: hidden;
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail {
+      background-color: color-mix(in oklab, var(--media-backdrop) 90%, transparent);
+    }
   }
 
-  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail-image:after {
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail:after {
     pointer-events: none;
     inset: calc(var(--media-spacing) * 0);
     border-radius: inherit;
@@ -1725,10 +1846,53 @@
     position: absolute;
   }
 
-  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail-image[data-loading] {
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail[data-loading] {
+    aspect-ratio: 16 / 9;
+    width: var(--media-slider-preview-max-width);
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail-image {
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-duration: var(--media-duration);
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    display: block;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"])
+    :where(.media-slider-thumbnail)[data-loading]
+    .media-slider-thumbnail-image {
     opacity: 0;
   }
 
+  :where(.media-skin[data-theme="default"][data-preset="video"]) .media-slider-thumbnail-spinner-icon {
+    z-index: 10;
+    width: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
+    height: var(--media-icon-size, calc(var(--media-spacing) * 4.5));
+    opacity: 0;
+    filter: drop-shadow(0 1px 0 var(--media-shadow-current-color));
+    transition-property: opacity;
+    transition-duration: 0.15s;
+    transition-duration: var(--media-duration);
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"])
+    :where(.media-slider-thumbnail):not([data-loading])
+    .media-slider-thumbnail-spinner-icon {
+    --media-spinner-animation: none;
+  }
+
+  :where(.media-skin[data-theme="default"][data-preset="video"])
+    :where(.media-slider-thumbnail)[data-loading]
+    .media-slider-thumbnail-spinner-icon {
+    opacity: 1;
+  }
+
   @scope (.media-skin[data-theme="default"][data-preset="video"]) {
   }
 
@@ -2413,7 +2577,7 @@
       .video-controls-content {
         inset-inline: calc(var(--media-spacing) * 2);
         bottom: calc(var(--media-spacing) * 2);
-        z-index: 10;
+        z-index: 30;
         border-radius: var(--media-controls-radius);
         background-color: var(--media-popover);
         color: var(--media-popover-foreground);
@@ -2461,10 +2625,10 @@
     .video-controls-primary {
       inset-inline: calc(var(--media-spacing) * 2);
       bottom: calc(var(--media-spacing) * 2);
-      z-index: 10;
+      z-index: 30;
       transform-origin: bottom;
       border-radius: var(--media-controls-radius);
-      padding: calc(var(--media-spacing) * 1);
+      padding: calc(var(--media-spacing) * 0.5);
       transition-property: filter, opacity, scale, translate;
       transition-duration: 0.15s;
       transition-duration: calc(var(--media-duration-controls) / 2);
@@ -2522,10 +2686,10 @@
     .video-controls-secondary {
       top: calc(var(--media-spacing) * 2);
       right: calc(var(--media-spacing) * 2);
-      z-index: 10;
+      z-index: 30;
       transform-origin: top;
       border-radius: var(--media-controls-radius);
-      padding: calc(var(--media-spacing) * 1);
+      padding: calc(var(--media-spacing) * 0.5);
       transition-property: filter, opacity, scale, translate;
       transition-duration: 0.15s;
       transition-duration: calc(var(--media-duration-controls) / 2);
@@ -2632,8 +2796,21 @@
       outline-color: var(--media-ring);
     }
 
+    .media-time-toggle[aria-disabled="true"] {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
     .media-time-value {
       font-variant-numeric: tabular-nums;
+      transition-property: opacity;
+      transition-duration: 0.15s;
+      transition-duration: var(--media-duration-slow);
+      transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .media-time-value[data-unavailable] {
+      opacity: 0.5;
     }
   }
 
@@ -2685,7 +2862,7 @@
     --media-backdrop-filter-indicator: blur(8px);
     --media-backdrop-filter-dialog: blur(16px) saturate(150%);
     --media-control-corner-shape: round;
-    --media-control-radius: calc(infinity * 1px);
+    --media-control-radius: 99px;
     --media-control-size: calc(var(--media-spacing) * 9);
     --media-controls-radius: var(--media-control-radius);
     --media-default-accent-color: oklch(100% 0 0);

package/dist/dev/ui/airplay-button/component.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { AirPlayButtonCore } from "@videojs/core";
+//#region src/ui/airplay-button/component.d.ts
+interface AirPlayButtonProps extends UIComponentProps<'button', AirPlayButtonCore.State>, AirPlayButtonCore.Props {}
+/** A button that toggles AirPlay to a remote device. */
+declare const AirPlayButton: import("react").ForwardRefExoticComponent<AirPlayButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace AirPlayButton {
+  type Props = AirPlayButtonProps;
+  type State = AirPlayButtonCore.State;
+}
+//#endregion
+export { AirPlayButton, AirPlayButtonProps };
+//# sourceMappingURL=component.d.ts.map

package/dist/dev/ui/airplay-button/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","names":[],"sources":["../../../../src/ui/airplay-button/component.tsx"],"mappings":";;;UAMiB,2BACP,2BAA2B,kBAAkB,QAAQ,kBAAkB;;cAGpE,+BAAa,0BAAA,qCAAA,cAAA;kBAST;OACH,QAAQ;OACR,QAAQ,kBAAkB"}

package/dist/dev/ui/airplay-button/component.js

@@ -0,0 +1,17 @@
+import { createMediaButton } from "../create-media-button.js";
+import { AirPlayButtonCore, AirPlayButtonDataAttrs } from "@videojs/core";
+import { selectRemotePlayback } from "@videojs/core/dom";
+//#region src/ui/airplay-button/component.tsx
+/** A button that toggles AirPlay to a remote device. */
+const AirPlayButton = createMediaButton({
+	displayName: "AirPlayButton",
+	core: AirPlayButtonCore,
+	stateAttrMap: AirPlayButtonDataAttrs,
+	selector: selectRemotePlayback,
+	action: (core, state) => core.toggle(state),
+	isSupported: (state) => !state.hidden
+});
+//#endregion
+export { AirPlayButton };
+
+//# sourceMappingURL=component.js.map

package/dist/dev/ui/airplay-button/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/airplay-button/component.tsx"],"sourcesContent":["import { AirPlayButtonCore, AirPlayButtonDataAttrs } from '@videojs/core';\nimport { selectRemotePlayback } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface AirPlayButtonProps\n  extends UIComponentProps<'button', AirPlayButtonCore.State>, AirPlayButtonCore.Props {}\n\n/** A button that toggles AirPlay to a remote device. */\nexport const AirPlayButton = createMediaButton<AirPlayButtonCore, AirPlayButtonProps>({\n  displayName: 'AirPlayButton',\n  core: AirPlayButtonCore,\n  stateAttrMap: AirPlayButtonDataAttrs,\n  selector: selectRemotePlayback,\n  action: (core, state) => core.toggle(state),\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace AirPlayButton {\n  export type Props = AirPlayButtonProps;\n  export type State = AirPlayButtonCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,gBAAgB,kBAAyD;CACpF,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}

package/dist/dev/ui/airplay-button/index.d.ts

@@ -1,2 +1,2 @@
-import { AirPlayButton, AirPlayButtonProps } from "./airplay-button.js";
+import { AirPlayButton, AirPlayButtonProps } from "./component.js";
 export { AirPlayButton, AirPlayButtonProps };

package/dist/dev/ui/airplay-button/index.js

@@ -1,2 +1,2 @@
-import { AirPlayButton } from "./airplay-button.js";
+import { AirPlayButton } from "./component.js";
 export { AirPlayButton };

package/dist/dev/ui/alert-dialog/index.parts.d.ts

@@ -1,10 +1,10 @@
-import { DialogBackdrop, DialogBackdropProps } from "../dialog/dialog-backdrop.js";
-import { DialogClose, DialogCloseProps } from "../dialog/dialog-close.js";
-import { DialogDescription, DialogDescriptionProps } from "../dialog/dialog-description.js";
-import { DialogPopup, DialogPopupProps } from "../dialog/dialog-popup.js";
-import { DialogTitle, DialogTitleProps } from "../dialog/dialog-title.js";
+import { DialogBackdrop, DialogBackdropProps } from "../dialog/backdrop.js";
+import { DialogClose, DialogCloseProps } from "../dialog/close.js";
+import { DialogDescription, DialogDescriptionProps } from "../dialog/description.js";
+import { DialogPopup, DialogPopupProps } from "../dialog/popup.js";
+import { DialogTitle, DialogTitleProps } from "../dialog/title.js";
 import "../dialog/index.parts.js";
-import { AlertDialogRoot, AlertDialogRootProps } from "./alert-dialog-root.js";
+import { AlertDialogRoot, AlertDialogRootProps } from "./root.js";
 declare namespace index_parts_d_exports {
   export { DialogBackdrop as Backdrop, DialogBackdropProps as BackdropProps, DialogClose as Close, DialogCloseProps as CloseProps, DialogDescription as Description, DialogDescriptionProps as DescriptionProps, DialogPopup as Popup, DialogPopupProps as PopupProps, AlertDialogRoot as Root, AlertDialogRootProps as RootProps, DialogTitle as Title, DialogTitleProps as TitleProps };
 }

package/dist/dev/ui/alert-dialog/index.parts.js

@@ -1,10 +1,10 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { DialogBackdrop } from "../dialog/dialog-backdrop.js";
-import { DialogClose } from "../dialog/dialog-close.js";
-import { DialogDescription } from "../dialog/dialog-description.js";
-import { DialogPopup } from "../dialog/dialog-popup.js";
-import { DialogTitle } from "../dialog/dialog-title.js";
-import { AlertDialogRoot } from "./alert-dialog-root.js";
+import { DialogBackdrop } from "../dialog/backdrop.js";
+import { DialogClose } from "../dialog/close.js";
+import { DialogDescription } from "../dialog/description.js";
+import { DialogPopup } from "../dialog/popup.js";
+import { DialogTitle } from "../dialog/title.js";
+import { AlertDialogRoot } from "./root.js";
 //#region src/ui/alert-dialog/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Backdrop: () => DialogBackdrop,

package/dist/dev/ui/alert-dialog/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/alert-dialog/index.parts.ts"],"sourcesContent":["export {\n  Backdrop,\n  type BackdropProps,\n  Close,\n  type CloseProps,\n  Description,\n  type DescriptionProps,\n  Popup,\n  type PopupProps,\n  Title,\n  type TitleProps,\n} from '../dialog/index.parts';\nexport { AlertDialogRoot as Root, type AlertDialogRootProps as RootProps } from './alert-dialog-root';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/alert-dialog/index.parts.ts"],"sourcesContent":["export {\n  Backdrop,\n  type BackdropProps,\n  Close,\n  type CloseProps,\n  Description,\n  type DescriptionProps,\n  Popup,\n  type PopupProps,\n  Title,\n  type TitleProps,\n} from '../dialog/index.parts';\nexport { AlertDialogRoot as Root, type AlertDialogRootProps as RootProps } from './root';\n"],"mappings":""}

package/dist/dev/ui/alert-dialog/root.d.ts

@@ -0,0 +1,18 @@
+import { AlertDialogProps } from "@videojs/core";
+import { ReactNode } from "react";
+//#region src/ui/alert-dialog/root.d.ts
+interface AlertDialogRootProps extends AlertDialogProps {
+  /** Called when the open state changes, before animations complete. */
+  onOpenChange?: (open: boolean) => void;
+  /** Called after open or close animations complete. */
+  onOpenChangeComplete?: (open: boolean) => void;
+  children?: ReactNode;
+}
+/** Manages alert dialog state and provides it to the shared dialog parts. */
+declare function AlertDialogRoot({ children, ...props }: AlertDialogRootProps): ReactNode;
+declare namespace AlertDialogRoot {
+  type Props = AlertDialogRootProps;
+}
+//#endregion
+export { AlertDialogRoot, AlertDialogRootProps };
+//# sourceMappingURL=root.d.ts.map

package/dist/dev/ui/alert-dialog/root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","names":[],"sources":["../../../../src/ui/alert-dialog/root.tsx"],"mappings":";;;UAMiB,6BAA6B;;EAE5C,gBAAgB;;EAEhB,wBAAwB;EACxB,WAAW;;;iBAIG,kBAAkB,aAAa,SAAS,uBAAuB;kBAe9D;OACH,QAAQ"}

package/dist/dev/ui/alert-dialog/root.js

@@ -0,0 +1,25 @@
+import { DialogContextProvider } from "../dialog/context.js";
+import { useDialogRoot } from "../dialog/use-dialog-root.js";
+import { AlertDialogCore, AlertDialogDataAttrs } from "@videojs/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/alert-dialog/root.tsx
+/** Manages alert dialog state and provides it to the shared dialog parts. */
+function AlertDialogRoot({ children, ...props }) {
+	const context = useDialogRoot({
+		...props,
+		coreFactory: createAlertDialogCore,
+		stateAttrMap: AlertDialogDataAttrs,
+		idPrefix: "alert-dialog"
+	});
+	return /* @__PURE__ */ jsx(DialogContextProvider, {
+		value: context,
+		children
+	});
+}
+function createAlertDialogCore() {
+	return new AlertDialogCore();
+}
+//#endregion
+export { AlertDialogRoot };
+
+//# sourceMappingURL=root.js.map

package/dist/dev/ui/alert-dialog/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/alert-dialog/root.tsx"],"sourcesContent":["import { AlertDialogCore, AlertDialogDataAttrs, type AlertDialogProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\n\nimport { DialogContextProvider } from '../dialog/context';\nimport { useDialogRoot } from '../dialog/use-dialog-root';\n\nexport interface AlertDialogRootProps extends AlertDialogProps {\n  /** Called when the open state changes, before animations complete. */\n  onOpenChange?: (open: boolean) => void;\n  /** Called after open or close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\n/** Manages alert dialog state and provides it to the shared dialog parts. */\nexport function AlertDialogRoot({ children, ...props }: AlertDialogRootProps): ReactNode {\n  const context = useDialogRoot({\n    ...props,\n    coreFactory: createAlertDialogCore,\n    stateAttrMap: AlertDialogDataAttrs,\n    idPrefix: 'alert-dialog',\n  });\n\n  return <DialogContextProvider value={context}>{children}</DialogContextProvider>;\n}\n\nfunction createAlertDialogCore(): AlertDialogCore {\n  return new AlertDialogCore();\n}\n\nexport namespace AlertDialogRoot {\n  export type Props = AlertDialogRootProps;\n}\n"],"mappings":";;;;;;AAeA,SAAgB,gBAAgB,EAAE,UAAU,GAAG,SAA0C;CACvF,MAAM,UAAU,cAAc;EAC5B,GAAG;EACH,aAAa;EACb,cAAc;EACd,UAAU;CACZ,CAAC;CAED,OAAO,oBAAC,uBAAD;EAAuB,OAAO;EAAU;CAAgC,CAAA;AACjF;AAEA,SAAS,wBAAyC;CAChD,OAAO,IAAI,gBAAgB;AAC7B"}

package/dist/dev/ui/audio-track-radio-group/component.d.ts

@@ -0,0 +1,48 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { AudioTrackOption, AudioTrackOptionsProps, AudioTrackOptionsResult } from "../audio-track/use-audio-track-options.js";
+import "../audio-track/index.js";
+import { MenuRadioItemProps } from "../menu/radio-item.js";
+import { AudioTrackRadioGroupCore } from "@videojs/core";
+import { ReactElement, ReactNode } from "react";
+//#region src/ui/audio-track-radio-group/component.d.ts
+type AudioTrackRadioGroupItemState = AudioTrackOption & {
+  /** Whether this option is the currently enabled audio track. */
+  checked: boolean;
+};
+interface AudioTrackRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {
+  /** Audio track value represented by the option. */
+  'data-track': string;
+}
+interface AudioTrackRadioGroupRootProps extends AudioTrackOptionsProps {
+  children?: ReactNode;
+}
+interface AudioTrackRadioGroupOptionsProps extends Omit<UIComponentProps<'div', AudioTrackRadioGroupCore.State>, 'children'> {
+  /** Render one consumer-owned menu radio item for every audio track. */
+  renderItem: (props: AudioTrackRadioGroupItemProps, state: AudioTrackRadioGroupItemState) => ReactElement;
+}
+type AudioTrackRadioGroupValueProps = UIComponentProps<'span', AudioTrackOptionsResult>;
+interface AudioTrackRadioGroupLegacyProps extends AudioTrackRadioGroupOptionsProps, AudioTrackOptionsProps {}
+/** Owns audio-track option state and shares it with an enclosing menu. Does not render a DOM element. */
+declare function AudioTrackRadioGroupRoot({ children, ...props }: AudioTrackRadioGroupRootProps): ReactNode;
+/** Displays the selected audio-track label. */
+declare const AudioTrackRadioGroupValue: import("react").ForwardRefExoticComponent<Omit<AudioTrackRadioGroupValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+/** Renders menu radio items for the player's available audio tracks. */
+declare const AudioTrackRadioGroupOptions: import("react").ForwardRefExoticComponent<Omit<AudioTrackRadioGroupOptionsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** @internal Compatibility adapter for the existing preset sources. */
+declare const AudioTrackRadioGroupLegacy: import("react").ForwardRefExoticComponent<Omit<AudioTrackRadioGroupLegacyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace AudioTrackRadioGroupRoot {
+  type Props = AudioTrackRadioGroupRootProps;
+}
+declare namespace AudioTrackRadioGroupValue {
+  type Props = AudioTrackRadioGroupValueProps;
+  type State = AudioTrackOptionsResult;
+}
+declare namespace AudioTrackRadioGroupOptions {
+  type Props = AudioTrackRadioGroupOptionsProps;
+  type State = AudioTrackRadioGroupCore.State;
+  type ItemProps = AudioTrackRadioGroupItemProps;
+  type ItemState = AudioTrackRadioGroupItemState;
+}
+//#endregion
+export { AudioTrackRadioGroupItemProps, AudioTrackRadioGroupItemState, AudioTrackRadioGroupLegacy, AudioTrackRadioGroupLegacyProps, AudioTrackRadioGroupOptions, AudioTrackRadioGroupOptionsProps, AudioTrackRadioGroupRoot, AudioTrackRadioGroupRootProps, AudioTrackRadioGroupValue, AudioTrackRadioGroupValueProps };
+//# sourceMappingURL=component.d.ts.map

package/dist/dev/ui/audio-track-radio-group/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","names":[],"sources":["../../../../src/ui/audio-track-radio-group/component.tsx"],"mappings":";;;;;;;KAkBY,gCAAgC;;EAE1C;;UAGe,sCAAsC,KAAK;;EAE1D;;UAGe,sCAAsC;EACrD,WAAW;;UAGI,yCAAyC,KACxD,wBAAwB,yBAAyB;;EAIjD,aAAa,OAAO,+BAA+B,OAAO,kCAAkC;;KAGlF,iCAAiC,yBAAyB;UAErD,wCAAwC,kCAAkC;;iBAK3E,2BAA2B,aAAa,SAAS,gCAAgC;;cASpF,2CAAyB,0BAAA,KAAA,yDAAA,cAAA;;cAczB,6CAA2B,0BAAA,KAAA,2DAAA,cAAA;;cAuD3B,4CAA0B,0BAAA,KAAA,0DAAA,cAAA;kBA6BtB;OACH,QAAQ;;kBAGL;OACH,QAAQ;OACR,QAAQ;;kBAGL;OACH,QAAQ;OACR,QAAQ,yBAAyB;OACjC,YAAY;OACZ,YAAY"}