@videojs/react 10.0.0-beta.23 → 10.0.0-beta.25

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

@@ -0,0 +1,2 @@
+import { useQualityOptions } from "./use-quality-options.js";
+export { useQualityOptions };

package/dist/default/ui/quality/use-quality-options.js

@@ -0,0 +1,37 @@
+"use client";
+import { usePlayer } from "../../player/context.js";
+import { selectQuality } from "@videojs/core/dom";
+import { useCallback, useState } from "react";
+import { QUALITY_AUTO_VALUE, QualityRadioGroupCore } from "@videojs/core";
+//#region src/ui/quality/use-quality-options.ts
+function useQualityOptions(props) {
+	"use no memo";
+	const media = usePlayer(selectQuality);
+	const [core] = useState(() => new QualityRadioGroupCore());
+	core.setProps(props ?? {});
+	const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
+	if (!media) return null;
+	core.setMedia(media);
+	const state = core.getState();
+	return {
+		state,
+		value: state.value,
+		options: [{
+			value: QUALITY_AUTO_VALUE,
+			label: state.autoLabel,
+			disabled: state.disabled
+		}, ...state.renditions.map((rendition) => ({
+			value: rendition.value,
+			label: rendition.label,
+			...rendition.tier && { tier: rendition.tier },
+			...rendition.badge && { badge: rendition.badge },
+			disabled: state.disabled
+		}))],
+		disabled: state.disabled,
+		setValue
+	};
+}
+//#endregion
+export { useQualityOptions };
+
+//# sourceMappingURL=use-quality-options.js.map

package/dist/default/ui/quality/use-quality-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-quality-options.js","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"sourcesContent":["'use client';\n\nimport { QUALITY_AUTO_VALUE, QualityRadioGroupCore } from '@videojs/core';\nimport { logMissingFeature, selectQuality } from '@videojs/core/dom';\nimport { useCallback, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\n\nexport interface QualityOptionsProps extends QualityRadioGroupCore.Props {}\n\nexport interface QualityOption {\n  value: string;\n  label: string;\n  tier?: string | undefined;\n  badge?: string | undefined;\n  disabled: boolean;\n}\n\nexport interface QualityOptionsResult {\n  state: QualityRadioGroupCore.State;\n  value: string;\n  options: QualityOption[];\n  disabled: boolean;\n  setValue: (value: string) => void;\n}\n\nexport function useQualityOptions(props?: QualityOptionsProps): QualityOptionsResult | null {\n  'use no memo';\n\n  const media = usePlayer(selectQuality);\n  const [core] = useState(() => new QualityRadioGroupCore());\n\n  core.setProps(props ?? {});\n\n  const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n  if (!media) {\n    if (__DEV__) logMissingFeature('useQualityOptions', selectQuality.displayName ?? 'quality');\n    return null;\n  }\n\n  core.setMedia(media);\n  const state = core.getState();\n\n  return {\n    state,\n    value: state.value,\n    options: [\n      { value: QUALITY_AUTO_VALUE, label: state.autoLabel, disabled: state.disabled },\n      ...state.renditions.map((rendition) => ({\n        value: rendition.value,\n        label: rendition.label,\n        ...(rendition.tier && { tier: rendition.tier }),\n        ...(rendition.badge && { badge: rendition.badge }),\n        disabled: state.disabled,\n      })),\n    ],\n    disabled: state.disabled,\n    setValue,\n  };\n}\n\nexport namespace useQualityOptions {\n  export type Props = QualityOptionsProps;\n  export type Result = QualityOptionsResult;\n  export type Option = QualityOption;\n}\n"],"mappings":";;;;;;AA0BA,SAAgB,kBAAkB,OAA0D;AAC1F;CAEA,MAAM,QAAQ,UAAU,cAAc;CACtC,MAAM,CAAC,QAAQ,eAAe,IAAI,uBAAuB,CAAC;AAE1D,MAAK,SAAS,SAAS,EAAE,CAAC;CAE1B,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,MAAM,EAAE,CAAC,MAAM,MAAM,CAAC;AAE/F,KAAI,CAAC,MAEH,QAAO;AAGT,MAAK,SAAS,MAAM;CACpB,MAAM,QAAQ,KAAK,UAAU;AAE7B,QAAO;EACL;EACA,OAAO,MAAM;EACb,SAAS,CACP;GAAE,OAAO;GAAoB,OAAO,MAAM;GAAW,UAAU,MAAM;GAAU,EAC/E,GAAG,MAAM,WAAW,KAAK,eAAe;GACtC,OAAO,UAAU;GACjB,OAAO,UAAU;GACjB,GAAI,UAAU,QAAQ,EAAE,MAAM,UAAU,MAAM;GAC9C,GAAI,UAAU,SAAS,EAAE,OAAO,UAAU,OAAO;GACjD,UAAU,MAAM;GACjB,EAAE,CACJ;EACD,UAAU,MAAM;EAChB;EACD"}

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

@@ -25,7 +25,9 @@ const SeekButton = createMediaButton({
 	core: SeekButtonCore,
 	stateAttrMap: SeekButtonDataAttrs,
 	selector: selectTime,
-	action: (core, state) => core.seek(state)
+	action: (core, state) => core.seek(state),
+	hotkeyAction: "seekStep",
+	hotkeyValue: (props) => typeof props.seconds === "number" ? props.seconds : SeekButtonCore.defaultProps.seconds
 });
 //#endregion
 export { SeekButton };

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 { 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"}
+{"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  hotkeyAction: 'seekStep',\n  hotkeyValue: (props) => (typeof props.seconds === 'number' ? props.seconds : SeekButtonCore.defaultProps.seconds),\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;CACzC,cAAc;CACd,cAAc,UAAW,OAAO,MAAM,YAAY,WAAW,MAAM,UAAU,eAAe,aAAa;CAC1G,CAAC"}

package/dist/default/ui/seek-indicator/context.js

@@ -0,0 +1,20 @@
+"use client";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/seek-indicator/context.tsx
+const SeekIndicatorContext = createContext(null);
+function SeekIndicatorProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(SeekIndicatorContext.Provider, {
+		value,
+		children
+	});
+}
+function useSeekIndicatorContext() {
+	const ctx = useContext(SeekIndicatorContext);
+	if (!ctx) throw new Error("SeekIndicator child compounds must be used within a SeekIndicator.Root");
+	return ctx;
+}
+//#endregion
+export { SeekIndicatorProvider, useSeekIndicatorContext };
+
+//# sourceMappingURL=context.js.map

