@aidenlx/vidstack-react/player/layouts/default.d.ts

UI component library for building high-quality, accessible video and audio experiences on the web.

import { PlayerSrc as PlayerSrc$1, MediaProviderLoader, VTTContent, MediaContext, MediaProviderAdapter, MediaRemoteControl, MediaState, ThumbnailSrc, MediaCrossOrigin, ThumbnailImage, SliderState, SliderOrientation, TextTrack, TextTrackInit, AudioTrack, VideoQuality, FileDownloadInfo, MediaPlayerQuery, DefaultLayoutTranslations, TooltipPlacement, PlyrControl, PlyrMarker, PlyrLayoutTranslations, PlyrLayoutWord, Src, MediaType } from '../../types/vidstack.js';
export { DefaultLayoutWord } from '../../types/vidstack.js';
import * as React from 'react';
import * as maverick_js from 'maverick.js';
import { AnyRecord, State, Component, ReadSignal, WriteSignal } from 'maverick.js';
import 'maverick.js/std';
import { MediaPlayerInstance, MediaAnnouncerInstance, MediaProviderInstance, ControlsInstance, ControlsGroupInstance, TooltipInstance, TooltipTriggerInstance, TooltipContentInstance, ToggleButtonInstance, AirPlayButtonInstance, GoogleCastButtonInstance, PlayButtonInstance, CaptionButtonInstance, FullscreenButtonInstance, MuteButtonInstance, PIPButtonInstance, SeekButtonInstance, LiveButtonInstance, SliderValueInstance, SliderInstance, SliderPreviewInstance, VolumeSliderInstance, QualitySliderInstance, AudioGainSliderInstance, SpeedSliderInstance, ThumbnailInstance, TimeSliderInstance, SliderThumbnailInstance, SliderVideoInstance, SliderChaptersInstance, RadioGroupInstance, RadioInstance, MenuInstance, MenuButtonInstance, MenuPortalInstance, MenuItemsInstance, MenuItemInstance, GestureInstance, CaptionsInstance, PosterInstance, TimeInstance } from '../../types/vidstack-instances.js';
import { ReactElementProps, ReactProps } from 'maverick.js/react';
import { CaptionsFileFormat, CaptionsParserFactory, VTTCue } from 'media-captions';
import 'dashjs';
import 'hls.js';

interface RemotionSrc<InputProps extends RemotionInputProps = RemotionInputProps> {
    /** React component which is generally a Remotion video. */
    src: React.ComponentType<unknown>;
    /** Remotion source type. */
    type: 'video/remotion';
    /**
     * Pass props to the component that you have specified using the component prop.
     */
    inputProps?: InputProps;
    /**
     * The width of the composition.
     *
     * @defaultValue 1920
     */
    compositionWidth?: number;
    /**
     * The height of the composition.
     *
     * @defaultValue 1080
     */
    compositionHeight?: number;
    /**
     * The frame rate of the video per second.
     *
     * @defaultValue 30
     */
    fps?: number;
    /**
     * The duration of the video in frames. Must be an integer and greater than 0.
     */
    durationInFrames: number;
    /**
     * Start the playback from a specific frame.
     *
     * @defaultValue 0
     */
    initialFrame?: number;
    /**
     * Limit playback to only play after a certain frame. The video will start from this frame and
     * move to this position once it has ended. Must be an integer, not smaller than 0, not bigger
     * than `outFrame` and not bigger than `durationInFrames - 1`.
     *
     * @defaultValue 0
     */
    inFrame?: number | null;
    /**
     * Limit playback to only play before a certain frame. The video will end at this frame
     * and move to the beginning once it has ended. Must be an integer, not smaller than 1, not
     * smaller than `inFrame` and not bigger than `durationInFrames`.
     *
     * @defaultValue `durationInFrames`
     */
    outFrame?: number;
    /**
     * If you use an `<Audio />` tag, it might not play in some browsers (specifically iOS Safari)
     * due to browser autoplay policies. This is why the player pre-mounts a set of audio tags with
     * silent audio that get played upon user interaction. These audio tags can then be used to play
     * real audio later and will not be subject to the autoplay policy of the browser.
     *
     * This option controls how many audio tags are being rendered, the default is 5. If you mount
     * more audio tags than shared audio tags are available, then an error will be thrown.
     *
     * If you'd like to opt out of this behavior, you can pass 0 to mount native audio tags
     * simultaneously as you mount Remotion's <Audio /> tags.
     *
     * @defaultValue 5
     */
    numberOfSharedAudioTags?: number;
    /**
     * A callback function that allows you to return a custom UI that gets displayed while the
     * provider is loading.
     */
    renderLoading?: RemotionLoadingRenderer;
    /**
     * A callback for rendering a custom error message.
     */
    errorFallback?: RemotionErrorRenderer;
    /**
     * Called when an error or uncaught exception has happened in the video.
     */
    onError?(error: Error): void;
}
interface RemotionInputProps extends Record<string, unknown> {
}
interface RemotionLoadingRenderer {
    (): React.ReactNode;
}
interface RemotionErrorRenderer {
    (error: Error): React.ReactNode;
}

