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

package/dist/dev/ui/controls/index.parts.d.ts

@@ -1,7 +1,7 @@
-import { ControlsBackdrop, ControlsBackdropProps } from "./controls-backdrop.js";
-import { ControlsContent, ControlsContentProps } from "./controls-content.js";
-import { ControlsGroup, ControlsGroupProps } from "./controls-group.js";
-import { ControlsRoot, ControlsRootProps } from "./controls-root.js";
+import { ControlsBackdrop, ControlsBackdropProps } from "./backdrop.js";
+import { ControlsContent, ControlsContentProps } from "./content.js";
+import { ControlsGroup, ControlsGroupProps } from "./group.js";
+import { ControlsRoot, ControlsRootProps } from "./root.js";
 declare namespace index_parts_d_exports {
   export { ControlsBackdrop as Backdrop, ControlsBackdropProps as BackdropProps, ControlsContent as Content, ControlsContentProps as ContentProps, ControlsGroup as Group, ControlsGroupProps as GroupProps, ControlsRoot as Root, ControlsRootProps as RootProps };
 }

package/dist/dev/ui/controls/index.parts.js

@@ -1,8 +1,8 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { ControlsBackdrop } from "./controls-backdrop.js";
-import { ControlsContent } from "./controls-content.js";
-import { ControlsGroup } from "./controls-group.js";
-import { ControlsRoot } from "./controls-root.js";
+import { ControlsBackdrop } from "./backdrop.js";
+import { ControlsContent } from "./content.js";
+import { ControlsGroup } from "./group.js";
+import { ControlsRoot } from "./root.js";
 //#region src/ui/controls/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Backdrop: () => ControlsBackdrop,

package/dist/dev/ui/controls/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/controls/index.parts.ts"],"sourcesContent":["export { ControlsBackdrop as Backdrop, type ControlsBackdropProps as BackdropProps } from './controls-backdrop';\nexport { ControlsContent as Content, type ControlsContentProps as ContentProps } from './controls-content';\nexport { ControlsGroup as Group, type ControlsGroupProps as GroupProps } from './controls-group';\nexport { ControlsRoot as Root, type ControlsRootProps as RootProps } from './controls-root';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/controls/index.parts.ts"],"sourcesContent":["export { ControlsBackdrop as Backdrop, type ControlsBackdropProps as BackdropProps } from './backdrop';\nexport { ControlsContent as Content, type ControlsContentProps as ContentProps } from './content';\nexport { ControlsGroup as Group, type ControlsGroupProps as GroupProps } from './group';\nexport { ControlsRoot as Root, type ControlsRootProps as RootProps } from './root';\n"],"mappings":""}

package/dist/dev/ui/controls/root.d.ts

@@ -0,0 +1,15 @@
+import { ControlsCore, ControlsProps } from "@videojs/core";
+import { ReactNode } from "react";
+//#region src/ui/controls/root.d.ts
+interface ControlsRootProps extends ControlsProps {
+  children?: ReactNode | undefined;
+}
+/** Manages controls state and provides it to the compound parts. Does not render an element. */
+declare function ControlsRoot({ children, visibility }: ControlsRootProps): ReactNode;
+declare namespace ControlsRoot {
+  type Props = ControlsRootProps;
+  type State = ControlsCore.State;
+}
+//#endregion
+export { ControlsRoot, ControlsRootProps };
+//# sourceMappingURL=root.d.ts.map

package/dist/dev/ui/controls/root.js

@@ -0,0 +1,31 @@
+import { usePlayer } from "../../player/context.js";
+import { ControlsContextProvider } from "./context.js";
+import { ControlsCore, ControlsDataAttrs } from "@videojs/core";
+import { logMissingFeature, selectControls } from "@videojs/core/dom";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/controls/root.tsx
+/** Manages controls state and provides it to the compound parts. Does not render an element. */
+function ControlsRoot({ children, visibility = ControlsCore.defaultProps.visibility }) {
+	"use no memo";
+	const controls = usePlayer(selectControls);
+	const [core] = useState(() => new ControlsCore());
+	core.setProps({ visibility });
+	core.setMedia(controls ?? null);
+	const state = core.getState();
+	if (!state) {
+		logMissingFeature("Controls.Root", "controls");
+		return null;
+	}
+	return /* @__PURE__ */ jsx(ControlsContextProvider, {
+		value: {
+			state,
+			stateAttrMap: ControlsDataAttrs
+		},
+		children
+	});
+}
+//#endregion
+export { ControlsRoot };
+
+//# sourceMappingURL=root.js.map