package/dist/default/ui/seek-indicator/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/seek-indicator/context.tsx"],"sourcesContent":["'use client';\n\nimport type { SeekIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface SeekIndicatorContextValue {\n  state: SeekIndicatorCore.State;\n}\n\nconst SeekIndicatorContext = createContext<SeekIndicatorContextValue | null>(null);\n\nexport function SeekIndicatorProvider({ value, children }: ProviderProps<SeekIndicatorContextValue>) {\n  return <SeekIndicatorContext.Provider value={value}>{children}</SeekIndicatorContext.Provider>;\n}\n\nexport function useSeekIndicatorContext(): SeekIndicatorContextValue {\n  const ctx = useContext(SeekIndicatorContext);\n  if (!ctx) throw new Error('SeekIndicator child compounds must be used within a SeekIndicator.Root');\n  return ctx;\n}\n"],"mappings":";;;;AASA,MAAM,uBAAuB,cAAgD,KAAK;AAElF,SAAgB,sBAAsB,EAAE,OAAO,YAAsD;AACnG,QAAO,oBAAC,qBAAqB,UAAtB;EAAsC;EAAQ;EAAyC,CAAA;;AAGhG,SAAgB,0BAAqD;CACnE,MAAM,MAAM,WAAW,qBAAqB;AAC5C,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,yEAAyE;AACnG,QAAO"}

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

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

package/dist/default/ui/seek-indicator/index.parts.js

@@ -0,0 +1,12 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { SeekIndicatorRoot } from "./seek-indicator-root.js";
+import { SeekIndicatorValue } from "./seek-indicator-value.js";
+//#region src/ui/seek-indicator/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Root: () => SeekIndicatorRoot,
+	Value: () => SeekIndicatorValue
+});
+//#endregion
+export { index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/default/ui/seek-indicator/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/seek-indicator/index.parts.ts"],"sourcesContent":["export { SeekIndicatorRoot as Root, type SeekIndicatorRootProps as RootProps } from './seek-indicator-root';\nexport { SeekIndicatorValue as Value, type SeekIndicatorValueProps as ValueProps } from './seek-indicator-value';\n"],"mappings":""}

package/dist/default/ui/seek-indicator/seek-indicator-root.js

@@ -0,0 +1,30 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useInputIndicatorRoot } from "../input-indicators/use-input-indicator-root.js";
+import { SeekIndicatorProvider } from "./context.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { SeekIndicatorCore, SeekIndicatorDataAttrs } from "@videojs/core";
+//#region src/ui/seek-indicator/seek-indicator-root.tsx
+const SeekIndicatorRoot = forwardRef(function SeekIndicatorRoot(componentProps, forwardedRef) {
+	const { render, className, style, closeDelay, ...elementProps } = componentProps;
+	const { elementRef, present, state } = useInputIndicatorRoot(() => new SeekIndicatorCore(), { closeDelay });
+	if (!present) return null;
+	return /* @__PURE__ */ jsx(SeekIndicatorProvider, {
+		value: { state },
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: SeekIndicatorDataAttrs,
+			ref: [forwardedRef, elementRef],
+			props: [elementProps]
+		})
+	});
+});
+//#endregion
+export { SeekIndicatorRoot };
+
+//# sourceMappingURL=seek-indicator-root.js.map

package/dist/default/ui/seek-indicator/seek-indicator-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek-indicator-root.js","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-root.tsx"],"sourcesContent":["'use client';\n\nimport { SeekIndicatorCore, SeekIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicators/use-input-indicator-root';\nimport { SeekIndicatorProvider } from './context';\n\nexport interface SeekIndicatorRootProps\n  extends UIComponentProps<'div', SeekIndicatorCore.State>,\n    SeekIndicatorCore.Props {}\n\nexport const SeekIndicatorRoot = forwardRef(function SeekIndicatorRoot(\n  componentProps: SeekIndicatorRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, closeDelay, ...elementProps } = componentProps;\n  const { elementRef, present, state } = useInputIndicatorRoot(() => new SeekIndicatorCore(), { closeDelay });\n\n  if (!present) return null;\n\n  return (\n    <SeekIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: SeekIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </SeekIndicatorProvider>\n  );\n});\n\nexport namespace SeekIndicatorRoot {\n  export type Props = SeekIndicatorRootProps;\n  export type State = SeekIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;AAeA,MAAa,oBAAoB,WAAW,SAAS,kBACnD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,GAAG,iBAAiB;CAClE,MAAM,EAAE,YAAY,SAAS,UAAU,4BAA4B,IAAI,mBAAmB,EAAE,EAAE,YAAY,CAAC;AAE3G,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAAC,uBAAD;EAAuB,OAAO,EAAE,OAAO;YACpC,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,WAAW;GAC/B,OAAO,CAAC,aAAa;GACtB,CACF;EACqB,CAAA;EAE1B"}

package/dist/default/ui/seek-indicator/seek-indicator-value.js

@@ -0,0 +1,23 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useSeekIndicatorContext } from "./context.js";
+import { forwardRef } from "react";
+import { getSeekIndicatorDisplayValue } from "@videojs/core";
+//#region src/ui/seek-indicator/seek-indicator-value.tsx
+const SeekIndicatorValue = forwardRef(function SeekIndicatorValue(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const { state } = useSeekIndicatorContext();
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: forwardedRef,
+		props: [{ children: getSeekIndicatorDisplayValue(state) }, elementProps]
+	});
+});
+//#endregion
+export { SeekIndicatorValue };
+
+//# sourceMappingURL=seek-indicator-value.js.map

