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

package/dist/dev/ui/quality/use-quality-options.d.ts

@@ -1,21 +1,25 @@
-import { QualityRadioGroupCore } from "@videojs/core";
-
+import { TranslatedRadioOption } from "../hooks/create-radio-options-hook.js";
+import { QualityRadioGroupCore, QualityRadioGroupOption } from "@videojs/core";
 //#region src/ui/quality/use-quality-options.d.ts
 interface QualityOptionsProps extends QualityRadioGroupCore.Props {}
-interface QualityOption {
-  value: string;
-  label: string;
-  tier?: string | undefined;
-  badge?: string | undefined;
-  disabled: boolean;
-}
+type QualityOption = TranslatedRadioOption<QualityRadioGroupOption>;
 interface QualityOptionsResult {
   state: QualityRadioGroupCore.State;
+  label: string;
   value: string;
+  selectedLabel: string;
   options: QualityOption[];
   disabled: boolean;
+  hidden: boolean;
   setValue: (value: string) => void;
 }
+/**
+ * Create quality menu options (including an `Auto` option) from the player
+ * video rendition state. Returns `null` when the quality feature is not
+ * configured.
+ *
+ * @param props - Optional `label`, `formatRendition`, and `disabled` overrides.
+ */
 declare function useQualityOptions(props?: QualityOptionsProps): QualityOptionsResult | null;
 declare namespace useQualityOptions {
   type Props = QualityOptionsProps;

package/dist/dev/ui/quality/use-quality-options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-quality-options.d.ts","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"mappings":";;;UAQiB,mBAAA,SAA4B,qBAAA,CAAsB,KAAA;AAAA,UAElD,aAAA;EACf,KAAA;EACA,KAAA;EACA,IAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,UAGe,oBAAA;EACf,KAAA,EAAO,qBAAA,CAAsB,KAAA;EAC7B,KAAA;EACA,OAAA,EAAS,aAAA;EACT,QAAA;EACA,QAAA,GAAW,KAAA;AAAA;AAAA,iBAGG,iBAAA,CAAkB,KAAA,GAAQ,mBAAA,GAAsB,oBAAA;AAAA,kBAoC/C,iBAAA;EAAA,KACH,KAAA,GAAQ,mBAAA;EAAA,KACR,MAAA,GAAS,oBAAA;EAAA,KACT,MAAA,GAAS,aAAA;AAAA"}
+{"version":3,"file":"use-quality-options.d.ts","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"mappings":";;;UAOiB,4BAA4B,sBAAsB;KAEvD,gBAAgB,sBAAsB;UAEjC;EACf,OAAO,sBAAsB;EAC7B;EACA;EACA;EACA,SAAS;EACT;EACA;EACA,WAAW;;;;;;;;;iBAiBG,kBAAkB,QAAQ,sBAAsB;kBAM/C;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}

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

@@ -1,38 +1,24 @@
 "use client";
-import { usePlayer } from "../../player/context.js";
-import { logMissingFeature, selectQuality } from "@videojs/core/dom";
-import { useCallback, useState } from "react";
-import { QUALITY_AUTO_VALUE, QualityRadioGroupCore } from "@videojs/core";
+import { createRadioOptionsHook } from "../hooks/create-radio-options-hook.js";
+import { selectQuality } from "@videojs/core/dom";
+import { QualityRadioGroupCore } from "@videojs/core";
 //#region src/ui/quality/use-quality-options.ts
+const useQualityRadioOptions = createRadioOptionsHook({
+	name: "useQualityOptions",
+	feature: "quality",
+	selector: selectQuality,
+	createCore: () => new QualityRadioGroupCore()
+});
+/**
+* Create quality menu options (including an `Auto` option) from the player
+* video rendition state. Returns `null` when the quality feature is not
+* configured.
+*
+* @param props - Optional `label`, `formatRendition`, and `disabled` overrides.
+*/
 function useQualityOptions(props) {
 	"use no memo";
-	const media = usePlayer(selectQuality);
-	const [core] = useState(() => new QualityRadioGroupCore());
-	core.setProps(props ?? {});
-	const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
-	if (!media) {
-		logMissingFeature("useQualityOptions", selectQuality.displayName ?? "quality");
-		return null;
-	}
-	core.setMedia(media);
-	const state = core.getState();
-	return {
-		state,
-		value: state.value,
-		options: [{
-			value: QUALITY_AUTO_VALUE,
-			label: state.autoLabel,
-			disabled: state.disabled
-		}, ...state.renditions.map((rendition) => ({
-			value: rendition.value,
-			label: rendition.label,
-			...rendition.tier && { tier: rendition.tier },
-			...rendition.badge && { badge: rendition.badge },
-			disabled: state.disabled
-		}))],
-		disabled: state.disabled,
-		setValue
-	};
+	return useQualityRadioOptions(props);
 }
 //#endregion
 export { useQualityOptions };

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

