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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/seek-indicator/index.parts.ts"],"sourcesContent":["export { SeekIndicatorRoot as Root, type SeekIndicatorRootProps as RootProps } from './seek-indicator-root';\nexport { SeekIndicatorValue as Value, type SeekIndicatorValueProps as ValueProps } from './seek-indicator-value';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/seek-indicator/index.parts.ts"],"sourcesContent":["export { SeekIndicatorRoot as Root, type SeekIndicatorRootProps as RootProps } from './root';\nexport { SeekIndicatorValue as Value, type SeekIndicatorValueProps as ValueProps } from './value';\n"],"mappings":""}

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

@@ -0,0 +1,29 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useInputIndicatorRoot } from "../input-indicator/use-input-indicator-root.js";
+import { SeekIndicatorProvider } from "./context.js";
+import { SeekIndicatorCore, SeekIndicatorDataAttrs } from "@videojs/core";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/seek-indicator/root.tsx
+const SeekIndicatorRoot = forwardRef(function SeekIndicatorRoot(componentProps, forwardedRef) {
+	const { render, className, style, closeDelay, ...elementProps } = componentProps;
+	const { elementRef, present, state } = useInputIndicatorRoot(() => new SeekIndicatorCore(), { closeDelay });
+	if (!present) return null;
+	return /* @__PURE__ */ jsx(SeekIndicatorProvider, {
+		value: { state },
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: SeekIndicatorDataAttrs,
+			ref: [forwardedRef, elementRef],
+			props: [elementProps]
+		})
+	});
+});
+//#endregion
+export { SeekIndicatorRoot };
+
+//# sourceMappingURL=root.js.map

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

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

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

@@ -0,0 +1,22 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useSeekIndicatorContext } from "./context.js";
+import { getSeekIndicatorDisplayValue } from "@videojs/core";
+import { forwardRef } from "react";
+//#region src/ui/seek-indicator/value.tsx
+const SeekIndicatorValue = forwardRef(function SeekIndicatorValue(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const { state } = useSeekIndicatorContext();
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: forwardedRef,
+		props: [{ children: getSeekIndicatorDisplayValue(state) }, elementProps]
+	});
+});
+//#endregion
+export { SeekIndicatorValue };
+
+//# sourceMappingURL=value.js.map

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

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

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

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

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

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

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

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

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

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

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

@@ -1,12 +1,12 @@
 import { __exportAll } from "../../_virtual/_rolldown/runtime.js";
-import { SliderBuffer } from "./slider-buffer.js";
-import { SliderFill } from "./slider-fill.js";
-import { SliderPreview } from "./slider-preview.js";
-import { SliderRoot } from "./slider-root.js";
-import { SliderThumb } from "./slider-thumb.js";
-import { SliderThumbnail } from "./slider-thumbnail.js";
-import { SliderTrack } from "./slider-track.js";
-import { SliderValue } from "./slider-value.js";
+import { SliderBuffer } from "./buffer.js";
+import { SliderFill } from "./fill.js";
+import { SliderPreview } from "./preview.js";
+import { SliderRoot } from "./root.js";
+import { SliderThumb } from "./thumb.js";
+import { index_parts_exports as index_parts_exports$1 } from "./thumbnail/index.parts.js";
+import { SliderTrack } from "./track.js";
+import { SliderValue } from "./value.js";
 //#region src/ui/slider/index.parts.ts
 var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Buffer: () => SliderBuffer,
@@ -14,11 +14,11 @@ var index_parts_exports = /* @__PURE__ */ __exportAll({
 	Preview: () => SliderPreview,
 	Root: () => SliderRoot,
 	Thumb: () => SliderThumb,
-	Thumbnail: () => SliderThumbnail,
+	Thumbnail: () => index_parts_exports$1,
 	Track: () => SliderTrack,
 	Value: () => SliderValue
 });
 //#endregion
-export { SliderBuffer as Buffer, SliderFill as Fill, SliderPreview as Preview, SliderRoot as Root, SliderThumb as Thumb, SliderThumbnail as Thumbnail, SliderTrack as Track, SliderValue as Value, index_parts_exports };
+export { SliderBuffer as Buffer, SliderFill as Fill, SliderPreview as Preview, SliderRoot as Root, SliderThumb as Thumb, index_parts_exports$1 as Thumbnail, SliderTrack as Track, SliderValue as Value, index_parts_exports };
 
 //# sourceMappingURL=index.parts.js.map

