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

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

@@ -1,17 +1,18 @@
 "use client";
+import { useTranslator } from "../../i18n/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useInputIndicatorRoot } from "../input-indicators/use-input-indicator-root.js";
 import { StatusIndicatorProvider } from "./context.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
-import { StatusIndicatorCore, StatusIndicatorDataAttrs } from "@videojs/core";
+import { StatusIndicatorCore, StatusIndicatorDataAttrs, createInputIndicatorLabels } from "@videojs/core";
 //#region src/ui/status-indicator/status-indicator-root.tsx
 const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(componentProps, forwardedRef) {
-	const { render, className, style, actions, closeDelay, labels, ...elementProps } = componentProps;
+	const { render, className, style, actions, closeDelay, ...elementProps } = componentProps;
 	const { elementRef, present, state } = useInputIndicatorRoot(() => new StatusIndicatorCore(), {
 		actions,
 		closeDelay,
-		labels
+		labels: createInputIndicatorLabels(useTranslator())
 	});
 	if (!present) return null;
 	return /* @__PURE__ */ jsx(StatusIndicatorProvider, {

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

@@ -1 +1 @@
-{"version":3,"file":"status-indicator-root.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-root.tsx"],"sourcesContent":["'use client';\n\nimport { StatusIndicatorCore, StatusIndicatorDataAttrs } 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 { StatusIndicatorProvider } from './context';\n\nexport interface StatusIndicatorRootProps\n  extends UIComponentProps<'div', StatusIndicatorCore.State>,\n    StatusIndicatorCore.Props {}\n\nexport const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(\n  componentProps: StatusIndicatorRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, actions, closeDelay, labels, ...elementProps } = componentProps;\n  const { elementRef, present, state } = useInputIndicatorRoot(() => new StatusIndicatorCore(), {\n    actions,\n    closeDelay,\n    labels,\n  });\n\n  if (!present) return null;\n\n  return (\n    <StatusIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: StatusIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </StatusIndicatorProvider>\n  );\n});\n\nexport namespace StatusIndicatorRoot {\n  export type Props = StatusIndicatorRootProps;\n  export type State = StatusIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;AAeA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,YAAY,QAAQ,GAAG,iBAAiB;CACnF,MAAM,EAAE,YAAY,SAAS,UAAU,4BAA4B,IAAI,qBAAqB,EAAE;EAC5F;EACA;EACA;EACD,CAAC;AAEF,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAAC,yBAAD;EAAyB,OAAO,EAAE,OAAO;YACtC,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,WAAW;GAC/B,OAAO,CAAC,aAAa;GACtB,CACF;EACuB,CAAA;EAE5B"}
+{"version":3,"file":"status-indicator-root.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-root.tsx"],"sourcesContent":["'use client';\n\nimport { createInputIndicatorLabels, StatusIndicatorCore, StatusIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport { useTranslator } from '../../i18n/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicators/use-input-indicator-root';\nimport { StatusIndicatorProvider } from './context';\n\nexport interface StatusIndicatorRootProps\n  extends UIComponentProps<'div', StatusIndicatorCore.State>,\n    Omit<StatusIndicatorCore.Props, 'labels'> {}\n\nexport const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(\n  componentProps: StatusIndicatorRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, actions, closeDelay, ...elementProps } = componentProps;\n  const translator = useTranslator();\n  const { elementRef, present, state } = useInputIndicatorRoot(() => new StatusIndicatorCore(), {\n    actions,\n    closeDelay,\n    labels: createInputIndicatorLabels(translator),\n  });\n\n  if (!present) return null;\n\n  return (\n    <StatusIndicatorProvider value={{ state }}>\n      {renderElement(\n        'div',\n        { render, className, style },\n        {\n          state,\n          stateAttrMap: StatusIndicatorDataAttrs,\n          ref: [forwardedRef, elementRef],\n          props: [elementProps],\n        }\n      )}\n    </StatusIndicatorProvider>\n  );\n});\n\nexport namespace StatusIndicatorRoot {\n  export type Props = StatusIndicatorRootProps;\n  export type State = StatusIndicatorCore.State;\n}\n"],"mappings":";;;;;;;;;AAgBA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,YAAY,GAAG,iBAAiB;CAE3E,MAAM,EAAE,YAAY,SAAS,UAAU,4BAA4B,IAAI,oBAAoB,GAAG;EAC5F;EACA;EACA,QAAQ,2BAJS,cAI2B,CAAC;CAC/C,CAAC;CAED,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,yBAAD;EAAyB,OAAO,EAAE,MAAM;EACrC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CAAC,YAAY;EACtB,CACF;CACuB,CAAA;AAE7B,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"status-indicator-value.d.ts","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-value.tsx"],"mappings":";;;;;UAUiB,yBAAA,SAAkC,gBAAA,SAAyB,mBAAA,CAAoB,KAAA;AAAA,cAEnF,oBAAA,EAAoB,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,yBAAA,WAAA,OAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBAkBhB,oBAAA;EAAA,KACH,KAAA,GAAQ,yBAAA;AAAA"}
+{"version":3,"file":"status-indicator-value.d.ts","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-value.tsx"],"mappings":";;;UAUiB,kCAAkC,yBAAyB,oBAAoB;cAEnF,sCAAoB,0BAAA,KAAA,oDAAA,cAAA;kBAkBhB;OACH,QAAQ"}

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

@@ -1 +1 @@
-{"version":3,"file":"status-indicator-value.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-value.tsx"],"sourcesContent":["'use client';\n\nimport { getStatusIndicatorDisplayValue, type StatusIndicatorCore } 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 { useStatusIndicatorContext } from './context';\n\nexport interface StatusIndicatorValueProps extends UIComponentProps<'span', StatusIndicatorCore.State> {}\n\nexport const StatusIndicatorValue = forwardRef(function StatusIndicatorValue(\n  componentProps: StatusIndicatorValueProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n  const { state } = useStatusIndicatorContext();\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: forwardedRef,\n      props: [{ children: getStatusIndicatorDisplayValue(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace StatusIndicatorValue {\n  export type Props = StatusIndicatorValueProps;\n}\n"],"mappings":";;;;;;AAYA,MAAa,uBAAuB,WAAW,SAAS,qBACtD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,2BAA2B;AAE7C,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,+BAA+B,MAAM,EAAE,EAAE,aAAa;EAC3E,CACF;EACD"}
+{"version":3,"file":"status-indicator-value.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-value.tsx"],"sourcesContent":["'use client';\n\nimport { getStatusIndicatorDisplayValue, type StatusIndicatorCore } 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 { useStatusIndicatorContext } from './context';\n\nexport interface StatusIndicatorValueProps extends UIComponentProps<'span', StatusIndicatorCore.State> {}\n\nexport const StatusIndicatorValue = forwardRef(function StatusIndicatorValue(\n  componentProps: StatusIndicatorValueProps,\n  forwardedRef: ForwardedRef<HTMLSpanElement>\n) {\n  const { render, className, style, ...elementProps } = componentProps;\n  const { state } = useStatusIndicatorContext();\n\n  return renderElement(\n    'span',\n    { render, className, style },\n    {\n      state,\n      ref: forwardedRef,\n      props: [{ children: getStatusIndicatorDisplayValue(state) }, elementProps],\n    }\n  );\n});\n\nexport namespace StatusIndicatorValue {\n  export type Props = StatusIndicatorValueProps;\n}\n"],"mappings":";;;;;;AAYA,MAAa,uBAAuB,WAAW,SAAS,qBACtD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CACtD,MAAM,EAAE,UAAU,0BAA0B;CAE5C,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK;EACL,OAAO,CAAC,EAAE,UAAU,+BAA+B,KAAK,EAAE,GAAG,YAAY;CAC3E,CACF;AACF,CAAC"}

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

@@ -1,13 +1,11 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { ThumbnailCore, ThumbnailImage } from "@videojs/core";
-
 //#region src/ui/thumbnail/thumbnail.d.ts
 interface ThumbnailProps extends UIComponentProps<'div', ThumbnailCore.State>, ThumbnailCore.Props {
   /** Pre-parsed thumbnail images — bypasses the automatic `<track>` detection. */
   thumbnails?: ThumbnailImage[] | undefined;
 }
