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

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

@@ -0,0 +1,28 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useControlsContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/controls/backdrop.tsx
+/**
+* Presentational layer behind player controls. Renders a `<div>` with the controls state data attributes so skins can
+* style it without reaching across sibling components.
+*/
+const ControlsBackdrop = forwardRef(function ControlsBackdrop({ render, className, style, ...elementProps }, forwardedRef) {
+	const { state, stateAttrMap } = useControlsContext();
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef],
+		props: [{
+			role: "presentation",
+			"aria-hidden": true
+		}, elementProps]
+	});
+});
+//#endregion
+export { ControlsBackdrop };
+
+//# sourceMappingURL=backdrop.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"backdrop.js","names":[],"sources":["../../../../src/ui/controls/backdrop.tsx"],"sourcesContent":["import type { ControlsCore } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useControlsContext } from './context';\n\nexport interface ControlsBackdropProps extends UIComponentProps<'div', ControlsCore.State> {}\n\n/**\n * Presentational layer behind player controls. Renders a `<div>` with the controls state data attributes so skins can\n * style it without reaching across sibling components.\n */\nexport const ControlsBackdrop = forwardRef<HTMLDivElement, ControlsBackdropProps>(function ControlsBackdrop(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { state, stateAttrMap } = useControlsContext();\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 ControlsBackdrop {\n  export type Props = ControlsBackdropProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;;;;AAaA,MAAa,mBAAmB,WAAkD,SAAS,iBACzF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,OAAO,iBAAiB,mBAAmB;CAEnD,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/controls/content.d.ts

@@ -0,0 +1,16 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { ControlsCore } from "@videojs/core";
+import { ReactNode } from "react";
+//#region src/ui/controls/content.d.ts
+interface ControlsContentProps extends UIComponentProps<'div', ControlsCore.State> {
+  children?: ReactNode | undefined;
+}
+/** Renders the interactive controls surface. */
+declare const ControlsContent: import("react").ForwardRefExoticComponent<Omit<ControlsContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace ControlsContent {
+  type Props = ControlsContentProps;
+  type State = ControlsCore.State;
+}
+//#endregion
+export { ControlsContent, ControlsContentProps };
+//# sourceMappingURL=content.d.ts.map

package/dist/dev/ui/controls/content.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"content.d.ts","names":[],"sources":["../../../../src/ui/controls/content.tsx"],"mappings":";;;;UAQiB,6BAA6B,wBAAwB,aAAa;EACjF,WAAW;;;cAIA,iCAAe,0BAAA,KAAA,+CAAA,cAAA;kBAmBX;OACH,QAAQ;OACR,QAAQ,aAAa"}

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

@@ -0,0 +1,27 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useControlsContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/controls/content.tsx
+/** Renders the interactive controls surface. */
+const ControlsContent = forwardRef(function ControlsContent(componentProps, forwardedRef) {
+	const { render, className, style, children, ...elementProps } = componentProps;
+	const { state, stateAttrMap } = useControlsContext();
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef],
+		props: [
+			{ children },
+			elementProps,
+			{ "data-interactive": "" }
+		]
+	});
+});
+//#endregion
+export { ControlsContent };
+
+//# sourceMappingURL=content.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"content.js","names":[],"sources":["../../../../src/ui/controls/content.tsx"],"sourcesContent":["import type { ControlsCore } from '@videojs/core';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useControlsContext } from './context';\n\nexport interface ControlsContentProps extends UIComponentProps<'div', ControlsCore.State> {\n  children?: ReactNode | undefined;\n}\n\n/** Renders the interactive controls surface. */\nexport const ControlsContent = forwardRef(function ControlsContent(\n  componentProps: ControlsContentProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n  const { state, stateAttrMap } = useControlsContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef],\n      props: [{ children }, elementProps, { 'data-interactive': '' }],\n    }\n  );\n});\n\nexport namespace ControlsContent {\n  export type Props = ControlsContentProps;\n  export type State = ControlsCore.State;\n}\n"],"mappings":";;;;;AAaA,MAAa,kBAAkB,WAAW,SAAS,gBACjD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAChE,MAAM,EAAE,OAAO,iBAAiB,mBAAmB;CAEnD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,YAAY;EAClB,OAAO;GAAC,EAAE,SAAS;GAAG;GAAc,EAAE,oBAAoB,GAAG;EAAC;CAChE,CACF;AACF,CAAC"}

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

@@ -0,0 +1,15 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { ControlsCore } from "@videojs/core";
+import { ReactNode } from "react";
+//#region src/ui/controls/group.d.ts
+interface ControlsGroupProps extends UIComponentProps<'div', ControlsCore.State> {
+  children?: ReactNode | undefined;
+}
+/** Layout group for related controls; sets `role="group"` when labeled. */
+declare const ControlsGroup: import("react").ForwardRefExoticComponent<Omit<ControlsGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace ControlsGroup {
+  type Props = ControlsGroupProps;
+}
+//#endregion
+export { ControlsGroup, ControlsGroupProps };
+//# sourceMappingURL=group.d.ts.map

package/dist/dev/ui/controls/group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"group.d.ts","names":[],"sources":["../../../../src/ui/controls/group.tsx"],"mappings":";;;;UAQiB,2BAA2B,wBAAwB,aAAa;EAC/E,WAAW;;;cAIA,+BAAa,0BAAA,KAAA,6CAAA,cAAA;kBAqBT;OACH,QAAQ"}

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