package/dist/default/ui/slider/index.parts.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/slider/index.parts.ts"],"sourcesContent":["export { SliderBuffer as Buffer, type SliderBufferProps as BufferProps } from './slider-buffer';\nexport { SliderFill as Fill, type SliderFillProps as FillProps } from './slider-fill';\nexport { SliderPreview as Preview, type SliderPreviewProps as PreviewProps } from './slider-preview';\nexport { SliderRoot as Root, type SliderRootProps as RootProps } from './slider-root';\nexport { SliderThumb as Thumb, type SliderThumbProps as ThumbProps } from './slider-thumb';\nexport { SliderThumbnail as Thumbnail, type SliderThumbnailProps as ThumbnailProps } from './slider-thumbnail';\nexport { SliderTrack as Track, type SliderTrackProps as TrackProps } from './slider-track';\nexport { SliderValue as Value, type SliderValueProps as ValueProps } from './slider-value';\n"],"mappings":""}
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../src/ui/slider/index.parts.ts"],"sourcesContent":["export { SliderBuffer as Buffer, type SliderBufferProps as BufferProps } from './buffer';\nexport { SliderFill as Fill, type SliderFillProps as FillProps } from './fill';\nexport { SliderPreview as Preview, type SliderPreviewProps as PreviewProps } from './preview';\nexport { SliderRoot as Root, type SliderRootProps as RootProps } from './root';\nexport { SliderThumb as Thumb, type SliderThumbProps as ThumbProps } from './thumb';\nexport * as Thumbnail from './thumbnail/index.parts';\nexport { SliderTrack as Track, type SliderTrackProps as TrackProps } from './track';\nexport { SliderValue as Value, type SliderValueProps as ValueProps } from './value';\n"],"mappings":""}

package/dist/default/ui/slider/preview.js

@@ -0,0 +1,36 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useSliderContext } from "./context.js";
+import { getSliderPreviewStyle } from "@videojs/core/dom";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { observeResize } from "@videojs/utils/dom";
+//#region src/ui/slider/preview.tsx
+/** Positioning container for preview content that tracks the pointer along the slider. */
+const SliderPreview = forwardRef(function SliderPreview(componentProps, forwardedRef) {
+	const { render, className, style, overflow = "clamp", ...elementProps } = componentProps;
+	const context = useSliderContext();
+	const { state } = context;
+	const measureRef = useRef(null);
+	const [width, setWidth] = useState(0);
+	useEffect(() => {
+		const el = measureRef.current;
+		if (!el) return;
+		return observeResize(el, ([entry]) => {
+			setWidth(entry.contentRect.width);
+		});
+	}, []);
+	const positionStyle = getSliderPreviewStyle(width, overflow);
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: context.stateAttrMap,
+		ref: [forwardedRef, measureRef],
+		props: [{ style: positionStyle }, elementProps]
+	});
+});
+//#endregion
+export { SliderPreview };
+
+//# sourceMappingURL=preview.js.map

