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

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

@@ -0,0 +1,22 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuState } from "@videojs/core";
+//#region src/ui/menu/trigger.d.ts
+type MenuTriggerElement = HTMLButtonElement | HTMLDivElement;
+interface MenuTriggerProps extends Omit<UIComponentProps<'button', MenuState>, 'type' | 'onClick' | 'onKeyDown'> {
+  /** Disables the trigger. */
+  disabled?: boolean;
+  onClick?: React.MouseEventHandler<MenuTriggerElement>;
+  onKeyDown?: React.KeyboardEventHandler<MenuTriggerElement>;
+}
+/**
+ * Button that toggles the menu visibility. At root level renders a `<button>`. When inside a parent menu (as a submenu
+ * trigger), renders as a `<div role="menuitem">` that opens the submenu on click or ArrowRight.
+ */
+declare const MenuTrigger: import("react").ForwardRefExoticComponent<Omit<MenuTriggerProps, "ref"> & import("react").RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+declare namespace MenuTrigger {
+  type Props = MenuTriggerProps;
+  type State = MenuState;
+}
+//#endregion
+export { MenuTrigger, MenuTriggerProps };
+//# sourceMappingURL=trigger.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.d.ts","names":[],"sources":["../../../../src/ui/menu/trigger.tsx"],"mappings":";;;KAWK,qBAAqB,oBAAoB;UAE7B,yBAAyB,KACxC,2BAA2B;;EAI3B;EACA,UAAU,MAAM,kBAAkB;EAClC,YAAY,MAAM,qBAAqB;;;;;;cAO5B,6BAAW,0BAAA,KAAA,2CAAA,cAAA,oBAAA;kBAsJP;OACH,QAAQ;OACR,QAAQ"}

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

