@videojs/react 10.0.0-beta.3 → 10.0.0-beta.31

package/dist/dev/ui/time-slider/time-slider-chapters/time-slider-chapters.d.ts

@@ -0,0 +1,22 @@
+import { HTMLProps, UIComponentProps } from "../../../utils/types.js";
+import { ReactElement } from "react";
+import { TimeSliderChapterRange, TimeSliderChaptersCore } from "@videojs/core";
+//#region src/ui/time-slider/time-slider-chapters/time-slider-chapters.d.ts
+type TimeSliderChapterState = TimeSliderChaptersCore.State;
+interface TimeSliderChaptersState {
+  /** Normalized ranges spanning the full slider domain. */
+  chapters: readonly TimeSliderChapterRange[];
+}
+interface TimeSliderChaptersProps extends Omit<UIComponentProps<'div', TimeSliderChaptersState>, 'children'> {
+  /** Render one consumer-owned subtree for every normalized chapter range. */
+  renderChapter: (props: Omit<HTMLProps<HTMLElement>, 'ref'>, state: TimeSliderChapterState) => ReactElement;
+}
+/** Renders normalized chapter ranges across the full slider, including one full range when chapter cues are absent. */
+declare const TimeSliderChapters: import("react").ForwardRefExoticComponent<Omit<TimeSliderChaptersProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace TimeSliderChapters {
+  type Props = TimeSliderChaptersProps;
+  type State = TimeSliderChaptersState;
+}
+//#endregion
+export { TimeSliderChapterState, TimeSliderChapters, TimeSliderChaptersProps, TimeSliderChaptersState };
+//# sourceMappingURL=time-slider-chapters.d.ts.map

package/dist/dev/ui/time-slider/time-slider-chapters/time-slider-chapters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slider-chapters.d.ts","names":[],"sources":["../../../../../src/ui/time-slider/time-slider-chapters/time-slider-chapters.tsx"],"mappings":";;;;KAgBY,yBAAyB,uBAAuB;UAE3C;;EAEf,mBAAmB;;UAGJ,gCAAgC,KAAK,wBAAwB;;EAE5E,gBAAgB,OAAO,KAAK,UAAU,sBAAsB,OAAO,2BAA2B;;;cAInF,oCAAkB,0BAAA,KAAA,kDAAA,cAAA;kBA6Cd;OACH,QAAQ;OACR,QAAQ"}

package/dist/dev/ui/time-slider/time-slider-chapters/time-slider-chapters.js

@@ -0,0 +1,51 @@
+import { usePlayer } from "../../../player/context.js";
+import { SliderSegments } from "./slider-segments.js";
+import { getStateDataAttrs, selectBuffer, selectTextTrack, selectTime } from "@videojs/core/dom";
+import { forwardRef, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isFunction } from "@videojs/utils/predicate";
+import { TimeSliderChapterCSSVars, TimeSliderChapterDataAttrs, TimeSliderChaptersCore } from "@videojs/core";
+//#region src/ui/time-slider/time-slider-chapters/time-slider-chapters.tsx
+/** Renders normalized chapter ranges across the full slider, including one full range when chapter cues are absent. */
+const TimeSliderChapters = forwardRef(function TimeSliderChapters(componentProps, ref) {
+	const { renderChapter, className, style, render, ...props } = componentProps;
+	const textTrack = usePlayer(selectTextTrack);
+	const buffer = usePlayer(selectBuffer);
+	const duration = usePlayer(selectTime)?.duration ?? 0;
+	const [core] = useState(() => new TimeSliderChaptersCore());
+	const { chapters, ranges, max } = useMemo(() => core.getRanges(textTrack?.chaptersCues ?? [], 0, duration), [
+		core,
+		textTrack?.chaptersCues,
+		duration
+	]);
+	const bufferedEnd = buffer?.buffered.length ? buffer.buffered[buffer.buffered.length - 1][1] : 0;
+	const getChapterState = (segment) => core.getState(segment, chapters, bufferedEnd);
+	const state = useMemo(() => ({ chapters }), [chapters]);
+	return /* @__PURE__ */ jsx(SliderSegments, {
+		ref,
+		...props,
+		className: isFunction(className) ? className(state) : className,
+		style: isFunction(style) ? style(state) : style,
+		render: isFunction(render) ? (renderProps) => render(renderProps, state) : render,
+		ranges,
+		min: 0,
+		max,
+		renderSegment: (segmentProps, segment) => {
+			const state = getChapterState(segment);
+			const chapterProps = {
+				...segmentProps,
+				...getStateDataAttrs(state, TimeSliderChapterDataAttrs),
+				style: {
+					...segmentProps.style,
+					pointerEvents: state.cue ? void 0 : "none",
+					[TimeSliderChapterCSSVars.buffer]: `${state.bufferPercent}%`
+				}
+			};
+			return renderChapter(chapterProps, state);
+		}
+	});
+});
+//#endregion
+export { TimeSliderChapters };
+
+//# sourceMappingURL=time-slider-chapters.js.map