@@ -1 +1 @@
-{"version":3,"file":"use-quality-options.js","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"sourcesContent":["'use client';\n\nimport { QUALITY_AUTO_VALUE, QualityRadioGroupCore } from '@videojs/core';\nimport { logMissingFeature, selectQuality } from '@videojs/core/dom';\nimport { useCallback, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\n\nexport interface QualityOptionsProps extends QualityRadioGroupCore.Props {}\n\nexport interface QualityOption {\n  value: string;\n  label: string;\n  tier?: string | undefined;\n  badge?: string | undefined;\n  disabled: boolean;\n}\n\nexport interface QualityOptionsResult {\n  state: QualityRadioGroupCore.State;\n  value: string;\n  options: QualityOption[];\n  disabled: boolean;\n  setValue: (value: string) => void;\n}\n\nexport function useQualityOptions(props?: QualityOptionsProps): QualityOptionsResult | null {\n  'use no memo';\n\n  const media = usePlayer(selectQuality);\n  const [core] = useState(() => new QualityRadioGroupCore());\n\n  core.setProps(props ?? {});\n\n  const setValue = useCallback((value: string) => core.selectValue(media!, value), [core, media]);\n\n  if (!media) {\n    if (__DEV__) logMissingFeature('useQualityOptions', selectQuality.displayName ?? 'quality');\n    return null;\n  }\n\n  core.setMedia(media);\n  const state = core.getState();\n\n  return {\n    state,\n    value: state.value,\n    options: [\n      { value: QUALITY_AUTO_VALUE, label: state.autoLabel, disabled: state.disabled },\n      ...state.renditions.map((rendition) => ({\n        value: rendition.value,\n        label: rendition.label,\n        ...(rendition.tier && { tier: rendition.tier }),\n        ...(rendition.badge && { badge: rendition.badge }),\n        disabled: state.disabled,\n      })),\n    ],\n    disabled: state.disabled,\n    setValue,\n  };\n}\n\nexport namespace useQualityOptions {\n  export type Props = QualityOptionsProps;\n  export type Result = QualityOptionsResult;\n  export type Option = QualityOption;\n}\n"],"mappings":";;;;;;AA0BA,SAAgB,kBAAkB,OAA0D;AAC1F;CAEA,MAAM,QAAQ,UAAU,cAAc;CACtC,MAAM,CAAC,QAAQ,eAAe,IAAI,uBAAuB,CAAC;AAE1D,MAAK,SAAS,SAAS,EAAE,CAAC;CAE1B,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,MAAM,EAAE,CAAC,MAAM,MAAM,CAAC;AAE/F,KAAI,CAAC,OAAO;AACG,oBAAkB,qBAAqB,cAAc,eAAe,UAAU;AAC3F,SAAO;;AAGT,MAAK,SAAS,MAAM;CACpB,MAAM,QAAQ,KAAK,UAAU;AAE7B,QAAO;EACL;EACA,OAAO,MAAM;EACb,SAAS,CACP;GAAE,OAAO;GAAoB,OAAO,MAAM;GAAW,UAAU,MAAM;GAAU,EAC/E,GAAG,MAAM,WAAW,KAAK,eAAe;GACtC,OAAO,UAAU;GACjB,OAAO,UAAU;GACjB,GAAI,UAAU,QAAQ,EAAE,MAAM,UAAU,MAAM;GAC9C,GAAI,UAAU,SAAS,EAAE,OAAO,UAAU,OAAO;GACjD,UAAU,MAAM;GACjB,EAAE,CACJ;EACD,UAAU,MAAM;EAChB;EACD"}
+{"version":3,"file":"use-quality-options.js","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"sourcesContent":["'use client';\n\nimport { QualityRadioGroupCore, type QualityRadioGroupOption } from '@videojs/core';\nimport { selectQuality } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface QualityOptionsProps extends QualityRadioGroupCore.Props {}\n\nexport type QualityOption = TranslatedRadioOption<QualityRadioGroupOption>;\n\nexport interface QualityOptionsResult {\n  state: QualityRadioGroupCore.State;\n  label: string;\n  value: string;\n  selectedLabel: string;\n  options: QualityOption[];\n  disabled: boolean;\n  hidden: boolean;\n  setValue: (value: string) => void;\n}\n\nconst useQualityRadioOptions = createRadioOptionsHook({\n  name: 'useQualityOptions',\n  feature: 'quality',\n  selector: selectQuality,\n  createCore: () => new QualityRadioGroupCore(),\n});\n\n/**\n * Create quality menu options (including an `Auto` option) from the player\n * video rendition state. Returns `null` when the quality feature is not\n * configured.\n *\n * @param props - Optional `label`, `formatRendition`, and `disabled` overrides.\n */\nexport function useQualityOptions(props?: QualityOptionsProps): QualityOptionsResult | null {\n  'use no memo';\n\n  return useQualityRadioOptions(props);\n}\n\nexport namespace useQualityOptions {\n  export type Props = QualityOptionsProps;\n  export type Result = QualityOptionsResult;\n  export type Option = QualityOption;\n}\n"],"mappings":";;;;;AAsBA,MAAM,yBAAyB,uBAAuB;CACpD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,sBAAsB;AAC9C,CAAC;;;;;;;;AASD,SAAgB,kBAAkB,OAA0D;CAC1F;CAEA,OAAO,uBAAuB,KAAK;AACrC"}

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

@@ -0,0 +1,2 @@
+import { QualityRadioGroup, QualityRadioGroupItemProps, QualityRadioGroupItemState, QualityRadioGroupProps } from "./quality-radio-group.js";
+export { QualityRadioGroup, type QualityRadioGroupItemProps, type QualityRadioGroupItemState, type QualityRadioGroupProps };

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

@@ -0,0 +1,2 @@
+import { QualityRadioGroup } from "./quality-radio-group.js";
+export { QualityRadioGroup };

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

@@ -0,0 +1,44 @@
+import { UIComponentProps } from "../../utils/types.js";
+import { MenuRadioItemProps } from "../menu/menu-radio-item.js";
+import { QualityOption, QualityOptionsProps } from "../quality/use-quality-options.js";
+import { ReactElement } from "react";
+import { QualityRadioGroupCore } from "@videojs/core";
+//#region src/ui/quality-radio-group/quality-radio-group.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 QualityRadioGroupProps extends Omit<UIComponentProps<'div', QualityRadioGroupCore.State>, 'children'>, QualityOptionsProps {
+  /** Render one consumer-owned menu radio item for every quality option. */
+  renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;
+}
+/**
+ * Renders menu radio items for the player's video renditions.
+ *
+ * @example
+ * ```tsx
+ * <QualityRadioGroup
+ *   renderItem={(props, item) => (
+ *     <Menu.RadioItem {...props}>
+ *       {item.label}
+ *       {item.tier ? <sup>{item.tier}</sup> : null}
+ *       <Menu.ItemIndicator checked={item.checked} />
+ *     </Menu.RadioItem>
+ *   )}
+ * />
+ * ```
+ */
+declare const QualityRadioGroup: import("react").ForwardRefExoticComponent<Omit<QualityRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+declare namespace QualityRadioGroup {
+  type Props = QualityRadioGroupProps;
+  type State = QualityRadioGroupCore.State;
+  type ItemProps = QualityRadioGroupItemProps;
+  type ItemState = QualityRadioGroupItemState;
+}
+//#endregion
+export { QualityRadioGroup, QualityRadioGroupItemProps, QualityRadioGroupItemState, QualityRadioGroupProps };
+//# sourceMappingURL=quality-radio-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"quality-radio-group.d.ts","names":[],"sources":["../../../../src/ui/quality-radio-group/quality-radio-group.tsx"],"mappings":";;;;;;KAaY,6BAA6B;;EAEvC;;UAGe,mCAAmC,KAAK;;EAEvD;;UAGe,+BACP,KAAK,wBAAwB,sBAAsB,qBACzD;;EAEF,aAAa,OAAO,4BAA4B,OAAO,+BAA+B;;;;;;;;;;;;;;;;;;cAmB3E,mCAAiB,0BAAA,KAAA,iDAAA,cAAA;kBAyDb;OACH,QAAQ;OACR,QAAQ,sBAAsB;OAC9B,YAAY;OACZ,YAAY"}

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

@@ -0,0 +1,66 @@
+"use client";
+import { MenuRadioGroup } from "../menu/menu-radio-group.js";
+import { useQualityOptions } from "../quality/use-quality-options.js";
+import { getStateDataAttrs } from "@videojs/core/dom";
+import { Fragment, forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { isFunction } from "@videojs/utils/predicate";
+import { QualityRadioGroupDataAttrs } from "@videojs/core";
+//#region src/ui/quality-radio-group/quality-radio-group.tsx
+/**
+* Renders menu radio items for the player's video renditions.
+*
+* @example
+* ```tsx
+* <QualityRadioGroup
+*   renderItem={(props, item) => (
+*     <Menu.RadioItem {...props}>
+*       {item.label}
+*       {item.tier ? <sup>{item.tier}</sup> : null}
+*       <Menu.ItemIndicator checked={item.checked} />
+*     </Menu.RadioItem>
+*   )}
+* />
+* ```
+*/
+const QualityRadioGroup = forwardRef(function QualityRadioGroup(componentProps, forwardedRef) {
+	const { renderItem, render, className, style, label, formatRendition, disabled, "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, ...elementProps } = componentProps;
+	const quality = useQualityOptions({
+		label,
+		formatRendition,
+		disabled
+	});
+	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);
+		})
+	});
+});
+//#endregion
+export { QualityRadioGroup };
+
+//# sourceMappingURL=quality-radio-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"quality-radio-group.js","names":[],"sources":["../../../../src/ui/quality-radio-group/quality-radio-group.tsx"],"sourcesContent":["'use client';\n\nimport { type QualityRadioGroupCore, QualityRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport { type QualityOption, type QualityOptionsProps, useQualityOptions } from '../quality/use-quality-options';\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 QualityRadioGroupProps\n  extends Omit<UIComponentProps<'div', QualityRadioGroupCore.State>, 'children'>,\n    QualityOptionsProps {\n  /** Render one consumer-owned menu radio item for every quality option. */\n  renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;\n}\n\n/**\n * Renders menu radio items for the player's video renditions.\n *\n * @example\n * ```tsx\n * <QualityRadioGroup\n *   renderItem={(props, item) => (\n *     <Menu.RadioItem {...props}>\n *       {item.label}\n *       {item.tier ? <sup>{item.tier}</sup> : null}\n *       <Menu.ItemIndicator checked={item.checked} />\n *     </Menu.RadioItem>\n *   )}\n * />\n * ```\n */\nexport const QualityRadioGroup = forwardRef<HTMLDivElement, QualityRadioGroupProps>(\n  function QualityRadioGroup(componentProps, forwardedRef) {\n    const {\n      renderItem,\n      render,\n      className,\n      style,\n      label,\n      formatRendition,\n      disabled,\n      'aria-label': ariaLabelProp,\n      'aria-labelledby': ariaLabelledBy,\n      ...elementProps\n    } = componentProps;\n    const quality = useQualityOptions({ label, formatRendition, disabled });\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\nexport namespace QualityRadioGroup {\n  export type Props = QualityRadioGroupProps;\n  export type State = QualityRadioGroupCore.State;\n  export type ItemProps = QualityRadioGroupItemProps;\n  export type ItemState = QualityRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AA8CA,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,gBAAgB,cAAc;CACvD,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,iBACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,UAAU,kBAAkB;EAAE;EAAO;EAAiB;CAAS,CAAC;CACtE,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"}

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