package/dist/dev/ui/controls/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/controls/root.tsx"],"sourcesContent":["import { ControlsCore, ControlsDataAttrs, type ControlsProps } from '@videojs/core';\nimport { logMissingFeature, selectControls } from '@videojs/core/dom';\nimport type { ReactNode } from 'react';\nimport { useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport { ControlsContextProvider } from './context';\n\nexport interface ControlsRootProps extends ControlsProps {\n  children?: ReactNode | undefined;\n}\n\n/** Manages controls state and provides it to the compound parts. Does not render an element. */\nexport function ControlsRoot({\n  children,\n  visibility = ControlsCore.defaultProps.visibility,\n}: ControlsRootProps): ReactNode {\n  // React Compiler cannot track state read through the mutable core instance.\n  'use no memo';\n\n  const controls = usePlayer(selectControls);\n  const [core] = useState(() => new ControlsCore());\n\n  core.setProps({ visibility });\n  core.setMedia(controls ?? null);\n\n  const state = core.getState();\n\n  if (!state) {\n    if (__DEV__) logMissingFeature('Controls.Root', 'controls');\n\n    return null;\n  }\n\n  return (\n    <ControlsContextProvider value={{ state, stateAttrMap: ControlsDataAttrs }}>{children}</ControlsContextProvider>\n  );\n}\n\nexport namespace ControlsRoot {\n  export type Props = ControlsRootProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,SAAgB,aAAa,EAC3B,UACA,aAAa,aAAa,aAAa,cACR;CAE/B;CAEA,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,CAAC,QAAQ,eAAe,IAAI,aAAa,CAAC;CAEhD,KAAK,SAAS,EAAE,WAAW,CAAC;CAC5B,KAAK,SAAS,YAAY,IAAI;CAE9B,MAAM,QAAQ,KAAK,SAAS;CAE5B,IAAI,CAAC,OAAO;EACG,kBAAkB,iBAAiB,UAAU;EAE1D,OAAO;CACT;CAEA,OACE,oBAAC,yBAAD;EAAyB,OAAO;GAAE;GAAO,cAAc;EAAkB;EAAI;CAAkC,CAAA;AAEnH"}

package/dist/dev/ui/dialog/backdrop.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { DialogCore } from "@videojs/core";
+//#region src/ui/dialog/backdrop.d.ts
+interface DialogBackdropProps extends UIComponentProps<'div', DialogCore.State> {}
+/** Presentational layer behind a dialog while it is rendered, including its exit transition. */
+declare const DialogBackdrop: import("react").ForwardRefExoticComponent<Omit<DialogBackdropProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace DialogBackdrop {
+  type Props = DialogBackdropProps;
+  type State = DialogCore.State;
+}
+//#endregion
+export { DialogBackdrop, DialogBackdropProps };
+//# sourceMappingURL=backdrop.d.ts.map

package/dist/dev/ui/dialog/backdrop.js

@@ -0,0 +1,26 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useDialogContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/dialog/backdrop.tsx
+/** Presentational layer behind a dialog while it is rendered, including its exit transition. */
+const DialogBackdrop = forwardRef(function DialogBackdrop({ render, className, style, ...elementProps }, forwardedRef) {
+	const { state, stateAttrMap } = useDialogContext();
+	if (!state.open) return null;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef],
+		props: [{
+			role: "presentation",
+			"aria-hidden": true
+		}, elementProps]
+	});
+});
+//#endregion
+export { DialogBackdrop };
+
+//# sourceMappingURL=backdrop.js.map

package/dist/dev/ui/dialog/backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"backdrop.js","names":[],"sources":["../../../../src/ui/dialog/backdrop.tsx"],"sourcesContent":["import type { DialogCore } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from './context';\n\nexport interface DialogBackdropProps extends UIComponentProps<'div', DialogCore.State> {}\n\n/** Presentational layer behind a dialog while it is rendered, including its exit transition. */\nexport const DialogBackdrop = forwardRef<HTMLDivElement, DialogBackdropProps>(function DialogBackdrop(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap } = useDialogContext();\n  if (!state.open) return null;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef],\n      props: [{ role: 'presentation', 'aria-hidden': true }, elementProps],\n    }\n  );\n});\n\nexport namespace DialogBackdrop {\n  export type Props = DialogBackdropProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,iBAAiB,WAAgD,SAAS,eACrF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,OAAO,iBAAiB,iBAAiB;CACjD,IAAI,CAAC,MAAM,MAAM,OAAO;CAExB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC;GAAE,MAAM;GAAgB,eAAe;EAAK,GAAG,YAAY;CACrE,CACF;AACF,CAAC"}

package/dist/dev/ui/dialog/close.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { DialogCore } from "@videojs/core";
+//#region src/ui/dialog/close.d.ts
+interface DialogCloseProps extends UIComponentProps<'button', DialogCore.State> {}
+/** Renders a button that closes the dialog. */
+declare const DialogClose: import("react").ForwardRefExoticComponent<Omit<DialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace DialogClose {
+  type Props = DialogCloseProps;
+  type State = DialogCore.State;
+}
+//#endregion
+export { DialogClose, DialogCloseProps };
+//# sourceMappingURL=close.d.ts.map

