@videojs/react 10.0.0-beta.8 → 10.0.0-rc.1

package/dist/default/ui/create-context-part.js

@@ -1,8 +1,5 @@
-'use client';
-
 import { renderElement } from "../utils/use-render.js";
 import { forwardRef } from "react";
-
 //#region src/ui/create-context-part.tsx
 function createContextPart(config) {
 	const { displayName, tag, useContext, staticProps, getProps } = config;
@@ -28,7 +25,7 @@ function createContextPart(config) {
 	Component.displayName = displayName;
 	return Component;
 }
-
 //#endregion
 export { createContextPart };
+
 //# sourceMappingURL=create-context-part.js.map

package/dist/default/ui/create-context-part.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-context-part.js","names":[],"sources":["../../../src/ui/create-context-part.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap } from '@videojs/core';\nimport type { ForwardRefExoticComponent } from 'react';\nimport { forwardRef } from 'react';\nimport type { UIComponentProps } from '@/utils/types';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\n\ninterface ContextPartConfig<Props extends object, State extends object> {\n  displayName: string;\n  tag: keyof React.JSX.IntrinsicElements;\n  useContext: () => { state: State; stateAttrMap: StateAttrMap<State> };\n  staticProps?: Partial<Props>;\n  /** Derive props from state on each render (e.g. `id` from a state field). */\n  getProps?: (state: State) => Record<string, unknown>;\n}\n\nexport function createContextPart<Props extends UIComponentProps<any, any>, State extends object>(\n  config: ContextPartConfig<Props, State>\n): ForwardRefExoticComponent<Props> {\n  const { displayName, tag, useContext, staticProps, getProps } = config;\n\n  const Component = forwardRef<HTMLElement, Props>(function ContextPart(componentProps, forwardedRef) {\n    const { render, className, style, ...elementProps } = componentProps;\n    const context = useContext();\n    const dynamicProps = getProps?.(context.state);\n\n    return renderElement(tag, { render, className, style } as renderElementFn.ComponentProps<State>, {\n      state: context.state,\n      stateAttrMap: context.stateAttrMap,\n      ref: forwardedRef,\n      props: [staticProps, dynamicProps, elementProps].filter(Boolean),\n    });\n  });\n\n  Component.displayName = displayName;\n\n  return Component as ForwardRefExoticComponent<Props>;\n}\n"],"mappings":";;;;;;AAkBA,SAAgB,kBACd,QACkC;CAClC,MAAM,EAAE,aAAa,KAAK,YAAY,aAAa,aAAa;CAEhE,MAAM,YAAY,WAA+B,SAAS,YAAY,gBAAgB,cAAc;EAClG,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;EACtD,MAAM,UAAU,YAAY;EAC5B,MAAM,eAAe,WAAW,QAAQ,MAAM;AAE9C,SAAO,cAAc,KAAK;GAAE;GAAQ;GAAW;GAAO,EAA2C;GAC/F,OAAO,QAAQ;GACf,cAAc,QAAQ;GACtB,KAAK;GACL,OAAO;IAAC;IAAa;IAAc;IAAa,CAAC,OAAO,QAAQ;GACjE,CAAC;GACF;AAEF,WAAU,cAAc;AAExB,QAAO"}
+{"version":3,"file":"create-context-part.js","names":[],"sources":["../../../src/ui/create-context-part.tsx"],"sourcesContent":["import type { StateAttrMap } from '@videojs/core';\nimport type { ForwardRefExoticComponent } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '@/utils/types';\n\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\n\ninterface ContextPartConfig<Props extends object, State extends object> {\n  displayName: string;\n  tag: keyof React.JSX.IntrinsicElements;\n  useContext: () => { state: State; stateAttrMap: StateAttrMap<State> };\n  staticProps?: Partial<Props>;\n  /** Derive props from state on each render (e.g. `id` from a state field). */\n  getProps?: (state: State) => Record<string, unknown>;\n}\n\nexport function createContextPart<Props extends UIComponentProps<any, any>, State extends object>(\n  config: ContextPartConfig<Props, State>\n): ForwardRefExoticComponent<Props> {\n  const { displayName, tag, useContext, staticProps, getProps } = config;\n\n  const Component = forwardRef<HTMLElement, Props>(function ContextPart(componentProps, forwardedRef) {\n    const { render, className, style, ...elementProps } = componentProps;\n    const context = useContext();\n    const dynamicProps = getProps?.(context.state);\n\n    return renderElement(tag, { render, className, style } as renderElementFn.ComponentProps<State>, {\n      state: context.state,\n      stateAttrMap: context.stateAttrMap,\n      ref: forwardedRef,\n      props: [staticProps, dynamicProps, elementProps].filter(Boolean),\n    });\n  });\n\n  Component.displayName = displayName;\n\n  return Component as ForwardRefExoticComponent<Props>;\n}\n"],"mappings":";;;AAkBA,SAAgB,kBACd,QACkC;CAClC,MAAM,EAAE,aAAa,KAAK,YAAY,aAAa,aAAa;CAEhE,MAAM,YAAY,WAA+B,SAAS,YAAY,gBAAgB,cAAc;EAClG,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;EACtD,MAAM,UAAU,WAAW;EAC3B,MAAM,eAAe,WAAW,QAAQ,KAAK;EAE7C,OAAO,cAAc,KAAK;GAAE;GAAQ;GAAW;EAAM,GAA4C;GAC/F,OAAO,QAAQ;GACf,cAAc,QAAQ;GACtB,KAAK;GACL,OAAO;IAAC;IAAa;IAAc;GAAY,CAAC,CAAC,OAAO,OAAO;EACjE,CAAC;CACH,CAAC;CAED,UAAU,cAAc;CAExB,OAAO;AACT"}

