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

package/dist/dev/ui/poster/root.d.ts

@@ -0,0 +1,18 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { PosterCore } from "@videojs/core";
+//#region src/ui/poster/root.d.ts
+interface PosterRootProps extends UIComponentProps<'div', PosterCore.State> {}
+/**
+ * Manages poster visibility and image loading state.
+ *
+ * Renders a `div` and exposes `data-visible`, `data-loading`, `data-loaded`, and `data-error` for styling every layer
+ * in the poster presentation. Render `Poster.Image` inside it for the image that supplies the loading lifecycle.
+ */
+declare const PosterRoot: import("react").ForwardRefExoticComponent<Omit<PosterRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace PosterRoot {
+  type Props = PosterRootProps;
+  type State = PosterCore.State;
+}
+//#endregion
+export { PosterRoot, PosterRootProps };
+//# sourceMappingURL=root.d.ts.map

package/dist/dev/ui/poster/root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","names":[],"sources":["../../../../src/ui/poster/root.tsx"],"mappings":";;;UAUiB,wBAAwB,wBAAwB,WAAW;;;;;;;cAQ/D,4BAAU,0BAAA,KAAA,0CAAA,cAAA;kBAgDN;OACH,QAAQ;OACR,QAAQ,WAAW"}

package/dist/dev/ui/poster/root.js

@@ -0,0 +1,51 @@
+import { usePlayer } from "../../player/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { PosterProvider } from "./context.js";
+import { PosterCore, PosterDataAttrs } from "@videojs/core";
+import { logMissingFeature, selectMetadata, selectPlayback } from "@videojs/core/dom";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/poster/root.tsx
+/**
+* Manages poster visibility and image loading state.
+*
+* Renders a `div` and exposes `data-visible`, `data-loading`, `data-loaded`, and `data-error` for styling every layer
+* in the poster presentation. Render `Poster.Image` inside it for the image that supplies the loading lifecycle.
+*/
+const PosterRoot = forwardRef(function PosterRoot(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const playback = usePlayer(selectPlayback);
+	const metadata = usePlayer(selectMetadata);
+	const [core] = useState(() => new PosterCore());
+	const [reportedLoadState, setImageLoadState] = useState(null);
+	if (!playback) {
+		logMissingFeature("Poster.Root", "playback");
+		return null;
+	}
+	core.setMedia({
+		started: playback.started,
+		poster: metadata?.poster ?? ""
+	});
+	core.setImageLoadState(reportedLoadState ?? (metadata?.poster ? "loading" : "none"));
+	const state = core.getState();
+	return /* @__PURE__ */ jsx(PosterProvider, {
+		value: {
+			state,
+			setImageLoadState
+		},
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: PosterDataAttrs,
+			ref: forwardedRef,
+			props: elementProps
+		})
+	});
+});
+//#endregion
+export { PosterRoot };
+
+//# sourceMappingURL=root.js.map

package/dist/dev/ui/poster/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/poster/root.tsx"],"sourcesContent":["import { PosterCore, PosterDataAttrs, type PosterImageLoadState } from '@videojs/core';\nimport { logMissingFeature, selectMetadata, selectPlayback } 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';\nimport { PosterProvider } from './context';\n\nexport interface PosterRootProps extends UIComponentProps<'div', PosterCore.State> {}\n\n/**\n * Manages poster visibility and image loading state.\n *\n * Renders a `div` and exposes `data-visible`, `data-loading`, `data-loaded`, and `data-error` for styling every layer\n * in the poster presentation. Render `Poster.Image` inside it for the image that supplies the loading lifecycle.\n */\nexport const PosterRoot = forwardRef(function PosterRoot(\n  componentProps: PosterRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n  const metadata = usePlayer(selectMetadata);\n\n  const [core] = useState(() => new PosterCore());\n  const [reportedLoadState, setImageLoadState] = useState<PosterImageLoadState | null>(null);\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('Poster.Root', 'playback');\n\n    return null;\n  }\n\n  // The metadata feature is optional: without it nothing resolves a URL, and\n  // this stays a visibility wrapper around whatever source the image supplies.\n  core.setMedia({\n    started: playback.started,\n    poster: metadata?.poster ?? '',\n  });\n\n  // Until the image reports, a resolved poster is on its way. Server markup then\n  // already carries `data-loading`, and hydration lands on the state the image\n  // reports first rather than flashing the layers keyed off that attribute.\n  core.setImageLoadState(reportedLoadState ?? (metadata?.poster ? 'loading' : 'none'));\n\n  const state = core.getState();\n\n  return (\n    <PosterProvider value={{ state, setImageLoadState }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: PosterDataAttrs,\n          ref: forwardedRef,\n          props: elementProps,\n        }\n      )}\n    </PosterProvider>\n  );\n});\n\nexport namespace PosterRoot {\n  export type Props = PosterRootProps;\n  export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;CAC9C,MAAM,CAAC,mBAAmB,qBAAqB,SAAsC,IAAI;CAEzF,IAAI,CAAC,UAAU;EACA,kBAAkB,eAAe,UAAU;EAExD,OAAO;CACT;CAIA,KAAK,SAAS;EACZ,SAAS,SAAS;EAClB,QAAQ,UAAU,UAAU;CAC9B,CAAC;CAKD,KAAK,kBAAkB,sBAAsB,UAAU,SAAS,YAAY,OAAO;CAEnF,MAAM,QAAQ,KAAK,SAAS;CAE5B,OACE,oBAAC,gBAAD;EAAgB,OAAO;GAAE;GAAO;EAAkB;EAC/C,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK;GACL,OAAO;EACT,CACF;CACc,CAAA;AAEpB,CAAC"}

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

