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

package/dist/dev/ui/playback-rate-radio-group/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/component.tsx"],"sourcesContent":["import { type MenuOptionState, type PlaybackRateRadioGroupCore, PlaybackRateRadioGroupDataAttrs } 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 PlaybackRateOption,\n  type PlaybackRateOptionsProps,\n  type PlaybackRateOptionsResult,\n  usePlaybackRateOptions,\n} from '../playback-rate';\n\nexport type PlaybackRateRadioGroupItemState = PlaybackRateOption & {\n  /** Whether this playback rate is currently selected. */\n  checked: boolean;\n};\n\nexport interface PlaybackRateRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Playback rate represented by the item. */\n  'data-rate': string;\n}\n\nexport interface PlaybackRateRadioGroupRootProps extends PlaybackRateOptionsProps {\n  children?: ReactNode;\n}\n\nexport interface PlaybackRateRadioGroupOptionsProps extends Omit<\n  UIComponentProps<'div', PlaybackRateRadioGroupCore.State>,\n  'children'\n> {\n  /** Render one consumer-owned menu radio item for every playback rate. */\n  renderItem: (props: PlaybackRateRadioGroupItemProps, state: PlaybackRateRadioGroupItemState) => ReactElement;\n}\n\nexport type PlaybackRateRadioGroupValueProps = UIComponentProps<'span', PlaybackRateOptionsResult>;\n\nexport interface PlaybackRateRadioGroupLegacyProps\n  extends PlaybackRateRadioGroupOptionsProps, PlaybackRateOptionsProps {}\n\nconst PlaybackRateRadioGroupContext = createContext<PlaybackRateOptionsResult | null | undefined>(undefined);\n\n/** Owns playback-rate option state and shares it with an enclosing menu. Does not render a DOM element. */\nexport function PlaybackRateRadioGroupRoot({ children, ...props }: PlaybackRateRadioGroupRootProps): ReactNode {\n  const playbackRate = usePlaybackRateOptions(props);\n\n  useMenuOptionState(toMenuOptionState(playbackRate));\n\n  return (\n    <PlaybackRateRadioGroupContext.Provider value={playbackRate}>{children}</PlaybackRateRadioGroupContext.Provider>\n  );\n}\n\n/** Displays the selected playback-rate label. */\nexport const PlaybackRateRadioGroupValue = forwardRef<HTMLSpanElement, PlaybackRateRadioGroupValueProps>(\n  function PlaybackRateRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {\n    const playbackRate = usePlaybackRateRadioGroupContext();\n    if (!playbackRate) return null;\n\n    return renderElement(\n      'span',\n      { render, className, style },\n      { state: playbackRate, ref: forwardedRef, props: [elementProps, { children: playbackRate.selectedLabel }] }\n    );\n  }\n);\n\n/** Renders menu radio items for the player's available playback rates. */\nexport const PlaybackRateRadioGroupOptions = forwardRef<HTMLDivElement, PlaybackRateRadioGroupOptionsProps>(\n  function PlaybackRateRadioGroupOptions(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 playbackRate = usePlaybackRateRadioGroupContext();\n    if (!playbackRate) return null;\n\n    const { state, value, options, setValue } = playbackRate;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? playbackRate.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, PlaybackRateRadioGroupDataAttrs)}\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-rate': 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 PlaybackRateRadioGroupLegacy = forwardRef<HTMLDivElement, PlaybackRateRadioGroupLegacyProps>(\n  function PlaybackRateRadioGroupLegacy({ label, formatRate, disabled, ...props }, forwardedRef) {\n    return (\n      <PlaybackRateRadioGroupRoot label={label} formatRate={formatRate} disabled={disabled}>\n        <PlaybackRateRadioGroupOptions {...props} ref={forwardedRef} />\n      </PlaybackRateRadioGroupRoot>\n    );\n  }\n);\n\nfunction usePlaybackRateRadioGroupContext(): PlaybackRateOptionsResult | null {\n  const playbackRate = useContext(PlaybackRateRadioGroupContext);\n\n  if (playbackRate === undefined) {\n    throw new Error('PlaybackRateRadioGroup parts must be used within PlaybackRateRadioGroup.Root');\n  }\n\n  return playbackRate;\n}\n\nfunction toMenuOptionState(playbackRate: PlaybackRateOptionsResult | null): MenuOptionState {\n  return {\n    value: playbackRate?.selectedLabel ?? '',\n    disabled: playbackRate?.disabled ?? true,\n    hidden: playbackRate?.hidden ?? true,\n    availability: playbackRate?.state.availability ?? 'unsupported',\n  };\n}\n\nexport namespace PlaybackRateRadioGroupRoot {\n  export type Props = PlaybackRateRadioGroupRootProps;\n}\n\nexport namespace PlaybackRateRadioGroupValue {\n  export type Props = PlaybackRateRadioGroupValueProps;\n  export type State = PlaybackRateOptionsResult;\n}\n\nexport namespace PlaybackRateRadioGroupOptions {\n  export type Props = PlaybackRateRadioGroupOptionsProps;\n  export type State = PlaybackRateRadioGroupCore.State;\n  export type ItemProps = PlaybackRateRadioGroupItemProps;\n  export type ItemState = PlaybackRateRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;AA6CA,MAAM,gCAAgC,cAA4D,KAAA,CAAS;;AAG3G,SAAgB,2BAA2B,EAAE,UAAU,GAAG,SAAqD;CAC7G,MAAM,eAAe,uBAAuB,KAAK;CAEjD,mBAAmB,kBAAkB,YAAY,CAAC;CAElD,OACE,oBAAC,8BAA8B,UAA/B;EAAwC,OAAO;EAAe;CAAiD,CAAA;AAEnH;;AAGA,MAAa,8BAA8B,WACzC,SAAS,4BAA4B,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAAgB,cAAc;CAChG,MAAM,eAAe,iCAAiC;CACtD,IAAI,CAAC,cAAc,OAAO;CAE1B,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EAAE,OAAO;EAAc,KAAK;EAAc,OAAO,CAAC,cAAc,EAAE,UAAU,aAAa,cAAc,CAAC;CAAE,CAC5G;AACF,CACF;;AAGA,MAAa,gCAAgC,WAC3C,SAAS,8BAA8B,gBAAgB,cAAc;CACnE,MAAM,EACJ,YACA,QACA,WACA,OACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,eAAe,iCAAiC;CACtD,IAAI,CAAC,cAAc,OAAO;CAE1B,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,aAAa,QAAQ,KAAA;CAExF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,+BAA+B;EAC5D,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,aAAa,OAAO;IACpB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF;;AAGA,MAAa,+BAA+B,WAC1C,SAAS,6BAA6B,EAAE,OAAO,YAAY,UAAU,GAAG,SAAS,cAAc;CAC7F,OACE,oBAAC,4BAAD;EAAmC;EAAmB;EAAsB;EAC1E,UAAA,oBAAC,+BAAD;GAA+B,GAAI;GAAO,KAAK;EAAe,CAAA;CACpC,CAAA;AAEhC,CACF;AAEA,SAAS,mCAAqE;CAC5E,MAAM,eAAe,WAAW,6BAA6B;CAE7D,IAAI,iBAAiB,KAAA,GACnB,MAAM,IAAI,MAAM,8EAA8E;CAGhG,OAAO;AACT;AAEA,SAAS,kBAAkB,cAAiE;CAC1F,OAAO;EACL,OAAO,cAAc,iBAAiB;EACtC,UAAU,cAAc,YAAY;EACpC,QAAQ,cAAc,UAAU;EAChC,cAAc,cAAc,MAAM,gBAAgB;CACpD;AACF"}