package/dist/dev/ui/time-slider/time-slider-chapters/time-slider-chapters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-slider-chapters.js","names":[],"sources":["../../../../../src/ui/time-slider/time-slider-chapters/time-slider-chapters.tsx"],"sourcesContent":["import {\n  type SliderSegmentState,\n  TimeSliderChapterCSSVars,\n  TimeSliderChapterDataAttrs,\n  type TimeSliderChapterRange,\n  TimeSliderChaptersCore,\n} from '@videojs/core';\nimport { getStateDataAttrs, selectBuffer, selectTextTrack, selectTime } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { CSSProperties, ReactElement } from 'react';\nimport { forwardRef, useMemo, useState } from 'react';\n\nimport { usePlayer } from '../../../player/context';\nimport type { HTMLProps, UIComponentProps } from '../../../utils/types';\nimport { SliderSegments } from './slider-segments';\n\nexport type TimeSliderChapterState = TimeSliderChaptersCore.State;\n\nexport interface TimeSliderChaptersState {\n  /** Normalized ranges spanning the full slider domain. */\n  chapters: readonly TimeSliderChapterRange[];\n}\n\nexport interface TimeSliderChaptersProps extends Omit<UIComponentProps<'div', TimeSliderChaptersState>, 'children'> {\n  /** Render one consumer-owned subtree for every normalized chapter range. */\n  renderChapter: (props: Omit<HTMLProps<HTMLElement>, 'ref'>, state: TimeSliderChapterState) => ReactElement;\n}\n\n/** Renders normalized chapter ranges across the full slider, including one full range when chapter cues are absent. */\nexport const TimeSliderChapters = forwardRef<HTMLDivElement, TimeSliderChaptersProps>(\n  function TimeSliderChapters(componentProps, ref) {\n    const { renderChapter, className, style, render, ...props } = componentProps;\n    const textTrack = usePlayer(selectTextTrack);\n    const buffer = usePlayer(selectBuffer);\n    const time = usePlayer(selectTime);\n    const duration = time?.duration ?? 0;\n    const [core] = useState(() => new TimeSliderChaptersCore());\n    const { chapters, ranges, max } = useMemo(\n      () => core.getRanges(textTrack?.chaptersCues ?? [], 0, duration),\n      [core, textTrack?.chaptersCues, duration]\n    );\n    const bufferedEnd = buffer?.buffered.length ? buffer.buffered[buffer.buffered.length - 1]![1] : 0;\n    const getChapterState = (segment: SliderSegmentState) => core.getState(segment, chapters, bufferedEnd);\n    const state = useMemo(() => ({ chapters }), [chapters]);\n\n    return (\n      <SliderSegments\n        ref={ref}\n        {...props}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (renderProps) => render(renderProps, state) : render}\n        ranges={ranges}\n        min={0}\n        max={max}\n        renderSegment={(segmentProps, segment) => {\n          const state = getChapterState(segment);\n          const chapterProps = {\n            ...segmentProps,\n            ...getStateDataAttrs(state, TimeSliderChapterDataAttrs),\n            style: {\n              ...segmentProps.style,\n              pointerEvents: state.cue ? undefined : 'none',\n              [TimeSliderChapterCSSVars.buffer]: `${state.bufferPercent}%`,\n            } as CSSProperties,\n          };\n\n          return renderChapter(chapterProps, state);\n        }}\n      />\n    );\n  }\n);\n\nexport namespace TimeSliderChapters {\n  export type Props = TimeSliderChaptersProps;\n  export type State = TimeSliderChaptersState;\n}\n"],"mappings":";;;;;;;;;AA6BA,MAAa,qBAAqB,WAChC,SAAS,mBAAmB,gBAAgB,KAAK;CAC/C,MAAM,EAAE,eAAe,WAAW,OAAO,QAAQ,GAAG,UAAU;CAC9D,MAAM,YAAY,UAAU,eAAe;CAC3C,MAAM,SAAS,UAAU,YAAY;CAErC,MAAM,WADO,UAAU,UACH,CAAC,EAAE,YAAY;CACnC,MAAM,CAAC,QAAQ,eAAe,IAAI,uBAAuB,CAAC;CAC1D,MAAM,EAAE,UAAU,QAAQ,QAAQ,cAC1B,KAAK,UAAU,WAAW,gBAAgB,CAAC,GAAG,GAAG,QAAQ,GAC/D;EAAC;EAAM,WAAW;EAAc;CAAQ,CAC1C;CACA,MAAM,cAAc,QAAQ,SAAS,SAAS,OAAO,SAAS,OAAO,SAAS,SAAS,EAAE,CAAE,KAAK;CAChG,MAAM,mBAAmB,YAAgC,KAAK,SAAS,SAAS,UAAU,WAAW;CACrG,MAAM,QAAQ,eAAe,EAAE,SAAS,IAAI,CAAC,QAAQ,CAAC;CAEtD,OACE,oBAAC,gBAAD;EACO;EACL,GAAI;EACJ,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,gBAAgB,OAAO,aAAa,KAAK,IAAI;EACnE;EACR,KAAK;EACA;EACL,gBAAgB,cAAc,YAAY;GACxC,MAAM,QAAQ,gBAAgB,OAAO;GACrC,MAAM,eAAe;IACnB,GAAG;IACH,GAAG,kBAAkB,OAAO,0BAA0B;IACtD,OAAO;KACL,GAAG,aAAa;KAChB,eAAe,MAAM,MAAM,KAAA,IAAY;MACtC,yBAAyB,SAAS,GAAG,MAAM,cAAc;IAC5D;GACF;GAEA,OAAO,cAAc,cAAc,KAAK;EAC1C;CACD,CAAA;AAEL,CACF"}