@@ -0,0 +1,48 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuRadioItemProps } from "../menu/radio-item.js";
+import { QualityOption, QualityOptionsProps, QualityOptionsResult } from "../quality/use-quality-options.js";
+import "../quality/index.js";
+import { QualityRadioGroupCore } from "@videojs/core";
+import { ReactElement, ReactNode } from "react";
+//#region src/ui/quality-radio-group/component.d.ts
+type QualityRadioGroupItemState = QualityOption & {
+  /** Whether this quality option is currently selected. */
+  checked: boolean;
+};
+interface QualityRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {
+  /** Rendition value represented by the item. */
+  'data-rendition': string;
+}
+interface QualityRadioGroupRootProps extends QualityOptionsProps {
+  children?: ReactNode;
+}
+interface QualityRadioGroupOptionsProps extends Omit<UIComponentProps<'div', QualityRadioGroupCore.State>, 'children'> {
+  /** Render one consumer-owned menu radio item for every quality option. */
+  renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;
+}
+type QualityRadioGroupValueProps = UIComponentProps<'span', QualityOptionsResult>;
+interface QualityRadioGroupLegacyProps extends QualityRadioGroupOptionsProps, QualityOptionsProps {}
+/** Owns quality option state and shares it with an enclosing menu. Does not render a DOM element. */
+declare function QualityRadioGroupRoot({ children, ...props }: QualityRadioGroupRootProps): ReactNode;
+/** Displays the selected quality label. */
+declare const QualityRadioGroupValue: import("react").ForwardRefExoticComponent<Omit<QualityRadioGroupValueProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+/** Renders menu radio items for the player's video renditions. */
+declare const QualityRadioGroupOptions: import("react").ForwardRefExoticComponent<Omit<QualityRadioGroupOptionsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+/** @internal Compatibility adapter for the existing preset sources. */
+declare const QualityRadioGroupLegacy: import("react").ForwardRefExoticComponent<Omit<QualityRadioGroupLegacyProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace QualityRadioGroupRoot {
+  type Props = QualityRadioGroupRootProps;
+}
+declare namespace QualityRadioGroupValue {
+  type Props = QualityRadioGroupValueProps;
+  type State = QualityOptionsResult;
+}
+declare namespace QualityRadioGroupOptions {
+  type Props = QualityRadioGroupOptionsProps;
+  type State = QualityRadioGroupCore.State;
+  type ItemProps = QualityRadioGroupItemProps;
+  type ItemState = QualityRadioGroupItemState;
+}
+//#endregion
+export { QualityRadioGroupItemProps, QualityRadioGroupItemState, QualityRadioGroupLegacy, QualityRadioGroupLegacyProps, QualityRadioGroupOptions, QualityRadioGroupOptionsProps, QualityRadioGroupRoot, QualityRadioGroupRootProps, QualityRadioGroupValue, QualityRadioGroupValueProps };
+//# sourceMappingURL=component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.d.ts","names":[],"sources":["../../../../src/ui/quality-radio-group/component.tsx"],"mappings":";;;;;;;KAaY,6BAA6B;;EAEvC;;UAGe,mCAAmC,KAAK;;EAEvD;;UAGe,mCAAmC;EAClD,WAAW;;UAGI,sCAAsC,KACrD,wBAAwB,sBAAsB;;EAI9C,aAAa,OAAO,4BAA4B,OAAO,+BAA+B;;KAG5E,8BAA8B,yBAAyB;UAElD,qCAAqC,+BAA+B;;iBAKrE,wBAAwB,aAAa,SAAS,6BAA6B;;cAS9E,wCAAsB,0BAAA,KAAA,sDAAA,cAAA;;cActB,0CAAwB,0BAAA,KAAA,wDAAA,cAAA;;cAuDxB,yCAAuB,0BAAA,KAAA,uDAAA,cAAA;kBA0BnB;OACH,QAAQ;;kBAGL;OACH,QAAQ;OACR,QAAQ;;kBAGL;OACH,QAAQ;OACR,QAAQ,sBAAsB;OAC9B,YAAY;OACZ,YAAY"}