package/dist/dev/ui/playback-rate-radio-group/index.d.ts

@@ -1,3 +1,3 @@
-import { PlaybackRateRadioGroupLegacy } from "./playback-rate-radio-group.js";
+import { PlaybackRateRadioGroupLegacy } from "./component.js";
 import { index_parts_d_exports } from "./index.parts.js";
 export { index_parts_d_exports as PlaybackRateRadioGroup, PlaybackRateRadioGroupLegacy };

package/dist/dev/ui/playback-rate-radio-group/index.js

@@ -1,3 +1,3 @@
-import { PlaybackRateRadioGroupLegacy } from "./playback-rate-radio-group.js";
+import { PlaybackRateRadioGroupLegacy } from "./component.js";
 import { index_parts_exports } from "./index.parts.js";
 export { index_parts_exports as PlaybackRateRadioGroup, PlaybackRateRadioGroupLegacy };

package/dist/dev/ui/playback-rate-radio-group/index.parts.d.ts

@@ -1,4 +1,4 @@
-import { PlaybackRateRadioGroupItemProps, PlaybackRateRadioGroupItemState, PlaybackRateRadioGroupOptions, PlaybackRateRadioGroupOptionsProps, PlaybackRateRadioGroupRoot, PlaybackRateRadioGroupRootProps, PlaybackRateRadioGroupValue, PlaybackRateRadioGroupValueProps } from "./playback-rate-radio-group.js";
+import { PlaybackRateRadioGroupItemProps, PlaybackRateRadioGroupItemState, PlaybackRateRadioGroupOptions, PlaybackRateRadioGroupOptionsProps, PlaybackRateRadioGroupRoot, PlaybackRateRadioGroupRootProps, PlaybackRateRadioGroupValue, PlaybackRateRadioGroupValueProps } from "./component.js";
 declare namespace index_parts_d_exports {
   export { PlaybackRateRadioGroupItemProps as ItemProps, PlaybackRateRadioGroupItemState as ItemState, PlaybackRateRadioGroupOptions as Options, PlaybackRateRadioGroupOptionsProps as OptionsProps, PlaybackRateRadioGroupRoot as Root, PlaybackRateRadioGroupRootProps as RootProps, PlaybackRateRadioGroupValue as Value, PlaybackRateRadioGroupValueProps as ValueProps };
 }

package/dist/dev/ui/playback-rate-radio-group/index.parts.js

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

package/dist/dev/ui/playback-rate-radio-group/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/index.parts.ts"],"sourcesContent":["export {\n  type PlaybackRateRadioGroupItemProps as ItemProps,\n  type PlaybackRateRadioGroupItemState as ItemState,\n  PlaybackRateRadioGroupOptions as Options,\n  type PlaybackRateRadioGroupOptionsProps as OptionsProps,\n  PlaybackRateRadioGroupRoot as Root,\n  type PlaybackRateRadioGroupRootProps as RootProps,\n  PlaybackRateRadioGroupValue as Value,\n  type PlaybackRateRadioGroupValueProps as ValueProps,\n} from './playback-rate-radio-group';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/index.parts.ts"],"sourcesContent":["export {\n  type PlaybackRateRadioGroupItemProps as ItemProps,\n  type PlaybackRateRadioGroupItemState as ItemState,\n  PlaybackRateRadioGroupOptions as Options,\n  type PlaybackRateRadioGroupOptionsProps as OptionsProps,\n  PlaybackRateRadioGroupRoot as Root,\n  type PlaybackRateRadioGroupRootProps as RootProps,\n  PlaybackRateRadioGroupValue as Value,\n  type PlaybackRateRadioGroupValueProps as ValueProps,\n} from './component';\n"],"mappings":""}

package/dist/dev/ui/popover/arrow.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { PopoverState } from "@videojs/core";
+//#region src/ui/popover/arrow.d.ts
+interface PopoverArrowProps extends UIComponentProps<'div', PopoverState> {}
+/** Decorative arrow pointing from the popup toward the trigger. Hidden from assistive technology. */
+declare const PopoverArrow: import("react").ForwardRefExoticComponent<PopoverArrowProps>;
+declare namespace PopoverArrow {
+  type Props = PopoverArrowProps;
+  type State = PopoverState;
+}
+//#endregion
+export { PopoverArrow, PopoverArrowProps };
+//# sourceMappingURL=arrow.d.ts.map

package/dist/dev/ui/popover/arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.d.ts","names":[],"sources":["../../../../src/ui/popover/arrow.tsx"],"mappings":";;;UAMiB,0BAA0B,wBAAwB;;cAGtD,8BAAY,0BAAA;kBAOR;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/popover/arrow.js

@@ -0,0 +1,14 @@
+import { createContextPart } from "../create-context-part.js";
+import { usePopoverContext } from "./context.js";
+//#region src/ui/popover/arrow.tsx
+/** Decorative arrow pointing from the popup toward the trigger. Hidden from assistive technology. */
+const PopoverArrow = createContextPart({
+	displayName: "PopoverArrow",
+	tag: "div",
+	useContext: usePopoverContext,
+	staticProps: { "aria-hidden": "true" }
+});
+//#endregion
+export { PopoverArrow };
+
+//# sourceMappingURL=arrow.js.map

package/dist/dev/ui/popover/arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"arrow.js","names":[],"sources":["../../../../src/ui/popover/arrow.tsx"],"sourcesContent":["import type { PopoverState } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverArrowProps extends UIComponentProps<'div', PopoverState> {}\n\n/** Decorative arrow pointing from the popup toward the trigger. Hidden from assistive technology. */\nexport const PopoverArrow = createContextPart<PopoverArrowProps, PopoverState>({\n  displayName: 'PopoverArrow',\n  tag: 'div',\n  useContext: usePopoverContext,\n  staticProps: { 'aria-hidden': 'true' as const },\n});\n\nexport namespace PopoverArrow {\n  export type Props = PopoverArrowProps;\n  export type State = PopoverState;\n}\n"],"mappings":";;;;AASA,MAAa,eAAe,kBAAmD;CAC7E,aAAa;CACb,KAAK;CACL,YAAY;CACZ,aAAa,EAAE,eAAe,OAAgB;AAChD,CAAC"}

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

