@videojs/react 0.1.0-preview.9 → 10.0.0-alpha.11

package/dist/dev/ui/time/time-group.js

@@ -0,0 +1,34 @@
+'use client';
+
+import { renderElement } from "../../utils/use-render.js";
+import { forwardRef } from "react";
+
+//#region src/ui/time/time-group.tsx
+/**
+* Container for composed time displays. Renders a `<span>` element.
+*
+* @example
+* ```tsx
+* <Time.Group>
+*   <Time.Value type="current" />
+*   <Time.Separator />
+*   <Time.Value type="duration" />
+* </Time.Group>
+* ```
+*/
+const Group = forwardRef(function Group(componentProps, forwardedRef) {
+	const { render, className, style, children, ...elementProps } = componentProps;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state: {},
+		ref: [forwardedRef],
+		props: [{ children }, elementProps]
+	});
+});
+
+//#endregion
+export { Group };
+//# sourceMappingURL=time-group.js.map

package/dist/dev/ui/time/time-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-group.js","names":[],"sources":["../../../../src/ui/time/time-group.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Group (no dynamic state)\ntype GroupState = Record<string, never>;\n\nexport interface GroupProps extends UIComponentProps<'span', GroupState> {\n  /** Time value components to render inside the group. */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Container for composed time displays. Renders a `<span>` element.\n *\n * @example\n * ```tsx\n * <Time.Group>\n *   <Time.Value type=\"current\" />\n *   <Time.Separator />\n *   <Time.Value type=\"duration\" />\n * </Time.Group>\n * ```\n */\nexport const Group = forwardRef(function Group(\n  componentProps: GroupProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children, ...elementProps } = componentProps;\n\n  const state: GroupState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ children }, elementProps],\n    }\n  );\n});\n\nexport namespace Group {\n  export type Props = GroupProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA4BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,UAAU,GAAG,iBAAiB;AAIhE,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OANsB,EAAE;EAOxB,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC,EAAE,UAAU,EAAE,aAAa;EACpC,CACF;EACD"}

package/dist/dev/ui/time/time-separator.d.ts

@@ -0,0 +1,26 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { ReactNode } from "react";
+
+//#region src/ui/time/time-separator.d.ts
+type SeparatorState = Record<string, never>;
+interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {
+  /** Separator content. Defaults to "/". */
+  children?: ReactNode | undefined;
+}
+/**
+ * Divider between time values. Hidden from screen readers.
+ *
+ * @example
+ * ```tsx
+ * <Time.Separator />
+ * <Time.Separator> of </Time.Separator>
+ * ```
+ */
+declare const Separator: react.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+declare namespace Separator {
+  type Props = SeparatorProps;
+}
+//#endregion
+export { Separator, SeparatorProps };
+//# sourceMappingURL=time-separator.d.ts.map

package/dist/dev/ui/time/time-separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-separator.d.ts","names":[],"sources":["../../../../src/ui/time/time-separator.tsx"],"mappings":";;;;;KASK,cAAA,GAAiB,MAAA;AAAA,UAEL,cAAA,SAAuB,gBAAA,SAAyB,cAAA;;EAE/D,QAAA,GAAW,SAAA;AAAA;;;;AAFb;;;;;;cAca,SAAA,EAAS,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,cAAA,WAAA,KAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBAmBL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;AAAA"}

package/dist/dev/ui/time/time-separator.js

@@ -0,0 +1,34 @@
+'use client';
+
+import { renderElement } from "../../utils/use-render.js";
+import { forwardRef } from "react";
+
+//#region src/ui/time/time-separator.tsx
+/**
+* Divider between time values. Hidden from screen readers.
+*
+* @example
+* ```tsx
+* <Time.Separator />
+* <Time.Separator> of </Time.Separator>
+* ```
+*/
+const Separator = forwardRef(function Separator(componentProps, forwardedRef) {
+	const { render, className, style, children = "/", ...elementProps } = componentProps;
+	return renderElement("span", {
+		render,
+		className,
+		style
+	}, {
+		state: {},
+		ref: [forwardedRef],
+		props: [{
+			"aria-hidden": "true",
+			children
+		}, elementProps]
+	});
+});
+
+//#endregion
+export { Separator };
+//# sourceMappingURL=time-separator.js.map

package/dist/dev/ui/time/time-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-separator.js","names":[],"sources":["../../../../src/ui/time/time-separator.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardedRef, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\n// Empty state for Separator (no dynamic state)\ntype SeparatorState = Record<string, never>;\n\nexport interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {\n  /** Separator content. Defaults to \"/\". */\n  children?: ReactNode | undefined;\n}\n\n/**\n * Divider between time values. Hidden from screen readers.\n *\n * @example\n * ```tsx\n * <Time.Separator />\n * <Time.Separator> of </Time.Separator>\n * ```\n */\nexport const Separator = forwardRef(function Separator(\n  componentProps: SeparatorProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, children = '/', ...elementProps } = componentProps;\n\n  const state: SeparatorState = {};\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: [forwardedRef],\n      props: [{ 'aria-hidden': 'true', children }, elementProps],\n    }\n  );\n});\n\nexport namespace Separator {\n  export type Props = SeparatorProps;\n}\n"],"mappings":";;;;;;;;;;;;;;;AAyBA,MAAa,YAAY,WAAW,SAAS,UAC3C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,WAAW,KAAK,GAAG,iBAAiB;AAItE,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAN0B,EAAE;EAO5B,KAAK,CAAC,aAAa;EACnB,OAAO,CAAC;GAAE,eAAe;GAAQ;GAAU,EAAE,aAAa;EAC3D,CACF;EACD"}

package/dist/dev/ui/time/time-value.d.ts

@@ -0,0 +1,24 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { TimeCore } from "@videojs/core";
+
+//#region src/ui/time/time-value.d.ts
+interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}
+/**
+ * Displays a formatted time value (current, duration, or remaining).
+ *
+ * @example
+ * ```tsx
+ * <Time.Value />
+ * <Time.Value type="duration" />
+ * <Time.Value type="remaining" negativeSign="−" />
+ * ```
+ */
+declare const Value: react.ForwardRefExoticComponent<Omit<ValueProps, "ref"> & react.RefAttributes<HTMLTimeElement>>;
+declare namespace Value {
+  type Props = ValueProps;
+  type State = TimeCore.State;
+}
+//#endregion
+export { Value, ValueProps };
+//# sourceMappingURL=time-value.d.ts.map