package/dist/dev/ui/quality-radio-group/component.js

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

package/dist/dev/ui/quality-radio-group/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/quality-radio-group/component.tsx"],"sourcesContent":["import { type MenuOptionState, type QualityRadioGroupCore, QualityRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement, ReactNode } from 'react';\nimport { createContext, Fragment, forwardRef, useContext } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useMenuOptionState } from '../menu/context';\nimport { MenuRadioGroup } from '../menu/radio-group';\nimport type { MenuRadioItemProps } from '../menu/radio-item';\nimport { type QualityOption, type QualityOptionsProps, type QualityOptionsResult, useQualityOptions } from '../quality';\n\nexport type QualityRadioGroupItemState = QualityOption & {\n  /** Whether this quality option is currently selected. */\n  checked: boolean;\n};\n\nexport interface QualityRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n  /** Rendition value represented by the item. */\n  'data-rendition': string;\n}\n\nexport interface QualityRadioGroupRootProps extends QualityOptionsProps {\n  children?: ReactNode;\n}\n\nexport interface QualityRadioGroupOptionsProps extends Omit<\n  UIComponentProps<'div', QualityRadioGroupCore.State>,\n  'children'\n> {\n  /** Render one consumer-owned menu radio item for every quality option. */\n  renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;\n}\n\nexport type QualityRadioGroupValueProps = UIComponentProps<'span', QualityOptionsResult>;\n\nexport interface QualityRadioGroupLegacyProps extends QualityRadioGroupOptionsProps, QualityOptionsProps {}\n\nconst QualityRadioGroupContext = createContext<QualityOptionsResult | null | undefined>(undefined);\n\n/** Owns quality option state and shares it with an enclosing menu. Does not render a DOM element. */\nexport function QualityRadioGroupRoot({ children, ...props }: QualityRadioGroupRootProps): ReactNode {\n  const quality = useQualityOptions(props);\n\n  useMenuOptionState(toMenuOptionState(quality));\n\n  return <QualityRadioGroupContext.Provider value={quality}>{children}</QualityRadioGroupContext.Provider>;\n}\n\n/** Displays the selected quality label. */\nexport const QualityRadioGroupValue = forwardRef<HTMLSpanElement, QualityRadioGroupValueProps>(\n  function QualityRadioGroupValue({ render, className, style, ...elementProps }, forwardedRef) {\n    const quality = useQualityRadioGroupContext();\n    if (!quality) return null;\n\n    return renderElement(\n      'span',\n      { render, className, style },\n      { state: quality, ref: forwardedRef, props: [elementProps, { children: quality.selectedLabel }] }\n    );\n  }\n);\n\n/** Renders menu radio items for the player's video renditions. */\nexport const QualityRadioGroupOptions = forwardRef<HTMLDivElement, QualityRadioGroupOptionsProps>(\n  function QualityRadioGroupOptions(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const quality = useQualityRadioGroupContext();\n    if (!quality) return null;\n\n    const { state, value, options, setValue } = quality;\n    const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? quality.label : undefined);\n\n    return (\n      <MenuRadioGroup\n        {...getStateDataAttrs(state, QualityRadioGroupDataAttrs)}\n        {...elementProps}\n        ref={forwardedRef}\n        className={isFunction(className) ? className(state) : className}\n        style={isFunction(style) ? style(state) : style}\n        render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n        value={value}\n        onValueChange={setValue}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-disabled={state.disabled || undefined}\n        hidden={state.hidden}\n      >\n        {options.map((option) => {\n          const itemState = { ...option, checked: option.value === value };\n\n          return (\n            <Fragment key={option.value}>\n              {renderItem(\n                {\n                  value: option.value,\n                  disabled: option.disabled,\n                  'data-rendition': option.value,\n                  children: option.label,\n                },\n                itemState\n              )}\n            </Fragment>\n          );\n        })}\n      </MenuRadioGroup>\n    );\n  }\n);\n\n/** @internal Compatibility adapter for the existing preset sources. */\nexport const QualityRadioGroupLegacy = forwardRef<HTMLDivElement, QualityRadioGroupLegacyProps>(\n  function QualityRadioGroupLegacy({ label, formatRendition, disabled, ...props }, forwardedRef) {\n    return (\n      <QualityRadioGroupRoot label={label} formatRendition={formatRendition} disabled={disabled}>\n        <QualityRadioGroupOptions {...props} ref={forwardedRef} />\n      </QualityRadioGroupRoot>\n    );\n  }\n);\n\nfunction useQualityRadioGroupContext(): QualityOptionsResult | null {\n  const quality = useContext(QualityRadioGroupContext);\n  if (quality === undefined) throw new Error('QualityRadioGroup parts must be used within QualityRadioGroup.Root');\n\n  return quality;\n}\n\nfunction toMenuOptionState(quality: QualityOptionsResult | null): MenuOptionState {\n  return {\n    value: quality?.selectedLabel ?? '',\n    disabled: quality?.disabled ?? true,\n    hidden: quality?.hidden ?? true,\n    availability: quality?.state.availability ?? 'unsupported',\n  };\n}\n\nexport namespace QualityRadioGroupRoot {\n  export type Props = QualityRadioGroupRootProps;\n}\n\nexport namespace QualityRadioGroupValue {\n  export type Props = QualityRadioGroupValueProps;\n  export type State = QualityOptionsResult;\n}\n\nexport namespace QualityRadioGroupOptions {\n  export type Props = QualityRadioGroupOptionsProps;\n  export type State = QualityRadioGroupCore.State;\n  export type ItemProps = QualityRadioGroupItemProps;\n  export type ItemState = QualityRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;AAuCA,MAAM,2BAA2B,cAAuD,KAAA,CAAS;;AAGjG,SAAgB,sBAAsB,EAAE,UAAU,GAAG,SAAgD;CACnG,MAAM,UAAU,kBAAkB,KAAK;CAEvC,mBAAmB,kBAAkB,OAAO,CAAC;CAE7C,OAAO,oBAAC,yBAAyB,UAA1B;EAAmC,OAAO;EAAU;CAA4C,CAAA;AACzG;;AAGA,MAAa,yBAAyB,WACpC,SAAS,uBAAuB,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAAgB,cAAc;CAC3F,MAAM,UAAU,4BAA4B;CAC5C,IAAI,CAAC,SAAS,OAAO;CAErB,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EAAE,OAAO;EAAS,KAAK;EAAc,OAAO,CAAC,cAAc,EAAE,UAAU,QAAQ,cAAc,CAAC;CAAE,CAClG;AACF,CACF;;AAGA,MAAa,2BAA2B,WACtC,SAAS,yBAAyB,gBAAgB,cAAc;CAC9D,MAAM,EACJ,YACA,QACA,WACA,OACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,UAAU,4BAA4B;CAC5C,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,QAAQ,QAAQ,KAAA;CAEnF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,0BAA0B;EACvD,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,kBAAkB,OAAO;IACzB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF;;AAGA,MAAa,0BAA0B,WACrC,SAAS,wBAAwB,EAAE,OAAO,iBAAiB,UAAU,GAAG,SAAS,cAAc;CAC7F,OACE,oBAAC,uBAAD;EAA8B;EAAwB;EAA2B;EAC/E,UAAA,oBAAC,0BAAD;GAA0B,GAAI;GAAO,KAAK;EAAe,CAAA;CACpC,CAAA;AAE3B,CACF;AAEA,SAAS,8BAA2D;CAClE,MAAM,UAAU,WAAW,wBAAwB;CACnD,IAAI,YAAY,KAAA,GAAW,MAAM,IAAI,MAAM,oEAAoE;CAE/G,OAAO;AACT;AAEA,SAAS,kBAAkB,SAAuD;CAChF,OAAO;EACL,OAAO,SAAS,iBAAiB;EACjC,UAAU,SAAS,YAAY;EAC/B,QAAQ,SAAS,UAAU;EAC3B,cAAc,SAAS,MAAM,gBAAgB;CAC/C;AACF"}

package/dist/dev/ui/quality-radio-group/index.d.ts

@@ -1,3 +1,3 @@
-import { QualityRadioGroupLegacy } from "./quality-radio-group.js";
+import { QualityRadioGroupLegacy } from "./component.js";
 import { index_parts_d_exports } from "./index.parts.js";
 export { index_parts_d_exports as QualityRadioGroup, QualityRadioGroupLegacy };

package/dist/dev/ui/quality-radio-group/index.js

@@ -1,3 +1,3 @@
-import { QualityRadioGroupLegacy } from "./quality-radio-group.js";
+import { QualityRadioGroupLegacy } from "./component.js";
 import { index_parts_exports } from "./index.parts.js";
 export { index_parts_exports as QualityRadioGroup, QualityRadioGroupLegacy };

package/dist/dev/ui/quality-radio-group/index.parts.d.ts

@@ -1,4 +1,4 @@
-import { QualityRadioGroupItemProps, QualityRadioGroupItemState, QualityRadioGroupOptions, QualityRadioGroupOptionsProps, QualityRadioGroupRoot, QualityRadioGroupRootProps, QualityRadioGroupValue, QualityRadioGroupValueProps } from "./quality-radio-group.js";
+import { QualityRadioGroupItemProps, QualityRadioGroupItemState, QualityRadioGroupOptions, QualityRadioGroupOptionsProps, QualityRadioGroupRoot, QualityRadioGroupRootProps, QualityRadioGroupValue, QualityRadioGroupValueProps } from "./component.js";
 declare namespace index_parts_d_exports {
   export { QualityRadioGroupItemProps as ItemProps, QualityRadioGroupItemState as ItemState, QualityRadioGroupOptions as Options, QualityRadioGroupOptionsProps as OptionsProps, QualityRadioGroupRoot as Root, QualityRadioGroupRootProps as RootProps, QualityRadioGroupValue as Value, QualityRadioGroupValueProps as ValueProps };
 }

package/dist/dev/ui/quality-radio-group/index.parts.js

@@ -1,5 +1,5 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { QualityRadioGroupOptions, QualityRadioGroupRoot, QualityRadioGroupValue } from "./quality-radio-group.js";
+import { QualityRadioGroupOptions, QualityRadioGroupRoot, QualityRadioGroupValue } from "./component.js";
 //#region src/ui/quality-radio-group/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Options: () => QualityRadioGroupOptions,

package/dist/dev/ui/quality-radio-group/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/quality-radio-group/index.parts.ts"],"sourcesContent":["export {\n  type QualityRadioGroupItemProps as ItemProps,\n  type QualityRadioGroupItemState as ItemState,\n  QualityRadioGroupOptions as Options,\n  type QualityRadioGroupOptionsProps as OptionsProps,\n  QualityRadioGroupRoot as Root,\n  type QualityRadioGroupRootProps as RootProps,\n  QualityRadioGroupValue as Value,\n  type QualityRadioGroupValueProps as ValueProps,\n} from './quality-radio-group';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/quality-radio-group/index.parts.ts"],"sourcesContent":["export {\n  type QualityRadioGroupItemProps as ItemProps,\n  type QualityRadioGroupItemState as ItemState,\n  QualityRadioGroupOptions as Options,\n  type QualityRadioGroupOptionsProps as OptionsProps,\n  QualityRadioGroupRoot as Root,\n  type QualityRadioGroupRootProps as RootProps,\n  QualityRadioGroupValue as Value,\n  type QualityRadioGroupValueProps as ValueProps,\n} from './component';\n"],"mappings":""}

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

@@ -0,0 +1,29 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { SeekButtonCore } from "@videojs/core";
+//#region src/ui/seek-button/component.d.ts
+interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.State>, SeekButtonCore.Props {}
+/**
+ * A button that seeks forward or backward by a configurable number of seconds.
+ *
+ * @example
+ *   ```tsx
+ *   <SeekButton seconds={-10} />
+ *
+ *   <SeekButton
+ *   seconds={30}
+ *   render={(props, state) => (
+ *   <button {...props}>
+ *   {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
+ *   </button>
+ *   )}
+ *   />
+ *   ```;
+ */
+declare const SeekButton: import("react").ForwardRefExoticComponent<SeekButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare namespace SeekButton {
+  type Props = SeekButtonProps;
+  type State = SeekButtonCore.State;
+}
+//#endregion
+export { SeekButton, SeekButtonProps };
+//# sourceMappingURL=component.d.ts.map

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

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

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

@@ -0,0 +1,34 @@
+import { createMediaButton } from "../create-media-button.js";
+import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
+import { selectTime } from "@videojs/core/dom";
+//#region src/ui/seek-button/component.tsx
+/**
+* A button that seeks forward or backward by a configurable number of seconds.
+*
+* @example
+*   ```tsx
+*   <SeekButton seconds={-10} />
+*
+*   <SeekButton
+*   seconds={30}
+*   render={(props, state) => (
+*   <button {...props}>
+*   {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
+*   </button>
+*   )}
+*   />
+*   ```;
+*/
+const SeekButton = createMediaButton({
+	displayName: "SeekButton",
+	core: SeekButtonCore,
+	stateAttrMap: SeekButtonDataAttrs,
+	selector: selectTime,
+	action: (core, state) => core.seek(state),
+	hotkeyAction: "seekStep",
+	hotkeyValue: (props) => typeof props.seconds === "number" ? props.seconds : SeekButtonCore.defaultProps.seconds
+});
+//#endregion
+export { SeekButton };
+
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/seek-button/component.tsx"],"sourcesContent":["import { 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":";;;;;;;;;;;;;;;;;;;;;AAyBA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,KAAK,KAAK;CACxC,cAAc;CACd,cAAc,UAAW,OAAO,MAAM,YAAY,WAAW,MAAM,UAAU,eAAe,aAAa;AAC3G,CAAC"}

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

@@ -1,2 +1,2 @@
-import { SeekButton, SeekButtonProps } from "./seek-button.js";
+import { SeekButton, SeekButtonProps } from "./component.js";
 export { SeekButton, SeekButtonProps };

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

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

package/dist/dev/ui/seek-indicator/index.parts.d.ts

@@ -1,5 +1,5 @@
-import { SeekIndicatorRoot, SeekIndicatorRootProps } from "./seek-indicator-root.js";
-import { SeekIndicatorValue, SeekIndicatorValueProps } from "./seek-indicator-value.js";
+import { SeekIndicatorRoot, SeekIndicatorRootProps } from "./root.js";
+import { SeekIndicatorValue, SeekIndicatorValueProps } from "./value.js";
 declare namespace index_parts_d_exports {
   export { SeekIndicatorRoot as Root, SeekIndicatorRootProps as RootProps, SeekIndicatorValue as Value, SeekIndicatorValueProps as ValueProps };
 }

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

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

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

@@ -1 +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":""}
+{"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 './root';\nexport { SeekIndicatorValue as Value, type SeekIndicatorValueProps as ValueProps } from './value';\n"],"mappings":""}

package/dist/dev/ui/seek-indicator/root.d.ts

@@ -0,0 +1,12 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { SeekIndicatorCore } from "@videojs/core";
+//#region src/ui/seek-indicator/root.d.ts
+interface SeekIndicatorRootProps extends UIComponentProps<'div', SeekIndicatorCore.State>, SeekIndicatorCore.Props {}
+declare const SeekIndicatorRoot: import("react").ForwardRefExoticComponent<Omit<SeekIndicatorRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace SeekIndicatorRoot {
+  type Props = SeekIndicatorRootProps;
+  type State = SeekIndicatorCore.State;
+}
+//#endregion
+export { SeekIndicatorRoot, SeekIndicatorRootProps };
+//# sourceMappingURL=root.d.ts.map

package/dist/dev/ui/seek-indicator/root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.d.ts","names":[],"sources":["../../../../src/ui/seek-indicator/root.tsx"],"mappings":";;;UASiB,+BACP,wBAAwB,kBAAkB,QAAQ,kBAAkB;cAEjE,mCAAiB,0BAAA,KAAA,iDAAA,cAAA;kBAwBb;OACH,QAAQ;OACR,QAAQ,kBAAkB"}

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

@@ -0,0 +1,29 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useInputIndicatorRoot } from "../input-indicator/use-input-indicator-root.js";
+import { SeekIndicatorProvider } from "./context.js";
+import { SeekIndicatorCore, SeekIndicatorDataAttrs } from "@videojs/core";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/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=root.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/seek-indicator/root.tsx"],"sourcesContent":["import { 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-indicator/use-input-indicator-root';\nimport { SeekIndicatorProvider } from './context';\n\nexport interface SeekIndicatorRootProps\n  extends UIComponentProps<'div', SeekIndicatorCore.State>, 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  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":";;;;;;;AAYA,MAAa,oBAAoB,WAAW,SAAS,kBACnD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,GAAG,iBAAiB;CAClE,MAAM,EAAE,YAAY,SAAS,UAAU,4BAA4B,IAAI,kBAAkB,GAAG,EAAE,WAAW,CAAC;CAC1G,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,uBAAD;EAAuB,OAAO,EAAE,MAAM;EACnC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CAAC,YAAY;EACtB,CACF;CACqB,CAAA;AAE3B,CAAC"}

package/dist/dev/ui/seek-indicator/value.d.ts

@@ -0,0 +1,11 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { SeekIndicatorCore } from "@videojs/core";
+//#region src/ui/seek-indicator/value.d.ts
+interface SeekIndicatorValueProps extends UIComponentProps<'div', SeekIndicatorCore.State> {}
+declare const SeekIndicatorValue: import("react").ForwardRefExoticComponent<Omit<SeekIndicatorValueProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace SeekIndicatorValue {
+  type Props = SeekIndicatorValueProps;
+}
+//#endregion
+export { SeekIndicatorValue, SeekIndicatorValueProps };
+//# sourceMappingURL=value.d.ts.map

package/dist/dev/ui/seek-indicator/value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.d.ts","names":[],"sources":["../../../../src/ui/seek-indicator/value.tsx"],"mappings":";;;UAQiB,gCAAgC,wBAAwB,kBAAkB;cAE9E,oCAAkB,0BAAA,KAAA,kDAAA,cAAA;kBAkBd;OACH,QAAQ"}

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

@@ -0,0 +1,22 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useSeekIndicatorContext } from "./context.js";
+import { getSeekIndicatorDisplayValue } from "@videojs/core";
+import { forwardRef } from "react";
+//#region src/ui/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=value.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"value.js","names":[],"sources":["../../../../src/ui/seek-indicator/value.tsx"],"sourcesContent":["import { 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":";;;;;AAUA,MAAa,qBAAqB,WAAW,SAAS,mBACpD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,wBAAwB;CAE1C,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,6BAA6B,KAAK,EAAE,GAAG,YAAY;CACzE,CACF;AACF,CAAC"}