@@ -1,7 +1,7 @@
-import { PopoverArrow, PopoverArrowProps } from "./popover-arrow.js";
-import { PopoverPopup, PopoverPopupProps } from "./popover-popup.js";
-import { PopoverRoot, PopoverRootProps } from "./popover-root.js";
-import { PopoverTrigger, PopoverTriggerProps } from "./popover-trigger.js";
+import { PopoverArrow, PopoverArrowProps } from "./arrow.js";
+import { PopoverPopup, PopoverPopupProps } from "./popup.js";
+import { PopoverRoot, PopoverRootProps } from "./root.js";
+import { PopoverTrigger, PopoverTriggerProps } from "./trigger.js";
 declare namespace index_parts_d_exports {
   export { PopoverArrow as Arrow, PopoverArrowProps as ArrowProps, PopoverPopup as Popup, PopoverPopupProps as PopupProps, PopoverRoot as Root, PopoverRootProps as RootProps, PopoverTrigger as Trigger, PopoverTriggerProps as TriggerProps };
 }

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

@@ -1,8 +1,8 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { PopoverArrow } from "./popover-arrow.js";
-import { PopoverPopup } from "./popover-popup.js";
-import { PopoverRoot } from "./popover-root.js";
-import { PopoverTrigger } from "./popover-trigger.js";
+import { PopoverArrow } from "./arrow.js";
+import { PopoverPopup } from "./popup.js";
+import { PopoverRoot } from "./root.js";
+import { PopoverTrigger } from "./trigger.js";
 //#region src/ui/popover/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Arrow: () => PopoverArrow,

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

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/popover/index.parts.ts"],"sourcesContent":["export { PopoverArrow as Arrow, type PopoverArrowProps as ArrowProps } from './popover-arrow';\nexport { PopoverPopup as Popup, type PopoverPopupProps as PopupProps } from './popover-popup';\nexport { PopoverRoot as Root, type PopoverRootProps as RootProps } from './popover-root';\nexport { PopoverTrigger as Trigger, type PopoverTriggerProps as TriggerProps } from './popover-trigger';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/popover/index.parts.ts"],"sourcesContent":["export { PopoverArrow as Arrow, type PopoverArrowProps as ArrowProps } from './arrow';\nexport { PopoverPopup as Popup, type PopoverPopupProps as PopupProps } from './popup';\nexport { PopoverRoot as Root, type PopoverRootProps as RootProps } from './root';\nexport { PopoverTrigger as Trigger, type PopoverTriggerProps as TriggerProps } from './trigger';\n"],"mappings":""}

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

@@ -0,0 +1,16 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { PopoverState } from "@videojs/core";
+//#region src/ui/popover/popup.d.ts
+interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}
+/**
+ * Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript
+ * fallback.
+ */
+declare const PopoverPopup: import("react").ForwardRefExoticComponent<Omit<PopoverPopupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace PopoverPopup {
+  type Props = PopoverPopupProps;
+  type State = PopoverState;
+}
+//#endregion
+export { PopoverPopup, PopoverPopupProps };
+//# sourceMappingURL=popup.d.ts.map

package/dist/dev/ui/popover/popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.d.ts","names":[],"sources":["../../../../src/ui/popover/popup.tsx"],"mappings":";;;UASiB,0BAA0B,wBAAwB;;;;;cAMtD,8BAAY,0BAAA,KAAA,4CAAA,cAAA;kBAuER;OACH,QAAQ;OACR,QAAQ"}

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

@@ -0,0 +1,59 @@
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { renderElement } from "../../utils/use-render.js";
+import { usePopupPosition } from "./use-popup-position.js";
+import { usePopoverContext } from "./context.js";
+import { forwardRef, useCallback, useMemo, useRef } from "react";
+//#region src/ui/popover/popup.tsx
+/**
+* Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript
+* fallback.
+*/
+const PopoverPopup = forwardRef(function PopoverPopup({ render, className, style, ...elementProps }, forwardedRef) {
+	const { core, popover, state, preferredSide, setPositionedSide, stateAttrMap, anchorName, popupId, boundary, container } = usePopoverContext();
+	const internalRef = useRef(null);
+	const popupRef = useCallback((el) => {
+		popover.setPopupElement(el);
+	}, [popover]);
+	const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);
+	const posOpts = useMemo(() => ({
+		side: preferredSide,
+		align: state.align
+	}), [preferredSide, state.align]);
+	const positioningStyle = usePopupPosition({
+		open: state.open,
+		anchorName,
+		position: posOpts,
+		triggerSource: popover,
+		popupRef: internalRef,
+		boundary,
+		container,
+		onSideChange: setPositionedSide
+	});
+	if (!state.open) return null;
+	const { onFocusOut, ...restPopupProps } = popover.popupProps;
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: composedRef,
+		props: [
+			{
+				id: popupId,
+				style: positioningStyle,
+				...core.getPopupAttrs(state)
+			},
+			{
+				...restPopupProps,
+				onBlur: onFocusOut
+			},
+			elementProps
+		]
+	});
+});
+//#endregion
+export { PopoverPopup };
+
+//# sourceMappingURL=popup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popup.js","names":[],"sources":["../../../../src/ui/popover/popup.tsx"],"sourcesContent":["import type { PopoverState } from '@videojs/core';\nimport { forwardRef, useCallback, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\nimport { usePopupPosition } from './use-popup-position';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\n/**\n * Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript\n * fallback.\n */\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const {\n    core,\n    popover,\n    state,\n    preferredSide,\n    setPositionedSide,\n    stateAttrMap,\n    anchorName,\n    popupId,\n    boundary,\n    container,\n  } = usePopoverContext();\n  const internalRef = useRef<HTMLDivElement>(null);\n\n  const popupRef = useCallback(\n    (el: HTMLDivElement | null) => {\n      popover.setPopupElement(el);\n    },\n    [popover]\n  );\n\n  const composedRef = useComposedRefs(forwardedRef, popupRef, internalRef);\n\n  // --- Positioning ---\n\n  const posOpts = useMemo(() => ({ side: preferredSide, align: state.align }), [preferredSide, state.align]);\n\n  const positioningStyle = usePopupPosition({\n    open: state.open,\n    anchorName,\n    position: posOpts,\n    triggerSource: popover,\n    popupRef: internalRef,\n    boundary,\n    container,\n    onSideChange: setPositionedSide,\n  });\n\n  // --- Visibility ---\n\n  if (!state.open) {\n    return null;\n  }\n\n  // Remap DOM focus events to React synthetic event names.\n  const { onFocusOut, ...restPopupProps } = popover.popupProps;\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: composedRef,\n      props: [\n        {\n          id: popupId,\n          style: positioningStyle,\n          ...core.getPopupAttrs(state),\n        },\n        { ...restPopupProps, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace PopoverPopup {\n  export type Props = PopoverPopupProps;\n  export type State = PopoverState;\n}\n"],"mappings":";;;;;;;;;;AAeA,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EACJ,MACA,SACA,OACA,eACA,mBACA,cACA,YACA,SACA,UACA,cACE,kBAAkB;CACtB,MAAM,cAAc,OAAuB,IAAI;CAE/C,MAAM,WAAW,aACd,OAA8B;EAC7B,QAAQ,gBAAgB,EAAE;CAC5B,GACA,CAAC,OAAO,CACV;CAEA,MAAM,cAAc,gBAAgB,cAAc,UAAU,WAAW;CAIvE,MAAM,UAAU,eAAe;EAAE,MAAM;EAAe,OAAO,MAAM;CAAM,IAAI,CAAC,eAAe,MAAM,KAAK,CAAC;CAEzG,MAAM,mBAAmB,iBAAiB;EACxC,MAAM,MAAM;EACZ;EACA,UAAU;EACV,eAAe;EACf,UAAU;EACV;EACA;EACA,cAAc;CAChB,CAAC;CAID,IAAI,CAAC,MAAM,MACT,OAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;CAElD,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,KAAK;GAC7B;GACA;IAAE,GAAG;IAAgB,QAAQ;GAAW;GACxC;EACF;CACF,CACF;AACF,CAAC"}

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