type PlayerSrc = PlayerSrc$1 | RemotionSrc;

interface MediaPlayerProps extends Omit<ReactElementProps<MediaPlayerInstance>, 'src'> {
    /**
     * The URL or object of the current media resource/s to be considered for playback.
     *
     * @see {@link https://vidstack.io/docs/player/core-concepts/loading#sources}
     */
    src?: PlayerSrc;
    aspectRatio?: string;
    asChild?: boolean;
    children: React.ReactNode;
    ref?: React.Ref<MediaPlayerInstance>;
}
/**
 * All media components exist inside the `<MediaPlayer>` component. This component's main
 * responsibilities are to manage media state updates, dispatch media events, handle media
 * requests, and expose media state through HTML attributes and CSS properties for styling
 * purposes.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/media/player}
 * @example
 * ```tsx
 * <MediaPlayer src="...">
 *   <MediaProvider />
 * </MediaPlayer>
 * ```
 */
declare const MediaPlayer: React.ForwardRefExoticComponent<Omit<MediaPlayerProps, "ref"> & React.RefAttributes<MediaPlayerInstance>>;

interface MediaAnnouncerProps extends ReactElementProps<MediaAnnouncerInstance> {
    ref?: React.Ref<HTMLElement>;
}
/**
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/display/announcer}
 * @example
 * ```tsx
 * <MediaAnnouncer />
 * ```
 */
declare const MediaAnnouncer: React.ForwardRefExoticComponent<Omit<MediaAnnouncerProps, "ref"> & React.RefAttributes<HTMLElement>>;

interface MediaProviderProps extends Omit<ReactElementProps<MediaProviderInstance>, 'loaders'> {
    loaders?: Array<{
        new (): MediaProviderLoader;
    }>;
    iframeProps?: React.IframeHTMLAttributes<HTMLIFrameElement>;
    mediaProps?: React.HTMLAttributes<HTMLMediaElement>;
    children?: React.ReactNode;
    ref?: React.Ref<MediaProviderInstance>;
}
/**
 * Renders the current provider at this component location.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/media/provider}
 * @example
 * ```tsx
 * <MediaPlayer src="...">
 *   <MediaProvider />
 * </MediaPlayer>
 * ```
 */
declare const MediaProvider: React.ForwardRefExoticComponent<Omit<MediaProviderProps, "ref"> & React.RefAttributes<MediaProviderInstance>>;

interface IconProps extends React.PropsWithoutRef<React.SVGProps<SVGSVGElement>>, React.RefAttributes<SVGElement | SVGSVGElement> {
    /**
     * The horizontal (width) and vertical (height) length of the underlying `<svg>` element.
     *
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/width}
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/height}
     */
    size?: number;
    part?: string;
    /** @internal */
    paths?: string;
}
interface IconComponent extends React.ForwardRefExoticComponent<IconProps> {
}
declare const Icon: IconComponent;

/**
 * Creates a new `TextTrack` object and adds it to the player.
 *
 * @see {@link https://www.vidstack.io/docs/player/api/text-tracks}
 * @example
 * ```tsx
 * <MediaPlayer>
 *   <MediaProvider>
 *     <Track
 *       src="english.vtt"
 *       kind="subtitles"
 *       label="English"
 *       lang="en-US"
 *       default
 *     />
 *   </MediaProvider>
 * </MediaPlayer>
 * ```
 */
