@videojs/react 10.0.0-alpha.3 → 10.0.0-alpha.5

package/dist/default/ui/mute-button/mute-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"mute-button.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"sourcesContent":["'use client';\n\nimport { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectVolume } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\n\nexport interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}\n\n/**\n * A button that toggles mute state.\n */\nexport const MuteButton = forwardRef(function MuteButton(\n  componentProps: MuteButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n  const volume = usePlayer(selectVolume);\n\n  const [core] = useState(() => new MuteButtonCore());\n  core.setProps({ label, disabled });\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'MuteButton',\n    onActivate: () => core.toggle(volume!),\n    isDisabled: () => disabled || !volume,\n  });\n\n  if (!volume) {\n    if (__DEV__) logMissingFeature('MuteButton', 'volume');\n    return null;\n  }\n\n  const state = core.getState(volume);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: MuteButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [core.getAttrs(state), elementProps, getButtonProps()],\n    }\n  );\n});\n\nexport namespace MuteButton {\n  export type Props = MuteButtonProps;\n  export type State = MuteButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEvE,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,OAAO,OAAQ;EACtC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,OAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,OAAO;AAEnC,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC,KAAK,SAAS,MAAM;GAAE;GAAc,gBAAgB;GAAC;EAC9D,CACF;EACD"}
+{"version":3,"file":"mute-button.js","names":[],"sources":["../../../../src/ui/mute-button/mute-button.tsx"],"sourcesContent":["'use client';\n\nimport { MuteButtonCore, MuteButtonDataAttrs } from '@videojs/core';\nimport { selectVolume } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}\n\n/** A button that toggles mute state. */\nexport const MuteButton = createMediaButton<MuteButtonCore, MuteButtonProps>({\n  displayName: 'MuteButton',\n  core: MuteButtonCore,\n  stateAttrMap: MuteButtonDataAttrs,\n  selector: selectVolume,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace MuteButton {\n  export type Props = MuteButtonProps;\n  export type State = MuteButtonCore.State;\n}\n"],"mappings":";;;;;;;;AAWA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}

package/dist/default/ui/pip-button/pip-button.js

@@ -1,42 +1,17 @@
 'use client';
 
-import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
-import { useButton } from "../hooks/use-button.js";
+import { createMediaButton } from "../create-media-button.js";
 import { selectPiP } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
 import { PiPButtonCore, PiPButtonDataAttrs } from "@videojs/core";
 
 //#region src/ui/pip-button/pip-button.tsx
-const PiPButton = forwardRef(function PiPButton(componentProps, forwardedRef) {
-	const { render, className, style, label, disabled, ...elementProps } = componentProps;
-	const pip = usePlayer(selectPiP);
-	const [core] = useState(() => new PiPButtonCore());
-	core.setProps({
-		label,
-		disabled
-	});
-	const { getButtonProps, buttonRef } = useButton({
-		displayName: "PiPButton",
-		onActivate: () => core.toggle(pip),
-		isDisabled: () => disabled || !pip
-	});
-	if (!pip) return null;
-	const state = core.getState(pip);
-	return renderElement("button", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap: PiPButtonDataAttrs,
-		ref: [forwardedRef, buttonRef],
-		props: [
-			core.getAttrs(state),
-			elementProps,
-			getButtonProps()
-		]
-	});
+/** A button that toggles picture-in-picture. */
+const PiPButton = createMediaButton({
+	displayName: "PiPButton",
+	core: PiPButtonCore,
+	stateAttrMap: PiPButtonDataAttrs,
+	selector: selectPiP,
+	action: (core, state) => core.toggle(state)
 });
 
 //#endregion

package/dist/default/ui/pip-button/pip-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"sourcesContent":["'use client';\n\nimport { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPiP } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\n\nexport interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}\n\nexport const PiPButton = forwardRef(function PiPButton(\n  componentProps: PiPButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n  const pip = usePlayer(selectPiP);\n\n  const [core] = useState(() => new PiPButtonCore());\n  core.setProps({ label, disabled });\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'PiPButton',\n    onActivate: () => core.toggle(pip!),\n    isDisabled: () => disabled || !pip,\n  });\n\n  if (!pip) {\n    if (__DEV__) logMissingFeature('PiPButton', 'pip');\n    return null;\n  }\n\n  const state = core.getState(pip);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: PiPButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [core.getAttrs(state), elementProps, getButtonProps()],\n    }\n  );\n});\n\nexport namespace PiPButton {\n  export type Props = PiPButtonProps;\n  export type State = PiPButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;AAcA,MAAa,YAAY,WAAW,SAAS,UAC3C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEvE,MAAM,MAAM,UAAU,UAAU;CAEhC,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;AAClD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,OAAO,IAAK;EACnC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,IAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,IAAI;AAEhC,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC,KAAK,SAAS,MAAM;GAAE;GAAc,gBAAgB;GAAC;EAC9D,CACF;EACD"}
+{"version":3,"file":"pip-button.js","names":[],"sources":["../../../../src/ui/pip-button/pip-button.tsx"],"sourcesContent":["'use client';\n\nimport { PiPButtonCore, PiPButtonDataAttrs } from '@videojs/core';\nimport { selectPiP } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}\n\n/** A button that toggles picture-in-picture. */\nexport const PiPButton = createMediaButton<PiPButtonCore, PiPButtonProps>({\n  displayName: 'PiPButton',\n  core: PiPButtonCore,\n  stateAttrMap: PiPButtonDataAttrs,\n  selector: selectPiP,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace PiPButton {\n  export type Props = PiPButtonProps;\n  export type State = PiPButtonCore.State;\n}\n"],"mappings":";;;;;;;;AAWA,MAAa,YAAY,kBAAiD;CACxE,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}

package/dist/default/ui/play-button/play-button.js

@@ -1,10 +1,7 @@
 'use client';
 
-import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
-import { useButton } from "../hooks/use-button.js";
+import { createMediaButton } from "../create-media-button.js";
 import { selectPlayback } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
 import { PlayButtonCore, PlayButtonDataAttrs } from "@videojs/core";
 
 //#region src/ui/play-button/play-button.tsx
@@ -24,35 +21,12 @@ import { PlayButtonCore, PlayButtonDataAttrs } from "@videojs/core";
 * />
 * ```
 */
-const PlayButton = forwardRef(function PlayButton(componentProps, forwardedRef) {
-	const { render, className, style, label, disabled, ...elementProps } = componentProps;
-	const playback = usePlayer(selectPlayback);
-	const [core] = useState(() => new PlayButtonCore());
-	core.setProps({
-		label,
-		disabled
-	});
-	const { getButtonProps, buttonRef } = useButton({
-		displayName: "PlayButton",
-		onActivate: () => core.toggle(playback),
-		isDisabled: () => disabled || !playback
-	});
-	if (!playback) return null;
-	const state = core.getState(playback);
-	return renderElement("button", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap: PlayButtonDataAttrs,
-		ref: [forwardedRef, buttonRef],
-		props: [
-			core.getAttrs(state),
-			elementProps,
-			getButtonProps()
-		]
-	});
+const PlayButton = createMediaButton({
+	displayName: "PlayButton",
+	core: PlayButtonCore,
+	stateAttrMap: PlayButtonDataAttrs,
+	selector: selectPlayback,
+	action: (core, state) => core.toggle(state)
 });
 
 //#endregion

package/dist/default/ui/play-button/play-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"play-button.js","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\n\nexport interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.State>, PlayButtonCore.Props {}\n\n/**\n * A button that toggles playback.\n *\n * @example\n * ```tsx\n * <PlayButton />\n *\n * <PlayButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.paused ? <PlayIcon /> : <PauseIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const PlayButton = forwardRef(function PlayButton(\n  componentProps: PlayButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, label, disabled, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new PlayButtonCore());\n  core.setProps({ label, disabled });\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'PlayButton',\n    onActivate: () => core.toggle(playback!),\n    isDisabled: () => disabled || !playback,\n  });\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('PlayButton', 'playback');\n    return null;\n  }\n\n  const state = core.getState(playback);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: PlayButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [core.getAttrs(state), elementProps, getButtonProps()],\n    }\n  );\n});\n\nexport namespace PlayButton {\n  export type Props = PlayButtonProps;\n  export type State = PlayButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEvE,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAU,CAAC;CAElC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,OAAO,SAAU;EACxC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,SAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,SAAS;AAErC,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC,KAAK,SAAS,MAAM;GAAE;GAAc,gBAAgB;GAAC;EAC9D,CACF;EACD"}
+{"version":3,"file":"play-button.js","names":[],"sources":["../../../../src/ui/play-button/play-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlayButtonCore, PlayButtonDataAttrs } from '@videojs/core';\nimport { selectPlayback } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.State>, PlayButtonCore.Props {}\n\n/**\n * A button that toggles playback.\n *\n * @example\n * ```tsx\n * <PlayButton />\n *\n * <PlayButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.paused ? <PlayIcon /> : <PauseIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const PlayButton = createMediaButton<PlayButtonCore, PlayButtonProps>({\n  displayName: 'PlayButton',\n  core: PlayButtonCore,\n  stateAttrMap: PlayButtonDataAttrs,\n  selector: selectPlayback,\n  action: (core, state) => core.toggle(state),\n});\n\nexport namespace PlayButton {\n  export type Props = PlayButtonProps;\n  export type State = PlayButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA0BA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,MAAM;CAC5C,CAAC"}

package/dist/default/ui/playback-rate-button/index.js

@@ -0,0 +1,3 @@
+import { PlaybackRateButton } from "./playback-rate-button.js";
+
+export { PlaybackRateButton };

package/dist/default/ui/playback-rate-button/playback-rate-button.js

@@ -0,0 +1,34 @@
+'use client';
+
+import { createMediaButton } from "../create-media-button.js";
+import { selectPlaybackRate } from "@videojs/core/dom";
+import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from "@videojs/core";
+
+//#region src/ui/playback-rate-button/playback-rate-button.tsx
+/**
+* A button that cycles through playback rates.
+*
+* @example
+* ```tsx
+* <PlaybackRateButton />
+*
+* <PlaybackRateButton
+*   render={(props, state) => (
+*     <button {...props}>
+*       {state.rate}&times;
+*     </button>
+*   )}
+* />
+* ```
+*/
+const PlaybackRateButton = createMediaButton({
+	displayName: "PlaybackRateButton",
+	core: PlaybackRateButtonCore,
+	stateAttrMap: PlaybackRateButtonDataAttrs,
+	selector: selectPlaybackRate,
+	action: (core, state) => core.cycle(state)
+});
+
+//#endregion
+export { PlaybackRateButton };
+//# sourceMappingURL=playback-rate-button.js.map

package/dist/default/ui/playback-rate-button/playback-rate-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playback-rate-button.js","names":[],"sources":["../../../../src/ui/playback-rate-button/playback-rate-button.tsx"],"sourcesContent":["'use client';\n\nimport { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from '@videojs/core';\nimport { selectPlaybackRate } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface PlaybackRateButtonProps\n  extends UIComponentProps<'button', PlaybackRateButtonCore.State>,\n    PlaybackRateButtonCore.Props {}\n\n/**\n * A button that cycles through playback rates.\n *\n * @example\n * ```tsx\n * <PlaybackRateButton />\n *\n * <PlaybackRateButton\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.rate}&times;\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const PlaybackRateButton = createMediaButton<PlaybackRateButtonCore, PlaybackRateButtonProps>({\n  displayName: 'PlaybackRateButton',\n  core: PlaybackRateButtonCore,\n  stateAttrMap: PlaybackRateButtonDataAttrs,\n  selector: selectPlaybackRate,\n  action: (core, state) => core.cycle(state),\n});\n\nexport namespace PlaybackRateButton {\n  export type Props = PlaybackRateButtonProps;\n  export type State = PlaybackRateButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,qBAAqB,kBAAmE;CACnG,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,MAAM,MAAM;CAC3C,CAAC"}

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

@@ -0,0 +1,16 @@
+'use client';
+
+import { createContext, useContext } from "react";
+
+//#region src/ui/popover/context.tsx
+const PopoverContext = createContext(null);
+const PopoverContextProvider = PopoverContext.Provider;
+function usePopoverContext() {
+	const ctx = useContext(PopoverContext);
+	if (!ctx) throw new Error("Popover compound components must be used within a Popover.Root");
+	return ctx;
+}
+
+//#endregion
+export { PopoverContextProvider, usePopoverContext };
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/popover/context.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverCore, StateAttrMap } from '@videojs/core';\nimport type { PopoverApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface PopoverContextValue {\n  core: PopoverCore;\n  popover: PopoverApi;\n  state: PopoverCore.State;\n  stateAttrMap: StateAttrMap<PopoverCore.State>;\n  anchorName: string;\n  popupId: string;\n}\n\nconst PopoverContext = createContext<PopoverContextValue | null>(null);\n\nexport const PopoverContextProvider = PopoverContext.Provider;\n\nexport function usePopoverContext(): PopoverContextValue {\n  const ctx = useContext(PopoverContext);\n  if (!ctx) throw new Error('Popover compound components must be used within a Popover.Root');\n  return ctx;\n}\n"],"mappings":";;;;;AAeA,MAAM,iBAAiB,cAA0C,KAAK;AAEtE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,eAAe;AACtC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,iEAAiE;AAC3F,QAAO"}

package/dist/default/ui/popover/index.js

@@ -0,0 +1,4 @@
+import { usePopoverContext } from "./context.js";
+import { index_parts_exports } from "./index.parts.js";
+
+export { index_parts_exports as Popover, usePopoverContext };

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

@@ -0,0 +1,17 @@
+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";
+
+//#region src/ui/popover/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Arrow: () => PopoverArrow,
+	Popup: () => PopoverPopup,
+	Root: () => PopoverRoot,
+	Trigger: () => PopoverTrigger
+});
+
+//#endregion
+export { index_parts_exports };
+//# sourceMappingURL=index.parts.js.map

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

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

package/dist/default/ui/popover/popover-arrow.js

@@ -0,0 +1,17 @@
+'use client';
+
+import { usePopoverContext } from "./context.js";
+import { createContextPart } from "../create-context-part.js";
+
+//#region src/ui/popover/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=popover-arrow.js.map

package/dist/default/ui/popover/popover-arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-arrow.js","names":[],"sources":["../../../../src/ui/popover/popover-arrow.tsx"],"sourcesContent":["'use client';\n\nimport 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":";;;;;;;AAWA,MAAa,eAAe,kBAAmD;CAC7E,aAAa;CACb,KAAK;CACL,YAAY;CACZ,aAAa,EAAE,eAAe,QAAiB;CAChD,CAAC"}

package/dist/default/ui/popover/popover-popup.js

@@ -0,0 +1,94 @@
+'use client';
+
+import { useComposedRefs } from "../../utils/use-composed-refs.js";
+import { renderElement } from "../../utils/use-render.js";
+import { usePopoverContext } from "./context.js";
+import { getAnchorPositionStyle, resolveOffsets } from "@videojs/core/dom";
+import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { supportsAnchorPositioning } from "@videojs/utils/dom";
+
+//#region src/ui/popover/popover-popup.tsx
+const POPOVER_RESET = {
+	position: "fixed",
+	inset: "auto",
+	margin: 0
+};
+/** 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, stateAttrMap, anchorName, popupId } = usePopoverContext();
+	const internalRef = useRef(null);
+	const composedRef = useComposedRefs(forwardedRef, useCallback((el) => {
+		popover.setPopupElement(el);
+	}, [popover]), internalRef);
+	const posOpts = useMemo(() => ({
+		side: state.side,
+		align: state.align
+	}), [state.side, state.align]);
+	const anchorStyle = useMemo(() => {
+		if (!supportsAnchorPositioning()) return null;
+		return getAnchorPositionStyle(anchorName, posOpts);
+	}, [anchorName, posOpts]);
+	const [manualStyle, setManualStyle] = useState(null);
+	useLayoutEffect(() => {
+		if (supportsAnchorPositioning()) return;
+		if (!state.open) {
+			setManualStyle(null);
+			return;
+		}
+		function measure() {
+			const triggerEl = popover.triggerElement;
+			const popupEl = internalRef.current;
+			if (!triggerEl || !popupEl) return;
+			setManualStyle(getAnchorPositionStyle(anchorName, posOpts, triggerEl.getBoundingClientRect(), popupEl.getBoundingClientRect(), document.documentElement.getBoundingClientRect(), resolveOffsets(popupEl)));
+		}
+		measure();
+		let rafId = 0;
+		function reposition() {
+			cancelAnimationFrame(rafId);
+			rafId = requestAnimationFrame(measure);
+		}
+		window.addEventListener("scroll", reposition, {
+			capture: true,
+			passive: true
+		});
+		window.addEventListener("resize", reposition);
+		return () => {
+			cancelAnimationFrame(rafId);
+			window.removeEventListener("scroll", reposition, true);
+			window.removeEventListener("resize", reposition);
+		};
+	}, [
+		state.open,
+		anchorName,
+		posOpts,
+		popover
+	]);
+	const positioningStyle = anchorStyle ?? manualStyle ?? POPOVER_RESET;
+	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=popover-popup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-popup.js","names":[],"sources":["../../../../src/ui/popover/popover-popup.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { getAnchorPositionStyle, resolveOffsets } from '@videojs/core/dom';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } 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';\n\nexport interface PopoverPopupProps extends UIComponentProps<'div', PopoverState> {}\n\nconst POPOVER_RESET: CSSProperties = { position: 'fixed', inset: 'auto', margin: 0 };\n\n/** Container for the popover content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */\nexport const PopoverPopup = forwardRef<HTMLDivElement, PopoverPopupProps>(function PopoverPopup(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, popover, state, stateAttrMap, anchorName, popupId } = 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: state.side, align: state.align }), [state.side, state.align]);\n\n  // CSS Anchor Positioning — computed from state, no measurement needed.\n  // getAnchorPositionStyle returns camelCase keys, directly compatible\n  // with React's style prop.\n  const anchorStyle = useMemo(() => {\n    if (!supportsAnchorPositioning()) return null;\n    return getAnchorPositionStyle(anchorName, posOpts) as CSSProperties;\n  }, [anchorName, posOpts]);\n\n  // Manual fallback — measure rects after layout, before paint.\n  const [manualStyle, setManualStyle] = useState<CSSProperties | null>(null);\n\n  useLayoutEffect(() => {\n    if (supportsAnchorPositioning()) return;\n    if (!state.open) {\n      setManualStyle(null);\n      return;\n    }\n\n    function measure(): void {\n      const triggerEl = popover.triggerElement;\n      const popupEl = internalRef.current;\n      if (!triggerEl || !popupEl) return;\n\n      const triggerRect = triggerEl.getBoundingClientRect();\n      const popupRect = popupEl.getBoundingClientRect();\n      const boundaryRect = document.documentElement.getBoundingClientRect();\n      const offsets = resolveOffsets(popupEl);\n\n      setManualStyle(\n        getAnchorPositionStyle(anchorName, posOpts, triggerRect, popupRect, boundaryRect, offsets) as CSSProperties\n      );\n    }\n\n    measure();\n\n    // Recompute on scroll/resize so the popover tracks its trigger.\n    let rafId = 0;\n    function reposition(): void {\n      cancelAnimationFrame(rafId);\n      rafId = requestAnimationFrame(measure);\n    }\n\n    window.addEventListener('scroll', reposition, { capture: true, passive: true });\n    window.addEventListener('resize', reposition);\n\n    return () => {\n      cancelAnimationFrame(rafId);\n      window.removeEventListener('scroll', reposition, true);\n      window.removeEventListener('resize', reposition);\n    };\n  }, [state.open, anchorName, posOpts, popover]);\n\n  // Anchor path uses computed styles; manual path uses measured styles;\n  // fallback resets UA [popover] defaults until positioning is computed.\n  const positioningStyle = anchorStyle ?? manualStyle ?? POPOVER_RESET;\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,MAAM,gBAA+B;CAAE,UAAU;CAAS,OAAO;CAAQ,QAAQ;CAAG;;AAGpF,MAAa,eAAe,WAA8C,SAAS,aACjF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CACvF,MAAM,cAAc,OAAuB,KAAK;CAShD,MAAM,cAAc,gBAAgB,cAPnB,aACd,OAA8B;AAC7B,UAAQ,gBAAgB,GAAG;IAE7B,CAAC,QAAQ,CACV,EAE2D,YAAY;CAIxE,MAAM,UAAU,eAAe;EAAE,MAAM,MAAM;EAAM,OAAO,MAAM;EAAO,GAAG,CAAC,MAAM,MAAM,MAAM,MAAM,CAAC;CAKpG,MAAM,cAAc,cAAc;AAChC,MAAI,CAAC,2BAA2B,CAAE,QAAO;AACzC,SAAO,uBAAuB,YAAY,QAAQ;IACjD,CAAC,YAAY,QAAQ,CAAC;CAGzB,MAAM,CAAC,aAAa,kBAAkB,SAA+B,KAAK;AAE1E,uBAAsB;AACpB,MAAI,2BAA2B,CAAE;AACjC,MAAI,CAAC,MAAM,MAAM;AACf,kBAAe,KAAK;AACpB;;EAGF,SAAS,UAAgB;GACvB,MAAM,YAAY,QAAQ;GAC1B,MAAM,UAAU,YAAY;AAC5B,OAAI,CAAC,aAAa,CAAC,QAAS;AAO5B,kBACE,uBAAuB,YAAY,SANjB,UAAU,uBAAuB,EACnC,QAAQ,uBAAuB,EAC5B,SAAS,gBAAgB,uBAAuB,EACrD,eAAe,QAAQ,CAGqD,CAC3F;;AAGH,WAAS;EAGT,IAAI,QAAQ;EACZ,SAAS,aAAmB;AAC1B,wBAAqB,MAAM;AAC3B,WAAQ,sBAAsB,QAAQ;;AAGxC,SAAO,iBAAiB,UAAU,YAAY;GAAE,SAAS;GAAM,SAAS;GAAM,CAAC;AAC/E,SAAO,iBAAiB,UAAU,WAAW;AAE7C,eAAa;AACX,wBAAqB,MAAM;AAC3B,UAAO,oBAAoB,UAAU,YAAY,KAAK;AACtD,UAAO,oBAAoB,UAAU,WAAW;;IAEjD;EAAC,MAAM;EAAM;EAAY;EAAS;EAAQ,CAAC;CAI9C,MAAM,mBAAmB,eAAe,eAAe;AAIvD,KAAI,CAAC,MAAM,KACT,QAAO;CAIT,MAAM,EAAE,YAAY,GAAG,mBAAmB,QAAQ;AAElD,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK;EACL,OAAO;GACL;IACE,IAAI;IACJ,OAAO;IACP,GAAG,KAAK,cAAc,MAAM;IAC7B;GACD;IAAE,GAAG;IAAgB,QAAQ;IAAY;GACzC;GACD;EACF,CACF;EACD"}

package/dist/default/ui/popover/popover-root.js

@@ -0,0 +1,69 @@
+'use client';
+
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { PopoverContextProvider } from "./context.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+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 { PopoverCore, PopoverDataAttrs } from "@videojs/core";
+
+//#region src/ui/popover/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, children, ...coreProps }) {
+	const [core] = useState(() => new PopoverCore(coreProps));
+	core.setProps(coreProps);
+	const isControlled = controlledOpen !== void 0;
+	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 [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
+		});
+		if (!isControlled && defaultOpen) instance.open("click");
+		return instance;
+	});
+	const anchorName = useSafeId();
+	const popupId = useSafeId("popup-");
+	useEffect(() => {
+		if (controlledOpen === void 0) return;
+		const { active: inputOpen } = popover.input.current;
+		if (controlledOpen === inputOpen) return;
+		if (controlledOpen) popover.open("click");
+		else popover.close("click");
+	}, [controlledOpen, popover]);
+	useEffect(() => () => popover.destroy(), [popover]);
+	const input = useSnapshot(popover.input);
+	core.setInput(input);
+	return /* @__PURE__ */ jsx(PopoverContextProvider, {
+		value: {
+			core,
+			popover,
+			state: core.getState(),
+			stateAttrMap: PopoverDataAttrs,
+			anchorName,
+			popupId
+		},
+		children
+	});
+}
+
+//#endregion
+export { PopoverRoot };
+//# sourceMappingURL=popover-root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-root.js","names":[],"sources":["../../../../src/ui/popover/popover-root.tsx"],"sourcesContent":["'use client';\n\nimport { type PopoverProps as CorePopoverProps, PopoverCore, PopoverDataAttrs } from '@videojs/core';\nimport { createPopover, createTransition, type PopoverChangeDetails } from '@videojs/core/dom';\nimport { useSnapshot } from '@videojs/store/react';\nimport type { ReactNode } from 'react';\nimport { useEffect, useState } from 'react';\n\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { PopoverContextProvider } from './context';\n\nexport interface PopoverRootProps extends CorePopoverProps {\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  children,\n  ...coreProps\n}: PopoverRootProps): ReactNode {\n  const [core] = useState(() => new PopoverCore(coreProps));\n  core.setProps(coreProps);\n\n  const isControlled = controlledOpen !== undefined;\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  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 [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    });\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 (controlledOpen === undefined) 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  // Cleanup on unmount\n  useEffect(() => () => popover.destroy(), [popover]);\n\n  const input = useSnapshot(popover.input);\n  core.setInput(input);\n  const state = core.getState();\n\n  return (\n    <PopoverContextProvider value={{ core, popover, state, stateAttrMap: PopoverDataAttrs, anchorName, popupId }}>\n      {children}\n    </PopoverContextProvider>\n  );\n}\n\nexport namespace PopoverRoot {\n  export type Props = PopoverRootProps;\n}\n"],"mappings":";;;;;;;;;;;;AAoBA,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,UACA,GAAG,aAC2B;CAC9B,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,UAAU,CAAC;AACzD,MAAK,SAAS,UAAU;CAExB,MAAM,eAAe,mBAAmB;CAIxC,MAAM,kBAAkB,aAAa,iBAAiB;CACtD,MAAM,0BAA0B,aAAa,yBAAyB;CACtE,MAAM,mBAAmB,aAAa,UAAU,cAAc;CAC9D,MAAM,yBAAyB,aAAa,UAAU,oBAAoB;CAC1E,MAAM,iBAAiB,aAAa,YAAY;CAChD,MAAM,WAAW,aAAa,MAAM;CACpC,MAAM,gBAAgB,aAAa,WAAW;CAE9C,MAAM,CAAC,WAAW,eAAe;EAC/B,MAAM,WAAW,cAAc;GAC7B,YAAY,kBAAkB;GAC9B,eAAe,UAAmB,YAAkC;AAClE,oBAAgB,UAAU,UAAU,QAAQ;;GAE9C,uBAAuB,aAAsB;AAC3C,4BAAwB,UAAU,SAAS;;GAE7C,qBAAqB,iBAAiB,WAAW,YAAY,aAAa;GAC1E,2BAA2B,uBAAuB,WAAW,YAAY,aAAa;GACtF,mBAAmB,eAAe;GAClC,aAAa,SAAS;GACtB,kBAAkB,cAAc;GACjC,CAAC;AAGF,MAAI,CAAC,gBAAgB,YACnB,UAAS,KAAK,QAAQ;AAGxB,SAAO;GACP;CAEF,MAAM,aAAa,WAAW;CAC9B,MAAM,UAAU,UAAU,SAAS;AAGnC,iBAAgB;AACd,MAAI,mBAAmB,OAAW;EAElC,MAAM,EAAE,QAAQ,cAAc,QAAQ,MAAM;AAC5C,MAAI,mBAAmB,UAAW;AAElC,MAAI,eACF,SAAQ,KAAK,QAAQ;MAErB,SAAQ,MAAM,QAAQ;IAEvB,CAAC,gBAAgB,QAAQ,CAAC;AAG7B,uBAAsB,QAAQ,SAAS,EAAE,CAAC,QAAQ,CAAC;CAEnD,MAAM,QAAQ,YAAY,QAAQ,MAAM;AACxC,MAAK,SAAS,MAAM;AAGpB,QACE,oBAAC;EAAuB,OAAO;GAAE;GAAM;GAAS,OAHpC,KAAK,UAAU;GAG4B,cAAc;GAAkB;GAAY;GAAS;EACzG;GACsB"}