@@ -0,0 +1,20 @@
+import { PopoverProps } from "@videojs/core";
+import { PopoverChangeDetails, PositioningBoundary } from "@videojs/core/dom";
+import { ReactNode } from "react";
+//#region src/ui/popover/root.d.ts
+interface PopoverRootProps extends Omit<PopoverProps, 'boundary'> {
+  /** Boundary used to constrain the popup size. */
+  boundary?: PositioningBoundary;
+  /** Called when the popover open state changes (fires immediately, before animations). */
+  onOpenChange?: (open: boolean, details: PopoverChangeDetails) => void;
+  /** Called after open/close animations complete. */
+  onOpenChangeComplete?: (open: boolean) => void;
+  children?: ReactNode;
+}
+declare function PopoverRoot({ open: controlledOpen, defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, openOnHover, delay, closeDelay, boundary, children, ...coreProps }: PopoverRootProps): ReactNode;
+declare namespace PopoverRoot {
+  type Props = PopoverRootProps;
+}
+//#endregion
+export { PopoverRoot, PopoverRootProps };
+//# sourceMappingURL=root.d.ts.map

package/dist/dev/ui/popover/root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","names":[],"sources":["../../../../src/ui/popover/root.tsx"],"mappings":";;;;UAqBiB,yBAAyB,KAAK;;EAE7C,WAAW;;EAEX,gBAAgB,eAAe,SAAS;;EAExC,wBAAwB;EACxB,WAAW;;iBAGG,cACd,MAAM,gBACN,aACA,cAAc,kBACd,sBAAsB,0BACtB,aACA,OACA,YACA,UACA,aACG,aACF,mBAAmB;kBAoGL;OACH,QAAQ"}

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