package/dist/dev/ui/dialog/close.js

@@ -0,0 +1,29 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useDialogContext } from "./context.js";
+import { forwardRef, useCallback } from "react";
+//#region src/ui/dialog/close.tsx
+/** Renders a button that closes the dialog. */
+const DialogClose = forwardRef(function DialogClose({ render, className, style, disabled, ...elementProps }, forwardedRef) {
+	const { dialog, state, stateAttrMap } = useDialogContext();
+	const handleClick = useCallback(() => {
+		if (!disabled) dialog.close();
+	}, [dialog, disabled]);
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: forwardedRef,
+		props: [{
+			type: "button",
+			disabled,
+			onClick: handleClick
+		}, elementProps]
+	});
+});
+//#endregion
+export { DialogClose };
+
+//# sourceMappingURL=close.js.map

package/dist/dev/ui/dialog/close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"close.js","names":[],"sources":["../../../../src/ui/dialog/close.tsx"],"sourcesContent":["import type { DialogCore } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from './context';\n\nexport interface DialogCloseProps extends UIComponentProps<'button', DialogCore.State> {}\n\n/** Renders a button that closes the dialog. */\nexport const DialogClose = forwardRef<HTMLButtonElement, DialogCloseProps>(function DialogClose(\n  { render, className, style, disabled, ...elementProps },\n  forwardedRef\n) {\n  const { dialog, state, stateAttrMap } = useDialogContext();\n\n  const handleClick = useCallback(() => {\n    if (!disabled) dialog.close();\n  }, [dialog, disabled]);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [{ type: 'button' as const, disabled, onClick: handleClick }, elementProps],\n    }\n  );\n});\n\nexport namespace DialogClose {\n  export type Props = DialogCloseProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,cAAc,WAAgD,SAAS,YAClF,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBACzC,cACA;CACA,MAAM,EAAE,QAAQ,OAAO,iBAAiB,iBAAiB;CAEzD,MAAM,cAAc,kBAAkB;EACpC,IAAI,CAAC,UAAU,OAAO,MAAM;CAC9B,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAErB,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,MAAM;GAAmB;GAAU,SAAS;EAAY,GAAG,YAAY;CACnF,CACF;AACF,CAAC"}

package/dist/dev/ui/dialog/description.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { DialogCore } from "@videojs/core";
+//#region src/ui/dialog/description.d.ts
+interface DialogDescriptionProps extends UIComponentProps<'p', DialogCore.State> {}
+/** Renders the description announced with the dialog. */
+declare const DialogDescription: import("react").ForwardRefExoticComponent<DialogDescriptionProps>;
+declare namespace DialogDescription {
+  type Props = DialogDescriptionProps;
+  type State = DialogCore.State;
+}
+//#endregion
+export { DialogDescription, DialogDescriptionProps };
+//# sourceMappingURL=description.d.ts.map

package/dist/dev/ui/dialog/description.js

@@ -0,0 +1,14 @@
+import { useDialogContext } from "./context.js";
+import { createContextPart } from "../create-context-part.js";
+//#region src/ui/dialog/description.tsx
+/** Renders the description announced with the dialog. */
+const DialogDescription = createContextPart({
+	displayName: "DialogDescription",
+	tag: "p",
+	useContext: useDialogContext,
+	getProps: (state) => ({ id: state.descriptionId })
+});
+//#endregion
+export { DialogDescription };
+
+//# sourceMappingURL=description.js.map

package/dist/dev/ui/dialog/description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"description.js","names":[],"sources":["../../../../src/ui/dialog/description.tsx"],"sourcesContent":["import type { DialogCore } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useDialogContext } from './context';\n\nexport interface DialogDescriptionProps extends UIComponentProps<'p', DialogCore.State> {}\n\n/** Renders the description announced with the dialog. */\nexport const DialogDescription = createContextPart<DialogDescriptionProps, DialogCore.State>({\n  displayName: 'DialogDescription',\n  tag: 'p',\n  useContext: useDialogContext,\n  getProps: (state) => ({ id: state.descriptionId }),\n});\n\nexport namespace DialogDescription {\n  export type Props = DialogDescriptionProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;AASA,MAAa,oBAAoB,kBAA4D;CAC3F,aAAa;CACb,KAAK;CACL,YAAY;CACZ,WAAW,WAAW,EAAE,IAAI,MAAM,cAAc;AAClD,CAAC"}

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