package/dist/default/ui/create-media-button.js

@@ -1,15 +1,21 @@
-'use client';
-
-import { usePlayer } from "../player/context.js";
+import { useTranslator } from "../i18n/context.js";
+import { useContainer, usePlayer } from "../player/context.js";
 import { renderElement } from "../utils/use-render.js";
 import { useButton } from "./hooks/use-button.js";
+import { useHotkeyShortcut } from "./hotkey/use-hotkey-shortcut.js";
+import { useOptionalMenuTriggerChildContext } from "./menu/context.js";
+import { useOptionalTooltipContext } from "./tooltip/context.js";
 import "@videojs/core/dom";
-import { forwardRef, useState } from "react";
-
+import { isText, translateText } from "@videojs/core/i18n";
+import { forwardRef, useLayoutEffect, useState } from "react";
+import { isUndefined } from "@videojs/utils/predicate";
 //#region src/ui/create-media-button.tsx
+function getLabelParams(core, state) {
+	return core.getLabelParams?.(state);
+}
 /** Creates a media button React component from a core class and config. */
 function createMediaButton(config) {
-	const { displayName, core: CoreClass, stateAttrMap, selector, action } = config;
+	const { displayName, core: CoreClass, stateAttrMap, selector, action, hotkeyAction, hotkeyValue, tooltipLabel, isSupported, focusContainerOnPointerActivation } = config;
 	const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));
 	const Component = forwardRef(function MediaButton(componentProps, forwardedRef) {
 		const { render, className, style, ...rest } = componentProps;
@@ -17,17 +23,50 @@ function createMediaButton(config) {
 		const elementProps = {};
 		for (const key of Object.keys(rest)) if (corePropKeys.has(key)) coreProps[key] = rest[key];
 		else elementProps[key] = rest[key];
+		const tooltipCtx = useOptionalTooltipContext();
+		const menuTriggerChild = useOptionalMenuTriggerChildContext();
+		const setTooltipContent = tooltipCtx?.setContent;
 		const feature = usePlayer(selector);
+		const container = useContainer();
+		const shortcut = useHotkeyShortcut(hotkeyAction, hotkeyValue?.(coreProps));
+		const translator = useTranslator();
 		const [core] = useState(() => new CoreClass());
+		if (corePropKeys.has("menuTrigger") && isUndefined(coreProps.menuTrigger)) coreProps.menuTrigger = menuTriggerChild;
 		core.setProps(coreProps);
 		const { getButtonProps, buttonRef } = useButton({
 			displayName,
-			onActivate: () => action(core, feature),
+			onActivate: (_event, source) => {
+				if (focusContainerOnPointerActivation && source === "pointer") container?.focus({ preventScroll: true });
+				Promise.resolve(action(core, feature)).catch((error) => {});
+			},
 			isDisabled: () => !!coreProps.disabled || !feature
 		});
-		if (!feature) return null;
-		core.setMedia(feature);
-		const state = core.getState();
+		if (feature) core.setMedia(feature);
+		const state = feature ? core.getState() : null;
+		const supported = state ? isSupported?.(state) ?? true : false;
+		const label = state && supported ? translateText(core.getLabel(state), translator, getLabelParams(core, state)) : void 0;
+		const tooltipText = state && supported ? tooltipLabel?.(core, state) ?? label : void 0;
+		useLayoutEffect(() => {
+			if (!setTooltipContent) return;
+			setTooltipContent(tooltipText ? {
+				label: tooltipText,
+				shortcut: shortcut.shortcut
+			} : void 0);
+			return () => setTooltipContent(void 0);
+		}, [
+			setTooltipContent,
+			tooltipText,
+			shortcut.shortcut
+		]);
+		if (!feature || !state) return null;
+		if (!supported) return null;
+		const attrs = core.getAttrs(state);
+		const ariaLabel = attrs["aria-label"];
+		const resolvedAttrs = {
+			...attrs,
+			...isText(ariaLabel) ? { "aria-label": translateText(ariaLabel, translator, getLabelParams(core, state)) } : void 0,
+			"aria-keyshortcuts": shortcut.aria
+		};
 		return renderElement("button", {
 			render,
 			className,
@@ -37,16 +76,16 @@ function createMediaButton(config) {
 			stateAttrMap,
 			ref: [forwardedRef, buttonRef],
 			props: [
-				core.getAttrs(state),
-				elementProps,
-				getButtonProps()
+				getButtonProps(),
+				resolvedAttrs,
+				elementProps
 			]
 		});
 	});
 	Component.displayName = displayName;
 	return Component;
 }
-
 //#endregion
 export { createMediaButton };
+
 //# sourceMappingURL=create-media-button.js.map

package/dist/default/ui/create-media-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"create-media-button.js","names":[],"sources":["../../../src/ui/create-media-button.tsx"],"sourcesContent":["'use client';\n\nimport type { InferComponentState, InferMediaState, MediaUIComponent, StateAttrMap } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport type { Selector } from '@videojs/store';\nimport type { ForwardedRef, ForwardRefExoticComponent, RefAttributes } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../player/context';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\nimport { useButton } from './hooks/use-button';\n\ninterface MediaButtonConfig<Core extends Required<MediaUIComponent>> {\n  displayName: string;\n  core: { new (): Core; defaultProps: Record<string, unknown> };\n  stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  selector: Selector<object, InferMediaState<Core> | undefined>;\n  action: (core: Core, state: InferMediaState<Core>) => void;\n}\n\n/** Creates a media button React component from a core class and config. */\nexport function createMediaButton<Core extends Required<MediaUIComponent>, Props extends object>(\n  config: MediaButtonConfig<Core>\n): ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> {\n  const { displayName, core: CoreClass, stateAttrMap, selector, action } = config;\n\n  // Props that exist in the core's defaultProps are routed to setProps; the rest go to the DOM element.\n  const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));\n\n  const Component = forwardRef(function MediaButton(\n    componentProps: Record<string, unknown>,\n    forwardedRef: ForwardedRef<HTMLButtonElement>\n  ) {\n    const { render, className, style, ...rest } = componentProps;\n\n    const coreProps: Record<string, unknown> = {};\n    const elementProps: Record<string, unknown> = {};\n\n    for (const key of Object.keys(rest)) {\n      if (corePropKeys.has(key)) {\n        coreProps[key] = rest[key];\n      } else {\n        elementProps[key] = rest[key];\n      }\n    }\n\n    const feature = usePlayer(selector);\n\n    const [core] = useState(() => new CoreClass());\n    core.setProps(coreProps);\n\n    const { getButtonProps, buttonRef } = useButton({\n      displayName,\n      onActivate: () => action(core, feature!),\n      isDisabled: () => !!coreProps.disabled || !feature,\n    });\n\n    if (!feature) {\n      if (__DEV__) logMissingFeature(displayName, selector.displayName ?? displayName);\n      return null;\n    }\n\n    type State = InferComponentState<Core>;\n\n    core.setMedia(feature);\n    const state = core.getState() as State;\n\n    return renderElement(\n      'button',\n      { render, className, style } as renderElementFn.ComponentProps<InferComponentState<Core>>,\n      {\n        state,\n        stateAttrMap,\n        ref: [forwardedRef, buttonRef],\n        props: [core.getAttrs(state), elementProps, getButtonProps()],\n      }\n    );\n  });\n\n  Component.displayName = displayName;\n\n  return Component as unknown as ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>;\n}\n"],"mappings":";;;;;;;;;;AAsBA,SAAgB,kBACd,QACqE;CACrE,MAAM,EAAE,aAAa,MAAM,WAAW,cAAc,UAAU,WAAW;CAGzE,MAAM,eAAe,IAAI,IAAI,OAAO,KAAK,UAAU,aAAa,CAAC;CAEjE,MAAM,YAAY,WAAW,SAAS,YACpC,gBACA,cACA;EACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,SAAS;EAE9C,MAAM,YAAqC,EAAE;EAC7C,MAAM,eAAwC,EAAE;AAEhD,OAAK,MAAM,OAAO,OAAO,KAAK,KAAK,CACjC,KAAI,aAAa,IAAI,IAAI,CACvB,WAAU,OAAO,KAAK;MAEtB,cAAa,OAAO,KAAK;EAI7B,MAAM,UAAU,UAAU,SAAS;EAEnC,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;AAC9C,OAAK,SAAS,UAAU;EAExB,MAAM,EAAE,gBAAgB,cAAc,UAAU;GAC9C;GACA,kBAAkB,OAAO,MAAM,QAAS;GACxC,kBAAkB,CAAC,CAAC,UAAU,YAAY,CAAC;GAC5C,CAAC;AAEF,MAAI,CAAC,QAEH,QAAO;AAKT,OAAK,SAAS,QAAQ;EACtB,MAAM,QAAQ,KAAK,UAAU;AAE7B,SAAO,cACL,UACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA;GACA,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO;IAAC,KAAK,SAAS,MAAM;IAAE;IAAc,gBAAgB;IAAC;GAC9D,CACF;GACD;AAEF,WAAU,cAAc;AAExB,QAAO"}
+{"version":3,"file":"create-media-button.js","names":[],"sources":["../../../src/ui/create-media-button.tsx"],"sourcesContent":["import type { InferComponentState, InferMediaState, MediaButtonComponent, StateAttrMap } from '@videojs/core';\nimport { logMissingFeature } from '@videojs/core/dom';\nimport { isText, translateText } from '@videojs/core/i18n';\nimport type { Selector } from '@videojs/store';\nimport { isUndefined } from '@videojs/utils/predicate';\nimport type { ForwardedRef, ForwardRefExoticComponent, RefAttributes } from 'react';\nimport { forwardRef, useLayoutEffect, useState } from 'react';\n\nimport { useTranslator } from '../i18n/context';\nimport { useContainer, usePlayer } from '../player/context';\nimport type { renderElement as renderElementFn } from '../utils/use-render';\nimport { renderElement } from '../utils/use-render';\nimport { useButton } from './hooks/use-button';\nimport { useHotkeyShortcut } from './hotkey/use-hotkey-shortcut';\nimport { useOptionalMenuTriggerChildContext } from './menu/context';\nimport { useOptionalTooltipContext } from './tooltip/context';\n\ninterface MediaButtonConfig<Core extends Required<MediaButtonComponent>> {\n  displayName: string;\n  core: { new (): Core; defaultProps: Record<string, unknown> };\n  stateAttrMap: StateAttrMap<InferComponentState<Core>>;\n  selector: Selector<object, InferMediaState<Core> | undefined>;\n  action: (core: Core, state: InferMediaState<Core>) => void | Promise<void>;\n  hotkeyAction?: string;\n  hotkeyValue?: (props: Record<string, unknown>) => number | undefined;\n  tooltipLabel?: (core: Core, state: InferComponentState<Core>) => string | undefined;\n  /** Returns `false` to render `null` (e.g., when the underlying feature is unsupported). */\n  isSupported?: (state: InferComponentState<Core>) => boolean;\n  /** Whether pointer activation should move focus back to the player container. */\n  focusContainerOnPointerActivation?: boolean;\n}\n\ntype LabelParams = Record<string, string | number>;\ntype LabelParamsCore<State> = {\n  getLabelParams?: (state: State) => LabelParams | undefined;\n};\n\nfunction getLabelParams<Core extends MediaButtonComponent>(\n  core: Core,\n  state: InferComponentState<Core>\n): LabelParams | undefined {\n  return (core as LabelParamsCore<InferComponentState<Core>>).getLabelParams?.(state);\n}\n\n/** Creates a media button React component from a core class and config. */\nexport function createMediaButton<Core extends Required<MediaButtonComponent>, Props extends object>(\n  config: MediaButtonConfig<Core>\n): ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> {\n  const {\n    displayName,\n    core: CoreClass,\n    stateAttrMap,\n    selector,\n    action,\n    hotkeyAction,\n    hotkeyValue,\n    tooltipLabel,\n    isSupported,\n    focusContainerOnPointerActivation,\n  } = config;\n\n  // Props that exist in the core's defaultProps are routed to setProps; the rest go to the DOM element.\n  const corePropKeys = new Set(Object.keys(CoreClass.defaultProps));\n\n  const Component = forwardRef(function MediaButton(\n    componentProps: Record<string, unknown>,\n    forwardedRef: ForwardedRef<HTMLButtonElement>\n  ) {\n    const { render, className, style, ...rest } = componentProps;\n\n    const coreProps: Record<string, unknown> = {};\n    const elementProps: Record<string, unknown> = {};\n\n    for (const key of Object.keys(rest)) {\n      if (corePropKeys.has(key)) {\n        coreProps[key] = rest[key];\n      } else {\n        elementProps[key] = rest[key];\n      }\n    }\n\n    const tooltipCtx = useOptionalTooltipContext();\n    const menuTriggerChild = useOptionalMenuTriggerChildContext();\n    const setTooltipContent = tooltipCtx?.setContent;\n\n    const feature = usePlayer(selector);\n    const container = useContainer();\n    const shortcut = useHotkeyShortcut(hotkeyAction, hotkeyValue?.(coreProps));\n    const translator = useTranslator();\n\n    const [core] = useState(() => new CoreClass());\n\n    if (corePropKeys.has('menuTrigger') && isUndefined(coreProps.menuTrigger)) {\n      coreProps.menuTrigger = menuTriggerChild;\n    }\n\n    core.setProps(coreProps);\n\n    const { getButtonProps, buttonRef } = useButton({\n      displayName,\n      // `useButton` invokes `onActivate` synchronously from click/keyup\n      // handlers, so any rejection here would be unhandled. Log in dev for\n      // visibility but absorb the failure at this UI boundary.\n      onActivate: (_event, source) => {\n        if (focusContainerOnPointerActivation && source === 'pointer') {\n          container?.focus({ preventScroll: true });\n        }\n\n        Promise.resolve(action(core, feature!)).catch((error) => {\n          if (__DEV__) console.error(`[${displayName}]`, error);\n        });\n      },\n      isDisabled: () => !!coreProps.disabled || !feature,\n    });\n\n    // Derive state and label before the hooks boundary so the\n    // useLayoutEffect below (called unconditionally) can reference them.\n    type State = InferComponentState<Core>;\n\n    if (feature) core.setMedia(feature);\n\n    const state = feature ? (core.getState() as State) : null;\n    const supported = state ? (isSupported?.(state) ?? true) : false;\n    const label =\n      state && supported ? translateText(core.getLabel(state), translator, getLabelParams(core, state)) : undefined;\n    const tooltipText = state && supported ? (tooltipLabel?.(core, state) ?? label) : undefined;\n\n    // Forward label to tooltip popup content when inside a Tooltip.Root.\n    useLayoutEffect(() => {\n      if (!setTooltipContent) return;\n\n      setTooltipContent(tooltipText ? { label: tooltipText, shortcut: shortcut.shortcut } : undefined);\n      return () => setTooltipContent(undefined);\n    }, [setTooltipContent, tooltipText, shortcut.shortcut]);\n\n    if (!feature || !state) {\n      if (__DEV__) logMissingFeature(displayName, selector.displayName ?? displayName);\n\n      return null;\n    }\n\n    if (!supported) return null;\n\n    const attrs = core.getAttrs(state) as Record<string, unknown>;\n    const ariaLabel = attrs['aria-label'];\n    const resolvedAttrs = {\n      ...attrs,\n      ...(isText(ariaLabel)\n        ? { 'aria-label': translateText(ariaLabel, translator, getLabelParams(core, state)) }\n        : undefined),\n      'aria-keyshortcuts': shortcut.aria,\n    };\n\n    return renderElement(\n      'button',\n      { render, className, style } as renderElementFn.ComponentProps<InferComponentState<Core>>,\n      {\n        state,\n        stateAttrMap,\n        ref: [forwardedRef, buttonRef],\n        props: [getButtonProps(), resolvedAttrs, elementProps],\n      }\n    );\n  });\n\n  Component.displayName = displayName;\n\n  return Component as unknown as ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>>;\n}\n"],"mappings":";;;;;;;;;;;;AAqCA,SAAS,eACP,MACA,OACyB;CACzB,OAAQ,KAAoD,iBAAiB,KAAK;AACpF;;AAGA,SAAgB,kBACd,QACqE;CACrE,MAAM,EACJ,aACA,MAAM,WACN,cACA,UACA,QACA,cACA,aACA,cACA,aACA,sCACE;CAGJ,MAAM,eAAe,IAAI,IAAI,OAAO,KAAK,UAAU,YAAY,CAAC;CAEhE,MAAM,YAAY,WAAW,SAAS,YACpC,gBACA,cACA;EACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,SAAS;EAE9C,MAAM,YAAqC,CAAC;EAC5C,MAAM,eAAwC,CAAC;EAE/C,KAAK,MAAM,OAAO,OAAO,KAAK,IAAI,GAChC,IAAI,aAAa,IAAI,GAAG,GACtB,UAAU,OAAO,KAAK;OAEtB,aAAa,OAAO,KAAK;EAI7B,MAAM,aAAa,0BAA0B;EAC7C,MAAM,mBAAmB,mCAAmC;EAC5D,MAAM,oBAAoB,YAAY;EAEtC,MAAM,UAAU,UAAU,QAAQ;EAClC,MAAM,YAAY,aAAa;EAC/B,MAAM,WAAW,kBAAkB,cAAc,cAAc,SAAS,CAAC;EACzE,MAAM,aAAa,cAAc;EAEjC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;EAE7C,IAAI,aAAa,IAAI,aAAa,KAAK,YAAY,UAAU,WAAW,GACtE,UAAU,cAAc;EAG1B,KAAK,SAAS,SAAS;EAEvB,MAAM,EAAE,gBAAgB,cAAc,UAAU;GAC9C;GAIA,aAAa,QAAQ,WAAW;IAC9B,IAAI,qCAAqC,WAAW,WAClD,WAAW,MAAM,EAAE,eAAe,KAAK,CAAC;IAG1C,QAAQ,QAAQ,OAAO,MAAM,OAAQ,CAAC,CAAC,CAAC,OAAO,UAAU,CAEzD,CAAC;GACH;GACA,kBAAkB,CAAC,CAAC,UAAU,YAAY,CAAC;EAC7C,CAAC;EAMD,IAAI,SAAS,KAAK,SAAS,OAAO;EAElC,MAAM,QAAQ,UAAW,KAAK,SAAS,IAAc;EACrD,MAAM,YAAY,QAAS,cAAc,KAAK,KAAK,OAAQ;EAC3D,MAAM,QACJ,SAAS,YAAY,cAAc,KAAK,SAAS,KAAK,GAAG,YAAY,eAAe,MAAM,KAAK,CAAC,IAAI,KAAA;EACtG,MAAM,cAAc,SAAS,YAAa,eAAe,MAAM,KAAK,KAAK,QAAS,KAAA;EAGlF,sBAAsB;GACpB,IAAI,CAAC,mBAAmB;GAExB,kBAAkB,cAAc;IAAE,OAAO;IAAa,UAAU,SAAS;GAAS,IAAI,KAAA,CAAS;GAC/F,aAAa,kBAAkB,KAAA,CAAS;EAC1C,GAAG;GAAC;GAAmB;GAAa,SAAS;EAAQ,CAAC;EAEtD,IAAI,CAAC,WAAW,CAAC,OAGf,OAAO;EAGT,IAAI,CAAC,WAAW,OAAO;EAEvB,MAAM,QAAQ,KAAK,SAAS,KAAK;EACjC,MAAM,YAAY,MAAM;EACxB,MAAM,gBAAgB;GACpB,GAAG;GACH,GAAI,OAAO,SAAS,IAChB,EAAE,cAAc,cAAc,WAAW,YAAY,eAAe,MAAM,KAAK,CAAC,EAAE,IAClF,KAAA;GACJ,qBAAqB,SAAS;EAChC;EAEA,OAAO,cACL,UACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA;GACA,KAAK,CAAC,cAAc,SAAS;GAC7B,OAAO;IAAC,eAAe;IAAG;IAAe;GAAY;EACvD,CACF;CACF,CAAC;CAED,UAAU,cAAc;CAExB,OAAO;AACT"}