declare function Track$2({ lang, ...props }: TrackProps$2): null;
declare namespace Track$2 {
    var displayName: string;
}
interface TrackProps$2 {
    /**
     * A unique identifier.
     *
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/id}
     */
    readonly id?: string;
    /**
     * URL of the text track resource. This attribute must be specified and its URL value must have
     * the same origin as the document — unless the <audio> or <video> parent element of the track
     * element has a `crossorigin` attribute.
     */
    readonly src?: string;
    /**
     * Used to directly pass in text track file contents.
     */
    readonly content?: string | VTTContent;
    /**
     * The captions file format to be parsed or a custom parser factory (functions that returns a
     * captions parser). Supported types include: 'vtt', 'srt', 'ssa', 'ass', and 'json'.
     *
     * @defaultValue 'vtt'
     */
    readonly type?: 'json' | CaptionsFileFormat | CaptionsParserFactory;
    /**
     * The text encoding type to be used when decoding data bytes to text.
     *
     * @defaultValue 'utf-8'
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Encoding_API/Encodings}
     *
     */
    readonly encoding?: string;
    /**
     * Indicates that the track should be enabled unless the user's preferences indicate that
     * another track is more appropriate. This may only be used on one track element per media
     * element.
     *
     * @defaultValue false
     */
    readonly default?: boolean;
    /**
     * The kind of text track this object represents. This decides how the track will be handled
     * by the player.
     *
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/kind}
     */
    readonly kind: TextTrackKind;
    /**
     * A human-readable label for the text track. This will be displayed to the user.
     *
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/label}
     */
    readonly label?: string;
    /**
     * A string containing a language identifier. For example, `"en-US"` for United States English
     * or `"pt-BR"` for Brazilian Portuguese.
     *
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/language}
     * @see {@link https://datatracker.ietf.org/doc/html/rfc5646}
     */
    readonly language?: string;
    /**
     * A string containing a language identifier. For example, `"en-US"` for United States English
     * or `"pt-BR"` for Brazilian Portuguese. This is a short alias for `language`.
     *
     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/TextTrack/language}
     * @see {@link https://datatracker.ietf.org/doc/html/rfc5646}
     */
    readonly lang?: TrackProps$2['language'];
    /**
     * React list key.
     */
    readonly key?: string;
}

interface RootProps$c extends ReactElementProps<ControlsInstance> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
}
/**
 * This component creates a container for control groups.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/media/controls}
 * @example
 * ```tsx
 * <Controls.Root>
 *   <Controls.Group></Controls.Group>
 *   <Controls.Group></Controls.Group>
 * <Controls.Root>
 * ```
 */
declare const Root$c: React.ForwardRefExoticComponent<Omit<RootProps$c, "ref"> & React.RefAttributes<HTMLElement>>;
interface GroupProps extends ReactElementProps<ControlsGroupInstance> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
}
/**
 * This component creates a container for media controls.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/media/controls#group}
 * @example
 * ```tsx
 * <Controls.Root>
 *   <Controls.Group></Controls.Group>
 *   <Controls.Group></Controls.Group>
 * <Controls.Root>
 * ```
 */
declare const Group: React.ForwardRefExoticComponent<Omit<GroupProps, "ref"> & React.RefAttributes<HTMLElement>>;

declare const controls_d_Group: typeof Group;
type controls_d_GroupProps = GroupProps;
declare namespace controls_d {
  export { controls_d_Group as Group, Root$c as Root };
  export type { controls_d_GroupProps as GroupProps, RootProps$c as RootProps };
}

interface RootProps$b 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$b({ children, ...props }: RootProps$b): React.JSX.Element;
declare namespace Root$b {
    var displayName: string;
}
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>>;
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>>;

declare const tooltip_d_Content: typeof Content;
type tooltip_d_ContentProps = ContentProps;
declare const tooltip_d_Trigger: typeof Trigger;
type tooltip_d_TriggerProps = TriggerProps;
declare namespace tooltip_d {
  export { tooltip_d_Content as Content, Root$b as Root, tooltip_d_Trigger as Trigger };
  export type { tooltip_d_ContentProps as ContentProps, RootProps$b as RootProps, tooltip_d_TriggerProps as TriggerProps };
}

interface ToggleButtonProps extends ReactElementProps<ToggleButtonInstance, HTMLButtonElement> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLButtonElement>;
}
/**
 * A toggle button is a two-state button that can be either off (not pressed) or on (pressed).
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/buttons/toggle-button}
 * @example
 * ```tsx
 * <ToggleButton aria-label="...">
 *   <OnIcon />
 *   <OffIcon />
 * </ToggleButton>
 * ```
 */
declare const ToggleButton: React.ForwardRefExoticComponent<Omit<ToggleButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

interface AirPlayButtonProps extends ReactElementProps<AirPlayButtonInstance, HTMLButtonElement> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLButtonElement>;
}
/**
 * A button for requesting to connect to Apple AirPlay.
 *
 * @see {@link https://www.apple.com/au/airplay}
 * @docs {@link https://www.vidstack.io/docs/player/components/buttons/airplay-button}
 * @example
 * ```tsx
 * <AirPlayButton>
 *   <AirPlayIcon />
 * </AirPlayButton>
 * ```
 */
declare const AirPlayButton: React.ForwardRefExoticComponent<Omit<AirPlayButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

interface GoogleCastButtonProps extends ReactElementProps<GoogleCastButtonInstance, HTMLButtonElement> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLButtonElement>;
}
/**
 * A button for requesting Google Cast.
 *
 * @see {@link https://developers.google.com/cast/docs/overview}
 * @docs {@link https://www.vidstack.io/docs/player/components/buttons/google-cast-button}
 * @example
 * ```tsx
 * <GoogleCastButton>
 *   <ChromecastIcon />
 * </GoogleCastButton>
 * ```
 */