package/dist/dev/ui/time-slider/time-slider-root.d.ts

@@ -1,13 +1,11 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
 import { TimeSliderCore } from "@videojs/core";
-
 //#region src/ui/time-slider/time-slider-root.d.ts
 interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {
   onDragStart?: (() => void) | undefined;
   onDragEnd?: (() => void) | undefined;
 }
-declare const TimeSliderRoot: react.ForwardRefExoticComponent<Omit<TimeSliderRootProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const TimeSliderRoot: import("react").ForwardRefExoticComponent<Omit<TimeSliderRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace TimeSliderRoot {
   type Props = TimeSliderRootProps;
   type State = TimeSliderCore.State;

package/dist/dev/ui/time-slider/time-slider-root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"time-slider-root.d.ts","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"mappings":";;;;;UAgBiB,mBAAA,SAA4B,gBAAA,QAAwB,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;EACzG,WAAA;EACA,SAAA;AAAA;AAAA,cAGW,cAAA,EAAc,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,mBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAgGV,cAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}
+{"version":3,"file":"time-slider-root.d.ts","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"mappings":";;;UAgBiB,4BAA4B,wBAAwB,eAAe,QAAQ,eAAe;EACzG;EACA;;cAGW,gCAAc,0BAAA,KAAA,8CAAA,cAAA;kBAyIV;OACH,QAAQ;OACR,QAAQ,eAAe"}

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

@@ -1,22 +1,24 @@
-'use client';
-
+import { useLocale, useTranslator } from "../../i18n/context.js";
 import { usePlayer } from "../../player/context.js";
-import { renderElement } from "../../utils/use-render.js";
 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, logMissingFeature, selectBuffer, selectTime } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
+import { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectPlayback, selectTime } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+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, commitThrottle = TimeSliderCore.defaultProps.commitThrottle, 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 translator = useTranslator();
+	const locale = useLocale();
 	const [core] = useState(() => new TimeSliderCore());
 	core.setProps({
 		label,
@@ -24,14 +26,21 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 		largeStep,
 		orientation,
 		disabled,
-		thumbAlignment
+		thumbAlignment,
+		pauseOnDrag,
+		changeThrottle
 	});