package/dist/dev/ui/slider/buffer.d.ts

@@ -0,0 +1,12 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { SliderState } from "@videojs/core";
+//#region src/ui/slider/buffer.d.ts
+interface SliderBufferProps extends UIComponentProps<'div', SliderState> {}
+/** Displays the buffered range on the slider track. */
+declare const SliderBuffer: import("react").ForwardRefExoticComponent<SliderBufferProps>;
+declare namespace SliderBuffer {
+  type Props = SliderBufferProps;
+}
+//#endregion
+export { SliderBuffer, SliderBufferProps };
+//# sourceMappingURL=buffer.d.ts.map

package/dist/dev/ui/slider/buffer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"buffer.d.ts","names":[],"sources":["../../../../src/ui/slider/buffer.tsx"],"mappings":";;;UAMiB,0BAA0B,wBAAwB;;cAGtD,8BAAY,0BAAA;kBAMR;OACH,QAAQ"}

package/dist/dev/ui/slider/buffer.js

@@ -0,0 +1,13 @@
+import { createContextPart } from "../create-context-part.js";
+import { useSliderContext } from "./context.js";
+//#region src/ui/slider/buffer.tsx
+/** Displays the buffered range on the slider track. */
+const SliderBuffer = createContextPart({
+	displayName: "SliderBuffer",
+	tag: "div",
+	useContext: useSliderContext
+});
+//#endregion
+export { SliderBuffer };
+
+//# sourceMappingURL=buffer.js.map

