npm - @videojs/react - Versions diffs - 10.0.0-beta.30 → 10.0.0-beta.32 - Mend

@videojs/react 10.0.0-beta.30 → 10.0.0-beta.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1563) hide show

package/dist/dev/ui/poster/poster.js CHANGED Viewed

@@ -7,27 +7,25 @@ import { PosterCore, PosterDataAttrs } from "@videojs/core";
 /**
 * Displays the video poster image. Shows before playback starts, hides after.
 *
-* Renders an `<img>`, so `srcset`, `sizes`, `loading`, and the rest of the
-* image attributes are yours. Leave the source off and the player's resolved
-* `poster` fills it in.
+* Renders an `<img>`, so `srcset`, `sizes`, `loading`, and the rest of the image attributes are yours. Leave the source
+* off and the player's resolved `poster` fills it in.
 *
-* The image is decorative unless you say otherwise. Describe a poster that
-* carries meaning by passing your own `alt`.
+* The image is decorative unless you say otherwise. Describe a poster that carries meaning by passing your own `alt`.
 *
 * @example
-* ```tsx
-* <VideoPlayer poster="poster.jpg">
+*   ```tsx
+*   <VideoPlayer poster="poster.jpg">
 *   <Poster />
-* </VideoPlayer>
+*   </VideoPlayer>
 *
-* <Poster srcSet="poster-480.jpg 480w, poster-1080.jpg 1080w" sizes="100vw" />
+*   <Poster srcSet="poster-480.jpg 480w, poster-1080.jpg 1080w" sizes="100vw" />
 *
-* <Poster
+*   <Poster
 *   render={({ src, ...props }: ComponentProps<'img'>) =>
-*     src ? <Image {...props} src={src} alt="" fill /> : null
+*   src ? <Image {...props} src={src} alt="" fill /> : null
 *   }
-* />
-* ```
+*   />
+*   ```;
 */
 const Poster = forwardRef(function Poster(componentProps, forwardedRef) {
 	const { render, className, style, ...elementProps } = componentProps;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["import { PosterCore, PosterDataAttrs, type PosterImageLoadState } from '@videojs/core';\nimport { logMissingFeature, selectMetadata, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, 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/** The source currently requested from the image, and how it is faring. /\ninterface ImageRequest {\n src: string;\n srcSet: string \| undefined;\n state: PosterImageLoadState;\n}\n\n/\n Displays the video poster image. Shows before playback starts, hides after.\n \n Renders an `<img>`, so `srcset`, `sizes`, `loading`, and the rest of the\n * image attributes are yours. Leave the source off and the player's resolved\n * `poster` fills it in.\n \n The image is decorative unless you say otherwise. Describe a poster that\n * carries meaning by passing your own `alt`.\n \n @example\n * ```tsx\n * <VideoPlayer poster=\"poster.jpg\">\n * <Poster />\n * </VideoPlayer>\n \n <Poster srcSet=\"poster-480.jpg 480w, poster-1080.jpg 1080w\" sizes=\"100vw\" />\n \n <Poster\n * render={({ src, ...props }: ComponentProps<'img'>) =>\n * src ? <Image {...props} src={src} alt=\"\" fill /> : null\n * }\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 const metadata = usePlayer(selectMetadata);\n\n const [core] = useState(() => new PosterCore());\n\n // The metadata feature is optional: without it nothing resolves a URL, and\n // this stays a visibility wrapper around whatever `src` was passed.\n if (playback) {\n core.setMedia({\n started: playback.started,\n poster: metadata?.poster ?? '',\n });\n }\n\n const { src: authoredSrc, srcSet: authoredSrcSet } = elementProps as { src?: string; srcSet?: string };\n\n // Either authored source makes the image yours, matching `hasSource` in the\n // HTML element. Filling `src` alongside a `srcset` would inject the player's\n // poster into your candidate set as the 1x entry.\n const src = authoredSrc ?? (authoredSrcSet === undefined && playback ? core.getState().src : '');\n\n const initialLoadState: PosterImageLoadState = !src && authoredSrcSet === undefined ? 'none' : 'loading';\n const [request, setRequest] = useState<ImageRequest>(() => ({\n src,\n srcSet: authoredSrcSet,\n state: initialLoadState,\n }));\n const imgRef = useRef<HTMLImageElement \| null>(null);\n\n // Keep only the active request. Retaining a settled source by value would\n // resurrect its old state when the image moved A -> B -> A, even though the\n // second A is a new request. `srcSet` is part of the identity because `src`\n // stays empty when it is the only source.\n const matchesRequest = request.src === src && request.srcSet === authoredSrcSet;\n if (!matchesRequest) setRequest({ src, srcSet: authoredSrcSet, state: initialLoadState });\n const loadState = matchesRequest ? request.state : initialLoadState;\n\n if (playback) core.setImageLoadState(loadState);\n\n const state = playback ? core.getState() : null;\n\n // An image can already be settled when we first see it — hydrated from server\n // markup, say — in which case neither `load` nor `error` ever fires. Decoded\n // pixels stand on their own; the absence of them only means failure once\n // `complete` can be trusted, which takes a source on the image itself, since one\n // sourced by a `<picture>` an override wrapped it in is `complete` regardless.\n //\n // Only when we first see it. A later source change leaves the previous request's\n // pixels in place until the new one settles, so reading them again would call\n // the new source loaded while it is still fetching. `load` and `error` cover\n // every source after this one, the way the HTML element reads an image once.\n // ~~biome~~-~~ignore~~ ~~lint~~/~~correctness/useExhaustiveDependencies:~~ reads the first source only, at mount\n useEffect(() => {\n const img = imgRef.current;\n if (!img) return;\n\n if (img.naturalWidth > 0) setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' });\n else if (img.complete && (img.getAttribute('src') \|\| img.hasAttribute('srcset'))) {\n setRequest({ src, srcSet: authoredSrcSet, state: 'error' });\n }\n }, []);\n\n // Recorded against the source this render asked for, not the one on the\n // element: a `render` override is free to rewrite it.\n const handleLoad = useCallback(\n () => setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' }),\n [src, authoredSrcSet]\n );\n const handleError = useCallback(\n () => setRequest({ src, srcSet: authoredSrcSet, state: 'error' }),\n [src, authoredSrcSet]\n );\n\n if (!playback \|\| !state) {\n if (__DEV__) logMissingFeature('Poster', 'playback');\n return null;\n }\n\n return renderElement(\n 'img',\n { render, className, style },\n {\n state,\n stateAttrMap: PosterDataAttrs,\n ref: [forwardedRef, imgRef],\n props: [\n { alt: '' },\n elementProps,\n {\n // An empty `src` requests the document URL, so leave the attribute off.\n src: src \|\| undefined,\n onLoad: handleLoad,\n onError: handleError,\n },\n ],\n }\n );\n});\n\nexport namespace Poster {\n export type Props = PosterProps;\n export type State = PosterCore.State;\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA~~,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;CAI9C,IAAI,UACF,KAAK,SAAS;EACZ,SAAS,SAAS;EAClB,QAAQ,UAAU,UAAU;CAC9B,CAAC;CAGH,MAAM,EAAE,KAAK,aAAa,QAAQ,mBAAmB;CAKrD,MAAM,MAAM,gBAAgB,mBAAmB,KAAA,KAAa,WAAW,KAAK,SAAS,CAAC,CAAC,MAAM;CAE7F,MAAM,mBAAyC,CAAC,OAAO,mBAAmB,KAAA,IAAY,SAAS;CAC/F,MAAM,CAAC,SAAS,cAAc,gBAA8B;EAC1D;EACA,QAAQ;EACR,OAAO;CACT,EAAE;CACF,MAAM,SAAS,OAAgC,IAAI;CAMnD,MAAM,iBAAiB,QAAQ,QAAQ,OAAO,QAAQ,WAAW;~~CACjE~~,IAAI,CAAC,gBAAgB,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAiB,CAAC;~~CACxF~~,MAAM,YAAY,iBAAiB,QAAQ,QAAQ;CAEnD,IAAI,UAAU,KAAK,kBAAkB,SAAS;CAE9C,MAAM,QAAQ,WAAW,KAAK,SAAS,IAAI;CAa3C,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK;EAEV,IAAI,IAAI,eAAe,GAAG,WAAW;GAAE;GAAK,QAAQ;GAAgB,OAAO;EAAS,CAAC;OAChF,IAAI,IAAI,aAAa,IAAI,aAAa,KAAK,KAAK,IAAI,aAAa,QAAQ,IAC5E,WAAW;GAAE;GAAK,QAAQ;GAAgB,OAAO;EAAQ,CAAC;CAE9D,GAAG,CAAC,CAAC;CAIL,MAAM,aAAa,kBACX,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAS,CAAC,GACjE,CAAC,KAAK,cAAc,CACtB;CACA,MAAM,cAAc,kBACZ,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAQ,CAAC,GAChE,CAAC,KAAK,cAAc,CACtB;CAEA,IAAI,CAAC,YAAY,CAAC,OAAO;EACV,kBAAkB,UAAU,UAAU;~~EACnD~~,OAAO;CACT;CAEA,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,MAAM;EAC1B,OAAO;GACL,EAAE,KAAK,GAAG;GACV;GACA;IAEE,KAAK,OAAO,KAAA;IACZ,QAAQ;IACR,SAAS;GACX;EACF;CACF,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"poster.js","names":[],"sources":["../../../../src/ui/poster/poster.tsx"],"sourcesContent":["import { PosterCore, PosterDataAttrs, type PosterImageLoadState } from '@videojs/core';\nimport { logMissingFeature, selectMetadata, selectPlayback } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, 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/** The source currently requested from the image, and how it is faring. /\ninterface ImageRequest {\n src: string;\n srcSet: string \| undefined;\n state: PosterImageLoadState;\n}\n\n/\n Displays the video poster image. Shows before playback starts, hides after.\n \n Renders an `<img>`, so `srcset`, `sizes`, `loading`, and the rest of the image attributes are yours. Leave the source\n * off and the player's resolved `poster` fills it in.\n \n The image is decorative unless you say otherwise. Describe a poster that carries meaning by passing your own `alt`.\n \n @example\n * ```tsx\n * <VideoPlayer poster=\"poster.jpg\">\n * <Poster />\n * </VideoPlayer>\n \n <Poster srcSet=\"poster-480.jpg 480w, poster-1080.jpg 1080w\" sizes=\"100vw\" />\n \n <Poster\n * render={({ src, ...props }: ComponentProps<'img'>) =>\n * src ? <Image {...props} src={src} alt=\"\" fill /> : null\n * }\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 const metadata = usePlayer(selectMetadata);\n\n const [core] = useState(() => new PosterCore());\n\n // The metadata feature is optional: without it nothing resolves a URL, and\n // this stays a visibility wrapper around whatever `src` was passed.\n if (playback) {\n core.setMedia({\n started: playback.started,\n poster: metadata?.poster ?? '',\n });\n }\n\n const { src: authoredSrc, srcSet: authoredSrcSet } = elementProps as { src?: string; srcSet?: string };\n\n // Either authored source makes the image yours, matching `hasSource` in the\n // HTML element. Filling `src` alongside a `srcset` would inject the player's\n // poster into your candidate set as the 1x entry.\n const src = authoredSrc ?? (authoredSrcSet === undefined && playback ? core.getState().src : '');\n\n const initialLoadState: PosterImageLoadState = !src && authoredSrcSet === undefined ? 'none' : 'loading';\n const [request, setRequest] = useState<ImageRequest>(() => ({\n src,\n srcSet: authoredSrcSet,\n state: initialLoadState,\n }));\n const imgRef = useRef<HTMLImageElement \| null>(null);\n\n // Keep only the active request. Retaining a settled source by value would\n // resurrect its old state when the image moved A -> B -> A, even though the\n // second A is a new request. `srcSet` is part of the identity because `src`\n // stays empty when it is the only source.\n const matchesRequest = request.src === src && request.srcSet === authoredSrcSet;\n\n if (!matchesRequest) setRequest({ src, srcSet: authoredSrcSet, state: initialLoadState });\n\n const loadState = matchesRequest ? request.state : initialLoadState;\n\n if (playback) core.setImageLoadState(loadState);\n\n const state = playback ? core.getState() : null;\n\n // An image can already be settled when we first see it — hydrated from server\n // markup, say — in which case neither `load` nor `error` ever fires. Decoded\n // pixels stand on their own; the absence of them only means failure once\n // `complete` can be trusted, which takes a source on the image itself, since one\n // sourced by a `<picture>` an override wrapped it in is `complete` regardless.\n //\n // Only when we first see it. A later source change leaves the previous request's\n // pixels in place until the new one settles, so reading them again would call\n // the new source loaded while it is still fetching. `load` and `error` cover\n // every source after this one, the way the HTML element reads an image once.\n // oxlint-disable-next-line react/exhaustive-deps -- reads the first source only, at mount\n useEffect(() => {\n const img = imgRef.current;\n if (!img) return;\n\n if (img.naturalWidth > 0) setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' });\n else if (img.complete && (img.getAttribute('src') \|\| img.hasAttribute('srcset'))) {\n setRequest({ src, srcSet: authoredSrcSet, state: 'error' });\n }\n }, []);\n\n // Recorded against the source this render asked for, not the one on the\n // element: a `render` override is free to rewrite it.\n const handleLoad = useCallback(\n () => setRequest({ src, srcSet: authoredSrcSet, state: 'loaded' }),\n [src, authoredSrcSet]\n );\n const handleError = useCallback(\n () => setRequest({ src, srcSet: authoredSrcSet, state: 'error' }),\n [src, authoredSrcSet]\n );\n\n if (!playback \|\| !state) {\n if (__DEV__) logMissingFeature('Poster', 'playback');\n\n return null;\n }\n\n return renderElement(\n 'img',\n { render, className, style },\n {\n state,\n stateAttrMap: PosterDataAttrs,\n ref: [forwardedRef, imgRef],\n props: [\n { alt: '' },\n elementProps,\n {\n // An empty `src` requests the document URL, so leave the attribute off.\n src: src \|\| undefined,\n onLoad: handleLoad,\n onError: handleError,\n },\n ],\n }\n );\n});\n\nexport namespace Poster {\n export type Props = PosterProps;\n export type State = PosterCore.State;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,SAAS,WAAW,SAAS,OACxC,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,GAAG,iBAAiB;CAEtD,MAAM,WAAW,UAAU,cAAc;CACzC,MAAM,WAAW,UAAU,cAAc;CAEzC,MAAM,CAAC,QAAQ,eAAe,IAAI,WAAW,CAAC;CAI9C,IAAI,UACF,KAAK,SAAS;EACZ,SAAS,SAAS;EAClB,QAAQ,UAAU,UAAU;CAC9B,CAAC;CAGH,MAAM,EAAE,KAAK,aAAa,QAAQ,mBAAmB;CAKrD,MAAM,MAAM,gBAAgB,mBAAmB,KAAA,KAAa,WAAW,KAAK,SAAS,CAAC,CAAC,MAAM;CAE7F,MAAM,mBAAyC,CAAC,OAAO,mBAAmB,KAAA,IAAY,SAAS;CAC/F,MAAM,CAAC,SAAS,cAAc,gBAA8B;EAC1D;EACA,QAAQ;EACR,OAAO;CACT,EAAE;CACF,MAAM,SAAS,OAAgC,IAAI;CAMnD,MAAM,iBAAiB,QAAQ,QAAQ,OAAO,QAAQ,WAAW;CAEjE,IAAI,CAAC,gBAAgB,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAiB,CAAC;CAExF,MAAM,YAAY,iBAAiB,QAAQ,QAAQ;CAEnD,IAAI,UAAU,KAAK,kBAAkB,SAAS;CAE9C,MAAM,QAAQ,WAAW,KAAK,SAAS,IAAI;CAa3C,gBAAgB;EACd,MAAM,MAAM,OAAO;EACnB,IAAI,CAAC,KAAK;EAEV,IAAI,IAAI,eAAe,GAAG,WAAW;GAAE;GAAK,QAAQ;GAAgB,OAAO;EAAS,CAAC;OAChF,IAAI,IAAI,aAAa,IAAI,aAAa,KAAK,KAAK,IAAI,aAAa,QAAQ,IAC5E,WAAW;GAAE;GAAK,QAAQ;GAAgB,OAAO;EAAQ,CAAC;CAE9D,GAAG,CAAC,CAAC;CAIL,MAAM,aAAa,kBACX,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAS,CAAC,GACjE,CAAC,KAAK,cAAc,CACtB;CACA,MAAM,cAAc,kBACZ,WAAW;EAAE;EAAK,QAAQ;EAAgB,OAAO;CAAQ,CAAC,GAChE,CAAC,KAAK,cAAc,CACtB;CAEA,IAAI,CAAC,YAAY,CAAC,OAAO;EACV,kBAAkB,UAAU,UAAU;EAEnD,OAAO;CACT;CAEA,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc;EACd,KAAK,CAAC,cAAc,MAAM;EAC1B,OAAO;GACL,EAAE,KAAK,GAAG;GACV;GACA;IAEE,KAAK,OAAO,KAAA;IACZ,QAAQ;IACR,SAAS;GACX;EACF;CACF,CACF;AACF,CAAC"}

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

@@ -14,9 +14,8 @@ interface QualityOptionsResult {
   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.
+ * 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.
  */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-quality-options.d.ts","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"mappings":";;;UAKiB,4BAA4B,sBAAsB;KAEvD,gBAAgB,sBAAsB;UAEjC;EACf,OAAO,sBAAsB;EAC7B;EACA;EACA;EACA,SAAS;EACT;EACA;EACA,WAAW~~;;;;;;;;;iBAiBG~~,kBAAkB,QAAQ,sBAAsB;kBAM/C;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}
1	+ {"version":3,"file":"use-quality-options.d.ts","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"mappings":";;;UAKiB,4BAA4B,sBAAsB;KAEvD,gBAAgB,sBAAsB;UAEjC;EACf,OAAO,sBAAsB;EAC7B;EACA;EACA;EACA,SAAS;EACT;EACA;EACA,WAAW;;;;;;;;iBAgBG,kBAAkB,QAAQ,sBAAsB;kBAM/C;OACH,QAAQ;OACR,SAAS;OACT,SAAS"}

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

@@ -9,9 +9,8 @@ const useQualityRadioOptions = createRadioOptionsHook({
 	createCore: () => new QualityRadioGroupCore()
 });
 /**
-* Create quality menu options (including an `Auto` option) from the player
-* video rendition state. Returns `null` when the quality feature is not
-* configured.
+* 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.
 */

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-quality-options.js","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"sourcesContent":["import { QualityRadioGroupCore, type QualityRadioGroupOption } from '@videojs/core';\nimport { selectQuality } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface QualityOptionsProps extends QualityRadioGroupCore.Props {}\n\nexport type QualityOption = TranslatedRadioOption<QualityRadioGroupOption>;\n\nexport interface QualityOptionsResult {\n state: QualityRadioGroupCore.State;\n label: string;\n value: string;\n selectedLabel: string;\n options: QualityOption[];\n disabled: boolean;\n hidden: boolean;\n setValue: (value: string) => void;\n}\n\nconst useQualityRadioOptions = createRadioOptionsHook({\n name: 'useQualityOptions',\n feature: 'quality',\n selector: selectQuality,\n createCore: () => new QualityRadioGroupCore(),\n});\n\n/*\n Create quality menu options (including an `Auto` option) from the player\n * video rendition state. Returns `null` when the quality feature is not\n * configured.\n \n @param props - Optional `label`, `formatRendition`, and `disabled` overrides.\n */\nexport function useQualityOptions(props?: QualityOptionsProps): QualityOptionsResult \| null {\n 'use no memo';\n\n return useQualityRadioOptions(props);\n}\n\nexport namespace useQualityOptions {\n export type Props = QualityOptionsProps;\n export type Result = QualityOptionsResult;\n export type Option = QualityOption;\n}\n"],"mappings":";;;;AAoBA,MAAM,yBAAyB,uBAAuB;CACpD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,sBAAsB;AAC9C,CAAC~~;;;;;;;;AASD~~,SAAgB,kBAAkB,OAA0D;CAC1F;CAEA,OAAO,uBAAuB,KAAK;AACrC"}
1	+ {"version":3,"file":"use-quality-options.js","names":[],"sources":["../../../../src/ui/quality/use-quality-options.ts"],"sourcesContent":["import { QualityRadioGroupCore, type QualityRadioGroupOption } from '@videojs/core';\nimport { selectQuality } from '@videojs/core/dom';\n\nimport { createRadioOptionsHook, type TranslatedRadioOption } from '../hooks/create-radio-options-hook';\n\nexport interface QualityOptionsProps extends QualityRadioGroupCore.Props {}\n\nexport type QualityOption = TranslatedRadioOption<QualityRadioGroupOption>;\n\nexport interface QualityOptionsResult {\n state: QualityRadioGroupCore.State;\n label: string;\n value: string;\n selectedLabel: string;\n options: QualityOption[];\n disabled: boolean;\n hidden: boolean;\n setValue: (value: string) => void;\n}\n\nconst useQualityRadioOptions = createRadioOptionsHook({\n name: 'useQualityOptions',\n feature: 'quality',\n selector: selectQuality,\n createCore: () => new QualityRadioGroupCore(),\n});\n\n/*\n Create quality menu options (including an `Auto` option) from the player video rendition state. Returns `null` when\n * the quality feature is not configured.\n \n @param props - Optional `label`, `formatRendition`, and `disabled` overrides.\n */\nexport function useQualityOptions(props?: QualityOptionsProps): QualityOptionsResult \| null {\n 'use no memo';\n\n return useQualityRadioOptions(props);\n}\n\nexport namespace useQualityOptions {\n export type Props = QualityOptionsProps;\n export type Result = QualityOptionsResult;\n export type Option = QualityOption;\n}\n"],"mappings":";;;;AAoBA,MAAM,yBAAyB,uBAAuB;CACpD,MAAM;CACN,SAAS;CACT,UAAU;CACV,kBAAkB,IAAI,sBAAsB;AAC9C,CAAC;;;;;;;AAQD,SAAgB,kBAAkB,OAA0D;CAC1F;CAEA,OAAO,uBAAuB,KAAK;AACrC"}

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

@@ -20,17 +20,17 @@ interface QualityRadioGroupProps extends Omit<UIComponentProps<'div', QualityRad
  * Renders menu radio items for the player's video renditions.
  *
  * @example
- * ```tsx
- * <QualityRadioGroup
- *   renderItem={(props, item) => (
- *     <Menu.RadioItem {...props}>
- *       {item.label}
- *       {item.tier ? <sup>{item.tier}</sup> : null}
- *       <Menu.ItemIndicator checked={item.checked} />
- *     </Menu.RadioItem>
- *   )}
- * />
- * ```
+ *   ```tsx
+ *   <QualityRadioGroup
+ *     renderItem={(props, item) => (
+ *       <Menu.RadioItem {...props}>
+ *         {item.label}
+ *         {item.tier ? <sup>{item.tier}</sup> : null}
+ *         <Menu.ItemIndicator checked={item.checked} />
+ *       </Menu.RadioItem>
+ *     )}
+ *   />;
+ *   ```;
  */
 declare const QualityRadioGroup: import("react").ForwardRefExoticComponent<Omit<QualityRadioGroupProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 declare namespace QualityRadioGroup {

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"quality-radio-group.js","names":[],"sources":["../../../../src/ui/quality-radio-group/quality-radio-group.tsx"],"sourcesContent":["import { type QualityRadioGroupCore, QualityRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport { type QualityOption, type QualityOptionsProps, useQualityOptions } from '../quality/use-quality-options';\n\nexport type QualityRadioGroupItemState = QualityOption & {\n /** Whether this quality option is currently selected. /\n checked: boolean;\n};\n\nexport interface QualityRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n /* Rendition value represented by the item. /\n 'data-rendition': string;\n}\n\nexport interface QualityRadioGroupProps\n extends Omit<UIComponentProps<'div', QualityRadioGroupCore.State>, 'children'~~>,\n~~ QualityOptionsProps {\n /* Render one consumer-owned menu radio item for every quality option. /\n renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;\n}\n\n/\n Renders menu radio items for the player's video renditions.\n \n @example\n * ```tsx\n * <QualityRadioGroup\n * renderItem={(props, item) => (\n * <Menu.RadioItem {...props}>\n * {item.label}\n * {item.tier ? <sup>{item.tier}</sup> : null}\n * <Menu.ItemIndicator checked={item.checked} />\n * </Menu.RadioItem>\n * )}\n * ~~/>\~~n * ~~```\~~n */\nexport const QualityRadioGroup = forwardRef<HTMLDivElement, QualityRadioGroupProps>(\n function QualityRadioGroup(componentProps, forwardedRef) {\n const {\n renderItem,\n render,\n className,\n style,\n label,\n formatRendition,\n disabled,\n 'aria-label': ariaLabelProp,\n 'aria-labelledby': ariaLabelledBy,\n ...elementProps\n } = componentProps;\n const quality = useQualityOptions({ label, formatRendition, disabled });\n if (!quality) return null;\n\n const { state, value, options, setValue } = quality;\n const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? quality.label : undefined);\n\n return (\n <MenuRadioGroup\n {...getStateDataAttrs(state, QualityRadioGroupDataAttrs)}\n {...elementProps}\n ref={forwardedRef}\n className={isFunction(className) ? className(state) : className}\n style={isFunction(style) ? style(state) : style}\n render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n value={value}\n onValueChange={setValue}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-disabled={state.disabled \|\| undefined}\n hidden={state.hidden}\n >\n {options.map((option) => {\n const itemState = { ...option, checked: option.value === value };\n\n return (\n <Fragment key={option.value}>\n {renderItem(\n {\n value: option.value,\n disabled: option.disabled,\n 'data-rendition': option.value,\n children: option.label,\n },\n itemState\n )}\n </Fragment>\n );\n })}\n </MenuRadioGroup>\n );\n }\n);\n\nexport namespace QualityRadioGroup {\n export type Props = QualityRadioGroupProps;\n export type State = QualityRadioGroupCore.State;\n export type ItemProps = QualityRadioGroupItemProps;\n export type ItemState = QualityRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;~~AA4CA~~,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,gBAAgB,cAAc;CACvD,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,iBACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,UAAU,kBAAkB;EAAE;EAAO;EAAiB;CAAS,CAAC;CACtE,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,QAAQ,QAAQ,KAAA;CAEnF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,0BAA0B;EACvD,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,kBAAkB,OAAO;IACzB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}
1	+ {"version":3,"file":"quality-radio-group.js","names":[],"sources":["../../../../src/ui/quality-radio-group/quality-radio-group.tsx"],"sourcesContent":["import { type QualityRadioGroupCore, QualityRadioGroupDataAttrs } from '@videojs/core';\nimport { getStateDataAttrs } from '@videojs/core/dom';\nimport { isFunction } from '@videojs/utils/predicate';\nimport type { ReactElement } from 'react';\nimport { Fragment, forwardRef } from 'react';\n\nimport type { HTMLProps, UIComponentProps } from '../../utils/types';\nimport { MenuRadioGroup } from '../menu/menu-radio-group';\nimport type { MenuRadioItemProps } from '../menu/menu-radio-item';\nimport { type QualityOption, type QualityOptionsProps, useQualityOptions } from '../quality/use-quality-options';\n\nexport type QualityRadioGroupItemState = QualityOption & {\n /** Whether this quality option is currently selected. /\n checked: boolean;\n};\n\nexport interface QualityRadioGroupItemProps extends Omit<MenuRadioItemProps, 'ref'> {\n /* Rendition value represented by the item. /\n 'data-rendition': string;\n}\n\nexport interface QualityRadioGroupProps\n extends Omit<UIComponentProps<'div', QualityRadioGroupCore.State>, 'children'>, QualityOptionsProps {\n /* Render one consumer-owned menu radio item for every quality option. /\n renderItem: (props: QualityRadioGroupItemProps, state: QualityRadioGroupItemState) => ReactElement;\n}\n\n/\n Renders menu radio items for the player's video renditions.\n \n @example\n * ```tsx\n * <QualityRadioGroup\n * renderItem={(props, item) => (\n * <Menu.RadioItem {...props}>\n * {item.label}\n * {item.tier ? <sup>{item.tier}</sup> : null}\n * <Menu.ItemIndicator checked={item.checked} />\n * </Menu.RadioItem>\n * )}\n * />;\n * ```;\n */\nexport const QualityRadioGroup = forwardRef<HTMLDivElement, QualityRadioGroupProps>(\n function QualityRadioGroup(componentProps, forwardedRef) {\n const {\n renderItem,\n render,\n className,\n style,\n label,\n formatRendition,\n disabled,\n 'aria-label': ariaLabelProp,\n 'aria-labelledby': ariaLabelledBy,\n ...elementProps\n } = componentProps;\n const quality = useQualityOptions({ label, formatRendition, disabled });\n if (!quality) return null;\n\n const { state, value, options, setValue } = quality;\n const ariaLabel = ariaLabelProp ?? (ariaLabelledBy === undefined ? quality.label : undefined);\n\n return (\n <MenuRadioGroup\n {...getStateDataAttrs(state, QualityRadioGroupDataAttrs)}\n {...elementProps}\n ref={forwardedRef}\n className={isFunction(className) ? className(state) : className}\n style={isFunction(style) ? style(state) : style}\n render={isFunction(render) ? (props: HTMLProps) => render(props, state) : render}\n value={value}\n onValueChange={setValue}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-disabled={state.disabled \|\| undefined}\n hidden={state.hidden}\n >\n {options.map((option) => {\n const itemState = { ...option, checked: option.value === value };\n\n return (\n <Fragment key={option.value}>\n {renderItem(\n {\n value: option.value,\n disabled: option.disabled,\n 'data-rendition': option.value,\n children: option.label,\n },\n itemState\n )}\n </Fragment>\n );\n })}\n </MenuRadioGroup>\n );\n }\n);\n\nexport namespace QualityRadioGroup {\n export type Props = QualityRadioGroupProps;\n export type State = QualityRadioGroupCore.State;\n export type ItemProps = QualityRadioGroupItemProps;\n export type ItemState = QualityRadioGroupItemState;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,oBAAoB,WAC/B,SAAS,kBAAkB,gBAAgB,cAAc;CACvD,MAAM,EACJ,YACA,QACA,WACA,OACA,OACA,iBACA,UACA,cAAc,eACd,mBAAmB,gBACnB,GAAG,iBACD;CACJ,MAAM,UAAU,kBAAkB;EAAE;EAAO;EAAiB;CAAS,CAAC;CACtE,IAAI,CAAC,SAAS,OAAO;CAErB,MAAM,EAAE,OAAO,OAAO,SAAS,aAAa;CAC5C,MAAM,YAAY,kBAAkB,mBAAmB,KAAA,IAAY,QAAQ,QAAQ,KAAA;CAEnF,OACE,oBAAC,gBAAD;EACE,GAAI,kBAAkB,OAAO,0BAA0B;EACvD,GAAI;EACJ,KAAK;EACL,WAAW,WAAW,SAAS,IAAI,UAAU,KAAK,IAAI;EACtD,OAAO,WAAW,KAAK,IAAI,MAAM,KAAK,IAAI;EAC1C,QAAQ,WAAW,MAAM,KAAK,UAAqB,OAAO,OAAO,KAAK,IAAI;EACnE;EACP,eAAe;EACf,cAAY;EACZ,mBAAiB;EACjB,iBAAe,MAAM,YAAY,KAAA;EACjC,QAAQ,MAAM;EAEb,UAAA,QAAQ,KAAK,WAAW;GACvB,MAAM,YAAY;IAAE,GAAG;IAAQ,SAAS,OAAO,UAAU;GAAM;GAE/D,OACE,oBAAC,UAAD,EAAA,UACG,WACC;IACE,OAAO,OAAO;IACd,UAAU,OAAO;IACjB,kBAAkB,OAAO;IACzB,UAAU,OAAO;GACnB,GACA,SACF,EACQ,GAVK,OAAO,KAUZ;EAEd,CAAC;CACa,CAAA;AAEpB,CACF"}

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

@@ -6,18 +6,18 @@ interface SeekButtonProps extends UIComponentProps<'button', SeekButtonCore.Stat
  * A button that seeks forward or backward by a configurable number of seconds.
  *
  * @example
- * ```tsx
- * <SeekButton seconds={-10} />
+ *   ```tsx
+ *   <SeekButton seconds={-10} />
  *
- * <SeekButton
+ *   <SeekButton
  *   seconds={30}
  *   render={(props, state) => (
- *     <button {...props}>
- *       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
- *     </button>
+ *   <button {...props}>
+ *   {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
+ *   </button>
  *   )}
- * />
- * ```
+ *   />
+ *   ```;
  */
 declare const SeekButton: import("react").ForwardRefExoticComponent<SeekButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
 declare namespace SeekButton {

package/dist/dev/ui/seek-button/seek-button.js CHANGED Viewed

@@ -6,18 +6,18 @@ import { SeekButtonCore, SeekButtonDataAttrs } from "@videojs/core";
 * A button that seeks forward or backward by a configurable number of seconds.
 *
 * @example
-* ```tsx
-* <SeekButton seconds={-10} />
+*   ```tsx
+*   <SeekButton seconds={-10} />
 *
-* <SeekButton
+*   <SeekButton
 *   seconds={30}
 *   render={(props, state) => (
-*     <button {...props}>
-*       {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
-*     </button>
+*   <button {...props}>
+*   {state.direction === 'backward' ? <RewindIcon /> : <FastForwardIcon />}
+*   </button>
 *   )}
-* />
-* ```
+*   />
+*   ```;
 */
 const SeekButton = createMediaButton({
 	displayName: "SeekButton",

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/seek-indicator/context.tsx"],"sourcesContent":["import 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":";;;AAOA,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"}
1	+ {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/seek-indicator/context.tsx"],"sourcesContent":["import 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\n return ctx;\n}\n"],"mappings":";;;AAOA,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;CAElG,OAAO;AACT"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"seek-indicator-root.js","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-root.tsx"],"sourcesContent":["import { SeekIndicatorCore, SeekIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicator/use-input-indicator-root';\nimport { SeekIndicatorProvider } from './context';\n\nexport interface SeekIndicatorRootProps\n extends UIComponentProps<'div', SeekIndicatorCore.State~~>,\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":";;;;;;;~~AAaA~~,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"}
1	+ {"version":3,"file":"seek-indicator-root.js","names":[],"sources":["../../../../src/ui/seek-indicator/seek-indicator-root.tsx"],"sourcesContent":["import { SeekIndicatorCore, SeekIndicatorDataAttrs } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useInputIndicatorRoot } from '../input-indicator/use-input-indicator-root';\nimport { SeekIndicatorProvider } from './context';\n\nexport interface SeekIndicatorRootProps\n extends UIComponentProps<'div', SeekIndicatorCore.State>, SeekIndicatorCore.Props {}\n\nexport const SeekIndicatorRoot = forwardRef(function SeekIndicatorRoot(\n componentProps: SeekIndicatorRootProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, closeDelay, ...elementProps } = componentProps;\n const { elementRef, present, state } = useInputIndicatorRoot(() => new SeekIndicatorCore(), { closeDelay });\n if (!present) return null;\n\n return (\n <SeekIndicatorProvider value={{ state }}>\n {renderElement(\n 'div',\n { render, className, style },\n {\n state,\n stateAttrMap: SeekIndicatorDataAttrs,\n ref: [forwardedRef, elementRef],\n props: [elementProps],\n }\n )}\n </SeekIndicatorProvider>\n );\n});\n\nexport namespace SeekIndicatorRoot {\n export type Props = SeekIndicatorRootProps;\n export type State = SeekIndicatorCore.State;\n}\n"],"mappings":";;;;;;;AAYA,MAAa,oBAAoB,WAAW,SAAS,kBACnD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,GAAG,iBAAiB;CAClE,MAAM,EAAE,YAAY,SAAS,UAAU,4BAA4B,IAAI,kBAAkB,GAAG,EAAE,WAAW,CAAC;CAC1G,IAAI,CAAC,SAAS,OAAO;CAErB,OACE,oBAAC,uBAAD;EAAuB,OAAO,EAAE,MAAM;EACnC,UAAA,cACC,OACA;GAAE;GAAQ;GAAW;EAAM,GAC3B;GACE;GACA,cAAc;GACd,KAAK,CAAC,cAAc,UAAU;GAC9B,OAAO,CAAC,YAAY;EACtB,CACF;CACqB,CAAA;AAE3B,CAAC"}

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"slider-root.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"mappings":";;;~~UAWiB~~,wBAAwB,wBAAwB,WAAW,QAAQ,WAAW;EAC7F,kBAAkB;EAClB,kBAAkB;EAClB;EACA;;cAGW,4BAAU,0BAAA,KAAA,0CAAA,cAAA;~~kBAuFN~~;OACH,QAAQ;OACR,QAAQ,WAAW"}
1	+ {"version":3,"file":"slider-root.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"mappings":";;;UAYiB,wBAAwB,wBAAwB,WAAW,QAAQ,WAAW;EAC7F,kBAAkB;EAClB,kBAAkB;EAClB;EACA;;cAGW,4BAAU,0BAAA,KAAA,0CAAA,cAAA;kBAyFN;OACH,QAAQ;OACR,QAAQ,WAAW"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"slider-root.js","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"sourcesContent":["import { 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 input,\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 input,\n getPointerValue: (percent) => core.valueFromPercent(percent),\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":";;;;;;;;;;~~AAkBA~~,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,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;GACA,kBAAkB,YAAY,KAAK,iBAAiB,OAAO;GAC3D,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"}
1	+ {"version":3,"file":"slider-root.js","names":[],"sources":["../../../../src/ui/slider/slider-root.tsx"],"sourcesContent":["import { 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';\n\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\n core.setProps({ label, min, max, step, largeStep, orientation, disabled, thumbAlignment });\n\n const {\n state,\n input,\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 input,\n getPointerValue: (percent) => core.valueFromPercent(percent),\n thumbRef: sliderThumbRef,\n thumbProps,\n stateAttrMap: SliderDataAttrs,\n getAttrs: (sliderState) => {\n const attrs = core.getAttrs(sliderState);\n\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":";;;;;;;;;;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,WAAW,CAAC;CAC9C,MAAM,aAAa,cAAc;CAEjC,KAAK,SAAS;EAAE;EAAO;EAAK;EAAK;EAAM;EAAW;EAAa;EAAU;CAAe,CAAC;CAEzF,MAAM,EACJ,OACA,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;GACA,kBAAkB,YAAY,KAAK,iBAAiB,OAAO;GAC3D,UAAU;GACV;GACA,cAAc;GACd,WAAW,gBAAgB;IACzB,MAAM,QAAQ,KAAK,SAAS,WAAW;IAEvC,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-thumbnail.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slider-thumbnail.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-thumbnail.tsx"],"mappings":";;;UAMiB,6BAA6B,KAAK;cAEtC,iCAAe,0BAAA,KAAA,+CAAA,cAAA;~~kBAOX~~;OACH,QAAQ;OACR,QAAQ,cAAc"}
1	+ {"version":3,"file":"slider-thumbnail.d.ts","names":[],"sources":["../../../../src/ui/slider/slider-thumbnail.tsx"],"mappings":";;;UAMiB,6BAA6B,KAAK;cAEtC,iCAAe,0BAAA,KAAA,+CAAA,cAAA;kBAQX;OACH,QAAQ;OACR,QAAQ,cAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"slider-thumbnail.js","names":[],"sources":["../../../../src/ui/slider/slider-thumbnail.tsx"],"sourcesContent":["import type { ThumbnailCore } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport { Thumbnail, type ThumbnailProps } from '../thumbnail/thumbnail';\nimport { useSliderPointerValue } 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 = useSliderPointerValue();\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":";;;;;AAQA,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,gBAAgB,cAAc;CACrD,MAAM,eAAe,sBAAsB;~~CAC3C~~,OAAO,oBAAC,WAAD;EAAW,KAAK;EAAc,GAAI;EAAgB,MAAM;CAAe,CAAA;AAChF,CACF"}
1	+ {"version":3,"file":"slider-thumbnail.js","names":[],"sources":["../../../../src/ui/slider/slider-thumbnail.tsx"],"sourcesContent":["import type { ThumbnailCore } from '@videojs/core';\nimport { forwardRef } from 'react';\n\nimport { Thumbnail, type ThumbnailProps } from '../thumbnail/thumbnail';\nimport { useSliderPointerValue } 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 = useSliderPointerValue();\n\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":";;;;;AAQA,MAAa,kBAAkB,WAC7B,SAAS,gBAAgB,gBAAgB,cAAc;CACrD,MAAM,eAAe,sBAAsB;CAE3C,OAAO,oBAAC,WAAD;EAAW,KAAK;EAAc,GAAI;EAAgB,MAAM;CAAe,CAAA;AAChF,CACF"}

package/dist/dev/ui/status-announcer/status-announcer.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"status-announcer.d.ts","names":[],"sources":["../../../../src/ui/status-announcer/status-announcer.tsx"],"mappings":";;;~~UAUiB~~,~~6BACP~~,wBAAwB,oBAAoB,~~QAClD~~,KAAK,oBAAoB;cAEhB,iCAAe,0BAAA,KAAA,+CAAA,cAAA;~~kBAiDX~~;OACH,QAAQ;OACR,QAAQ,oBAAoB"}
1	+ {"version":3,"file":"status-announcer.d.ts","names":[],"sources":["../../../../src/ui/status-announcer/status-announcer.tsx"],"mappings":";;;UAWiB,6BAEb,wBAAwB,oBAAoB,QAC5C,KAAK,oBAAoB;cAEhB,iCAAe,0BAAA,KAAA,+CAAA,cAAA;kBAkDX;OACH,QAAQ;OACR,QAAQ,oBAAoB"}

package/dist/dev/ui/status-announcer/status-announcer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"status-announcer.js","names":[],"sources":["../../../../src/ui/status-announcer/status-announcer.tsx"],"sourcesContent":["import { createStatusAnnouncerLabels, StatusAnnouncerCore } from '@videojs/core';\nimport { shouldAnnounceStatusChange, subscribeToStatusAnnouncer } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useEffect, useState, useSyncExternalStore } from 'react';\nimport { useLocale, useTranslator } from '../../i18n/context';\nimport { useContainer, usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface StatusAnnouncerProps\n extends UIComponentProps<'div', StatusAnnouncerCore.State>,\n Pick<StatusAnnouncerCore.Props, 'closeDelay' \| 'labels'> {}\n\nexport const StatusAnnouncer = forwardRef(function StatusAnnouncer(\n componentProps: StatusAnnouncerProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, closeDelay, labels, ...elementProps } = componentProps;\n const translator = useTranslator();\n const locale = useLocale();\n const [core] = useState(() => new StatusAnnouncerCore());\n const store = usePlayer();\n const container = useContainer();\n useDestroy(core);\n core.setProps({\n closeDelay,\n labels: {\n ...createStatusAnnouncerLabels(translator, locale),\n ...labels,\n },\n shouldAnnounce: () => shouldAnnounceStatusChange(container),\n });\n\n useEffect(() => subscribeToStatusAnnouncer(store, core), [core, store]);\n\n const state = useSyncExternalStore(\n (callback) => core.state.subscribe(callback),\n () => core.state.current,\n () => core.state.current\n );\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: forwardedRef,\n props: [\n elementProps,\n {\n role: 'status',\n children: (\n <span key={state.generation} data-status-announcer-content=\"\">\n {state.label ?? ''}\n </span>\n ),\n },\n ],\n }\n );\n});\n\nexport namespace StatusAnnouncer {\n export type Props = StatusAnnouncerProps;\n export type State = StatusAnnouncerCore.State;\n}\n"],"mappings":";;;;;;;;;~~AAcA~~,MAAa,kBAAkB,WAAW,SAAS,gBACjD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,QAAQ,GAAG,iBAAiB;CAC1E,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;CACzB,MAAM,CAAC,QAAQ,eAAe,IAAI,oBAAoB,CAAC;CACvD,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;~~CAC~~/B,WAAW,IAAI;CACf,KAAK,SAAS;EACZ;EACA,QAAQ;GACN,GAAG,4BAA4B,YAAY,MAAM;GACjD,GAAG;EACL;EACA,sBAAsB,2BAA2B,SAAS;CAC5D,CAAC;CAED,gBAAgB,2BAA2B,OAAO,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC;CAEtE,MAAM,QAAQ,sBACX,aAAa,KAAK,MAAM,UAAU,QAAQ,SACrC,KAAK,MAAM,eACX,KAAK,MAAM,OACnB;CAEA,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK;EACL,OAAO,CACL,cACA;GACE,MAAM;GACN,UACE,oBAAC,QAAD;IAA6B,iCAA8B;IACxD,UAAA,MAAM,SAAS;GACZ,GAFK,MAAM,UAEX;EAEV,CACF;CACF,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"status-announcer.js","names":[],"sources":["../../../../src/ui/status-announcer/status-announcer.tsx"],"sourcesContent":["import { createStatusAnnouncerLabels, StatusAnnouncerCore } from '@videojs/core';\nimport { shouldAnnounceStatusChange, subscribeToStatusAnnouncer } from '@videojs/core/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useEffect, useState, useSyncExternalStore } from 'react';\n\nimport { useLocale, useTranslator } from '../../i18n/context';\nimport { useContainer, usePlayer } from '../../player/context';\nimport type { UIComponentProps } from '../../utils/types';\nimport { useDestroy } from '../../utils/use-destroy';\nimport { renderElement } from '../../utils/use-render';\n\nexport interface StatusAnnouncerProps\n extends\n UIComponentProps<'div', StatusAnnouncerCore.State>,\n Pick<StatusAnnouncerCore.Props, 'closeDelay' \| 'labels'> {}\n\nexport const StatusAnnouncer = forwardRef(function StatusAnnouncer(\n componentProps: StatusAnnouncerProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n const { render, className, style, closeDelay, labels, ...elementProps } = componentProps;\n const translator = useTranslator();\n const locale = useLocale();\n const [core] = useState(() => new StatusAnnouncerCore());\n const store = usePlayer();\n const container = useContainer();\n\n useDestroy(core);\n core.setProps({\n closeDelay,\n labels: {\n ...createStatusAnnouncerLabels(translator, locale),\n ...labels,\n },\n shouldAnnounce: () => shouldAnnounceStatusChange(container),\n });\n\n useEffect(() => subscribeToStatusAnnouncer(store, core), [core, store]);\n\n const state = useSyncExternalStore(\n (callback) => core.state.subscribe(callback),\n () => core.state.current,\n () => core.state.current\n );\n\n return renderElement(\n 'div',\n { render, className, style },\n {\n state,\n ref: forwardedRef,\n props: [\n elementProps,\n {\n role: 'status',\n children: (\n <span key={state.generation} data-status-announcer-content=\"\">\n {state.label ?? ''}\n </span>\n ),\n },\n ],\n }\n );\n});\n\nexport namespace StatusAnnouncer {\n export type Props = StatusAnnouncerProps;\n export type State = StatusAnnouncerCore.State;\n}\n"],"mappings":";;;;;;;;;AAgBA,MAAa,kBAAkB,WAAW,SAAS,gBACjD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,YAAY,QAAQ,GAAG,iBAAiB;CAC1E,MAAM,aAAa,cAAc;CACjC,MAAM,SAAS,UAAU;CACzB,MAAM,CAAC,QAAQ,eAAe,IAAI,oBAAoB,CAAC;CACvD,MAAM,QAAQ,UAAU;CACxB,MAAM,YAAY,aAAa;CAE/B,WAAW,IAAI;CACf,KAAK,SAAS;EACZ;EACA,QAAQ;GACN,GAAG,4BAA4B,YAAY,MAAM;GACjD,GAAG;EACL;EACA,sBAAsB,2BAA2B,SAAS;CAC5D,CAAC;CAED,gBAAgB,2BAA2B,OAAO,IAAI,GAAG,CAAC,MAAM,KAAK,CAAC;CAEtE,MAAM,QAAQ,sBACX,aAAa,KAAK,MAAM,UAAU,QAAQ,SACrC,KAAK,MAAM,eACX,KAAK,MAAM,OACnB;CAEA,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,KAAK;EACL,OAAO,CACL,cACA;GACE,MAAM;GACN,UACE,oBAAC,QAAD;IAA6B,iCAA8B;IACxD,UAAA,MAAM,SAAS;GACZ,GAFK,MAAM,UAEX;EAEV,CACF;CACF,CACF;AACF,CAAC"}

package/dist/dev/ui/status-indicator/context.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/status-indicator/context.tsx"],"sourcesContent":["import type { StatusIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface StatusIndicatorContextValue {\n state: StatusIndicatorCore.State;\n}\n\nconst StatusIndicatorContext = createContext<StatusIndicatorContextValue \| null>(null);\n\nexport function StatusIndicatorProvider({ value, children }: ProviderProps<StatusIndicatorContextValue>) {\n return <StatusIndicatorContext.Provider value={value}>{children}</StatusIndicatorContext.Provider>;\n}\n\nexport function useStatusIndicatorContext(): StatusIndicatorContextValue {\n const ctx = useContext(StatusIndicatorContext);\n if (!ctx) throw new Error('StatusIndicator child compounds must be used within a StatusIndicator.Root');\n return ctx;\n}\n"],"mappings":";;;AAOA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,SAAgB,wBAAwB,EAAE,OAAO,YAAwD;CACvG,OAAO,oBAAC,uBAAuB,UAAxB;EAAwC;EAAQ;CAA0C,CAAA;AACnG;AAEA,SAAgB,4BAAyD;CACvE,MAAM,MAAM,WAAW,sBAAsB;CAC7C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,4EAA4E;~~CACtG~~,OAAO;AACT"}
1	+ {"version":3,"file":"context.js","names":[],"sources":["../../../../src/ui/status-indicator/context.tsx"],"sourcesContent":["import type { StatusIndicatorCore } from '@videojs/core';\nimport { createContext, type ProviderProps, useContext } from 'react';\n\nexport interface StatusIndicatorContextValue {\n state: StatusIndicatorCore.State;\n}\n\nconst StatusIndicatorContext = createContext<StatusIndicatorContextValue \| null>(null);\n\nexport function StatusIndicatorProvider({ value, children }: ProviderProps<StatusIndicatorContextValue>) {\n return <StatusIndicatorContext.Provider value={value}>{children}</StatusIndicatorContext.Provider>;\n}\n\nexport function useStatusIndicatorContext(): StatusIndicatorContextValue {\n const ctx = useContext(StatusIndicatorContext);\n if (!ctx) throw new Error('StatusIndicator child compounds must be used within a StatusIndicator.Root');\n\n return ctx;\n}\n"],"mappings":";;;AAOA,MAAM,yBAAyB,cAAkD,IAAI;AAErF,SAAgB,wBAAwB,EAAE,OAAO,YAAwD;CACvG,OAAO,oBAAC,uBAAuB,UAAxB;EAAwC;EAAQ;CAA0C,CAAA;AACnG;AAEA,SAAgB,4BAAyD;CACvE,MAAM,MAAM,WAAW,sBAAsB;CAC7C,IAAI,CAAC,KAAK,MAAM,IAAI,MAAM,4EAA4E;CAEtG,OAAO;AACT"}

package/dist/dev/ui/status-indicator/index.parts.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/status-indicator/index.parts.ts"],"sourcesContent":["export {\n StatusIndicatorRoot as Root~~,\n~~ type StatusIndicatorRootProps as RootProps~~,\n~~} from './status-indicator-root';\nexport {\n StatusIndicatorValue as Value~~,\n~~ type StatusIndicatorValueProps as ValueProps~~,\n~~} from './status-indicator-value';\n"],"mappings":""}
1	+ {"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/status-indicator/index.parts.ts"],"sourcesContent":["export { StatusIndicatorRoot as Root, type StatusIndicatorRootProps as RootProps } from './status-indicator-root';\nexport { StatusIndicatorValue as Value, type StatusIndicatorValueProps as ValueProps } from './status-indicator-value';\n"],"mappings":""}

package/dist/dev/ui/status-indicator/status-indicator-root.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"status-indicator-root.d.ts","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-root.tsx"],"mappings":";;;UAUiB,iCACP,wBAAwB,oBAAoB,~~QAClD~~,KAAK,oBAAoB;~~cAEhB~~,qCAAmB,0BAAA,KAAA,mDAAA,cAAA;~~kBAkCf~~;OACH,QAAQ;OACR,QAAQ,oBAAoB"}
1	+ {"version":3,"file":"status-indicator-root.d.ts","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-root.tsx"],"mappings":";;;UAUiB,iCACP,wBAAwB,oBAAoB,QAAQ,KAAK,oBAAoB;cAE1E,qCAAmB,0BAAA,KAAA,mDAAA,cAAA;kBAiCf;OACH,QAAQ;OACR,QAAQ,oBAAoB"}

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

@@ -8,10 +8,11 @@ import { StatusIndicatorCore, StatusIndicatorDataAttrs, createInputIndicatorLabe
 //#region src/ui/status-indicator/status-indicator-root.tsx
 const StatusIndicatorRoot = forwardRef(function StatusIndicatorRoot(componentProps, forwardedRef) {
 	const { render, className, style, actions, closeDelay, ...elementProps } = componentProps;
+	const translator = useTranslator();
 	const { elementRef, present, state } = useInputIndicatorRoot(() => new StatusIndicatorCore(), {
 		actions,
 		closeDelay,
-		labels: createInputIndicatorLabels(useTranslator())
+		labels: createInputIndicatorLabels(translator)
 	}, { replayOnUpdate: false });
 	if (!present) return null;
 	return /* @__PURE__ */ jsx(StatusIndicatorProvider, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"status-indicator-root.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-root.tsx"],"sourcesContent":["import { 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-indicator/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(\n () => new StatusIndicatorCore(),\n {\n actions,\n closeDelay,\n labels: createInputIndicatorLabels(translator),\n },\n { replayOnUpdate: false }\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":";;;;;;;;~~AAcA~~,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,YAAY,GAAG,iBAAiB;~~CAE3E~~,MAAM,EAAE,YAAY,SAAS,UAAU,4BAC/B,IAAI,oBAAoB,GAC9B;EACE;EACA;EACA,QAAQ,~~2BANO~~,~~cAM6B,CAAC~~;CAC/C,GACA,EAAE,gBAAgB,MAAM,CAC1B;~~CAEA~~,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"}
1	+ {"version":3,"file":"status-indicator-root.js","names":[],"sources":["../../../../src/ui/status-indicator/status-indicator-root.tsx"],"sourcesContent":["import { 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-indicator/use-input-indicator-root';\nimport { StatusIndicatorProvider } from './context';\n\nexport interface StatusIndicatorRootProps\n extends UIComponentProps<'div', StatusIndicatorCore.State>, 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(\n () => new StatusIndicatorCore(),\n {\n actions,\n closeDelay,\n labels: createInputIndicatorLabels(translator),\n },\n { replayOnUpdate: false }\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":";;;;;;;;AAaA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,SAAS,YAAY,GAAG,iBAAiB;CAC3E,MAAM,aAAa,cAAc;CACjC,MAAM,EAAE,YAAY,SAAS,UAAU,4BAC/B,IAAI,oBAAoB,GAC9B;EACE;EACA;EACA,QAAQ,2BAA2B,UAAU;CAC/C,GACA,EAAE,gBAAgB,MAAM,CAC1B;CACA,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/thumbnail/thumbnail.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"thumbnail.d.ts","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail.tsx"],"mappings":";;;UAkBiB,uBAAuB,wBAAwB,cAAc,QAAQ,cAAc;;EAElG,aAAa;;~~cAwBF~~,2BAAS,0BAAA,KAAA,yCAAA,cAAA;~~kBAwGL~~;OACH,QAAQ;OACR,QAAQ,cAAc"}
1	+ {"version":3,"file":"thumbnail.d.ts","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail.tsx"],"mappings":";;;UAkBiB,uBAAuB,wBAAwB,cAAc,QAAQ,cAAc;;EAElG,aAAa;;cAyBF,2BAAS,0BAAA,KAAA,yCAAA,cAAA;kBA2GL;OACH,QAAQ;OACR,QAAQ,cAAc"}

package/dist/dev/ui/thumbnail/thumbnail.js CHANGED Viewed

@@ -4,17 +4,16 @@ import { renderElement } from "../../utils/use-render.js";
 import { createThumbnail, selectTextTrack } from "@videojs/core/dom";
 import { forwardRef, useMemo, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { isNull, isUndefined } from "@videojs/utils/predicate";
 import { ThumbnailCore, ThumbnailDataAttrs, mapCuesToThumbnails } from "@videojs/core";
+import { isNull, isUndefined } from "@videojs/utils/predicate";
 //#region src/ui/thumbnail/thumbnail.tsx
 /**
-* Leaving `crossOrigin` unset means "follow the media element", so thumbnails
-* keep working on a CORS-enabled player without a skin having to thread a prop
-* through. `null` opts out and fetches the sprites no-CORS. `''` is passed
+* Leaving `crossOrigin` unset means "follow the media element", so thumbnails keep working on a CORS-enabled player
+* without a skin having to thread a prop through. `null` opts out and fetches the sprites no-CORS. `''` is passed
 * straight through, since the CORS-settings attribute reads it as Anonymous.
 *
-* Only the `<track>` path inherits: `thumbnails` passed directly may point at a
-* host that has nothing to do with the media element.
+* Only the `<track>` path inherits: `thumbnails` passed directly may point at a host that has nothing to do with the
+* media element.
 */
 function resolveCrossOrigin(explicit, external, inherited) {
 	if (isNull(explicit)) return void 0;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"thumbnail.js","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail.tsx"],"sourcesContent":["import {\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 { MediaTextTrackState } from '@videojs/media';\nimport { isNull, isUndefined } from '@videojs/utils/predicate';\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\n/\n Leaving `crossOrigin` unset means \"follow the media element\", so thumbnails\n * keep working on a CORS-enabled player without a skin having to thread a prop\n * through. `null` opts out and fetches the sprites no-CORS. `''` is passed\n * straight through, since the CORS-settings attribute reads it as Anonymous.\n \n Only the `<track>` path inherits: `thumbnails` passed directly may point at a\n * host that has nothing to do with the media element.\n */\nfunction resolveCrossOrigin(\n explicit: ThumbnailCore.Props['crossOrigin'],\n external: ThumbnailImage[] \| undefined,\n inherited: MediaTextTrackState['thumbnailTrackCrossOrigin'] \| undefined\n) {\n if (isNull(explicit)) return undefined;\n if (!isUndefined(explicit)) return explicit;\n if (external?.length) return undefined;\n\n return inherited ?? 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 const resolvedCrossOrigin = resolveCrossOrigin(crossOrigin, externalThumbnails, textTrack?.thumbnailTrackCrossOrigin);\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={resolvedCrossOrigin}\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":"~~;;;;;;;;;;;;;;;;;;AAgCA~~,SAAS,mBACP,UACA,UACA,WACA;CACA,IAAI,OAAO,QAAQ,GAAG,OAAO,KAAA;~~CAC7B~~,IAAI,CAAC,YAAY,QAAQ,GAAG,OAAO;~~CACnC~~,IAAI,UAAU,QAAQ,OAAO,KAAA;CAE7B,OAAO,aAAa,KAAA;AACtB;AAEA,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;CAEpG,MAAM,sBAAsB,mBAAmB,aAAa,oBAAoB,WAAW,yBAAyB;CAGpH,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;IACJ;IACT,OAAO;IAEQ;GAChB,CAAA,EAEL;EACF;CACF,CACF;AACF,CAAC"}
1	+ {"version":3,"file":"thumbnail.js","names":[],"sources":["../../../../src/ui/thumbnail/thumbnail.tsx"],"sourcesContent":["import {\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 { MediaTextTrackState } from '@videojs/media';\nimport { isNull, isUndefined } from '@videojs/utils/predicate';\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\n/\n Leaving `crossOrigin` unset means \"follow the media element\", so thumbnails keep working on a CORS-enabled player\n * without a skin having to thread a prop through. `null` opts out and fetches the sprites no-CORS. `''` is passed\n * straight through, since the CORS-settings attribute reads it as Anonymous.\n \n Only the `<track>` path inherits: `thumbnails` passed directly may point at a host that has nothing to do with the\n * media element.\n */\nfunction resolveCrossOrigin(\n explicit: ThumbnailCore.Props['crossOrigin'],\n external: ThumbnailImage[] \| undefined,\n inherited: MediaTextTrackState['thumbnailTrackCrossOrigin'] \| undefined\n) {\n if (isNull(explicit)) return undefined;\n\n if (!isUndefined(explicit)) return explicit;\n\n if (external?.length) return undefined;\n\n return inherited ?? 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\n const divRef = useRef<HTMLDivElement>(null);\n const imgRef = useRef<HTMLImageElement>(null);\n\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\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 const resolvedCrossOrigin = resolveCrossOrigin(crossOrigin, externalThumbnails, textTrack?.thumbnailTrackCrossOrigin);\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={resolvedCrossOrigin}\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":";;;;;;;;;;;;;;;;;AA+BA,SAAS,mBACP,UACA,UACA,WACA;CACA,IAAI,OAAO,QAAQ,GAAG,OAAO,KAAA;CAE7B,IAAI,CAAC,YAAY,QAAQ,GAAG,OAAO;CAEnC,IAAI,UAAU,QAAQ,OAAO,KAAA;CAE7B,OAAO,aAAa,KAAA;AACtB;AAEA,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;CAEjD,MAAM,SAAS,OAAuB,IAAI;CAC1C,MAAM,SAAS,OAAyB,IAAI;CAE5C,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;EAEhE,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;CAEpG,MAAM,sBAAsB,mBAAmB,aAAa,oBAAoB,WAAW,yBAAyB;CAGpH,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;IACJ;IACT,OAAO;IAEQ;GAChB,CAAA,EAEL;EACF;CACF,CACF;AACF,CAAC"}

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

@@ -10,13 +10,13 @@ interface GroupProps extends UIComponentProps<'span', GroupState> {
  * Container for composed time displays. Renders a `<span>` element.
  *
  * @example
- * ```tsx
- * <Time.Group>
- *   <Time.Value type="current" />
- *   <Time.Separator />
- *   <Time.Value type="duration" />
- * </Time.Group>
- * ```
+ *   ```tsx
+ *   <Time.Group>
+ *     <Time.Value type="current" />
+ *     <Time.Separator />
+ *     <Time.Value type="duration" />
+ *   </Time.Group>;
+ *   ```;
  */
 declare const Group: import("react").ForwardRefExoticComponent<Omit<GroupProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
 declare namespace Group {

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

@@ -5,13 +5,13 @@ import { forwardRef } from "react";
 * Container for composed time displays. Renders a `<span>` element.
 *
 * @example
-* ```tsx
-* <Time.Group>
-*   <Time.Value type="current" />
-*   <Time.Separator />
-*   <Time.Value type="duration" />
-* </Time.Group>
-* ```
+*   ```tsx
+*   <Time.Group>
+*     <Time.Value type="current" />
+*     <Time.Separator />
+*     <Time.Value type="duration" />
+*   </Time.Group>;
+*   ```;
 */
 const Group = forwardRef(function Group(componentProps, forwardedRef) {
 	const { render, className, style, children, ...elementProps } = componentProps;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"time-group.js","names":[],"sources":["../../../../src/ui/time/time-group.tsx"],"sourcesContent":["import 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":";;;;;;;;;;;;;;;AA0BA,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"}
1	+ {"version":3,"file":"time-group.js","names":[],"sources":["../../../../src/ui/time/time-group.tsx"],"sourcesContent":["import 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":";;;;;;;;;;;;;;;AA0BA,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"}