package/dist/dev/ui/time/time-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-value.d.ts","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"mappings":";;;;;UAWiB,UAAA,SAAmB,IAAA,CAAK,gBAAA,SAAyB,QAAA,CAAS,KAAA,gBAAqB,QAAA,CAAS,KAAA;;AAAzG;;;;;;;;;cAYa,KAAA,EAAK,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,UAAA,WAAA,KAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBA+CD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;EAAA,KACR,KAAA,GAAQ,QAAA,CAAS,KAAA;AAAA"}

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

@@ -0,0 +1,58 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { logMissingFeature, selectTime } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { TimeCore, TimeDataAttrs } from "@videojs/core";
+
+//#region src/ui/time/time-value.tsx
+/**
+* Displays a formatted time value (current, duration, or remaining).
+*
+* @example
+* ```tsx
+* <Time.Value />
+* <Time.Value type="duration" />
+* <Time.Value type="remaining" negativeSign="−" />
+* ```
+*/
+const Value = forwardRef(function Value(componentProps, forwardedRef) {
+	const { render, className, style, type, negativeSign, label, ...elementProps } = componentProps;
+	const time = usePlayer(selectTime);
+	const [core] = useState(() => new TimeCore());
+	core.setProps({
+		type,
+		negativeSign,
+		label
+	});
+	if (!time) {
+		logMissingFeature("Time.Value", "time");
+		return null;
+	}
+	core.setMedia(time);
+	const state = core.getState();
+	const content = state.negative ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		children: negativeSign ?? TimeCore.defaultProps.negativeSign
+	}), state.text] }) : state.text;
+	return renderElement("time", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: TimeDataAttrs,
+		ref: [forwardedRef],
+		props: [{
+			dateTime: state.datetime,
+			children: content,
+			...core.getAttrs(state)
+		}, elementProps]
+	});
+});
+
+//#endregion
+export { Value };
+//# sourceMappingURL=time-value.js.map

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

@@ -0,0 +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,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,MAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,UAAU;CAE7B,MAAM,UAAU,MAAM,WACpB,4CACE,oBAAC;EAAK,eAAY;YAAQ,gBAAgB,SAAS,aAAa;GAAoB,EACnF,MAAM,QACN,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"}

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

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

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

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

package/dist/dev/ui/time-slider/index.parts.d.ts