+	core.setFormatLocale(locale);
 	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({
+	const { state, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
 		computeState: (input) => {
 			core.setInput(input);
 			if (!time || !buffer) core.setMedia({
@@ -48,20 +57,26 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 			});
 			return core.getState();
 		},
-		getPercent: () => duration > 0 ? (time?.currentTime ?? 0) / duration * 100 : 0,
+		getPercent: () => core.percentFromValue(time?.currentTime ?? 0),
 		getStepPercent: () => core.getStepPercent(),
 		getLargeStepPercent: () => core.getLargeStepPercent(),
 		orientation,
 		disabled,
-		commitThrottle,
+		changeThrottle,
 		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
 		getCSSVars: getTimeSliderCSSVars,
 		onValueCommit: (percent) => {
 			const media = mediaRef.current;
-			if (media) media.seek(core.valueFromPercent(percent));
+			if (media) media.seek(core.rawValueFromPercent(percent));
 		},
-		onDragStart,
-		onDragEnd
+		onDragStart: () => {
+			core.startDrag(playbackRef.current);
+			onDragStart?.();
+		},
+		onDragEnd: () => {
+			core.endDrag(playbackRef.current);
+			onDragEnd?.();
+		}
 	});
 	if (!time) {
 		logMissingFeature("TimeSlider", "time");
@@ -70,12 +85,21 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 	return /* @__PURE__ */ jsx(SliderProvider, {
 		value: {
 			state,
-			pointerValue: core.valueFromPercent(state.pointerPercent),
+			pointerValue: core.rawValueFromPercent(state.pointerPercent),
+			input,
+			getPointerValue: (percent) => core.rawValueFromPercent(percent),
 			thumbRef,
 			thumbProps,
 			stateAttrMap: TimeSliderDataAttrs,
-			getAttrs: (sliderState) => core.getAttrs(sliderState),
-			formatValue: (value) => formatTime(value, duration)
+			getAttrs: (sliderState) => {
+				const attrs = core.getAttrs(sliderState);
+				return {
+					...attrs,
+					"aria-label": translateText(attrs["aria-label"], translator),
+					"aria-valuetext": translateText(attrs["aria-valuetext"], translator, core.getValueTextParams(sliderState))
+				};
+			},
+			formatValue: (value) => formatTime(value, duration, { locale })
 		},
 		children: renderElement("div", {
 			render,
@@ -96,7 +120,7 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 		})
 	});
 });
-
 //#endregion
 export { TimeSliderRoot };
+
 //# sourceMappingURL=time-slider-root.js.map