@@ -0,0 +1,166 @@
+import { renderElement } from "../../utils/use-render.js";
+import { MenuTriggerChildContextProvider, useMenuContext } from "./context.js";
+import { useSafeId } from "../../utils/use-safe-id.js";
+import { callKeyDownHandler, preventMenuKeyDefault } from "./keyboard.js";
+import { isMenuNavigationKey } from "@videojs/core/dom";
+import { forwardRef, useCallback, useEffect, useMemo, useRef } from "react";
+import { isInteractiveActivation } from "@videojs/utils/dom";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/menu/trigger.tsx
+/**
+* Button that toggles the menu visibility. At root level renders a `<button>`. When inside a parent menu (as a submenu
+* trigger), renders as a `<div role="menuitem">` that opens the submenu on click or ArrowRight.
+*/
+const MenuTrigger = forwardRef(function MenuTrigger({ render, className, style, disabled, onClick, onKeyDown, ...elementProps }, forwardedRef) {
+	const { core, menu, parent, state, contentId, optionState } = useMenuContext();
+	const resolvedDisabled = disabled || optionState?.disabled || false;
+	const isSubMenuTrigger = parent !== null;
+	const controlledId = state.open || state.status === "ending" ? contentId : void 0;
+	const elementRef = useRef(null);
+	const triggerId = useSafeId("sub-trigger");
+	const parentMenuApi = parent?.menu ?? null;
+	useEffect(() => {
+		if (!isSubMenuTrigger || !parentMenuApi) return;
+		const element = elementRef.current;
+		if (!element) return;
+		menu.setTriggerElement(element);
+		const unregister = parentMenuApi.registerItem(element);
+		return () => {
+			unregister();
+			menu.setTriggerElement(null);
+		};
+	}, [
+		isSubMenuTrigger,
+		menu,
+		parentMenuApi
+	]);
+	const openSubMenu = useCallback(() => {
+		if (!resolvedDisabled) menu.open("click");
+	}, [resolvedDisabled, menu]);
+	const handleSubMenuClick = useCallback((event) => {
+		onClick?.(event);
+		if (event.defaultPrevented) return;
+		openSubMenu();
+	}, [onClick, openSubMenu]);
+	const handleSubMenuKeyDown = useCallback((event) => {
+		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
+		if (resolvedDisabled || defaultPreventedByUser) return;
+		if (event.key === "ArrowRight") {
+			event.preventDefault();
+			openSubMenu();
+		}
+	}, [
+		resolvedDisabled,
+		onKeyDown,
+		openSubMenu
+	]);
+	const handlePointerEnter = useCallback(() => {
+		const element = elementRef.current;
+		if (!element || resolvedDisabled || !parentMenuApi) return;
+		parentMenuApi.highlight(element, {
+			focus: false,
+			pointer: true
+		});
+	}, [resolvedDisabled, parentMenuApi]);
+	const triggerRef = useCallback((element) => {
+		menu.setTriggerElement(element);
+	}, [menu]);
+	const handleRootKeyDown = useCallback((event) => {
+		const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);
+		if (resolvedDisabled || defaultPreventedByUser) {
+			if (resolvedDisabled && isMenuNavigationKey(event)) event.preventDefault();
+			return;
+		}
+		if (isInteractiveActivation(event.nativeEvent)) {
+			event.preventDefault();
+			menu.triggerProps.onClick(event.nativeEvent);
+			return;
+		}
+		menu.triggerProps.onKeyDown(event);
+	}, [
+		resolvedDisabled,
+		menu.triggerProps,
+		onKeyDown
+	]);
+	const rootTriggerProps = useMemo(() => ({
+		onClick: resolvedDisabled ? (event) => event.preventDefault() : menu.triggerProps.onClick,
+		onKeyDown: handleRootKeyDown
+	}), [
+		resolvedDisabled,
+		handleRootKeyDown,
+		menu.triggerProps
+	]);
+	if (isSubMenuTrigger) return /* @__PURE__ */ jsx(MenuTriggerSubmenu, {
+		render,
+		className,
+		style,
+		disabled: resolvedDisabled,
+		elementProps,
+		forwardedRef,
+		elementRef,
+		triggerId,
+		triggerAttrs: core.getTriggerAttrs(state, controlledId),
+		availability: optionState?.availability,
+		hidden: optionState?.hidden,
+		state,
+		onSubMenuClick: handleSubMenuClick,
+		onSubMenuKeyDown: handleSubMenuKeyDown,
+		onPointerEnter: handlePointerEnter
+	});
+	return /* @__PURE__ */ jsx(MenuTriggerChildContextProvider, {
+		value: true,
+		children: renderElement("button", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			ref: [forwardedRef, triggerRef],
+			props: [
+				{
+					type: "button",
+					...core.getTriggerAttrs(state, controlledId)
+				},
+				resolvedDisabled ? {
+					disabled: true,
+					"aria-disabled": "true"
+				} : void 0,
+				optionState ? { "data-availability": optionState.availability } : void 0,
+				state.open ? { onKeyDownCapture: preventMenuKeyDefault } : void 0,
+				rootTriggerProps,
+				elementProps,
+				optionState?.hidden ? { hidden: true } : void 0
+			]
+		})
+	});
+});
+function MenuTriggerSubmenu({ render, className, style, disabled, elementProps, forwardedRef, elementRef, triggerId, triggerAttrs, availability, hidden, state, onSubMenuClick, onSubMenuKeyDown, onPointerEnter }) {
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: [forwardedRef, elementRef],
+		props: [
+			{
+				id: triggerId,
+				role: "menuitem",
+				...triggerAttrs,
+				"aria-disabled": disabled ? true : void 0,
+				"data-availability": availability,
+				"data-has-submenu": "",
+				onClick: onSubMenuClick,
+				onKeyDownCapture: preventMenuKeyDefault,
+				onKeyDown: onSubMenuKeyDown,
+				onPointerEnter
+			},
+			elementProps,
+			hidden ? { hidden: true } : void 0
+		]
+	});
+}
+//#endregion
+export { MenuTrigger };
+
+//# sourceMappingURL=trigger.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"trigger.js","names":[],"sources":["../../../../src/ui/menu/trigger.tsx"],"sourcesContent":["import type { MenuCore, MenuOptionState, MenuState } from '@videojs/core';\nimport { isMenuNavigationKey } from '@videojs/core/dom';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport { forwardRef, useCallback, useEffect, useMemo, useRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSafeId } from '../../utils/use-safe-id';\nimport { MenuTriggerChildContextProvider, useMenuContext } from './context';\nimport { callKeyDownHandler, preventMenuKeyDefault } from './keyboard';\n\ntype MenuTriggerElement = HTMLButtonElement | HTMLDivElement;\n\nexport interface MenuTriggerProps extends Omit<\n  UIComponentProps<'button', MenuState>,\n  'type' | 'onClick' | 'onKeyDown'\n> {\n  /** Disables the trigger. */\n  disabled?: boolean;\n  onClick?: React.MouseEventHandler<MenuTriggerElement>;\n  onKeyDown?: React.KeyboardEventHandler<MenuTriggerElement>;\n}\n\n/**\n * Button that toggles the menu visibility. At root level renders a `<button>`. When inside a parent menu (as a submenu\n * trigger), renders as a `<div role=\"menuitem\">` that opens the submenu on click or ArrowRight.\n */\nexport const MenuTrigger = forwardRef<HTMLButtonElement | HTMLDivElement, MenuTriggerProps>(function MenuTrigger(\n  { render, className, style, disabled, onClick, onKeyDown, ...elementProps },\n  forwardedRef\n) {\n  const { core, menu, parent, state, contentId, optionState } = useMenuContext();\n  const resolvedDisabled = disabled || optionState?.disabled || false;\n  const isSubMenuTrigger = parent !== null;\n  const controlledId = state.open || state.status === 'ending' ? contentId : undefined;\n\n  const elementRef = useRef<HTMLElement>(null);\n  const triggerId = useSafeId('sub-trigger');\n\n  const parentMenuApi = parent?.menu ?? null;\n\n  // Register with the parent menu's item list when acting as a submenu trigger.\n  useEffect(() => {\n    if (!isSubMenuTrigger || !parentMenuApi) return;\n\n    const element = elementRef.current;\n    if (!element) return;\n\n    menu.setTriggerElement(element);\n    const unregister = parentMenuApi.registerItem(element);\n\n    return () => {\n      unregister();\n      menu.setTriggerElement(null);\n    };\n  }, [isSubMenuTrigger, menu, parentMenuApi]);\n\n  const openSubMenu = useCallback(() => {\n    if (!resolvedDisabled) menu.open('click');\n  }, [resolvedDisabled, menu]);\n\n  const handleSubMenuClick = useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      onClick?.(event);\n\n      if (event.defaultPrevented) return;\n\n      openSubMenu();\n    },\n    [onClick, openSubMenu]\n  );\n\n  const handleSubMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n      if (resolvedDisabled || defaultPreventedByUser) return;\n\n      if (event.key === 'ArrowRight') {\n        event.preventDefault();\n        openSubMenu();\n      }\n    },\n    [resolvedDisabled, onKeyDown, openSubMenu]\n  );\n\n  const handlePointerEnter = useCallback(() => {\n    const element = elementRef.current;\n    if (!element || resolvedDisabled || !parentMenuApi) return;\n\n    parentMenuApi.highlight(element, { focus: false, pointer: true });\n  }, [resolvedDisabled, parentMenuApi]);\n\n  // Root trigger mode — standard button that toggles the menu.\n  const triggerRef = useCallback(\n    (element: HTMLButtonElement | null) => {\n      menu.setTriggerElement(element);\n    },\n    [menu]\n  );\n\n  const handleRootKeyDown = useCallback(\n    (event: React.KeyboardEvent<MenuTriggerElement>) => {\n      const defaultPreventedByUser = callKeyDownHandler(onKeyDown, event);\n\n      if (resolvedDisabled || defaultPreventedByUser) {\n        if (resolvedDisabled && isMenuNavigationKey(event)) event.preventDefault();\n\n        return;\n      }\n\n      if (isInteractiveActivation(event.nativeEvent)) {\n        event.preventDefault();\n        menu.triggerProps.onClick(event.nativeEvent);\n        return;\n      }\n\n      menu.triggerProps.onKeyDown(event);\n    },\n    [resolvedDisabled, menu.triggerProps, onKeyDown]\n  );\n\n  const rootTriggerProps = useMemo(\n    () => ({\n      onClick: resolvedDisabled\n        ? (event: React.MouseEvent<HTMLElement>) => event.preventDefault()\n        : menu.triggerProps.onClick,\n      onKeyDown: handleRootKeyDown,\n    }),\n    [resolvedDisabled, handleRootKeyDown, menu.triggerProps]\n  );\n\n  // Submenu trigger mode — renders as a div with role=\"menuitem\"\n  if (isSubMenuTrigger) {\n    return (\n      <MenuTriggerSubmenu\n        render={render}\n        className={className}\n        style={style}\n        disabled={resolvedDisabled}\n        elementProps={elementProps}\n        forwardedRef={forwardedRef}\n        elementRef={elementRef}\n        triggerId={triggerId}\n        triggerAttrs={core.getTriggerAttrs(state, controlledId)}\n        availability={optionState?.availability}\n        hidden={optionState?.hidden}\n        state={state}\n        onSubMenuClick={handleSubMenuClick}\n        onSubMenuKeyDown={handleSubMenuKeyDown}\n        onPointerEnter={handlePointerEnter}\n      />\n    );\n  }\n\n  return (\n    <MenuTriggerChildContextProvider value>\n      {renderElement(\n        'button',\n        { render, className, style },\n        {\n          state,\n          ref: [forwardedRef as React.Ref<HTMLButtonElement>, triggerRef],\n          props: [\n            { type: 'button' as const, ...core.getTriggerAttrs(state, controlledId) },\n            resolvedDisabled ? { disabled: true, 'aria-disabled': 'true' as const } : undefined,\n            optionState ? { 'data-availability': optionState.availability } : undefined,\n            state.open ? { onKeyDownCapture: preventMenuKeyDefault } : undefined,\n            rootTriggerProps,\n            elementProps,\n            optionState?.hidden ? { hidden: true } : undefined,\n          ],\n        }\n      )}\n    </MenuTriggerChildContextProvider>\n  );\n});\n\nexport namespace MenuTrigger {\n  export type Props = MenuTriggerProps;\n  export type State = MenuState;\n}\n\ninterface MenuTriggerSubmenuProps {\n  render: MenuTriggerProps['render'];\n  className: MenuTriggerProps['className'];\n  style: MenuTriggerProps['style'];\n  disabled: boolean | undefined;\n  elementProps: Record<string, unknown>;\n  forwardedRef: React.ForwardedRef<HTMLButtonElement | HTMLDivElement>;\n  elementRef: React.RefObject<HTMLElement | null>;\n  triggerId: string;\n  triggerAttrs: ReturnType<MenuCore['getTriggerAttrs']>;\n  availability: MenuOptionState['availability'] | undefined;\n  hidden: boolean | undefined;\n  state: MenuState;\n  onSubMenuClick: (event: React.MouseEvent<HTMLDivElement>) => void;\n  onSubMenuKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  onPointerEnter: () => void;\n}\n\nfunction MenuTriggerSubmenu({\n  render,\n  className,\n  style,\n  disabled,\n  elementProps,\n  forwardedRef,\n  elementRef,\n  triggerId,\n  triggerAttrs,\n  availability,\n  hidden,\n  state,\n  onSubMenuClick,\n  onSubMenuKeyDown,\n  onPointerEnter,\n}: MenuTriggerSubmenuProps) {\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef, elementRef as React.Ref<HTMLDivElement>],\n      props: [\n        {\n          id: triggerId,\n          role: 'menuitem' as const,\n          ...triggerAttrs,\n          'aria-disabled': disabled ? true : undefined,\n          'data-availability': availability,\n          'data-has-submenu': '',\n          onClick: onSubMenuClick,\n          onKeyDownCapture: preventMenuKeyDefault,\n          onKeyDown: onSubMenuKeyDown,\n          onPointerEnter,\n        },\n        elementProps,\n        hidden ? { hidden: true } : undefined,\n      ],\n    }\n  );\n}\n"],"mappings":"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"}