package/dist/default/ui/slider/preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preview.js","names":[],"sources":["../../../../src/ui/slider/preview.tsx"],"sourcesContent":["import type { SliderPreviewProps as CoreSliderPreviewProps, SliderState } from '@videojs/core';\nimport { getSliderPreviewStyle } from '@videojs/core/dom';\nimport { observeResize } from '@videojs/utils/dom';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef, useEffect, useRef, useState } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSliderContext } from './context';\n\nexport interface SliderPreviewProps extends CoreSliderPreviewProps, UIComponentProps<'div', SliderState> {}\n\n/** Positioning container for preview content that tracks the pointer along the slider. */\nexport const SliderPreview = forwardRef(function SliderPreview(\n  componentProps: SliderPreviewProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const { render, className, style, overflow = 'clamp', ...elementProps } = componentProps;\n\n  const context = useSliderContext();\n  const { state } = context;\n\n  const measureRef = useRef<HTMLDivElement>(null);\n  const [width, setWidth] = useState(0);\n\n  useEffect(() => {\n    const el = measureRef.current;\n    if (!el) return;\n\n    return observeResize(el, ([entry]) => {\n      setWidth(entry!.contentRect.width);\n    });\n  }, []);\n\n  const positionStyle = getSliderPreviewStyle(width, overflow);\n\n  return renderElement(\n    'div',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: context.stateAttrMap,\n      ref: [forwardedRef, measureRef],\n      props: [{ style: positionStyle }, elementProps],\n    }\n  );\n});\n\nexport namespace SliderPreview {\n  export type Props = SliderPreviewProps;\n}\n"],"mappings":";;;;;;;AAaA,MAAa,gBAAgB,WAAW,SAAS,cAC/C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,WAAW,SAAS,GAAG,iBAAiB;CAE1E,MAAM,UAAU,iBAAiB;CACjC,MAAM,EAAE,UAAU;CAElB,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,CAAC,OAAO,YAAY,SAAS,CAAC;CAEpC,gBAAgB;EACd,MAAM,KAAK,WAAW;EACtB,IAAI,CAAC,IAAI;EAET,OAAO,cAAc,KAAK,CAAC,WAAW;GACpC,SAAS,MAAO,YAAY,KAAK;EACnC,CAAC;CACH,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAgB,sBAAsB,OAAO,QAAQ;CAE3D,OAAO,cACL,OACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc,QAAQ;EACtB,KAAK,CAAC,cAAc,UAAU;EAC9B,OAAO,CAAC,EAAE,OAAO,cAAc,GAAG,YAAY;CAChD,CACF;AACF,CAAC"}

package/dist/default/ui/slider/root.js

@@ -0,0 +1,82 @@
+import { useTranslator } from "../../i18n/context.js";
+import { renderElement } from "../../utils/use-render.js";
+import { useSlider } from "../hooks/use-slider.js";
+import { SliderProvider } from "./context.js";
+import { SliderCore, SliderDataAttrs } from "@videojs/core";
+import { getSliderCSSVars } from "@videojs/core/dom";
+import { translateText } from "@videojs/core/i18n";
+import { forwardRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/slider/root.tsx
+const SliderRoot = forwardRef(function SliderRoot(componentProps, forwardedRef) {
+	const { render, className, style, label, min, max, step, largeStep, orientation, disabled, thumbAlignment, value = 0, onValueChange, onValueCommit, onDragStart, onDragEnd, ...elementProps } = componentProps;
+	const [core] = useState(() => new SliderCore());
+	const translator = useTranslator();
+	core.setProps({
+		label,
+		min,
+		max,
+		step,
+		largeStep,
+		orientation,
+		disabled,
+		thumbAlignment
+	});
+	const { state, input, cssVars, rootRef, thumbRef: sliderThumbRef, rootProps, rootStyle, thumbProps } = useSlider({
+		computeState: (input) => {
+			core.setInput(input);
+			return core.getSliderState(value);
+		},
+		getPercent: () => core.percentFromValue(value),
+		getStepPercent: () => core.getStepPercent(),
+		getLargeStepPercent: () => core.getLargeStepPercent(),
+		orientation,
+		disabled,
+		adjustPercent: (rawPercent, thumbSize, trackSize) => core.adjustPercentForAlignment(rawPercent, thumbSize, trackSize),
+		getCSSVars: getSliderCSSVars,
+		onValueChange: (percent) => onValueChange?.(core.valueFromPercent(percent)),
+		onValueCommit: (percent) => onValueCommit?.(core.valueFromPercent(percent)),
+		onDragStart,
+		onDragEnd
+	});
+	return /* @__PURE__ */ jsx(SliderProvider, {
+		value: {
+			state,
+			pointerValue: core.valueFromPercent(state.pointerPercent),
+			input,
+			getPointerValue: (percent) => core.valueFromPercent(percent),
+			thumbRef: sliderThumbRef,
+			thumbProps,
+			stateAttrMap: SliderDataAttrs,
+			getAttrs: (sliderState) => {
+				const attrs = core.getAttrs(sliderState);
+				return {
+					...attrs,
+					"aria-label": translateText(attrs["aria-label"], translator)
+				};
+			},
+			formatValue: void 0
+		},
+		children: renderElement("div", {
+			render,
+			className,
+			style
+		}, {
+			state,
+			stateAttrMap: SliderDataAttrs,
+			ref: [forwardedRef, rootRef],
+			props: [
+				{ style: {
+					...cssVars,
+					...rootStyle
+				} },
+				rootProps,
+				elementProps
+			]
+		})
+	});
+});
+//#endregion
+export { SliderRoot };
+
+//# sourceMappingURL=root.js.map

package/dist/default/ui/slider/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":[],"sources":["../../../../src/ui/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/default/ui/slider/thumb.js

@@ -0,0 +1,29 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useSliderContext } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/slider/thumb.tsx
+/** Draggable handle for setting the slider value. Receives focus and handles keyboard interaction. */
+const SliderThumb = forwardRef(function SliderThumb(componentProps, forwardedRef) {
+	const { render, className, style, ...elementProps } = componentProps;
+	const context = useSliderContext();
+	const { state, thumbRef, thumbProps, getAttrs } = context;
+	const attrs = getAttrs(state);
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: context.stateAttrMap,
+		ref: [forwardedRef, thumbRef],
+		props: [
+			attrs,
+			thumbProps,
+			elementProps
+		]
+	});
+});
+//#endregion
+export { SliderThumb };
+
+//# sourceMappingURL=thumb.js.map