declare const GoogleCastButton: React.ForwardRefExoticComponent<Omit<GoogleCastButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

interface PlayButtonProps extends ReactElementProps<PlayButtonInstance, HTMLButtonElement> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLButtonElement>;
}
/**
 * A button for toggling the playback state (play/pause) of the current media.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/buttons/play-button}
 * @example
 * ```tsx
 * const isPaused = useMediaState('paused');
 *
 * <PlayButton>
 *   {isPaused ? <PlayIcon /> : <PauseIcon />}
 * </PlayButton>
 * ```
 */
declare const PlayButton: React.ForwardRefExoticComponent<Omit<PlayButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

interface CaptionButtonProps extends ReactElementProps<CaptionButtonInstance, HTMLButtonElement> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLButtonElement>;
}
/**
 * A button for toggling the showing state of the captions.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/buttons/caption-button}
 * @example
 * ```tsx
 * const track = useMediaState('textTrack'),
 *   isOn = track && isTrackCaptionKind(track);
 *
 * <CaptionButton>
 *   {isOn ? <OnIcon /> : <OffIcon />}
 * </CaptionButton>
 * ```
 */
declare const CaptionButton: React.ForwardRefExoticComponent<Omit<CaptionButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

interface FullscreenButtonProps extends ReactElementProps<FullscreenButtonInstance, HTMLButtonElement> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLButtonElement>;
}
/**
 * A button for toggling the fullscreen mode of the player.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/buttons/fullscreen-button}
 * @see {@link https://www.vidstack.io/docs/player/api/fullscreen}
 * @example
 * ```tsx
 * const isActive = useMediaState('fullscreen');
 *
 * <FullscreenButton>
 *   {!isActive ? <EnterIcon /> : <ExitIcon />}
 * </FullscreenButton>
 * ```
 */
declare const FullscreenButton: React.ForwardRefExoticComponent<Omit<FullscreenButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

interface MuteButtonProps extends ReactElementProps<MuteButtonInstance, HTMLButtonElement> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLButtonElement>;
}
/**
 * A button for toggling the muted state of the player.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/buttons/mute-button}
 * @example
 * ```tsx
 * const volume = useMediaState('volume'),
 *   isMuted = useMediaState('muted');
 *
 * <MuteButton>
 *   {isMuted || volume == 0 ? (
 *     <MuteIcon />
 *   ) : volume < 0.5 ? (
 *     <VolumeLowIcon />
 *   ) : (
 *     <VolumeHighIcon />
 *   )}
 * </MuteButton>
 * ```
 */
declare const MuteButton: React.ForwardRefExoticComponent<Omit<MuteButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

interface PIPButtonProps extends ReactElementProps<PIPButtonInstance, HTMLButtonElement> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLButtonElement>;
}
/**
 * A button for toggling the picture-in-picture (PIP) mode of the player.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/buttons/pip-button}
 * @see {@link https://www.vidstack.io/docs/player/api/picture-in-picture}
 * @example
 * ```tsx
 * const isActive = useMediaState('pictureInPicture');
 *
 * <PIPButton>
 *   {!isActive ? <EnterIcon /> : <ExitIcon />}
 * </PIPButton>
 * ```
 */
declare const PIPButton: React.ForwardRefExoticComponent<Omit<PIPButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

interface SeekButtonProps extends ReactElementProps<SeekButtonInstance, HTMLButtonElement> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLButtonElement>;
}
/**
 * A button for seeking the current media playback forwards or backwards by a specified amount.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/buttons/seek-button}
 * @example
 * ```tsx
 * <SeekButton seconds={-10}>
 *   <SeekBackwardIcon />
 * </SeekButton>
 *
 * <SeekButton seconds={10}>
 *   <SeekForwardIcon />
 * </SeekButton>
 * ```
 */
declare const SeekButton: React.ForwardRefExoticComponent<Omit<SeekButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

interface LiveButtonProps extends ReactElementProps<LiveButtonInstance, HTMLButtonElement> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLButtonElement>;
}
/**
 * This component displays the current live status of the stream. This includes whether it's
 * live, at the live edge, or not live. In addition, this component is a button during live streams
 * and will skip ahead to the live edge when pressed.
 *
 * 🚨 This component will have `aria-hidden="true"` applied when the current stream is _not_
 * live.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/buttons/live-button}
 * @example
 * ```tsx
 * <LiveButton>
 *   <LiveIcon />
 * </LiveButton>
 * ```
 */
declare const LiveButton: React.ForwardRefExoticComponent<Omit<LiveButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;

type PrimitivePropsWithRef<E extends React.ElementType> = Omit<React.ComponentProps<E>, 'style'> & React.Attributes & {
    asChild?: boolean;
    style?: React.CSSProperties | (React.CSSProperties & Record<`--${string}`, string | null | undefined>) | undefined;
};