package/dist/dev/ui/mute-button/component.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MuteButtonCore } from "@videojs/core";
+//#region src/ui/mute-button/component.d.ts
+interface MuteButtonProps extends UIComponentProps<'button', MuteButtonCore.State>, MuteButtonCore.Props {}
+/** A button that toggles mute state. */
+declare const MuteButton: import("react").ForwardRefExoticComponent<MuteButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace MuteButton {
+  type Props = MuteButtonProps;
+  type State = MuteButtonCore.State;
+}
+//#endregion
+export { MuteButton, MuteButtonProps };
+//# sourceMappingURL=component.d.ts.map

package/dist/dev/ui/mute-button/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","names":[],"sources":["../../../../src/ui/mute-button/component.tsx"],"mappings":";;;UAMiB,wBAAwB,2BAA2B,eAAe,QAAQ,eAAe;;cAG7F,4BAAU,0BAAA,kCAAA,cAAA;kBAUN;OACH,QAAQ;OACR,QAAQ,eAAe"}

package/dist/dev/ui/mute-button/component.js

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

package/dist/dev/ui/mute-button/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/mute-button/component.tsx"],"sourcesContent":["import { 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  hotkeyAction: 'toggleMuted',\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace MuteButton {\n  export type Props = MuteButtonProps;\n  export type State = MuteButtonCore.State;\n}\n"],"mappings":";;;;;AASA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}