package/dist/default/ui/seek-indicator/seek-indicator-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"seek-indicator-value.js","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-value.tsx"],"sourcesContent":["'use client';\n\nimport { getSeekIndicatorDisplayValue, type SeekIndicatorCore } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSeekIndicatorContext } from './context';\n\nexport interface SeekIndicatorValueProps extends UIComponentProps<'div', SeekIndicatorCore.State> {}\n\nexport const SeekIndicatorValue = forwardRef(function SeekIndicatorValue(\n  componentProps: SeekIndicatorValueProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n  const { state } = useSeekIndicatorContext();\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: forwardedRef,\n      props: [{ children: getSeekIndicatorDisplayValue(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace SeekIndicatorValue {\n  export type Props = SeekIndicatorValueProps;\n}\n"],"mappings":";;;;;;AAYA,MAAa,qBAAqB,WAAW,SAAS,mBACpD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,yBAAyB;AAE3C,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,6BAA6B,MAAM,EAAE,EAAE,aAAa;EACzE,CACF;EACD"}

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/slider/context.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState, StateAttrMap } from '@videojs/core';\nimport type { SliderThumbProps } from '@videojs/core/dom';\nimport type { RefCallback } from 'react';\nimport { createContext, useContext } from 'react';\n\nexport interface SliderContextValue {\n  state: SliderState;\n  /** Pointer position converted to the value domain (not 0–100 percent). */\n  pointerValue: number;\n  thumbRef: RefCallback<HTMLElement>;\n  thumbProps: SliderThumbProps;\n  stateAttrMap: StateAttrMap<SliderState>;\n  getAttrs: (state: SliderState) => object;\n  formatValue?: ((value: number, type: 'current' | 'pointer') => string) | undefined;\n}\n\nconst SliderContext = createContext<SliderContextValue | null>(null);\n\nexport function SliderProvider({ value, children }: { value: SliderContextValue; children: React.ReactNode }) {\n  return <SliderContext.Provider value={value}>{children}</SliderContext.Provider>;\n}\n\nexport function useSliderContext(): SliderContextValue {\n  const ctx = useContext(SliderContext);\n  if (!ctx) throw new Error('Slider compound components must be used within a Slider.Root');\n  return ctx;\n}\n"],"mappings":";;;;AAkBA,MAAM,gBAAgB,cAAyC,KAAK;AAEpE,SAAgB,eAAe,EAAE,OAAO,YAAsE;AAC5G,QAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;EAAkC,CAAA;;AAGlF,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,cAAc;AACrC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,+DAA+D;AACzF,QAAO"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/slider/context.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState, StateAttrMap } from '@videojs/core';\nimport type { SliderThumbProps } from '@videojs/core/dom';\nimport type { ProviderProps, RefCallback } from 'react';\nimport { createContext, useContext } from 'react';\n\nexport interface SliderContextValue {\n  state: SliderState;\n  /** Pointer position converted to the value domain (not 0–100 percent). */\n  pointerValue: number;\n  thumbRef: RefCallback<HTMLElement>;\n  thumbProps: SliderThumbProps;\n  stateAttrMap: StateAttrMap<SliderState>;\n  getAttrs: (state: SliderState) => object;\n  formatValue?: ((value: number, type: 'current' | 'pointer') => string) | undefined;\n}\n\nconst SliderContext = createContext<SliderContextValue | null>(null);\n\ntype SliderProviderProps = ProviderProps<SliderContextValue>;\n\nexport function SliderProvider({ value, children }: SliderProviderProps) {\n  return <SliderContext.Provider value={value}>{children}</SliderContext.Provider>;\n}\n\nexport function useSliderContext(): SliderContextValue {\n  const ctx = useContext(SliderContext);\n  if (!ctx) throw new Error('Slider compound components must be used within a Slider.Root');\n  return ctx;\n}\n"],"mappings":";;;;AAkBA,MAAM,gBAAgB,cAAyC,KAAK;AAIpE,SAAgB,eAAe,EAAE,OAAO,YAAiC;AACvE,QAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;EAAkC,CAAA;;AAGlF,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,cAAc;AACrC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,+DAA+D;AACzF,QAAO"}

package/dist/default/ui/status-announcer/index.js

@@ -0,0 +1,2 @@
+import { StatusAnnouncer } from "./status-announcer.js";
+export { StatusAnnouncer };

package/dist/default/ui/status-announcer/status-announcer.js

@@ -0,0 +1,36 @@
+"use client";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useInputActionSubscription } from "../input-indicators/use-input-action-subscription.js";
+import { forwardRef, useState, useSyncExternalStore } from "react";
+import { StatusAnnouncerCore } from "@videojs/core";
+//#region src/ui/status-announcer/status-announcer.tsx
+const StatusAnnouncer = forwardRef(function StatusAnnouncer(componentProps, forwardedRef) {
+	const { render, className, style, closeDelay, labels, ...elementProps } = componentProps;
+	const [core] = useState(() => new StatusAnnouncerCore());
+	useDestroy(core);
+	core.setProps({
+		closeDelay,
+		labels
+	});
+	useInputActionSubscription((event, snapshot) => {
+		core.processEvent(event, snapshot);
+	});
+	const state = useSyncExternalStore((callback) => core.state.subscribe(callback), () => core.state.current, () => core.state.current);
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: forwardedRef,
+		props: [{
+			role: "status",
+			"aria-label": state.label ?? void 0
+		}, elementProps]
+	});
+});
+//#endregion
+export { StatusAnnouncer };
+
+//# sourceMappingURL=status-announcer.js.map