package/dist/default/ui/dialog/context.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+//#region src/ui/dialog/context.tsx
+const DialogContext = createContext(null);
+const DialogContextProvider = DialogContext.Provider;
+/** Returns the current dialog compound-component context. Throws outside a dialog root. */
+function useDialogContext() {
+	return useDialogContextFor("Dialog");
+}
+function useDialogContextFor(componentName) {
+	const ctx = useContext(DialogContext);
+	if (!ctx) throw new Error(`${componentName} compound components must be used within a ${componentName}.Root`);
+	return ctx;
+}
+//#endregion
+export { DialogContextProvider, useDialogContext, useDialogContextFor };
+
+//# sourceMappingURL=context.js.map

package/dist/default/ui/dialog/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/dialog/context.tsx"],"sourcesContent":["import type { DialogCore, StateAttrMap } from '@videojs/core';\nimport type { DialogApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface DialogContextValue {\n  core: DialogCore;\n  dialog: DialogApi;\n  state: DialogCore.State;\n  stateAttrMap: StateAttrMap<DialogCore.State>;\n  popupId: string;\n}\n\nconst DialogContext = createContext<DialogContextValue | null>(null);\n\nexport const DialogContextProvider = DialogContext.Provider;\n\n/** Returns the current dialog compound-component context. Throws outside a dialog root. */\nexport function useDialogContext(): DialogContextValue {\n  return useDialogContextFor('Dialog');\n}\n\nexport function useDialogContextFor(componentName: string): DialogContextValue {\n  const ctx = useContext(DialogContext);\n  if (!ctx) throw new Error(`${componentName} compound components must be used within a ${componentName}.Root`);\n\n  return ctx;\n}\n"],"mappings":";;AAYA,MAAM,gBAAgB,cAAyC,IAAI;AAEnE,MAAa,wBAAwB,cAAc;;AAGnD,SAAgB,mBAAuC;CACrD,OAAO,oBAAoB,QAAQ;AACrC;AAEA,SAAgB,oBAAoB,eAA2C;CAC7E,MAAM,MAAM,WAAW,aAAa;CACpC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,GAAG,cAAc,6CAA6C,cAAc,MAAM;CAE5G,OAAO;AACT"}

package/dist/default/ui/dialog/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/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=dialog-backdrop.js.map

package/dist/default/ui/dialog/dialog-backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-backdrop.js","names":[],"sources":["../../../../src/ui/dialog/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/default/ui/dialog/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/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=dialog-close.js.map

package/dist/default/ui/dialog/dialog-close.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-close.js","names":[],"sources":["../../../../src/ui/dialog/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/default/ui/dialog/dialog-description.js

@@ -0,0 +1,14 @@
+import { useDialogContext } from "./context.js";
+import { createContextPart } from "../create-context-part.js";
+//#region src/ui/dialog/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=dialog-description.js.map

package/dist/default/ui/dialog/dialog-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-description.js","names":[],"sources":["../../../../src/ui/dialog/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/default/ui/dialog/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/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=dialog-popup.js.map

package/dist/default/ui/dialog/dialog-popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-popup.js","names":[],"sources":["../../../../src/ui/dialog/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/default/ui/dialog/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/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=dialog-root.js.map

package/dist/default/ui/dialog/dialog-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-root.js","names":[],"sources":["../../../../src/ui/dialog/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/default/ui/dialog/dialog-title.js

@@ -0,0 +1,14 @@
+import { useDialogContext } from "./context.js";
+import { createContextPart } from "../create-context-part.js";
+//#region src/ui/dialog/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=dialog-title.js.map

package/dist/default/ui/dialog/dialog-title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-title.js","names":[],"sources":["../../../../src/ui/dialog/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/default/ui/dialog/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/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=dialog-trigger.js.map

package/dist/default/ui/dialog/dialog-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-trigger.js","names":[],"sources":["../../../../src/ui/dialog/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/default/ui/dialog/index.js

@@ -0,0 +1,3 @@
+import { useDialogContext } from "./context.js";
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as Dialog, useDialogContext };

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