package/dist/dev/ui/mute-button/index.d.ts

@@ -1,2 +1,2 @@
-import { MuteButton, MuteButtonProps } from "./mute-button.js";
+import { MuteButton, MuteButtonProps } from "./component.js";
 export { MuteButton, type MuteButtonProps };

package/dist/dev/ui/mute-button/index.js

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

package/dist/dev/ui/pip-button/component.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { PiPButtonCore } from "@videojs/core";
+//#region src/ui/pip-button/component.d.ts
+interface PiPButtonProps extends UIComponentProps<'button', PiPButtonCore.State>, PiPButtonCore.Props {}
+/** A button that toggles picture-in-picture. */
+declare const PiPButton: import("react").ForwardRefExoticComponent<PiPButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace PiPButton {
+  type Props = PiPButtonProps;
+  type State = PiPButtonCore.State;
+}
+//#endregion
+export { PiPButton, PiPButtonProps };
+//# sourceMappingURL=component.d.ts.map

package/dist/dev/ui/pip-button/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","names":[],"sources":["../../../../src/ui/pip-button/component.tsx"],"mappings":";;;UAMiB,uBAAuB,2BAA2B,cAAc,QAAQ,cAAc;;cAG1F,2BAAS,0BAAA,iCAAA,cAAA;kBAUL;OACH,QAAQ;OACR,QAAQ,cAAc"}