@@ -1,7 +1,5 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { SeekButtonCore } from "@videojs/core";
-
 //#region src/ui/seek-button/seek-button.d.ts
 interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.State>, SeekButtonCore.Props {}
 /**
@@ -21,7 +19,7 @@ interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.Stat
  * />
  * ```
  */
-declare const SeekButton: _$react.ForwardRefExoticComponent<SeekButtonProps & _$react.RefAttributes<HTMLButtonElement>>;
+declare const SeekButton: import("react").ForwardRefExoticComponent<SeekButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 declare namespace SeekButton {
   type Props = SeekButtonProps;
   type State = SeekButtonCore.State;

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

@@ -1 +1 @@
-{"version":3,"file":"seek-button.d.ts","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,WAA2B,cAAA,CAAe,KAAA,GAAQ,cAAA,CAAe,KAAA;;AAA1G;;;;;;;;;;;;;;;AAmBA;cAAa,UAAA,EAAU,OAAA,CAAA,yBAAA,CAAA,eAAA,GAAA,OAAA,CAAA,aAAA,CAAA,iBAAA;AAAA,kBAUN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,cAAA,CAAe,KAAA;AAAA"}
+{"version":3,"file":"seek-button.d.ts","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"mappings":";;;UAQiB,wBAAwB,2BAA2B,eAAe,QAAQ,eAAe;;;;;;;;;;;;;;;;;;cAmB7F,4BAAU,0BAAA,kCAAA,cAAA;kBAUN;OACH,QAAQ;OACR,QAAQ,eAAe"}

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

@@ -1 +1 @@
-{"version":3,"file":"seek-button.js","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"sourcesContent":["'use client';\n\nimport { SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';\nimport { selectTime } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.State>, SeekButtonCore.Props {}\n\n/**\n * A button that seeks forward or backward by a configurable number of seconds.\n *\n * @example\n * ```tsx\n * <SeekButton seconds={-10} />\n *\n * <SeekButton\n *   seconds={30}\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const SeekButton = createMediaButton<SeekButtonCore, SeekButtonProps>({\n  displayName: 'SeekButton',\n  core: SeekButtonCore,\n  stateAttrMap: SeekButtonDataAttrs,\n  selector: selectTime,\n  action: (core, state) => core.seek(state),\n  hotkeyAction: 'seekStep',\n  hotkeyValue: (props) => (typeof props.seconds === 'number' ? props.seconds : SeekButtonCore.defaultProps.seconds),\n});\n\nexport namespace SeekButton {\n  export type Props = SeekButtonProps;\n  export type State = SeekButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,KAAK,MAAM;CACzC,cAAc;CACd,cAAc,UAAW,OAAO,MAAM,YAAY,WAAW,MAAM,UAAU,eAAe,aAAa;CAC1G,CAAC"}
+{"version":3,"file":"seek-button.js","names":[],"sources":["../../../../src/ui/seek-button/seek-button.tsx"],"sourcesContent":["'use client';\n\nimport { SeekButtonCore, SeekButtonDataAttrs } from '@videojs/core';\nimport { selectTime } from '@videojs/core/dom';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createMediaButton } from '../create-media-button';\n\nexport interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.State>, SeekButtonCore.Props {}\n\n/**\n * A button that seeks forward or backward by a configurable number of seconds.\n *\n * @example\n * ```tsx\n * <SeekButton seconds={-10} />\n *\n * <SeekButton\n *   seconds={30}\n *   render={(props, state) => (\n *     <button {...props}>\n *       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}\n *     </button>\n *   )}\n * />\n * ```\n */\nexport const SeekButton = createMediaButton<SeekButtonCore, SeekButtonProps>({\n  displayName: 'SeekButton',\n  core: SeekButtonCore,\n  stateAttrMap: SeekButtonDataAttrs,\n  selector: selectTime,\n  action: (core, state) => core.seek(state),\n  hotkeyAction: 'seekStep',\n  hotkeyValue: (props) => (typeof props.seconds === 'number' ? props.seconds : SeekButtonCore.defaultProps.seconds),\n});\n\nexport namespace SeekButton {\n  export type Props = SeekButtonProps;\n  export type State = SeekButtonCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,aAAa,kBAAmD;CAC3E,aAAa;CACb,MAAM;CACN,cAAc;CACd,UAAU;CACV,SAAS,MAAM,UAAU,KAAK,KAAK,KAAK;CACxC,cAAc;CACd,cAAc,UAAW,OAAO,MAAM,YAAY,WAAW,MAAM,UAAU,eAAe,aAAa;AAC3G,CAAC"}

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

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

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

@@ -1,10 +1,8 @@
 import { SeekIndicatorRoot, SeekIndicatorRootProps } from "./seek-indicator-root.js";
 import { SeekIndicatorValue, SeekIndicatorValueProps } from "./seek-indicator-value.js";
-
-//#region src/ui/seek-indicator/index.parts.d.ts
 declare namespace index_parts_d_exports {
   export { SeekIndicatorRoot as Root, SeekIndicatorRootProps as RootProps, SeekIndicatorValue as Value, SeekIndicatorValueProps as ValueProps };
 }
 //#endregion
-export { index_parts_d_exports };
+export { SeekIndicatorRoot as Root, type SeekIndicatorRootProps as RootProps, SeekIndicatorValue as Value, type SeekIndicatorValueProps as ValueProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

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

@@ -7,6 +7,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Value: () => SeekIndicatorValue
 });
 //#endregion
-export { index_parts_exports };
+export { SeekIndicatorRoot as Root, SeekIndicatorValue as Value, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"seek-indicator-root.d.ts","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-root.tsx"],"mappings":";;;;;UAWiB,sBAAA,SACP,gBAAA,QAAwB,iBAAA,CAAkB,KAAA,GAChD,iBAAA,CAAkB,KAAA;AAAA,cAET,iBAAA,EAAiB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,sBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAyBb,iBAAA;EAAA,KACH,KAAA,GAAQ,sBAAA;EAAA,KACR,KAAA,GAAQ,iBAAA,CAAkB,KAAA;AAAA"}
+{"version":3,"file":"seek-indicator-root.d.ts","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-root.tsx"],"mappings":";;;UAWiB,+BACP,wBAAwB,kBAAkB,QAChD,kBAAkB;cAET,mCAAiB,0BAAA,KAAA,iDAAA,cAAA;kBAyBb;OACH,QAAQ;OACR,QAAQ,kBAAkB"}

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

@@ -1,6 +1,6 @@
 "use client";
 import { renderElement } from "../../utils/use-render.js";
-import { useInputIndicatorRoot } from "../input-indicators/use-input-indicator-root.js";
+import { useInputIndicatorRoot } from "../input-indicator/use-input-indicator-root.js";
 import { SeekIndicatorProvider } from "./context.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"seek-indicator-value.d.ts","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-value.tsx"],"mappings":";;;;;UAUiB,uBAAA,SAAgC,gBAAA,QAAwB,iBAAA,CAAkB,KAAA;AAAA,cAE9E,kBAAA,EAAkB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,uBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAkBd,kBAAA;EAAA,KACH,KAAA,GAAQ,uBAAA;AAAA"}
+{"version":3,"file":"seek-indicator-value.d.ts","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-value.tsx"],"mappings":";;;UAUiB,gCAAgC,wBAAwB,kBAAkB;cAE9E,oCAAkB,0BAAA,KAAA,kDAAA,cAAA;kBAkBd;OACH,QAAQ"}

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

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

@@ -1,5 +1,5 @@
 "use client";
-import { createContext, useContext } from "react";
+import { createContext, useContext, useSyncExternalStore } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/ui/slider/context.tsx
 const SliderContext = createContext(null);
@@ -14,7 +14,12 @@ function useSliderContext() {
 	if (!ctx) throw new Error("Slider compound components must be used within a Slider.Root");
 	return ctx;
 }
+function useSliderPointerValue(enabled = true) {
+	const context = useSliderContext();
+	const percent = useSyncExternalStore((onChange) => context.input?.subscribe(onChange) ?? (() => {}), () => enabled ? context.input?.current.pointerPercent ?? null : null, () => enabled ? context.input?.current.pointerPercent ?? null : null);
+	return percent === null ? context.pointerValue : context.getPointerValue?.(percent) ?? context.pointerValue;
+}
 //#endregion
-export { SliderProvider, useSliderContext };
+export { SliderProvider, useSliderContext, useSliderPointerValue };
 
 //# sourceMappingURL=context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/slider/context.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState, StateAttrMap } from '@videojs/core';\nimport type { SliderThumbProps } from '@videojs/core/dom';\nimport type { ProviderProps, RefCallback } from 'react';\nimport { createContext, useContext } from 'react';\n\nexport interface SliderContextValue {\n  state: SliderState;\n  /** Pointer position converted to the value domain (not 0–100 percent). */\n  pointerValue: number;\n  thumbRef: RefCallback<HTMLElement>;\n  thumbProps: SliderThumbProps;\n  stateAttrMap: StateAttrMap<SliderState>;\n  getAttrs: (state: SliderState) => object;\n  formatValue?: ((value: number, type: 'current' | 'pointer') => string) | undefined;\n}\n\nconst SliderContext = createContext<SliderContextValue | null>(null);\n\ntype SliderProviderProps = ProviderProps<SliderContextValue>;\n\nexport function SliderProvider({ value, children }: SliderProviderProps) {\n  return <SliderContext.Provider value={value}>{children}</SliderContext.Provider>;\n}\n\nexport function useSliderContext(): SliderContextValue {\n  const ctx = useContext(SliderContext);\n  if (!ctx) throw new Error('Slider compound components must be used within a Slider.Root');\n  return ctx;\n}\n"],"mappings":";;;;AAkBA,MAAM,gBAAgB,cAAyC,KAAK;AAIpE,SAAgB,eAAe,EAAE,OAAO,YAAiC;AACvE,QAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;EAAkC,CAAA;;AAGlF,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,cAAc;AACrC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,+DAA+D;AACzF,QAAO"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/slider/context.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderInput, SliderState, StateAttrMap } from '@videojs/core';\nimport type { SliderThumbProps } from '@videojs/core/dom';\nimport type { State } from '@videojs/store';\nimport type { ProviderProps, RefCallback } from 'react';\nimport { createContext, useContext, useSyncExternalStore } from 'react';\n\nexport interface SliderContextValue {\n  state: SliderState;\n  /** Pointer position converted to the value domain (not 0–100 percent). */\n  pointerValue: number;\n  input?: State<SliderInput> | undefined;\n  getPointerValue?: ((percent: number) => number) | undefined;\n  thumbRef: RefCallback<HTMLElement>;\n  thumbProps: SliderThumbProps;\n  stateAttrMap: StateAttrMap<SliderState>;\n  getAttrs: (state: SliderState) => object;\n  formatValue?: ((value: number, type: 'current' | 'pointer') => string) | undefined;\n}\n\nconst SliderContext = createContext<SliderContextValue | null>(null);\n\ntype SliderProviderProps = ProviderProps<SliderContextValue>;\n\nexport function SliderProvider({ value, children }: SliderProviderProps) {\n  return <SliderContext.Provider value={value}>{children}</SliderContext.Provider>;\n}\n\nexport function useSliderContext(): SliderContextValue {\n  const ctx = useContext(SliderContext);\n  if (!ctx) throw new Error('Slider compound components must be used within a Slider.Root');\n  return ctx;\n}\n\nexport function useSliderPointerValue(enabled = true): number {\n  const context = useSliderContext();\n  const percent = useSyncExternalStore(\n    (onChange) => context.input?.subscribe(onChange) ?? (() => {}),\n    () => (enabled ? (context.input?.current.pointerPercent ?? null) : null),\n    () => (enabled ? (context.input?.current.pointerPercent ?? null) : null)\n  );\n  return percent === null ? context.pointerValue : (context.getPointerValue?.(percent) ?? context.pointerValue);\n}\n"],"mappings":";;;;AAqBA,MAAM,gBAAgB,cAAyC,IAAI;AAInE,SAAgB,eAAe,EAAE,OAAO,YAAiC;CACvE,OAAO,oBAAC,cAAc,UAAf;EAA+B;EAAQ;CAAiC,CAAA;AACjF;AAEA,SAAgB,mBAAuC;CACrD,MAAM,MAAM,WAAW,aAAa;CACpC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,8DAA8D;CACxF,OAAO;AACT;AAEA,SAAgB,sBAAsB,UAAU,MAAc;CAC5D,MAAM,UAAU,iBAAiB;CACjC,MAAM,UAAU,sBACb,aAAa,QAAQ,OAAO,UAAU,QAAQ,YAAY,CAAC,UACrD,UAAW,QAAQ,OAAO,QAAQ,kBAAkB,OAAQ,YAC5D,UAAW,QAAQ,OAAO,QAAQ,kBAAkB,OAAQ,IACrE;CACA,OAAO,YAAY,OAAO,QAAQ,eAAgB,QAAQ,kBAAkB,OAAO,KAAK,QAAQ;AAClG"}

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

@@ -6,11 +6,9 @@ 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";
-
-//#region src/ui/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, 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 };
 }
 //#endregion