-declare const Thumbnail: _$react.ForwardRefExoticComponent<Omit<ThumbnailProps, "ref"> & _$react.RefAttributes<HTMLDivElement>>;
+declare const Thumbnail: import("react").ForwardRefExoticComponent<Omit<ThumbnailProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace Thumbnail {
   type Props = ThumbnailProps;
   type State = ThumbnailCore.State;

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

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.d.ts","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail.tsx"],"mappings":";;;;;UAkBiB,cAAA,SAAuB,gBAAA,QAAwB,aAAA,CAAc,KAAA,GAAQ,aAAA,CAAc,KAAA;;EAElG,UAAA,GAAa,cAAA;AAAA;AAAA,cAGF,SAAA,EAAS,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,cAAA,WAAA,OAAA,CAAA,aAAA,CAAA,cAAA;AAAA,kBAsGL,SAAA;EAAA,KACH,KAAA,GAAQ,cAAA;EAAA,KACR,KAAA,GAAQ,aAAA,CAAc,KAAA;AAAA"}
+{"version":3,"file":"thumbnail.d.ts","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail.tsx"],"mappings":";;;UAkBiB,uBAAuB,wBAAwB,cAAc,QAAQ,cAAc;;EAElG,aAAa;;cAGF,2BAAS,0BAAA,KAAA,yCAAA,cAAA;kBAsGL;OACH,QAAQ;OACR,QAAQ,cAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"thumbnail.js","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail.tsx"],"sourcesContent":["'use client';\n\nimport {\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailFetchPriority,\n  type ThumbnailImage,\n} from '@videojs/core';\nimport { createThumbnail, selectTextTrack } from '@videojs/core/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { useOptionalPlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ThumbnailProps extends UIComponentProps<'div', ThumbnailCore.State>, ThumbnailCore.Props {\n  /** Pre-parsed thumbnail images — bypasses the automatic `<track>` detection. */\n  thumbnails?: ThumbnailImage[] | undefined;\n}\n\nexport const Thumbnail = forwardRef<HTMLDivElement, ThumbnailProps>(function Thumbnail(componentProps, forwardedRef) {\n  const {\n    render,\n    className,\n    style,\n    time = 0,\n    thumbnails: externalThumbnails,\n    crossOrigin,\n    loading,\n    fetchPriority,\n    ...elementProps\n  } = componentProps;\n\n  const [core] = useState(() => new ThumbnailCore());\n  const divRef = useRef<HTMLDivElement>(null);\n  const imgRef = useRef<HTMLImageElement>(null);\n  const textTrack = useOptionalPlayer(selectTextTrack);\n\n  // Force re-render when the handle's state changes (img load/error, resize).\n  const [, setRenderToken] = useState(0);\n\n  const [handle] = useState(() =>\n    createThumbnail({\n      getContainer: () => divRef.current,\n      getImg: () => imgRef.current,\n      onStateChange: () => setRenderToken((n) => n + 1),\n    })\n  );\n\n  useDestroy(handle, () => handle.connect());\n\n  // Resolve thumbnails: external prop takes priority over auto <track> path.\n  const thumbnails = useMemo(() => {\n    if (externalThumbnails && externalThumbnails.length > 0) return externalThumbnails;\n    return textTrack && textTrack.thumbnailCues.length > 0\n      ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined)\n      : [];\n  }, [externalThumbnails, textTrack]);\n\n  const thumbnail = useMemo(() => core.findActiveThumbnail(thumbnails, time), [core, thumbnails, time]);\n\n  // Track src changes via the handle.\n  handle.updateSrc(thumbnail?.url);\n\n  const state = core.getState(handle.loading, handle.error, thumbnail);\n\n  // Compute styles declaratively from resize result.\n  let containerStyle: CSSProperties = { overflow: 'hidden' };\n  let imgStyle: CSSProperties | undefined;\n\n  if (thumbnail && handle.naturalWidth && handle.naturalHeight) {\n    const constraints = handle.readConstraints();\n    const result = core.resize(thumbnail, handle.naturalWidth, handle.naturalHeight, constraints);\n\n    if (result) {\n      containerStyle = {\n        overflow: 'hidden',\n        width: result.containerWidth,\n        height: result.containerHeight,\n      };\n      imgStyle = {\n        width: result.imageWidth,\n        height: result.imageHeight,\n        maxWidth: 'none',\n        transform:\n          result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : undefined,\n      };\n    }\n  }\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: ThumbnailDataAttrs,\n      ref: [forwardedRef, divRef],\n      props: [\n        core.getAttrs(state),\n        { style: containerStyle },\n        elementProps,\n        {\n          children: (\n            <img\n              ref={imgRef}\n              alt=\"\"\n              aria-hidden=\"true\"\n              decoding=\"async\"\n              src={thumbnail?.url}\n              crossOrigin={crossOrigin === '' || crossOrigin === null ? undefined : crossOrigin}\n              loading={loading}\n              style={imgStyle}\n              // React's types omit `| undefined` from fetchPriority — cast to satisfy exactOptionalPropertyTypes.\n              fetchPriority={fetchPriority as ThumbnailFetchPriority}\n            />\n          ),\n        },\n      ],\n    }\n  );\n});\n\nexport namespace Thumbnail {\n  export type Props = ThumbnailProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;;;;AAuBA,MAAa,YAAY,WAA2C,SAAS,UAAU,gBAAgB,cAAc;CACnH,MAAM,EACJ,QACA,WACA,OACA,OAAO,GACP,YAAY,oBACZ,aACA,SACA,eACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;CAClD,MAAM,SAAS,OAAuB,KAAK;CAC3C,MAAM,SAAS,OAAyB,KAAK;CAC7C,MAAM,YAAY,kBAAkB,gBAAgB;CAGpD,MAAM,GAAG,kBAAkB,SAAS,EAAE;CAEtC,MAAM,CAAC,UAAU,eACf,gBAAgB;EACd,oBAAoB,OAAO;EAC3B,cAAc,OAAO;EACrB,qBAAqB,gBAAgB,MAAM,IAAI,EAAE;EAClD,CAAC,CACH;AAED,YAAW,cAAc,OAAO,SAAS,CAAC;CAG1C,MAAM,aAAa,cAAc;AAC/B,MAAI,sBAAsB,mBAAmB,SAAS,EAAG,QAAO;AAChE,SAAO,aAAa,UAAU,cAAc,SAAS,IACjD,oBAAoB,UAAU,eAAe,UAAU,qBAAqB,KAAA,EAAU,GACtF,EAAE;IACL,CAAC,oBAAoB,UAAU,CAAC;CAEnC,MAAM,YAAY,cAAc,KAAK,oBAAoB,YAAY,KAAK,EAAE;EAAC;EAAM;EAAY;EAAK,CAAC;AAGrG,QAAO,UAAU,WAAW,IAAI;CAEhC,MAAM,QAAQ,KAAK,SAAS,OAAO,SAAS,OAAO,OAAO,UAAU;CAGpE,IAAI,iBAAgC,EAAE,UAAU,UAAU;CAC1D,IAAI;AAEJ,KAAI,aAAa,OAAO,gBAAgB,OAAO,eAAe;EAC5D,MAAM,cAAc,OAAO,iBAAiB;EAC5C,MAAM,SAAS,KAAK,OAAO,WAAW,OAAO,cAAc,OAAO,eAAe,YAAY;AAE7F,MAAI,QAAQ;AACV,oBAAiB;IACf,UAAU;IACV,OAAO,OAAO;IACd,QAAQ,OAAO;IAChB;AACD,cAAW;IACT,OAAO,OAAO;IACd,QAAQ,OAAO;IACf,UAAU;IACV,WACE,OAAO,WAAW,OAAO,UAAU,cAAc,OAAO,QAAQ,OAAO,OAAO,QAAQ,OAAO,KAAA;IAChG;;;AAIL,QAAO,cACL,OACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,OAAO;EAC3B,OAAO;GACL,KAAK,SAAS,MAAM;GACpB,EAAE,OAAO,gBAAgB;GACzB;GACA,EACE,UACE,oBAAC,OAAD;IACE,KAAK;IACL,KAAI;IACJ,eAAY;IACZ,UAAS;IACT,KAAK,WAAW;IAChB,aAAa,gBAAgB,MAAM,gBAAgB,OAAO,KAAA,IAAY;IAC7D;IACT,OAAO;IAEQ;IACf,CAAA,EAEL;GACF;EACF,CACF;EACD"}
+{"version":3,"file":"thumbnail.js","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail.tsx"],"sourcesContent":["'use client';\n\nimport {\n  mapCuesToThumbnails,\n  ThumbnailCore,\n  ThumbnailDataAttrs,\n  type ThumbnailFetchPriority,\n  type ThumbnailImage,\n} from '@videojs/core';\nimport { createThumbnail, selectTextTrack } from '@videojs/core/dom';\nimport type { CSSProperties } from 'react';\nimport { forwardRef, useMemo, useRef, useState } from 'react';\n\nimport { useOptionalPlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ThumbnailProps extends UIComponentProps<'div', ThumbnailCore.State>, ThumbnailCore.Props {\n  /** Pre-parsed thumbnail images — bypasses the automatic `<track>` detection. */\n  thumbnails?: ThumbnailImage[] | undefined;\n}\n\nexport const Thumbnail = forwardRef<HTMLDivElement, ThumbnailProps>(function Thumbnail(componentProps, forwardedRef) {\n  const {\n    render,\n    className,\n    style,\n    time = 0,\n    thumbnails: externalThumbnails,\n    crossOrigin,\n    loading,\n    fetchPriority,\n    ...elementProps\n  } = componentProps;\n\n  const [core] = useState(() => new ThumbnailCore());\n  const divRef = useRef<HTMLDivElement>(null);\n  const imgRef = useRef<HTMLImageElement>(null);\n  const textTrack = useOptionalPlayer(selectTextTrack);\n\n  // Force re-render when the handle's state changes (img load/error, resize).\n  const [, setRenderToken] = useState(0);\n\n  const [handle] = useState(() =>\n    createThumbnail({\n      getContainer: () => divRef.current,\n      getImg: () => imgRef.current,\n      onStateChange: () => setRenderToken((n) => n + 1),\n    })\n  );\n\n  useDestroy(handle, () => handle.connect());\n\n  // Resolve thumbnails: external prop takes priority over auto <track> path.\n  const thumbnails = useMemo(() => {\n    if (externalThumbnails && externalThumbnails.length > 0) return externalThumbnails;\n    return textTrack && textTrack.thumbnailCues.length > 0\n      ? mapCuesToThumbnails(textTrack.thumbnailCues, textTrack.thumbnailTrackSrc ?? undefined)\n      : [];\n  }, [externalThumbnails, textTrack]);\n\n  const thumbnail = useMemo(() => core.findActiveThumbnail(thumbnails, time), [core, thumbnails, time]);\n\n  // Track src changes via the handle.\n  handle.updateSrc(thumbnail?.url);\n\n  const state = core.getState(handle.loading, handle.error, thumbnail);\n\n  // Compute styles declaratively from resize result.\n  let containerStyle: CSSProperties = { overflow: 'hidden' };\n  let imgStyle: CSSProperties | undefined;\n\n  if (thumbnail && handle.naturalWidth && handle.naturalHeight) {\n    const constraints = handle.readConstraints();\n    const result = core.resize(thumbnail, handle.naturalWidth, handle.naturalHeight, constraints);\n\n    if (result) {\n      containerStyle = {\n        overflow: 'hidden',\n        width: result.containerWidth,\n        height: result.containerHeight,\n      };\n      imgStyle = {\n        width: result.imageWidth,\n        height: result.imageHeight,\n        maxWidth: 'none',\n        transform:\n          result.offsetX || result.offsetY ? `translate(-${result.offsetX}px, -${result.offsetY}px)` : undefined,\n      };\n    }\n  }\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: ThumbnailDataAttrs,\n      ref: [forwardedRef, divRef],\n      props: [\n        core.getAttrs(state),\n        { style: containerStyle },\n        elementProps,\n        {\n          children: (\n            <img\n              ref={imgRef}\n              alt=\"\"\n              aria-hidden=\"true\"\n              decoding=\"async\"\n              src={thumbnail?.url}\n              crossOrigin={crossOrigin === '' || crossOrigin === null ? undefined : crossOrigin}\n              loading={loading}\n              style={imgStyle}\n              // React's types omit `| undefined` from fetchPriority — cast to satisfy exactOptionalPropertyTypes.\n              fetchPriority={fetchPriority as ThumbnailFetchPriority}\n            />\n          ),\n        },\n      ],\n    }\n  );\n});\n\nexport namespace Thumbnail {\n  export type Props = ThumbnailProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;;;;AAuBA,MAAa,YAAY,WAA2C,SAAS,UAAU,gBAAgB,cAAc;CACnH,MAAM,EACJ,QACA,WACA,OACA,OAAO,GACP,YAAY,oBACZ,aACA,SACA,eACA,GAAG,iBACD;CAEJ,MAAM,CAAC,QAAQ,eAAe,IAAI,cAAc,CAAC;CACjD,MAAM,SAAS,OAAuB,IAAI;CAC1C,MAAM,SAAS,OAAyB,IAAI;CAC5C,MAAM,YAAY,kBAAkB,eAAe;CAGnD,MAAM,GAAG,kBAAkB,SAAS,CAAC;CAErC,MAAM,CAAC,UAAU,eACf,gBAAgB;EACd,oBAAoB,OAAO;EAC3B,cAAc,OAAO;EACrB,qBAAqB,gBAAgB,MAAM,IAAI,CAAC;CAClD,CAAC,CACH;CAEA,WAAW,cAAc,OAAO,QAAQ,CAAC;CAGzC,MAAM,aAAa,cAAc;EAC/B,IAAI,sBAAsB,mBAAmB,SAAS,GAAG,OAAO;EAChE,OAAO,aAAa,UAAU,cAAc,SAAS,IACjD,oBAAoB,UAAU,eAAe,UAAU,qBAAqB,KAAA,CAAS,IACrF,CAAC;CACP,GAAG,CAAC,oBAAoB,SAAS,CAAC;CAElC,MAAM,YAAY,cAAc,KAAK,oBAAoB,YAAY,IAAI,GAAG;EAAC;EAAM;EAAY;CAAI,CAAC;CAGpG,OAAO,UAAU,WAAW,GAAG;CAE/B,MAAM,QAAQ,KAAK,SAAS,OAAO,SAAS,OAAO,OAAO,SAAS;CAGnE,IAAI,iBAAgC,EAAE,UAAU,SAAS;CACzD,IAAI;CAEJ,IAAI,aAAa,OAAO,gBAAgB,OAAO,eAAe;EAC5D,MAAM,cAAc,OAAO,gBAAgB;EAC3C,MAAM,SAAS,KAAK,OAAO,WAAW,OAAO,cAAc,OAAO,eAAe,WAAW;EAE5F,IAAI,QAAQ;GACV,iBAAiB;IACf,UAAU;IACV,OAAO,OAAO;IACd,QAAQ,OAAO;GACjB;GACA,WAAW;IACT,OAAO,OAAO;IACd,QAAQ,OAAO;IACf,UAAU;IACV,WACE,OAAO,WAAW,OAAO,UAAU,cAAc,OAAO,QAAQ,OAAO,OAAO,QAAQ,OAAO,KAAA;GACjG;EACF;CACF;CAEA,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,MAAM;EAC1B,OAAO;GACL,KAAK,SAAS,KAAK;GACnB,EAAE,OAAO,eAAe;GACxB;GACA,EACE,UACE,oBAAC,OAAD;IACE,KAAK;IACL,KAAI;IACJ,eAAY;IACZ,UAAS;IACT,KAAK,WAAW;IAChB,aAAa,gBAAgB,MAAM,gBAAgB,OAAO,KAAA,IAAY;IAC7D;IACT,OAAO;IAEQ;GAChB,CAAA,EAEL;EACF;CACF,CACF;AACF,CAAC"}

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

@@ -1,11 +1,9 @@
 import { Group, GroupProps } from "./time-group.js";
 import { Separator, SeparatorProps } from "./time-separator.js";
 import { Value, ValueProps } from "./time-value.js";
-
-//#region src/ui/time/index.parts.d.ts
 declare namespace index_parts_d_exports {
   export { Group, GroupProps, Separator, SeparatorProps, Value, ValueProps };
 }
 //#endregion
-export { index_parts_d_exports };
+export { Group, type GroupProps, Separator, type SeparatorProps, Value, type ValueProps, index_parts_d_exports };
 //# sourceMappingURL=index.parts.d.ts.map

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

@@ -9,6 +9,6 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Value: () => Value
 });
 //#endregion