@@ -0,0 +1,87 @@
+import { useOptionalContainer } from "../../player/context.js";
+import { useOptionalPopupGroup } from "../../player/popup-group-context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { useOptionalControlsContext } from "../controls/context.js";
+import { usePositionedState } from "../hooks/use-positioned-state.js";
+import { PopoverContextProvider } from "./context.js";
+import { PopoverCore, PopoverDataAttrs } from "@videojs/core";
+import { createPopover, createTransition } from "@videojs/core/dom";
+import { useSnapshot } from "@videojs/store/react";
+import { useEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isUndefined } from "@videojs/utils/predicate";
+//#region src/ui/popover/root.tsx
+function PopoverRoot({ open: controlledOpen, defaultOpen = PopoverCore.defaultProps.defaultOpen, onOpenChange: onOpenChangeProp, onOpenChangeComplete: onOpenChangeCompleteProp, openOnHover = PopoverCore.defaultProps.openOnHover, delay = PopoverCore.defaultProps.delay, closeDelay = PopoverCore.defaultProps.closeDelay, boundary = "container", children, ...coreProps }) {
+	const container = useOptionalContainer();
+	const popupGroup = useOptionalPopupGroup();
+	const controls = useOptionalControlsContext();
+	const [core] = useState(() => new PopoverCore(coreProps));
+	core.setProps(coreProps);
+	const isControlled = !isUndefined(controlledOpen);
+	const onOpenChangeRef = useLatestRef(onOpenChangeProp);
+	const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);
+	const closeOnEscapeRef = useLatestRef(coreProps.closeOnEscape);
+	const closeOnOutsideClickRef = useLatestRef(coreProps.closeOnOutsideClick);
+	const openOnHoverRef = useLatestRef(openOnHover);
+	const delayRef = useLatestRef(delay);
+	const closeDelayRef = useLatestRef(closeDelay);
+	const popupGroupRef = useLatestRef(popupGroup);
+	const [popover] = useState(() => {
+		const instance = createPopover({
+			transition: createTransition(),
+			onOpenChange: (nextOpen, details) => {
+				onOpenChangeRef.current?.(nextOpen, details);
+			},
+			onOpenChangeComplete: (nextOpen) => {
+				onOpenChangeCompleteRef.current?.(nextOpen);
+			},
+			closeOnEscape: () => closeOnEscapeRef.current ?? PopoverCore.defaultProps.closeOnEscape,
+			closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? PopoverCore.defaultProps.closeOnOutsideClick,
+			openOnHover: () => openOnHoverRef.current,
+			delay: () => delayRef.current,
+			closeDelay: () => closeDelayRef.current,
+			group: () => popupGroupRef.current
+		});
+		if (!isControlled && defaultOpen) instance.open("click");
+		return instance;
+	});
+	const anchorName = useSafeId();
+	const popupId = useSafeId("popup");
+	useEffect(() => {
+		if (isUndefined(controlledOpen)) return;
+		const { active: inputOpen } = popover.input.current;
+		if (controlledOpen === inputOpen) return;
+		if (controlledOpen) popover.open("click");
+		else popover.close("click");
+	}, [controlledOpen, popover]);
+	useEffect(() => {
+		if (isUndefined(controls?.state.visible)) return;
+		if (controls.state.visible) return;
+		popover.close("imperative-action");
+	}, [controls?.state.visible, popover]);
+	useDestroy(popover);
+	const input = useSnapshot(popover.input);
+	core.setInput(input);
+	const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());
+	return /* @__PURE__ */ jsx(PopoverContextProvider, {
+		value: {
+			core,
+			popover,
+			state,
+			preferredSide,
+			setPositionedSide,
+			stateAttrMap: PopoverDataAttrs,
+			anchorName,
+			popupId,
+			boundary,
+			container
+		},
+		children
+	});
+}
+//#endregion
+export { PopoverRoot };
+
+//# sourceMappingURL=root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/popover/root.tsx"],"sourcesContent":["import { type PopoverProps as CorePopoverProps, PopoverCore, PopoverDataAttrs } from '@videojs/core';\nimport {\n  createPopover,\n  createTransition,\n  type PopoverChangeDetails,\n  type PositioningBoundary,\n} from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport { isUndefined } from '@videojs/utils/predicate';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useOptionalContainer } from '../../player/context';\nimport { useOptionalPopupGroup } from '../../player/popup-group-context';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { useOptionalControlsContext } from '../controls/context';\nimport { usePositionedState } from '../hooks/use-positioned-state';\nimport { PopoverContextProvider } from './context';\n\nexport interface PopoverRootProps extends Omit<CorePopoverProps, 'boundary'> {\n  /** Boundary used to constrain the popup size. */\n  boundary?: PositioningBoundary;\n  /** Called when the popover open state changes (fires immediately, before animations). */\n  onOpenChange?: (open: boolean, details: PopoverChangeDetails) => void;\n  /** Called after open/close animations complete. */\n  onOpenChangeComplete?: (open: boolean) => void;\n  children?: ReactNode;\n}\n\nexport function PopoverRoot({\n  open: controlledOpen,\n  defaultOpen = PopoverCore.defaultProps.defaultOpen,\n  onOpenChange: onOpenChangeProp,\n  onOpenChangeComplete: onOpenChangeCompleteProp,\n  openOnHover = PopoverCore.defaultProps.openOnHover,\n  delay = PopoverCore.defaultProps.delay,\n  closeDelay = PopoverCore.defaultProps.closeDelay,\n  boundary = 'container',\n  children,\n  ...coreProps\n}: PopoverRootProps): ReactNode {\n  const container = useOptionalContainer();\n  const popupGroup = useOptionalPopupGroup();\n  const controls = useOptionalControlsContext();\n  const [core] = useState(() => new PopoverCore(coreProps));\n\n  core.setProps(coreProps);\n\n  const isControlled = !isUndefined(controlledOpen);\n\n  // Keep refs that always point to the latest values so the\n  // createPopover closure never reads stale props.\n  const onOpenChangeRef = useLatestRef(onOpenChangeProp);\n  const onOpenChangeCompleteRef = useLatestRef(onOpenChangeCompleteProp);\n\n  const closeOnEscapeRef = useLatestRef(coreProps.closeOnEscape);\n  const closeOnOutsideClickRef = useLatestRef(coreProps.closeOnOutsideClick);\n  const openOnHoverRef = useLatestRef(openOnHover);\n  const delayRef = useLatestRef(delay);\n  const closeDelayRef = useLatestRef(closeDelay);\n\n  const popupGroupRef = useLatestRef(popupGroup);\n\n  const [popover] = useState(() => {\n    const instance = createPopover({\n      transition: createTransition(),\n      onOpenChange: (nextOpen: boolean, details: PopoverChangeDetails) => {\n        onOpenChangeRef.current?.(nextOpen, details);\n      },\n      onOpenChangeComplete: (nextOpen: boolean) => {\n        onOpenChangeCompleteRef.current?.(nextOpen);\n      },\n      closeOnEscape: () => closeOnEscapeRef.current ?? PopoverCore.defaultProps.closeOnEscape,\n      closeOnOutsideClick: () => closeOnOutsideClickRef.current ?? PopoverCore.defaultProps.closeOnOutsideClick,\n      openOnHover: () => openOnHoverRef.current,\n      delay: () => delayRef.current,\n      closeDelay: () => closeDelayRef.current,\n      group: () => popupGroupRef.current,\n    });\n\n    // Apply defaultOpen on creation (uncontrolled only)\n    if (!isControlled && defaultOpen) {\n      instance.open('click');\n    }\n\n    return instance;\n  });\n\n  const anchorName = useSafeId();\n  const popupId = useSafeId('popup');\n\n  // Sync controlled open prop -> internal input state.\n  useEffect(() => {\n    if (isUndefined(controlledOpen)) return;\n\n    const { active: inputOpen } = popover.input.current;\n    if (controlledOpen === inputOpen) return;\n\n    if (controlledOpen) {\n      popover.open('click');\n    } else {\n      popover.close('click');\n    }\n  }, [controlledOpen, popover]);\n\n  useEffect(() => {\n    if (isUndefined(controls?.state.visible)) return;\n\n    if (controls.state.visible) return;\n\n    popover.close('imperative-action');\n  }, [controls?.state.visible, popover]);\n\n  useDestroy(popover);\n\n  const input = useSnapshot(popover.input);\n\n  core.setInput(input);\n  const { state, preferredSide, setPositionedSide } = usePositionedState(core.getState());\n\n  return (\n    <PopoverContextProvider\n      value={{\n        core,\n        popover,\n        state,\n        preferredSide,\n        setPositionedSide,\n        stateAttrMap: PopoverDataAttrs,\n        anchorName,\n        popupId,\n        boundary,\n        container,\n      }}\n    >\n      {children}\n    </PopoverContextProvider>\n  );\n}\n\nexport namespace PopoverRoot {\n  export type Props = PopoverRootProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA+BA,SAAgB,YAAY,EAC1B,MAAM,gBACN,cAAc,YAAY,aAAa,aACvC,cAAc,kBACd,sBAAsB,0BACtB,cAAc,YAAY,aAAa,aACvC,QAAQ,YAAY,aAAa,OACjC,aAAa,YAAY,aAAa,YACtC,WAAW,aACX,UACA,GAAG,aAC2B;CAC9B,MAAM,YAAY,qBAAqB;CACvC,MAAM,aAAa,sBAAsB;CACzC,MAAM,WAAW,2BAA2B;CAC5C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,SAAS,CAAC;CAExD,KAAK,SAAS,SAAS;CAEvB,MAAM,eAAe,CAAC,YAAY,cAAc;CAIhD,MAAM,kBAAkB,aAAa,gBAAgB;CACrD,MAAM,0BAA0B,aAAa,wBAAwB;CAErE,MAAM,mBAAmB,aAAa,UAAU,aAAa;CAC7D,MAAM,yBAAyB,aAAa,UAAU,mBAAmB;CACzE,MAAM,iBAAiB,aAAa,WAAW;CAC/C,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,gBAAgB,aAAa,UAAU;CAE7C,MAAM,gBAAgB,aAAa,UAAU;CAE7C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,iBAAiB;GAC7B,eAAe,UAAmB,YAAkC;IAClE,gBAAgB,UAAU,UAAU,OAAO;GAC7C;GACA,uBAAuB,aAAsB;IAC3C,wBAAwB,UAAU,QAAQ;GAC5C;GACA,qBAAqB,iBAAiB,WAAW,YAAY,aAAa;GAC1E,2BAA2B,uBAAuB,WAAW,YAAY,aAAa;GACtF,mBAAmB,eAAe;GAClC,aAAa,SAAS;GACtB,kBAAkB,cAAc;GAChC,aAAa,cAAc;EAC7B,CAAC;EAGD,IAAI,CAAC,gBAAgB,aACnB,SAAS,KAAK,OAAO;EAGvB,OAAO;CACT,CAAC;CAED,MAAM,aAAa,UAAU;CAC7B,MAAM,UAAU,UAAU,OAAO;CAGjC,gBAAgB;EACd,IAAI,YAAY,cAAc,GAAG;EAEjC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;EAC5C,IAAI,mBAAmB,WAAW;EAElC,IAAI,gBACF,QAAQ,KAAK,OAAO;OAEpB,QAAQ,MAAM,OAAO;CAEzB,GAAG,CAAC,gBAAgB,OAAO,CAAC;CAE5B,gBAAgB;EACd,IAAI,YAAY,UAAU,MAAM,OAAO,GAAG;EAE1C,IAAI,SAAS,MAAM,SAAS;EAE5B,QAAQ,MAAM,mBAAmB;CACnC,GAAG,CAAC,UAAU,MAAM,SAAS,OAAO,CAAC;CAErC,WAAW,OAAO;CAElB,MAAM,QAAQ,YAAY,QAAQ,KAAK;CAEvC,KAAK,SAAS,KAAK;CACnB,MAAM,EAAE,OAAO,eAAe,sBAAsB,mBAAmB,KAAK,SAAS,CAAC;CAEtF,OACE,oBAAC,wBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA,cAAc;GACd;GACA;GACA;GACA;EACF;EAEC;CACqB,CAAA;AAE5B"}

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

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