package/dist/default/ui/status-announcer/status-announcer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-announcer.js","names":[],"sources":["../../../../src/ui/status-announcer/status-announcer.tsx"],"sourcesContent":["'use client';\n\nimport { StatusAnnouncerCore } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState, useSyncExternalStore } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputActionSubscription } from '../input-indicators/use-input-action-subscription';\n\nexport interface StatusAnnouncerProps\n  extends UIComponentProps<'div', StatusAnnouncerCore.State>,\n    StatusAnnouncerCore.Props {}\n\nexport const StatusAnnouncer = forwardRef(function StatusAnnouncer(\n  componentProps: StatusAnnouncerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, closeDelay, labels, ...elementProps } = componentProps;\n  const [core] = useState(() => new StatusAnnouncerCore());\n  useDestroy(core);\n  core.setProps({ closeDelay, labels });\n\n  useInputActionSubscription((event, snapshot) => {\n    core.processEvent(event, snapshot);\n  });\n\n  const state = useSyncExternalStore(\n    (callback) => core.state.subscribe(callback),\n    () => core.state.current,\n    () => core.state.current\n  );\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      ref: forwardedRef,\n      props: [\n        {\n          role: 'status',\n          'aria-label': state.label ?? undefined,\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace StatusAnnouncer {\n  export type Props = StatusAnnouncerProps;\n  export type State = StatusAnnouncerCore.State;\n}\n"],"mappings":";;;;;;;AAeA,MAAa,kBAAkB,WAAW,SAAS,gBACjD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,QAAQ,GAAG,iBAAiB;CAC1E,MAAM,CAAC,QAAQ,eAAe,IAAI,qBAAqB,CAAC;AACxD,YAAW,KAAK;AAChB,MAAK,SAAS;EAAE;EAAY;EAAQ,CAAC;AAErC,6BAA4B,OAAO,aAAa;AAC9C,OAAK,aAAa,OAAO,SAAS;GAClC;CAEF,MAAM,QAAQ,sBACX,aAAa,KAAK,MAAM,UAAU,SAAS,QACtC,KAAK,MAAM,eACX,KAAK,MAAM,QAClB;AAED,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK;EACL,OAAO,CACL;GACE,MAAM;GACN,cAAc,MAAM,SAAS,KAAA;GAC9B,EACD,aACD;EACF,CACF;EACD"}

package/dist/default/ui/status-indicator/context.js

@@ -0,0 +1,20 @@
+"use client";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/status-indicator/context.tsx
+const StatusIndicatorContext = createContext(null);
+function StatusIndicatorProvider({ value, children }) {
+	return /* @__PURE__ */ jsx(StatusIndicatorContext.Provider, {
+		value,
+		children
+	});
+}
+function useStatusIndicatorContext() {
+	const ctx = useContext(StatusIndicatorContext);
+	if (!ctx) throw new Error("StatusIndicator child compounds must be used within a StatusIndicator.Root");
+	return ctx;
+}
+//#endregion
+export { StatusIndicatorProvider, useStatusIndicatorContext };
+
+//# sourceMappingURL=context.js.map

package/dist/default/ui/status-indicator/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/status-indicator/context.tsx"],"sourcesContent":["'use client';\n\nimport type { StatusIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface StatusIndicatorContextValue {\n  state: StatusIndicatorCore.State;\n}\n\nconst StatusIndicatorContext = createContext<StatusIndicatorContextValue | null>(null);\n\nexport function StatusIndicatorProvider({ value, children }: ProviderProps<StatusIndicatorContextValue>) {\n  return <StatusIndicatorContext.Provider value={value}>{children}</StatusIndicatorContext.Provider>;\n}\n\nexport function useStatusIndicatorContext(): StatusIndicatorContextValue {\n  const ctx = useContext(StatusIndicatorContext);\n  if (!ctx) throw new Error('StatusIndicator child compounds must be used within a StatusIndicator.Root');\n  return ctx;\n}\n"],"mappings":";;;;AASA,MAAM,yBAAyB,cAAkD,KAAK;AAEtF,SAAgB,wBAAwB,EAAE,OAAO,YAAwD;AACvG,QAAO,oBAAC,uBAAuB,UAAxB;EAAwC;EAAQ;EAA2C,CAAA;;AAGpG,SAAgB,4BAAyD;CACvE,MAAM,MAAM,WAAW,uBAAuB;AAC9C,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,6EAA6E;AACvG,QAAO"}

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

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

package/dist/default/ui/status-indicator/index.parts.js

@@ -0,0 +1,12 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { StatusIndicatorRoot } from "./status-indicator-root.js";
+import { StatusIndicatorValue } from "./status-indicator-value.js";
+//#region src/ui/status-indicator/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Root: () => StatusIndicatorRoot,
+	Value: () => StatusIndicatorValue
+});
+//#endregion
+export { index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/default/ui/status-indicator/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/status-indicator/index.parts.ts"],"sourcesContent":["export {\n  StatusIndicatorRoot as Root,\n  type StatusIndicatorRootProps as RootProps,\n} from './status-indicator-root';\nexport {\n  StatusIndicatorValue as Value,\n  type StatusIndicatorValueProps as ValueProps,\n} from './status-indicator-value';\n"],"mappings":""}

package/dist/default/ui/status-indicator/status-indicator-root.js

@@ -0,0 +1,34 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useInputIndicatorRoot } from "../input-indicators/use-input-indicator-root.js";
+import { StatusIndicatorProvider } from "./context.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { StatusIndicatorCore, StatusIndicatorDataAttrs } from "@videojs/core";
+//#region src/ui/status-indicator/status-indicator-root.tsx
+const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(componentProps, forwardedRef) {
+	const { render, className, style, actions, closeDelay, labels, ...elementProps } = componentProps;
+	const { elementRef, present, state } = useInputIndicatorRoot(() => new StatusIndicatorCore(), {
+		actions,
+		closeDelay,
+		labels
+	});
+	if (!present) return null;
+	return /* @__PURE__ */ jsx(StatusIndicatorProvider, {
+		value: { state },
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: StatusIndicatorDataAttrs,
+			ref: [forwardedRef, elementRef],
+			props: [elementProps]
+		})
+	});
+});
+//#endregion
+export { StatusIndicatorRoot };
+
+//# sourceMappingURL=status-indicator-root.js.map

package/dist/default/ui/status-indicator/status-indicator-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator-root.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-root.tsx"],"sourcesContent":["'use client';\n\nimport { StatusIndicatorCore, StatusIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicators/use-input-indicator-root';\nimport { StatusIndicatorProvider } from './context';\n\nexport interface StatusIndicatorRootProps\n  extends UIComponentProps<'div', StatusIndicatorCore.State>,\n    StatusIndicatorCore.Props {}\n\nexport const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(\n  componentProps: StatusIndicatorRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, actions, closeDelay, labels, ...elementProps } = componentProps;\n  const { elementRef, present, state } = useInputIndicatorRoot(() => new StatusIndicatorCore(), {\n    actions,\n    closeDelay,\n    labels,\n  });\n\n  if (!present) return null;\n\n  return (\n    <StatusIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: StatusIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </StatusIndicatorProvider>\n  );\n});\n\nexport namespace StatusIndicatorRoot {\n  export type Props = StatusIndicatorRootProps;\n  export type State = StatusIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;AAeA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,YAAY,QAAQ,GAAG,iBAAiB;CACnF,MAAM,EAAE,YAAY,SAAS,UAAU,4BAA4B,IAAI,qBAAqB,EAAE;EAC5F;EACA;EACA;EACD,CAAC;AAEF,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAAC,yBAAD;EAAyB,OAAO,EAAE,OAAO;YACtC,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,WAAW;GAC/B,OAAO,CAAC,aAAa;GACtB,CACF;EACuB,CAAA;EAE5B"}

package/dist/default/ui/status-indicator/status-indicator-value.js

@@ -0,0 +1,23 @@
+"use client";
+import { renderElement } from "../../utils/use-render.js";
+import { useStatusIndicatorContext } from "./context.js";
+import { forwardRef } from "react";
+import { getStatusIndicatorDisplayValue } from "@videojs/core";
+//#region src/ui/status-indicator/status-indicator-value.tsx
+const StatusIndicatorValue = forwardRef(function StatusIndicatorValue(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const { state } = useStatusIndicatorContext();
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: forwardedRef,
+		props: [{ children: getStatusIndicatorDisplayValue(state) }, elementProps]
+	});
+});
+//#endregion
+export { StatusIndicatorValue };
+
+//# sourceMappingURL=status-indicator-value.js.map