package/dist/default/ui/slider/thumb.js.map

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

package/dist/default/ui/slider/thumbnail/index.parts.js

@@ -0,0 +1,12 @@
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { ThumbnailImage } from "../../thumbnail/image.js";
+import { SliderThumbnailRoot } from "./root.js";
+//#region src/ui/slider/thumbnail/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Image: () => ThumbnailImage,
+	Root: () => SliderThumbnailRoot
+});
+//#endregion
+export { ThumbnailImage as Image, SliderThumbnailRoot as Root, index_parts_exports };
+
+//# sourceMappingURL=index.parts.js.map

package/dist/default/ui/slider/thumbnail/index.parts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.parts.js","names":[],"sources":["../../../../../src/ui/slider/thumbnail/index.parts.ts"],"sourcesContent":["export { ThumbnailImage as Image, type ThumbnailImageProps as ImageProps } from '../../thumbnail/image';\nexport { SliderThumbnailRoot as Root, type SliderThumbnailRootProps as RootProps } from './root';\n"],"mappings":""}

package/dist/default/ui/slider/thumbnail/root.js

@@ -0,0 +1,23 @@
+import { useSliderPointerValue } from "../context.js";
+import { ThumbnailRoot } from "../../thumbnail/root.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/slider/thumbnail/root.tsx
+/**
+* Resolves, sizes, and clips the thumbnail at the slider pointer.
+*
+* Render `Slider.Thumbnail.Image` inside it for the controlled image. Other children can provide loading indicators,
+* overlays, or temporary presentation layers.
+*/
+const SliderThumbnailRoot = forwardRef(function SliderThumbnailRoot(componentProps, forwardedRef) {
+	const pointerValue = useSliderPointerValue();
+	return /* @__PURE__ */ jsx(ThumbnailRoot, {
+		ref: forwardedRef,
+		...componentProps,
+		time: pointerValue
+	});
+});
+//#endregion
+export { SliderThumbnailRoot };
+
+//# sourceMappingURL=root.js.map

package/dist/default/ui/slider/thumbnail/root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"root.js","names":["Thumbnail.Root"],"sources":["../../../../../src/ui/slider/thumbnail/root.tsx"],"sourcesContent":["import type { ThumbnailCore } from '@videojs/core';\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport { Thumbnail } from '../../thumbnail';\nimport type { ThumbnailRootProps } from '../../thumbnail/root';\nimport { useSliderPointerValue } from '../context';\n\nexport interface SliderThumbnailRootProps extends Omit<ThumbnailRootProps, 'time'> {}\n\n/**\n * Resolves, sizes, and clips the thumbnail at the slider pointer.\n *\n * Render `Slider.Thumbnail.Image` inside it for the controlled image. Other children can provide loading indicators,\n * overlays, or temporary presentation layers.\n */\nexport const SliderThumbnailRoot = forwardRef(function SliderThumbnailRoot(\n  componentProps: SliderThumbnailRootProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>\n) {\n  const pointerValue = useSliderPointerValue();\n\n  return <Thumbnail.Root ref={forwardedRef} {...componentProps} time={pointerValue} />;\n});\n\nexport namespace SliderThumbnailRoot {\n  export type Props = SliderThumbnailRootProps;\n  export type State = ThumbnailCore.State;\n}\n"],"mappings":";;;;;;;;;;;AAeA,MAAa,sBAAsB,WAAW,SAAS,oBACrD,gBACA,cACA;CACA,MAAM,eAAe,sBAAsB;CAE3C,OAAO,oBAACA,eAAD;EAAgB,KAAK;EAAc,GAAI;EAAgB,MAAM;CAAe,CAAA;AACrF,CAAC"}