package/dist/dev/ui/slider/buffer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"buffer.js","names":[],"sources":["../../../../src/ui/slider/buffer.tsx"],"sourcesContent":["import type { SliderState } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useSliderContext } from './context';\n\nexport interface SliderBufferProps extends UIComponentProps<'div', SliderState> {}\n\n/** Displays the buffered range on the slider track. */\nexport const SliderBuffer = createContextPart<SliderBufferProps, SliderState>({\n  displayName: 'SliderBuffer',\n  tag: 'div',\n  useContext: useSliderContext,\n});\n\nexport namespace SliderBuffer {\n  export type Props = SliderBufferProps;\n}\n"],"mappings":";;;;AASA,MAAa,eAAe,kBAAkD;CAC5E,aAAa;CACb,KAAK;CACL,YAAY;AACd,CAAC"}

package/dist/dev/ui/slider/fill.d.ts

@@ -0,0 +1,12 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { SliderState } from "@videojs/core";
+//#region src/ui/slider/fill.d.ts
+interface SliderFillProps extends UIComponentProps<'div', SliderState> {}
+/** Displays the filled portion from start to the current value. */
+declare const SliderFill: import("react").ForwardRefExoticComponent<SliderFillProps>;
+declare namespace SliderFill {
+  type Props = SliderFillProps;
+}
+//#endregion
+export { SliderFill, SliderFillProps };
+//# sourceMappingURL=fill.d.ts.map