@@ -1,10 +1,10 @@
-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 { DialogRoot, DialogRootProps } from "./dialog-root.js";
-import { DialogTitle, DialogTitleProps } from "./dialog-title.js";
-import { DialogTrigger, DialogTriggerProps } from "./dialog-trigger.js";
+import { DialogBackdrop, DialogBackdropProps } from "./backdrop.js";
+import { DialogClose, DialogCloseProps } from "./close.js";
+import { DialogDescription, DialogDescriptionProps } from "./description.js";
+import { DialogPopup, DialogPopupProps } from "./popup.js";
+import { DialogRoot, DialogRootProps } from "./root.js";
+import { DialogTitle, DialogTitleProps } from "./title.js";
+import { DialogTrigger, DialogTriggerProps } from "./trigger.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, DialogRoot as Root, DialogRootProps as RootProps, DialogTitle as Title, DialogTitleProps as TitleProps, DialogTrigger as Trigger, DialogTriggerProps as TriggerProps };
 }

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

@@ -1,11 +1,11 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.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 { DialogRoot } from "./dialog-root.js";
-import { DialogTitle } from "./dialog-title.js";
-import { DialogTrigger } from "./dialog-trigger.js";
+import { DialogBackdrop } from "./backdrop.js";
+import { DialogClose } from "./close.js";
+import { DialogDescription } from "./description.js";
+import { DialogPopup } from "./popup.js";
+import { DialogRoot } from "./root.js";
+import { DialogTitle } from "./title.js";
+import { DialogTrigger } from "./trigger.js";
 //#region src/ui/dialog/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Backdrop: () => DialogBackdrop,

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

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/dialog/index.parts.ts"],"sourcesContent":["export { DialogBackdrop as Backdrop, type DialogBackdropProps as BackdropProps } from './dialog-backdrop';\nexport { DialogClose as Close, type DialogCloseProps as CloseProps } from './dialog-close';\nexport {\n  DialogDescription as Description,\n  type DialogDescriptionProps as DescriptionProps,\n} from './dialog-description';\nexport { DialogPopup as Popup, type DialogPopupProps as PopupProps } from './dialog-popup';\nexport { DialogRoot as Root, type DialogRootProps as RootProps } from './dialog-root';\nexport { DialogTitle as Title, type DialogTitleProps as TitleProps } from './dialog-title';\nexport { DialogTrigger as Trigger, type DialogTriggerProps as TriggerProps } from './dialog-trigger';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/dialog/index.parts.ts"],"sourcesContent":["export { DialogBackdrop as Backdrop, type DialogBackdropProps as BackdropProps } from './backdrop';\nexport { DialogClose as Close, type DialogCloseProps as CloseProps } from './close';\nexport { DialogDescription as Description, type DialogDescriptionProps as DescriptionProps } from './description';\nexport { DialogPopup as Popup, type DialogPopupProps as PopupProps } from './popup';\nexport { DialogRoot as Root, type DialogRootProps as RootProps } from './root';\nexport { DialogTitle as Title, type DialogTitleProps as TitleProps } from './title';\nexport { DialogTrigger as Trigger, type DialogTriggerProps as TriggerProps } from './trigger';\n"],"mappings":""}

package/dist/dev/ui/dialog/popup.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { DialogCore } from "@videojs/core";
+//#region src/ui/dialog/popup.d.ts
+interface DialogPopupProps extends UIComponentProps<'div', DialogCore.State> {}
+/** Renders the modal dialog while it is open. */
+declare const DialogPopup: import("react").ForwardRefExoticComponent<Omit<DialogPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace DialogPopup {
+  type Props = DialogPopupProps;
+  type State = DialogCore.State;
+}
+//#endregion
+export { DialogPopup, DialogPopupProps };
+//# sourceMappingURL=popup.d.ts.map

package/dist/dev/ui/dialog/popup.js

@@ -0,0 +1,28 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useDialogContext } from "./context.js";
+import { forwardRef, useCallback } from "react";
+//#region src/ui/dialog/popup.tsx
+/** Renders the modal dialog while it is open. */
+const DialogPopup = forwardRef(function DialogPopup({ render, className, style, ...elementProps }, forwardedRef) {
+	const { core, dialog, state, stateAttrMap, popupId } = useDialogContext();
+	const popupRef = useCallback((element) => dialog.setPopupElement(element), [dialog]);
+	if (!state.open) return null;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef, popupRef],
+		props: [{
+			id: popupId,
+			tabIndex: -1,
+			...core.getPopupAttrs(state)
+		}, elementProps]
+	});
+});
+//#endregion
+export { DialogPopup };
+
+//# sourceMappingURL=popup.js.map