interface SliderValueProps extends ReactElementProps<SliderValueInstance> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
}

interface RootProps$a 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$a: React.ForwardRefExoticComponent<Omit<RootProps$a, "ref"> & React.RefAttributes<SliderInstance>>;
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>>;
interface TrackProps$1 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$1: React.ForwardRefExoticComponent<Omit<TrackProps$1, "ref"> & React.RefAttributes<HTMLElement>>;
interface TrackFillProps$1 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$1: React.ForwardRefExoticComponent<Omit<TrackFillProps$1, "ref"> & React.RefAttributes<HTMLElement>>;
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>>;
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>>;
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>>;

declare const slider_d_Preview: typeof Preview;
type slider_d_PreviewProps = PreviewProps;
declare const slider_d_Steps: typeof Steps;
type slider_d_StepsProps = StepsProps;
declare const slider_d_Thumb: typeof Thumb;
type slider_d_ThumbProps = ThumbProps;
declare const slider_d_Value: typeof Value;
type slider_d_ValueProps = ValueProps;
declare namespace slider_d {
  export { slider_d_Preview as Preview, Root$a as Root, slider_d_Steps as Steps, slider_d_Thumb as Thumb, Track$1 as Track, TrackFill$1 as TrackFill, slider_d_Value as Value };
  export type { slider_d_PreviewProps as PreviewProps, RootProps$a as RootProps, slider_d_StepsProps as StepsProps, slider_d_ThumbProps as ThumbProps, TrackFillProps$1 as TrackFillProps, TrackProps$1 as TrackProps, slider_d_ValueProps as ValueProps };
}

interface RootProps$9 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$9: React.ForwardRefExoticComponent<Omit<RootProps$9, "ref"> & React.RefAttributes<VolumeSliderInstance>>;

declare const volumeSlider_d_Preview: typeof Preview;
type volumeSlider_d_PreviewProps = PreviewProps;
declare const volumeSlider_d_Steps: typeof Steps;
type volumeSlider_d_StepsProps = StepsProps;
declare const volumeSlider_d_Thumb: typeof Thumb;
type volumeSlider_d_ThumbProps = ThumbProps;
declare const volumeSlider_d_Value: typeof Value;
type volumeSlider_d_ValueProps = ValueProps;
declare namespace volumeSlider_d {
  export { volumeSlider_d_Preview as Preview, Root$9 as Root, volumeSlider_d_Steps as Steps, volumeSlider_d_Thumb as Thumb, Track$1 as Track, TrackFill$1 as TrackFill, volumeSlider_d_Value as Value };
  export type { volumeSlider_d_PreviewProps as PreviewProps, RootProps$9 as RootProps, volumeSlider_d_StepsProps as StepsProps, volumeSlider_d_ThumbProps as ThumbProps, TrackFillProps$1 as TrackFillProps, TrackProps$1 as TrackProps, volumeSlider_d_ValueProps as ValueProps };
}

interface RootProps$8 extends ReactElementProps<QualitySliderInstance> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<QualitySliderInstance>;
}
/**
 * Versatile and user-friendly input video quality 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/quality-slider}
 * @example
 * ```tsx
 * <QualitySlider.Root>
 *   <QualitySlider.Track>
 *     <QualitySlider.TrackFill />
 *   </QualitySlider.Track>
 *   <QualitySlider.Thumb />
 * </QualitySlider.Root>
 * ```
 */
declare const Root$8: React.ForwardRefExoticComponent<Omit<RootProps$8, "ref"> & React.RefAttributes<QualitySliderInstance>>;

declare const qualitySlider_d_Preview: typeof Preview;
type qualitySlider_d_PreviewProps = PreviewProps;
declare const qualitySlider_d_Steps: typeof Steps;
type qualitySlider_d_StepsProps = StepsProps;
declare const qualitySlider_d_Thumb: typeof Thumb;
type qualitySlider_d_ThumbProps = ThumbProps;
declare const qualitySlider_d_Value: typeof Value;
type qualitySlider_d_ValueProps = ValueProps;
declare namespace qualitySlider_d {
  export { qualitySlider_d_Preview as Preview, Root$8 as Root, qualitySlider_d_Steps as Steps, qualitySlider_d_Thumb as Thumb, Track$1 as Track, TrackFill$1 as TrackFill, qualitySlider_d_Value as Value };
  export type { qualitySlider_d_PreviewProps as PreviewProps, RootProps$8 as RootProps, qualitySlider_d_StepsProps as StepsProps, qualitySlider_d_ThumbProps as ThumbProps, TrackFillProps$1 as TrackFillProps, TrackProps$1 as TrackProps, qualitySlider_d_ValueProps as ValueProps };
}

