@hanifhan1f/vidstack-react 1.12.13

package/types/react/src/components/ui/sliders/slider.d.ts

@@ -0,0 +1,134 @@
+import * as React from 'react';
+import { type ReactElementProps } from 'maverick.js/react';
+import { SliderInstance, SliderPreviewInstance } from '../../primitives/instances';
+import { type PrimitivePropsWithRef } from '../../primitives/nodes';
+import { type SliderValueProps } from './slider-value';
+export interface RootProps extends ReactElementProps<SliderInstance> {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<SliderInstance>;
+}
+/**
+ * Versatile and user-friendly input control designed for seamless cross-browser compatibility and
+ * accessibility with ARIA support. It offers a smooth user experience for both mouse and touch
+ * interactions and is highly customizable in terms of styling. Users can effortlessly input numeric
+ * values within a specified range, defined by a minimum and maximum value.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/slider}
+ * @example
+ * ```tsx
+ * <Slider.Root>
+ *   <Slider.Track>
+ *     <Slider.TrackFill />
+ *   </Slider.Track>
+ *   <Slider.Thumb />
+ * </Slider.Root>
+ * ```
+ */
+declare const Root: React.ForwardRefExoticComponent<Omit<RootProps, "ref"> & React.RefAttributes<SliderInstance>>;
+export interface ThumbProps extends PrimitivePropsWithRef<'div'> {
+}
+/**
+ * Purely visual element used to display a draggable handle to the user for adjusting the value
+ * on the slider component.
+ *
+ * @example
+ * ```tsx
+ * <Slider.Root>
+ *   <Slider.Thumb />
+ * </Slider.Root>
+ * ```
+ */
+declare const Thumb: React.ForwardRefExoticComponent<Omit<ThumbProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export interface TrackProps extends PrimitivePropsWithRef<'div'> {
+}
+/**
+ * Visual element inside the slider that serves as a horizontal or vertical bar, providing a
+ * visual reference for the range or values that can be selected by moving the slider thumb along
+ * it. Users can interact with the slider by dragging the thumb along the track to set a specific
+ * value.
+ *
+ * @example
+ * ```tsx
+ * <Slider.Root>
+ *   <Slider.Track>
+ *     <Slider.TrackFill />
+ *   </Slider.Track>
+ * </Slider.Root>
+ * ```
+ */
+declare const Track: React.ForwardRefExoticComponent<Omit<TrackProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export interface TrackFillProps extends PrimitivePropsWithRef<'div'> {
+}
+/**
+ * Portion of the slider track that is visually filled or highlighted to indicate the selected or
+ * currently chosen range or value. As the slider thumb is moved along the track, the track
+ * fill dynamically adjusts to visually represent the portion of the track that corresponds to the
+ * selected value or range, providing users with a clear visual indication of their selection.
+ *
+ * @example
+ * ```tsx
+ * <Slider.Root>
+ *   <Slider.Track>
+ *     <Slider.TrackFill />
+ *   </Slider.Track>
+ * </Slider.Root>
+ * ```
+ */
+declare const TrackFill: React.ForwardRefExoticComponent<Omit<TrackFillProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export interface PreviewProps extends ReactElementProps<SliderPreviewInstance> {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLElement>;
+}
+/**
+ * Used to provide users with a real-time or interactive preview of the value or selection they
+ * are making as they move the slider thumb. This can include displaying the current pointer
+ * value numerically, or displaying a thumbnail over the time slider.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/slider#preview}
+ * @example
+ * ```tsx
+ * <Slider.Root>
+ *   <Slider.Preview>
+ *     <Slider.Value />
+ *   </Slider.Preview>
+ * </Slider.Root>
+ * ```
+ */
+declare const Preview: React.ForwardRefExoticComponent<Omit<PreviewProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export interface ValueProps extends SliderValueProps {
+}
+/**
+ * Displays the specific numeric representation of the current or pointer value of the slider.
+ * When a user interacts with a slider by moving its thumb along the track, the slider value
+ * changes accordingly.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/slider#preview}
+ * @example
+ * ```tsx
+ * <Slider.Root>
+ *   <Slider.Preview>
+ *     <Slider.Value />
+ *   </Slider.Preview>
+ * </Slider.Root>
+ * ```
+ */
+declare const Value: React.ForwardRefExoticComponent<Omit<ValueProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export interface StepsProps extends Omit<PrimitivePropsWithRef<'div'>, 'children'> {
+    children: (step: number) => React.ReactNode;
+}
+/**
+ * Visual markers that can be used to indicate value steps on the slider track.
+ *
+ * @example
+ * ```tsx
+ * <Slider.Root>
+ *   <Slider.Steps className="steps">
+ *     {(step) => <div className="step" key={String(step)}></div>}
+ *   </Slider.Steps>
+ * </Slider.Root>
+ * ```
+ */
+declare const Steps: React.ForwardRefExoticComponent<Omit<StepsProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export { Root, Thumb, Track, TrackFill, Preview, Value, Steps };