package/dist/dev/ui/dialog/popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.js","names":[],"sources":["../../../../src/ui/dialog/popup.tsx"],"sourcesContent":["import type { DialogCore } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from './context';\n\nexport interface DialogPopupProps extends UIComponentProps<'div', DialogCore.State> {}\n\n/** Renders the modal dialog while it is open. */\nexport const DialogPopup = forwardRef<HTMLDivElement, DialogPopupProps>(function DialogPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, dialog, state, stateAttrMap, popupId } = useDialogContext();\n\n  const popupRef = useCallback((element: HTMLDivElement | null) => dialog.setPopupElement(element), [dialog]);\n\n  if (!state.open) return null;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, popupRef],\n      props: [{ id: popupId, tabIndex: -1, ...core.getPopupAttrs(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace DialogPopup {\n  export type Props = DialogPopupProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,cAAc,WAA6C,SAAS,YAC/E,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,QAAQ,OAAO,cAAc,YAAY,iBAAiB;CAExE,MAAM,WAAW,aAAa,YAAmC,OAAO,gBAAgB,OAAO,GAAG,CAAC,MAAM,CAAC;CAE1G,IAAI,CAAC,MAAM,MAAM,OAAO;CAExB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,cAAc,QAAQ;EAC5B,OAAO,CAAC;GAAE,IAAI;GAAS,UAAU;GAAI,GAAG,KAAK,cAAc,KAAK;EAAE,GAAG,YAAY;CACnF,CACF;AACF,CAAC"}

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

@@ -0,0 +1,18 @@
+import { DialogProps } from "@videojs/core";
+import { ReactNode } from "react";
+//#region src/ui/dialog/root.d.ts
+interface DialogRootProps extends DialogProps {
+  /** 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 dialog state and provides it to the compound parts. */
+declare function DialogRoot(props: DialogRootProps): ReactNode;
+declare namespace DialogRoot {
+  type Props = DialogRootProps;
+}
+//#endregion
+export { DialogRoot, DialogRootProps };
+//# sourceMappingURL=root.d.ts.map

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

@@ -0,0 +1,38 @@
+import { DialogContextProvider } from "./context.js";
+import { useDialogRoot } from "./use-dialog-root.js";
+import { DialogCore } from "@videojs/core";
+import { c } from "react-compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/dialog/root.tsx
+/** Manages dialog state and provides it to the compound parts. */
+function DialogRoot(props) {
+	const $ = c(5);
+	let t0;
+	if ($[0] !== props) {
+		t0 = {
+			...props,
+			coreFactory: createDialogCore
+		};
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	const context = useDialogRoot(t0);
+	let t1;
+	if ($[2] !== context || $[3] !== props.children) {
+		t1 = /* @__PURE__ */ jsx(DialogContextProvider, {
+			value: context,
+			children: props.children
+		});
+		$[2] = context;
+		$[3] = props.children;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+}
+function createDialogCore() {
+	return new DialogCore();
+}
+//#endregion
+export { DialogRoot };
+
+//# sourceMappingURL=root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":["{ ...props, coreFactory: createDialogCore }","<DialogContextProvider value={context}>{props.children}</DialogContextProvider>","children"],"sources":["../../../../src/ui/dialog/root.tsx"],"sourcesContent":["import { DialogCore, type DialogProps } from '@videojs/core';\nimport type { ReactNode } from 'react';\n\nimport { DialogContextProvider } from './context';\nimport { useDialogRoot } from './use-dialog-root';\n\nexport interface DialogRootProps extends DialogProps {\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 dialog state and provides it to the compound parts. */\nexport function DialogRoot(props: DialogRootProps): ReactNode {\n  const context = useDialogRoot({ ...props, coreFactory: createDialogCore });\n\n  return <DialogContextProvider value={context}>{props.children}</DialogContextProvider>;\n}\n\nfunction createDialogCore(): DialogCore {\n  return new DialogCore();\n}\n\nexport namespace DialogRoot {\n  export type Props = DialogRootProps;\n}\n"],"mappings":";;;;;;;AAeA,SAAgB,WAAW,OAAmC;;CAC9BA,IAAAA;CAAK,IAAA,EAAA,OAAA,OAAA;EAAL,KAAA;GAAE,GAAG;GAAO,aAAa;EAAiB;EAArC,EAAA,KAAA;;;CAAnC,MAAM,UAAU,cAAcA,EAA2C;CAElEC,IAAAA;CAA8B,IAAA,EAAA,OAAA,WAAA,EAAA,OAAgBC,MAAAA,UAAAA;EAA9C,KAAA,oBAAC,uBAAD;GAAuB,OAAO;GAAU,UAAA,MAAM;EAAgC,CAAA;EAAhD,EAAA,KAAA;EAAgBA,EAAAA,KAAAA,MAAAA;;;CAArD,OAAOD;AACT;AAEA,SAAS,mBAA+B;CACtC,OAAO,IAAI,WAAW;AACxB"}

package/dist/dev/ui/dialog/title.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { DialogCore } from "@videojs/core";
+//#region src/ui/dialog/title.d.ts
+interface DialogTitleProps extends UIComponentProps<'h2', DialogCore.State> {}
+/** Renders the heading that labels the dialog. */
+declare const DialogTitle: import("react").ForwardRefExoticComponent<DialogTitleProps>;
+declare namespace DialogTitle {
+  type Props = DialogTitleProps;
+  type State = DialogCore.State;
+}
+//#endregion
+export { DialogTitle, DialogTitleProps };
+//# sourceMappingURL=title.d.ts.map

package/dist/dev/ui/dialog/title.js

@@ -0,0 +1,14 @@
+import { useDialogContext } from "./context.js";
+import { createContextPart } from "../create-context-part.js";
+//#region src/ui/dialog/title.tsx
+/** Renders the heading that labels the dialog. */
+const DialogTitle = createContextPart({
+	displayName: "DialogTitle",
+	tag: "h2",
+	useContext: useDialogContext,
+	getProps: (state) => ({ id: state.titleId })
+});
+//#endregion
+export { DialogTitle };
+
+//# sourceMappingURL=title.js.map

package/dist/dev/ui/dialog/title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.js","names":[],"sources":["../../../../src/ui/dialog/title.tsx"],"sourcesContent":["import type { DialogCore } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useDialogContext } from './context';\n\nexport interface DialogTitleProps extends UIComponentProps<'h2', DialogCore.State> {}\n\n/** Renders the heading that labels the dialog. */\nexport const DialogTitle = createContextPart<DialogTitleProps, DialogCore.State>({\n  displayName: 'DialogTitle',\n  tag: 'h2',\n  useContext: useDialogContext,\n  getProps: (state) => ({ id: state.titleId }),\n});\n\nexport namespace DialogTitle {\n  export type Props = DialogTitleProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;AASA,MAAa,cAAc,kBAAsD;CAC/E,aAAa;CACb,KAAK;CACL,YAAY;CACZ,WAAW,WAAW,EAAE,IAAI,MAAM,QAAQ;AAC5C,CAAC"}

package/dist/dev/ui/dialog/trigger.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { DialogCore } from "@videojs/core";
+//#region src/ui/dialog/trigger.d.ts
+interface DialogTriggerProps extends UIComponentProps<'button', DialogCore.State> {}
+/** Renders a button that opens the dialog. */
+declare const DialogTrigger: import("react").ForwardRefExoticComponent<Omit<DialogTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace DialogTrigger {
+  type Props = DialogTriggerProps;
+  type State = DialogCore.State;
+}
+//#endregion
+export { DialogTrigger, DialogTriggerProps };
+//# sourceMappingURL=trigger.d.ts.map

package/dist/dev/ui/dialog/trigger.js

@@ -0,0 +1,30 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useDialogContext } from "./context.js";
+import { forwardRef, useCallback } from "react";
+//#region src/ui/dialog/trigger.tsx
+/** Renders a button that opens the dialog. */
+const DialogTrigger = forwardRef(function DialogTrigger({ render, className, style, ...elementProps }, forwardedRef) {
+	const { core, dialog, state, stateAttrMap, popupId } = useDialogContext();
+	const triggerRef = useCallback((element) => dialog.setTriggerElement(element), [dialog]);
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef, triggerRef],
+		props: [
+			{
+				type: "button",
+				...core.getTriggerAttrs(state, popupId)
+			},
+			dialog.triggerProps,
+			elementProps
+		]
+	});
+});
+//#endregion
+export { DialogTrigger };
+
+//# sourceMappingURL=trigger.js.map

package/dist/dev/ui/dialog/trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.js","names":[],"sources":["../../../../src/ui/dialog/trigger.tsx"],"sourcesContent":["import type { DialogCore } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from './context';\n\nexport interface DialogTriggerProps extends UIComponentProps<'button', DialogCore.State> {}\n\n/** Renders a button that opens the dialog. */\nexport const DialogTrigger = forwardRef<HTMLButtonElement, DialogTriggerProps>(function DialogTrigger(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, dialog, state, stateAttrMap, popupId } = useDialogContext();\n\n  const triggerRef = useCallback((element: HTMLButtonElement | null) => dialog.setTriggerElement(element), [dialog]);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, triggerRef],\n      props: [{ type: 'button' as const, ...core.getTriggerAttrs(state, popupId) }, dialog.triggerProps, elementProps],\n    }\n  );\n});\n\nexport namespace DialogTrigger {\n  export type Props = DialogTriggerProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,gBAAgB,WAAkD,SAAS,cACtF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,QAAQ,OAAO,cAAc,YAAY,iBAAiB;CAExE,MAAM,aAAa,aAAa,YAAsC,OAAO,kBAAkB,OAAO,GAAG,CAAC,MAAM,CAAC;CAEjH,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC;IAAE,MAAM;IAAmB,GAAG,KAAK,gBAAgB,OAAO,OAAO;GAAE;GAAG,OAAO;GAAc;EAAY;CACjH,CACF;AACF,CAAC"}

package/dist/dev/ui/error-dialog/close.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { DialogCore } from "@videojs/core";
+//#region src/ui/error-dialog/close.d.ts
+interface ErrorDialogCloseProps extends UIComponentProps<'button', DialogCore.State> {}
+/** Renders a localized button that closes the dialog and dismisses the player error. */
+declare const ErrorDialogClose: import("react").ForwardRefExoticComponent<Omit<ErrorDialogCloseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace ErrorDialogClose {
+  type Props = ErrorDialogCloseProps;
+  type State = DialogCore.State;
+}
+//#endregion
+export { ErrorDialogClose, ErrorDialogCloseProps };
+//# sourceMappingURL=close.d.ts.map

package/dist/dev/ui/error-dialog/close.js

@@ -0,0 +1,36 @@
+import { useTranslator } from "../../i18n/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useDialogContext } from "../dialog/context.js";
+import { getErrorDialogDismissText } from "@videojs/core";
+import { translateText } from "@videojs/core/i18n";
+import { forwardRef, useCallback } from "react";
+//#region src/ui/error-dialog/close.tsx
+/** Renders a localized button that closes the dialog and dismisses the player error. */
+const ErrorDialogClose = forwardRef(function ErrorDialogClose({ render, className, style, disabled, children, ...elementProps }, forwardedRef) {
+	const t = useTranslator();
+	const { dialog, state, stateAttrMap } = useDialogContext();
+	const handleClick = useCallback(() => {
+		if (disabled) return;
+		dialog.close();
+	}, [dialog, disabled]);
+	const content = children ?? translateText(getErrorDialogDismissText(), t);
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: forwardedRef,
+		props: [{
+			type: "button",
+			disabled,
+			onClick: handleClick,
+			children: content
+		}, elementProps]
+	});
+});
+//#endregion
+export { ErrorDialogClose };
+
+//# sourceMappingURL=close.js.map