package/dist/dev/ui/slider/fill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fill.d.ts","names":[],"sources":["../../../../src/ui/slider/fill.tsx"],"mappings":";;;UAMiB,wBAAwB,wBAAwB;;cAGpD,4BAAU,0BAAA;kBAMN;OACH,QAAQ"}

package/dist/dev/ui/slider/fill.js

@@ -0,0 +1,13 @@
+import { createContextPart } from "../create-context-part.js";
+import { useSliderContext } from "./context.js";
+//#region src/ui/slider/fill.tsx
+/** Displays the filled portion from start to the current value. */
+const SliderFill = createContextPart({
+	displayName: "SliderFill",
+	tag: "div",
+	useContext: useSliderContext
+});
+//#endregion
+export { SliderFill };
+
+//# sourceMappingURL=fill.js.map

package/dist/dev/ui/slider/fill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fill.js","names":[],"sources":["../../../../src/ui/slider/fill.tsx"],"sourcesContent":["import type { SliderState } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useSliderContext } from './context';\n\nexport interface SliderFillProps extends UIComponentProps<'div', SliderState> {}\n\n/** Displays the filled portion from start to the current value. */\nexport const SliderFill = createContextPart<SliderFillProps, SliderState>({\n  displayName: 'SliderFill',\n  tag: 'div',\n  useContext: useSliderContext,\n});\n\nexport namespace SliderFill {\n  export type Props = SliderFillProps;\n}\n"],"mappings":";;;;AASA,MAAa,aAAa,kBAAgD;CACxE,aAAa;CACb,KAAK;CACL,YAAY;AACd,CAAC"}

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