@@ -0,0 +1,22 @@
+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";
+//#region src/ui/dialog/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Backdrop: () => DialogBackdrop,
+	Close: () => DialogClose,
+	Description: () => DialogDescription,
+	Popup: () => DialogPopup,
+	Root: () => DialogRoot,
+	Title: () => DialogTitle,
+	Trigger: () => DialogTrigger
+});
+//#endregion
+export { DialogBackdrop as Backdrop, DialogClose as Close, DialogDescription as Description, DialogPopup as Popup, DialogRoot as Root, DialogTitle as Title, DialogTrigger as Trigger, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

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

@@ -0,0 +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":""}

package/dist/default/ui/dialog/use-dialog-root.js

@@ -0,0 +1,64 @@
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { DialogCore, DialogDataAttrs } from "@videojs/core";
+import { createDialog, createTransition } from "@videojs/core/dom";
+import { useSnapshot } from "@videojs/store/react";
+import { useEffect, useLayoutEffect, useState } from "react";
+//#region src/ui/dialog/use-dialog-root.ts
+function useDialogRoot({ open: controlledOpen, defaultOpen = DialogCore.defaultProps.defaultOpen, closeOnEscape = DialogCore.defaultProps.closeOnEscape, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, coreFactory = createDialogCore, stateAttrMap = DialogDataAttrs, idPrefix = "dialog", interactionRoot }) {
+	const [core] = useState(coreFactory);
+	core.setProps({
+		open: controlledOpen,
+		defaultOpen,
+		closeOnEscape
+	});
+	const isControlled = controlledOpen !== void 0;
+	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
+	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
+	const closeOnEscapeRef = useLatestRef(closeOnEscape);
+	const [dialog] = useState(() => {
+		const instance = createDialog({
+			transition: createTransition(),
+			onOpenChange: (nextOpen) => onOpenChangeRef.current?.(nextOpen),
+			onOpenChangeComplete: (nextOpen) => onOpenChangeCompleteRef.current?.(nextOpen),
+			closeOnEscape: () => closeOnEscapeRef.current
+		});
+		if (!isControlled && defaultOpen) instance.open();
+		return instance;
+	});
+	const popupId = useSafeId(`${idPrefix}-popup`);
+	const titleId = useSafeId(`${idPrefix}-title`);
+	const descriptionId = useSafeId(`${idPrefix}-desc`);
+	core.setTitleId(titleId);
+	core.setDescriptionId(descriptionId);
+	useEffect(() => {
+		if (controlledOpen === void 0) return;
+		const { active: inputOpen } = dialog.input.current;
+		if (controlledOpen === inputOpen) return;
+		if (controlledOpen) dialog.open();
+		else dialog.close();
+	}, [controlledOpen, dialog]);
+	useLayoutEffect(() => {
+		dialog.setInteractionRoot(interactionRoot ?? null);
+	}, [dialog, interactionRoot]);
+	useDestroy(dialog);
+	const input = useSnapshot(dialog.input);
+	const modality = useSnapshot(dialog.modality);
+	core.setInput(input);
+	core.setDocumentModal(modality.documentModal);
+	return {
+		core,
+		dialog,
+		state: core.getState(),
+		stateAttrMap,
+		popupId
+	};
+}
+function createDialogCore() {
+	return new DialogCore();
+}
+//#endregion
+export { useDialogRoot };
+
+//# sourceMappingURL=use-dialog-root.js.map

package/dist/default/ui/dialog/use-dialog-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-dialog-root.js","names":[],"sources":["../../../../src/ui/dialog/use-dialog-root.ts"],"sourcesContent":["import { DialogCore, DialogDataAttrs, type DialogProps, type DialogState, type StateAttrMap } from '@videojs/core';\nimport { createDialog, createTransition } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { useEffect, useLayoutEffect, useState } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport type { DialogContextValue } from './context';\n\nexport interface UseDialogRootOptions extends DialogProps {\n  onOpenChange?: (open: boolean) => void;\n  onOpenChangeComplete?: (open: boolean) => void;\n  coreFactory?: () => DialogCore;\n  stateAttrMap?: StateAttrMap<DialogState>;\n  idPrefix?: string;\n  interactionRoot?: HTMLElement | null;\n}\n\nexport function useDialogRoot({\n  open: controlledOpen,\n  defaultOpen = DialogCore.defaultProps.defaultOpen,\n  closeOnEscape = DialogCore.defaultProps.closeOnEscape,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  coreFactory = createDialogCore,\n  stateAttrMap = DialogDataAttrs,\n  idPrefix = 'dialog',\n  interactionRoot,\n}: UseDialogRootOptions): DialogContextValue {\n  const [core] = useState(coreFactory);\n\n  core.setProps({ open: controlledOpen, defaultOpen, closeOnEscape });\n\n  const isControlled = controlledOpen !== undefined;\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n  const closeOnEscapeRef = useLatestRef(closeOnEscape);\n\n  const [dialog] = useState(() => {\n    const instance = createDialog({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean) => onOpenChangeRef.current?.(nextOpen),\n      onOpenChangeComplete: (nextOpen: boolean) => onOpenChangeCompleteRef.current?.(nextOpen),\n      closeOnEscape: () => closeOnEscapeRef.current,\n    });\n\n    if (!isControlled && defaultOpen) instance.open();\n\n    return instance;\n  });\n\n  const popupId = useSafeId(`${idPrefix}-popup`);\n  const titleId = useSafeId(`${idPrefix}-title`);\n  const descriptionId = useSafeId(`${idPrefix}-desc`);\n\n  core.setTitleId(titleId);\n  core.setDescriptionId(descriptionId);\n\n  useEffect(() => {\n    if (controlledOpen === undefined) return;\n\n    const { active: inputOpen } = dialog.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) dialog.open();\n    else dialog.close();\n  }, [controlledOpen, dialog]);\n\n  useLayoutEffect(() => {\n    dialog.setInteractionRoot(interactionRoot ?? null);\n  }, [dialog, interactionRoot]);\n\n  useDestroy(dialog);\n\n  const input = useSnapshot(dialog.input);\n  const modality = useSnapshot(dialog.modality);\n\n  core.setInput(input);\n  core.setDocumentModal(modality.documentModal);\n\n  return {\n    core,\n    dialog,\n    state: core.getState(),\n    stateAttrMap,\n    popupId,\n  };\n}\n\nfunction createDialogCore(): DialogCore {\n  return new DialogCore();\n}\n"],"mappings":";;;;;;;;AAmBA,SAAgB,cAAc,EAC5B,MAAM,gBACN,cAAc,WAAW,aAAa,aACtC,gBAAgB,WAAW,aAAa,eACxC,cAAc,kBACd,sBAAsB,0BACtB,cAAc,kBACd,eAAe,iBACf,WAAW,UACX,mBAC2C;CAC3C,MAAM,CAAC,QAAQ,SAAS,WAAW;CAEnC,KAAK,SAAS;EAAE,MAAM;EAAgB;EAAa;CAAc,CAAC;CAElE,MAAM,eAAe,mBAAmB,KAAA;CACxC,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CACrE,MAAM,mBAAmB,aAAa,aAAa;CAEnD,MAAM,CAAC,UAAU,eAAe;EAC9B,MAAM,WAAW,aAAa;GAC5B,YAAY,iBAAiB;GAC7B,eAAe,aAAsB,gBAAgB,UAAU,QAAQ;GACvE,uBAAuB,aAAsB,wBAAwB,UAAU,QAAQ;GACvF,qBAAqB,iBAAiB;EACxC,CAAC;EAED,IAAI,CAAC,gBAAgB,aAAa,SAAS,KAAK;EAEhD,OAAO;CACT,CAAC;CAED,MAAM,UAAU,UAAU,GAAG,SAAS,OAAO;CAC7C,MAAM,UAAU,UAAU,GAAG,SAAS,OAAO;CAC7C,MAAM,gBAAgB,UAAU,GAAG,SAAS,MAAM;CAElD,KAAK,WAAW,OAAO;CACvB,KAAK,iBAAiB,aAAa;CAEnC,gBAAgB;EACd,IAAI,mBAAmB,KAAA,GAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,OAAO,MAAM;EAC3C,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBAAgB,OAAO,KAAK;OAC3B,OAAO,MAAM;CACpB,GAAG,CAAC,gBAAgB,MAAM,CAAC;CAE3B,sBAAsB;EACpB,OAAO,mBAAmB,mBAAmB,IAAI;CACnD,GAAG,CAAC,QAAQ,eAAe,CAAC;CAE5B,WAAW,MAAM;CAEjB,MAAM,QAAQ,YAAY,OAAO,KAAK;CACtC,MAAM,WAAW,YAAY,OAAO,QAAQ;CAE5C,KAAK,SAAS,KAAK;CACnB,KAAK,iBAAiB,SAAS,aAAa;CAE5C,OAAO;EACL;EACA;EACA,OAAO,KAAK,SAAS;EACrB;EACA;CACF;AACF;AAEA,SAAS,mBAA+B;CACtC,OAAO,IAAI,WAAW;AACxB"}