package/types/react/src/components/ui/sliders/speed-slider.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { type ReactElementProps } from 'maverick.js/react';
+import { SpeedSliderInstance } from '../../primitives/instances';
+import { Value } from './slider';
+export interface RootProps extends ReactElementProps<SpeedSliderInstance> {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<SpeedSliderInstance>;
+}
+/**
+ * Versatile and user-friendly input playback rate control designed for seamless cross-browser and
+ * provider compatibility and accessibility with ARIA support. It offers a smooth user experience
+ * for both mouse and touch interactions and is highly customizable in terms of styling.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/speed-slider}
+ * @example
+ * ```tsx
+ * <SpeedSlider.Root>
+ *   <SpeedSlider.Track>
+ *     <SpeedSlider.TrackFill />
+ *   </SpeedSlider.Track>
+ *   <SpeedSlider.Thumb />
+ * </SpeedSlider.Root>
+ * ```
+ */
+declare const Root: React.ForwardRefExoticComponent<Omit<RootProps, "ref"> & React.RefAttributes<SpeedSliderInstance>>;
+export * from './slider';
+export { Root, Value };

package/types/react/src/components/ui/sliders/time-slider.d.ts

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { type ReactElementProps } from 'maverick.js/react';
+import type { VTTCue } from 'media-captions';
+import { SliderChaptersInstance, SliderThumbnailInstance, SliderVideoInstance, TimeSliderInstance } from '../../primitives/instances';
+import { type PrimitivePropsWithRef } from '../../primitives/nodes';
+import * as ThumbnailBase from '../thumbnail';
+export interface RootProps extends ReactElementProps<TimeSliderInstance> {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<TimeSliderInstance>;
+}
+/**
+ * Versatile and user-friendly input time control designed for seamless cross-browser and provider
+ * compatibility and accessibility with ARIA support. It offers a smooth user experience for both
+ * mouse and touch interactions and is highly customizable in terms of styling. Users can
+ * effortlessly change the current playback time within the range 0 to seekable end.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/time-slider}
+ * @example
+ * ```tsx
+ * <TimeSlider.Root>
+ *   <TimeSlider.Track>
+ *     <TimeSlider.TrackFill />
+ *     <TimeSlider.Progress />
+ *   </TimeSlider.Track>
+ *   <TimeSlider.Thumb />
+ * </TimeSlider.Root>
+ * ```
+ */
+declare const Root: React.ForwardRefExoticComponent<Omit<RootProps, "ref"> & React.RefAttributes<TimeSliderInstance>>;
+export interface ChaptersProps extends Omit<ReactElementProps<SliderChaptersInstance>, 'children'> {
+    children: (cues: VTTCue[], forwardRef: React.RefCallback<HTMLElement>) => React.ReactNode;
+}
+/**
+ * Used to create predefined sections within a time slider interface based on the currently
+ * active chapters text track.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/slider-chapters}
+ * @example
+ * ```tsx
+ * <TimeSlider.Root>
+ *   <TimeSlider.Chapters>
+ *     {(cues, forwardRef) =>
+ *       cues.map((cue) => (
+ *         <div key={cue.startTime} ref={forwardRef}>
+ *           <TimeSlider.Track>
+ *             <TimeSlider.TrackFill />
+ *             <TimeSlider.Progress />
+ *           </TimeSlider.Track>
+ *        </div>
+ *     ))}
+ *   </TimeSlider.Chapters>
+ * </TimeSlider.Root>
+ * ```
+ */
+declare const Chapters: React.ForwardRefExoticComponent<ChaptersProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChapterTitleProps extends PrimitivePropsWithRef<'div'> {
+}
+/**
+ * Used to display the active cue text based on the slider value and preview value.
+ *
+ * @example
+ * ```tsx
+ * <TimeSlider.Root>
+ *   <TimeSlider.Preview>
+ *     <TimeSlider.Chapter />
+ *   </TimeSlider.Preview>
+ * </TimeSlider.Root>
+ * ```
+ */
+declare const ChapterTitle: React.ForwardRefExoticComponent<Omit<ChapterTitleProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export interface ProgressProps extends PrimitivePropsWithRef<'div'> {
+}
+/**
+ * Visual element inside the slider that serves as a horizontal or vertical bar, providing a
+ * visual reference for the range of playback that has buffered/loaded.
+ *
+ * @example
+ * ```tsx
+ * <TimeSlider.Root>
+ *   <TimeSlider.Track>
+ *     <TimeSlider.Progress />
+ *   </TimeSlider.Track>
+ * </TimeSlider.Root>
+ * ```
+ */
+declare const Progress: React.ForwardRefExoticComponent<Omit<ProgressProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export interface ThumbnailProps extends ReactElementProps<SliderThumbnailInstance, HTMLElement> {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLElement>;
+}
+export type ThumbnailImgProps = ThumbnailBase.ImgProps;
+declare const Thumbnail: {
+    readonly Root: React.ForwardRefExoticComponent<Omit<ThumbnailProps, "ref"> & React.RefAttributes<HTMLElement>>;
+    readonly Img: React.ForwardRefExoticComponent<Omit<ThumbnailBase.ImgProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+};
+export interface VideoProps extends ReactElementProps<SliderVideoInstance, HTMLVideoElement> {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLVideoElement>;
+}
+/**
+ * Used to load a low-resolution video to be displayed when the user is hovering over or dragging
+ * the time slider. The preview video will automatically be updated to be in-sync with the current
+ * preview position, so ensure it has the same length as the original media (i.e., same duration).
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/slider-video}
+ * @example
+ * ```tsx
+ * <TimeSlider.Root>
+ *   <TimeSlider.Preview>
+ *     <TimeSlider.Video src="preview.mp4" />
+ *   </TimeSlider.Preview>
+ * </TimeSlider.Root>
+ * ```
+ */
+declare const Video: React.ForwardRefExoticComponent<Omit<VideoProps, "ref"> & React.RefAttributes<HTMLVideoElement>>;
+export interface VideoProviderProps {
+    instance: SliderVideoInstance;
+    children?: React.ReactNode;
+}
+export * from './slider';
+export { Root, Progress, Thumbnail, Video, Chapters, ChapterTitle };