-export { 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, 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 };
 //# sourceMappingURL=index.parts.d.ts.map

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

@@ -19,6 +19,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Value: () => SliderValue
 });
 //#endregion
-export { index_parts_exports };
+export { SliderBuffer as Buffer, SliderFill as Fill, SliderPreview as Preview, SliderRoot as Root, SliderThumb as Thumb, SliderThumbnail as Thumbnail, SliderTrack as Track, SliderValue as Value, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"slider-buffer.js","names":[],"sources":["../../../../src/ui/slider/slider-buffer.tsx"],"sourcesContent":["'use client';\n\nimport 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":";;;;;AAWA,MAAa,eAAe,kBAAkD;CAC5E,aAAa;CACb,KAAK;CACL,YAAY;CACb,CAAC"}
+{"version":3,"file":"slider-buffer.js","names":[],"sources":["../../../../src/ui/slider/slider-buffer.tsx"],"sourcesContent":["'use client';\n\nimport 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":";;;;;AAWA,MAAa,eAAe,kBAAkD;CAC5E,aAAa;CACb,KAAK;CACL,YAAY;AACd,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"slider-fill.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-fill.tsx"],"mappings":";;;;;UAQiB,eAAA,SAAwB,gBAAA,QAAwB,WAAA;;cAGpD,UAAA,EAAU,OAAA,CAAA,yBAAA,CAAA,eAAA;AAAA,kBAMN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;AAAA"}
+{"version":3,"file":"slider-fill.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-fill.tsx"],"mappings":";;;UAQiB,wBAAwB,wBAAwB;;cAGpD,4BAAU,0BAAA;kBAMN;OACH,QAAQ"}

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

@@ -1 +1 @@
-{"version":3,"file":"slider-fill.js","names":[],"sources":["../../../../src/ui/slider/slider-fill.tsx"],"sourcesContent":["'use client';\n\nimport 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":";;;;;AAWA,MAAa,aAAa,kBAAgD;CACxE,aAAa;CACb,KAAK;CACL,YAAY;CACb,CAAC"}
+{"version":3,"file":"slider-fill.js","names":[],"sources":["../../../../src/ui/slider/slider-fill.tsx"],"sourcesContent":["'use client';\n\nimport 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":";;;;;AAWA,MAAa,aAAa,kBAAgD;CACxE,aAAa;CACb,KAAK;CACL,YAAY;AACd,CAAC"}

package/dist/dev/ui/slider/slider-preview.d.ts

@@ -1,15 +1,13 @@
 import { UIComponentProps } from "../../utils/types.js";
 import { SliderPreviewOverflow } from "@videojs/core/dom";
-import * as _$react from "react";
 import { SliderState } from "@videojs/core";
-
 //#region src/ui/slider/slider-preview.d.ts
 interface SliderPreviewProps extends UIComponentProps<'div', SliderState> {
   /** How the preview handles the slider boundaries. `'clamp'` keeps the preview within bounds, `'visible'` allows it to extend beyond the edges. */
   overflow?: SliderPreviewOverflow | undefined;
 }
 /** Positioning container for preview content that tracks the pointer along the slider. */
-declare const SliderPreview: _$react.ForwardRefExoticComponent<Omit<SliderPreviewProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const SliderPreview: import("react").ForwardRefExoticComponent<Omit<SliderPreviewProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace SliderPreview {
   type Props = SliderPreviewProps;
 }

package/dist/dev/ui/slider/slider-preview.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider-preview.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-preview.tsx"],"mappings":";;;;;;UAYiB,kBAAA,SAA2B,gBAAA,QAAwB,WAAA;;EAElE,QAAA,GAAW,qBAAA;AAAA;;cAIA,aAAA,EAAa,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,kBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAsCT,aAAA;EAAA,KACH,KAAA,GAAQ,kBAAA;AAAA"}
+{"version":3,"file":"slider-preview.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-preview.tsx"],"mappings":";;;;UAaiB,2BAA2B,wBAAwB;;EAElE,WAAW;;;cAIA,+BAAa,0BAAA,KAAA,6CAAA,cAAA;kBAmCT;OACH,QAAQ"}

package/dist/dev/ui/slider/slider-preview.js

@@ -3,6 +3,7 @@ import { renderElement } from "../../utils/use-render.js";
 import { useSliderContext } from "./context.js";
 import { getSliderPreviewStyle } from "@videojs/core/dom";
 import { forwardRef, useEffect, useRef, useState } from "react";
+import { observeResize } from "@videojs/utils/dom";
 //#region src/ui/slider/slider-preview.tsx
 /** Positioning container for preview content that tracks the pointer along the slider. */
 const SliderPreview = forwardRef(function SliderPreview(componentProps, forwardedRef) {
@@ -14,11 +15,9 @@ const SliderPreview = forwardRef(function SliderPreview(componentProps, forwarde
 	useEffect(() => {
 		const el = measureRef.current;
 		if (!el) return;
-		const observer = new ResizeObserver(([entry]) => {
+		return observeResize(el, ([entry]) => {
 			setWidth(entry.contentRect.width);
 		});
-		observer.observe(el);
-		return () => observer.disconnect();
 	}, []);
 	const positionStyle = getSliderPreviewStyle(width, overflow);
 	return renderElement("div", {

package/dist/dev/ui/slider/slider-preview.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider-preview.js","names":[],"sources":["../../../../src/ui/slider/slider-preview.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState } from '@videojs/core';\nimport type { SliderPreviewOverflow } from '@videojs/core/dom';\nimport { getSliderPreviewStyle } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useEffect, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSliderContext } from './context';\n\nexport interface SliderPreviewProps extends UIComponentProps<'div', SliderState> {\n  /** How the preview handles the slider boundaries. `'clamp'` keeps the preview within bounds, `'visible'` allows it to extend beyond the edges. */\n  overflow?: SliderPreviewOverflow | undefined;\n}\n\n/** Positioning container for preview content that tracks the pointer along the slider. */\nexport const SliderPreview = forwardRef(function SliderPreview(\n  componentProps: SliderPreviewProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, overflow = 'clamp', ...elementProps } = componentProps;\n\n  const context = useSliderContext();\n  const { state } = context;\n\n  const measureRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    const el = measureRef.current;\n    if (!el) return;\n\n    const observer = new ResizeObserver(([entry]) => {\n      setWidth(entry!.contentRect.width);\n    });\n\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  const positionStyle = getSliderPreviewStyle(width, overflow);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: context.stateAttrMap,\n      ref: [forwardedRef, measureRef],\n      props: [{ style: positionStyle }, elementProps],\n    }\n  );\n});\n\nexport namespace SliderPreview {\n  export type Props = SliderPreviewProps;\n}\n"],"mappings":";;;;;;;AAkBA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,WAAW,SAAS,GAAG,iBAAiB;CAE1E,MAAM,UAAU,kBAAkB;CAClC,MAAM,EAAE,UAAU;CAElB,MAAM,aAAa,OAAuB,KAAK;CAC/C,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;AAErC,iBAAgB;EACd,MAAM,KAAK,WAAW;AACtB,MAAI,CAAC,GAAI;EAET,MAAM,WAAW,IAAI,gBAAgB,CAAC,WAAW;AAC/C,YAAS,MAAO,YAAY,MAAM;IAClC;AAEF,WAAS,QAAQ,GAAG;AACpB,eAAa,SAAS,YAAY;IACjC,EAAE,CAAC;CAEN,MAAM,gBAAgB,sBAAsB,OAAO,SAAS;AAE5D,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc,QAAQ;EACtB,KAAK,CAAC,cAAc,WAAW;EAC/B,OAAO,CAAC,EAAE,OAAO,eAAe,EAAE,aAAa;EAChD,CACF;EACD"}
+{"version":3,"file":"slider-preview.js","names":[],"sources":["../../../../src/ui/slider/slider-preview.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState } from '@videojs/core';\nimport type { SliderPreviewOverflow } from '@videojs/core/dom';\nimport { getSliderPreviewStyle } from '@videojs/core/dom';\nimport { observeResize } from '@videojs/utils/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useEffect, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSliderContext } from './context';\n\nexport interface SliderPreviewProps extends UIComponentProps<'div', SliderState> {\n  /** How the preview handles the slider boundaries. `'clamp'` keeps the preview within bounds, `'visible'` allows it to extend beyond the edges. */\n  overflow?: SliderPreviewOverflow | undefined;\n}\n\n/** Positioning container for preview content that tracks the pointer along the slider. */\nexport const SliderPreview = forwardRef(function SliderPreview(\n  componentProps: SliderPreviewProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, overflow = 'clamp', ...elementProps } = componentProps;\n\n  const context = useSliderContext();\n  const { state } = context;\n\n  const measureRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    const el = measureRef.current;\n    if (!el) return;\n\n    return observeResize(el, ([entry]) => {\n      setWidth(entry!.contentRect.width);\n    });\n  }, []);\n\n  const positionStyle = getSliderPreviewStyle(width, overflow);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: context.stateAttrMap,\n      ref: [forwardedRef, measureRef],\n      props: [{ style: positionStyle }, elementProps],\n    }\n  );\n});\n\nexport namespace SliderPreview {\n  export type Props = SliderPreviewProps;\n}\n"],"mappings":";;;;;;;;AAmBA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,WAAW,SAAS,GAAG,iBAAiB;CAE1E,MAAM,UAAU,iBAAiB;CACjC,MAAM,EAAE,UAAU;CAElB,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CAEpC,gBAAgB;EACd,MAAM,KAAK,WAAW;EACtB,IAAI,CAAC,IAAI;EAET,OAAO,cAAc,KAAK,CAAC,WAAW;GACpC,SAAS,MAAO,YAAY,KAAK;EACnC,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,sBAAsB,OAAO,QAAQ;CAE3D,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc,QAAQ;EACtB,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CAAC,EAAE,OAAO,cAAc,GAAG,YAAY;CAChD,CACF;AACF,CAAC"}

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

@@ -1,7 +1,5 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { SliderCore } from "@videojs/core";
-
 //#region src/ui/slider/slider-root.d.ts
 interface SliderRootProps extends UIComponentProps<'div', SliderCore.State>, SliderCore.Props {
   onValueChange?: ((value: number) => void) | undefined;
@@ -9,7 +7,7 @@ interface SliderRootProps extends UIComponentProps<'div', SliderCore.State>, Sli
   onDragStart?: (() => void) | undefined;
   onDragEnd?: (() => void) | undefined;
 }
-declare const SliderRoot: _$react.ForwardRefExoticComponent<Omit<SliderRootProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const SliderRoot: import("react").ForwardRefExoticComponent<Omit<SliderRootProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace SliderRoot {
   type Props = SliderRootProps;
   type State = SliderCore.State;

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

@@ -1 +1 @@
-{"version":3,"file":"slider-root.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"mappings":";;;;;UAYiB,eAAA,SAAwB,gBAAA,QAAwB,UAAA,CAAW,KAAA,GAAQ,UAAA,CAAW,KAAA;EAC7F,aAAA,KAAkB,KAAA;EAClB,aAAA,KAAkB,KAAA;EAClB,WAAA;EACA,SAAA;AAAA;AAAA,cAGW,UAAA,EAAU,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,eAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAgFN,UAAA;EAAA,KACH,KAAA,GAAQ,eAAA;EAAA,KACR,KAAA,GAAQ,UAAA,CAAW,KAAA;AAAA"}
+{"version":3,"file":"slider-root.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"mappings":";;;UAaiB,wBAAwB,wBAAwB,WAAW,QAAQ,WAAW;EAC7F,kBAAkB;EAClB,kBAAkB;EAClB;EACA;;cAGW,4BAAU,0BAAA,KAAA,0CAAA,cAAA;kBAuFN;OACH,QAAQ;OACR,QAAQ,WAAW"}