package/dist/default/ui/slider/track.js

@@ -0,0 +1,13 @@
+import { createContextPart } from "../create-context-part.js";
+import { useSliderContext } from "./context.js";
+//#region src/ui/slider/track.tsx
+/** Contains the slider's visual track and interactive hit zone. */
+const SliderTrack = createContextPart({
+	displayName: "SliderTrack",
+	tag: "div",
+	useContext: useSliderContext
+});
+//#endregion
+export { SliderTrack };
+
+//# sourceMappingURL=track.js.map

package/dist/default/ui/slider/track.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"track.js","names":[],"sources":["../../../../src/ui/slider/track.tsx"],"sourcesContent":["import type { SliderState } from '@videojs/core';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { createContextPart } from '../create-context-part';\nimport { useSliderContext } from './context';\n\nexport interface SliderTrackProps extends UIComponentProps<'div', SliderState> {}\n\n/** Contains the slider's visual track and interactive hit zone. */\nexport const SliderTrack = createContextPart<SliderTrackProps, SliderState>({\n  displayName: 'SliderTrack',\n  tag: 'div',\n  useContext: useSliderContext,\n});\n\nexport namespace SliderTrack {\n  export type Props = SliderTrackProps;\n}\n"],"mappings":";;;;AASA,MAAa,cAAc,kBAAiD;CAC1E,aAAa;CACb,KAAK;CACL,YAAY;AACd,CAAC"}

package/dist/default/ui/slider/value.js

@@ -0,0 +1,30 @@
+import { renderElement } from "../../utils/use-render.js";
+import { useSliderContext, useSliderPointerValue } from "./context.js";
+import { forwardRef } from "react";
+//#region src/ui/slider/value.tsx
+/** Displays a formatted text representation of the slider value. Renders an `<output>` element. */
+const SliderValue = forwardRef(function SliderValue(componentProps, forwardedRef) {
+	const { render, className, style, type = "current", format, ...elementProps } = componentProps;
+	const context = useSliderContext();
+	const { state, formatValue } = context;
+	const pointerValue = useSliderPointerValue(type === "pointer");
+	const rawValue = type === "pointer" ? pointerValue : state.value;
+	const text = format ? format(rawValue) : formatValue ? formatValue(rawValue, type) : String(Math.round(rawValue));
+	return renderElement("output", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		stateAttrMap: context.stateAttrMap,
+		ref: forwardedRef,
+		props: [{
+			"aria-live": "off",
+			children: text
+		}, elementProps]
+	});
+});
+//#endregion
+export { SliderValue };
+
+//# sourceMappingURL=value.js.map