package/dist/dev/ui/error-dialog/close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"close.js","names":[],"sources":["../../../../src/ui/error-dialog/close.tsx"],"sourcesContent":["import { type DialogCore, getErrorDialogDismissText } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode, useCallback } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from '../dialog/context';\n\nexport interface ErrorDialogCloseProps extends UIComponentProps<'button', DialogCore.State> {}\n\n/** Renders a localized button that closes the dialog and dismisses the player error. */\nexport const ErrorDialogClose = forwardRef<HTMLButtonElement, ErrorDialogCloseProps>(function ErrorDialogClose(\n  { render, className, style, disabled, children, ...elementProps },\n  forwardedRef\n) {\n  const t = useTranslator();\n  const { dialog, state, stateAttrMap } = useDialogContext();\n\n  const handleClick = useCallback(() => {\n    if (disabled) return;\n\n    dialog.close();\n  }, [dialog, disabled]);\n\n  const content: ReactNode = children ?? translateText(getErrorDialogDismissText(), t);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: forwardedRef,\n      props: [{ type: 'button' as const, disabled, onClick: handleClick, children: content }, elementProps],\n    }\n  );\n});\n\nexport namespace ErrorDialogClose {\n  export type Props = ErrorDialogCloseProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;;;;AAYA,MAAa,mBAAmB,WAAqD,SAAS,iBAC5F,EAAE,QAAQ,WAAW,OAAO,UAAU,UAAU,GAAG,gBACnD,cACA;CACA,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,QAAQ,OAAO,iBAAiB,iBAAiB;CAEzD,MAAM,cAAc,kBAAkB;EACpC,IAAI,UAAU;EAEd,OAAO,MAAM;CACf,GAAG,CAAC,QAAQ,QAAQ,CAAC;CAErB,MAAM,UAAqB,YAAY,cAAc,0BAA0B,GAAG,CAAC;CAEnF,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,MAAM;GAAmB;GAAU,SAAS;GAAa,UAAU;EAAQ,GAAG,YAAY;CACtG,CACF;AACF,CAAC"}

