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

package/dist/default/ui/buffering-indicator/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/buffering-indicator/component.tsx"],"sourcesContent":["import { BufferingIndicatorCore, BufferingIndicatorDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState, useSyncExternalStore } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface BufferingIndicatorProps\n  extends UIComponentProps<'div', BufferingIndicatorCore.State>, BufferingIndicatorCore.Props {}\n\n/**\n * Displays a buffering indicator when media is waiting for data.\n *\n * Visibility is delayed (default 500ms) to avoid flashing on quick buffers.\n *\n * @example\n *   ```tsx\n *   <BufferingIndicator />\n *\n *   <BufferingIndicator delay={1000} />\n *\n *   <BufferingIndicator\n *   render={(props, state) => (\n *   <div {...props}>{state.visible && <Spinner />}</div>\n *   )}\n *   />\n *   ```;\n */\nexport const BufferingIndicator = forwardRef(function BufferingIndicator(\n  componentProps: BufferingIndicatorProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, delay, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new BufferingIndicatorCore());\n\n  useDestroy(core);\n  core.setProps({ delay });\n\n  if (playback) core.update(playback);\n\n  const state = useSyncExternalStore(\n    (cb) => core.state.subscribe(cb),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('BufferingIndicator', 'playback');\n\n    return null;\n  }\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: BufferingIndicatorDataAttrs,\n      ref: [forwardedRef],\n      props: [elementProps],\n    }\n  );\n});\n\nexport namespace BufferingIndicator {\n  export type Props = BufferingIndicatorProps;\n  export type State = BufferingIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,qBAAqB,WAAW,SAAS,mBACpD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,GAAG,iBAAiB;CAE7D,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,uBAAuB,CAAC;CAE1D,WAAW,IAAI;CACf,KAAK,SAAS,EAAE,MAAM,CAAC;CAEvB,IAAI,UAAU,KAAK,OAAO,QAAQ;CAElC,MAAM,QAAQ,sBACX,OAAO,KAAK,MAAM,UAAU,EAAE,SACzB,KAAK,MAAM,eACX,KAAK,MAAM,OACnB;CAEA,IAAI,CAAC,UAGH,OAAO;CAGT,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,YAAY;CACtB,CACF;AACF,CAAC"}

package/dist/default/ui/buffering-indicator/index.js

@@ -1,2 +1,2 @@
-import { BufferingIndicator } from "./buffering-indicator.js";
+import { BufferingIndicator } from "./component.js";
 export { BufferingIndicator };

package/dist/default/ui/captions-button/component.js

@@ -0,0 +1,18 @@
+import { createMediaButton } from "../create-media-button.js";
+import { CaptionsButtonCore, CaptionsButtonDataAttrs } from "@videojs/core";
+import { selectTextTrack } from "@videojs/core/dom";
+//#region src/ui/captions-button/component.tsx
+/** A button that toggles captions. */
+const CaptionsButton = createMediaButton({
+	displayName: "CaptionsButton",
+	core: CaptionsButtonCore,
+	stateAttrMap: CaptionsButtonDataAttrs,
+	selector: selectTextTrack,
+	action: (core, state) => core.toggle(state),
+	hotkeyAction: "toggleSubtitles",
+	isSupported: (state) => !state.hidden
+});
+//#endregion
+export { CaptionsButton };
+
+//# sourceMappingURL=component.js.map

package/dist/default/ui/captions-button/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/captions-button/component.tsx"],"sourcesContent":["import { CaptionsButtonCore, CaptionsButtonDataAttrs } from '@videojs/core';\nimport { selectTextTrack } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface CaptionsButtonProps\n  extends UIComponentProps<'button', CaptionsButtonCore.State>, CaptionsButtonCore.Props {}\n\n/** A button that toggles captions. */\nexport const CaptionsButton = createMediaButton<CaptionsButtonCore, CaptionsButtonProps>({\n  displayName: 'CaptionsButton',\n  core: CaptionsButtonCore,\n  stateAttrMap: CaptionsButtonDataAttrs,\n  selector: selectTextTrack,\n  action: (core, state) => core.toggle(state),\n  hotkeyAction: 'toggleSubtitles',\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace CaptionsButton {\n  export type Props = CaptionsButtonProps;\n  export type State = CaptionsButtonCore.State;\n}\n"],"mappings":";;;;;AAUA,MAAa,iBAAiB,kBAA2D;CACvF,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}

package/dist/default/ui/captions-button/index.js

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

package/dist/default/ui/captions-radio-group/component.js

@@ -0,0 +1,97 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useMenuOptionState } from "../menu/context.js";
+import { MenuRadioGroup } from "../menu/radio-group.js";
+import { useCaptionsOptions } from "./use-captions-options.js";
+import { CaptionsRadioGroupDataAttrs } from "@videojs/core";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { Fragment, createContext, forwardRef, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isFunction } from "@videojs/utils/predicate";
+//#region src/ui/captions-radio-group/component.tsx
+const CaptionsRadioGroupContext = createContext(void 0);
+/** Owns captions option state and shares it with an enclosing menu. Does not render a DOM element. */
+function CaptionsRadioGroupRoot({ children, ...props }) {
+	const captions = useCaptionsOptions(props);
+	useMenuOptionState(toMenuOptionState(captions));
+	return /* @__PURE__ */ jsx(CaptionsRadioGroupContext.Provider, {
+		value: captions,
+		children
+	});
+}
+/** Displays the selected captions label. */
+const CaptionsRadioGroupValue = forwardRef(function CaptionsRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {
+	const captions = useCaptionsRadioGroupContext();
+	if (!captions) return null;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state: captions,
+		ref: forwardedRef,
+		props: [elementProps, { children: captions.selectedLabel }]
+	});
+});
+/** Renders menu radio items for the player's captions and subtitles tracks. */
+const CaptionsRadioGroupOptions = forwardRef(function CaptionsRadioGroupOptions(componentProps, forwardedRef) {
+	const { renderItem, render, className, style, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;
+	const captions = useCaptionsRadioGroupContext();
+	if (!captions) return null;
+	const { state, value, options, setValue } = captions;
+	const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === void 0 ? captions.label : void 0);
+	return /* @__PURE__ */ jsx(MenuRadioGroup, {
+		...getStateDataAttrs(state, CaptionsRadioGroupDataAttrs),
+		...elementProps,
+		ref: forwardedRef,
+		className: isFunction(className) ? className(state) : className,
+		style: isFunction(style) ? style(state) : style,
+		render: isFunction(render) ? (props) => render(props, state) : render,
+		value,
+		onValueChange: setValue,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		"aria-disabled": state.disabled || void 0,
+		hidden: state.hidden,
+		children: options.map((option) => {
+			const itemState = {
+				...option,
+				checked: option.value === value
+			};
+			return /* @__PURE__ */ jsx(Fragment, { children: renderItem({
+				value: option.value,
+				disabled: option.disabled,
+				"data-track": option.value,
+				children: option.label
+			}, itemState) }, option.value);
+		})
+	});
+});
+/** @internal Compatibility adapter for the existing preset sources. */
+const CaptionsRadioGroupLegacy = forwardRef(function CaptionsRadioGroupLegacy({ label, formatTrack, disabled, ...props }, forwardedRef) {
+	return /* @__PURE__ */ jsx(CaptionsRadioGroupRoot, {
+		label,
+		formatTrack,
+		disabled,
+		children: /* @__PURE__ */ jsx(CaptionsRadioGroupOptions, {
+			...props,
+			ref: forwardedRef
+		})
+	});
+});
+function useCaptionsRadioGroupContext() {
+	const captions = useContext(CaptionsRadioGroupContext);
+	if (captions === void 0) throw new Error("CaptionsRadioGroup parts must be used within CaptionsRadioGroup.Root");
+	return captions;
+}
+function toMenuOptionState(captions) {
+	return {
+		value: captions?.selectedLabel ?? "",
+		disabled: captions?.disabled ?? true,
+		hidden: captions?.hidden ?? true,
+		availability: captions?.state.availability ?? "unsupported"
+	};
+}
+//#endregion
+export { CaptionsRadioGroupLegacy, CaptionsRadioGroupOptions, CaptionsRadioGroupRoot, CaptionsRadioGroupValue };
+
+//# sourceMappingURL=component.js.map