package/dist/dev/ui/popover/trigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.d.ts","names":[],"sources":["../../../../src/ui/popover/trigger.tsx"],"mappings":";;;UAOiB,4BAA4B,2BAA2B;;cAG3D,gCAAc,0BAAA,KAAA,8CAAA,cAAA;kBAsCV;OACH,QAAQ;OACR,QAAQ"}

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

@@ -0,0 +1,38 @@
+import { renderElement } from "../../utils/use-render.js";
+import { usePopoverContext } from "./context.js";
+import { forwardRef, useCallback } from "react";
+//#region src/ui/popover/trigger.tsx
+/** Button that toggles the popover visibility. Renders a `<button>` element. */
+const PopoverTrigger = forwardRef(function PopoverTrigger({ render, className, style, ...elementProps }, forwardedRef) {
+	const { core, popover, state, stateAttrMap, popupId } = usePopoverContext();
+	const controlledId = state.open ? popupId : void 0;
+	const triggerRef = useCallback((el) => {
+		popover.setTriggerElement(el);
+	}, [popover]);
+	const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.triggerProps;
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef, triggerRef],
+		props: [
+			{
+				type: "button",
+				...core.getTriggerAttrs(state, controlledId)
+			},
+			{
+				...restTriggerProps,
+				onFocus: onFocusIn,
+				onBlur: onFocusOut
+			},
+			elementProps
+		]
+	});
+});
+//#endregion
+export { PopoverTrigger };
+
+//# sourceMappingURL=trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.js","names":[],"sources":["../../../../src/ui/popover/trigger.tsx"],"sourcesContent":["import type { PopoverState } from '@videojs/core';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverTriggerProps extends UIComponentProps<'button', PopoverState> {}\n\n/** Button that toggles the popover visibility. Renders a `<button>` element. */\nexport const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(function PopoverTrigger(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, popover, state, stateAttrMap, popupId } = usePopoverContext();\n  const controlledId = state.open ? popupId : undefined;\n\n  const triggerRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      popover.setTriggerElement(el);\n    },\n    [popover]\n  );\n\n  // Remap DOM focus events to React synthetic event names.\n  // createPopover() uses onFocusIn/onFocusOut (matching DOM focusin/focusout),\n  // but React maps those to onFocus/onBlur.\n  const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.triggerProps;\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, triggerRef],\n      props: [\n        {\n          type: 'button' as const,\n          ...core.getTriggerAttrs(state, controlledId),\n        },\n        { ...restTriggerProps, onFocus: onFocusIn, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace PopoverTrigger {\n  export type Props = PopoverTriggerProps;\n  export type State = PopoverState;\n}\n"],"mappings":";;;;;AAUA,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,kBAAkB;CAC1E,MAAM,eAAe,MAAM,OAAO,UAAU,KAAA;CAE5C,MAAM,aAAa,aAChB,OAAiC;EAChC,QAAQ,kBAAkB,EAAE;CAC9B,GACA,CAAC,OAAO,CACV;CAKA,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;CAE/D,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GACL;IACE,MAAM;IACN,GAAG,KAAK,gBAAgB,OAAO,YAAY;GAC7C;GACA;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;GAAW;GAC9D;EACF;CACF,CACF;AACF,CAAC"}

package/dist/dev/ui/poster/context.js

@@ -0,0 +1,20 @@
+import "@videojs/core";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/poster/context.tsx
+const PosterContext = createContext(null);
+function PosterProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(PosterContext.Provider, {
+		value,
+		children
+	});
+}
+function usePosterContext() {
+	const ctx = useContext(PosterContext);
+	if (!ctx) throw new Error("Poster compound components must be used within a Poster.Root");
+	return ctx;
+}
+//#endregion
+export { PosterProvider, usePosterContext };
+
+//# sourceMappingURL=context.js.map

package/dist/dev/ui/poster/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/poster/context.tsx"],"sourcesContent":["import { type PosterImageLoadState, type PosterState } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface PosterContextValue {\n  state: PosterState;\n  setImageLoadState: (state: PosterImageLoadState) => void;\n}\n\nconst PosterContext = createContext<PosterContextValue | null>(null);\n\nexport function PosterProvider({ value, children }: ProviderProps<PosterContextValue>) {\n  return <PosterContext.Provider value={value}>{children}</PosterContext.Provider>;\n}\n\nexport function usePosterContext(): PosterContextValue {\n  const ctx = useContext(PosterContext);\n  if (!ctx) throw new Error('Poster compound components must be used within a Poster.Root');\n\n  return ctx;\n}\n"],"mappings":";;;;AAQA,MAAM,gBAAgB,cAAyC,IAAI;AAEnE,SAAgB,eAAe,EAAE,OAAO,YAA+C;CACrF,OAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;CAAiC,CAAA;AACjF;AAEA,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,aAAa;CACpC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,8DAA8D;CAExF,OAAO;AACT"}