package/dist/dev/ui/error-dialog/description.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { DialogCore } from "@videojs/core";
+//#region src/ui/error-dialog/description.d.ts
+interface ErrorDialogDescriptionProps extends UIComponentProps<'p', DialogCore.State> {}
+/** Renders the localized playback error message, or authored children when provided. */
+declare const ErrorDialogDescription: import("react").ForwardRefExoticComponent<Omit<ErrorDialogDescriptionProps, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+declare namespace ErrorDialogDescription {
+  type Props = ErrorDialogDescriptionProps;
+  type State = DialogCore.State;
+}
+//#endregion
+export { ErrorDialogDescription, ErrorDialogDescriptionProps };
+//# sourceMappingURL=description.d.ts.map

package/dist/dev/ui/error-dialog/description.js

@@ -0,0 +1,33 @@
+import { useTranslator } from "../../i18n/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useDialogContext } from "../dialog/context.js";
+import { useErrorDialogContext } from "./context.js";
+import { resolveErrorDialogDescription } from "@videojs/core";
+import { translateText } from "@videojs/core/i18n";
+import { forwardRef } from "react";
+//#region src/ui/error-dialog/description.tsx
+/** Renders the localized playback error message, or authored children when provided. */
+const ErrorDialogDescription = forwardRef(function ErrorDialogDescription({ render, className, style, children, ...elementProps }, forwardedRef) {
+	const t = useTranslator();
+	const { state, stateAttrMap } = useDialogContext();
+	const { lastError } = useErrorDialogContext();
+	const description = resolveErrorDialogDescription(lastError);
+	const content = children ?? translateText(description, t);
+	return renderElement("p", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: forwardedRef,
+		props: [{
+			id: state.descriptionId,
+			children: content
+		}, elementProps]
+	});
+});
+//#endregion
+export { ErrorDialogDescription };
+
+//# sourceMappingURL=description.js.map