@@ -1,14 +1,14 @@
-import { SliderBuffer, SliderBufferProps } from "./slider-buffer.js";
-import { SliderFill, SliderFillProps } from "./slider-fill.js";
-import { SliderPreview, SliderPreviewProps } from "./slider-preview.js";
-import { SliderRoot, SliderRootProps } from "./slider-root.js";
-import { SliderThumb, SliderThumbProps } from "./slider-thumb.js";
-import { SliderThumbnail, SliderThumbnailProps } from "./slider-thumbnail.js";
-import { SliderTrack, SliderTrackProps } from "./slider-track.js";
-import { SliderValue, SliderValueProps } from "./slider-value.js";
+import { SliderBuffer, SliderBufferProps } from "./buffer.js";
+import { SliderFill, SliderFillProps } from "./fill.js";
+import { SliderPreview, SliderPreviewProps } from "./preview.js";
+import { SliderRoot, SliderRootProps } from "./root.js";
+import { SliderThumb, SliderThumbProps } from "./thumb.js";
+import { index_parts_d_exports as index_parts_d_exports$1 } from "./thumbnail/index.parts.js";
+import { SliderTrack, SliderTrackProps } from "./track.js";
+import { SliderValue, SliderValueProps } from "./value.js";
 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, SliderRoot as Root, SliderRootProps as RootProps, SliderThumb as Thumb, SliderThumbProps as ThumbProps, SliderThumbnail as Thumbnail, SliderThumbnailProps as ThumbnailProps, SliderTrack as Track, SliderTrackProps as TrackProps, SliderValue as Value, SliderValueProps as ValueProps };