package/dist/dev/ui/poster/image.d.ts

@@ -0,0 +1,17 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { PosterCore } from "@videojs/core";
+//#region src/ui/poster/image.d.ts
+interface PosterImageProps extends UIComponentProps<'img', PosterCore.State> {}
+/**
+ * Displays the poster image managed by `Poster.Root`.
+ *
+ * Renders an `img`, so `srcSet`, `sizes`, `loading`, and the rest of the native image attributes remain available.
+ * Leave the source off and the player's resolved poster fills it in. The image is decorative unless you supply `alt`.
+ */
+declare const PosterImage: import("react").ForwardRefExoticComponent<Omit<PosterImageProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+declare namespace PosterImage {
+  type Props = PosterImageProps;
+}
+//#endregion
+export { PosterImage, PosterImageProps };
+//# sourceMappingURL=image.d.ts.map

package/dist/dev/ui/poster/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","names":[],"sources":["../../../../src/ui/poster/image.tsx"],"mappings":";;;UAUiB,yBAAyB,wBAAwB,WAAW;;;;;;;cAehE,6BAAW,0BAAA,KAAA,2CAAA,cAAA;kBAiGP;OACH,QAAQ"}

package/dist/dev/ui/poster/image.js

@@ -0,0 +1,92 @@
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { renderElement } from "../../utils/use-render.js";
+import { usePosterContext } from "./context.js";
+import { forwardRef, useCallback, useLayoutEffect, useRef, useState } from "react";
+//#region src/ui/poster/image.tsx
+/**
+* Displays the poster image managed by `Poster.Root`.
+*
+* Renders an `img`, so `srcSet`, `sizes`, `loading`, and the rest of the native image attributes remain available.
+* Leave the source off and the player's resolved poster fills it in. The image is decorative unless you supply `alt`.
+*/
+const PosterImage = forwardRef(function PosterImage(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const { state, setImageLoadState } = usePosterContext();
+	const { src: authoredSrc, srcSet: authoredSrcSet } = elementProps;
+	const src = authoredSrc ?? (authoredSrcSet === void 0 ? state.src : "");
+	const initialLoadState = !src && authoredSrcSet === void 0 ? "none" : "loading";
+	const [request, setRequest] = useState(() => ({
+		src,
+		srcSet: authoredSrcSet,
+		state: initialLoadState
+	}));
+	const didCheckInitialImageRef = useRef(false);
+	const requested = useLatestRef({
+		src,
+		srcSet: authoredSrcSet
+	});
+	const matchesRequest = request.src === src && request.srcSet === authoredSrcSet;
+	if (!matchesRequest) setRequest({
+		src,
+		srcSet: authoredSrcSet,
+		state: initialLoadState
+	});
+	const loadState = matchesRequest ? request.state : initialLoadState;
+	useLayoutEffect(() => {
+		setImageLoadState(loadState);
+		return () => setImageLoadState("none");
+	}, [
+		authoredSrcSet,
+		loadState,
+		setImageLoadState,
+		src
+	]);
+	const checkInitialImage = useCallback((img) => {
+		if (!img || didCheckInitialImageRef.current) return;
+		didCheckInitialImageRef.current = true;
+		const { src, srcSet } = requested.current;
+		if (img.naturalWidth > 0) setRequest({
+			src,
+			srcSet,
+			state: "loaded"
+		});
+		else if (img.complete && (img.getAttribute("src") || img.hasAttribute("srcset"))) setRequest({
+			src,
+			srcSet,
+			state: "error"
+		});
+	}, [requested]);
+	const ref = useComposedRefs(forwardedRef, checkInitialImage);
+	const handleLoad = () => setRequest({
+		src,
+		srcSet: authoredSrcSet,
+		state: "loaded"
+	});
+	const handleError = () => setRequest({
+		src,
+		srcSet: authoredSrcSet,
+		state: "error"
+	});
+	return renderElement("img", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref,
+		props: [
+			{ alt: "" },
+			elementProps,
+			{
+				src: src || void 0,
+				onLoad: handleLoad,
+				onError: handleError
+			}
+		]
+	});
+});
+//#endregion
+export { PosterImage };
+
+//# sourceMappingURL=image.js.map