package/dist/default/ui/status-indicator/status-indicator-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-indicator-value.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-value.tsx"],"sourcesContent":["'use client';\n\nimport { getStatusIndicatorDisplayValue, type StatusIndicatorCore } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useStatusIndicatorContext } from './context';\n\nexport interface StatusIndicatorValueProps extends UIComponentProps<'span', StatusIndicatorCore.State> {}\n\nexport const StatusIndicatorValue = forwardRef(function StatusIndicatorValue(\n  componentProps: StatusIndicatorValueProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n  const { state } = useStatusIndicatorContext();\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: forwardedRef,\n      props: [{ children: getStatusIndicatorDisplayValue(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace StatusIndicatorValue {\n  export type Props = StatusIndicatorValueProps;\n}\n"],"mappings":";;;;;;AAYA,MAAa,uBAAuB,WAAW,SAAS,qBACtD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,2BAA2B;AAE7C,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,+BAA+B,MAAM,EAAE,EAAE,aAAa;EAC3E,CACF;EACD"}

package/dist/default/ui/time/time-value.js

@@ -2,9 +2,10 @@
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { selectTime } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
+import { forwardRef, useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { TimeCore, TimeDataAttrs } from "@videojs/core";
+import { isInteractiveActivation } from "@videojs/utils/dom";
 //#region src/ui/time/time-value.tsx
 /**
 * Displays a formatted time value (current, duration, or remaining).
@@ -17,13 +18,19 @@ import { TimeCore, TimeDataAttrs } from "@videojs/core";
 * ```
 */
 const Value = forwardRef(function Value(componentProps, forwardedRef) {
-	const { render, className, style, type, negativeSign, label, ...elementProps } = componentProps;
+	const { render, className, style, type, negativeSign, label, toggle = false, ...elementProps } = componentProps;
 	const time = usePlayer(selectTime);
 	const [core] = useState(() => new TimeCore());
+	const defaultType = type ?? TimeCore.defaultProps.type;
+	const [activeType, setActiveType] = useState(defaultType);
+	useEffect(() => {
+		setActiveType(defaultType);
+	}, [defaultType, toggle]);
 	core.setProps({
-		type,
+		type: activeType,
 		negativeSign,
-		label
+		label,
+		toggle
 	});
 	if (!time) return null;
 	core.setMedia(time);
@@ -32,6 +39,22 @@ const Value = forwardRef(function Value(componentProps, forwardedRef) {
 		"aria-hidden": "true",
 		children: negativeSign ?? TimeCore.defaultProps.negativeSign
 	}), state.text] }) : state.text;
+	const toggleType = () => {
+		setActiveType((value) => {
+			if (defaultType === "current") return value === "remaining" ? "current" : "remaining";
+			return value === "duration" ? "remaining" : "duration";
+		});
+	};
+	const handleClick = (event) => {
+		if (event.defaultPrevented) return;
+		toggleType();
+	};
+	const handleKeyDown = (event) => {
+		if (event.defaultPrevented || !isInteractiveActivation(event.nativeEvent)) return;
+		event.preventDefault();
+		if (event.repeat) return;
+		toggleType();
+	};
 	return renderElement("time", {
 		render,
 		className,
@@ -43,7 +66,11 @@ const Value = forwardRef(function Value(componentProps, forwardedRef) {
 		props: [{
 			dateTime: state.datetime,
 			children: content,
-			...core.getAttrs(state)
+			...core.getAttrs(state, defaultType),
+			...toggle ? {
+				onClick: handleClick,
+				onKeyDown: handleKeyDown
+			} : void 0
 		}, elementProps]
 	});
 });

package/dist/default/ui/time/time-value.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["'use client';\n\nimport { TimeCore, TimeDataAttrs } 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';\n\nexport interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}\n\n/**\n * Displays a formatted time value (current, duration, or remaining).\n *\n * @example\n * ```tsx\n * <Time.Value />\n * <Time.Value type=\"duration\" />\n * <Time.Value type=\"remaining\" negativeSign=\"−\" />\n * ```\n */\nexport const Value = forwardRef(function Value(\n  componentProps: ValueProps,\n  forwardedRef: ForwardedRef<HTMLTimeElement>\n) {\n  const { render, className, style, type, negativeSign, label, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n\n  const [core] = useState(() => new TimeCore());\n  core.setProps({ type, negativeSign, label });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('Time.Value', 'time');\n    return null;\n  }\n\n  core.setMedia(time);\n  const state = core.getState();\n\n  const content = state.negative ? (\n    <>\n      <span aria-hidden=\"true\">{negativeSign ?? TimeCore.defaultProps.negativeSign}</span>\n      {state.text}\n    </>\n  ) : (\n    state.text\n  );\n\n  return renderElement(\n    'time',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TimeDataAttrs,\n      ref: [forwardedRef],\n      props: [\n        {\n          dateTime: state.datetime,\n          children: content,\n          ...core.getAttrs(state),\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace Value {\n  export type Props = ValueProps;\n  export type State = TimeCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM,cAAc,OAAO,GAAG,iBAAiB;CAEjF,MAAM,OAAO,UAAU,WAAW;CAElC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;AAC7C,MAAK,SAAS;EAAE;EAAM;EAAc;EAAO,CAAC;AAE5C,KAAI,CAAC,KAEH,QAAO;AAGT,MAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,UAAU;CAE7B,MAAM,UAAU,MAAM,WACpB,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,eAAY;YAAQ,gBAAgB,SAAS,aAAa;EAAoB,CAAA,EACnF,MAAM,KACN,EAAA,CAAA,GAEH,MAAM;AAGR,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CACL;GACE,UAAU,MAAM;GAChB,UAAU;GACV,GAAG,KAAK,SAAS,MAAM;GACxB,EACD,aACD;EACF,CACF;EACD"}
+{"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["'use client';\n\nimport { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';\nimport { forwardRef, useEffect, useState } from 'react';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}\n\n/**\n * Displays a formatted time value (current, duration, or remaining).\n *\n * @example\n * ```tsx\n * <Time.Value />\n * <Time.Value type=\"duration\" />\n * <Time.Value type=\"remaining\" negativeSign=\"−\" />\n * ```\n */\nexport const Value = forwardRef(function Value(\n  componentProps: ValueProps,\n  forwardedRef: ForwardedRef<HTMLTimeElement>\n) {\n  const { render, className, style, type, negativeSign, label, toggle = false, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n  const [core] = useState(() => new TimeCore());\n\n  const defaultType = type ?? TimeCore.defaultProps.type;\n  const [activeType, setActiveType] = useState(defaultType);\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to listen for changes to defaultType and toggle (so we revert to default), this just means one less useEffect.\n  useEffect(() => {\n    setActiveType(defaultType);\n  }, [defaultType, toggle]);\n\n  core.setProps({ type: activeType, negativeSign, label, toggle });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('Time.Value', 'time');\n    return null;\n  }\n\n  core.setMedia(time);\n  const state = core.getState();\n\n  const content = state.negative ? (\n    <>\n      <span aria-hidden=\"true\">{negativeSign ?? TimeCore.defaultProps.negativeSign}</span>\n      {state.text}\n    </>\n  ) : (\n    state.text\n  );\n\n  const toggleType = () => {\n    setActiveType((value) => {\n      if (defaultType === 'current') {\n        return value === 'remaining' ? 'current' : 'remaining';\n      }\n      return value === 'duration' ? 'remaining' : 'duration';\n    });\n  };\n\n  const handleClick = (event: MouseEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented) return;\n    toggleType();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented || !isInteractiveActivation(event.nativeEvent)) return;\n    // Prevent space from scrolling page.\n    event.preventDefault();\n    if (event.repeat) return;\n    toggleType();\n  };\n\n  return renderElement(\n    'time',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TimeDataAttrs,\n      ref: [forwardedRef],\n      props: [\n        {\n          dateTime: state.datetime,\n          children: content,\n          ...core.getAttrs(state, defaultType),\n          ...(toggle ? { onClick: handleClick, onKeyDown: handleKeyDown } : undefined),\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace Value {\n  export type Props = ValueProps;\n  export type State = TimeCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAuBA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM,cAAc,OAAO,SAAS,OAAO,GAAG,iBAAiB;CAEjG,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;CAE7C,MAAM,cAAc,QAAQ,SAAS,aAAa;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,YAAY;AAEzD,iBAAgB;AACd,gBAAc,YAAY;IACzB,CAAC,aAAa,OAAO,CAAC;AAEzB,MAAK,SAAS;EAAE,MAAM;EAAY;EAAc;EAAO;EAAQ,CAAC;AAEhE,KAAI,CAAC,KAEH,QAAO;AAGT,MAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,UAAU;CAE7B,MAAM,UAAU,MAAM,WACpB,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,eAAY;YAAQ,gBAAgB,SAAS,aAAa;EAAoB,CAAA,EACnF,MAAM,KACN,EAAA,CAAA,GAEH,MAAM;CAGR,MAAM,mBAAmB;AACvB,iBAAe,UAAU;AACvB,OAAI,gBAAgB,UAClB,QAAO,UAAU,cAAc,YAAY;AAE7C,UAAO,UAAU,aAAa,cAAc;IAC5C;;CAGJ,MAAM,eAAe,UAAuC;AAC1D,MAAI,MAAM,iBAAkB;AAC5B,cAAY;;CAGd,MAAM,iBAAiB,UAA0C;AAC/D,MAAI,MAAM,oBAAoB,CAAC,wBAAwB,MAAM,YAAY,CAAE;AAE3E,QAAM,gBAAgB;AACtB,MAAI,MAAM,OAAQ;AAClB,cAAY;;AAGd,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CACL;GACE,UAAU,MAAM;GAChB,UAAU;GACV,GAAG,KAAK,SAAS,OAAO,YAAY;GACpC,GAAI,SAAS;IAAE,SAAS;IAAa,WAAW;IAAe,GAAG,KAAA;GACnE,EACD,aACD;EACF,CACF;EACD"}

package/dist/default/ui/time-slider/time-slider-root.js

@@ -4,17 +4,18 @@ import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useSlider } from "../hooks/use-slider.js";
 import { SliderProvider } from "../slider/context.js";
-import { getTimeSliderCSSVars, selectBuffer, selectTime } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
+import { getTimeSliderCSSVars, selectBuffer, selectPlayback, selectTime } from "@videojs/core/dom";
+import { forwardRef, useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
 import { formatTime } from "@videojs/utils/time";
 //#region src/ui/time-slider/time-slider-root.tsx
 const noopSeek = () => Promise.resolve(0);
 const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwardedRef) {
-	const { render, className, style, label, changeThrottle = TimeSliderCore.defaultProps.changeThrottle, step = TimeSliderCore.defaultProps.step, largeStep = TimeSliderCore.defaultProps.largeStep, orientation, disabled, thumbAlignment, onDragStart, onDragEnd, ...elementProps } = componentProps;
+	const { render, className, style, label, changeThrottle = TimeSliderCore.defaultProps.changeThrottle, step = TimeSliderCore.defaultProps.step, largeStep = TimeSliderCore.defaultProps.largeStep, orientation, disabled, thumbAlignment, onDragStart, onDragEnd, pauseOnDrag, ...elementProps } = componentProps;
 	const time = usePlayer(selectTime);
 	const buffer = usePlayer(selectBuffer);
+	const playback = usePlayer(selectPlayback);
 	const [core] = useState(() => new TimeSliderCore());
 	core.setProps({
 		label,
@@ -22,12 +23,17 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 		largeStep,
 		orientation,
 		disabled,
-		thumbAlignment
+		thumbAlignment,
+		pauseOnDrag
 	});
 	const mediaRef = useLatestRef(time && buffer ? {
 		...time,
 		...buffer
 	} : null);
+	const playbackRef = useLatestRef(playback);
+	useEffect(() => {
+		return () => core.endDrag(playbackRef.current);
+	}, [core]);
 	const duration = time?.duration ?? 0;
 	const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
 		computeState: (input) => {
@@ -58,8 +64,14 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 			const media = mediaRef.current;
 			if (media) media.seek(core.rawValueFromPercent(percent));
 		},
-		onDragStart,
-		onDragEnd
+		onDragStart: () => {
+			core.startDrag(playbackRef.current);
+			onDragStart?.();
+		},
+		onDragEnd: () => {
+			core.endDrag(playbackRef.current);
+			onDragEnd?.();
+		}
 	});
 	if (!time) return null;
 	return /* @__PURE__ */ jsx(SliderProvider, {

package/dist/default/ui/time-slider/time-slider-root.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n  function TimeSliderRoot(componentProps, forwardedRef) {\n    const {\n      render,\n      className,\n      style,\n      label,\n      changeThrottle = TimeSliderCore.defaultProps.changeThrottle,\n      step = TimeSliderCore.defaultProps.step,\n      largeStep = TimeSliderCore.defaultProps.largeStep,\n      orientation,\n      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      ...elementProps\n    } = componentProps;\n\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n\n    const [core] = useState(() => new TimeSliderCore());\n    core.setProps({ label, step, largeStep, orientation, disabled, thumbAlignment });\n\n    // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n    const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\n\n    const duration = time?.duration ?? 0;\n\n    const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<TimeSliderCore.State>({\n      computeState: (input) => {\n        core.setInput(input);\n        if (!time || !buffer) {\n          core.setMedia({\n            currentTime: 0,\n            duration: 0,\n            seeking: false,\n            seek: noopSeek,\n            buffered: [],\n            seekable: [],\n          });\n        } else {\n          core.setMedia({ ...time, ...buffer });\n        }\n\n        return core.getState();\n      },\n      getPercent: () => (duration > 0 ? ((time?.currentTime ?? 0) / duration) * 100 : 0),\n      getStepPercent: () => core.getStepPercent(),\n      getLargeStepPercent: () => core.getLargeStepPercent(),\n      orientation,\n      disabled,\n      changeThrottle,\n      adjustPercent: (rawPercent, thumbSize, trackSize) =>\n        core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n      getCSSVars: getTimeSliderCSSVars,\n      onValueCommit: (percent) => {\n        const media = mediaRef.current;\n        if (media) media.seek(core.rawValueFromPercent(percent));\n      },\n      onDragStart,\n      onDragEnd,\n    });\n\n    if (!time) {\n      if (__DEV__) logMissingFeature('TimeSlider', 'time');\n      return null;\n    }\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.valueFromPercent(state.pointerPercent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => core.getAttrs(sliderState as TimeSliderCore.State),\n          formatValue: (value) => formatTime(value, duration),\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: TimeSliderDataAttrs,\n            ref: [forwardedRef, rootRef],\n            props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n          }\n        )}\n      </SliderProvider>\n    );\n  }\n);\n\nexport namespace TimeSliderRoot {\n  export type Props = TimeSliderRootProps;\n  export type State = TimeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,iBAAkC,QAAQ,QAAQ,EAAE;AAO1D,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAGhF,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;EAAQ,GAAG,KAAK;CAE7E,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAgC;EAC9G,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,OAAI,CAAC,QAAQ,CAAC,OACZ,MAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,EAAE;IACZ,UAAU,EAAE;IACb,CAAC;OAEF,MAAK,SAAS;IAAE,GAAG;IAAM,GAAG;IAAQ,CAAC;AAGvC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,WAAW,KAAM,MAAM,eAAe,KAAK,WAAY,MAAM;EAChF,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;AACvB,OAAI,MAAO,OAAM,KAAK,KAAK,oBAAoB,QAAQ,CAAC;;EAE1D;EACA;EACD,CAAC;AAEF,KAAI,CAAC,KAEH,QAAO;AAGT,QACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAoC;GAC7E,cAAc,UAAU,WAAW,OAAO,SAAS;GACpD;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;EACc,CAAA;EAGtB"}
+{"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectPlayback, selectTime } from '@videojs/core/dom';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useEffect, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n  function TimeSliderRoot(componentProps, forwardedRef) {\n    const {\n      render,\n      className,\n      style,\n      label,\n      changeThrottle = TimeSliderCore.defaultProps.changeThrottle,\n      step = TimeSliderCore.defaultProps.step,\n      largeStep = TimeSliderCore.defaultProps.largeStep,\n      orientation,\n      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      pauseOnDrag,\n      ...elementProps\n    } = componentProps;\n\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n    const playback = usePlayer(selectPlayback);\n\n    const [core] = useState(() => new TimeSliderCore());\n    core.setProps({ label, step, largeStep, orientation, disabled, thumbAlignment, pauseOnDrag });\n\n    // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n    const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\n    const playbackRef = useLatestRef(playback);\n\n    // Resume playback if the slider unmounts mid-drag — createSlider's destroy()\n    // does not fire onDragEnd, so without this the player would stay paused.\n    useEffect(() => {\n      return () => core.endDrag(playbackRef.current);\n    }, [core]);\n\n    const duration = time?.duration ?? 0;\n\n    const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<TimeSliderCore.State>({\n      computeState: (input) => {\n        core.setInput(input);\n        if (!time || !buffer) {\n          core.setMedia({\n            currentTime: 0,\n            duration: 0,\n            seeking: false,\n            seek: noopSeek,\n            buffered: [],\n            seekable: [],\n          });\n        } else {\n          core.setMedia({ ...time, ...buffer });\n        }\n\n        return core.getState();\n      },\n      getPercent: () => (duration > 0 ? ((time?.currentTime ?? 0) / duration) * 100 : 0),\n      getStepPercent: () => core.getStepPercent(),\n      getLargeStepPercent: () => core.getLargeStepPercent(),\n      orientation,\n      disabled,\n      changeThrottle,\n      adjustPercent: (rawPercent, thumbSize, trackSize) =>\n        core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n      getCSSVars: getTimeSliderCSSVars,\n      onValueCommit: (percent) => {\n        const media = mediaRef.current;\n        if (media) media.seek(core.rawValueFromPercent(percent));\n      },\n      onDragStart: () => {\n        core.startDrag(playbackRef.current);\n        onDragStart?.();\n      },\n      onDragEnd: () => {\n        core.endDrag(playbackRef.current);\n        onDragEnd?.();\n      },\n    });\n\n    if (!time) {\n      if (__DEV__) logMissingFeature('TimeSlider', 'time');\n      return null;\n    }\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.valueFromPercent(state.pointerPercent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => core.getAttrs(sliderState as TimeSliderCore.State),\n          formatValue: (value) => formatTime(value, duration),\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: TimeSliderDataAttrs,\n            ref: [forwardedRef, rootRef],\n            props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n          }\n        )}\n      </SliderProvider>\n    );\n  }\n);\n\nexport namespace TimeSliderRoot {\n  export type Props = TimeSliderRootProps;\n  export type State = TimeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,iBAAkC,QAAQ,QAAQ,EAAE;AAO1D,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,aACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,SAAS,UAAU,aAAa;CACtC,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAM;EAAW;EAAa;EAAU;EAAgB;EAAa,CAAC;CAG7F,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;EAAQ,GAAG,KAAK;CAC7E,MAAM,cAAc,aAAa,SAAS;AAI1C,iBAAgB;AACd,eAAa,KAAK,QAAQ,YAAY,QAAQ;IAC7C,CAAC,KAAK,CAAC;CAEV,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAgC;EAC9G,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,OAAI,CAAC,QAAQ,CAAC,OACZ,MAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,EAAE;IACZ,UAAU,EAAE;IACb,CAAC;OAEF,MAAK,SAAS;IAAE,GAAG;IAAM,GAAG;IAAQ,CAAC;AAGvC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,WAAW,KAAM,MAAM,eAAe,KAAK,WAAY,MAAM;EAChF,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;AACvB,OAAI,MAAO,OAAM,KAAK,KAAK,oBAAoB,QAAQ,CAAC;;EAE1D,mBAAmB;AACjB,QAAK,UAAU,YAAY,QAAQ;AACnC,kBAAe;;EAEjB,iBAAiB;AACf,QAAK,QAAQ,YAAY,QAAQ;AACjC,gBAAa;;EAEhB,CAAC;AAEF,KAAI,CAAC,KAEH,QAAO;AAGT,QACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAoC;GAC7E,cAAc,UAAU,WAAW,OAAO,SAAS;GACpD;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;EACc,CAAA;EAGtB"}

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap, TooltipCore } from '@videojs/core';\nimport type { TooltipApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface TooltipContextValue {\n  core: TooltipCore;\n  tooltip: TooltipApi;\n  state: TooltipCore.State;\n  stateAttrMap: StateAttrMap<TooltipCore.State>;\n  anchorName: string;\n  popupId: string;\n  content: string | undefined;\n  setContent: (content: string | undefined) => void;\n}\n\nconst TooltipContext = createContext<TooltipContextValue | null>(null);\n\nexport const TooltipContextProvider = TooltipContext.Provider;\n\nexport function useTooltipContext(): TooltipContextValue {\n  const ctx = useContext(TooltipContext);\n  if (!ctx) throw new Error('Tooltip compound components must be used within a Tooltip.Root');\n  return ctx;\n}\n\nexport function useOptionalTooltipContext(): TooltipContextValue | null {\n  return useContext(TooltipContext);\n}\n"],"mappings":";;;AAiBA,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;;AAGT,SAAgB,4BAAwD;AACtE,QAAO,WAAW,eAAe"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap, TooltipCore } from '@videojs/core';\nimport type { MediaContainer, PositioningBoundary, TooltipApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface TooltipContent {\n  label?: string | undefined;\n  shortcut?: string | undefined;\n}\n\nexport interface TooltipContextValue {\n  core: TooltipCore;\n  tooltip: TooltipApi;\n  state: TooltipCore.State;\n  stateAttrMap: StateAttrMap<TooltipCore.State>;\n  anchorName: string;\n  popupId: string;\n  content: TooltipContent | undefined;\n  setContent: (content: TooltipContent | undefined) => void;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n}\n\nconst TooltipContext = createContext<TooltipContextValue | null>(null);\n\nexport const TooltipContextProvider = TooltipContext.Provider;\n\nexport function useTooltipContext(): TooltipContextValue {\n  const ctx = useContext(TooltipContext);\n  if (!ctx) throw new Error('Tooltip compound components must be used within a Tooltip.Root');\n  return ctx;\n}\n\nexport function useOptionalTooltipContext(): TooltipContextValue | null {\n  return useContext(TooltipContext);\n}\n"],"mappings":";;;AAwBA,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;;AAGT,SAAgB,4BAAwD;AACtE,QAAO,WAAW,eAAe"}

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

@@ -1,5 +1,7 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
 import { TooltipArrow } from "./tooltip-arrow.js";
+import { TooltipLabel } from "./tooltip-label.js";
+import { TooltipShortcut } from "./tooltip-shortcut.js";
 import { TooltipPopup } from "./tooltip-popup.js";
 import { TooltipProvider } from "./tooltip-provider.js";
 import { TooltipRoot } from "./tooltip-root.js";
@@ -7,9 +9,11 @@ import { TooltipTrigger } from "./tooltip-trigger.js";
 //#region src/ui/tooltip/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Arrow: () => TooltipArrow,
+	Label: () => TooltipLabel,
 	Popup: () => TooltipPopup,
 	Provider: () => TooltipProvider,
 	Root: () => TooltipRoot,
+	Shortcut: () => TooltipShortcut,
 	Trigger: () => TooltipTrigger
 });
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/tooltip/index.parts.ts"],"sourcesContent":["export { TooltipArrow as Arrow, type TooltipArrowProps as ArrowProps } from './tooltip-arrow';\nexport { TooltipPopup as Popup, type TooltipPopupProps as PopupProps } from './tooltip-popup';\nexport { TooltipProvider as Provider, type TooltipProviderProps as ProviderProps } from './tooltip-provider';\nexport { TooltipRoot as Root, type TooltipRootProps as RootProps } from './tooltip-root';\nexport { TooltipTrigger as Trigger, type TooltipTriggerProps as TriggerProps } from './tooltip-trigger';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/tooltip/index.parts.ts"],"sourcesContent":["export { TooltipArrow as Arrow, type TooltipArrowProps as ArrowProps } from './tooltip-arrow';\nexport { TooltipLabel as Label, type TooltipLabelProps as LabelProps } from './tooltip-label';\nexport { TooltipPopup as Popup, type TooltipPopupProps as PopupProps } from './tooltip-popup';\nexport { TooltipProvider as Provider, type TooltipProviderProps as ProviderProps } from './tooltip-provider';\nexport { TooltipRoot as Root, type TooltipRootProps as RootProps } from './tooltip-root';\nexport { TooltipShortcut as Shortcut, type TooltipShortcutProps as ShortcutProps } from './tooltip-shortcut';\nexport { TooltipTrigger as Trigger, type TooltipTriggerProps as TriggerProps } from './tooltip-trigger';\n"],"mappings":""}

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

@@ -1,6 +1,6 @@
 "use client";
-import { createContextPart } from "../create-context-part.js";
 import { useTooltipContext } from "./context.js";
+import { createContextPart } from "../create-context-part.js";
 //#region src/ui/tooltip/tooltip-arrow.tsx
 /** Decorative arrow pointing from the tooltip toward the trigger. Hidden from assistive technology. */
 const TooltipArrow = createContextPart({