@@ -0,0 +1,15 @@
+import { SliderBuffer, SliderBufferProps } from "../slider/slider-buffer.js";
+import { SliderFill, SliderFillProps } from "../slider/slider-fill.js";
+import { SliderPreview, SliderPreviewProps } from "../slider/slider-preview.js";
+import { SliderThumb, SliderThumbProps } from "../slider/slider-thumb.js";
+import { SliderTrack, SliderTrackProps } from "../slider/slider-track.js";
+import { SliderValue, SliderValueProps } from "../slider/slider-value.js";
+import { TimeSliderRoot, TimeSliderRootProps } from "./time-slider-root.js";
+
+//#region src/ui/time-slider/index.parts.d.ts
+declare namespace index_parts_d_exports {
+  export { SliderBuffer as Buffer, SliderBufferProps as BufferProps, SliderFill as Fill, SliderFillProps as FillProps, SliderPreview as Preview, SliderPreviewProps as PreviewProps, TimeSliderRoot as Root, TimeSliderRootProps as RootProps, SliderThumb as Thumb, SliderThumbProps as ThumbProps, SliderTrack as Track, SliderTrackProps as TrackProps, SliderValue as Value, SliderValueProps as ValueProps };
+}
+//#endregion
+export { index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

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

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

package/dist/dev/ui/time-slider/index.parts.js

@@ -0,0 +1,23 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { SliderBuffer } from "../slider/slider-buffer.js";
+import { SliderFill } from "../slider/slider-fill.js";
+import { SliderPreview } from "../slider/slider-preview.js";
+import { SliderThumb } from "../slider/slider-thumb.js";
+import { SliderTrack } from "../slider/slider-track.js";
+import { SliderValue } from "../slider/slider-value.js";
+import { TimeSliderRoot } from "./time-slider-root.js";
+
+//#region src/ui/time-slider/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Buffer: () => SliderBuffer,
+	Fill: () => SliderFill,
+	Preview: () => SliderPreview,
+	Root: () => TimeSliderRoot,
+	Thumb: () => SliderThumb,
+	Track: () => SliderTrack,
+	Value: () => SliderValue
+});
+
+//#endregion
+export { index_parts_exports };
+//# sourceMappingURL=index.parts.js.map

package/dist/dev/ui/time-slider/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/time-slider/index.parts.ts"],"sourcesContent":["export {\n  Buffer,\n  type BufferProps,\n  Fill,\n  type FillProps,\n  Preview,\n  type PreviewProps,\n  Thumb,\n  type ThumbProps,\n  Track,\n  type TrackProps,\n  Value,\n  type ValueProps,\n} from '../slider/index.parts';\nexport { TimeSliderRoot as Root, type TimeSliderRootProps as RootProps } from './time-slider-root';\n"],"mappings":""}

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

@@ -0,0 +1,17 @@
+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 namespace TimeSliderRoot {
+  type Props = TimeSliderRootProps;
+  type State = TimeSliderCore.State;
+}
+//#endregion
+export { TimeSliderRoot, TimeSliderRootProps };
+//# sourceMappingURL=time-slider-root.d.ts.map

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

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

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

@@ -0,0 +1,102 @@
+'use client';
+
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useLatestRef } from "../../utils/use-latest-ref.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 { 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 time = usePlayer(selectTime);
+	const buffer = usePlayer(selectBuffer);
+	const [core] = useState(() => new TimeSliderCore());
+	core.setProps({
+		label,
+		step,
+		largeStep,
+		orientation,
+		disabled,
+		thumbAlignment
+	});
+	const mediaRef = useLatestRef(time && buffer ? {
+		...time,
+		...buffer
+	} : null);
+	const duration = time?.duration ?? 0;
+	const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
+		computeState: (input) => {
+			core.setInput(input);
+			if (!time || !buffer) core.setMedia({
+				currentTime: 0,
+				duration: 0,
+				seeking: false,
+				seek: noopSeek,
+				buffered: [],
+				seekable: []
+			});
+			else core.setMedia({
+				...time,
+				...buffer
+			});
+			return core.getState();
+		},
+		getPercent: () => duration > 0 ? (time?.currentTime ?? 0) / duration * 100 : 0,
+		getStepPercent: () => core.getStepPercent(),
+		getLargeStepPercent: () => core.getLargeStepPercent(),
+		orientation,
+		disabled,
+		commitThrottle,
+		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
+		getCSSVars: getTimeSliderCSSVars,
+		onValueCommit: (percent) => {
+			const media = mediaRef.current;
+			if (media) media.seek(core.valueFromPercent(percent));
+		},
+		onDragStart,
+		onDragEnd
+	});
+	if (!time) {
+		logMissingFeature("TimeSlider", "time");
+		return null;
+	}
+	return /* @__PURE__ */ jsx(SliderProvider, {
+		value: {
+			state,
+			pointerValue: core.valueFromPercent(state.pointerPercent),
+			thumbRef,
+			thumbProps,
+			stateAttrMap: TimeSliderDataAttrs,
+			getAttrs: (sliderState) => core.getAttrs(sliderState),
+			formatValue: (value) => formatTime(value, duration)
+		},
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: TimeSliderDataAttrs,
+			ref: [forwardedRef, rootRef],
+			props: [
+				{ style: {
+					...cssVars,
+					...rootStyle
+				} },
+				rootProps,
+				elementProps
+			]
+		})
+	});
+});
+
+//#endregion
+export { TimeSliderRoot };
+//# sourceMappingURL=time-slider-root.js.map

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

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

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