package/dist/dev/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      commitThrottle = TimeSliderCore.defaultProps.commitThrottle,\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      commitThrottle,\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.valueFromPercent(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,iBAAiB,QAAQ,CAAC;;EAEvD;EACA;EACD,CAAC;AAEF,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,QACE,oBAAC;EACC,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;GACc;EAGtB"}
+{"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["import { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectPlayback, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useEffect, useState } from 'react';\n\nimport { useLocale, useTranslator } from '../../i18n/context';\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    const translator = useTranslator();\n    const locale = useLocale();\n\n    const [core] = useState(() => new TimeSliderCore());\n    core.setProps({\n      label,\n      step,\n      largeStep,\n      orientation,\n      disabled,\n      thumbAlignment,\n      pauseOnDrag,\n      changeThrottle,\n    });\n    core.setFormatLocale(locale);\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, input, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } =\n      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: () => core.percentFromValue(time?.currentTime ?? 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.rawValueFromPercent(state.pointerPercent),\n          input,\n          getPointerValue: (percent) => core.rawValueFromPercent(percent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => {\n            const attrs = core.getAttrs(sliderState as TimeSliderCore.State);\n            return {\n              ...attrs,\n              'aria-label': translateText(attrs['aria-label'], translator),\n              'aria-valuetext': translateText(\n                attrs['aria-valuetext'],\n                translator,\n                core.getValueTextParams(sliderState as TimeSliderCore.State)\n              ),\n            };\n          },\n          formatValue: (value) => formatTime(value, duration, { locale }),\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,CAAC;AAOzD,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,UAAU;CACjC,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;CAEzB,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;CAClD,KAAK,SAAS;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,KAAK,gBAAgB,MAAM;CAG3B,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;CAAO,IAAI,IAAI;CAC5E,MAAM,cAAc,aAAa,QAAQ;CAIzC,gBAAgB;EACd,aAAa,KAAK,QAAQ,YAAY,OAAO;CAC/C,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eACtE,UAAgC;EAC9B,eAAe,UAAU;GACvB,KAAK,SAAS,KAAK;GACnB,IAAI,CAAC,QAAQ,CAAC,QACZ,KAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,CAAC;IACX,UAAU,CAAC;GACb,CAAC;QAED,KAAK,SAAS;IAAE,GAAG;IAAM,GAAG;GAAO,CAAC;GAGtC,OAAO,KAAK,SAAS;EACvB;EACA,kBAAkB,KAAK,iBAAiB,MAAM,eAAe,CAAC;EAC9D,sBAAsB,KAAK,eAAe;EAC1C,2BAA2B,KAAK,oBAAoB;EACpD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,SAAS;EACjE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;GACvB,IAAI,OAAO,MAAM,KAAK,KAAK,oBAAoB,OAAO,CAAC;EACzD;EACA,mBAAmB;GACjB,KAAK,UAAU,YAAY,OAAO;GAClC,cAAc;EAChB;EACA,iBAAiB;GACf,KAAK,QAAQ,YAAY,OAAO;GAChC,YAAY;EACd;CACF,CAAC;CAEH,IAAI,CAAC,MAAM;EACI,kBAAkB,cAAc,MAAM;EACnD,OAAO;CACT;CAEA,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,oBAAoB,MAAM,cAAc;GAC3D;GACA,kBAAkB,YAAY,KAAK,oBAAoB,OAAO;GAC9D;GACA;GACA,cAAc;GACd,WAAW,gBAAgB;IACzB,MAAM,QAAQ,KAAK,SAAS,WAAmC;IAC/D,OAAO;KACL,GAAG;KACH,cAAc,cAAc,MAAM,eAAe,UAAU;KAC3D,kBAAkB,cAChB,MAAM,mBACN,YACA,KAAK,mBAAmB,WAAmC,CAC7D;IACF;GACF;GACA,cAAc,UAAU,WAAW,OAAO,UAAU,EAAE,OAAO,CAAC;EAChE;EAEC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,OAAO;GAC3B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;IAAU,EAAE;IAAG;IAAW;GAAY;EAC1E,CACF;CACc,CAAA;AAEpB,CACF"}

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

@@ -0,0 +1,2 @@
+import { Title, TitleProps } from "./title.js";
+export { Title, type TitleProps };

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

@@ -0,0 +1,2 @@
+import { Title } from "./title.js";
+export { Title };

package/dist/dev/ui/title/title.d.ts

@@ -0,0 +1,27 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { TitleCore } from "@videojs/core";
+//#region src/ui/title/title.d.ts
+interface TitleProps extends Omit<UIComponentProps<'span', TitleCore.State>, 'children'> {}
+/**
+ * Displays the resolved content title.
+ *
+ * The component owns its text content. Set the title through the player's
+ * `title` prop rather than by passing children.
+ *
+ * Renders nothing when no title resolves.
+ *
+ * @example
+ * ```tsx
+ * <Title />
+ *
+ * <Title className="title" />
+ * ```
+ */
+declare const Title: import("react").ForwardRefExoticComponent<Omit<TitleProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare namespace Title {
+  type Props = TitleProps;
+  type State = TitleCore.State;
+}
+//#endregion
+export { Title, TitleProps };
+//# sourceMappingURL=title.d.ts.map

package/dist/dev/ui/title/title.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.d.ts","names":[],"sources":["../../../../src/ui/title/title.tsx"],"mappings":";;;UAWiB,mBAAmB,KAAK,yBAAyB,UAAU;;;;;;;;;;;;;;;;cAiB/D,uBAAK,0BAAA,KAAA,qCAAA,cAAA;kBA+BD;OACH,QAAQ;OACR,QAAQ,UAAU"}

package/dist/dev/ui/title/title.js

@@ -0,0 +1,47 @@
+"use client";
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { logMissingFeature, selectMetadata } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { TitleCore, TitleDataAttrs } from "@videojs/core";
+//#region src/ui/title/title.tsx
+/**
+* Displays the resolved content title.
+*
+* The component owns its text content. Set the title through the player's
+* `title` prop rather than by passing children.
+*
+* Renders nothing when no title resolves.
+*
+* @example
+* ```tsx
+* <Title />
+*
+* <Title className="title" />
+* ```
+*/
+const Title = forwardRef(function Title(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const metadata = usePlayer(selectMetadata);
+	const [core] = useState(() => new TitleCore());
+	if (!metadata) {
+		logMissingFeature("Title", "metadata");
+		return null;
+	}
+	const state = core.getState(metadata);
+	if (state.hidden) return null;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: TitleDataAttrs,
+		ref: [forwardedRef],
+		props: [{ children: state.title }, elementProps]
+	});
+});
+//#endregion
+export { Title };
+
+//# sourceMappingURL=title.js.map

package/dist/dev/ui/title/title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"title.js","names":[],"sources":["../../../../src/ui/title/title.tsx"],"sourcesContent":["'use client';\n\nimport { TitleCore, TitleDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectMetadata } 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 TitleProps extends Omit<UIComponentProps<'span', TitleCore.State>, 'children'> {}\n\n/**\n * Displays the resolved content title.\n *\n * The component owns its text content. Set the title through the player's\n * `title` prop rather than by passing children.\n *\n * Renders nothing when no title resolves.\n *\n * @example\n * ```tsx\n * <Title />\n *\n * <Title className=\"title\" />\n * ```\n */\nexport const Title = forwardRef(function Title(\n  componentProps: TitleProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const metadata = usePlayer(selectMetadata);\n\n  const [core] = useState(() => new TitleCore());\n\n  if (!metadata) {\n    if (__DEV__) logMissingFeature('Title', 'metadata');\n    return null;\n  }\n\n  const state = core.getState(metadata);\n\n  if (state.hidden) return null;\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TitleDataAttrs,\n      ref: [forwardedRef],\n      props: [{ children: state.title }, elementProps],\n    }\n  );\n});\n\nexport namespace Title {\n  export type Props = TitleProps;\n  export type State = TitleCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;CAE7C,IAAI,CAAC,UAAU;EACA,kBAAkB,SAAS,UAAU;EAClD,OAAO;CACT;CAEA,MAAM,QAAQ,KAAK,SAAS,QAAQ;CAEpC,IAAI,MAAM,QAAQ,OAAO;CAEzB,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,YAAY;EAClB,OAAO,CAAC,EAAE,UAAU,MAAM,MAAM,GAAG,YAAY;CACjD,CACF;AACF,CAAC"}

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

@@ -1,16 +1,26 @@
-import { TooltipApi } from "@videojs/core/dom";
+import { MediaContainer, PositioningBoundary, TooltipApi } from "@videojs/core/dom";
 import { StateAttrMap as StateAttrMap$1, TooltipCore } from "@videojs/core";
-
 //#region src/ui/tooltip/context.d.ts
+interface TooltipContent {
+  label?: string | undefined;
+  shortcut?: string | undefined;
+}
 interface TooltipContextValue {
   core: TooltipCore;
   tooltip: TooltipApi;
   state: TooltipCore.State;
+  preferredSide: TooltipCore.State['side'];
+  setPositionedSide: (side: TooltipCore.State['side']) => void;
   stateAttrMap: StateAttrMap$1<TooltipCore.State>;
   anchorName: string;
   popupId: string;
+  content: TooltipContent | undefined;
+  setContent: (content: TooltipContent | undefined) => void;
+  boundary: PositioningBoundary;
+  container: MediaContainer | null;
 }
 declare function useTooltipContext(): TooltipContextValue;
+declare function useOptionalTooltipContext(): TooltipContextValue | null;
 //#endregion
-export { TooltipContextValue, useTooltipContext };
+export { TooltipContent, TooltipContextValue, useOptionalTooltipContext, useTooltipContext };
 //# sourceMappingURL=context.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"mappings":";;;;UAMiB,mBAAA;EACf,IAAA,EAAM,WAAA;EACN,OAAA,EAAS,UAAA;EACT,KAAA,EAAO,WAAA,CAAY,KAAA;EACnB,YAAA,EAAc,cAAA,CAAa,WAAA,CAAY,KAAA;EACvC,UAAA;EACA,OAAA;AAAA;AAAA,iBAOc,iBAAA,CAAA,GAAqB,mBAAA"}
+{"version":3,"file":"context.d.ts","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"mappings":";;;UAIiB;EACf;EACA;;UAGe;EACf,MAAM;EACN,SAAS;EACT,OAAO,YAAY;EACnB,eAAe,YAAY;EAC3B,oBAAoB,MAAM,YAAY;EACtC,cAAc,eAAa,YAAY;EACvC;EACA;EACA,SAAS;EACT,aAAa,SAAS;EACtB,UAAU;EACV,WAAW;;iBAOG,qBAAqB;iBAMrB,6BAA6B"}

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

@@ -1,7 +1,4 @@
-'use client';
-
 import { createContext, useContext } from "react";
-
 //#region src/ui/tooltip/context.tsx
 const TooltipContext = createContext(null);
 const TooltipContextProvider = TooltipContext.Provider;
@@ -10,7 +7,10 @@ function useTooltipContext() {
 	if (!ctx) throw new Error("Tooltip compound components must be used within a Tooltip.Root");
 	return ctx;
 }
-
+function useOptionalTooltipContext() {
+	return useContext(TooltipContext);
+}
 //#endregion
-export { TooltipContextProvider, useTooltipContext };
+export { TooltipContextProvider, useOptionalTooltipContext, useTooltipContext };
+
 //# sourceMappingURL=context.js.map

package/dist/dev/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}\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"],"mappings":";;;;;AAeA,MAAM,iBAAiB,cAA0C,KAAK;AAEtE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,eAAe;AACtC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,iEAAiE;AAC3F,QAAO"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"sourcesContent":["import 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  preferredSide: TooltipCore.State['side'];\n  setPositionedSide: (side: TooltipCore.State['side']) => void;\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,IAAI;AAErE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,cAAc;CACrC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,gEAAgE;CAC1F,OAAO;AACT;AAEA,SAAgB,4BAAwD;CACtE,OAAO,WAAW,cAAc;AAClC"}

package/dist/dev/ui/tooltip/group-context.js

@@ -1,7 +1,4 @@
-'use client';
-
 import { createContext, useContext } from "react";
-
 //#region src/ui/tooltip/group-context.tsx
 const TooltipGroupContext = createContext(null);
 const TooltipGroupContextProvider = TooltipGroupContext.Provider;
@@ -9,7 +6,7 @@ const TooltipGroupContextProvider = TooltipGroupContext.Provider;
 function useTooltipGroup() {
 	return useContext(TooltipGroupContext)?.group;
 }
-
 //#endregion
 export { TooltipGroupContextProvider, useTooltipGroup };
+
 //# sourceMappingURL=group-context.js.map

package/dist/dev/ui/tooltip/group-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"group-context.js","names":[],"sources":["../../../../src/ui/tooltip/group-context.tsx"],"sourcesContent":["'use client';\n\nimport type { TooltipGroupCore } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\ninterface TooltipGroupContextValue {\n  group: TooltipGroupCore;\n}\n\nconst TooltipGroupContext = createContext<TooltipGroupContextValue | null>(null);\n\nexport const TooltipGroupContextProvider = TooltipGroupContext.Provider;\n\n/** Returns the nearest `TooltipGroupCore`, or `undefined` when used outside a `Tooltip.Provider`. */\nexport function useTooltipGroup(): TooltipGroupCore | undefined {\n  return useContext(TooltipGroupContext)?.group;\n}\n"],"mappings":";;;;;AASA,MAAM,sBAAsB,cAA+C,KAAK;AAEhF,MAAa,8BAA8B,oBAAoB;;AAG/D,SAAgB,kBAAgD;AAC9D,QAAO,WAAW,oBAAoB,EAAE"}
+{"version":3,"file":"group-context.js","names":[],"sources":["../../../../src/ui/tooltip/group-context.tsx"],"sourcesContent":["import type { TooltipGroupCore } from '@videojs/core';\nimport { createContext, useContext } from 'react';\n\ninterface TooltipGroupContextValue {\n  group: TooltipGroupCore;\n}\n\nconst TooltipGroupContext = createContext<TooltipGroupContextValue | null>(null);\n\nexport const TooltipGroupContextProvider = TooltipGroupContext.Provider;\n\n/** Returns the nearest `TooltipGroupCore`, or `undefined` when used outside a `Tooltip.Provider`. */\nexport function useTooltipGroup(): TooltipGroupCore | undefined {\n  return useContext(TooltipGroupContext)?.group;\n}\n"],"mappings":";;AAOA,MAAM,sBAAsB,cAA+C,IAAI;AAE/E,MAAa,8BAA8B,oBAAoB;;AAG/D,SAAgB,kBAAgD;CAC9D,OAAO,WAAW,mBAAmB,CAAC,EAAE;AAC1C"}

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