interface RootProps$7 extends ReactElementProps<AudioGainSliderInstance> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<AudioGainSliderInstance>;
}
/**
 * Versatile and user-friendly audio boost 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 audio gain within the range 0 to 100.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/sliders/audio-gain-slider}
 * @example
 * ```tsx
 * <AudioGainSlider.Root>
 *   <AudioGainSlider.Track>
 *     <AudioGainSlider.TrackFill />
 *   </AudioGainSlider.Track>
 *   <AudioGainSlider.Thumb />
 * </AudioGainSlider.Root>
 * ```
 */
declare const Root$7: React.ForwardRefExoticComponent<Omit<RootProps$7, "ref"> & React.RefAttributes<AudioGainSliderInstance>>;

declare const audioGainSlider_d_Preview: typeof Preview;
type audioGainSlider_d_PreviewProps = PreviewProps;
declare const audioGainSlider_d_Steps: typeof Steps;
type audioGainSlider_d_StepsProps = StepsProps;
declare const audioGainSlider_d_Thumb: typeof Thumb;
type audioGainSlider_d_ThumbProps = ThumbProps;
declare const audioGainSlider_d_Value: typeof Value;
type audioGainSlider_d_ValueProps = ValueProps;
declare namespace audioGainSlider_d {
  export { audioGainSlider_d_Preview as Preview, Root$7 as Root, audioGainSlider_d_Steps as Steps, audioGainSlider_d_Thumb as Thumb, Track$1 as Track, TrackFill$1 as TrackFill, audioGainSlider_d_Value as Value };
  export type { audioGainSlider_d_PreviewProps as PreviewProps, RootProps$7 as RootProps, audioGainSlider_d_StepsProps as StepsProps, audioGainSlider_d_ThumbProps as ThumbProps, TrackFillProps$1 as TrackFillProps, TrackProps$1 as TrackProps, audioGainSlider_d_ValueProps as ValueProps };
}

interface RootProps$6 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$6: React.ForwardRefExoticComponent<Omit<RootProps$6, "ref"> & React.RefAttributes<SpeedSliderInstance>>;

declare const speedSlider_d_Preview: typeof Preview;
type speedSlider_d_PreviewProps = PreviewProps;
declare const speedSlider_d_Steps: typeof Steps;
type speedSlider_d_StepsProps = StepsProps;
declare const speedSlider_d_Thumb: typeof Thumb;
type speedSlider_d_ThumbProps = ThumbProps;
declare const speedSlider_d_Value: typeof Value;
type speedSlider_d_ValueProps = ValueProps;
declare namespace speedSlider_d {
  export { speedSlider_d_Preview as Preview, Root$6 as Root, speedSlider_d_Steps as Steps, speedSlider_d_Thumb as Thumb, Track$1 as Track, TrackFill$1 as TrackFill, speedSlider_d_Value as Value };
  export type { speedSlider_d_PreviewProps as PreviewProps, RootProps$6 as RootProps, speedSlider_d_StepsProps as StepsProps, speedSlider_d_ThumbProps as ThumbProps, TrackFillProps$1 as TrackFillProps, TrackProps$1 as TrackProps, speedSlider_d_ValueProps as ValueProps };
}

interface RootProps$5 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$5: React.ForwardRefExoticComponent<Omit<RootProps$5, "ref"> & React.RefAttributes<HTMLElement>>;
interface ImgProps extends PrimitivePropsWithRef<'img'> {
    children?: React.ReactNode;
}
declare const Img: React.ForwardRefExoticComponent<Omit<ImgProps, "ref"> & React.RefAttributes<HTMLImageElement>>;

declare const thumbnail_d_Img: typeof Img;
type thumbnail_d_ImgProps = ImgProps;
declare namespace thumbnail_d {
  export { thumbnail_d_Img as Img, Root$5 as Root };
  export type { thumbnail_d_ImgProps as ImgProps, RootProps$5 as RootProps };
}

interface RootProps$4 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$4: React.ForwardRefExoticComponent<Omit<RootProps$4, "ref"> & React.RefAttributes<TimeSliderInstance>>;
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>>;
interface ChapterTitleProps$1 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$1: React.ForwardRefExoticComponent<Omit<ChapterTitleProps$1, "ref"> & React.RefAttributes<HTMLElement>>;
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>>;
interface ThumbnailProps extends ReactElementProps<SliderThumbnailInstance, HTMLElement> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
}
type ThumbnailImgProps = ImgProps;
declare const Thumbnail: {
    readonly Root: React.ForwardRefExoticComponent<Omit<ThumbnailProps, "ref"> & React.RefAttributes<HTMLElement>>;
    readonly Img: React.ForwardRefExoticComponent<Omit<ImgProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
};
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>>;
interface VideoProviderProps {
    instance: SliderVideoInstance;
    children?: React.ReactNode;
}