package/types/react/src/components/ui/sliders/volume-slider.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { type ReactElementProps } from 'maverick.js/react';
+import { VolumeSliderInstance } from '../../primitives/instances';
+import { Value } from './slider';
+export interface RootProps extends ReactElementProps<VolumeSliderInstance> {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<VolumeSliderInstance>;
+}
+/**
+ * Versatile and user-friendly input volume control designed for seamless cross-browser and provider
+ * compatibility and accessibility with ARIA support. It offers a smooth user experience for both
+ * mouse and touch interactions and is highly customizable in terms of styling. Users can
+ * effortlessly change the volume level within the range 0 (muted) to 100.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/volume-slider}
+ * @example
+ * ```tsx
+ * <VolumeSlider.Root>
+ *   <VolumeSlider.Track>
+ *     <VolumeSlider.TrackFill />
+ *   </VolumeSlider.Track>
+ *   <VolumeSlider.Thumb />
+ * </VolumeSlider.Root>
+ * ```
+ */
+declare const Root: React.ForwardRefExoticComponent<Omit<RootProps, "ref"> & React.RefAttributes<VolumeSliderInstance>>;
+export * from './slider';
+export { Root, Value };

package/types/react/src/components/ui/spinner.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+export interface RootProps extends React.PropsWithoutRef<React.SVGProps<SVGSVGElement>>, React.RefAttributes<SVGElement | SVGSVGElement> {
+    /**
+     * The horizontal (width) and vertical (height) length of the spinner.
+     *
+     * @defaultValue 96
+     */
+    size?: number;
+}
+/**
+ * @docs {@link https://www.vidstack.io/docs/player/components/display/buffering-indicator}
+ * @example
+ * ```html
+ * <Spinner.Root>
+ *   <Spinner.Track />
+ *   <Spinner.TrackFill />
+ * </Spinner>
+ * ```
+ */
+declare const Root: React.ForwardRefExoticComponent<Omit<RootProps, "ref"> & React.RefAttributes<SVGSVGElement | SVGElement>>;
+export interface TrackProps extends React.PropsWithoutRef<React.SVGProps<SVGCircleElement>>, React.RefAttributes<SVGCircleElement> {
+}
+declare const Track: React.ForwardRefExoticComponent<Omit<TrackProps, "ref"> & React.RefAttributes<SVGCircleElement>>;
+export interface TrackFillProps extends React.PropsWithoutRef<React.SVGProps<SVGCircleElement>>, React.RefAttributes<SVGCircleElement> {
+    /**
+     * The percentage of the track that should be filled.
+     */
+    fillPercent?: number;
+}
+declare const TrackFill: React.ForwardRefExoticComponent<Omit<TrackFillProps, "ref"> & React.RefAttributes<SVGCircleElement>>;
+export { Root, Track, TrackFill };