@@ -0,0 +1,16 @@
+import { TooltipApi } from "@videojs/core/dom";
+import { StateAttrMap as StateAttrMap$1, TooltipCore } from "@videojs/core";
+
+//#region src/ui/tooltip/context.d.ts
+interface TooltipContextValue {
+  core: TooltipCore;
+  tooltip: TooltipApi;
+  state: TooltipCore.State;
+  stateAttrMap: StateAttrMap$1<TooltipCore.State>;
+  anchorName: string;
+  popupId: string;
+}
+declare function useTooltipContext(): TooltipContextValue;
+//#endregion
+export { TooltipContextValue, useTooltipContext };
+//# sourceMappingURL=context.d.ts.map

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

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

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

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

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

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

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

@@ -0,0 +1,15 @@
+'use client';
+
+import { createContext, useContext } from "react";
+
+//#region src/ui/tooltip/group-context.tsx
+const TooltipGroupContext = createContext(null);
+const TooltipGroupContextProvider = TooltipGroupContext.Provider;
+/** Returns the nearest `TooltipGroupCore`, or `undefined` when used outside a `Tooltip.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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import { TooltipArrow, TooltipArrowProps } from "./tooltip-arrow.js";
+import { TooltipPopup, TooltipPopupProps } from "./tooltip-popup.js";
+import { TooltipProvider, TooltipProviderProps } from "./tooltip-provider.js";
+import { TooltipRoot, TooltipRootProps } from "./tooltip-root.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 };
+}
+//#endregion
+export { index_parts_d_exports };
+//# sourceMappingURL=index.parts.d.ts.map

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

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

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

@@ -0,0 +1,19 @@
+import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
+import { TooltipArrow } from "./tooltip-arrow.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,
+	Popup: () => TooltipPopup,
+	Provider: () => TooltipProvider,
+	Root: () => TooltipRoot,
+	Trigger: () => TooltipTrigger
+});
+
+//#endregion
+export { index_parts_exports };
+//# sourceMappingURL=index.parts.js.map

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

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

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

@@ -0,0 +1,15 @@
+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 namespace TooltipArrow {
+  type Props = TooltipArrowProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipArrow, TooltipArrowProps };
+//# sourceMappingURL=tooltip-arrow.d.ts.map

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

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

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

@@ -0,0 +1,17 @@
+'use client';
+
+import { createContextPart } from "../create-context-part.js";
+import { useTooltipContext } from "./context.js";
+
+//#region src/ui/tooltip/tooltip-arrow.tsx
+/** Decorative arrow pointing from the tooltip toward the trigger. Hidden from assistive technology. */
+const TooltipArrow = createContextPart({
+	displayName: "TooltipArrow",
+	tag: "div",
+	useContext: useTooltipContext,
+	staticProps: { "aria-hidden": "true" }
+});
+
+//#endregion
+export { TooltipArrow };
+//# sourceMappingURL=tooltip-arrow.js.map

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

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

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

@@ -0,0 +1,15 @@
+import { UIComponentProps } from "../../utils/types.js";
+import * as react from "react";
+import { TooltipState } from "@videojs/core";
+
+//#region src/ui/tooltip/tooltip-popup.d.ts
+interface TooltipPopupProps extends UIComponentProps<'div', TooltipState> {}
+/** Container for the tooltip content. Positioned relative to the trigger using CSS anchor positioning with a JavaScript fallback. */
+declare const TooltipPopup: react.ForwardRefExoticComponent<Omit<TooltipPopupProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare namespace TooltipPopup {
+  type Props = TooltipPopupProps;
+  type State = TooltipState;
+}
+//#endregion
+export { TooltipPopup, TooltipPopupProps };
+//# sourceMappingURL=tooltip-popup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-popup.d.ts","names":[],"sources":["../../../../src/ui/tooltip/tooltip-popup.tsx"],"mappings":";;;;;UAciB,iBAAA,SAA0B,gBAAA,QAAwB,YAAA;;cAKtD,YAAA,EAAY,KAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,iBAAA,WAAA,KAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBA6HR,YAAA;EAAA,KACH,KAAA,GAAQ,iBAAA;EAAA,KACR,KAAA,GAAQ,YAAA;AAAA"}