package/dist/default/ui/slider/value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"value.js","names":[],"sources":["../../../../src/ui/slider/value.tsx"],"sourcesContent":["import type { SliderState } from '@videojs/core';\nimport type { ForwardedRef } from 'react';\nimport { forwardRef } from 'react';\n\nimport type { UIComponentProps } from '../../utils/types';\nimport { renderElement } from '../../utils/use-render';\nimport { useSliderContext, useSliderPointerValue } from './context';\n\nexport interface SliderValueProps extends UIComponentProps<'output', SliderState> {\n  /** Which slider value to display: the current position or the pointer position. */\n  type?: 'current' | 'pointer' | undefined;\n  /** Custom formatter for the displayed value. Overrides the root's `formatValue`. */\n  format?: ((value: number) => string) | undefined;\n}\n\n/** Displays a formatted text representation of the slider value. Renders an `<output>` element. */\nexport const SliderValue = forwardRef(function SliderValue(\n  componentProps: SliderValueProps,\n  forwardedRef: ForwardedRef<HTMLOutputElement>\n) {\n  const { render, className, style, type = 'current', format, ...elementProps } = componentProps;\n\n  const context = useSliderContext();\n  const { state, formatValue } = context;\n  const pointerValue = useSliderPointerValue(type === 'pointer');\n\n  const rawValue = type === 'pointer' ? pointerValue : state.value;\n\n  const text = format ? format(rawValue) : formatValue ? formatValue(rawValue, type) : String(Math.round(rawValue));\n\n  return renderElement(\n    'output',\n    { render, className, style },\n    {\n      state,\n      stateAttrMap: context.stateAttrMap,\n      ref: forwardedRef,\n      props: [{ 'aria-live': 'off', children: text }, elementProps],\n    }\n  );\n});\n\nexport namespace SliderValue {\n  export type Props = SliderValueProps;\n}\n"],"mappings":";;;;;AAgBA,MAAa,cAAc,WAAW,SAAS,YAC7C,gBACA,cACA;CACA,MAAM,EAAE,QAAQ,WAAW,OAAO,OAAO,WAAW,QAAQ,GAAG,iBAAiB;CAEhF,MAAM,UAAU,iBAAiB;CACjC,MAAM,EAAE,OAAO,gBAAgB;CAC/B,MAAM,eAAe,sBAAsB,SAAS,SAAS;CAE7D,MAAM,WAAW,SAAS,YAAY,eAAe,MAAM;CAE3D,MAAM,OAAO,SAAS,OAAO,QAAQ,IAAI,cAAc,YAAY,UAAU,IAAI,IAAI,OAAO,KAAK,MAAM,QAAQ,CAAC;CAEhH,OAAO,cACL,UACA;EAAE;EAAQ;EAAW;CAAM,GAC3B;EACE;EACA,cAAc,QAAQ;EACtB,KAAK;EACL,OAAO,CAAC;GAAE,aAAa;GAAO,UAAU;EAAK,GAAG,YAAY;CAC9D,CACF;AACF,CAAC"}

package/dist/default/ui/status-announcer/component.js

@@ -0,0 +1,47 @@
+import { useLocale, useTranslator } from "../../i18n/context.js";
+import { useContainer, usePlayer } from "../../player/context.js";
+import { useDestroy } from "../../utils/use-destroy.js";
+import { renderElement } from "../../utils/use-render.js";
+import { StatusAnnouncerCore, createStatusAnnouncerLabels } from "@videojs/core";
+import { shouldAnnounceStatusChange, subscribeToStatusAnnouncer } from "@videojs/core/dom";
+import { forwardRef, useEffect, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/ui/status-announcer/component.tsx
+const StatusAnnouncer = forwardRef(function StatusAnnouncer(componentProps, forwardedRef) {
+	const { render, className, style, closeDelay, labels, ...elementProps } = componentProps;
+	const translator = useTranslator();
+	const locale = useLocale();
+	const [core] = useState(() => new StatusAnnouncerCore());
+	const store = usePlayer();
+	const container = useContainer();
+	useDestroy(core);
+	core.setProps({
+		closeDelay,
+		labels: {
+			...createStatusAnnouncerLabels(translator, locale),
+			...labels
+		},
+		shouldAnnounce: () => shouldAnnounceStatusChange(container)
+	});
+	useEffect(() => subscribeToStatusAnnouncer(store, core), [core, store]);
+	const state = useSyncExternalStore((callback) => core.state.subscribe(callback), () => core.state.current, () => core.state.current);
+	return renderElement("div", {
+		render,
+		className,
+		style
+	}, {
+		state,
+		ref: forwardedRef,
+		props: [elementProps, {
+			role: "status",
+			children: /* @__PURE__ */ jsx("span", {
+				"data-status-announcer-content": "",
+				children: state.label ?? ""
+			}, state.generation)
+		}]
+	});
+});
+//#endregion
+export { StatusAnnouncer };
+
+//# sourceMappingURL=component.js.map

package/dist/default/ui/status-announcer/component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","names":[],"sources":["../../../../src/ui/status-announcer/component.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/default/ui/status-announcer/index.js

@@ -1,2 +1,2 @@
-import { StatusAnnouncer } from "./status-announcer.js";
+import { StatusAnnouncer } from "./component.js";
 export { StatusAnnouncer };

package/dist/default/ui/status-indicator/index.parts.js

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

package/dist/default/ui/status-indicator/index.parts.js.map

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