package/dist/default/ui/popover/popover-trigger.js

@@ -0,0 +1,43 @@
+'use client';
+
+import { renderElement } from "../../utils/use-render.js";
+import { usePopoverContext } from "./context.js";
+import { getAnchorNameStyle } from "@videojs/core/dom";
+import { forwardRef, useCallback, useMemo } from "react";
+
+//#region src/ui/popover/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, anchorName, popupId } = usePopoverContext();
+	const triggerRef = useCallback((el) => {
+		popover.setTriggerElement(el);
+	}, [popover]);
+	const anchorStyle = useMemo(() => getAnchorNameStyle(anchorName), [anchorName]);
+	const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.triggerProps;
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap,
+		ref: [forwardedRef, triggerRef],
+		props: [
+			{
+				type: "button",
+				style: anchorStyle,
+				...core.getTriggerAttrs(state, popupId)
+			},
+			{
+				...restTriggerProps,
+				onFocus: onFocusIn,
+				onBlur: onFocusOut
+			},
+			elementProps
+		]
+	});
+});
+
+//#endregion
+export { PopoverTrigger };
+//# sourceMappingURL=popover-trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popover-trigger.js","names":[],"sources":["../../../../src/ui/popover/popover-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { getAnchorNameStyle } from '@videojs/core/dom';\nimport { forwardRef, useCallback, useMemo } 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, anchorName, popupId } = usePopoverContext();\n\n  const triggerRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      popover.setTriggerElement(el);\n    },\n    [popover]\n  );\n\n  const anchorStyle = useMemo(() => getAnchorNameStyle(anchorName), [anchorName]);\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          style: anchorStyle,\n          ...core.getTriggerAttrs(state, popupId),\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":";;;;;;;;;AAaA,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CAEvF,MAAM,aAAa,aAChB,OAAiC;AAChC,UAAQ,kBAAkB,GAAG;IAE/B,CAAC,QAAQ,CACV;CAED,MAAM,cAAc,cAAc,mBAAmB,WAAW,EAAE,CAAC,WAAW,CAAC;CAK/E,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;AAE/D,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK,CAAC,cAAc,WAAW;EAC/B,OAAO;GACL;IACE,MAAM;IACN,OAAO;IACP,GAAG,KAAK,gBAAgB,OAAO,QAAQ;IACxC;GACD;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;IAAY;GAC/D;GACD;EACF,CACF;EACD"}