package/dist/dev/ui/pip-button/component.js

@@ -0,0 +1,18 @@
+import { createMediaButton } from "../create-media-button.js";
+import { PiPButtonCore, PiPButtonDataAttrs } from "@videojs/core";
+import { selectPiP } from "@videojs/core/dom";
+//#region src/ui/pip-button/component.tsx
+/** A button that toggles picture-in-picture. */
+const PiPButton = createMediaButton({
+	displayName: "PiPButton",
+	core: PiPButtonCore,
+	stateAttrMap: PiPButtonDataAttrs,
+	selector: selectPiP,
+	action: (core, state) => core.toggle(state),
+	hotkeyAction: "togglePictureInPicture",
+	isSupported: (state) => !state.hidden
+});
+//#endregion
+export { PiPButton };
+
+//# sourceMappingURL=component.js.map

package/dist/dev/ui/pip-button/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/pip-button/component.tsx"],"sourcesContent":["import { 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  hotkeyAction: 'togglePictureInPicture',\n  isSupported: (state) => !state.hidden,\n});\n\nexport namespace PiPButton {\n  export type Props = PiPButtonProps;\n  export type State = PiPButtonCore.State;\n}\n"],"mappings":";;;;;AASA,MAAa,YAAY,kBAAiD;CACxE,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;CACd,cAAc,UAAU,CAAC,MAAM;AACjC,CAAC"}