package/types/react/src/components/ui/thumbnail.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { type ReactElementProps } from 'maverick.js/react';
+import { ThumbnailInstance } from '../primitives/instances';
+import { type PrimitivePropsWithRef } from '../primitives/nodes';
+export interface RootProps extends ReactElementProps<ThumbnailInstance, HTMLElement> {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLElement>;
+}
+/**
+ * Used to load and display a preview thumbnail at the given `time`.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/display/thumbnail}
+ * @example
+ * ```tsx
+ * <Thumbnail.Root src="thumbnails.vtt" time={10} >
+ *   <Thumbnail.Img />
+ * </Thumbnail.Root>
+ * ```
+ */
+declare const Root: React.ForwardRefExoticComponent<Omit<RootProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export interface ImgProps extends PrimitivePropsWithRef<'img'> {
+    children?: React.ReactNode;
+}
+declare const Img: React.ForwardRefExoticComponent<Omit<ImgProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
+export { Root, Img };

package/types/react/src/components/ui/time.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type ReactElementProps } from 'maverick.js/react';
+import { TimeInstance } from '../primitives/instances';
+export interface TimeProps extends ReactElementProps<TimeInstance> {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLElement>;
+}
+/**
+ * Outputs a media duration (eg: `currentTime`, `duration`, `bufferedAmount`, etc.) value as time
+ * formatted text.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/display/time}
+ * @example
+ * ```tsx
+ * <Time type="current" />
+ * ```
+ */
+declare const Time: React.ForwardRefExoticComponent<Omit<TimeProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export { Time };

package/types/react/src/components/ui/title.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { type PrimitivePropsWithRef } from '../primitives/nodes';
+export interface TitleProps extends PrimitivePropsWithRef<'span'> {
+}
+/**
+ * This component is used to load and display the current media title.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/display/title}
+ * @example
+ * ```tsx
+ * <Title />
+ * ```
+ */
+declare const Title: React.ForwardRefExoticComponent<Omit<TitleProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export { Title };