@@ -0,0 +1,27 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useControlsContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/controls/group.tsx
+/** Layout group for related controls; sets `role="group"` when labeled. */
+const ControlsGroup = forwardRef(function ControlsGroup(componentProps, forwardedRef) {
+	const { render, className, style, children, ...elementProps } = componentProps;
+	const { state, stateAttrMap } = useControlsContext();
+	const role = elementProps["aria-label"] || elementProps["aria-labelledby"] ? "group" : void 0;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef],
+		props: [{
+			role,
+			children
+		}, elementProps]
+	});
+});
+//#endregion
+export { ControlsGroup };
+
+//# sourceMappingURL=group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"group.js","names":[],"sources":["../../../../src/ui/controls/group.tsx"],"sourcesContent":["import type { ControlsCore } from '@videojs/core';\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useControlsContext } from './context';\n\nexport interface ControlsGroupProps extends UIComponentProps<'div', ControlsCore.State> {\n  children?: ReactNode | undefined;\n}\n\n/** Layout group for related controls; sets `role=\"group\"` when labeled. */\nexport const ControlsGroup = forwardRef(function ControlsGroup(\n  componentProps: ControlsGroupProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const { state, stateAttrMap } = useControlsContext();\n  const role = elementProps['aria-label'] || elementProps['aria-labelledby'] ? 'group' : undefined;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef],\n      props: [{ role, children }, elementProps],\n    }\n  );\n});\n\nexport namespace ControlsGroup {\n  export type Props = ControlsGroupProps;\n}\n"],"mappings":";;;;;AAaA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;CAEhE,MAAM,EAAE,OAAO,iBAAiB,mBAAmB;CACnD,MAAM,OAAO,aAAa,iBAAiB,aAAa,qBAAqB,UAAU,KAAA;CAEvF,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC;GAAE;GAAM;EAAS,GAAG,YAAY;CAC1C,CACF;AACF,CAAC"}

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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","names":[],"sources":["../../../../src/ui/controls/root.tsx"],"mappings":";;;UAQiB,0BAA0B;EACzC,WAAW;;;iBAIG,eACd,UACA,cACC,oBAAoB;kBAoBN;OACH,QAAQ;OACR,QAAQ,aAAa"}

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

@@ -0,0 +1,30 @@
+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 }) {
+	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  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;CAC/B,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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"backdrop.d.ts","names":[],"sources":["../../../../src/ui/dialog/backdrop.tsx"],"mappings":";;;UAOiB,4BAA4B,wBAAwB,WAAW;;cAGnE,gCAAc,0BAAA,KAAA,8CAAA,cAAA;kBAmBV;OACH,QAAQ;OACR,QAAQ,WAAW"}

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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"close.d.ts","names":[],"sources":["../../../../src/ui/dialog/close.tsx"],"mappings":";;;UAOiB,yBAAyB,2BAA2B,WAAW;;cAGnE,6BAAW,0BAAA,KAAA,2CAAA,cAAA;kBAsBP;OACH,QAAQ;OACR,QAAQ,WAAW"}

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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"description.d.ts","names":[],"sources":["../../../../src/ui/dialog/description.tsx"],"mappings":";;;UAMiB,+BAA+B,sBAAsB,WAAW;;cAGpE,mCAAiB,0BAAA;kBAOb;OACH,QAAQ;OACR,QAAQ,WAAW"}

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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.d.ts","names":[],"sources":["../../../../src/ui/dialog/popup.tsx"],"mappings":";;;UAOiB,yBAAyB,wBAAwB,WAAW;;cAGhE,6BAAW,0BAAA,KAAA,2CAAA,cAAA;kBAsBP;OACH,QAAQ;OACR,QAAQ,WAAW"}

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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","names":[],"sources":["../../../../src/ui/dialog/root.tsx"],"mappings":";;;UAMiB,wBAAwB;;EAEvC,gBAAgB;;EAEhB,wBAAwB;EACxB,WAAW;;;iBAIG,WAAW,OAAO,kBAAkB;kBAUnC;OACH,QAAQ"}

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

@@ -0,0 +1,23 @@
+import { DialogContextProvider } from "./context.js";
+import { useDialogRoot } from "./use-dialog-root.js";
+import { DialogCore } from "@videojs/core";
+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 context = useDialogRoot({
+		...props,
+		coreFactory: createDialogCore
+	});
+	return /* @__PURE__ */ jsx(DialogContextProvider, {
+		value: context,
+		children: props.children
+	});
+}
+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":[],"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;CAC5D,MAAM,UAAU,cAAc;EAAE,GAAG;EAAO,aAAa;CAAiB,CAAC;CAEzE,OAAO,oBAAC,uBAAD;EAAuB,OAAO;EAAU,UAAA,MAAM;CAAgC,CAAA;AACvF;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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.d.ts","names":[],"sources":["../../../../src/ui/dialog/title.tsx"],"mappings":";;;UAMiB,yBAAyB,uBAAuB,WAAW;;cAG/D,6BAAW,0BAAA;kBAOP;OACH,QAAQ;OACR,QAAQ,WAAW"}

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.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.d.ts","names":[],"sources":["../../../../src/ui/dialog/trigger.tsx"],"mappings":";;;UAOiB,2BAA2B,2BAA2B,WAAW;;cAGrE,+BAAa,0BAAA,KAAA,6CAAA,cAAA;kBAoBT;OACH,QAAQ;OACR,QAAQ,WAAW"}