@@ -1,3 +1,3 @@
-import { TooltipContextValue, useTooltipContext } from "./context.js";
+import { TooltipContent, TooltipContextValue, useOptionalTooltipContext, useTooltipContext } from "./context.js";
 import { index_parts_d_exports } from "./index.parts.js";
-export { index_parts_d_exports as Tooltip, type TooltipContextValue, useTooltipContext };
+export { index_parts_d_exports as Tooltip, type TooltipContent, type TooltipContextValue, useOptionalTooltipContext, useTooltipContext };

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

@@ -1,4 +1,3 @@
-import { useTooltipContext } from "./context.js";
+import { useOptionalTooltipContext, useTooltipContext } from "./context.js";
 import { index_parts_exports } from "./index.parts.js";
-
-export { index_parts_exports as Tooltip, useTooltipContext };
+export { index_parts_exports as Tooltip, useOptionalTooltipContext, useTooltipContext };

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

@@ -1,13 +1,13 @@
 import { TooltipArrow, TooltipArrowProps } from "./tooltip-arrow.js";
+import { TooltipLabel, TooltipLabelProps } from "./tooltip-label.js";
 import { TooltipPopup, TooltipPopupProps } from "./tooltip-popup.js";
 import { TooltipProvider, TooltipProviderProps } from "./tooltip-provider.js";
 import { TooltipRoot, TooltipRootProps } from "./tooltip-root.js";
