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

package/dist/dev/ui/hotkey/use-hotkey-shortcut.js

@@ -0,0 +1,33 @@
+import { useContainer } from "../../player/context.js";
+import { getHotkeyCoordinator } from "@videojs/core/dom";
+import { useEffect, useState } from "react";
+//#region src/ui/hotkey/use-hotkey-shortcut.ts
+/**
+* Returns display and ARIA metadata for a registered hotkey action in the current player.
+*
+* @param action - Hotkey action to look up. Returns empty details when absent.
+* @param value - Optional action value used to match value-dependent shortcuts.
+*/
+function useHotkeyShortcut(action, value) {
+	const container = useContainer();
+	const [shortcut, setShortcut] = useState({});
+	useEffect(() => {
+		if (!container || !action) {
+			setShortcut({});
+			return;
+		}
+		const coordinator = getHotkeyCoordinator(container);
+		const update = () => setShortcut(coordinator.getShortcut(action, value));
+		update();
+		return coordinator.subscribeShortcutChanges(update);
+	}, [
+		container,
+		action,
+		value
+	]);
+	return shortcut;
+}
+//#endregion
+export { useHotkeyShortcut };
+
+//# sourceMappingURL=use-hotkey-shortcut.js.map

package/dist/dev/ui/hotkey/use-hotkey-shortcut.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hotkey-shortcut.js","names":[],"sources":["../../../../src/ui/hotkey/use-hotkey-shortcut.ts"],"sourcesContent":["import { getHotkeyCoordinator, type HotkeyShortcutDetails } from '@videojs/core/dom';\nimport { useEffect, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\n\n/**\n * Returns display and ARIA metadata for a registered hotkey action in the current player.\n *\n * @param action - Hotkey action to look up. Returns empty details when absent.\n * @param value - Optional action value used to match value-dependent shortcuts.\n */\nexport function useHotkeyShortcut(action: string | undefined, value?: number | undefined): HotkeyShortcutDetails {\n  const container = useContainer();\n\n  const [shortcut, setShortcut] = useState<HotkeyShortcutDetails>({});\n\n  useEffect(() => {\n    if (!container || !action) {\n      setShortcut({});\n      return;\n    }\n\n    const coordinator = getHotkeyCoordinator(container);\n    const update = () => setShortcut(coordinator.getShortcut(action, value));\n\n    update();\n    return coordinator.subscribeShortcutChanges(update);\n  }, [container, action, value]);\n\n  return shortcut;\n}\n"],"mappings":";;;;;;;;;;AAWA,SAAgB,kBAAkB,QAA4B,OAAmD;CAC/G,MAAM,YAAY,aAAa;CAE/B,MAAM,CAAC,UAAU,eAAe,SAAgC,CAAC,CAAC;CAElE,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ;GACzB,YAAY,CAAC,CAAC;GACd;EACF;EAEA,MAAM,cAAc,qBAAqB,SAAS;EAClD,MAAM,eAAe,YAAY,YAAY,YAAY,QAAQ,KAAK,CAAC;EAEvE,OAAO;EACP,OAAO,YAAY,yBAAyB,MAAM;CACpD,GAAG;EAAC;EAAW;EAAQ;CAAK,CAAC;CAE7B,OAAO;AACT"}

package/dist/dev/ui/hotkey/use-hotkey.d.ts

@@ -0,0 +1,17 @@
+//#region src/ui/hotkey/use-hotkey.d.ts
+interface UseHotkeyOptions {
+  keys: string;
+  onActivate: (event: KeyboardEvent, key: string) => void;
+  target?: 'player' | 'document';
+  repeatable?: boolean;
+  disabled?: boolean;
+}
+/**
+ * Registers a keyboard shortcut through the current player's hotkey coordinator.
+ *
+ * @param options - Shortcut keys, activation callback, scope, repeat behavior, and disabled state.
+ */
+declare function useHotkey(options: UseHotkeyOptions): void;
+//#endregion
+export { UseHotkeyOptions, useHotkey };
+//# sourceMappingURL=use-hotkey.d.ts.map

package/dist/dev/ui/hotkey/use-hotkey.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hotkey.d.ts","names":[],"sources":["../../../../src/ui/hotkey/use-hotkey.ts"],"mappings":";UAMiB;EACf;EACA,aAAa,OAAO,eAAe;EACnC;EACA;EACA;;;;;;;iBAQc,UAAU,SAAS"}

package/dist/dev/ui/hotkey/use-hotkey.js

@@ -0,0 +1,35 @@
+import { useContainer } from "../../player/context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { createHotkey } from "@videojs/core/dom";
+import { useEffect } from "react";
+//#region src/ui/hotkey/use-hotkey.ts
+/**
+* Registers a keyboard shortcut through the current player's hotkey coordinator.
+*
+* @param options - Shortcut keys, activation callback, scope, repeat behavior, and disabled state.
+*/
+function useHotkey(options) {
+	const { keys, target = "player", repeatable = true, disabled = false } = options;
+	const container = useContainer();
+	const onActivateRef = useLatestRef(options.onActivate);
+	useEffect(() => {
+		if (!container || !keys || disabled) return;
+		return createHotkey(container, {
+			keys,
+			target,
+			repeatable,
+			disabled,
+			onActivate: (event, key) => onActivateRef.current(event, key)
+		});
+	}, [
+		container,
+		keys,
+		target,
+		repeatable,
+		disabled
+	]);
+}
+//#endregion
+export { useHotkey };
+
+//# sourceMappingURL=use-hotkey.js.map

package/dist/dev/ui/hotkey/use-hotkey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-hotkey.js","names":[],"sources":["../../../../src/ui/hotkey/use-hotkey.ts"],"sourcesContent":["import { createHotkey } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport interface UseHotkeyOptions {\n  keys: string;\n  onActivate: (event: KeyboardEvent, key: string) => void;\n  target?: 'player' | 'document';\n  repeatable?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * Registers a keyboard shortcut through the current player's hotkey coordinator.\n *\n * @param options - Shortcut keys, activation callback, scope, repeat behavior, and disabled state.\n */\nexport function useHotkey(options: UseHotkeyOptions): void {\n  const { keys, target = 'player', repeatable = true, disabled = false } = options;\n  const container = useContainer();\n  const onActivateRef = useLatestRef(options.onActivate);\n\n  useEffect(() => {\n    if (!container || !keys || disabled) return;\n\n    return createHotkey(container, {\n      keys,\n      target,\n      repeatable,\n      disabled,\n      onActivate: (event, key) => onActivateRef.current(event, key),\n    });\n  }, [container, keys, target, repeatable, disabled]);\n}\n"],"mappings":";;;;;;;;;;AAmBA,SAAgB,UAAU,SAAiC;CACzD,MAAM,EAAE,MAAM,SAAS,UAAU,aAAa,MAAM,WAAW,UAAU;CACzE,MAAM,YAAY,aAAa;CAC/B,MAAM,gBAAgB,aAAa,QAAQ,UAAU;CAErD,gBAAgB;EACd,IAAI,CAAC,aAAa,CAAC,QAAQ,UAAU;EAErC,OAAO,aAAa,WAAW;GAC7B;GACA;GACA;GACA;GACA,aAAa,OAAO,QAAQ,cAAc,QAAQ,OAAO,GAAG;EAC9D,CAAC;CACH,GAAG;EAAC;EAAW;EAAM;EAAQ;EAAY;CAAQ,CAAC;AACpD"}

package/dist/dev/ui/input-indicator/use-indicator-visibility.js

@@ -0,0 +1,24 @@
+import { useContainer } from "../../player/context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { getIndicatorVisibilityCoordinator } from "@videojs/core/dom";
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/ui/input-indicator/use-indicator-visibility.ts
+function useIndicatorVisibility(close) {
+	const container = useContainer();
+	const closeRef = useLatestRef(close);
+	const coordinatorRef = useRef(null);
+	const [handle] = useState(() => ({ close: () => closeRef.current() }));
+	useEffect(() => {
+		if (!container) return;
+		const coordinator = getIndicatorVisibilityCoordinator(container);
+		coordinatorRef.current = coordinator;
+		return coordinator.register(handle);
+	}, [container, handle]);
+	return useCallback(() => {
+		coordinatorRef.current?.show(handle);
+	}, [handle]);
+}
+//#endregion
+export { useIndicatorVisibility };
+
+//# sourceMappingURL=use-indicator-visibility.js.map

package/dist/dev/ui/input-indicator/use-indicator-visibility.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-indicator-visibility.js","names":[],"sources":["../../../../src/ui/input-indicator/use-indicator-visibility.ts"],"sourcesContent":["import type { IndicatorVisibilityHandle } from '@videojs/core';\nimport { getIndicatorVisibilityCoordinator } from '@videojs/core/dom';\nimport { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useContainer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useIndicatorVisibility(close: () => void): () => void {\n  const container = useContainer();\n  const closeRef = useLatestRef(close);\n  const coordinatorRef = useRef<ReturnType<typeof getIndicatorVisibilityCoordinator> | null>(null);\n  const [handle] = useState<IndicatorVisibilityHandle>(() => ({\n    close: () => closeRef.current(),\n  }));\n\n  useEffect(() => {\n    if (!container) return;\n\n    const coordinator = getIndicatorVisibilityCoordinator(container);\n\n    coordinatorRef.current = coordinator;\n\n    return coordinator.register(handle);\n  }, [container, handle]);\n\n  return useCallback(() => {\n    coordinatorRef.current?.show(handle);\n  }, [handle]);\n}\n"],"mappings":";;;;;AAOA,SAAgB,uBAAuB,OAA+B;CACpE,MAAM,YAAY,aAAa;CAC/B,MAAM,WAAW,aAAa,KAAK;CACnC,MAAM,iBAAiB,OAAoE,IAAI;CAC/F,MAAM,CAAC,UAAU,gBAA2C,EAC1D,aAAa,SAAS,QAAQ,EAChC,EAAE;CAEF,gBAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,MAAM,cAAc,kCAAkC,SAAS;EAE/D,eAAe,UAAU;EAEzB,OAAO,YAAY,SAAS,MAAM;CACpC,GAAG,CAAC,WAAW,MAAM,CAAC;CAEtB,OAAO,kBAAkB;EACvB,eAAe,SAAS,KAAK,MAAM;CACrC,GAAG,CAAC,MAAM,CAAC;AACb"}

package/dist/dev/ui/input-indicator/use-input-action-subscription.js

@@ -0,0 +1,21 @@
+import { useContainer, usePlayer } from "../../player/context.js";
+import { useLatestRef } from "../../utils/use-latest-ref.js";
+import { getMediaSnapshot, subscribeToInputActions } from "@videojs/core/dom";
+import { useEffect } from "react";
+//#region src/ui/input-indicator/use-input-action-subscription.ts
+function useInputActionSubscription(callback) {
+	const container = useContainer();
+	const store = usePlayer();
+	const callbackRef = useLatestRef(callback);
+	const storeRef = useLatestRef(store);
+	useEffect(() => {
+		if (!container) return;
+		return subscribeToInputActions(container, (event) => {
+			callbackRef.current(event, getMediaSnapshot(storeRef.current));
+		});
+	}, [container]);
+}
+//#endregion
+export { useInputActionSubscription };
+
+//# sourceMappingURL=use-input-action-subscription.js.map

package/dist/dev/ui/input-indicator/use-input-action-subscription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-input-action-subscription.js","names":[],"sources":["../../../../src/ui/input-indicator/use-input-action-subscription.ts"],"sourcesContent":["import type { InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport { getMediaSnapshot, subscribeToInputActions } from '@videojs/core/dom';\nimport { useEffect } from 'react';\n\nimport { useContainer, usePlayer } from '../../player/context';\nimport { useLatestRef } from '../../utils/use-latest-ref';\n\nexport function useInputActionSubscription(callback: (event: InputActionEvent, snapshot: MediaSnapshot) => void): void {\n  const container = useContainer();\n  const store = usePlayer();\n  const callbackRef = useLatestRef(callback);\n  const storeRef = useLatestRef(store);\n\n  useEffect(() => {\n    if (!container) return;\n\n    return subscribeToInputActions(container, (event) => {\n      callbackRef.current(event, getMediaSnapshot(storeRef.current));\n    });\n  }, [container]);\n}\n"],"mappings":";;;;;AAOA,SAAgB,2BAA2B,UAA4E;CACrH,MAAM,YAAY,aAAa;CAC/B,MAAM,QAAQ,UAAU;CACxB,MAAM,cAAc,aAAa,QAAQ;CACzC,MAAM,WAAW,aAAa,KAAK;CAEnC,gBAAgB;EACd,IAAI,CAAC,WAAW;EAEhB,OAAO,wBAAwB,YAAY,UAAU;GACnD,YAAY,QAAQ,OAAO,iBAAiB,SAAS,OAAO,CAAC;EAC/D,CAAC;CACH,GAAG,CAAC,SAAS,CAAC;AAChB"}

package/dist/dev/ui/input-indicator/use-input-indicator-root.js

@@ -0,0 +1,21 @@
+import { useDestroy } from "../../utils/use-destroy.js";
+import { useIndicatorVisibility } from "./use-indicator-visibility.js";
+import { useInputActionSubscription } from "./use-input-action-subscription.js";
+import { useRenderedIndicatorState } from "./use-rendered-indicator-state.js";
+import { useState, useSyncExternalStore } from "react";
+//#region src/ui/input-indicator/use-input-indicator-root.ts
+function useInputIndicatorRoot(createCore, props, options) {
+	const [core] = useState(createCore);
+	useDestroy(core);
+	core.setProps(props);
+	const showIndicator = useIndicatorVisibility(() => core.close());
+	useInputActionSubscription((event, snapshot) => {
+		if (core.processEvent(event, snapshot)) showIndicator();
+	});
+	const currentState = useSyncExternalStore((callback) => core.state.subscribe(callback), () => core.state.current, () => core.state.current);
+	return useRenderedIndicatorState(currentState, options);
+}
+//#endregion
+export { useInputIndicatorRoot };
+
+//# sourceMappingURL=use-input-indicator-root.js.map

package/dist/dev/ui/input-indicator/use-input-indicator-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-input-indicator-root.js","names":[],"sources":["../../../../src/ui/input-indicator/use-input-indicator-root.ts"],"sourcesContent":["import type { IndicatorLifecycleState, InputActionEvent, MediaSnapshot } from '@videojs/core';\nimport type { State as StoreState } from '@videojs/store';\nimport { useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\nimport { useIndicatorVisibility } from './use-indicator-visibility';\nimport { useInputActionSubscription } from './use-input-action-subscription';\nimport { type RenderedIndicatorOptions, useRenderedIndicatorState } from './use-rendered-indicator-state';\n\ninterface InputIndicatorRootCore<IndicatorState extends IndicatorLifecycleState, Props> {\n  readonly state: StoreState<IndicatorState>;\n  setProps(props: Props): void;\n  destroy(): void;\n  close(): void;\n  processEvent(event: InputActionEvent, snapshot: MediaSnapshot): boolean;\n}\n\nexport function useInputIndicatorRoot<IndicatorState extends IndicatorLifecycleState, Props>(\n  createCore: () => InputIndicatorRootCore<IndicatorState, Props>,\n  props: Props,\n  options?: RenderedIndicatorOptions\n) {\n  const [core] = useState(createCore);\n\n  useDestroy(core);\n  core.setProps(props);\n  const showIndicator = useIndicatorVisibility(() => core.close());\n\n  useInputActionSubscription((event, snapshot) => {\n    if (core.processEvent(event, snapshot)) showIndicator();\n  });\n\n  const currentState = useSyncExternalStore(\n    (callback) => core.state.subscribe(callback),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  return useRenderedIndicatorState(currentState, options);\n}\n"],"mappings":";;;;;;AAiBA,SAAgB,sBACd,YACA,OACA,SACA;CACA,MAAM,CAAC,QAAQ,SAAS,UAAU;CAElC,WAAW,IAAI;CACf,KAAK,SAAS,KAAK;CACnB,MAAM,gBAAgB,6BAA6B,KAAK,MAAM,CAAC;CAE/D,4BAA4B,OAAO,aAAa;EAC9C,IAAI,KAAK,aAAa,OAAO,QAAQ,GAAG,cAAc;CACxD,CAAC;CAED,MAAM,eAAe,sBAClB,aAAa,KAAK,MAAM,UAAU,QAAQ,SACrC,KAAK,MAAM,eACX,KAAK,MAAM,OACnB;CAEA,OAAO,0BAA0B,cAAc,OAAO;AACxD"}

package/dist/dev/ui/input-indicator/use-rendered-indicator-state.js

@@ -0,0 +1,42 @@
+import { useDestroy } from "../../utils/use-destroy.js";
+import { getRenderedIndicatorState, isIndicatorPresent } from "@videojs/core";
+import { createTransition } from "@videojs/core/dom";
+import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+//#region src/ui/input-indicator/use-rendered-indicator-state.ts
+function useRenderedIndicatorState(currentState, options = {}) {
+	const elementRef = useRef(null);
+	const currentStateRef = useRef(currentState);
+	const snapshotRef = useRef(currentState);
+	const [transition] = useState(() => createTransition());
+	useDestroy(transition);
+	currentStateRef.current = currentState;
+	const transitionState = useSyncExternalStore((callback) => transition.state.subscribe(callback), () => transition.state.current, () => transition.state.current);
+	const { generation, open } = currentState;
+	useLayoutEffect(() => {
+		if (open) {
+			const nextState = currentStateRef.current;
+			if (nextState.generation !== generation) return;
+			snapshotRef.current = nextState;
+			const transitionState = transition.state.current;
+			if (!transitionState.active || options.replayOnUpdate !== false) transition.open(elementRef.current);
+			else if (transitionState.status === "ending") transition.cancel();
+			return;
+		}
+		const { active, status } = transition.state.current;
+		if (active && status !== "ending") transition.close(elementRef.current);
+	}, [
+		generation,
+		open,
+		options.replayOnUpdate,
+		transition
+	]);
+	return {
+		elementRef,
+		present: isIndicatorPresent(currentState, transitionState),
+		state: getRenderedIndicatorState(currentState, snapshotRef.current, transitionState)
+	};
+}
+//#endregion
+export { useRenderedIndicatorState };
+
+//# sourceMappingURL=use-rendered-indicator-state.js.map

package/dist/dev/ui/input-indicator/use-rendered-indicator-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-rendered-indicator-state.js","names":[],"sources":["../../../../src/ui/input-indicator/use-rendered-indicator-state.ts"],"sourcesContent":["import { getRenderedIndicatorState, type IndicatorLifecycleState, isIndicatorPresent } from '@videojs/core';\nimport { createTransition } from '@videojs/core/dom';\nimport { useLayoutEffect, useRef, useState, useSyncExternalStore } from 'react';\n\nimport { useDestroy } from '../../utils/use-destroy';\n\nexport interface RenderedIndicatorOptions {\n  replayOnUpdate?: boolean | undefined;\n}\n\nexport function useRenderedIndicatorState<State extends IndicatorLifecycleState>(\n  currentState: State,\n  options: RenderedIndicatorOptions = {}\n) {\n  const elementRef = useRef<HTMLElement>(null);\n  const currentStateRef = useRef(currentState);\n  const snapshotRef = useRef(currentState);\n  const [transition] = useState(() => createTransition());\n\n  useDestroy(transition);\n  currentStateRef.current = currentState;\n\n  const transitionState = useSyncExternalStore(\n    (callback) => transition.state.subscribe(callback),\n    () => transition.state.current,\n    () => transition.state.current\n  );\n\n  const { generation, open } = currentState;\n\n  useLayoutEffect(() => {\n    if (open) {\n      const nextState = currentStateRef.current;\n      if (nextState.generation !== generation) return;\n\n      snapshotRef.current = nextState;\n      const transitionState = transition.state.current;\n\n      if (!transitionState.active || options.replayOnUpdate !== false) {\n        void transition.open(elementRef.current);\n      } else if (transitionState.status === 'ending') {\n        transition.cancel();\n      }\n\n      return;\n    }\n\n    const { active, status } = transition.state.current;\n\n    if (active && status !== 'ending') {\n      void transition.close(elementRef.current);\n    }\n  }, [generation, open, options.replayOnUpdate, transition]);\n\n  return {\n    elementRef,\n    present: isIndicatorPresent(currentState, transitionState),\n    state: getRenderedIndicatorState(currentState, snapshotRef.current, transitionState),\n  };\n}\n"],"mappings":";;;;;AAUA,SAAgB,0BACd,cACA,UAAoC,CAAC,GACrC;CACA,MAAM,aAAa,OAAoB,IAAI;CAC3C,MAAM,kBAAkB,OAAO,YAAY;CAC3C,MAAM,cAAc,OAAO,YAAY;CACvC,MAAM,CAAC,cAAc,eAAe,iBAAiB,CAAC;CAEtD,WAAW,UAAU;CACrB,gBAAgB,UAAU;CAE1B,MAAM,kBAAkB,sBACrB,aAAa,WAAW,MAAM,UAAU,QAAQ,SAC3C,WAAW,MAAM,eACjB,WAAW,MAAM,OACzB;CAEA,MAAM,EAAE,YAAY,SAAS;CAE7B,sBAAsB;EACpB,IAAI,MAAM;GACR,MAAM,YAAY,gBAAgB;GAClC,IAAI,UAAU,eAAe,YAAY;GAEzC,YAAY,UAAU;GACtB,MAAM,kBAAkB,WAAW,MAAM;GAEzC,IAAI,CAAC,gBAAgB,UAAU,QAAQ,mBAAmB,OACxD,WAAgB,KAAK,WAAW,OAAO;QAClC,IAAI,gBAAgB,WAAW,UACpC,WAAW,OAAO;GAGpB;EACF;EAEA,MAAM,EAAE,QAAQ,WAAW,WAAW,MAAM;EAE5C,IAAI,UAAU,WAAW,UACvB,WAAgB,MAAM,WAAW,OAAO;CAE5C,GAAG;EAAC;EAAY;EAAM,QAAQ;EAAgB;CAAU,CAAC;CAEzD,OAAO;EACL;EACA,SAAS,mBAAmB,cAAc,eAAe;EACzD,OAAO,0BAA0B,cAAc,YAAY,SAAS,eAAe;CACrF;AACF"}

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

@@ -0,0 +1,2 @@
+import { LiveButton, LiveButtonProps } from "./live-button.js";
+export { LiveButton, type LiveButtonProps };

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

@@ -0,0 +1,2 @@
+import { LiveButton } from "./live-button.js";
+export { LiveButton };

package/dist/dev/ui/live-button/live-button.d.ts

@@ -0,0 +1,28 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { LiveButtonCore } from "@videojs/core";
+//#region src/ui/live-button/live-button.d.ts
+interface LiveButtonProps extends UIComponentProps<'button', LiveButtonCore.State>, LiveButtonCore.Props {}
+/**
+ * A button that indicates live status and seeks to the live edge when pressed. Exposes `data-live` while the stream is
+ * live (or DVR) and `data-live-edge` while playing at the live edge so skins can style a red-dot ↔ grey-dot treatment.
+ *
+ * Selects from `live`, `time`, and `buffer` features and composes them itself rather than going through
+ * `createMediaButton`, since the LiveButton needs three feature slices to detect the live edge and seek.
+ *
+ * Displays the translated live badge when no children are provided.
+ *
+ * @example
+ *   ```tsx
+ *   <LiveButton />;
+ *   ```;
+ *
+ * @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md
+ */
+declare const LiveButton: import("react").ForwardRefExoticComponent<Omit<LiveButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace LiveButton {
+  type Props = LiveButtonProps;
+  type State = LiveButtonCore.State;
+}
+//#endregion
+export { LiveButton, LiveButtonProps };
+//# sourceMappingURL=live-button.d.ts.map

package/dist/dev/ui/live-button/live-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"live-button.d.ts","names":[],"sources":["../../../../src/ui/live-button/live-button.tsx"],"mappings":";;;UAciB,wBAAwB,2BAA2B,eAAe,QAAQ,eAAe;;;;;;;;;;;;;;;;;cAkB7F,4BAAU,0BAAA,KAAA,0CAAA,cAAA;kBA8EN;OACH,QAAQ;OACR,QAAQ,eAAe"}

package/dist/dev/ui/live-button/live-button.js

@@ -0,0 +1,92 @@
+import { useTranslator } from "../../i18n/context.js";
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useButton } from "../hooks/use-button.js";
+import { useOptionalTooltipContext } from "../tooltip/context.js";
+import { LiveButtonCore, LiveButtonDataAttrs } from "@videojs/core";
+import { logMissingFeature, selectBuffer, selectLive, selectTime } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+import { forwardRef, useLayoutEffect, useState } from "react";
+//#region src/ui/live-button/live-button.tsx
+const DISPLAY_NAME = "LiveButton";
+/**
+* A button that indicates live status and seeks to the live edge when pressed. Exposes `data-live` while the stream is
+* live (or DVR) and `data-live-edge` while playing at the live edge so skins can style a red-dot ↔ grey-dot treatment.
+*
+* Selects from `live`, `time`, and `buffer` features and composes them itself rather than going through
+* `createMediaButton`, since the LiveButton needs three feature slices to detect the live edge and seek.
+*
+* Displays the translated live badge when no children are provided.
+*
+* @example
+*   ```tsx
+*   <LiveButton />;
+*   ```;
+*
+* @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md
+*/
+const LiveButton = forwardRef(function LiveButton(componentProps, forwardedRef) {
+	const { children, render, className, style, label, disabled, ...elementProps } = componentProps;
+	const live = usePlayer(selectLive);
+	const time = usePlayer(selectTime);
+	const buffer = usePlayer(selectBuffer);
+	const media = live && time && buffer ? {
+		currentTime: time.currentTime,
+		seek: time.seek,
+		seekable: buffer.seekable,
+		liveEdgeStart: live.liveEdgeStart,
+		targetLiveWindow: live.targetLiveWindow
+	} : null;
+	const tooltipCtx = useOptionalTooltipContext();
+	const translator = useTranslator();
+	const [core] = useState(() => new LiveButtonCore());
+	core.setProps({
+		label,
+		disabled
+	});
+	const { getButtonProps, buttonRef } = useButton({
+		displayName: DISPLAY_NAME,
+		onActivate: () => {
+			if (media) core.seekToLive(media);
+		},
+		isDisabled: () => !!disabled || !media
+	});
+	if (media) core.setMedia(media);
+	const state = media ? core.getState() : null;
+	const labelText = state ? translateText(core.getLabel(state), translator) : void 0;
+	useLayoutEffect(() => {
+		if (!tooltipCtx) return;
+		tooltipCtx.setContent(labelText ? { label: labelText } : void 0);
+		return () => tooltipCtx.setContent(void 0);
+	}, [tooltipCtx, labelText]);
+	if (!media || !state) {
+		logMissingFeature(DISPLAY_NAME, selectLive.displayName ?? "live");
+		return null;
+	}
+	const attrs = core.getAttrs(state);
+	const labelAttr = attrs["aria-label"];
+	const content = children ?? translateText(LiveButtonCore.defaultText, translator);
+	return renderElement("button", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: LiveButtonDataAttrs,
+		ref: [forwardedRef, buttonRef],
+		props: [
+			attrs,
+			{
+				children: content,
+				...elementProps,
+				"aria-label": labelAttr ? translateText(labelAttr, translator) : labelAttr
+			},
+			getButtonProps()
+		]
+	});
+});
+LiveButton.displayName = DISPLAY_NAME;
+//#endregion
+export { LiveButton };
+
+//# sourceMappingURL=live-button.js.map

package/dist/dev/ui/live-button/live-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"live-button.js","names":[],"sources":["../../../../src/ui/live-button/live-button.tsx"],"sourcesContent":["import { LiveButtonCore, LiveButtonDataAttrs, type LiveButtonMediaState } from '@videojs/core';\nimport { logMissingFeature, selectBuffer, selectLive, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { forwardRef, type ReactNode, useLayoutEffect, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useButton } from '../hooks/use-button';\nimport { useOptionalTooltipContext } from '../tooltip/context';\n\nconst DISPLAY_NAME = 'LiveButton';\n\nexport interface LiveButtonProps extends UIComponentProps<'button', LiveButtonCore.State>, LiveButtonCore.Props {}\n\n/**\n * A button that indicates live status and seeks to the live edge when pressed. Exposes `data-live` while the stream is\n * live (or DVR) and `data-live-edge` while playing at the live edge so skins can style a red-dot ↔ grey-dot treatment.\n *\n * Selects from `live`, `time`, and `buffer` features and composes them itself rather than going through\n * `createMediaButton`, since the LiveButton needs three feature slices to detect the live edge and seek.\n *\n * Displays the translated live badge when no children are provided.\n *\n * @example\n *   ```tsx\n *   <LiveButton />;\n *   ```;\n *\n * @see https://github.com/video-dev/media-ui-extensions/blob/main/proposals/0007-live-edge.md\n */\nexport const LiveButton = forwardRef<HTMLButtonElement, LiveButtonProps>(\n  function LiveButton(componentProps, forwardedRef): ReactNode {\n    const { children, render, className, style, label, disabled, ...elementProps } = componentProps;\n\n    const live = usePlayer(selectLive);\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n\n    const media: LiveButtonMediaState | null =\n      live && time && buffer\n        ? {\n            currentTime: time.currentTime,\n            seek: time.seek,\n            seekable: buffer.seekable,\n            liveEdgeStart: live.liveEdgeStart,\n            targetLiveWindow: live.targetLiveWindow,\n          }\n        : null;\n\n    const tooltipCtx = useOptionalTooltipContext();\n    const translator = useTranslator();\n    const [core] = useState(() => new LiveButtonCore());\n\n    core.setProps({ label, disabled });\n\n    const { getButtonProps, buttonRef } = useButton({\n      displayName: DISPLAY_NAME,\n      onActivate: () => {\n        if (media) core.seekToLive(media);\n      },\n      isDisabled: () => !!disabled || !media,\n    });\n\n    if (media) core.setMedia(media);\n\n    const state = media ? core.getState() : null;\n    const labelText = state ? translateText(core.getLabel(state), translator) : undefined;\n\n    useLayoutEffect(() => {\n      if (!tooltipCtx) return;\n\n      tooltipCtx.setContent(labelText ? { label: labelText } : undefined);\n      return () => tooltipCtx.setContent(undefined);\n    }, [tooltipCtx, labelText]);\n\n    if (!media || !state) {\n      if (__DEV__) logMissingFeature(DISPLAY_NAME, selectLive.displayName ?? 'live');\n\n      return null;\n    }\n\n    const attrs = core.getAttrs(state);\n    const labelAttr = attrs['aria-label'];\n    const content = children ?? translateText(LiveButtonCore.defaultText, translator);\n\n    return renderElement(\n      'button',\n      { render, className, style },\n      {\n        state,\n        stateAttrMap: LiveButtonDataAttrs,\n        ref: [forwardedRef, buttonRef],\n        props: [\n          attrs,\n          {\n            children: content,\n            ...elementProps,\n            'aria-label': labelAttr ? translateText(labelAttr, translator) : labelAttr,\n          },\n          getButtonProps(),\n        ],\n      }\n    );\n  }\n);\n\nLiveButton.displayName = DISPLAY_NAME;\n\nexport namespace LiveButton {\n  export type Props = LiveButtonProps;\n  export type State = LiveButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;AAYA,MAAM,eAAe;;;;;;;;;;;;;;;;;AAoBrB,MAAa,aAAa,WACxB,SAAS,WAAW,gBAAgB,cAAyB;CAC3D,MAAM,EAAE,UAAU,QAAQ,WAAW,OAAO,OAAO,UAAU,GAAG,iBAAiB;CAEjF,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,SAAS,UAAU,YAAY;CAErC,MAAM,QACJ,QAAQ,QAAQ,SACZ;EACE,aAAa,KAAK;EAClB,MAAM,KAAK;EACX,UAAU,OAAO;EACjB,eAAe,KAAK;EACpB,kBAAkB,KAAK;CACzB,IACA;CAEN,MAAM,aAAa,0BAA0B;CAC7C,MAAM,aAAa,cAAc;CACjC,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;CAElD,KAAK,SAAS;EAAE;EAAO;CAAS,CAAC;CAEjC,MAAM,EAAE,gBAAgB,cAAc,UAAU;EAC9C,aAAa;EACb,kBAAkB;GAChB,IAAI,OAAO,KAAK,WAAW,KAAK;EAClC;EACA,kBAAkB,CAAC,CAAC,YAAY,CAAC;CACnC,CAAC;CAED,IAAI,OAAO,KAAK,SAAS,KAAK;CAE9B,MAAM,QAAQ,QAAQ,KAAK,SAAS,IAAI;CACxC,MAAM,YAAY,QAAQ,cAAc,KAAK,SAAS,KAAK,GAAG,UAAU,IAAI,KAAA;CAE5E,sBAAsB;EACpB,IAAI,CAAC,YAAY;EAEjB,WAAW,WAAW,YAAY,EAAE,OAAO,UAAU,IAAI,KAAA,CAAS;EAClE,aAAa,WAAW,WAAW,KAAA,CAAS;CAC9C,GAAG,CAAC,YAAY,SAAS,CAAC;CAE1B,IAAI,CAAC,SAAS,CAAC,OAAO;EACP,kBAAkB,cAAc,WAAW,eAAe,MAAM;EAE7E,OAAO;CACT;CAEA,MAAM,QAAQ,KAAK,SAAS,KAAK;CACjC,MAAM,YAAY,MAAM;CACxB,MAAM,UAAU,YAAY,cAAc,eAAe,aAAa,UAAU;CAEhF,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,SAAS;EAC7B,OAAO;GACL;GACA;IACE,UAAU;IACV,GAAG;IACH,cAAc,YAAY,cAAc,WAAW,UAAU,IAAI;GACnE;GACA,eAAe;EACjB;CACF,CACF;AACF,CACF;AAEA,WAAW,cAAc"}

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

@@ -0,0 +1,24 @@
+import { MenuCore, MenuOptionState, MenuState } from "@videojs/core";
+import { MediaContainer, MenuApi, PositioningBoundary } from "@videojs/core/dom";
+//#region src/ui/menu/context.d.ts
+interface MenuContextValue {
+  core: MenuCore;
+  menu: MenuApi;
+  parent: MenuContextValue | null;
+  state: MenuState;
+  preferredSide: MenuState['side'];
+  setPositionedSide: (side: MenuState['side']) => void;
+  contentId: string;
+  anchorName: string;
+  boundary: PositioningBoundary;
+  container: MediaContainer | null;
+  optionState: MenuOptionState | null;
+  setOptionState: (source: symbol, state: MenuOptionState | null) => void;
+}
+/** Returns the current menu compound-component context. Throws outside `Menu.Root`. */
+declare function useMenuContext(): MenuContextValue;
+/** Returns the nearest menu context, or `null` outside `Menu.Root`. */
+declare function useOptionalMenuContext(): MenuContextValue | null;
+//#endregion
+export { MenuContextValue, useMenuContext, useOptionalMenuContext };
+//# sourceMappingURL=context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"mappings":";;;UAIiB;EACf,MAAM;EACN,MAAM;EACN,QAAQ;EACR,OAAO;EACP,eAAe;EACf,oBAAoB,MAAM;EAC1B;EACA;EACA,UAAU;EACV,WAAW;EACX,aAAa;EACb,iBAAiB,gBAAgB,OAAO;;;iBAQ1B,kBAAkB;;iBAQlB,0BAA0B"}

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

@@ -0,0 +1,70 @@
+import { createContext, useContext, useLayoutEffect, useState } from "react";
+//#region src/ui/menu/context.tsx
+const MenuContext = createContext(null);
+const MenuContextProvider = MenuContext.Provider;
+/** Returns the current menu compound-component context. Throws outside `Menu.Root`. */
+function useMenuContext() {
+	const ctx = useContext(MenuContext);
+	if (!ctx) throw new Error("Menu compound components must be used within a Menu.Root");
+	return ctx;
+}
+/** Returns the nearest menu context, or `null` outside `Menu.Root`. */
+function useOptionalMenuContext() {
+	return useContext(MenuContext);
+}
+/** Publishes a specialized option group's selected value and availability to its enclosing menu. */
+function useMenuOptionState(state) {
+	const setOptionState = useOptionalMenuContext()?.setOptionState;
+	const [source] = useState(() => Symbol("menu-option"));
+	const { value, disabled, hidden, availability } = state;
+	useLayoutEffect(() => {
+		if (!setOptionState) return void 0;
+		setOptionState(source, {
+			value,
+			disabled,
+			hidden,
+			availability
+		});
+		return () => setOptionState(source, null);
+	}, [
+		availability,
+		disabled,
+		hidden,
+		setOptionState,
+		source,
+		value
+	]);
+}
+const MenuPopupContext = createContext(null);
+const MenuPopupContextProvider = MenuPopupContext.Provider;
+function useMenuPopupContext() {
+	const ctx = useContext(MenuPopupContext);
+	if (!ctx) throw new Error("Menu.Content must be used within a Menu.Popup");
+	return ctx;
+}
+const MenuGroupContext = createContext(null);
+const MenuGroupContextProvider = MenuGroupContext.Provider;
+function useMenuGroupContext() {
+	return useContext(MenuGroupContext);
+}
+const MenuRadioGroupContext = createContext(null);
+const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;
+function useMenuRadioGroupContext() {
+	const ctx = useContext(MenuRadioGroupContext);
+	if (!ctx) throw new Error("Menu.RadioItem must be used within a Menu.RadioGroup");
+	return ctx;
+}
+const MenuRadioItemContext = createContext(false);
+const MenuRadioItemContextProvider = MenuRadioItemContext.Provider;
+function useOptionalMenuRadioItemContext() {
+	return useContext(MenuRadioItemContext);
+}
+const MenuTriggerChildContext = createContext(false);
+const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;
+function useOptionalMenuTriggerChildContext() {
+	return useContext(MenuTriggerChildContext);
+}
+//#endregion
+export { MenuContextProvider, MenuGroupContextProvider, MenuPopupContextProvider, MenuRadioGroupContextProvider, MenuRadioItemContextProvider, MenuTriggerChildContextProvider, useMenuContext, useMenuGroupContext, useMenuOptionState, useMenuPopupContext, useMenuRadioGroupContext, useOptionalMenuContext, useOptionalMenuRadioItemContext, useOptionalMenuTriggerChildContext };
+
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/menu/context.tsx"],"sourcesContent":["import type { MenuCore, MenuOptionState, MenuState } from '@videojs/core';\nimport type { MediaContainer, MenuApi, MenuPopupApi, PositioningBoundary } from '@videojs/core/dom';\nimport { createContext, useContext, useLayoutEffect, useState } from 'react';\n\nexport interface MenuContextValue {\n  core: MenuCore;\n  menu: MenuApi;\n  parent: MenuContextValue | null;\n  state: MenuState;\n  preferredSide: MenuState['side'];\n  setPositionedSide: (side: MenuState['side']) => void;\n  contentId: string;\n  anchorName: string;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n  optionState: MenuOptionState | null;\n  setOptionState: (source: symbol, state: MenuOptionState | null) => void;\n}\n\nconst MenuContext = createContext<MenuContextValue | null>(null);\n\nexport const MenuContextProvider = MenuContext.Provider;\n\n/** Returns the current menu compound-component context. Throws outside `Menu.Root`. */\nexport function useMenuContext(): MenuContextValue {\n  const ctx = useContext(MenuContext);\n  if (!ctx) throw new Error('Menu compound components must be used within a Menu.Root');\n\n  return ctx;\n}\n\n/** Returns the nearest menu context, or `null` outside `Menu.Root`. */\nexport function useOptionalMenuContext(): MenuContextValue | null {\n  return useContext(MenuContext);\n}\n\n/** Publishes a specialized option group's selected value and availability to its enclosing menu. */\nexport function useMenuOptionState(state: MenuOptionState): void {\n  const menu = useOptionalMenuContext();\n  const setOptionState = menu?.setOptionState;\n  const [source] = useState(() => Symbol('menu-option'));\n  const { value, disabled, hidden, availability } = state;\n\n  useLayoutEffect(() => {\n    if (!setOptionState) return undefined;\n\n    setOptionState(source, { value, disabled, hidden, availability });\n\n    return () => setOptionState(source, null);\n  }, [availability, disabled, hidden, setOptionState, source, value]);\n}\n\nexport interface MenuPopupContextValue {\n  popup: MenuPopupApi;\n  element: HTMLElement | null;\n}\n\nconst MenuPopupContext = createContext<MenuPopupContextValue | null>(null);\n\nexport const MenuPopupContextProvider = MenuPopupContext.Provider;\n\nexport function useMenuPopupContext(): MenuPopupContextValue {\n  const ctx = useContext(MenuPopupContext);\n  if (!ctx) throw new Error('Menu.Content must be used within a Menu.Popup');\n\n  return ctx;\n}\n\n// ---------------------------------------------------------------------------\n// Group context — shared by group-like parts and MenuGroupLabel\n// ---------------------------------------------------------------------------\n\nexport interface MenuGroupContextValue {\n  registerLabel: (id: string) => () => void;\n}\n\nconst MenuGroupContext = createContext<MenuGroupContextValue | null>(null);\n\nexport const MenuGroupContextProvider = MenuGroupContext.Provider;\n\nexport function useMenuGroupContext(): MenuGroupContextValue | null {\n  return useContext(MenuGroupContext);\n}\n\n// ---------------------------------------------------------------------------\n// Radio group context — shared between MenuRadioGroup and MenuRadioItem\n// ---------------------------------------------------------------------------\n\nexport interface MenuRadioGroupContextValue {\n  value: string;\n  onValueChange: (value: string) => void;\n}\n\nconst MenuRadioGroupContext = createContext<MenuRadioGroupContextValue | null>(null);\n\nexport const MenuRadioGroupContextProvider = MenuRadioGroupContext.Provider;\n\nexport function useMenuRadioGroupContext(): MenuRadioGroupContextValue {\n  const ctx = useContext(MenuRadioGroupContext);\n  if (!ctx) throw new Error('Menu.RadioItem must be used within a Menu.RadioGroup');\n\n  return ctx;\n}\n\nconst MenuRadioItemContext = createContext(false);\n\nexport const MenuRadioItemContextProvider = MenuRadioItemContext.Provider;\n\nexport function useOptionalMenuRadioItemContext(): boolean {\n  return useContext(MenuRadioItemContext);\n}\n\n// ---------------------------------------------------------------------------\n// Root trigger render context — provided by Menu.Trigger for render children.\n// ---------------------------------------------------------------------------\n\nconst MenuTriggerChildContext = createContext(false);\n\nexport const MenuTriggerChildContextProvider = MenuTriggerChildContext.Provider;\n\nexport function useOptionalMenuTriggerChildContext(): boolean {\n  return useContext(MenuTriggerChildContext);\n}\n"],"mappings":";;AAmBA,MAAM,cAAc,cAAuC,IAAI;AAE/D,MAAa,sBAAsB,YAAY;;AAG/C,SAAgB,iBAAmC;CACjD,MAAM,MAAM,WAAW,WAAW;CAClC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,0DAA0D;CAEpF,OAAO;AACT;;AAGA,SAAgB,yBAAkD;CAChE,OAAO,WAAW,WAAW;AAC/B;;AAGA,SAAgB,mBAAmB,OAA8B;CAE/D,MAAM,iBADO,uBACa,CAAC,EAAE;CAC7B,MAAM,CAAC,UAAU,eAAe,OAAO,aAAa,CAAC;CACrD,MAAM,EAAE,OAAO,UAAU,QAAQ,iBAAiB;CAElD,sBAAsB;EACpB,IAAI,CAAC,gBAAgB,OAAO,KAAA;EAE5B,eAAe,QAAQ;GAAE;GAAO;GAAU;GAAQ;EAAa,CAAC;EAEhE,aAAa,eAAe,QAAQ,IAAI;CAC1C,GAAG;EAAC;EAAc;EAAU;EAAQ;EAAgB;EAAQ;CAAK,CAAC;AACpE;AAOA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAA6C;CAC3D,MAAM,MAAM,WAAW,gBAAgB;CACvC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,+CAA+C;CAEzE,OAAO;AACT;AAUA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,MAAa,2BAA2B,iBAAiB;AAEzD,SAAgB,sBAAoD;CAClE,OAAO,WAAW,gBAAgB;AACpC;AAWA,MAAM,wBAAwB,cAAiD,IAAI;AAEnF,MAAa,gCAAgC,sBAAsB;AAEnE,SAAgB,2BAAuD;CACrE,MAAM,MAAM,WAAW,qBAAqB;CAC5C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,sDAAsD;CAEhF,OAAO;AACT;AAEA,MAAM,uBAAuB,cAAc,KAAK;AAEhD,MAAa,+BAA+B,qBAAqB;AAEjE,SAAgB,kCAA2C;CACzD,OAAO,WAAW,oBAAoB;AACxC;AAMA,MAAM,0BAA0B,cAAc,KAAK;AAEnD,MAAa,kCAAkC,wBAAwB;AAEvE,SAAgB,qCAA8C;CAC5D,OAAO,WAAW,uBAAuB;AAC3C"}

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

@@ -0,0 +1,3 @@
+import { MenuContextValue, useMenuContext, useOptionalMenuContext } from "./context.js";
+import { index_parts_d_exports } from "./index.parts.js";
+export { index_parts_d_exports as Menu, type MenuContextValue, useMenuContext, useOptionalMenuContext };

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

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

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

@@ -0,0 +1,18 @@
+import { MenuRadioItem, MenuRadioItemProps } from "./menu-radio-item.js";
+import { MenuCheckboxItem, MenuCheckboxItemProps } from "./menu-checkbox-item.js";
+import { MenuContent, MenuContentProps } from "./menu-content.js";
+import { MenuGroup, MenuGroupProps } from "./menu-group.js";
+import { MenuGroupLabel, MenuGroupLabelProps } from "./menu-group-label.js";
+import { MenuItem, MenuItemProps } from "./menu-item.js";
+import { MenuItemIndicator, MenuItemIndicatorProps } from "./menu-item-indicator.js";
+import { MenuPopup, MenuPopupProps } from "./menu-popup.js";
+import { MenuRadioGroup, MenuRadioGroupProps } from "./menu-radio-group.js";
+import { MenuRoot, MenuRootProps } from "./menu-root.js";
+import { MenuSeparator, MenuSeparatorProps } from "./menu-separator.js";
+import { MenuTrigger, MenuTriggerProps } from "./menu-trigger.js";
+declare namespace index_parts_d_exports {
+  export { MenuCheckboxItem as CheckboxItem, MenuCheckboxItemProps as CheckboxItemProps, MenuContent as Content, MenuContentProps as ContentProps, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuGroupLabelProps as GroupLabelProps, MenuGroupProps as GroupProps, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuItemIndicatorProps as ItemIndicatorProps, MenuItemProps as ItemProps, MenuPopup as Popup, MenuPopupProps as PopupProps, MenuRadioGroup as RadioGroup, MenuRadioGroupProps as RadioGroupProps, MenuRadioItem as RadioItem, MenuRadioItemProps as RadioItemProps, MenuRoot as Root, MenuRootProps as RootProps, MenuSeparator as Separator, MenuSeparatorProps as SeparatorProps, MenuTrigger as Trigger, MenuTriggerProps as TriggerProps };
+}
+//#endregion
+export { MenuCheckboxItem as CheckboxItem, type MenuCheckboxItemProps as CheckboxItemProps, MenuContent as Content, type MenuContentProps as ContentProps, MenuGroup as Group, MenuGroupLabel as GroupLabel, type MenuGroupLabelProps as GroupLabelProps, type MenuGroupProps as GroupProps, MenuItem as Item, MenuItemIndicator as ItemIndicator, type MenuItemIndicatorProps as ItemIndicatorProps, type MenuItemProps as ItemProps, MenuPopup as Popup, type MenuPopupProps as PopupProps, MenuRadioGroup as RadioGroup, type MenuRadioGroupProps as RadioGroupProps, MenuRadioItem as RadioItem, type MenuRadioItemProps as RadioItemProps, MenuRoot as Root, type MenuRootProps as RootProps, MenuSeparator as Separator, type MenuSeparatorProps as SeparatorProps, MenuTrigger as Trigger, type MenuTriggerProps as TriggerProps, index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

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

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

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

@@ -0,0 +1,32 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { MenuRadioGroup } from "./menu-radio-group.js";
+import { MenuCheckboxItem } from "./menu-checkbox-item.js";
+import { MenuContent } from "./menu-content.js";
+import { MenuGroup } from "./menu-group.js";
+import { MenuGroupLabel } from "./menu-group-label.js";
+import { MenuItem } from "./menu-item.js";
+import { MenuItemIndicator } from "./menu-item-indicator.js";
+import { MenuPopup } from "./menu-popup.js";
+import { MenuRadioItem } from "./menu-radio-item.js";
+import { MenuRoot } from "./menu-root.js";
+import { MenuSeparator } from "./menu-separator.js";
+import { MenuTrigger } from "./menu-trigger.js";
+//#region src/ui/menu/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	CheckboxItem: () => MenuCheckboxItem,
+	Content: () => MenuContent,
+	Group: () => MenuGroup,
+	GroupLabel: () => MenuGroupLabel,
+	Item: () => MenuItem,
+	ItemIndicator: () => MenuItemIndicator,
+	Popup: () => MenuPopup,
+	RadioGroup: () => MenuRadioGroup,
+	RadioItem: () => MenuRadioItem,
+	Root: () => MenuRoot,
+	Separator: () => MenuSeparator,
+	Trigger: () => MenuTrigger
+});
+//#endregion
+export { MenuCheckboxItem as CheckboxItem, MenuContent as Content, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuPopup as Popup, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuSeparator as Separator, MenuTrigger as Trigger, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/menu/index.parts.ts"],"sourcesContent":["export {\n  MenuCheckboxItem as CheckboxItem,\n  type MenuCheckboxItemProps as CheckboxItemProps,\n} from './menu-checkbox-item';\nexport { MenuContent as Content, type MenuContentProps as ContentProps } from './menu-content';\nexport { MenuGroup as Group, type MenuGroupProps as GroupProps } from './menu-group';\nexport { MenuGroupLabel as GroupLabel, type MenuGroupLabelProps as GroupLabelProps } from './menu-group-label';\nexport { MenuItem as Item, type MenuItemProps as ItemProps } from './menu-item';\nexport {\n  MenuItemIndicator as ItemIndicator,\n  type MenuItemIndicatorProps as ItemIndicatorProps,\n} from './menu-item-indicator';\nexport { MenuPopup as Popup, type MenuPopupProps as PopupProps } from './menu-popup';\nexport { MenuRadioGroup as RadioGroup, type MenuRadioGroupProps as RadioGroupProps } from './menu-radio-group';\nexport { MenuRadioItem as RadioItem, type MenuRadioItemProps as RadioItemProps } from './menu-radio-item';\nexport { MenuRoot as Root, type MenuRootProps as RootProps } from './menu-root';\nexport { MenuSeparator as Separator, type MenuSeparatorProps as SeparatorProps } from './menu-separator';\nexport { MenuTrigger as Trigger, type MenuTriggerProps as TriggerProps } from './menu-trigger';\n"],"mappings":""}

package/dist/dev/ui/menu/menu-checkbox-item.d.ts

@@ -0,0 +1,20 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuState } from "@videojs/core";
+//#region src/ui/menu/menu-checkbox-item.d.ts
+interface MenuCheckboxItemProps extends UIComponentProps<'div', MenuState> {
+  /** Whether the item is currently checked. */
+  checked: boolean;
+  /** Called when the checked state should change. */
+  onCheckedChange: (checked: boolean) => void;
+  /** Whether the item is disabled. */
+  disabled?: boolean;
+}
+/** A checkbox-style menu item. Renders a `<div>` with `role="menuitemcheckbox"`. */
+declare const MenuCheckboxItem: import("react").ForwardRefExoticComponent<Omit<MenuCheckboxItemProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace MenuCheckboxItem {
+  type Props = MenuCheckboxItemProps;
+  type State = MenuState;
+}
+//#endregion
+export { MenuCheckboxItem, MenuCheckboxItemProps };
+//# sourceMappingURL=menu-checkbox-item.d.ts.map

package/dist/dev/ui/menu/menu-checkbox-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-checkbox-item.d.ts","names":[],"sources":["../../../../src/ui/menu/menu-checkbox-item.tsx"],"mappings":";;;UAOiB,8BAA8B,wBAAwB;;EAErE;;EAEA,kBAAkB;;EAElB;;;cAIW,kCAAgB,0BAAA,KAAA,gDAAA,cAAA;kBAmDZ;OACH,QAAQ;OACR,QAAQ"}