package/dist/default/ui/poster/poster.js

@@ -26,12 +26,13 @@ const Poster = forwardRef(function Poster(componentProps, forwardedRef) {
 	const playback = usePlayer(selectPlayback);
 	const [core] = useState(() => new PosterCore());
 	if (!playback) return null;
+	core.setMedia(playback);
 	return renderElement("img", {
 		render,
 		className,
 		style
 	}, {
-		state: core.getState(playback),
+		state: core.getState(),
 		stateAttrMap: PosterDataAttrs,
 		ref: [forwardedRef],
 		props: [elementProps]

package/dist/default/ui/poster/poster.js.map

@@ -1 +1 @@
-{"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["'use client';\n\nimport { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}\n\n/**\n * Displays the video poster image. Shows before playback starts, hides after.\n *\n * @example\n * ```tsx\n * <Poster src=\"poster.jpg\" alt=\"Video description\" />\n *\n * <Poster\n *   src=\"poster.jpg\"\n *   alt=\"Video description\"\n *   className={(state) => state.visible ? 'visible' : 'hidden'}\n * />\n * ```\n */\nexport const Poster = forwardRef(function Poster(\n  componentProps: PosterProps,\n  forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new PosterCore());\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('Poster', 'playback');\n    return null;\n  }\n\n  return renderElement(\n    'img',\n    { render, className, style },\n    {\n      state: core.getState(playback),\n      stateAttrMap: PosterDataAttrs,\n      ref: [forwardedRef],\n      props: [elementProps],\n    }\n  );\n});\n\nexport namespace Poster {\n  export type Props = PosterProps;\n  export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;AAE/C,KAAI,CAAC,SAEH,QAAO;AAGT,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO,KAAK,SAAS,SAAS;EAC9B,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,aAAa;EACtB,CACF;EACD"}
+{"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["'use client';\n\nimport { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}\n\n/**\n * Displays the video poster image. Shows before playback starts, hides after.\n *\n * @example\n * ```tsx\n * <Poster src=\"poster.jpg\" alt=\"Video description\" />\n *\n * <Poster\n *   src=\"poster.jpg\"\n *   alt=\"Video description\"\n *   className={(state) => state.visible ? 'visible' : 'hidden'}\n * />\n * ```\n */\nexport const Poster = forwardRef(function Poster(\n  componentProps: PosterProps,\n  forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new PosterCore());\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('Poster', 'playback');\n    return null;\n  }\n\n  core.setMedia(playback);\n\n  return renderElement(\n    'img',\n    { render, className, style },\n    {\n      state: core.getState(),\n      stateAttrMap: PosterDataAttrs,\n      ref: [forwardedRef],\n      props: [elementProps],\n    }\n  );\n});\n\nexport namespace Poster {\n  export type Props = PosterProps;\n  export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;AAE/C,KAAI,CAAC,SAEH,QAAO;AAGT,MAAK,SAAS,SAAS;AAEvB,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO,KAAK,UAAU;EACtB,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,aAAa;EACtB,CACF;EACD"}

package/dist/default/ui/seek-button/seek-button.js

@@ -1,10 +1,7 @@
 'use client';
 
-import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
-import { useButton } from "../hooks/use-button.js";
+import { createMediaButton } from "../create-media-button.js";
 import { selectTime } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
 import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
 
 //#region src/ui/seek-button/seek-button.tsx
@@ -25,36 +22,12 @@ import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
 * />
 * ```
 */
-const SeekButton = forwardRef(function SeekButton(componentProps, forwardedRef) {
-	const { render, className, style, seconds, label, disabled, ...elementProps } = componentProps;
-	const time = usePlayer(selectTime);
-	const [core] = useState(() => new SeekButtonCore());
-	core.setProps({
-		seconds,
-		label,
-		disabled
-	});
-	const { getButtonProps, buttonRef } = useButton({
-		displayName: "SeekButton",
-		onActivate: () => core.seek(time),
-		isDisabled: () => disabled || !time
-	});
-	if (!time) return null;
-	const state = core.getState(time);
-	return renderElement("button", {
-		render,
-		className,
-		style
-	}, {
-		state,
-		stateAttrMap: SeekButtonDataAttrs,
-		ref: [forwardedRef, buttonRef],
-		props: [
-			core.getAttrs(state),
-			elementProps,
-			getButtonProps()
-		]
-	});
+const SeekButton = createMediaButton({
+	displayName: "SeekButton",
+	core: SeekButtonCore,
+	stateAttrMap: SeekButtonDataAttrs,
+	selector: selectTime,
+	action: (core, state) => core.seek(state)
 });
 
 //#endregion

package/dist/default/ui/seek-button/seek-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"seek-button.js","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"sourcesContent":["'use client';\n\nimport { SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\n\nexport interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.State>, SeekButtonCore.Props {}\n\n/**\n * A button that seeks forward or backward by a configurable number of seconds.\n *\n * @example\n * ```tsx\n * <SeekButton seconds={-10} />\n *\n * <SeekButton\n *   seconds={30}\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const SeekButton = forwardRef(function SeekButton(\n  componentProps: SeekButtonProps,\n  forwardedRef: ForwardedRef<HTMLButtonElement>\n) {\n  const { render, className, style, seconds, label, disabled, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n\n  const [core] = useState(() => new SeekButtonCore());\n  core.setProps({ seconds, label, disabled });\n\n  const { getButtonProps, buttonRef } = useButton({\n    displayName: 'SeekButton',\n    onActivate: () => core.seek(time!),\n    isDisabled: () => disabled || !time,\n  });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('SeekButton', 'time');\n    return null;\n  }\n\n  const state = core.getState(time);\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: SeekButtonDataAttrs,\n      ref: [forwardedRef, buttonRef],\n      props: [core.getAttrs(state), elementProps, getButtonProps()],\n    }\n  );\n});\n\nexport namespace SeekButton {\n  export type Props = SeekButtonProps;\n  export type State = SeekButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,OAAO,UAAU,GAAG,iBAAiB;CAEhF,MAAM,OAAO,UAAU,WAAW;CAElC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAS;EAAO;EAAU,CAAC;CAE3C,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB,KAAK,KAAK,KAAM;EAClC,kBAAkB,YAAY,CAAC;EAChC,CAAC;AAEF,KAAI,CAAC,KAEH,QAAO;CAGT,MAAM,QAAQ,KAAK,SAAS,KAAK;AAEjC,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GAAC,KAAK,SAAS,MAAM;GAAE;GAAc,gBAAgB;GAAC;EAC9D,CACF;EACD"}
+{"version":3,"file":"seek-button.js","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"sourcesContent":["'use client';\n\nimport { SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';\nimport { selectTime } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.State>, SeekButtonCore.Props {}\n\n/**\n * A button that seeks forward or backward by a configurable number of seconds.\n *\n * @example\n * ```tsx\n * <SeekButton seconds={-10} />\n *\n * <SeekButton\n *   seconds={30}\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const SeekButton = createMediaButton<SeekButtonCore, SeekButtonProps>({\n  displayName: 'SeekButton',\n  core: SeekButtonCore,\n  stateAttrMap: SeekButtonDataAttrs,\n  selector: selectTime,\n  action: (core, state) => core.seek(state),\n});\n\nexport namespace SeekButton {\n  export type Props = SeekButtonProps;\n  export type State = SeekButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,KAAK,MAAM;CAC1C,CAAC"}

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

@@ -0,0 +1,22 @@
+'use client';
+
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/ui/slider/context.tsx
+const SliderContext = createContext(null);
+function SliderProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(SliderContext.Provider, {
+		value,
+		children
+	});
+}
+function useSliderContext() {
+	const ctx = useContext(SliderContext);
+	if (!ctx) throw new Error("Slider compound components must be used within a Slider.Root");
+	return ctx;
+}
+
+//#endregion
+export { SliderProvider, useSliderContext };
+//# sourceMappingURL=context.js.map