package/types/react/src/components/ui/tooltip.d.ts

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { type ReactElementProps, type ReactProps } from 'maverick.js/react';
+import { TooltipContentInstance, TooltipInstance, TooltipTriggerInstance } from '../primitives/instances';
+export interface RootProps extends ReactProps<TooltipInstance> {
+    asChild?: boolean;
+    children: React.ReactNode;
+}
+/**
+ * A contextual text bubble that displays a description for an element that appears on pointer
+ * hover or keyboard focus.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/tooltip}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/tooltip_role}
+ * @example
+ * ```tsx
+ * <Tooltip.Root>
+ *   <Tooltip.Trigger></Tooltip.Trigger>
+ *   <Tooltip.Content></Tooltip.Content>
+ * </Tooltip.Root>
+ * ```
+ */
+declare function Root({ children, ...props }: RootProps): React.JSX.Element;
+declare namespace Root {
+    var displayName: string;
+}
+export interface TriggerProps extends ReactElementProps<TooltipTriggerInstance> {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLButtonElement>;
+}
+/**
+ * Wraps the element that will trigger showing/hiding the tooltip on hover or keyboard focus. The
+ * tooltip content is positioned relative to this element.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/tooltip}
+ * @example
+ * ```tsx
+ * <Tooltip.Root>
+ *   <Tooltip.Trigger></Tooltip.Trigger>
+ *   <Tooltip.Content></Tooltip.Content>
+ * </Tooltip.Root>
+ * ```
+ */
+declare const Trigger: React.ForwardRefExoticComponent<Omit<TriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface ContentProps extends ReactElementProps<TooltipContentInstance> {
+    asChild?: boolean;
+    children?: React.ReactNode;
+    ref?: React.Ref<HTMLElement>;
+}
+/**
+ * This component contains the content that is visible when the tooltip trigger is interacted with.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/components/tooltip}
+ * @example
+ * ```tsx
+ * <Tooltip.Root>
+ *   <Tooltip.Trigger></Tooltip.Trigger>
+ *   <Tooltip.Content></Tooltip.Content>
+ * </Tooltip.Root>
+ * ```
+ */
+declare const Content: React.ForwardRefExoticComponent<Omit<ContentProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export { Root, Trigger, Content };

package/types/react/src/hooks/create-text-track.d.ts

@@ -0,0 +1,7 @@
+import { TextTrack, type TextTrackInit } from 'vidstack';
+/**
+ * Creates a new `TextTrack` object and adds it to the player.
+ *
+ * @docs {@link https://www.vidstack.io/docs/player/api/hooks/create-text-track}
+ */
+export declare function createTextTrack(init: TextTrackInit): TextTrack;

package/types/react/src/hooks/options/use-audio-gain-options.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-audio-gain-options}
+ */
+export declare function useAudioGainOptions({ gains, disabledLabel, }?: UseAudioGainOptions): AudioGainOptions;
+export interface UseAudioGainOptions {
+    gains?: (number | {
+        label: string;
+        gain: number;
+    })[];
+    disabledLabel?: string | null;
+}
+export type AudioGainOptions = AudioGainOption[] & {
+    readonly disabled: boolean;
+    readonly selectedValue: string | undefined;
+};
+export interface AudioGainOption {
+    readonly label: string;
+    readonly value: string;
+    readonly gain: number;
+    readonly selected: boolean;
+    select(trigger?: Event): void;
+}

package/types/react/src/hooks/options/use-audio-options.d.ts

@@ -0,0 +1,17 @@
+import { type AudioTrack } from 'vidstack';
+/**
+ * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-audio-options}
+ */
+export declare function useAudioOptions(): AudioOptions;
+export type AudioOptions = AudioOption[] & {
+    readonly disabled: boolean;
+    readonly selectedTrack: AudioTrack | null;
+    readonly selectedValue: string | undefined;
+};
+export interface AudioOption {
+    readonly track: AudioTrack;
+    readonly label: string;
+    readonly value: string;
+    readonly selected: boolean;
+    select(trigger?: Event): void;
+}

package/types/react/src/hooks/options/use-caption-options.d.ts

@@ -0,0 +1,24 @@
+import { type TextTrack } from 'vidstack';
+/**
+ * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-caption-options}
+ */
+export declare function useCaptionOptions({ off }?: UseCaptionOptions): CaptionOptions;
+export interface UseCaptionOptions {
+    /**
+     * Whether an option should be included for turning off all captions. A string can be provided
+     * to specify the label.
+     */
+    off?: boolean | string;
+}
+export type CaptionOptions = CaptionOption[] & {
+    readonly disabled: boolean;
+    readonly selectedTrack: TextTrack | null;
+    readonly selectedValue: string;
+};
+export interface CaptionOption {
+    readonly track: TextTrack | null;
+    readonly label: string;
+    readonly value: string;
+    readonly selected: boolean;
+    select(trigger?: Event): void;
+}

package/types/react/src/hooks/options/use-chapter-options.d.ts