+import { TooltipShortcut, TooltipShortcutProps } from "./tooltip-shortcut.js";
 import { TooltipTrigger, TooltipTriggerProps } from "./tooltip-trigger.js";
-
-//#region src/ui/tooltip/index.parts.d.ts
 declare namespace index_parts_d_exports {
-  export { TooltipArrow as Arrow, TooltipArrowProps as ArrowProps, TooltipPopup as Popup, TooltipPopupProps as PopupProps, TooltipProvider as Provider, TooltipProviderProps as ProviderProps, TooltipRoot as Root, TooltipRootProps as RootProps, TooltipTrigger as Trigger, TooltipTriggerProps as TriggerProps };
+  export { TooltipArrow as Arrow, TooltipArrowProps as ArrowProps, TooltipLabel as Label, TooltipLabelProps as LabelProps, TooltipPopup as Popup, TooltipPopupProps as PopupProps, TooltipProvider as Provider, TooltipProviderProps as ProviderProps, TooltipRoot as Root, TooltipRootProps as RootProps, TooltipShortcut as Shortcut, TooltipShortcutProps as ShortcutProps, TooltipTrigger as Trigger, TooltipTriggerProps as TriggerProps };
 }
 //#endregion
-export { index_parts_d_exports };
+export { TooltipArrow as Arrow, type TooltipArrowProps as ArrowProps, TooltipLabel as Label, type TooltipLabelProps as LabelProps, TooltipPopup as Popup, type TooltipPopupProps as PopupProps, TooltipProvider as Provider, type TooltipProviderProps as ProviderProps, TooltipRoot as Root, type TooltipRootProps as RootProps, TooltipShortcut as Shortcut, type TooltipShortcutProps as ShortcutProps, TooltipTrigger as Trigger, type TooltipTriggerProps as TriggerProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

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

@@ -1,19 +1,22 @@
 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";
 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
-export { index_parts_exports };
+export { TooltipArrow as Arrow, TooltipLabel as Label, TooltipPopup as Popup, TooltipProvider as Provider, TooltipRoot as Root, TooltipShortcut as Shortcut, TooltipTrigger as Trigger, index_parts_exports };
+
 //# sourceMappingURL=index.parts.js.map

package/dist/dev/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/dev/ui/tooltip/tooltip-arrow.d.ts

@@ -1,11 +1,9 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as react from "react";
 import { TooltipState } from "@videojs/core";
-
 //#region src/ui/tooltip/tooltip-arrow.d.ts
 interface TooltipArrowProps extends UIComponentProps<'div', TooltipState> {}
 /** Decorative arrow pointing from the tooltip toward the trigger. Hidden from assistive technology. */
-declare const TooltipArrow: react.ForwardRefExoticComponent<TooltipArrowProps>;
+declare const TooltipArrow: import("react").ForwardRefExoticComponent<TooltipArrowProps>;
 declare namespace TooltipArrow {
   type Props = TooltipArrowProps;
   type State = TooltipState;

package/dist/dev/ui/tooltip/tooltip-arrow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip-arrow.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-arrow.tsx"],"mappings":";;;;;UAQiB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAGtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,iBAAA;AAAA,kBAOR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}
+{"version":3,"file":"tooltip-arrow.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-arrow.tsx"],"mappings":";;;UAMiB,0BAA0B,wBAAwB;;cAGtD,8BAAY,0BAAA;kBAOR;OACH,QAAQ;OACR,QAAQ"}

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