package/dist/dev/ui/pip-button/index.d.ts

@@ -1,2 +1,2 @@
-import { PiPButton, PiPButtonProps } from "./pip-button.js";
+import { PiPButton, PiPButtonProps } from "./component.js";
 export { PiPButton, PiPButtonProps };

package/dist/dev/ui/pip-button/index.js

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

package/dist/dev/ui/play-button/component.d.ts

@@ -0,0 +1,28 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { PlayButtonCore } from "@videojs/core";
+//#region src/ui/play-button/component.d.ts
+interface PlayButtonProps extends UIComponentProps<'button', PlayButtonCore.State>, PlayButtonCore.Props {}
+/**
+ * A button that toggles playback.
+ *
+ * @example
+ *   ```tsx
+ *   <PlayButton />
+ *
+ *   <PlayButton
+ *   render={(props, state) => (
+ *   <button {...props}>
+ *   {state.paused ? <PlayIcon /> : <PauseIcon />}
+ *   </button>
+ *   )}
+ *   />
+ *   ```;
+ */
+declare const PlayButton: import("react").ForwardRefExoticComponent<PlayButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace PlayButton {
+  type Props = PlayButtonProps;
+  type State = PlayButtonCore.State;
+}
+//#endregion
+export { PlayButton, PlayButtonProps };
+//# sourceMappingURL=component.d.ts.map

package/dist/dev/ui/play-button/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","names":[],"sources":["../../../../src/ui/play-button/component.tsx"],"mappings":";;;UAMiB,wBAAwB,2BAA2B,eAAe,QAAQ,eAAe;;;;;;;;;;;;;;;;;cAkB7F,4BAAU,0BAAA,kCAAA,cAAA;kBASN;OACH,QAAQ;OACR,QAAQ,eAAe"}

package/dist/dev/ui/play-button/component.js

@@ -0,0 +1,32 @@
+import { createMediaButton } from "../create-media-button.js";
+import { PlayButtonCore, PlayButtonDataAttrs } from "@videojs/core";
+import { selectPlayback } from "@videojs/core/dom";
+//#region src/ui/play-button/component.tsx
+/**
+* A button that toggles playback.
+*
+* @example
+*   ```tsx
+*   <PlayButton />
+*
+*   <PlayButton
+*   render={(props, state) => (
+*   <button {...props}>
+*   {state.paused ? <PlayIcon /> : <PauseIcon />}
+*   </button>
+*   )}
+*   />
+*   ```;
+*/
+const PlayButton = createMediaButton({
+	displayName: "PlayButton",
+	core: PlayButtonCore,
+	stateAttrMap: PlayButtonDataAttrs,
+	selector: selectPlayback,
+	action: (core, state) => core.toggle(state),
+	hotkeyAction: "togglePaused"
+});
+//#endregion
+export { PlayButton };
+
+//# sourceMappingURL=component.js.map