package/dist/default/ui/error-dialog/context.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+//#region src/ui/error-dialog/context.tsx
+const ErrorDialogContext = createContext(null);
+const ErrorDialogContextProvider = ErrorDialogContext.Provider;
+/** Returns the current error dialog compound-component context. Throws outside `ErrorDialog.Root`. */
+function useErrorDialogContext() {
+	const ctx = useContext(ErrorDialogContext);
+	if (!ctx) throw new Error("ErrorDialog compound components must be used within an ErrorDialog.Root");
+	return ctx;
+}
+//#endregion
+export { ErrorDialogContextProvider, useErrorDialogContext };
+
+//# sourceMappingURL=context.js.map

package/dist/default/ui/error-dialog/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/error-dialog/context.tsx"],"sourcesContent":["import type { ErrorLike } from '@videojs/media';\nimport { createContext, useContext } from 'react';\n\nexport interface ErrorDialogContextValue {\n  lastError: ErrorLike | null;\n}\n\nconst ErrorDialogContext = createContext<ErrorDialogContextValue | null>(null);\n\nexport const ErrorDialogContextProvider = ErrorDialogContext.Provider;\n\n/** Returns the current error dialog compound-component context. Throws outside `ErrorDialog.Root`. */\nexport function useErrorDialogContext(): ErrorDialogContextValue {\n  const ctx = useContext(ErrorDialogContext);\n  if (!ctx) throw new Error('ErrorDialog compound components must be used within an ErrorDialog.Root');\n\n  return ctx;\n}\n"],"mappings":";;AAOA,MAAM,qBAAqB,cAA8C,IAAI;AAE7E,MAAa,6BAA6B,mBAAmB;;AAG7D,SAAgB,wBAAiD;CAC/D,MAAM,MAAM,WAAW,kBAAkB;CACzC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,yEAAyE;CAEnG,OAAO;AACT"}

package/dist/default/ui/error-dialog/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/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=error-dialog-close.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"error-dialog-close.js","names":[],"sources":["../../../../src/ui/error-dialog/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/default/ui/error-dialog/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/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=error-dialog-description.js.map