package/dist/dev/ui/error-dialog/description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"description.js","names":[],"sources":["../../../../src/ui/error-dialog/description.tsx"],"sourcesContent":["import { type DialogCore, resolveErrorDialogDescription } from '@videojs/core';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useDialogContext } from '../dialog/context';\nimport { useErrorDialogContext } from './context';\n\nexport interface ErrorDialogDescriptionProps extends UIComponentProps<'p', DialogCore.State> {}\n\n/** Renders the localized playback error message, or authored children when provided. */\nexport const ErrorDialogDescription = forwardRef<HTMLParagraphElement, ErrorDialogDescriptionProps>(\n  function ErrorDialogDescription({ render, className, style, children, ...elementProps }, forwardedRef) {\n    const t = useTranslator();\n    const { state, stateAttrMap } = useDialogContext();\n    const { lastError } = useErrorDialogContext();\n    const description = resolveErrorDialogDescription(lastError);\n    const content: ReactNode = children ?? translateText(description, t);\n\n    return renderElement(\n      'p',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap,\n        ref: forwardedRef,\n        props: [{ id: state.descriptionId, children: content }, elementProps],\n      }\n    );\n  }\n);\n\nexport namespace ErrorDialogDescription {\n  export type Props = ErrorDialogDescriptionProps;\n  export type State = DialogCore.State;\n}\n"],"mappings":";;;;;;;;;AAaA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,gBAAgB,cAAc;CACrG,MAAM,IAAI,cAAc;CACxB,MAAM,EAAE,OAAO,iBAAiB,iBAAiB;CACjD,MAAM,EAAE,cAAc,sBAAsB;CAC5C,MAAM,cAAc,8BAA8B,SAAS;CAC3D,MAAM,UAAqB,YAAY,cAAc,aAAa,CAAC;CAEnE,OAAO,cACL,KACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO,CAAC;GAAE,IAAI,MAAM;GAAe,UAAU;EAAQ,GAAG,YAAY;CACtE,CACF;AACF,CACF"}

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

@@ -1,10 +1,10 @@
-import { DialogBackdrop, DialogBackdropProps } from "../dialog/dialog-backdrop.js";
-import { DialogPopup, DialogPopupProps } from "../dialog/dialog-popup.js";
+import { DialogBackdrop, DialogBackdropProps } from "../dialog/backdrop.js";
+import { DialogPopup, DialogPopupProps } from "../dialog/popup.js";
 import "../dialog/index.parts.js";
-import { ErrorDialogClose, ErrorDialogCloseProps } from "./error-dialog-close.js";
-import { ErrorDialogDescription, ErrorDialogDescriptionProps } from "./error-dialog-description.js";
-import { ErrorDialogRoot, ErrorDialogRootProps } from "./error-dialog-root.js";
-import { ErrorDialogTitle, ErrorDialogTitleProps } from "./error-dialog-title.js";
+import { ErrorDialogClose, ErrorDialogCloseProps } from "./close.js";
+import { ErrorDialogDescription, ErrorDialogDescriptionProps } from "./description.js";
+import { ErrorDialogRoot, ErrorDialogRootProps } from "./root.js";
+import { ErrorDialogTitle, ErrorDialogTitleProps } from "./title.js";
 declare namespace index_parts_d_exports {
   export { DialogBackdrop as Backdrop, DialogBackdropProps as BackdropProps, ErrorDialogClose as Close, ErrorDialogCloseProps as CloseProps, ErrorDialogDescription as Description, ErrorDialogDescriptionProps as DescriptionProps, DialogPopup as Popup, DialogPopupProps as PopupProps, ErrorDialogRoot as Root, ErrorDialogRootProps as RootProps, ErrorDialogTitle as Title, ErrorDialogTitleProps as TitleProps };
 }