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

package/dist/dev/ui/popover/popover-trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-trigger.js","names":[],"sources":["../../../../src/ui/popover/popover-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverTriggerProps extends UIComponentProps<'button', PopoverState> {}\n\n/** Button that toggles the popover visibility. Renders a `<button>` element. */\nexport const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(function PopoverTrigger(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n\n  const triggerRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      popover.setTriggerElement(el);\n      if (el && supportsAnchorPositioning()) {\n        el.style.setProperty('anchor-name', `--${anchorName}`);\n      }\n    },\n    [popover, anchorName]\n  );\n\n  // Remap DOM focus events to React synthetic event names.\n  // createPopover() uses onFocusIn/onFocusOut (matching DOM focusin/focusout),\n  // but React maps those to onFocus/onBlur.\n  const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.triggerProps;\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, triggerRef],\n      props: [\n        {\n          type: 'button' as const,\n          ...core.getTriggerAttrs(state, popupId),\n        },\n        { ...restTriggerProps, onFocus: onFocusIn, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace PopoverTrigger {\n  export type Props = PopoverTriggerProps;\n  export type State = PopoverState;\n}\n"],"mappings":";;;;;;;AAaA,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,mBAAmB;CAEvF,MAAM,aAAa,aAChB,OAAiC;AAChC,UAAQ,kBAAkB,GAAG;AAC7B,MAAI,MAAM,2BAA2B,CACnC,IAAG,MAAM,YAAY,eAAe,KAAK,aAAa;IAG1D,CAAC,SAAS,WAAW,CACtB;CAKD,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;AAE/D,QAAO,cACL,UACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA;EACA,KAAK,CAAC,cAAc,WAAW;EAC/B,OAAO;GACL;IACE,MAAM;IACN,GAAG,KAAK,gBAAgB,OAAO,QAAQ;IACxC;GACD;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;IAAY;GAC/D;GACD;EACF,CACF;EACD"}
+{"version":3,"file":"popover-trigger.js","names":[],"sources":["../../../../src/ui/popover/popover-trigger.tsx"],"sourcesContent":["'use client';\n\nimport type { PopoverState } from '@videojs/core';\nimport { supportsAnchorPositioning } from '@videojs/utils/dom';\nimport { forwardRef, useCallback } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { usePopoverContext } from './context';\n\nexport interface PopoverTriggerProps extends UIComponentProps<'button', PopoverState> {}\n\n/** Button that toggles the popover visibility. Renders a `<button>` element. */\nexport const PopoverTrigger = forwardRef<HTMLButtonElement, PopoverTriggerProps>(function PopoverTrigger(\n  { render, className, style, ...elementProps },\n  forwardedRef\n) {\n  const { core, popover, state, stateAttrMap, anchorName, popupId } = usePopoverContext();\n\n  const triggerRef = useCallback(\n    (el: HTMLButtonElement | null) => {\n      popover.setTriggerElement(el);\n      if (el && supportsAnchorPositioning()) {\n        el.style.setProperty('anchor-name', `--${anchorName}`);\n      }\n    },\n    [popover, anchorName]\n  );\n\n  // Remap DOM focus events to React synthetic event names.\n  // createPopover() uses onFocusIn/onFocusOut (matching DOM focusin/focusout),\n  // but React maps those to onFocus/onBlur.\n  const { onFocusIn, onFocusOut, ...restTriggerProps } = popover.triggerProps;\n\n  return renderElement(\n    'button',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap,\n      ref: [forwardedRef, triggerRef],\n      props: [\n        {\n          type: 'button' as const,\n          ...core.getTriggerAttrs(state, popupId),\n        },\n        { ...restTriggerProps, onFocus: onFocusIn, onBlur: onFocusOut },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace PopoverTrigger {\n  export type Props = PopoverTriggerProps;\n  export type State = PopoverState;\n}\n"],"mappings":";;;;;;;AAaA,MAAa,iBAAiB,WAAmD,SAAS,eACxF,EAAE,QAAQ,WAAW,OAAO,GAAG,gBAC/B,cACA;CACA,MAAM,EAAE,MAAM,SAAS,OAAO,cAAc,YAAY,YAAY,kBAAkB;CAEtF,MAAM,aAAa,aAChB,OAAiC;EAChC,QAAQ,kBAAkB,EAAE;EAC5B,IAAI,MAAM,0BAA0B,GAClC,GAAG,MAAM,YAAY,eAAe,KAAK,YAAY;CAEzD,GACA,CAAC,SAAS,UAAU,CACtB;CAKA,MAAM,EAAE,WAAW,YAAY,GAAG,qBAAqB,QAAQ;CAE/D,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA;EACA,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO;GACL;IACE,MAAM;IACN,GAAG,KAAK,gBAAgB,OAAO,OAAO;GACxC;GACA;IAAE,GAAG;IAAkB,SAAS;IAAW,QAAQ;GAAW;GAC9D;EACF;CACF,CACF;AACF,CAAC"}

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