package/dist/dev/ui/poster/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","names":[],"sources":["../../../../src/ui/poster/image.tsx"],"sourcesContent":["import type { PosterCore, PosterImageLoadState } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useComposedRefs } from '../../utils/use-composed-refs';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { usePosterContext } from './context';\n\nexport interface PosterImageProps extends UIComponentProps<'img', PosterCore.State> {}\n\n/** The source currently requested from the image, and how it is faring. */\ninterface ImageRequest {\n  src: string;\n  srcSet: string | undefined;\n  state: PosterImageLoadState;\n}\n\n/**\n * Displays the poster image managed by `Poster.Root`.\n *\n * Renders an `img`, so `srcSet`, `sizes`, `loading`, and the rest of the native image attributes remain available.\n * Leave the source off and the player's resolved poster fills it in. The image is decorative unless you supply `alt`.\n */\nexport const PosterImage = forwardRef(function PosterImage(\n  componentProps: PosterImageProps,\n  forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n  const { state, setImageLoadState } = usePosterContext();\n\n  const { src: authoredSrc, srcSet: authoredSrcSet } = elementProps;\n\n  // Either authored source makes the image yours, matching `hasSource` in the\n  // HTML element. Filling `src` alongside a `srcset` would inject the player's\n  // poster into your candidate set as the 1x entry.\n  const src = authoredSrc ?? (authoredSrcSet === undefined ? state.src : '');\n\n  const initialLoadState: PosterImageLoadState = !src && authoredSrcSet === undefined ? 'none' : 'loading';\n  const [request, setRequest] = useState<ImageRequest>(() => ({\n    src,\n    srcSet: authoredSrcSet,\n    state: initialLoadState,\n  }));\n  const didCheckInitialImageRef = useRef(false);\n  const requested = useLatestRef({ src, srcSet: authoredSrcSet });\n\n  // Keep only the active request. Retaining a settled source by value would\n  // resurrect its old state when the image moved A -> B -> A, even though the\n  // second A is a new request. `srcSet` is part of the identity because `src`\n  // stays empty when it is the only source.\n  const matchesRequest = request.src === src && request.srcSet === authoredSrcSet;\n\n  if (!matchesRequest) setRequest({ src, srcSet: authoredSrcSet, state: initialLoadState });\n\n  const loadState = matchesRequest ? request.state : initialLoadState;\n\n  // Before paint, so the root's first frame already carries `data-loading` for a\n  // source that is resolving instead of flashing the layers keyed off that state.\n  // The reset lives in the same effect: a passive cleanup would run after this\n  // layout write when Strict Mode re-runs effects, leaving the root at `none`.\n  useLayoutEffect(() => {\n    setImageLoadState(loadState);\n\n    return () => setImageLoadState('none');\n  }, [authoredSrcSet, loadState, setImageLoadState, src]);\n\n  // An image can already be settled when we first see it — hydrated from server\n  // markup, say — in which case neither `load` nor `error` ever fires. Decoded\n  // pixels stand on their own; the absence of them only means failure once\n  // `complete` can be trusted, which takes a source on the image itself, since one\n  // sourced by a `<picture>` an override wrapped it in is `complete` regardless.\n  //\n  // Only when we first see it. A later source change leaves the previous request's\n  // pixels in place until the new one settles, so reading them again would call\n  // the new source loaded while it is still fetching. `load` and `error` cover\n  // every source after this one, the way the HTML element reads an image once.\n  // The check rides on the ref, so an override that renders nothing until a\n  // source resolves is still read the moment its image mounts.\n  const checkInitialImage = useCallback(\n    (img: HTMLImageElement | null) => {\n      if (!img || didCheckInitialImageRef.current) return;\n\n      didCheckInitialImageRef.current = true;\n\n      const { src, srcSet } = requested.current;\n\n      if (img.naturalWidth > 0) setRequest({ src, srcSet, state: 'loaded' });\n      else if (img.complete && (img.getAttribute('src') || img.hasAttribute('srcset'))) {\n        setRequest({ src, srcSet, state: 'error' });\n      }\n    },\n    [requested]\n  );\n  const ref = useComposedRefs(forwardedRef, checkInitialImage);\n\n  // Recorded against the source this render asked for, not the one on the\n  // element: a `render` override is free to rewrite it.\n  const handleLoad = () => setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' });\n  const handleError = () => setRequest({ src, srcSet: authoredSrcSet, state: 'error' });\n\n  return renderElement(\n    'img',\n    { render, className, style },\n    {\n      state,\n      ref,\n      props: [\n        { alt: '' },\n        elementProps,\n        {\n          // An empty `src` requests the document URL, so leave the attribute off.\n          src: src || undefined,\n          onLoad: handleLoad,\n          onError: handleError,\n        },\n      ],\n    }\n  );\n});\n\nexport namespace PosterImage {\n  export type Props = PosterImageProps;\n}\n"],"mappings":";;;;;;;;;;;;AAyBA,MAAa,cAAc,WAAW,SAAS,YAC7C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,OAAO,sBAAsB,iBAAiB;CAEtD,MAAM,EAAE,KAAK,aAAa,QAAQ,mBAAmB;CAKrD,MAAM,MAAM,gBAAgB,mBAAmB,KAAA,IAAY,MAAM,MAAM;CAEvE,MAAM,mBAAyC,CAAC,OAAO,mBAAmB,KAAA,IAAY,SAAS;CAC/F,MAAM,CAAC,SAAS,cAAc,gBAA8B;EAC1D;EACA,QAAQ;EACR,OAAO;CACT,EAAE;CACF,MAAM,0BAA0B,OAAO,KAAK;CAC5C,MAAM,YAAY,aAAa;EAAE;EAAK,QAAQ;CAAe,CAAC;CAM9D,MAAM,iBAAiB,QAAQ,QAAQ,OAAO,QAAQ,WAAW;CAEjE,IAAI,CAAC,gBAAgB,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAiB,CAAC;CAExF,MAAM,YAAY,iBAAiB,QAAQ,QAAQ;CAMnD,sBAAsB;EACpB,kBAAkB,SAAS;EAE3B,aAAa,kBAAkB,MAAM;CACvC,GAAG;EAAC;EAAgB;EAAW;EAAmB;CAAG,CAAC;CActD,MAAM,oBAAoB,aACvB,QAAiC;EAChC,IAAI,CAAC,OAAO,wBAAwB,SAAS;EAE7C,wBAAwB,UAAU;EAElC,MAAM,EAAE,KAAK,WAAW,UAAU;EAElC,IAAI,IAAI,eAAe,GAAG,WAAW;GAAE;GAAK;GAAQ,OAAO;EAAS,CAAC;OAChE,IAAI,IAAI,aAAa,IAAI,aAAa,KAAK,KAAK,IAAI,aAAa,QAAQ,IAC5E,WAAW;GAAE;GAAK;GAAQ,OAAO;EAAQ,CAAC;CAE9C,GACA,CAAC,SAAS,CACZ;CACA,MAAM,MAAM,gBAAgB,cAAc,iBAAiB;CAI3D,MAAM,mBAAmB,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAS,CAAC;CACpF,MAAM,oBAAoB,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAQ,CAAC;CAEpF,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,OAAO;GACL,EAAE,KAAK,GAAG;GACV;GACA;IAEE,KAAK,OAAO,KAAA;IACZ,QAAQ;IACR,SAAS;GACX;EACF;CACF,CACF;AACF,CAAC"}

package/dist/dev/ui/poster/index.d.ts

@@ -1,2 +1,2 @@
-import { Poster, PosterProps } from "./poster.js";
-export { Poster, type PosterProps };
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as Poster };

package/dist/dev/ui/poster/index.js

@@ -1,2 +1,2 @@
-import { Poster } from "./poster.js";
-export { Poster };
+import { index_parts_exports } from "./index.parts.js";
+export { index_parts_exports as Poster };

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

@@ -0,0 +1,8 @@
+import { PosterImage, PosterImageProps } from "./image.js";
+import { PosterRoot, PosterRootProps } from "./root.js";
+declare namespace index_parts_d_exports {
+  export { PosterImage as Image, PosterImageProps as ImageProps, PosterRoot as Root, PosterRootProps as RootProps };
+}
+//#endregion
+export { PosterImage as Image, type PosterImageProps as ImageProps, PosterRoot as Root, type PosterRootProps as RootProps, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

package/dist/dev/ui/poster/index.parts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.d.ts","names":[],"sources":["../../../../src/ui/poster/index.parts.ts"],"mappings":""}

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

@@ -0,0 +1,12 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { PosterImage } from "./image.js";
+import { PosterRoot } from "./root.js";
+//#region src/ui/poster/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Image: () => PosterImage,
+	Root: () => PosterRoot
+});
+//#endregion
+export { PosterImage as Image, PosterRoot as Root, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/poster/index.parts.ts"],"sourcesContent":["export { PosterImage as Image, type PosterImageProps as ImageProps } from './image';\nexport { PosterRoot as Root, type PosterRootProps as RootProps } from './root';\n"],"mappings":""}