@@ -1,8 +1,5 @@
-'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({
@@ -11,7 +8,7 @@ const TooltipArrow = createContextPart({
 	useContext: useTooltipContext,
 	staticProps: { "aria-hidden": "true" }
 });
-
 //#endregion
 export { TooltipArrow };
+
 //# sourceMappingURL=tooltip-arrow.js.map

package/dist/dev/ui/tooltip/tooltip-arrow.js.map

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

package/dist/dev/ui/tooltip/tooltip-label.d.ts

@@ -0,0 +1,13 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { TooltipState } from "@videojs/core";
+//#region src/ui/tooltip/tooltip-label.d.ts
+interface TooltipLabelProps extends UIComponentProps<'span', TooltipState> {}
+/** Tooltip body label; defaults to context `content.label` from the linked trigger. */
+declare const TooltipLabel: import("react").ForwardRefExoticComponent<Omit<TooltipLabelProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare namespace TooltipLabel {
+  type Props = TooltipLabelProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipLabel, TooltipLabelProps };
+//# sourceMappingURL=tooltip-label.d.ts.map

package/dist/dev/ui/tooltip/tooltip-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-label.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-label.tsx"],"mappings":";;;UAOiB,0BAA0B,yBAAyB;;cAGvD,8BAAY,0BAAA,KAAA,4CAAA,cAAA;kBAmBR;OACH,QAAQ;OACR,QAAQ"}