package/dist/dev/ui/play-button/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/play-button/component.tsx"],"sourcesContent":["import { 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  hotkeyAction: 'togglePaused',\n});\n\nexport namespace PlayButton {\n  export type Props = PlayButtonProps;\n  export type State = PlayButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,OAAO,KAAK;CAC1C,cAAc;AAChB,CAAC"}

package/dist/dev/ui/play-button/index.d.ts

@@ -1,2 +1,2 @@
-import { PlayButton, PlayButtonProps } from "./play-button.js";
+import { PlayButton, PlayButtonProps } from "./component.js";
 export { PlayButton, type PlayButtonProps };

package/dist/dev/ui/play-button/index.js

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

package/dist/dev/ui/playback-rate-button/component.d.ts

@@ -0,0 +1,28 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { PlaybackRateButtonCore } from "@videojs/core";
+//#region src/ui/playback-rate-button/component.d.ts
+interface PlaybackRateButtonProps extends UIComponentProps<'button', PlaybackRateButtonCore.State>, PlaybackRateButtonCore.Props {}
+/**
+ * A button that cycles through playback rates.
+ *
+ * @example
+ *   ```tsx
+ *   <PlaybackRateButton />
+ *
+ *   <PlaybackRateButton
+ *   render={(props, state) => (
+ *   <button {...props}>
+ *   {state.rate}&times;
+ *   </button>
+ *   )}
+ *   />
+ *   ```;
+ */
+declare const PlaybackRateButton: import("react").ForwardRefExoticComponent<PlaybackRateButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace PlaybackRateButton {
+  type Props = PlaybackRateButtonProps;
+  type State = PlaybackRateButtonCore.State;
+}
+//#endregion
+export { PlaybackRateButton, PlaybackRateButtonProps };
+//# sourceMappingURL=component.d.ts.map

package/dist/dev/ui/playback-rate-button/component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-button/component.tsx"],"mappings":";;;UAMiB,gCACP,2BAA2B,uBAAuB,QAAQ,uBAAuB;;;;;;;;;;;;;;;;;cAkB9E,oCAAkB,0BAAA,0CAAA,cAAA;kBASd;OACH,QAAQ;OACR,QAAQ,uBAAuB"}

package/dist/dev/ui/playback-rate-button/component.js

@@ -0,0 +1,32 @@
+import { createMediaButton } from "../create-media-button.js";
+import { PlaybackRateButtonCore, PlaybackRateButtonDataAttrs } from "@videojs/core";
+import { selectPlaybackRate } from "@videojs/core/dom";
+//#region src/ui/playback-rate-button/component.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),
+	hotkeyAction: "speedUp"
+});
+//#endregion
+export { PlaybackRateButton };
+
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/playback-rate-button/component.tsx"],"sourcesContent":["import { 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>, 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  hotkeyAction: 'speedUp',\n});\n\nexport namespace PlaybackRateButton {\n  export type Props = PlaybackRateButtonProps;\n  export type State = PlaybackRateButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyBA,MAAa,qBAAqB,kBAAmE;CACnG,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,MAAM,KAAK;CACzC,cAAc;AAChB,CAAC"}

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

@@ -1,2 +1,2 @@
-import { PlaybackRateButton, PlaybackRateButtonProps } from "./playback-rate-button.js";
+import { PlaybackRateButton, PlaybackRateButtonProps } from "./component.js";
 export { PlaybackRateButton, type PlaybackRateButtonProps };

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

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

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

@@ -0,0 +1,48 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuRadioItemProps } from "../menu/radio-item.js";
+import { PlaybackRateOption, PlaybackRateOptionsProps, PlaybackRateOptionsResult } from "../playback-rate/use-playback-rate-options.js";
+import "../playback-rate/index.js";
+import { PlaybackRateRadioGroupCore } from "@videojs/core";
+import { ReactElement, ReactNode } from "react";
+//#region src/ui/playback-rate-radio-group/component.d.ts
+type PlaybackRateRadioGroupItemState = PlaybackRateOption & {
+  /** Whether this playback rate is currently selected. */
+  checked: boolean;
+};
+interface PlaybackRateRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {
+  /** Playback rate represented by the item. */
+  'data-rate': string;
+}
+interface PlaybackRateRadioGroupRootProps extends PlaybackRateOptionsProps {
+  children?: ReactNode;
+}
+interface PlaybackRateRadioGroupOptionsProps extends Omit<UIComponentProps<'div', PlaybackRateRadioGroupCore.State>, 'children'> {
+  /** Render one consumer-owned menu radio item for every playback rate. */
+  renderItem: (props: PlaybackRateRadioGroupItemProps, state: PlaybackRateRadioGroupItemState) => ReactElement;
+}
+type PlaybackRateRadioGroupValueProps = UIComponentProps<'span', PlaybackRateOptionsResult>;
+interface PlaybackRateRadioGroupLegacyProps extends PlaybackRateRadioGroupOptionsProps, PlaybackRateOptionsProps {}
+/** Owns playback-rate option state and shares it with an enclosing menu. Does not render a DOM element. */
+declare function PlaybackRateRadioGroupRoot({ children, ...props }: PlaybackRateRadioGroupRootProps): ReactNode;
+/** Displays the selected playback-rate label. */
+declare const PlaybackRateRadioGroupValue: import("react").ForwardRefExoticComponent<Omit<PlaybackRateRadioGroupValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+/** Renders menu radio items for the player's available playback rates. */
+declare const PlaybackRateRadioGroupOptions: import("react").ForwardRefExoticComponent<Omit<PlaybackRateRadioGroupOptionsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** @internal Compatibility adapter for the existing preset sources. */
+declare const PlaybackRateRadioGroupLegacy: import("react").ForwardRefExoticComponent<Omit<PlaybackRateRadioGroupLegacyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace PlaybackRateRadioGroupRoot {
+  type Props = PlaybackRateRadioGroupRootProps;
+}
+declare namespace PlaybackRateRadioGroupValue {
+  type Props = PlaybackRateRadioGroupValueProps;
+  type State = PlaybackRateOptionsResult;
+}
+declare namespace PlaybackRateRadioGroupOptions {
+  type Props = PlaybackRateRadioGroupOptionsProps;
+  type State = PlaybackRateRadioGroupCore.State;
+  type ItemProps = PlaybackRateRadioGroupItemProps;
+  type ItemState = PlaybackRateRadioGroupItemState;
+}
+//#endregion
+export { PlaybackRateRadioGroupItemProps, PlaybackRateRadioGroupItemState, PlaybackRateRadioGroupLegacy, PlaybackRateRadioGroupLegacyProps, PlaybackRateRadioGroupOptions, PlaybackRateRadioGroupOptionsProps, PlaybackRateRadioGroupRoot, PlaybackRateRadioGroupRootProps, PlaybackRateRadioGroupValue, PlaybackRateRadioGroupValueProps };
+//# sourceMappingURL=component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","names":[],"sources":["../../../../src/ui/playback-rate-radio-group/component.tsx"],"mappings":";;;;;;;KAkBY,kCAAkC;;EAE5C;;UAGe,wCAAwC,KAAK;;EAE5D;;UAGe,wCAAwC;EACvD,WAAW;;UAGI,2CAA2C,KAC1D,wBAAwB,2BAA2B;;EAInD,aAAa,OAAO,iCAAiC,OAAO,oCAAoC;;KAGtF,mCAAmC,yBAAyB;UAEvD,0CACP,oCAAoC;;iBAK9B,6BAA6B,aAAa,SAAS,kCAAkC;;cAWxF,6CAA2B,0BAAA,KAAA,2DAAA,cAAA;;cAc3B,+CAA6B,0BAAA,KAAA,6DAAA,cAAA;;cAuD7B,8CAA4B,0BAAA,KAAA,4DAAA,cAAA;kBA6BxB;OACH,QAAQ;;kBAGL;OACH,QAAQ;OACR,QAAQ;;kBAGL;OACH,QAAQ;OACR,QAAQ,2BAA2B;OACnC,YAAY;OACZ,YAAY"}

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

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