declare const timeSlider_d_Chapters: typeof Chapters;
type timeSlider_d_ChaptersProps = ChaptersProps;
declare const timeSlider_d_Preview: typeof Preview;
type timeSlider_d_PreviewProps = PreviewProps;
declare const timeSlider_d_Progress: typeof Progress;
type timeSlider_d_ProgressProps = ProgressProps;
declare const timeSlider_d_Steps: typeof Steps;
type timeSlider_d_StepsProps = StepsProps;
declare const timeSlider_d_Thumb: typeof Thumb;
type timeSlider_d_ThumbProps = ThumbProps;
declare const timeSlider_d_Thumbnail: typeof Thumbnail;
type timeSlider_d_ThumbnailImgProps = ThumbnailImgProps;
type timeSlider_d_ThumbnailProps = ThumbnailProps;
declare const timeSlider_d_Value: typeof Value;
type timeSlider_d_ValueProps = ValueProps;
declare const timeSlider_d_Video: typeof Video;
type timeSlider_d_VideoProps = VideoProps;
type timeSlider_d_VideoProviderProps = VideoProviderProps;
declare namespace timeSlider_d {
  export { ChapterTitle$1 as ChapterTitle, timeSlider_d_Chapters as Chapters, timeSlider_d_Preview as Preview, timeSlider_d_Progress as Progress, Root$4 as Root, timeSlider_d_Steps as Steps, timeSlider_d_Thumb as Thumb, timeSlider_d_Thumbnail as Thumbnail, Track$1 as Track, TrackFill$1 as TrackFill, timeSlider_d_Value as Value, timeSlider_d_Video as Video };
  export type { ChapterTitleProps$1 as ChapterTitleProps, timeSlider_d_ChaptersProps as ChaptersProps, timeSlider_d_PreviewProps as PreviewProps, timeSlider_d_ProgressProps as ProgressProps, RootProps$4 as RootProps, timeSlider_d_StepsProps as StepsProps, timeSlider_d_ThumbProps as ThumbProps, timeSlider_d_ThumbnailImgProps as ThumbnailImgProps, timeSlider_d_ThumbnailProps as ThumbnailProps, TrackFillProps$1 as TrackFillProps, TrackProps$1 as TrackProps, timeSlider_d_ValueProps as ValueProps, timeSlider_d_VideoProps as VideoProps, timeSlider_d_VideoProviderProps as VideoProviderProps };
}

interface RootProps$3 extends ReactElementProps<RadioGroupInstance> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<RadioGroupInstance>;
}
/**
 * A radio group consists of options where only one of them can be checked. Each option is
 * provided as a radio (i.e., a selectable element).
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/menu/radio-group}
 * @example
 * ```tsx
 * <RadioGroup.Root>
 *   <RadioGroup.Item value="1080">1080p</RadioGroup.Item>
 *   <RadioGroup.Item value="720">720p</RadioGroup.Item>
 * </RadioGroup.Root>
 * ```
 */
declare const Root$3: React.ForwardRefExoticComponent<Omit<RootProps$3, "ref"> & React.RefAttributes<RadioGroupInstance>>;
interface ItemProps$1 extends ReactElementProps<RadioInstance> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
}
/**
 * A radio represents a option that a user can select inside of a radio group. Only one radio
 * can be checked in a group.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/menu/radio}
 * @example
 * ```tsx
 * <RadioGroup.Item value="1080">1080p</RadioGroup.Item>
 * ```
 */
declare const Item$1: React.ForwardRefExoticComponent<Omit<ItemProps$1, "ref"> & React.RefAttributes<HTMLElement>>;

declare namespace radioGroup_d {
  export { Item$1 as Item, Root$3 as Root };
  export type { ItemProps$1 as ItemProps, RootProps$3 as RootProps };
}

interface RootProps$2 extends ReactElementProps<MenuInstance> {
    asChild?: boolean;
    children: React.ReactNode;
    ref?: React.Ref<MenuInstance>;
}
/**
 * Root menu container used to hold and manage a menu button and menu items. This component is
 * used to display options in a floating panel. They can be nested to create submenus.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/menu/menu}
 * @example
 * ```tsx
 * <Menu.Root>
 *   <Menu.Button></Menu.Button>
 *   <Menu.Content placement="top end"></Menu.Content>
 * </Menu.Root>
 * ```
 */
declare const Root$2: React.ForwardRefExoticComponent<Omit<RootProps$2, "ref"> & React.RefAttributes<MenuInstance>>;
interface ButtonProps extends ReactElementProps<MenuButtonInstance, HTMLButtonElement> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLButtonElement>;
}
/**
 * A button that controls the opening and closing of a menu component. The button will become a
 * `menuitem` when used inside a submenu.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/menu/menu}
 * @example
 * ```tsx
 * <Menu.Root>
 *   <Menu.Button></Menu.Button>
 *   <Menu.Content placement="top end"></Menu.Content>
 * </Menu.Root>
 * ```
 */
declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
interface PortalProps extends ReactElementProps<MenuPortalInstance> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
}
/**
 * Portals menu items into the given container.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/menu#portal}
 * @example
 * ```tsx
 * <Menu.Root>
 *   <Menu.Button></Menu.Button>
 *   <Menu.Portal>
 *     <Menu.Content placement="top end"></Menu.Content>
 *   </Menu.Portal>
 * </Menu.Root>
 * ```
 */
declare const Portal: React.ForwardRefExoticComponent<Omit<PortalProps, "ref"> & React.RefAttributes<HTMLElement>>;
interface ItemsProps extends ReactElementProps<MenuItemsInstance> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
}
/**
 * Used to group and display settings or arbitrary content in a floating panel.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/menu/menu}
 * @example
 * ```tsx
 * <Menu.Root>
 *   <Menu.Button></Menu.Button>
 *   <Menu.Items placement="top end"></Menu.Items>
 * </Menu.Root>
 * ```
 */
declare const Items: React.ForwardRefExoticComponent<Omit<ItemsProps, "ref"> & React.RefAttributes<HTMLElement>>;
interface ItemProps extends ReactElementProps<MenuItemInstance> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HTMLElement>;
}
/**
 * Represents a specific option or action, typically displayed as a text label or icon, which
 * users can select to access or perform a particular function or view related content.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/menu/menu}
 * @example
 * ```tsx
 * <Menu.Root>
 *   <Menu.Button></Menu.Button>
 *   <Menu.Content placement="top end">
 *     <Menu.Item></Menu.Item>
 *   </Menu.Content>
 * </Menu.Root>
 * ```
 */
declare const Item: React.ForwardRefExoticComponent<Omit<ItemProps, "ref"> & React.RefAttributes<HTMLElement>>;

declare const menu_d_Button: typeof Button;
type menu_d_ButtonProps = ButtonProps;
declare const menu_d_Item: typeof Item;
type menu_d_ItemProps = ItemProps;
declare const menu_d_Items: typeof Items;
type menu_d_ItemsProps = ItemsProps;
declare const menu_d_Portal: typeof Portal;
type menu_d_PortalProps = PortalProps;
declare namespace menu_d {
  export { menu_d_Button as Button, Items as Content, menu_d_Item as Item, menu_d_Items as Items, menu_d_Portal as Portal, Item$1 as Radio, Root$3 as RadioGroup, Root$2 as Root };
  export type { menu_d_ButtonProps as ButtonProps, ItemsProps as ContentProps, menu_d_ItemProps as ItemProps, menu_d_ItemsProps as ItemsProps, menu_d_PortalProps as PortalProps, RootProps$3 as RadioGroupProps, ItemProps$1 as RadioProps, RootProps$2 as RootProps };
}

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>>;

interface ChapterTitleProps extends PrimitivePropsWithRef<'span'> {
    /**
     * Specify text to be displayed when no chapter title is available.
     */
    defaultText?: string;
}
/**
 * This component is used to load and display the current chapter title based on the text tracks
 * provided.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/display/chapter-title}
 * @example
 * ```tsx
 * <ChapterTitle />
 * ```
 */
declare const ChapterTitle: React.ForwardRefExoticComponent<Omit<ChapterTitleProps, "ref"> & React.RefAttributes<HTMLElement>>;

interface GestureProps extends ReactElementProps<GestureInstance> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<GestureInstance>;
}
/**
 * This component enables actions to be performed on the media based on user gestures.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/media/gesture}
 * @example
 * ```tsx
 * <Gesture event="pointerup" action="toggle:paused" />
 * <Gesture event="dblpointerup" action="toggle:fullscreen" />
 * ```
 */
declare const Gesture: React.ForwardRefExoticComponent<Omit<GestureProps, "ref"> & React.RefAttributes<GestureInstance>>;

interface CaptionsProps extends ReactElementProps<CaptionsInstance> {
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<CaptionsInstance>;
}
/**
 * Renders and displays captions/subtitles. This will be an overlay for video and a simple
 * captions box for audio.
 *
 * @docs {@link https://www.vidstack.io/docs/player/components/display/captions}
 * @example
 * ```tsx
 * <Captions />
 * ```
 */
declare const Captions: React.ForwardRefExoticComponent<Omit<CaptionsProps, "ref"> & React.RefAttributes<CaptionsInstance>>;

interface PosterProps extends ReactElementProps<PosterInstance, HTMLImageElement> {
    alt?: string;
    asChild?: boolean;
    children?: React.ReactNode;
    ref?: React.Ref<HT