package/dist/default/ui/captions-radio-group/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/captions-radio-group/component.tsx"],"sourcesContent":["import { type CaptionsRadioGroupCore, CaptionsRadioGroupDataAttrs, type MenuOptionState } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement, ReactNode } from 'react';\nimport { createContext, Fragment, forwardRef, useContext } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuOptionState } from '../menu/context';\nimport { MenuRadioGroup } from '../menu/radio-group';\nimport type { MenuRadioItemProps } from '../menu/radio-item';\nimport {\n  type CaptionsOption,\n  type CaptionsOptionsProps,\n  type CaptionsOptionsResult,\n  useCaptionsOptions,\n} from './use-captions-options';\n\nexport type CaptionsRadioGroupItemState = CaptionsOption & {\n  /** Whether this option is currently selected. */\n  checked: boolean;\n};\n\nexport interface CaptionsRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Text track value represented by the item. */\n  'data-track': string;\n}\n\nexport interface CaptionsRadioGroupRootProps extends CaptionsOptionsProps {\n  children?: ReactNode;\n}\n\nexport interface CaptionsRadioGroupOptionsProps extends Omit<\n  UIComponentProps<'div', CaptionsRadioGroupCore.State>,\n  'children'\n> {\n  /** Render one consumer-owned menu radio item for every captions option. */\n  renderItem: (props: CaptionsRadioGroupItemProps, state: CaptionsRadioGroupItemState) => ReactElement;\n}\n\nexport type CaptionsRadioGroupValueProps = UIComponentProps<'span', CaptionsOptionsResult>;\n\nexport interface CaptionsRadioGroupLegacyProps extends CaptionsRadioGroupOptionsProps, CaptionsOptionsProps {}\n\nconst CaptionsRadioGroupContext = createContext<CaptionsOptionsResult | null | undefined>(undefined);\n\n/** Owns captions option state and shares it with an enclosing menu. Does not render a DOM element. */\nexport function CaptionsRadioGroupRoot({ children, ...props }: CaptionsRadioGroupRootProps): ReactNode {\n  const captions = useCaptionsOptions(props);\n\n  useMenuOptionState(toMenuOptionState(captions));\n\n  return <CaptionsRadioGroupContext.Provider value={captions}>{children}</CaptionsRadioGroupContext.Provider>;\n}\n\n/** Displays the selected captions label. */\nexport const CaptionsRadioGroupValue = forwardRef<HTMLSpanElement, CaptionsRadioGroupValueProps>(\n  function CaptionsRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {\n    const captions = useCaptionsRadioGroupContext();\n    if (!captions) return null;\n\n    return renderElement(\n      'span',\n      { render, className, style },\n      { state: captions, ref: forwardedRef, props: [elementProps, { children: captions.selectedLabel }] }\n    );\n  }\n);\n\n/** Renders menu radio items for the player's captions and subtitles tracks. */\nexport const CaptionsRadioGroupOptions = forwardRef<HTMLDivElement, CaptionsRadioGroupOptionsProps>(\n  function CaptionsRadioGroupOptions(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const captions = useCaptionsRadioGroupContext();\n    if (!captions) return null;\n\n    const { state, value, options, setValue } = captions;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? captions.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, CaptionsRadioGroupDataAttrs)}\n        {...elementProps}\n        ref={forwardedRef}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n        value={value}\n        onValueChange={setValue}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-disabled={state.disabled || undefined}\n        hidden={state.hidden}\n      >\n        {options.map((option) => {\n          const itemState = { ...option, checked: option.value === value };\n\n          return (\n            <Fragment key={option.value}>\n              {renderItem(\n                {\n                  value: option.value,\n                  disabled: option.disabled,\n                  'data-track': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>\n    );\n  }\n);\n\n/** @internal Compatibility adapter for the existing preset sources. */\nexport const CaptionsRadioGroupLegacy = forwardRef<HTMLDivElement, CaptionsRadioGroupLegacyProps>(\n  function CaptionsRadioGroupLegacy({ label, formatTrack, disabled, ...props }, forwardedRef) {\n    return (\n      <CaptionsRadioGroupRoot label={label} formatTrack={formatTrack} disabled={disabled}>\n        <CaptionsRadioGroupOptions {...props} ref={forwardedRef} />\n      </CaptionsRadioGroupRoot>\n    );\n  }\n);\n\nfunction useCaptionsRadioGroupContext(): CaptionsOptionsResult | null {\n  const captions = useContext(CaptionsRadioGroupContext);\n  if (captions === undefined) throw new Error('CaptionsRadioGroup parts must be used within CaptionsRadioGroup.Root');\n\n  return captions;\n}\n\nfunction toMenuOptionState(captions: CaptionsOptionsResult | null): MenuOptionState {\n  return {\n    value: captions?.selectedLabel ?? '',\n    disabled: captions?.disabled ?? true,\n    hidden: captions?.hidden ?? true,\n    availability: captions?.state.availability ?? 'unsupported',\n  };\n}\n\nexport namespace CaptionsRadioGroupRoot {\n  export type Props = CaptionsRadioGroupRootProps;\n}\n\nexport namespace CaptionsRadioGroupValue {\n  export type Props = CaptionsRadioGroupValueProps;\n  export type State = CaptionsOptionsResult;\n}\n\nexport namespace CaptionsRadioGroupOptions {\n  export type Props = CaptionsRadioGroupOptionsProps;\n  export type State = CaptionsRadioGroupCore.State;\n  export type ItemProps = CaptionsRadioGroupItemProps;\n  export type ItemState = CaptionsRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;AA4CA,MAAM,4BAA4B,cAAwD,KAAA,CAAS;;AAGnG,SAAgB,uBAAuB,EAAE,UAAU,GAAG,SAAiD;CACrG,MAAM,WAAW,mBAAmB,KAAK;CAEzC,mBAAmB,kBAAkB,QAAQ,CAAC;CAE9C,OAAO,oBAAC,0BAA0B,UAA3B;EAAoC,OAAO;EAAW;CAA6C,CAAA;AAC5G;;AAGA,MAAa,0BAA0B,WACrC,SAAS,wBAAwB,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAAgB,cAAc;CAC5F,MAAM,WAAW,6BAA6B;CAC9C,IAAI,CAAC,UAAU,OAAO;CAEtB,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EAAE,OAAO;EAAU,KAAK;EAAc,OAAO,CAAC,cAAc,EAAE,UAAU,SAAS,cAAc,CAAC;CAAE,CACpG;AACF,CACF;;AAGA,MAAa,4BAA4B,WACvC,SAAS,0BAA0B,gBAAgB,cAAc;CAC/D,MAAM,EACJ,YACA,QACA,WACA,OACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,WAAW,6BAA6B;CAC9C,IAAI,CAAC,UAAU,OAAO;CAEtB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,SAAS,QAAQ,KAAA;CAEpF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,2BAA2B;EACxD,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,cAAc,OAAO;IACrB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF;;AAGA,MAAa,2BAA2B,WACtC,SAAS,yBAAyB,EAAE,OAAO,aAAa,UAAU,GAAG,SAAS,cAAc;CAC1F,OACE,oBAAC,wBAAD;EAA+B;EAAoB;EAAuB;EACxE,UAAA,oBAAC,2BAAD;GAA2B,GAAI;GAAO,KAAK;EAAe,CAAA;CACpC,CAAA;AAE5B,CACF;AAEA,SAAS,+BAA6D;CACpE,MAAM,WAAW,WAAW,yBAAyB;CACrD,IAAI,aAAa,KAAA,GAAW,MAAM,IAAI,MAAM,sEAAsE;CAElH,OAAO;AACT;AAEA,SAAS,kBAAkB,UAAyD;CAClF,OAAO;EACL,OAAO,UAAU,iBAAiB;EAClC,UAAU,UAAU,YAAY;EAChC,QAAQ,UAAU,UAAU;EAC5B,cAAc,UAAU,MAAM,gBAAgB;CAChD;AACF"}

package/dist/default/ui/captions-radio-group/index.js

@@ -1,4 +1,4 @@
 import { useCaptionsOptions } from "./use-captions-options.js";
-import { CaptionsRadioGroupLegacy } from "./captions-radio-group.js";
+import { CaptionsRadioGroupLegacy } from "./component.js";
 import { index_parts_exports } from "./index.parts.js";
 export { index_parts_exports as CaptionsRadioGroup, CaptionsRadioGroupLegacy, useCaptionsOptions };

package/dist/default/ui/captions-radio-group/index.parts.js

@@ -1,5 +1,5 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { CaptionsRadioGroupOptions, CaptionsRadioGroupRoot, CaptionsRadioGroupValue } from "./captions-radio-group.js";
+import { CaptionsRadioGroupOptions, CaptionsRadioGroupRoot, CaptionsRadioGroupValue } from "./component.js";
 //#region src/ui/captions-radio-group/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Options: () => CaptionsRadioGroupOptions,

package/dist/default/ui/captions-radio-group/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/captions-radio-group/index.parts.ts"],"sourcesContent":["export {\n  type CaptionsRadioGroupItemProps as ItemProps,\n  type CaptionsRadioGroupItemState as ItemState,\n  CaptionsRadioGroupOptions as Options,\n  type CaptionsRadioGroupOptionsProps as OptionsProps,\n  CaptionsRadioGroupRoot as Root,\n  type CaptionsRadioGroupRootProps as RootProps,\n  CaptionsRadioGroupValue as Value,\n  type CaptionsRadioGroupValueProps as ValueProps,\n} from './captions-radio-group';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/captions-radio-group/index.parts.ts"],"sourcesContent":["export {\n  type CaptionsRadioGroupItemProps as ItemProps,\n  type CaptionsRadioGroupItemState as ItemState,\n  CaptionsRadioGroupOptions as Options,\n  type CaptionsRadioGroupOptionsProps as OptionsProps,\n  CaptionsRadioGroupRoot as Root,\n  type CaptionsRadioGroupRootProps as RootProps,\n  CaptionsRadioGroupValue as Value,\n  type CaptionsRadioGroupValueProps as ValueProps,\n} from './component';\n"],"mappings":""}

package/dist/default/ui/cast-button/component.js

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

package/dist/default/ui/cast-button/component.js.map

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

package/dist/default/ui/cast-button/index.js

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

package/dist/default/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/default/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/default/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/default/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/default/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/default/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/default/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/default/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/default/ui/controls/root.js

@@ -0,0 +1,27 @@
+import { usePlayer } from "../../player/context.js";
+import { ControlsContextProvider } from "./context.js";
+import { ControlsCore, ControlsDataAttrs } from "@videojs/core";
+import { 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) return null;
+	return /* @__PURE__ */ jsx(ControlsContextProvider, {
+		value: {
+			state,
+			stateAttrMap: ControlsDataAttrs
+		},
+		children
+	});
+}
+//#endregion
+export { ControlsRoot };
+
+//# sourceMappingURL=root.js.map

package/dist/default/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,OAGH,OAAO;CAGT,OACE,oBAAC,yBAAD;EAAyB,OAAO;GAAE;GAAO,cAAc;EAAkB;EAAI;CAAkC,CAAA;AAEnH"}

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

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

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

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