@@ -1,7 +1,5 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { PosterCore } from "@videojs/core";
-
 //#region src/ui/poster/poster.d.ts
 interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}
 /**
@@ -18,7 +16,7 @@ interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}
  * />
  * ```
  */
-declare const Poster: _$react.ForwardRefExoticComponent<Omit<PosterProps, "ref"> & _$react.RefAttributes<HTMLImageElement>>;
+declare const Poster: import("react").ForwardRefExoticComponent<Omit<PosterProps, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
 declare namespace Poster {
   type Props = PosterProps;
   type State = PosterCore.State;

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

@@ -1 +1 @@
-{"version":3,"file":"poster.d.ts","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"mappings":";;;;;UAWiB,WAAA,SAAoB,gBAAA,QAAwB,UAAA,CAAW,KAAA;;AAAxE;;;;;;;;;AAgBA;;;;cAAa,MAAA,EAAM,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,WAAA,WAAA,OAAA,CAAA,aAAA,CAAA,gBAAA;AAAA,kBAiDF,MAAA;EAAA,KACH,KAAA,GAAQ,WAAA;EAAA,KACR,KAAA,GAAQ,UAAA,CAAW,KAAA;AAAA"}
+{"version":3,"file":"poster.d.ts","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"mappings":";;;UAWiB,oBAAoB,wBAAwB,WAAW;;;;;;;;;;;;;;;cAgB3D,wBAAM,0BAAA,KAAA,sCAAA,cAAA;kBAiDF;OACH,QAAQ;OACR,QAAQ,WAAW"}

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

@@ -1 +1 @@
-{"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["'use client';\n\nimport { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef, SyntheticEvent } from 'react';\nimport { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}\n\n/**\n * Displays the video poster image. Shows before playback starts, hides after.\n *\n * @example\n * ```tsx\n * <Poster src=\"poster.jpg\" alt=\"Video description\" />\n *\n * <Poster\n *   src=\"poster.jpg\"\n *   alt=\"Video description\"\n *   className={(state) => state.visible ? 'visible' : 'hidden'}\n * />\n * ```\n */\nexport const Poster = forwardRef(function Poster(\n  componentProps: PosterProps,\n  forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new PosterCore());\n\n  // Track when the current src has finished loading so the CSS blur-up\n  // sequence can show the placeholder first, then crossfade to the full image.\n  const src = (elementProps as { src?: string }).src;\n  const [loadedSrc, setLoadedSrc] = useState<string | undefined>(undefined);\n  const loaded = loadedSrc === src;\n  const imgRef = useRef<HTMLImageElement | null>(null);\n\n  // A cached image may already be complete when the element mounts, in which\n  // case onLoad never fires. Check synchronously after mount and on src change.\n  useEffect(() => {\n    const img = imgRef.current;\n    if (img?.complete && img.naturalWidth > 0 && img.getAttribute('src') === src) {\n      setLoadedSrc(src);\n    }\n  }, [src]);\n\n  const handleLoad = useCallback((event: SyntheticEvent<HTMLImageElement>) => {\n    setLoadedSrc(event.currentTarget.getAttribute('src') ?? undefined);\n  }, []);\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('Poster', 'playback');\n    return null;\n  }\n\n  core.setMedia(playback);\n\n  return renderElement(\n    'img',\n    { render, className, style },\n    {\n      state: core.getState(),\n      stateAttrMap: PosterDataAttrs,\n      ref: [forwardedRef, imgRef],\n      props: [elementProps, { 'data-loaded': loaded ? '' : undefined, onLoad: handleLoad }],\n    }\n  );\n});\n\nexport namespace Poster {\n  export type Props = PosterProps;\n  export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,eAAe;CAE1C,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;CAI/C,MAAM,MAAO,aAAkC;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAA,EAAU;CACzE,MAAM,SAAS,cAAc;CAC7B,MAAM,SAAS,OAAgC,KAAK;AAIpD,iBAAgB;EACd,MAAM,MAAM,OAAO;AACnB,MAAI,KAAK,YAAY,IAAI,eAAe,KAAK,IAAI,aAAa,MAAM,KAAK,IACvE,cAAa,IAAI;IAElB,CAAC,IAAI,CAAC;CAET,MAAM,aAAa,aAAa,UAA4C;AAC1E,eAAa,MAAM,cAAc,aAAa,MAAM,IAAI,KAAA,EAAU;IACjE,EAAE,CAAC;AAEN,KAAI,CAAC,UAAU;AACA,oBAAkB,UAAU,WAAW;AACpD,SAAO;;AAGT,MAAK,SAAS,SAAS;AAEvB,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE,OAAO,KAAK,UAAU;EACtB,cAAc;EACd,KAAK,CAAC,cAAc,OAAO;EAC3B,OAAO,CAAC,cAAc;GAAE,eAAe,SAAS,KAAK,KAAA;GAAW,QAAQ;GAAY,CAAC;EACtF,CACF;EACD"}
+{"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["'use client';\n\nimport { PosterCore, PosterDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef, SyntheticEvent } from 'react';\nimport { forwardRef, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface PosterProps extends UIComponentProps<'img', PosterCore.State> {}\n\n/**\n * Displays the video poster image. Shows before playback starts, hides after.\n *\n * @example\n * ```tsx\n * <Poster src=\"poster.jpg\" alt=\"Video description\" />\n *\n * <Poster\n *   src=\"poster.jpg\"\n *   alt=\"Video description\"\n *   className={(state) => state.visible ? 'visible' : 'hidden'}\n * />\n * ```\n */\nexport const Poster = forwardRef(function Poster(\n  componentProps: PosterProps,\n  forwardedRef: ForwardedRef<HTMLImageElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const playback = usePlayer(selectPlayback);\n\n  const [core] = useState(() => new PosterCore());\n\n  // Track when the current src has finished loading so the CSS blur-up\n  // sequence can show the placeholder first, then crossfade to the full image.\n  const src = (elementProps as { src?: string }).src;\n  const [loadedSrc, setLoadedSrc] = useState<string | undefined>(undefined);\n  const loaded = loadedSrc === src;\n  const imgRef = useRef<HTMLImageElement | null>(null);\n\n  // A cached image may already be complete when the element mounts, in which\n  // case onLoad never fires. Check synchronously after mount and on src change.\n  useEffect(() => {\n    const img = imgRef.current;\n    if (img?.complete && img.naturalWidth > 0 && img.getAttribute('src') === src) {\n      setLoadedSrc(src);\n    }\n  }, [src]);\n\n  const handleLoad = useCallback((event: SyntheticEvent<HTMLImageElement>) => {\n    setLoadedSrc(event.currentTarget.getAttribute('src') ?? undefined);\n  }, []);\n\n  if (!playback) {\n    if (__DEV__) logMissingFeature('Poster', 'playback');\n    return null;\n  }\n\n  core.setMedia(playback);\n\n  return renderElement(\n    'img',\n    { render, className, style },\n    {\n      state: core.getState(),\n      stateAttrMap: PosterDataAttrs,\n      ref: [forwardedRef, imgRef],\n      props: [elementProps, { 'data-loaded': loaded ? '' : undefined, onLoad: handleLoad }],\n    }\n  );\n});\n\nexport namespace Poster {\n  export type Props = PosterProps;\n  export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA2BA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;CAI9C,MAAM,MAAO,aAAkC;CAC/C,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAA,CAAS;CACxE,MAAM,SAAS,cAAc;CAC7B,MAAM,SAAS,OAAgC,IAAI;CAInD,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,KAAK,YAAY,IAAI,eAAe,KAAK,IAAI,aAAa,KAAK,MAAM,KACvE,aAAa,GAAG;CAEpB,GAAG,CAAC,GAAG,CAAC;CAER,MAAM,aAAa,aAAa,UAA4C;EAC1E,aAAa,MAAM,cAAc,aAAa,KAAK,KAAK,KAAA,CAAS;CACnE,GAAG,CAAC,CAAC;CAEL,IAAI,CAAC,UAAU;EACA,kBAAkB,UAAU,UAAU;EACnD,OAAO;CACT;CAEA,KAAK,SAAS,QAAQ;CAEtB,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE,OAAO,KAAK,SAAS;EACrB,cAAc;EACd,KAAK,CAAC,cAAc,MAAM;EAC1B,OAAO,CAAC,cAAc;GAAE,eAAe,SAAS,KAAK,KAAA;GAAW,QAAQ;EAAW,CAAC;CACtF,CACF;AACF,CAAC"}

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

@@ -1,5 +1,4 @@
 import { QualityRadioGroupCore } from "@videojs/core";
-
 //#region src/ui/quality/use-quality-options.d.ts
 interface QualityOptionsProps extends QualityRadioGroupCore.Props {}
 interface QualityOption {
@@ -16,6 +15,13 @@ interface QualityOptionsResult {
   disabled: 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":";;UAUiB,4BAA4B,sBAAsB;UAElD;EACf;EACA;EACA;EACA;EACA;;UAGe;EACf,OAAO,sBAAsB;EAC7B;EACA,SAAS;EACT;EACA,WAAW;;;;;;;;;iBAUG,kBAAkB,QAAQ,sBAAsB;kBAyC/C;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}

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

@@ -1,12 +1,22 @@
 "use client";
+import { useTranslator } from "../../i18n/context.js";
 import { usePlayer } from "../../player/context.js";
 import { logMissingFeature, selectQuality } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
 import { useCallback, useState } from "react";
 import { QUALITY_AUTO_VALUE, QualityRadioGroupCore } from "@videojs/core";
 //#region src/ui/quality/use-quality-options.ts
+/**
+* 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 t = useTranslator();
 	const [core] = useState(() => new QualityRadioGroupCore());
 	core.setProps(props ?? {});
 	const setValue = useCallback((value) => core.selectValue(media, value), [core, media]);
@@ -21,11 +31,11 @@ function useQualityOptions(props) {
 		value: state.value,
 		options: [{
 			value: QUALITY_AUTO_VALUE,
-			label: state.autoLabel,
+			label: translateText(state.autoLabel, t, state.autoLabelParams),
 			disabled: state.disabled
 		}, ...state.renditions.map((rendition) => ({
 			value: rendition.value,
-			label: rendition.label,
+			label: translateText(rendition.label, t),
 			...rendition.tier && { tier: rendition.tier },
 			...rendition.badge && { badge: rendition.badge },
 			disabled: state.disabled

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 { QUALITY_AUTO_VALUE, QualityRadioGroupCore } from '@videojs/core';\nimport { logMissingFeature, selectQuality } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { useCallback, useState } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\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\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  const media = usePlayer(selectQuality);\n  const t = useTranslator();\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      {\n        value: QUALITY_AUTO_VALUE,\n        label: translateText(state.autoLabel, t, state.autoLabelParams),\n        disabled: state.disabled,\n      },\n      ...state.renditions.map((rendition) => ({\n        value: rendition.value,\n        label: translateText(rendition.label, t),\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":";;;;;;;;;;;;;;;AAmCA,SAAgB,kBAAkB,OAA0D;CAC1F;CAEA,MAAM,QAAQ,UAAU,aAAa;CACrC,MAAM,IAAI,cAAc;CACxB,MAAM,CAAC,QAAQ,eAAe,IAAI,sBAAsB,CAAC;CAEzD,KAAK,SAAS,SAAS,CAAC,CAAC;CAEzB,MAAM,WAAW,aAAa,UAAkB,KAAK,YAAY,OAAQ,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC;CAE9F,IAAI,CAAC,OAAO;EACG,kBAAkB,qBAAqB,cAAc,eAAe,SAAS;EAC1F,OAAO;CACT;CAEA,KAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,SAAS;CAE5B,OAAO;EACL;EACA,OAAO,MAAM;EACb,SAAS,CACP;GACE,OAAO;GACP,OAAO,cAAc,MAAM,WAAW,GAAG,MAAM,eAAe;GAC9D,UAAU,MAAM;EAClB,GACA,GAAG,MAAM,WAAW,KAAK,eAAe;GACtC,OAAO,UAAU;GACjB,OAAO,cAAc,UAAU,OAAO,CAAC;GACvC,GAAI,UAAU,QAAQ,EAAE,MAAM,UAAU,KAAK;GAC7C,GAAI,UAAU,SAAS,EAAE,OAAO,UAAU,MAAM;GAChD,UAAU,MAAM;EAClB,EAAE,CACJ;EACA,UAAU,MAAM;EAChB;CACF;AACF"}

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.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-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,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.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 { 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,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"}

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":";;;;UAYiB,2BAA2B,wBAAwB;;EAElE,WAAW;;;cAIA,+BAAa,0BAAA,KAAA,6CAAA,cAAA;kBAsCT;OACH,QAAQ"}

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 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,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,MAAM,WAAW,IAAI,gBAAgB,CAAC,WAAW;GAC/C,SAAS,MAAO,YAAY,KAAK;EACnC,CAAC;EAED,SAAS,QAAQ,EAAE;EACnB,aAAa,SAAS,WAAW;CACnC,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;kBAoFN;OACH,QAAQ;OACR,QAAQ,WAAW"}

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

@@ -1,8 +1,10 @@
 "use client";
+import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useSlider } from "../hooks/use-slider.js";
 import { SliderProvider } from "./context.js";
 import { getSliderCSSVars } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
 import { forwardRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { SliderCore, SliderDataAttrs } from "@videojs/core";
@@ -10,6 +12,7 @@ import { SliderCore, SliderDataAttrs } from "@videojs/core";
 const SliderRoot = forwardRef(function SliderRoot(componentProps, forwardedRef) {
 	const { render, className, style, label, min, max, step, largeStep, orientation, disabled, thumbAlignment, value = 0, onValueChange, onValueCommit, onDragStart, onDragEnd, ...elementProps } = componentProps;
 	const [core] = useState(() => new SliderCore());
+	const translator = useTranslator();
 	core.setProps({
 		label,
 		min,
@@ -44,7 +47,13 @@ const SliderRoot = forwardRef(function SliderRoot(componentProps, forwardedRef)
 			thumbRef: sliderThumbRef,
 			thumbProps,
 			stateAttrMap: SliderDataAttrs,
-			getAttrs: (sliderState) => core.getAttrs(sliderState),
+			getAttrs: (sliderState) => {
+				const attrs = core.getAttrs(sliderState);
+				return {
+					...attrs,
+					"aria-label": translateText(attrs["aria-label"], translator)
+				};
+			},
 			formatValue: void 0
 		},
 		children: renderElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"slider-root.js","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { SliderCore, SliderDataAttrs } from '@videojs/core';\nimport { getSliderCSSVars } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from './context';\n\nexport interface SliderRootProps extends UIComponentProps<'div', SliderCore.State>, SliderCore.Props {\n  onValueChange?: ((value: number) => void) | undefined;\n  onValueCommit?: ((value: number) => void) | undefined;\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const SliderRoot = forwardRef(function SliderRoot(\n  componentProps: SliderRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    render,\n    className,\n    style,\n    label,\n    min,\n    max,\n    step,\n    largeStep,\n    orientation,\n    disabled,\n    thumbAlignment,\n    value = 0,\n    onValueChange,\n    onValueCommit,\n    onDragStart,\n    onDragEnd,\n    ...elementProps\n  } = componentProps;\n\n  const [core] = useState(() => new SliderCore());\n  core.setProps({ label, min, max, step, largeStep, orientation, disabled, thumbAlignment });\n\n  const {\n    state,\n    cssVars,\n    rootRef,\n    thumbRef: sliderThumbRef,\n    rootProps,\n    rootStyle,\n    thumbProps,\n  } = useSlider({\n    computeState: (input) => {\n      core.setInput(input);\n      return core.getSliderState(value);\n    },\n    getPercent: () => core.percentFromValue(value),\n    getStepPercent: () => core.getStepPercent(),\n    getLargeStepPercent: () => core.getLargeStepPercent(),\n    orientation,\n    disabled,\n    adjustPercent: (rawPercent, thumbSize, trackSize) =>\n      core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n    getCSSVars: getSliderCSSVars,\n    onValueChange: (percent) => onValueChange?.(core.valueFromPercent(percent)),\n    onValueCommit: (percent) => onValueCommit?.(core.valueFromPercent(percent)),\n    onDragStart,\n    onDragEnd,\n  });\n\n  return (\n    <SliderProvider\n      value={{\n        state,\n        pointerValue: core.valueFromPercent(state.pointerPercent),\n        thumbRef: sliderThumbRef,\n        thumbProps,\n        stateAttrMap: SliderDataAttrs,\n        getAttrs: (sliderState) => core.getAttrs(sliderState),\n        formatValue: undefined,\n      }}\n    >\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: SliderDataAttrs,\n          ref: [forwardedRef, rootRef],\n          props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n        }\n      )}\n    </SliderProvider>\n  );\n});\n\nexport namespace SliderRoot {\n  export type Props = SliderRootProps;\n  export type State = SliderCore.State;\n}\n"],"mappings":";;;;;;;;;AAmBA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EACJ,QACA,WACA,OACA,OACA,KACA,KACA,MACA,WACA,aACA,UACA,gBACA,QAAQ,GACR,eACA,eACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,YAAY,CAAC;AAC/C,MAAK,SAAS;EAAE;EAAO;EAAK;EAAK;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAE1F,MAAM,EACJ,OACA,SACA,SACA,UAAU,gBACV,WACA,WACA,eACE,UAAU;EACZ,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,UAAO,KAAK,eAAe,MAAM;;EAEnC,kBAAkB,KAAK,iBAAiB,MAAM;EAC9C,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,QAAQ,CAAC;EAC3E,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,QAAQ,CAAC;EAC3E;EACA;EACD,CAAC;AAEF,QACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD,UAAU;GACV;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAY;GACrD,aAAa,KAAA;GACd;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;EACc,CAAA;EAEnB"}
+{"version":3,"file":"slider-root.js","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { SliderCore, SliderDataAttrs } from '@videojs/core';\nimport { getSliderCSSVars } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from './context';\n\nexport interface SliderRootProps extends UIComponentProps<'div', SliderCore.State>, SliderCore.Props {\n  onValueChange?: ((value: number) => void) | undefined;\n  onValueCommit?: ((value: number) => void) | undefined;\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const SliderRoot = forwardRef(function SliderRoot(\n  componentProps: SliderRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const {\n    render,\n    className,\n    style,\n    label,\n    min,\n    max,\n    step,\n    largeStep,\n    orientation,\n    disabled,\n    thumbAlignment,\n    value = 0,\n    onValueChange,\n    onValueCommit,\n    onDragStart,\n    onDragEnd,\n    ...elementProps\n  } = componentProps;\n\n  const [core] = useState(() => new SliderCore());\n  const translator = useTranslator();\n  core.setProps({ label, min, max, step, largeStep, orientation, disabled, thumbAlignment });\n\n  const {\n    state,\n    cssVars,\n    rootRef,\n    thumbRef: sliderThumbRef,\n    rootProps,\n    rootStyle,\n    thumbProps,\n  } = useSlider({\n    computeState: (input) => {\n      core.setInput(input);\n      return core.getSliderState(value);\n    },\n    getPercent: () => core.percentFromValue(value),\n    getStepPercent: () => core.getStepPercent(),\n    getLargeStepPercent: () => core.getLargeStepPercent(),\n    orientation,\n    disabled,\n    adjustPercent: (rawPercent, thumbSize, trackSize) =>\n      core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n    getCSSVars: getSliderCSSVars,\n    onValueChange: (percent) => onValueChange?.(core.valueFromPercent(percent)),\n    onValueCommit: (percent) => onValueCommit?.(core.valueFromPercent(percent)),\n    onDragStart,\n    onDragEnd,\n  });\n\n  return (\n    <SliderProvider\n      value={{\n        state,\n        pointerValue: core.valueFromPercent(state.pointerPercent),\n        thumbRef: sliderThumbRef,\n        thumbProps,\n        stateAttrMap: SliderDataAttrs,\n        getAttrs: (sliderState) => {\n          const attrs = core.getAttrs(sliderState);\n          return { ...attrs, 'aria-label': translateText(attrs['aria-label'], translator) };\n        },\n        formatValue: undefined,\n      }}\n    >\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: SliderDataAttrs,\n          ref: [forwardedRef, rootRef],\n          props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n        }\n      )}\n    </SliderProvider>\n  );\n});\n\nexport namespace SliderRoot {\n  export type Props = SliderRootProps;\n  export type State = SliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;AAoBA,MAAa,aAAa,WAAW,SAAS,WAC5C,gBACA,cACA;CACA,MAAM,EACJ,QACA,WACA,OACA,OACA,KACA,KACA,MACA,WACA,aACA,UACA,gBACA,QAAQ,GACR,eACA,eACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;CAC9C,MAAM,aAAa,cAAc;CACjC,KAAK,SAAS;EAAE;EAAO;EAAK;EAAK;EAAM;EAAW;EAAa;EAAU;CAAe,CAAC;CAEzF,MAAM,EACJ,OACA,SACA,SACA,UAAU,gBACV,WACA,WACA,eACE,UAAU;EACZ,eAAe,UAAU;GACvB,KAAK,SAAS,KAAK;GACnB,OAAO,KAAK,eAAe,KAAK;EAClC;EACA,kBAAkB,KAAK,iBAAiB,KAAK;EAC7C,sBAAsB,KAAK,eAAe;EAC1C,2BAA2B,KAAK,oBAAoB;EACpD;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,SAAS;EACjE,YAAY;EACZ,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,OAAO,CAAC;EAC1E,gBAAgB,YAAY,gBAAgB,KAAK,iBAAiB,OAAO,CAAC;EAC1E;EACA;CACF,CAAC;CAED,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,cAAc;GACxD,UAAU;GACV;GACA,cAAc;GACd,WAAW,gBAAgB;IACzB,MAAM,QAAQ,KAAK,SAAS,WAAW;IACvC,OAAO;KAAE,GAAG;KAAO,cAAc,cAAc,MAAM,eAAe,UAAU;IAAE;GAClF;GACA,aAAa,KAAA;EACf;EAEC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,OAAO;GAC3B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;IAAU,EAAE;IAAG;IAAW;GAAY;EAC1E,CACF;CACc,CAAA;AAEpB,CAAC"}

package/dist/dev/ui/slider/slider-thumb.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-thumb.d.ts
 interface SliderThumbProps extends UIComponentProps<'div', SliderState> {}
 /** Draggable handle for setting the slider value. Receives focus and handles keyboard interaction. */
-declare const SliderThumb: _$react.ForwardRefExoticComponent<Omit<SliderThumbProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const SliderThumb: import("react").ForwardRefExoticComponent<Omit<SliderThumbProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace SliderThumb {
   type Props = SliderThumbProps;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"slider-thumb.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-thumb.tsx"],"mappings":";;;;;UAUiB,gBAAA,SAAyB,gBAAA,QAAwB,WAAA;;cAGrD,WAAA,EAAW,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,gBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAsBP,WAAA;EAAA,KACH,KAAA,GAAQ,gBAAA;AAAA"}
+{"version":3,"file":"slider-thumb.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-thumb.tsx"],"mappings":";;;UAUiB,yBAAyB,wBAAwB;;cAGrD,6BAAW,0BAAA,KAAA,2CAAA,cAAA;kBAsBP;OACH,QAAQ"}

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

@@ -1 +1 @@
-{"version":3,"file":"slider-thumb.js","names":[],"sources":["../../../../src/ui/slider/slider-thumb.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState } 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 { useSliderContext } from './context';\n\nexport interface SliderThumbProps extends UIComponentProps<'div', SliderState> {}\n\n/** Draggable handle for setting the slider value. Receives focus and handles keyboard interaction. */\nexport const SliderThumb = forwardRef(function SliderThumb(\n  componentProps: SliderThumbProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const context = useSliderContext();\n  const { state, thumbRef, thumbProps, getAttrs } = context;\n  const attrs = getAttrs(state);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: context.stateAttrMap,\n      ref: [forwardedRef, thumbRef],\n      props: [attrs, thumbProps, elementProps],\n    }\n  );\n});\n\nexport namespace SliderThumb {\n  export type Props = SliderThumbProps;\n}\n"],"mappings":";;;;;;AAaA,MAAa,cAAc,WAAW,SAAS,YAC7C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,UAAU,kBAAkB;CAClC,MAAM,EAAE,OAAO,UAAU,YAAY,aAAa;CAClD,MAAM,QAAQ,SAAS,MAAM;AAE7B,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc,QAAQ;EACtB,KAAK,CAAC,cAAc,SAAS;EAC7B,OAAO;GAAC;GAAO;GAAY;GAAa;EACzC,CACF;EACD"}
+{"version":3,"file":"slider-thumb.js","names":[],"sources":["../../../../src/ui/slider/slider-thumb.tsx"],"sourcesContent":["'use client';\n\nimport type { SliderState } 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 { useSliderContext } from './context';\n\nexport interface SliderThumbProps extends UIComponentProps<'div', SliderState> {}\n\n/** Draggable handle for setting the slider value. Receives focus and handles keyboard interaction. */\nexport const SliderThumb = forwardRef(function SliderThumb(\n  componentProps: SliderThumbProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n\n  const context = useSliderContext();\n  const { state, thumbRef, thumbProps, getAttrs } = context;\n  const attrs = getAttrs(state);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: context.stateAttrMap,\n      ref: [forwardedRef, thumbRef],\n      props: [attrs, thumbProps, elementProps],\n    }\n  );\n});\n\nexport namespace SliderThumb {\n  export type Props = SliderThumbProps;\n}\n"],"mappings":";;;;;;AAaA,MAAa,cAAc,WAAW,SAAS,YAC7C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,UAAU,iBAAiB;CACjC,MAAM,EAAE,OAAO,UAAU,YAAY,aAAa;CAClD,MAAM,QAAQ,SAAS,KAAK;CAE5B,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc,QAAQ;EACtB,KAAK,CAAC,cAAc,QAAQ;EAC5B,OAAO;GAAC;GAAO;GAAY;EAAY;CACzC,CACF;AACF,CAAC"}

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

@@ -1,10 +1,8 @@
 import { ThumbnailProps } from "../thumbnail/thumbnail.js";
-import * as _$react from "react";
 import { ThumbnailCore } from "@videojs/core";
-
 //#region src/ui/slider/slider-thumbnail.d.ts
 interface SliderThumbnailProps extends Omit<ThumbnailProps, 'time'> {}
-declare const SliderThumbnail: _$react.ForwardRefExoticComponent<Omit<SliderThumbnailProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const SliderThumbnail: import("react").ForwardRefExoticComponent<Omit<SliderThumbnailProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace SliderThumbnail {
   type Props = SliderThumbnailProps;
   type State = ThumbnailCore.State;

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

@@ -1 +1 @@
-{"version":3,"file":"slider-thumbnail.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-thumbnail.tsx"],"mappings":";;;;;UAQiB,oBAAA,SAA6B,IAAA,CAAK,cAAA;AAAA,cAEtC,eAAA,EAAe,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,oBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAOX,eAAA;EAAA,KACH,KAAA,GAAQ,oBAAA;EAAA,KACR,KAAA,GAAQ,aAAA,CAAc,KAAA;AAAA"}
+{"version":3,"file":"slider-thumbnail.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-thumbnail.tsx"],"mappings":";;;UAQiB,6BAA6B,KAAK;cAEtC,iCAAe,0BAAA,KAAA,+CAAA,cAAA;kBAOX;OACH,QAAQ;OACR,QAAQ,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"slider-thumbnail.js","names":[],"sources":["../../../../src/ui/slider/slider-thumbnail.tsx"],"sourcesContent":["'use client';\n\nimport type { ThumbnailCore } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport { Thumbnail, type ThumbnailProps } from '../thumbnail/thumbnail';\nimport { useSliderContext } from './context';\n\nexport interface SliderThumbnailProps extends Omit<ThumbnailProps, 'time'> {}\n\nexport const SliderThumbnail = forwardRef<HTMLDivElement, SliderThumbnailProps>(\n  function SliderThumbnail(componentProps, forwardedRef) {\n    const { pointerValue } = useSliderContext();\n    return <Thumbnail ref={forwardedRef} {...componentProps} time={pointerValue} />;\n  }\n);\n\nexport namespace SliderThumbnail {\n  export type Props = SliderThumbnailProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;AAUA,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,gBAAgB,cAAc;CACrD,MAAM,EAAE,iBAAiB,kBAAkB;AAC3C,QAAO,oBAAC,WAAD;EAAW,KAAK;EAAc,GAAI;EAAgB,MAAM;EAAgB,CAAA;EAElF"}
+{"version":3,"file":"slider-thumbnail.js","names":[],"sources":["../../../../src/ui/slider/slider-thumbnail.tsx"],"sourcesContent":["'use client';\n\nimport type { ThumbnailCore } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport { Thumbnail, type ThumbnailProps } from '../thumbnail/thumbnail';\nimport { useSliderContext } from './context';\n\nexport interface SliderThumbnailProps extends Omit<ThumbnailProps, 'time'> {}\n\nexport const SliderThumbnail = forwardRef<HTMLDivElement, SliderThumbnailProps>(\n  function SliderThumbnail(componentProps, forwardedRef) {\n    const { pointerValue } = useSliderContext();\n    return <Thumbnail ref={forwardedRef} {...componentProps} time={pointerValue} />;\n  }\n);\n\nexport namespace SliderThumbnail {\n  export type Props = SliderThumbnailProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;AAUA,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,gBAAgB,cAAc;CACrD,MAAM,EAAE,iBAAiB,iBAAiB;CAC1C,OAAO,oBAAC,WAAD;EAAW,KAAK;EAAc,GAAI;EAAgB,MAAM;CAAe,CAAA;AAChF,CACF"}

package/dist/dev/ui/slider/slider-track.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-track.d.ts
 interface SliderTrackProps extends UIComponentProps<'div', SliderState> {}
 /** Contains the slider's visual track and interactive hit zone. */
-declare const SliderTrack: _$react.ForwardRefExoticComponent<SliderTrackProps>;
+declare const SliderTrack: import("react").ForwardRefExoticComponent<SliderTrackProps>;
 declare namespace SliderTrack {
   type Props = SliderTrackProps;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"slider-track.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-track.tsx"],"mappings":";;;;;UAQiB,gBAAA,SAAyB,gBAAA,QAAwB,WAAA;;cAGrD,WAAA,EAAW,OAAA,CAAA,yBAAA,CAAA,gBAAA;AAAA,kBAMP,WAAA;EAAA,KACH,KAAA,GAAQ,gBAAA;AAAA"}
+{"version":3,"file":"slider-track.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-track.tsx"],"mappings":";;;UAQiB,yBAAyB,wBAAwB;;cAGrD,6BAAW,0BAAA;kBAMP;OACH,QAAQ"}