-export { index_parts_exports };
+export { Group, Separator, Value, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

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

@@ -1,7 +1,5 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { ReactNode } from "react";
-
 //#region src/ui/time/time-group.d.ts
 type GroupState = Record<string, never>;
 interface GroupProps extends UIComponentProps<'span', GroupState> {
@@ -20,7 +18,7 @@ interface GroupProps extends UIComponentProps<'span', GroupState> {
  * </Time.Group>
  * ```
  */
-declare const Group: _$react.ForwardRefExoticComponent<Omit<GroupProps, "ref"> & _$react.RefAttributes<HTMLSpanElement>>;
+declare const Group: import("react").ForwardRefExoticComponent<Omit<GroupProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 declare namespace Group {
   type Props = GroupProps;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"time-group.d.ts","names":[],"sources":["../../../../src/ui/time/time-group.tsx"],"mappings":";;;;;KASK,UAAA,GAAa,MAAA;AAAA,UAED,UAAA,SAAmB,gBAAA,SAAyB,UAAA;;EAE3D,QAAA,GAAW,SAAA;AAAA;;;;AAFb;;;;;;;;;cAiBa,KAAA,EAAK,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,UAAA,WAAA,OAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBAmBD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;AAAA"}
+{"version":3,"file":"time-group.d.ts","names":[],"sources":["../../../../src/ui/time/time-group.tsx"],"mappings":";;;KASK,aAAa;UAED,mBAAmB,yBAAyB;;EAE3D,WAAW;;;;;;;;;;;;;;cAeA,uBAAK,0BAAA,KAAA,qCAAA,cAAA;kBAmBD;OACH,QAAQ"}

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

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

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

@@ -1,7 +1,5 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { ReactNode } from "react";
-
 //#region src/ui/time/time-separator.d.ts
 type SeparatorState = Record<string, never>;
 interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {
@@ -17,7 +15,7 @@ interface SeparatorProps extends UIComponentProps<'span', SeparatorState> {
  * <Time.Separator> of </Time.Separator>
  * ```
  */
-declare const Separator: _$react.ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & _$react.RefAttributes<HTMLSpanElement>>;
+declare const Separator: import("react").ForwardRefExoticComponent<Omit<SeparatorProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 declare namespace Separator {
   type Props = SeparatorProps;
 }

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

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

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

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

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

@@ -1,7 +1,5 @@
 import { UIComponentProps } from "../../utils/types.js";
-import * as _$react from "react";
 import { TimeCore } from "@videojs/core";
-
 //#region src/ui/time/time-value.d.ts
 interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}
 /**
@@ -14,7 +12,7 @@ interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'chi
  * <Time.Value type="remaining" negativeSign="−" />
  * ```
  */
-declare const Value: _$react.ForwardRefExoticComponent<Omit<ValueProps, "ref"> & _$react.RefAttributes<HTMLTimeElement>>;
+declare const Value: import("react").ForwardRefExoticComponent<Omit<ValueProps, "ref"> & import("react").RefAttributes<HTMLTimeElement>>;
 declare namespace Value {
   type Props = ValueProps;
   type State = TimeCore.State;

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

@@ -1 +1 @@
-{"version":3,"file":"time-value.d.ts","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"mappings":";;;;;UAWiB,UAAA,SAAmB,IAAA,CAAK,gBAAA,SAAyB,QAAA,CAAS,KAAA,gBAAqB,QAAA,CAAS,KAAA;;AAAzG;;;;;;;;;cAYa,KAAA,EAAK,OAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,UAAA,WAAA,OAAA,CAAA,aAAA,CAAA,eAAA;AAAA,kBA+CD,KAAA;EAAA,KACH,KAAA,GAAQ,UAAA;EAAA,KACR,KAAA,GAAQ,QAAA,CAAS,KAAA;AAAA"}
+{"version":3,"file":"time-value.d.ts","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"mappings":";;;UAgBiB,mBAAmB,KAAK,yBAAyB,SAAS,qBAAqB,SAAS;;;;;;;;;;;cAY5F,uBAAK,0BAAA,KAAA,qCAAA,cAAA;kBAkGD;OACH,QAAQ;OACR,QAAQ,SAAS"}

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

@@ -1,10 +1,15 @@
 "use client";
+import { useLocale, useTranslator } from "../../i18n/context.js";
 import { usePlayer } from "../../player/context.js";
 import { renderElement } from "../../utils/use-render.js";
 import { logMissingFeature, selectTime } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
+import { translateText } from "@videojs/core/i18n";
+import { forwardRef, useEffect, useState } from "react";
+import { isInteractiveActivation } from "@videojs/utils/dom";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { TimeCore, TimeDataAttrs } from "@videojs/core";
+import { remainingSuffixText } from "@videojs/core/i18n/text/time";
+import { formatTimeAsPhrase } from "@videojs/utils/time";
 //#region src/ui/time/time-value.tsx
 /**
 * Displays a formatted time value (current, duration, or remaining).
@@ -17,13 +22,21 @@ import { TimeCore, TimeDataAttrs } from "@videojs/core";
 * ```
 */
 const Value = forwardRef(function Value(componentProps, forwardedRef) {
-	const { render, className, style, type, negativeSign, label, ...elementProps } = componentProps;
+	const { render, className, style, type, negativeSign, label, toggle = false, ...elementProps } = componentProps;
 	const time = usePlayer(selectTime);
+	const translator = useTranslator();
+	const locale = useLocale();
 	const [core] = useState(() => new TimeCore());
+	const defaultType = type ?? TimeCore.defaultProps.type;
+	const [activeType, setActiveType] = useState(defaultType);
+	useEffect(() => {
+		setActiveType(defaultType);
+	}, [defaultType, toggle]);
 	core.setProps({
-		type,
+		type: activeType,
 		negativeSign,
-		label
+		label,
+		toggle
 	});
 	if (!time) {
 		logMissingFeature("Time.Value", "time");
@@ -31,10 +44,28 @@ const Value = forwardRef(function Value(componentProps, forwardedRef) {
 	}
 	core.setMedia(time);
 	const state = core.getState();
+	const attrs = core.getAttrs(state, defaultType);
+	const resolvedLabelParams = core.getLabelParams(state) ? { duration: state.type === "remaining" ? translateText(remainingSuffixText, translator, { duration: formatTimeAsPhrase(Math.abs(state.seconds), { locale }) }) : formatTimeAsPhrase(Math.abs(state.seconds), { locale }) } : void 0;
 	const content = state.negative ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
 		children: negativeSign ?? TimeCore.defaultProps.negativeSign
 	}), state.text] }) : state.text;
+	const toggleType = () => {
+		setActiveType((value) => {
+			if (defaultType === "current") return value === "remaining" ? "current" : "remaining";
+			return value === "duration" ? "remaining" : "duration";
+		});
+	};
+	const handleClick = (event) => {
+		if (event.defaultPrevented) return;
+		toggleType();
+	};
+	const handleKeyDown = (event) => {
+		if (event.defaultPrevented || !isInteractiveActivation(event.nativeEvent)) return;
+		event.preventDefault();
+		if (event.repeat) return;
+		toggleType();
+	};
 	return renderElement("time", {
 		render,
 		className,
@@ -46,7 +77,12 @@ const Value = forwardRef(function Value(componentProps, forwardedRef) {
 		props: [{
 			dateTime: state.datetime,
 			children: content,
-			...core.getAttrs(state)
+			...attrs,
+			"aria-label": translateText(attrs["aria-label"], translator, resolvedLabelParams),
+			...toggle ? {
+				onClick: handleClick,
+				onKeyDown: handleKeyDown
+			} : void 0
 		}, elementProps]
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["'use client';\n\nimport { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}\n\n/**\n * Displays a formatted time value (current, duration, or remaining).\n *\n * @example\n * ```tsx\n * <Time.Value />\n * <Time.Value type=\"duration\" />\n * <Time.Value type=\"remaining\" negativeSign=\"−\" />\n * ```\n */\nexport const Value = forwardRef(function Value(\n  componentProps: ValueProps,\n  forwardedRef: ForwardedRef<HTMLTimeElement>\n) {\n  const { render, className, style, type, negativeSign, label, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n\n  const [core] = useState(() => new TimeCore());\n  core.setProps({ type, negativeSign, label });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('Time.Value', 'time');\n    return null;\n  }\n\n  core.setMedia(time);\n  const state = core.getState();\n\n  const content = state.negative ? (\n    <>\n      <span aria-hidden=\"true\">{negativeSign ?? TimeCore.defaultProps.negativeSign}</span>\n      {state.text}\n    </>\n  ) : (\n    state.text\n  );\n\n  return renderElement(\n    'time',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TimeDataAttrs,\n      ref: [forwardedRef],\n      props: [\n        {\n          dateTime: state.datetime,\n          children: content,\n          ...core.getAttrs(state),\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace Value {\n  export type Props = ValueProps;\n  export type State = TimeCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAuBA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM,cAAc,OAAO,GAAG,iBAAiB;CAEjF,MAAM,OAAO,UAAU,WAAW;CAElC,MAAM,CAAC,QAAQ,eAAe,IAAI,UAAU,CAAC;AAC7C,MAAK,SAAS;EAAE;EAAM;EAAc;EAAO,CAAC;AAE5C,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,MAAK,SAAS,KAAK;CACnB,MAAM,QAAQ,KAAK,UAAU;CAE7B,MAAM,UAAU,MAAM,WACpB,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,eAAY;YAAQ,gBAAgB,SAAS,aAAa;EAAoB,CAAA,EACnF,MAAM,KACN,EAAA,CAAA,GAEH,MAAM;AAGR,QAAO,cACL,QACA;EAAE;EAAQ;EAAW;EAAO,EAC5B;EACE;EACA,cAAc;EACd,KAAK,CAAC,aAAa;EACnB,OAAO,CACL;GACE,UAAU,MAAM;GAChB,UAAU;GACV,GAAG,KAAK,SAAS,MAAM;GACxB,EACD,aACD;EACF,CACF;EACD"}
+{"version":3,"file":"time-value.js","names":[],"sources":["../../../../src/ui/time/time-value.tsx"],"sourcesContent":["'use client';\n\nimport { TimeCore, TimeDataAttrs } from '@videojs/core';\nimport { logMissingFeature, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { remainingSuffixText } from '@videojs/core/i18n/text/time';\nimport { isInteractiveActivation } from '@videojs/utils/dom';\nimport { formatTimeAsPhrase } from '@videojs/utils/time';\nimport type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';\nimport { forwardRef, useEffect, useState } from 'react';\n\nimport { useLocale, useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface ValueProps extends Omit<UIComponentProps<'time', TimeCore.State>, 'children'>, TimeCore.Props {}\n\n/**\n * Displays a formatted time value (current, duration, or remaining).\n *\n * @example\n * ```tsx\n * <Time.Value />\n * <Time.Value type=\"duration\" />\n * <Time.Value type=\"remaining\" negativeSign=\"−\" />\n * ```\n */\nexport const Value = forwardRef(function Value(\n  componentProps: ValueProps,\n  forwardedRef: ForwardedRef<HTMLTimeElement>\n) {\n  const { render, className, style, type, negativeSign, label, toggle = false, ...elementProps } = componentProps;\n\n  const time = usePlayer(selectTime);\n  const translator = useTranslator();\n  const locale = useLocale();\n\n  const [core] = useState(() => new TimeCore());\n\n  const defaultType = type ?? TimeCore.defaultProps.type;\n  const [activeType, setActiveType] = useState(defaultType);\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We want to listen for changes to defaultType and toggle (so we revert to default), this just means one less useEffect.\n  useEffect(() => {\n    setActiveType(defaultType);\n  }, [defaultType, toggle]);\n\n  core.setProps({\n    type: activeType,\n    negativeSign,\n    label,\n    toggle,\n  });\n\n  if (!time) {\n    if (__DEV__) logMissingFeature('Time.Value', 'time');\n    return null;\n  }\n\n  core.setMedia(time);\n  const state = core.getState();\n  const attrs = core.getAttrs(state, defaultType);\n  const labelParams = core.getLabelParams(state);\n  const resolvedLabelParams = labelParams\n    ? {\n        duration:\n          state.type === 'remaining'\n            ? translateText(remainingSuffixText, translator, {\n                duration: formatTimeAsPhrase(Math.abs(state.seconds), { locale }),\n              })\n            : formatTimeAsPhrase(Math.abs(state.seconds), { locale }),\n      }\n    : undefined;\n\n  const content = state.negative ? (\n    <>\n      <span aria-hidden=\"true\">{negativeSign ?? TimeCore.defaultProps.negativeSign}</span>\n      {state.text}\n    </>\n  ) : (\n    state.text\n  );\n\n  const toggleType = () => {\n    setActiveType((value) => {\n      if (defaultType === 'current') {\n        return value === 'remaining' ? 'current' : 'remaining';\n      }\n      return value === 'duration' ? 'remaining' : 'duration';\n    });\n  };\n\n  const handleClick = (event: MouseEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented) return;\n    toggleType();\n  };\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLTimeElement>) => {\n    if (event.defaultPrevented || !isInteractiveActivation(event.nativeEvent)) return;\n    // Prevent space from scrolling page.\n    event.preventDefault();\n    if (event.repeat) return;\n    toggleType();\n  };\n\n  return renderElement(\n    'time',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: TimeDataAttrs,\n      ref: [forwardedRef],\n      props: [\n        {\n          dateTime: state.datetime,\n          children: content,\n          ...attrs,\n          'aria-label': translateText(attrs['aria-label'], translator, resolvedLabelParams),\n          ...(toggle ? { onClick: handleClick, onKeyDown: handleKeyDown } : undefined),\n        },\n        elementProps,\n      ],\n    }\n  );\n});\n\nexport namespace Value {\n  export type Props = ValueProps;\n  export type State = TimeCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,QAAQ,WAAW,SAAS,MACvC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,MAAM,cAAc,OAAO,SAAS,OAAO,GAAG,iBAAiB;CAEjG,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;CAEzB,MAAM,CAAC,QAAQ,eAAe,IAAI,SAAS,CAAC;CAE5C,MAAM,cAAc,QAAQ,SAAS,aAAa;CAClD,MAAM,CAAC,YAAY,iBAAiB,SAAS,WAAW;CAExD,gBAAgB;EACd,cAAc,WAAW;CAC3B,GAAG,CAAC,aAAa,MAAM,CAAC;CAExB,KAAK,SAAS;EACZ,MAAM;EACN;EACA;EACA;CACF,CAAC;CAED,IAAI,CAAC,MAAM;EACI,kBAAkB,cAAc,MAAM;EACnD,OAAO;CACT;CAEA,KAAK,SAAS,IAAI;CAClB,MAAM,QAAQ,KAAK,SAAS;CAC5B,MAAM,QAAQ,KAAK,SAAS,OAAO,WAAW;CAE9C,MAAM,sBADc,KAAK,eAAe,KACF,IAClC,EACE,UACE,MAAM,SAAS,cACX,cAAc,qBAAqB,YAAY,EAC7C,UAAU,mBAAmB,KAAK,IAAI,MAAM,OAAO,GAAG,EAAE,OAAO,CAAC,EAClE,CAAC,IACD,mBAAmB,KAAK,IAAI,MAAM,OAAO,GAAG,EAAE,OAAO,CAAC,EAC9D,IACA,KAAA;CAEJ,MAAM,UAAU,MAAM,WACpB,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD;EAAM,eAAY;EAAQ,UAAA,gBAAgB,SAAS,aAAa;CAAmB,CAAA,GAClF,MAAM,IACP,EAAA,CAAA,IAEF,MAAM;CAGR,MAAM,mBAAmB;EACvB,eAAe,UAAU;GACvB,IAAI,gBAAgB,WAClB,OAAO,UAAU,cAAc,YAAY;GAE7C,OAAO,UAAU,aAAa,cAAc;EAC9C,CAAC;CACH;CAEA,MAAM,eAAe,UAAuC;EAC1D,IAAI,MAAM,kBAAkB;EAC5B,WAAW;CACb;CAEA,MAAM,iBAAiB,UAA0C;EAC/D,IAAI,MAAM,oBAAoB,CAAC,wBAAwB,MAAM,WAAW,GAAG;EAE3E,MAAM,eAAe;EACrB,IAAI,MAAM,QAAQ;EAClB,WAAW;CACb;CAEA,OAAO,cACL,QACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,YAAY;EAClB,OAAO,CACL;GACE,UAAU,MAAM;GAChB,UAAU;GACV,GAAG;GACH,cAAc,cAAc,MAAM,eAAe,YAAY,mBAAmB;GAChF,GAAI,SAAS;IAAE,SAAS;IAAa,WAAW;GAAc,IAAI,KAAA;EACpE,GACA,YACF;CACF,CACF;AACF,CAAC"}

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

@@ -4,12 +4,11 @@ import { SliderPreview, SliderPreviewProps } from "../slider/slider-preview.js";
 import { SliderThumb, SliderThumbProps } from "../slider/slider-thumb.js";
 import { SliderTrack, SliderTrackProps } from "../slider/slider-track.js";
 import { SliderValue, SliderValueProps } from "../slider/slider-value.js";
+import "../slider/index.parts.js";
 import { TimeSliderRoot, TimeSliderRootProps } from "./time-slider-root.js";
-
-//#region src/ui/time-slider/index.parts.d.ts
 declare namespace index_parts_d_exports {
   export { SliderBuffer as Buffer, SliderBufferProps as BufferProps, SliderFill as Fill, SliderFillProps as FillProps, SliderPreview as Preview, SliderPreviewProps as PreviewProps, TimeSliderRoot as Root, TimeSliderRootProps as RootProps, SliderThumb as Thumb, SliderThumbProps as ThumbProps, SliderTrack as Track, SliderTrackProps as TrackProps, SliderValue as Value, SliderValueProps as ValueProps };
 }
 //#endregion
-export { index_parts_d_exports };
+export { SliderBuffer as Buffer, type SliderBufferProps as BufferProps, SliderFill as Fill, type SliderFillProps as FillProps, SliderPreview as Preview, type SliderPreviewProps as PreviewProps, TimeSliderRoot as Root, type TimeSliderRootProps as RootProps, SliderThumb as Thumb, type SliderThumbProps as ThumbProps, 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/time-slider/index.parts.js

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

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

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

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

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

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

@@ -1,20 +1,25 @@
 "use client";
+import { useLocale, useTranslator } from "../../i18n/context.js";
 import { usePlayer } from "../../player/context.js";
 import { useLatestRef } from "../../utils/use-latest-ref.js";
 import { renderElement } from "../../utils/use-render.js";
 import { useSlider } from "../hooks/use-slider.js";
 import { SliderProvider } from "../slider/context.js";
-import { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from "@videojs/core/dom";
-import { forwardRef, useState } from "react";
+import { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectPlayback, selectTime } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+import { forwardRef, useEffect, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 import { TimeSliderCore, TimeSliderDataAttrs } from "@videojs/core";
 import { formatTime } from "@videojs/utils/time";
 //#region src/ui/time-slider/time-slider-root.tsx
 const noopSeek = () => Promise.resolve(0);
 const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwardedRef) {
-	const { render, className, style, label, changeThrottle = TimeSliderCore.defaultProps.changeThrottle, step = TimeSliderCore.defaultProps.step, largeStep = TimeSliderCore.defaultProps.largeStep, orientation, disabled, thumbAlignment, onDragStart, onDragEnd, ...elementProps } = componentProps;
+	const { render, className, style, label, changeThrottle = TimeSliderCore.defaultProps.changeThrottle, step = TimeSliderCore.defaultProps.step, largeStep = TimeSliderCore.defaultProps.largeStep, orientation, disabled, thumbAlignment, onDragStart, onDragEnd, pauseOnDrag, ...elementProps } = componentProps;
 	const time = usePlayer(selectTime);
 	const buffer = usePlayer(selectBuffer);
+	const playback = usePlayer(selectPlayback);
+	const translator = useTranslator();
+	const locale = useLocale();
 	const [core] = useState(() => new TimeSliderCore());
 	core.setProps({
 		label,
@@ -22,12 +27,19 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 		largeStep,
 		orientation,
 		disabled,
-		thumbAlignment
+		thumbAlignment,
+		pauseOnDrag,
+		changeThrottle
 	});
+	core.setFormatLocale(locale);
 	const mediaRef = useLatestRef(time && buffer ? {
 		...time,
 		...buffer
 	} : null);
+	const playbackRef = useLatestRef(playback);
+	useEffect(() => {
+		return () => core.endDrag(playbackRef.current);
+	}, [core]);
 	const duration = time?.duration ?? 0;
 	const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider({
 		computeState: (input) => {
@@ -58,8 +70,14 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 			const media = mediaRef.current;
 			if (media) media.seek(core.rawValueFromPercent(percent));
 		},
-		onDragStart,
-		onDragEnd
+		onDragStart: () => {
+			core.startDrag(playbackRef.current);
+			onDragStart?.();
+		},
+		onDragEnd: () => {
+			core.endDrag(playbackRef.current);
+			onDragEnd?.();
+		}
 	});
 	if (!time) {
 		logMissingFeature("TimeSlider", "time");
@@ -72,7 +90,14 @@ const TimeSliderRoot = forwardRef(function TimeSliderRoot(componentProps, forwar
 			thumbRef,
 			thumbProps,
 			stateAttrMap: TimeSliderDataAttrs,
-			getAttrs: (sliderState) => core.getAttrs(sliderState),
+			getAttrs: (sliderState) => {
+				const attrs = core.getAttrs(sliderState);
+				return {
+					...attrs,
+					"aria-label": translateText(attrs["aria-label"], translator),
+					"aria-valuetext": translateText(attrs["aria-valuetext"], translator, core.getValueTextParams(sliderState))
+				};
+			},
 			formatValue: (value) => formatTime(value, duration)
 		},
 		children: renderElement("div", {

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

@@ -1 +1 @@
-{"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectTime } from '@videojs/core/dom';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useState } from 'react';\n\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n  function TimeSliderRoot(componentProps, forwardedRef) {\n    const {\n      render,\n      className,\n      style,\n      label,\n      changeThrottle = TimeSliderCore.defaultProps.changeThrottle,\n      step = TimeSliderCore.defaultProps.step,\n      largeStep = TimeSliderCore.defaultProps.largeStep,\n      orientation,\n      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      ...elementProps\n    } = componentProps;\n\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n\n    const [core] = useState(() => new TimeSliderCore());\n    core.setProps({ label, step, largeStep, orientation, disabled, thumbAlignment });\n\n    // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n    const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\n\n    const duration = time?.duration ?? 0;\n\n    const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<TimeSliderCore.State>({\n      computeState: (input) => {\n        core.setInput(input);\n        if (!time || !buffer) {\n          core.setMedia({\n            currentTime: 0,\n            duration: 0,\n            seeking: false,\n            seek: noopSeek,\n            buffered: [],\n            seekable: [],\n          });\n        } else {\n          core.setMedia({ ...time, ...buffer });\n        }\n\n        return core.getState();\n      },\n      getPercent: () => (duration > 0 ? ((time?.currentTime ?? 0) / duration) * 100 : 0),\n      getStepPercent: () => core.getStepPercent(),\n      getLargeStepPercent: () => core.getLargeStepPercent(),\n      orientation,\n      disabled,\n      changeThrottle,\n      adjustPercent: (rawPercent, thumbSize, trackSize) =>\n        core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n      getCSSVars: getTimeSliderCSSVars,\n      onValueCommit: (percent) => {\n        const media = mediaRef.current;\n        if (media) media.seek(core.rawValueFromPercent(percent));\n      },\n      onDragStart,\n      onDragEnd,\n    });\n\n    if (!time) {\n      if (__DEV__) logMissingFeature('TimeSlider', 'time');\n      return null;\n    }\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.valueFromPercent(state.pointerPercent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => core.getAttrs(sliderState as TimeSliderCore.State),\n          formatValue: (value) => formatTime(value, duration),\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: TimeSliderDataAttrs,\n            ref: [forwardedRef, rootRef],\n            props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n          }\n        )}\n      </SliderProvider>\n    );\n  }\n);\n\nexport namespace TimeSliderRoot {\n  export type Props = TimeSliderRootProps;\n  export type State = TimeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,iBAAkC,QAAQ,QAAQ,EAAE;AAO1D,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,WAAW;CAClC,MAAM,SAAS,UAAU,aAAa;CAEtC,MAAM,CAAC,QAAQ,eAAe,IAAI,gBAAgB,CAAC;AACnD,MAAK,SAAS;EAAE;EAAO;EAAM;EAAW;EAAa;EAAU;EAAgB,CAAC;CAGhF,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;EAAQ,GAAG,KAAK;CAE7E,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAgC;EAC9G,eAAe,UAAU;AACvB,QAAK,SAAS,MAAM;AACpB,OAAI,CAAC,QAAQ,CAAC,OACZ,MAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,EAAE;IACZ,UAAU,EAAE;IACb,CAAC;OAEF,MAAK,SAAS;IAAE,GAAG;IAAM,GAAG;IAAQ,CAAC;AAGvC,UAAO,KAAK,UAAU;;EAExB,kBAAmB,WAAW,KAAM,MAAM,eAAe,KAAK,WAAY,MAAM;EAChF,sBAAsB,KAAK,gBAAgB;EAC3C,2BAA2B,KAAK,qBAAqB;EACrD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,UAAU;EAClE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;AACvB,OAAI,MAAO,OAAM,KAAK,KAAK,oBAAoB,QAAQ,CAAC;;EAE1D;EACA;EACD,CAAC;AAEF,KAAI,CAAC,MAAM;AACI,oBAAkB,cAAc,OAAO;AACpD,SAAO;;AAGT,QACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,eAAe;GACzD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB,KAAK,SAAS,YAAoC;GAC7E,cAAc,UAAU,WAAW,OAAO,SAAS;GACpD;YAEA,cACC,OACA;GAAE;GAAQ;GAAW;GAAO,EAC5B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,QAAQ;GAC5B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;KAAW,EAAE;IAAE;IAAW;IAAa;GAC1E,CACF;EACc,CAAA;EAGtB"}
+{"version":3,"file":"time-slider-root.js","names":[],"sources":["../../../../src/ui/time-slider/time-slider-root.tsx"],"sourcesContent":["'use client';\n\nimport { TimeSliderCore, TimeSliderDataAttrs } from '@videojs/core';\nimport { getTimeSliderCSSVars, logMissingFeature, selectBuffer, selectPlayback, selectTime } from '@videojs/core/dom';\nimport { translateText } from '@videojs/core/i18n';\nimport { formatTime } from '@videojs/utils/time';\nimport { forwardRef, useEffect, useState } from 'react';\n\nimport { useLocale, useTranslator } from '../../i18n/context';\nimport { usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useLatestRef } from '../../utils/use-latest-ref';\nimport { renderElement } from '../../utils/use-render';\nimport { useSlider } from '../hooks/use-slider';\nimport { SliderProvider } from '../slider/context';\n\nconst noopSeek = (): Promise<number> => Promise.resolve(0);\n\nexport interface TimeSliderRootProps extends UIComponentProps<'div', TimeSliderCore.State>, TimeSliderCore.Props {\n  onDragStart?: (() => void) | undefined;\n  onDragEnd?: (() => void) | undefined;\n}\n\nexport const TimeSliderRoot = forwardRef<HTMLDivElement, TimeSliderRootProps>(\n  function TimeSliderRoot(componentProps, forwardedRef) {\n    const {\n      render,\n      className,\n      style,\n      label,\n      changeThrottle = TimeSliderCore.defaultProps.changeThrottle,\n      step = TimeSliderCore.defaultProps.step,\n      largeStep = TimeSliderCore.defaultProps.largeStep,\n      orientation,\n      disabled,\n      thumbAlignment,\n      onDragStart,\n      onDragEnd,\n      pauseOnDrag,\n      ...elementProps\n    } = componentProps;\n\n    const time = usePlayer(selectTime);\n    const buffer = usePlayer(selectBuffer);\n    const playback = usePlayer(selectPlayback);\n    const translator = useTranslator();\n    const locale = useLocale();\n\n    const [core] = useState(() => new TimeSliderCore());\n    core.setProps({\n      label,\n      step,\n      largeStep,\n      orientation,\n      disabled,\n      thumbAlignment,\n      pauseOnDrag,\n      changeThrottle,\n    });\n    core.setFormatLocale(locale);\n\n    // Keep a ref to the latest media state for callbacks that fire outside the render cycle.\n    const mediaRef = useLatestRef(time && buffer ? { ...time, ...buffer } : null);\n    const playbackRef = useLatestRef(playback);\n\n    // Resume playback if the slider unmounts mid-drag — createSlider's destroy()\n    // does not fire onDragEnd, so without this the player would stay paused.\n    useEffect(() => {\n      return () => core.endDrag(playbackRef.current);\n    }, [core]);\n\n    const duration = time?.duration ?? 0;\n\n    const { state, cssVars, rootRef, thumbRef, rootProps, rootStyle, thumbProps } = useSlider<TimeSliderCore.State>({\n      computeState: (input) => {\n        core.setInput(input);\n        if (!time || !buffer) {\n          core.setMedia({\n            currentTime: 0,\n            duration: 0,\n            seeking: false,\n            seek: noopSeek,\n            buffered: [],\n            seekable: [],\n          });\n        } else {\n          core.setMedia({ ...time, ...buffer });\n        }\n\n        return core.getState();\n      },\n      getPercent: () => (duration > 0 ? ((time?.currentTime ?? 0) / duration) * 100 : 0),\n      getStepPercent: () => core.getStepPercent(),\n      getLargeStepPercent: () => core.getLargeStepPercent(),\n      orientation,\n      disabled,\n      changeThrottle,\n      adjustPercent: (rawPercent, thumbSize, trackSize) =>\n        core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),\n      getCSSVars: getTimeSliderCSSVars,\n      onValueCommit: (percent) => {\n        const media = mediaRef.current;\n        if (media) media.seek(core.rawValueFromPercent(percent));\n      },\n      onDragStart: () => {\n        core.startDrag(playbackRef.current);\n        onDragStart?.();\n      },\n      onDragEnd: () => {\n        core.endDrag(playbackRef.current);\n        onDragEnd?.();\n      },\n    });\n\n    if (!time) {\n      if (__DEV__) logMissingFeature('TimeSlider', 'time');\n      return null;\n    }\n\n    return (\n      <SliderProvider\n        value={{\n          state,\n          pointerValue: core.valueFromPercent(state.pointerPercent),\n          thumbRef,\n          thumbProps,\n          stateAttrMap: TimeSliderDataAttrs,\n          getAttrs: (sliderState) => {\n            const attrs = core.getAttrs(sliderState as TimeSliderCore.State);\n            return {\n              ...attrs,\n              'aria-label': translateText(attrs['aria-label'], translator),\n              'aria-valuetext': translateText(\n                attrs['aria-valuetext'],\n                translator,\n                core.getValueTextParams(sliderState as TimeSliderCore.State)\n              ),\n            };\n          },\n          formatValue: (value) => formatTime(value, duration),\n        }}\n      >\n        {renderElement(\n          'div',\n          { render, className, style },\n          {\n            state,\n            stateAttrMap: TimeSliderDataAttrs,\n            ref: [forwardedRef, rootRef],\n            props: [{ style: { ...cssVars, ...rootStyle } }, rootProps, elementProps],\n          }\n        )}\n      </SliderProvider>\n    );\n  }\n);\n\nexport namespace TimeSliderRoot {\n  export type Props = TimeSliderRootProps;\n  export type State = TimeSliderCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,iBAAkC,QAAQ,QAAQ,CAAC;AAOzD,MAAa,iBAAiB,WAC5B,SAAS,eAAe,gBAAgB,cAAc;CACpD,MAAM,EACJ,QACA,WACA,OACA,OACA,iBAAiB,eAAe,aAAa,gBAC7C,OAAO,eAAe,aAAa,MACnC,YAAY,eAAe,aAAa,WACxC,aACA,UACA,gBACA,aACA,WACA,aACA,GAAG,iBACD;CAEJ,MAAM,OAAO,UAAU,UAAU;CACjC,MAAM,SAAS,UAAU,YAAY;CACrC,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;CAEzB,MAAM,CAAC,QAAQ,eAAe,IAAI,eAAe,CAAC;CAClD,KAAK,SAAS;EACZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CACD,KAAK,gBAAgB,MAAM;CAG3B,MAAM,WAAW,aAAa,QAAQ,SAAS;EAAE,GAAG;EAAM,GAAG;CAAO,IAAI,IAAI;CAC5E,MAAM,cAAc,aAAa,QAAQ;CAIzC,gBAAgB;EACd,aAAa,KAAK,QAAQ,YAAY,OAAO;CAC/C,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,WAAW,MAAM,YAAY;CAEnC,MAAM,EAAE,OAAO,SAAS,SAAS,UAAU,WAAW,WAAW,eAAe,UAAgC;EAC9G,eAAe,UAAU;GACvB,KAAK,SAAS,KAAK;GACnB,IAAI,CAAC,QAAQ,CAAC,QACZ,KAAK,SAAS;IACZ,aAAa;IACb,UAAU;IACV,SAAS;IACT,MAAM;IACN,UAAU,CAAC;IACX,UAAU,CAAC;GACb,CAAC;QAED,KAAK,SAAS;IAAE,GAAG;IAAM,GAAG;GAAO,CAAC;GAGtC,OAAO,KAAK,SAAS;EACvB;EACA,kBAAmB,WAAW,KAAM,MAAM,eAAe,KAAK,WAAY,MAAM;EAChF,sBAAsB,KAAK,eAAe;EAC1C,2BAA2B,KAAK,oBAAoB;EACpD;EACA;EACA;EACA,gBAAgB,YAAY,WAAW,cACrC,KAAK,0BAA0B,YAAY,WAAW,SAAS;EACjE,YAAY;EACZ,gBAAgB,YAAY;GAC1B,MAAM,QAAQ,SAAS;GACvB,IAAI,OAAO,MAAM,KAAK,KAAK,oBAAoB,OAAO,CAAC;EACzD;EACA,mBAAmB;GACjB,KAAK,UAAU,YAAY,OAAO;GAClC,cAAc;EAChB;EACA,iBAAiB;GACf,KAAK,QAAQ,YAAY,OAAO;GAChC,YAAY;EACd;CACF,CAAC;CAED,IAAI,CAAC,MAAM;EACI,kBAAkB,cAAc,MAAM;EACnD,OAAO;CACT;CAEA,OACE,oBAAC,gBAAD;EACE,OAAO;GACL;GACA,cAAc,KAAK,iBAAiB,MAAM,cAAc;GACxD;GACA;GACA,cAAc;GACd,WAAW,gBAAgB;IACzB,MAAM,QAAQ,KAAK,SAAS,WAAmC;IAC/D,OAAO;KACL,GAAG;KACH,cAAc,cAAc,MAAM,eAAe,UAAU;KAC3D,kBAAkB,cAChB,MAAM,mBACN,YACA,KAAK,mBAAmB,WAAmC,CAC7D;IACF;GACF;GACA,cAAc,UAAU,WAAW,OAAO,QAAQ;EACpD;EAEC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,OAAO;GAC3B,OAAO;IAAC,EAAE,OAAO;KAAE,GAAG;KAAS,GAAG;IAAU,EAAE;IAAG;IAAW;GAAY;EAC1E,CACF;CACc,CAAA;AAEpB,CACF"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap, TooltipCore } from '@videojs/core';\nimport type { MediaContainer, PositioningBoundary, TooltipApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface TooltipContextValue {\n  core: TooltipCore;\n  tooltip: TooltipApi;\n  state: TooltipCore.State;\n  stateAttrMap: StateAttrMap<TooltipCore.State>;\n  anchorName: string;\n  popupId: string;\n  content: string | undefined;\n  setContent: (content: string | undefined) => void;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n}\n\nconst TooltipContext = createContext<TooltipContextValue | null>(null);\n\nexport const TooltipContextProvider = TooltipContext.Provider;\n\nexport function useTooltipContext(): TooltipContextValue {\n  const ctx = useContext(TooltipContext);\n  if (!ctx) throw new Error('Tooltip compound components must be used within a Tooltip.Root');\n  return ctx;\n}\n\nexport function useOptionalTooltipContext(): TooltipContextValue | null {\n  return useContext(TooltipContext);\n}\n"],"mappings":";;;AAmBA,MAAM,iBAAiB,cAA0C,KAAK;AAEtE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,eAAe;AACtC,KAAI,CAAC,IAAK,OAAM,IAAI,MAAM,iEAAiE;AAC3F,QAAO;;AAGT,SAAgB,4BAAwD;AACtE,QAAO,WAAW,eAAe"}
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/tooltip/context.tsx"],"sourcesContent":["'use client';\n\nimport type { StateAttrMap, TooltipCore } from '@videojs/core';\nimport type { MediaContainer, PositioningBoundary, TooltipApi } from '@videojs/core/dom';\nimport { createContext, useContext } from 'react';\n\nexport interface TooltipContent {\n  label?: string | undefined;\n  shortcut?: string | undefined;\n}\n\nexport interface TooltipContextValue {\n  core: TooltipCore;\n  tooltip: TooltipApi;\n  state: TooltipCore.State;\n  preferredSide: TooltipCore.State['side'];\n  setPositionedSide: (side: TooltipCore.State['side']) => void;\n  stateAttrMap: StateAttrMap<TooltipCore.State>;\n  anchorName: string;\n  popupId: string;\n  content: TooltipContent | undefined;\n  setContent: (content: TooltipContent | undefined) => void;\n  boundary: PositioningBoundary;\n  container: MediaContainer | null;\n}\n\nconst TooltipContext = createContext<TooltipContextValue | null>(null);\n\nexport const TooltipContextProvider = TooltipContext.Provider;\n\nexport function useTooltipContext(): TooltipContextValue {\n  const ctx = useContext(TooltipContext);\n  if (!ctx) throw new Error('Tooltip compound components must be used within a Tooltip.Root');\n  return ctx;\n}\n\nexport function useOptionalTooltipContext(): TooltipContextValue | null {\n  return useContext(TooltipContext);\n}\n"],"mappings":";;;AA0BA,MAAM,iBAAiB,cAA0C,IAAI;AAErE,MAAa,yBAAyB,eAAe;AAErD,SAAgB,oBAAyC;CACvD,MAAM,MAAM,WAAW,cAAc;CACrC,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,gEAAgE;CAC1F,OAAO;AACT;AAEA,SAAgB,4BAAwD;CACtE,OAAO,WAAW,cAAc;AAClC"}

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

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

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

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