+  export { SliderBuffer as Buffer, SliderBufferProps as BufferProps, SliderFill as Fill, SliderFillProps as FillProps, SliderPreview as Preview, SliderPreviewProps as PreviewProps, SliderRoot as Root, SliderRootProps as RootProps, SliderThumb as Thumb, SliderThumbProps as ThumbProps, index_parts_d_exports$1 as Thumbnail, SliderTrack as Track, SliderTrackProps as TrackProps, SliderValue as Value, SliderValueProps as ValueProps };
 }
 //#endregion
-export { SliderBuffer as Buffer, type SliderBufferProps as BufferProps, SliderFill as Fill, type SliderFillProps as FillProps, SliderPreview as Preview, type SliderPreviewProps as PreviewProps, SliderRoot as Root, type SliderRootProps as RootProps, SliderThumb as Thumb, type SliderThumbProps as ThumbProps, SliderThumbnail as Thumbnail, type SliderThumbnailProps as ThumbnailProps, SliderTrack as Track, type SliderTrackProps as TrackProps, SliderValue as Value, type SliderValueProps as ValueProps, index_parts_d_exports };
+export { SliderBuffer as Buffer, type SliderBufferProps as BufferProps, SliderFill as Fill, type SliderFillProps as FillProps, SliderPreview as Preview, type SliderPreviewProps as PreviewProps, SliderRoot as Root, type SliderRootProps as RootProps, SliderThumb as Thumb, type SliderThumbProps as ThumbProps, index_parts_d_exports$1 as Thumbnail, SliderTrack as Track, type SliderTrackProps as TrackProps, SliderValue as Value, type SliderValueProps as ValueProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map