@@ -0,0 +1,18 @@
+import type { VTTCue } from 'media-captions';
+/**
+ * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-chapter-options}
+ */
+export declare function useChapterOptions(): ChapterOptions;
+export type ChapterOptions = ChapterOption[] & {
+    readonly selectedValue: string | undefined;
+};
+export interface ChapterOption {
+    readonly cue: VTTCue;
+    readonly label: string;
+    readonly value: string;
+    readonly selected: boolean;
+    readonly startTimeText: string;
+    readonly durationText: string;
+    select(trigger?: Event): void;
+    setProgressVar(ref: HTMLElement | null): void;
+}

package/types/react/src/hooks/options/use-playback-rate-options.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-playback-rate-options}
+ */
+export declare function usePlaybackRateOptions({ rates, normalLabel, }?: UsePlaybackRateOptions): PlaybackRateOptions;
+export interface UsePlaybackRateOptions {
+    rates?: (number | {
+        label: string;
+        rate: number;
+    })[];
+    normalLabel?: string | null;
+}
+export type PlaybackRateOptions = PlaybackRateOption[] & {
+    readonly disabled: boolean;
+    readonly selectedValue: string | undefined;
+};
+export interface PlaybackRateOption {
+    readonly label: string;
+    readonly value: string;
+    readonly rate: number;
+    readonly selected: boolean;
+    select(trigger?: Event): void;
+}

package/types/react/src/hooks/options/use-video-quality-options.d.ts

@@ -0,0 +1,35 @@
+import { type VideoQuality } from 'vidstack';
+/**
+ * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-video-quality-options}
+ */
+export declare function useVideoQualityOptions({ auto, sort, }?: UseVideoQualityOptions): VideoQualityOptions;
+export interface UseVideoQualityOptions {
+    /**
+     * Whether an auto option should be included. A string can be provided to specify the label.
+     */
+    auto?: boolean | string;
+    /**
+     * Specifies how the options should be sorted. The sorting algorithm looks at both the quality
+     * resolution and bitrate.
+     *
+     * - Ascending: 480p, 720p, 720p (higher bitrate), 1080p
+     * - Descending: 1080p, 720p (higher bitrate), 720p, 480p
+     *
+     * @default 'descending'
+     */
+    sort?: 'ascending' | 'descending';
+}
+export type VideoQualityOptions = VideoQualityOption[] & {
+    readonly disabled: boolean;
+    readonly selectedQuality: VideoQuality | null;
+    readonly selectedValue: string;
+};
+export interface VideoQualityOption {
+    readonly quality: VideoQuality | null;
+    readonly label: string;
+    readonly value: string;
+    readonly selected: boolean;
+    readonly autoSelected: boolean;
+    readonly bitrateText: string | null;
+    select(trigger?: Event): void;
+}

package/types/react/src/hooks/use-active-text-cues.d.ts

@@ -0,0 +1,6 @@
+import type { VTTCue } from 'media-captions';
+import type { TextTrack } from 'vidstack';
+/**
+ * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-active-text-cues}
+ */
+export declare function useActiveTextCues(track: TextTrack | null): VTTCue[];

package/types/react/src/hooks/use-active-text-track.d.ts

@@ -0,0 +1,5 @@
+import { type TextTrack } from 'vidstack';
+/**
+ * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-active-text-track}
+ */
+export declare function useActiveTextTrack(kind: TextTrackKind | TextTrackKind[]): TextTrack | null;

package/types/react/src/hooks/use-chapter-title.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @docs {@link https://www.vidstack.io/docs/player/api/hooks/use-chapter-title}
+ */
+export declare function useChapterTitle(): string;

package/types/react/src/hooks/use-dom.d.ts

@@ -0,0 +1,9 @@
+export declare function useClassName(el: HTMLElement | null, className?: string): void;
+export declare function useResizeObserver(el: Element | null | undefined, callback: () => void): void;
+export declare function useTransitionActive(el: Element | null): boolean;
+export declare function useMouseEnter(el: Element | null): boolean;
+export declare function useFocusIn(el: Element | null): boolean;
+export declare function useActive(el: Element | null): boolean;
+export declare function useRectCSSVars(root: Element | null, el: Element | null, prefix: string): void;
+export declare function setRectCSSVars(root: Element, el: Element, prefix: string): void;
+export declare function useColorSchemePreference(): "light" | "dark";

package/types/react/src/hooks/use-media-context.d.ts

@@ -0,0 +1 @@
+export declare function useMediaContext(): import("vidstack").MediaContext;