@bazza-ui/react 0.0.0 → 0.1.0-canary.3

package/dist/video-player/index.d.cts

@@ -0,0 +1,1379 @@
+import * as React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _base_ui_react_slider from '@base-ui/react/slider';
+import { Slider } from '@base-ui/react/slider';
+import { Padding } from '@floating-ui/react';
+
+/**
+ * Mutually exclusive playback states.
+ * - 'playing': Video is actively playing
+ * - 'paused': Video is paused by user action
+ * - 'waiting': Video is buffering/loading (will resume based on playbackIntent)
+ * - 'ended': Video has reached the end
+ */
+type PlaybackStatus = 'playing' | 'paused' | 'waiting' | 'ended';
+/**
+ * The user's intended playback state.
+ * Persists through transient states like 'waiting' to enable correct resumption.
+ * - 'play': User wants the video to play
+ * - 'pause': User wants the video to be paused
+ */
+type PlaybackIntent = 'play' | 'pause';
+interface VideoQuality {
+    label: string;
+    width: number;
+    height: number;
+    bitrate?: number;
+}
+interface VideoTextTrack {
+    kind: TextTrackKind;
+    label: string;
+    language: string;
+    src?: string;
+}
+/**
+ * Registered track info from VideoPlayer.Track components.
+ * Includes a reference to the native TextTrack for cue access.
+ */
+interface TrackInfo {
+    /** Unique identifier for this track registration */
+    id: string;
+    /** Track kind (captions, subtitles, descriptions, chapters, metadata) */
+    kind: TextTrackKind;
+    /** Human-readable label */
+    label: string;
+    /** Language code (e.g., 'en', 'es') */
+    srcLang: string;
+    /** Source URL for the track file */
+    src: string;
+    /** Reference to the native TextTrack object (set after track loads) */
+    textTrack: TextTrack | null;
+}
+interface VideoPlayerState {
+    /** Current mutually exclusive playback state */
+    playbackStatus: PlaybackStatus;
+    /** User's intended playback state (persists through 'waiting' state) */
+    playbackIntent: PlaybackIntent;
+    /** True when playbackStatus === 'playing' */
+    playing: boolean;
+    /** True when playbackStatus === 'paused' */
+    paused: boolean;
+    /** True when playbackStatus === 'ended' */
+    ended: boolean;
+    /** True when playbackStatus === 'waiting' */
+    waiting: boolean;
+    /** True while seeking to a new position (orthogonal to playbackStatus) */
+    seeking: boolean;
+    /** True when video has enough data to begin playback */
+    canPlay: boolean;
+    currentTime: number;
+    duration: number;
+    buffered: TimeRanges | null;
+    hoverTime: number | null;
+    hoverProgress: number | null;
+    volume: number;
+    muted: boolean;
+    fullscreen: boolean;
+    pictureInPicture: boolean;
+    idle: boolean;
+    idleTimeout: number;
+    preventIdleWhenPaused: boolean;
+    /** Registered tracks from VideoPlayer.Track components */
+    registeredTracks: TrackInfo[];
+    /** Currently active text track */
+    activeTextTrack: TextTrack | null;
+    /** Currently active cues from the active text track */
+    activeCues: VTTCue[];
+    playbackRate: number;
+    qualities: VideoQuality[];
+    activeQuality: VideoQuality | null;
+    videoRef: React.RefObject<HTMLVideoElement | null>;
+    rootRef: React.RefObject<HTMLDivElement | null>;
+}
+interface VideoPlayerActions {
+    play: () => Promise<void>;
+    pause: () => void;
+    toggle: () => Promise<void>;
+    seek: (time: number) => void;
+    setVolume: (volume: number) => void;
+    toggleMute: () => void;
+    enterFullscreen: () => Promise<void>;
+    exitFullscreen: () => Promise<void>;
+    toggleFullscreen: () => Promise<void>;
+    enterPictureInPicture: () => Promise<void>;
+    exitPictureInPicture: () => Promise<void>;
+    togglePictureInPicture: () => Promise<void>;
+    setPlaybackRate: (rate: number) => void;
+    setTextTrack: (track: TextTrack | null) => void;
+    setQuality: (quality: VideoQuality) => void;
+    /** Register a track from VideoPlayer.Track component */
+    registerTrack: (track: TrackInfo) => void;
+    /** Unregister a track when VideoPlayer.Track unmounts */
+    unregisterTrack: (id: string) => void;
+    /** Update a registered track's textTrack reference */
+    updateTrackRef: (id: string, textTrack: TextTrack) => void;
+    /** Reset idle state and restart idle timeout */
+    resetIdle: () => void;
+    /** Set hover time for seek preview (null to clear) */
+    setHoverTime: (time: number | null) => void;
+}
+interface VideoPlayerInternalHandlers {
+    onTimeUpdate: () => void;
+    onDurationChange: () => void;
+    onProgress: () => void;
+    onPlay: () => void;
+    onPause: () => void;
+    onEnded: () => void;
+    onWaiting: () => void;
+    onCanPlay: () => void;
+    onSeeking: () => void;
+    onSeeked: () => void;
+    onVolumeChange: () => void;
+    onLoadedMetadata: () => void;
+    onRootMouseLeave: () => void;
+}
+interface VideoPlayerContextValue extends VideoPlayerState, VideoPlayerActions {
+    _handlers: VideoPlayerInternalHandlers;
+}
+/**
+ * Actions exposed via actionsRef for programmatic control.
+ * Follows the Base UI actionsRef pattern.
+ */
+interface VideoPlayerExternalActions {
+    toggle: () => Promise<void>;
+    seek: (time: number) => void;
+    setVolume: (volume: number) => void;
+    toggleFullscreen: () => Promise<void>;
+}
+type DivPropsWithoutConflicts = Omit<React.ComponentPropsWithRef<'div'>, 'onVolumeChange' | 'onEnded' | 'onWaiting' | 'onSeeking' | 'onSeeked'>;
+interface VideoPlayerRootProps extends DivPropsWithoutConflicts {
+    /**
+     * Ref to expose programmatic control actions.
+     * Follows the Base UI actionsRef pattern.
+     */
+    actionsRef?: React.RefObject<VideoPlayerExternalActions | null>;
+    /**
+     * Keyboard shortcuts scope.
+     * - 'focused': shortcuts work when player is focused (default)
+     * - 'global': shortcuts work anywhere on the page
+     * - 'none': disable keyboard shortcuts
+     * @default 'focused'
+     */
+    keyboardShortcuts?: 'focused' | 'global' | 'none';
+    defaultPlaying?: boolean;
+    defaultVolume?: number;
+    defaultMuted?: boolean;
+    defaultPlaybackRate?: number;
+    playing?: boolean;
+    onPlayingChange?: (playing: boolean) => void;
+    volume?: number;
+    onVolumeChange?: (volume: number) => void;
+    muted?: boolean;
+    onMutedChange?: (muted: boolean) => void;
+    playbackRate?: number;
+    onPlaybackRateChange?: (rate: number) => void;
+    currentTime?: number;
+    onCurrentTimeChange?: (time: number) => void;
+    /**
+     * Time in milliseconds before the player is considered idle.
+     * Set to 0 to disable idle detection.
+     * @default 3000
+     */
+    idleTimeout?: number;
+    /**
+     * When true, prevents the player from going idle while paused.
+     * @default false
+     */
+    preventIdleWhenPaused?: boolean;
+    /**
+     * Controls cursor auto-hiding behavior when the player is idle.
+     * - 'fullscreen': hide cursor only when in fullscreen mode and idle (default)
+     * - 'always': hide cursor when idle in any mode
+     * - false: never auto-hide cursor
+     * @default 'fullscreen'
+     */
+    hideCursorWhenIdle?: 'always' | 'fullscreen' | false;
+    idle?: boolean;
+    onIdleChange?: (idle: boolean) => void;
+    onEnded?: () => void;
+    onWaiting?: () => void;
+    onSeeking?: () => void;
+    onSeeked?: () => void;
+    onFullscreenChange?: (fullscreen: boolean) => void;
+    onPictureInPictureChange?: (pip: boolean) => void;
+}
+/**
+ * Render prop pattern following Base UI's approach.
+ * @param props - Props to spread on the rendered element (includes ref, handlers, aria attrs)
+ * @param state - Component state for conditional rendering
+ */
+type RenderProp<Props = Record<string, unknown>, State = Record<string, unknown>> = (props: Props, state: State) => React.ReactElement;
+
+interface VideoPlayerRootState {
+    playbackStatus: PlaybackStatus;
+    playbackIntent: PlaybackIntent;
+    playing: boolean;
+    paused: boolean;
+    ended: boolean;
+    waiting: boolean;
+    seeking: boolean;
+    canPlay: boolean;
+    fullscreen: boolean;
+    pictureInPicture: boolean;
+    muted: boolean;
+    volume: number;
+    currentTime: number;
+    duration: number;
+    playbackRate: number;
+    idle: boolean;
+    idleTimeout: number;
+}
+declare const VideoPlayerRoot: React.ForwardRefExoticComponent<Omit<VideoPlayerRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare namespace VideoPlayerRoot {
+    type Props = VideoPlayerRootProps;
+    type State = VideoPlayerRootState;
+}
+
+/**
+ * Hook to access the VideoPlayer context from custom components.
+ *
+ * @example
+ * ```tsx
+ * function CustomControl() {
+ *   const { playing, toggle, currentTime, duration } = useVideoPlayer()
+ *
+ *   return (
+ *     <div>
+ *       {playing ? 'Playing' : 'Paused'} - {currentTime}s / {duration}s
+ *       <button onClick={toggle}>Toggle</button>
+ *     </div>
+ *   )
+ * }
+ * ```
+ */
+declare function useVideoPlayer(): VideoPlayerContextValue;
+
+interface BufferedIndicatorProps extends React.ComponentPropsWithRef<'div'> {
+    render?: RenderProp<BufferedIndicatorRenderProps, BufferedIndicatorState>;
+}
+interface BufferedIndicatorRenderProps {
+    ref: React.Ref<HTMLElement>;
+    style: React.CSSProperties;
+    'aria-hidden': true;
+}
+interface BufferedIndicatorState {
+    buffered: TimeRanges | null;
+    duration: number;
+    bufferedPercentage: number;
+    bufferedEnd: number;
+}
+declare const BufferedIndicator: React.ForwardRefExoticComponent<Omit<BufferedIndicatorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare namespace BufferedIndicator {
+    type Props = BufferedIndicatorProps;
+    type State = BufferedIndicatorState;
+}
+
+declare enum CaptionsDataAttributes {
+    /** Applied when there are active caption cues being displayed. */
+    active = "data-active"
+}
+
+interface CaptionsProps extends Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
+    /**
+     * Custom render function for full control over caption rendering.
+     * Receives renderProps (ref, aria attributes, data attributes) and state (cues, text).
+     */
+    render?: RenderProp<CaptionsRenderProps, CaptionsState>;
+    /**
+     * Children to render instead of default cue text.
+     * Use the render prop or useVideoPlayer() hook to access cue data.
+     */
+    children?: React.ReactNode;
+}
+interface CaptionsRenderProps {
+    ref: React.Ref<HTMLDivElement>;
+    /** Announces caption changes to screen readers */
+    'aria-live': 'polite';
+    /** Ensures the full caption is read, not just changes */
+    'aria-atomic': true;
+    /** Role for accessibility */
+    role: 'status';
+    /** Allow clicks to pass through to video */
+    style: React.CSSProperties;
+    /** Applied when there are active cues */
+    [CaptionsDataAttributes.active]?: boolean;
+}
+interface CaptionsState {
+    /** Whether there are currently active cues */
+    active: boolean;
+    /** Combined text from all active cues (joined with newlines) */
+    cueText: string;
+    /** Raw VTTCue objects for advanced use cases */
+    cues: VTTCue[];
+}
+/**
+ * Renders caption text with full styling control and accessibility support.
+ * Uses aria-live="polite" to announce caption changes to screen readers.
+ *
+ * By default, renders the cue text directly. Use the render prop or children
+ * for custom rendering.
+ *
+ * @example
+ * // Default rendering with custom styles
+ * <VideoPlayer.Captions
+ *   className="absolute bottom-16 bg-black/80 text-white px-4 py-2 rounded"
+ * />
+ *
+ * @example
+ * // Custom rendering with render prop
+ * <VideoPlayer.Captions
+ *   render={(props, state) => (
+ *     <div {...props} className="my-custom-captions">
+ *       {state.cues.map((cue, i) => (
+ *         <p key={i}>{cue.text}</p>
+ *       ))}
+ *     </div>
+ *   )}
+ * />
+ */
+declare const Captions: React.ForwardRefExoticComponent<Omit<CaptionsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare namespace Captions {
+    type Props = CaptionsProps;
+    type State = CaptionsState;
+    type RenderProps = CaptionsRenderProps;
+}
+
+declare enum CaptionsButtonDataAttributes {
+    /** Applied when captions are active. */
+    active = "data-active",
+    /** Applied when captions are available. */
+    available = "data-available"
+}
+
+interface CaptionsButtonProps extends React.ComponentPropsWithRef<'button'> {
+    render?: RenderProp<CaptionsButtonRenderProps, CaptionsButtonState>;
+}
+interface CaptionsButtonRenderProps {
+    ref: React.Ref<HTMLButtonElement>;
+    type: 'button';
+    'aria-label': string;
+    'aria-pressed': boolean;
+    disabled: boolean;
+    [CaptionsButtonDataAttributes.active]?: boolean;
+    [CaptionsButtonDataAttributes.available]?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+interface CaptionsButtonState {
+    active: boolean;
+    available: boolean;
+    trackCount: number;
+}
+declare const CaptionsButton: React.ForwardRefExoticComponent<Omit<CaptionsButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare namespace CaptionsButton {
+    type Props = CaptionsButtonProps;
+    type State = CaptionsButtonState;
+}
+
+declare enum CaptionsMenuDataAttributes {
+    /** Applied when a caption track is active. */
+    active = "data-active"
+}
+
+interface CaptionsMenuProps extends React.ComponentPropsWithRef<'div'> {
+    render?: RenderProp<CaptionsMenuRenderProps, CaptionsMenuState>;
+}
+interface CaptionsMenuRenderProps {
+    ref: React.Ref<HTMLDivElement>;
+    role: 'menu';
+    'aria-label': string;
+    [CaptionsMenuDataAttributes.active]?: boolean;
+}
+interface CaptionsMenuState {
+    registeredTracks: TrackInfo[];
+    activeTextTrack: TextTrack | null;
+}
+interface CaptionsMenuItemProps extends React.ComponentPropsWithRef<'button'> {
+    track: TextTrack | null;
+}
+declare const CaptionsMenuItem: React.ForwardRefExoticComponent<Omit<CaptionsMenuItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const CaptionsMenu: React.ForwardRefExoticComponent<Omit<CaptionsMenuProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare namespace CaptionsMenu {
+    type Props = CaptionsMenuProps;
+    type State = CaptionsMenuState;
+    type ItemProps = CaptionsMenuItemProps;
+}
+
+declare enum ControlsDataAttributes {
+    /** Applied when the controls are visible. */
+    open = "data-open",
+    /** Applied when the controls are hidden. */
+    closed = "data-closed",
+    /** Applied when the player is idle (no user interaction). */
+    idle = "data-idle",
+    /** Applied when the video is playing. */
+    playing = "data-playing",
+    /** Applied when the video is paused. */
+    paused = "data-paused",
+    /** Applied when the video has ended. */
+    ended = "data-ended",
+    /** Applied on the first frame when entering. Use for CSS enter animations. */
+    startingStyle = "data-starting-style",
+    /** Applied during exit animation. Use for CSS exit animations. */
+    endingStyle = "data-ending-style"
+}
+
+interface ControlsProps extends Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
+    /**
+     * Delay before hiding after player becomes idle (ms).
+     * Defaults to Root's idleTimeout. Set to 0 to disable auto-hide.
+     */
+    idleTimeout?: number;
+    /**
+     * Keep the element always mounted in the DOM, even when closed.
+     * Only needed for JavaScript animation libraries (e.g., Framer Motion).
+     * CSS transitions and animations work automatically without this.
+     * @default false
+     */
+    keepMounted?: boolean;
+    render?: RenderProp<ControlsRenderProps, ControlsState>;
+    children?: React.ReactNode;
+}
+interface ControlsRenderProps {
+    ref: React.Ref<HTMLDivElement>;
+    onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+    [ControlsDataAttributes.open]?: boolean;
+    [ControlsDataAttributes.closed]?: boolean;
+    [ControlsDataAttributes.idle]?: boolean;
+    [ControlsDataAttributes.playing]?: boolean;
+    [ControlsDataAttributes.paused]?: boolean;
+    [ControlsDataAttributes.ended]?: boolean;
+    [ControlsDataAttributes.startingStyle]?: boolean;
+    [ControlsDataAttributes.endingStyle]?: boolean;
+}
+interface ControlsState {
+    /** Whether the controls are currently visible */
+    open: boolean;
+    idle: boolean;
+    playing: boolean;
+    paused: boolean;
+    ended: boolean;
+}
+declare const Controls: React.ForwardRefExoticComponent<Omit<ControlsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare namespace Controls {
+    type Props = ControlsProps;
+    type State = ControlsState;
+    type RenderProps = ControlsRenderProps;
+}
+
+declare enum FullscreenButtonDataAttributes {
+    /** Applied when in fullscreen mode. */
+    fullscreen = "data-fullscreen",
+    /** Applied when fullscreen is supported. */
+    supported = "data-supported"
+}
+
+interface FullscreenButtonProps extends Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
+    render?: RenderProp<FullscreenButtonRenderProps, FullscreenButtonState>;
+    children?: React.ReactNode;
+}
+interface FullscreenButtonRenderProps {
+    ref: React.Ref<HTMLButtonElement>;
+    type: 'button';
+    'aria-label': string;
+    'aria-pressed': boolean;
+    disabled: boolean;
+    [FullscreenButtonDataAttributes.fullscreen]?: boolean;
+    [FullscreenButtonDataAttributes.supported]?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+interface FullscreenButtonState {
+    fullscreen: boolean;
+    supported: boolean;
+}
+declare const FullscreenButton: React.ForwardRefExoticComponent<Omit<FullscreenButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare namespace FullscreenButton {
+    type Props = FullscreenButtonProps;
+    type State = FullscreenButtonState;
+    type RenderProps = FullscreenButtonRenderProps;
+}
+
+declare enum MuteButtonDataAttributes {
+    /** Applied when explicitly muted via toggle. */
+    muted = "data-muted",
+    /** Applied when either muted or volume === 0. */
+    volumeOff = "data-volume-off",
+    /** Applied when volume > 0 and not muted. */
+    volumeOn = "data-volume-on",
+    /** Applied when not muted and volume < 0.5. */
+    volumeLow = "data-volume-low",
+    /** Applied when not muted and volume >= 0.5. */
+    volumeHigh = "data-volume-high"
+}
+
+interface MuteButtonProps extends React.ComponentPropsWithRef<'button'> {
+    render?: RenderProp<MuteButtonRenderProps, MuteButtonState>;
+}
+interface MuteButtonRenderProps {
+    ref: React.Ref<HTMLButtonElement>;
+    type: 'button';
+    'aria-label': string;
+    'aria-pressed': boolean;
+    [MuteButtonDataAttributes.muted]?: boolean;
+    [MuteButtonDataAttributes.volumeOff]?: boolean;
+    [MuteButtonDataAttributes.volumeOn]?: boolean;
+    [MuteButtonDataAttributes.volumeLow]?: boolean;
+    [MuteButtonDataAttributes.volumeHigh]?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+interface MuteButtonState {
+    muted: boolean;
+    volume: number;
+}
+declare const MuteButton: React.ForwardRefExoticComponent<Omit<MuteButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare namespace MuteButton {
+    type Props = MuteButtonProps;
+    type State = MuteButtonState;
+}
+
+declare enum OverlayDataAttributes {
+    /** Applied when the overlay is visible. */
+    open = "data-open",
+    /** Applied when the overlay is hidden. */
+    closed = "data-closed",
+    /** Applied when the video is playing. */
+    playing = "data-playing",
+    /** Applied when the video is paused. */
+    paused = "data-paused",
+    /** Applied when the video has ended. */
+    ended = "data-ended",
+    /** Applied when the video is buffering/loading. */
+    waiting = "data-waiting",
+    /** Applied when the video is seeking to a new position. */
+    seeking = "data-seeking",
+    /** Applied when the player is in fullscreen mode. */
+    fullscreen = "data-fullscreen",
+    /** Applied when the video is in picture-in-picture mode. */
+    pip = "data-pip",
+    /** Applied on the first frame when entering. Use for CSS enter animations. */
+    startingStyle = "data-starting-style",
+    /** Applied during exit animation. Use for CSS exit animations. */
+    endingStyle = "data-ending-style"
+}
+
+interface OverlayProps extends Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
+    /**
+     * Delay before hiding after player becomes idle (ms).
+     * Defaults to Root's idleTimeout. Set to 0 to disable auto-hide.
+     */
+    idleTimeout?: number;
+    /**
+     * Keep the element always mounted in the DOM, even when closed.
+     * Only needed for JavaScript animation libraries (e.g., Framer Motion).
+     * CSS transitions and animations work automatically without this.
+     * @default false
+     */
+    keepMounted?: boolean;
+    render?: RenderProp<OverlayRenderProps, OverlayState>;
+    children?: React.ReactNode;
+}
+interface OverlayRenderProps {
+    ref: React.Ref<HTMLDivElement>;
+    onClick: (event: React.MouseEvent<HTMLDivElement>) => void;
+    [OverlayDataAttributes.playing]?: boolean;
+    [OverlayDataAttributes.paused]?: boolean;
+    [OverlayDataAttributes.ended]?: boolean;
+    [OverlayDataAttributes.waiting]?: boolean;
+    [OverlayDataAttributes.seeking]?: boolean;
+    [OverlayDataAttributes.fullscreen]?: boolean;
+    [OverlayDataAttributes.pip]?: boolean;
+    [OverlayDataAttributes.open]?: boolean;
+    [OverlayDataAttributes.closed]?: boolean;
+    [OverlayDataAttributes.startingStyle]?: boolean;
+    [OverlayDataAttributes.endingStyle]?: boolean;
+}
+interface OverlayState {
+    playing: boolean;
+    paused: boolean;
+    ended: boolean;
+    waiting: boolean;
+    seeking: boolean;
+    fullscreen: boolean;
+    pictureInPicture: boolean;
+    /** Whether the overlay is currently visible (opposite of idle) */
+    open: boolean;
+}
+declare const Overlay: React.ForwardRefExoticComponent<Omit<OverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare namespace Overlay {
+    type Props = OverlayProps;
+    type State = OverlayState;
+    type RenderProps = OverlayRenderProps;
+}
+
+declare enum PictureInPictureButtonDataAttributes {
+    /** Applied when in picture-in-picture mode. */
+    pip = "data-pip",
+    /** Applied when picture-in-picture is supported. */
+    supported = "data-supported"
+}
+
+interface PictureInPictureButtonProps extends React.ComponentPropsWithRef<'button'> {
+    render?: RenderProp<PictureInPictureButtonRenderProps, PictureInPictureButtonState>;
+}
+interface PictureInPictureButtonRenderProps {
+    ref: React.Ref<HTMLButtonElement>;
+    type: 'button';
+    'aria-label': string;
+    'aria-pressed': boolean;
+    disabled: boolean;
+    [PictureInPictureButtonDataAttributes.pip]?: boolean;
+    [PictureInPictureButtonDataAttributes.supported]?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+interface PictureInPictureButtonState {
+    pictureInPicture: boolean;
+    supported: boolean;
+}
+declare const PictureInPictureButton: React.ForwardRefExoticComponent<Omit<PictureInPictureButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare namespace PictureInPictureButton {
+    type Props = PictureInPictureButtonProps;
+    type State = PictureInPictureButtonState;
+}
+
+declare enum PlayButtonDataAttributes {
+    /** Applied when the video is playing. */
+    playing = "data-playing",
+    /** Applied when the video is paused. */
+    paused = "data-paused",
+    /** Applied when the video has ended. */
+    ended = "data-ended",
+    /** Applied when the video is buffering/waiting for data. */
+    waiting = "data-waiting"
+}
+
+interface PlayButtonProps extends Omit<React.ComponentPropsWithRef<'button'>, 'children'> {
+    render?: RenderProp<PlayButtonRenderProps, PlayButtonState>;
+    children?: React.ReactNode;
+}
+interface PlayButtonRenderProps {
+    ref: React.Ref<HTMLButtonElement>;
+    type: 'button';
+    'aria-label': string;
+    [PlayButtonDataAttributes.playing]?: boolean;
+    [PlayButtonDataAttributes.paused]?: boolean;
+    [PlayButtonDataAttributes.ended]?: boolean;
+    [PlayButtonDataAttributes.waiting]?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+interface PlayButtonState {
+    playing: boolean;
+    paused: boolean;
+    ended: boolean;
+    waiting: boolean;
+}
+declare const PlayButton: React.ForwardRefExoticComponent<Omit<PlayButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare namespace PlayButton {
+    type Props = PlayButtonProps;
+    type State = PlayButtonState;
+    type RenderProps = PlayButtonRenderProps;
+}
+
+declare enum PlaybackRateButtonDataAttributes {
+    /** The current playback rate value. */
+    rate = "data-rate"
+}
+
+interface PlaybackRateButtonProps extends React.ComponentPropsWithRef<'button'> {
+    /**
+     * Available playback rates to cycle through.
+     * @default [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
+     */
+    rates?: readonly number[];
+    render?: RenderProp<PlaybackRateButtonRenderProps, PlaybackRateButtonState>;
+}
+interface PlaybackRateButtonRenderProps {
+    ref: React.Ref<HTMLButtonElement>;
+    type: 'button';
+    'aria-label': string;
+    [PlaybackRateButtonDataAttributes.rate]: number;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+interface PlaybackRateButtonState {
+    playbackRate: number;
+    rates: readonly number[];
+}
+declare const PlaybackRateButton: React.ForwardRefExoticComponent<Omit<PlaybackRateButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare namespace PlaybackRateButton {
+    type Props = PlaybackRateButtonProps;
+    type State = PlaybackRateButtonState;
+}
+
+declare enum PlaybackRateMenuDataAttributes {
+    /** The current playback rate value. */
+    rate = "data-rate"
+}
+
+interface PlaybackRateMenuProps extends React.ComponentPropsWithRef<'div'> {
+    /**
+     * Available playback rates.
+     * @default [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]
+     */
+    rates?: readonly number[];
+    render?: RenderProp<PlaybackRateMenuRenderProps, PlaybackRateMenuState>;
+}
+interface PlaybackRateMenuRenderProps {
+    ref: React.Ref<HTMLDivElement>;
+    role: 'menu';
+    'aria-label': string;
+    [PlaybackRateMenuDataAttributes.rate]: number;
+}
+interface PlaybackRateMenuState {
+    playbackRate: number;
+    rates: readonly number[];
+}
+interface PlaybackRateMenuItemProps extends React.ComponentPropsWithRef<'button'> {
+    rate: number;
+}
+declare const PlaybackRateMenuItem: React.ForwardRefExoticComponent<Omit<PlaybackRateMenuItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const PlaybackRateMenu: React.ForwardRefExoticComponent<Omit<PlaybackRateMenuProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare namespace PlaybackRateMenu {
+    type Props = PlaybackRateMenuProps;
+    type State = PlaybackRateMenuState;
+    type ItemProps = PlaybackRateMenuItemProps;
+}
+
+interface PortalProps {
+    children: React.ReactNode;
+    /**
+     * Target container for the portal.
+     * @default document.body
+     */
+    container?: Element | null;
+}
+declare function Portal(props: PortalProps): React.ReactPortal | null;
+declare namespace Portal {
+    type Props = PortalProps;
+}
+
+declare enum PosterDataAttributes {
+    /** Applied while the poster image is loading. */
+    loading = "data-loading",
+    /** Applied when the poster image has loaded. */
+    loaded = "data-loaded",
+    /** Applied on the first frame when entering. Use for CSS enter animations. */
+    startingStyle = "data-starting-style",
+    /** Applied during exit animation. Use for CSS exit animations. */
+    endingStyle = "data-ending-style"
+}
+
+interface PosterProps extends Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
+    /**
+     * Keep the element always mounted in the DOM, even when loaded.
+     * Only needed for JavaScript animation libraries (e.g., Framer Motion).
+     * CSS transitions and animations work automatically without this.
+     * @default false
+     */
+    keepMounted?: boolean;
+    render?: RenderProp<PosterRenderProps, PosterState>;
+    children?: React.ReactNode;
+}
+interface PosterRenderProps {
+    ref: React.Ref<HTMLDivElement>;
+    'aria-hidden': true;
+    [PosterDataAttributes.loading]?: boolean;
+    [PosterDataAttributes.loaded]?: boolean;
+    [PosterDataAttributes.startingStyle]?: boolean;
+    [PosterDataAttributes.endingStyle]?: boolean;
+}
+interface PosterState {
+    loading: boolean;
+    loaded: boolean;
+    transitionStatus: 'starting' | 'ending' | undefined;
+}
+declare const Poster: React.ForwardRefExoticComponent<Omit<PosterProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare namespace Poster {
+    type Props = PosterProps;
+    type State = PosterState;
+    type RenderProps = PosterRenderProps;
+}
+
+declare enum QualityMenuDataAttributes {
+    /** The current quality label. */
+    quality = "data-quality"
+}
+
+interface QualityMenuProps extends React.ComponentPropsWithRef<'div'> {
+    render?: RenderProp<QualityMenuRenderProps, QualityMenuState>;
+}
+interface QualityMenuRenderProps {
+    ref: React.Ref<any>;
+    role: 'menu';
+    'aria-label': string;
+    [QualityMenuDataAttributes.quality]?: string;
+}
+interface QualityMenuState {
+    qualities: VideoQuality[];
+    activeQuality: VideoQuality | null;
+}
+interface QualityMenuItemProps extends React.ComponentPropsWithRef<'button'> {
+    quality: VideoQuality;
+}
+declare const QualityMenuItem: React.ForwardRefExoticComponent<Omit<QualityMenuItemProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const QualityMenu: React.ForwardRefExoticComponent<Omit<QualityMenuProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare namespace QualityMenu {
+    type Props = QualityMenuProps;
+    type State = QualityMenuState;
+    type ItemProps = QualityMenuItemProps;
+}
+
+declare enum RootDataAttributes {
+    /** Applied when the video is playing. */
+    playing = "data-playing",
+    /** Applied when the video is paused. */
+    paused = "data-paused",
+    /** Applied when the video has ended. */
+    ended = "data-ended",
+    /** Applied when the video is buffering/loading. */
+    waiting = "data-waiting",
+    /** Applied when the video is seeking to a new position. */
+    seeking = "data-seeking",
+    /** Applied when the player is in fullscreen mode. */
+    fullscreen = "data-fullscreen",
+    /** Applied when the video is in picture-in-picture mode. */
+    pip = "data-pip",
+    /** Applied when the audio is muted. */
+    muted = "data-muted",
+    /** Applied when the player is idle (no user interaction). */
+    idle = "data-idle"
+}
+
+declare enum SeekSliderCssVars {
+    /** Current playback progress as a percentage (e.g., "45%"). */
+    progress = "--seek-progress",
+    /** Buffered progress as a percentage (e.g., "80%"). */
+    buffered = "--seek-buffered",
+    /** Current playback time in seconds. */
+    currentTime = "--seek-current-time",
+    /** Total video duration in seconds. */
+    duration = "--seek-duration",
+    /** Hover position as a percentage (e.g., "60%"). Only set when hovering. */
+    hoverProgress = "--seek-hover-progress",
+    /** Hover time in seconds. Only set when hovering. */
+    hoverTime = "--seek-hover-time"
+}
+
+declare enum SeekSliderDataAttributes {
+    /** Applied when the video is actively seeking. */
+    seeking = "data-seeking",
+    /** Applied when the pointer is hovering over the slider. */
+    hovering = "data-hovering",
+    /** Applied when the pointer is pressed down on the slider. */
+    pressing = "data-pressing",
+    /** Applied when the user is actively dragging the slider thumb. */
+    dragging = "data-dragging"
+}
+
+declare enum SeekSliderPreviewThumbDataAttributes {
+    /** Applied when the preview thumb is visible (hovering over slider). */
+    open = "data-open",
+    /** Applied when the preview thumb is hidden (not hovering). */
+    closed = "data-closed",
+    /** Applied on the first frame when entering. Use for CSS enter animations. */
+    startingStyle = "data-starting-style",
+    /** Applied during exit animation. Use for CSS exit animations. */
+    endingStyle = "data-ending-style"
+}
+
+interface SeekSliderProps extends Omit<React.ComponentPropsWithRef<typeof Slider.Root>, 'value' | 'onValueChange' | 'min' | 'max' | 'children' | 'render'> {
+    render?: RenderProp<SeekSliderRenderProps, SeekSliderState>;
+    children?: React.ReactNode;
+}
+interface SeekSliderRenderProps {
+    [SeekSliderDataAttributes.seeking]?: boolean;
+    [SeekSliderDataAttributes.hovering]?: boolean;
+    [SeekSliderDataAttributes.pressing]?: boolean;
+    [SeekSliderDataAttributes.dragging]?: boolean;
+    style: React.CSSProperties;
+}
+interface SeekSliderState {
+    currentTime: number;
+    duration: number;
+    progress: number;
+    seeking: boolean;
+    pressing: boolean;
+    dragging: boolean;
+    hoverTime: number | null;
+    hoverProgress: number | null;
+}
+declare const SeekSliderControl: React.ForwardRefExoticComponent<_base_ui_react_slider.SliderControlProps & React.RefAttributes<HTMLDivElement>>;
+interface SeekSliderTrackProps extends Omit<React.ComponentPropsWithRef<typeof Slider.Track>, 'render' | 'children'> {
+    render?: RenderProp<SeekSliderTrackRenderProps, SeekSliderTrackState>;
+    children?: React.ReactNode;
+}
+interface SeekSliderTrackRenderProps {
+    ref: React.Ref<any>;
+    style: React.CSSProperties;
+}
+type SeekSliderTrackState = {};
+interface SeekSliderProgressProps extends Omit<React.ComponentPropsWithRef<typeof Slider.Indicator>, 'render' | 'children'> {
+    render?: RenderProp<SeekSliderProgressRenderProps, SeekSliderProgressState>;
+    children?: React.ReactNode;
+}
+interface SeekSliderProgressRenderProps {
+    ref: React.Ref<any>;
+    style: React.CSSProperties;
+}
+interface SeekSliderProgressState {
+    progress: number;
+}
+interface SeekSliderThumbProps extends Omit<React.ComponentPropsWithRef<typeof Slider.Thumb>, 'render' | 'children'> {
+    render?: RenderProp<SeekSliderThumbRenderProps, SeekSliderThumbState>;
+    children?: React.ReactNode;
+}
+interface SeekSliderThumbRenderProps {
+    ref: React.Ref<any>;
+    style: React.CSSProperties;
+}
+type SeekSliderThumbState = {};
+interface SeekSliderBufferedProps extends Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
+    render?: RenderProp<SeekSliderBufferedRenderProps, SeekSliderBufferedState>;
+    children?: React.ReactNode;
+}
+interface SeekSliderBufferedRenderProps {
+    ref: React.Ref<HTMLDivElement>;
+    style: React.CSSProperties;
+}
+interface SeekSliderBufferedState {
+    bufferedPercentage: number;
+}
+interface SeekSliderPreviewThumbProps extends Omit<React.ComponentPropsWithRef<'span'>, 'children'> {
+    keepMounted?: boolean;
+    render?: RenderProp<SeekSliderPreviewThumbRenderProps, SeekSliderPreviewThumbState>;
+    children?: React.ReactNode;
+}
+interface SeekSliderPreviewThumbRenderProps {
+    ref: React.Ref<any>;
+    style: React.CSSProperties;
+    [SeekSliderPreviewThumbDataAttributes.open]?: boolean;
+    [SeekSliderPreviewThumbDataAttributes.closed]?: boolean;
+    [SeekSliderPreviewThumbDataAttributes.startingStyle]?: boolean;
+    [SeekSliderPreviewThumbDataAttributes.endingStyle]?: boolean;
+}
+interface SeekSliderPreviewThumbState {
+    open: boolean;
+    transitionStatus: 'starting' | 'ending' | undefined;
+    hoverProgress: number;
+}
+interface SeekSliderHoverProps extends Omit<React.ComponentPropsWithRef<'div'>, 'children'> {
+    render?: RenderProp<SeekSliderHoverRenderProps, SeekSliderHoverState>;
+    children?: React.ReactNode;
+}
+interface SeekSliderHoverRenderProps {
+    ref: React.Ref<HTMLDivElement>;
+    style: React.CSSProperties;
+    'data-hovering'?: boolean;
+}
+interface SeekSliderHoverState {
+    hovering: boolean;
+    hoverProgress: number | null;
+    hoverTime: number | null;
+}
+interface SeekSliderPreviewTooltipPortalProps {
+    children: React.ReactNode;
+    /** Portal container. Defaults to the VideoPlayer root element. */
+    container?: Element | null;
+}
+declare function SeekSliderPreviewTooltipPortal({ children, container, }: SeekSliderPreviewTooltipPortalProps): React.ReactPortal | null;
+interface SeekSliderPreviewTooltipPositionerProps extends React.ComponentPropsWithRef<'div'> {
+    /** Offset from the anchor (thumb) in pixels (default: 8) */
+    sideOffset?: number;
+    /** Padding from collision boundary edges (default: 0) */
+    collisionPadding?: Padding;
+    /** Custom collision boundary element(s) */
+    collisionBoundary?: Element | Element[];
+    /** Keep mounted in DOM even when closed (default: false) */
+    keepMounted?: boolean;
+    children?: React.ReactNode;
+}
+declare const SeekSliderPreviewTooltipPositioner: React.ForwardRefExoticComponent<Omit<SeekSliderPreviewTooltipPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface SeekSliderPreviewTooltipPopupProps extends React.ComponentPropsWithRef<'div'> {
+    children?: React.ReactNode;
+}
+declare const SeekSliderPreviewTooltipPopup: React.ForwardRefExoticComponent<Omit<SeekSliderPreviewTooltipPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface SeekSliderPreviewTooltipProps extends Omit<SeekSliderPreviewTooltipPopupProps, 'ref'> {
+    /** Offset from the anchor (thumb) in pixels (default: 8) */
+    sideOffset?: number;
+    /** Padding from collision boundary edges (default: 0) */
+    collisionPadding?: Padding;
+    /** Custom collision boundary element(s) */
+    collisionBoundary?: Element | Element[];
+    /** Keep mounted in DOM even when closed (default: false) */
+    keepMounted?: boolean;
+    /** Portal container element */
+    container?: Element | null;
+}
+declare const SeekSlider: React.ForwardRefExoticComponent<Omit<SeekSliderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare namespace SeekSlider {
+    type Props = SeekSliderProps;
+    type State = SeekSliderState;
+    type RenderProps = SeekSliderRenderProps;
+}
+declare const SeekSliderTrack: React.ForwardRefExoticComponent<Omit<SeekSliderTrackProps, "ref"> & React.RefAttributes<HTMLElement>>;
+declare namespace SeekSliderTrack {
+    type Props = SeekSliderTrackProps;
+    type State = SeekSliderTrackState;
+    type RenderProps = SeekSliderTrackRenderProps;
+}
+declare const SeekSliderProgress: React.ForwardRefExoticComponent<Omit<SeekSliderProgressProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare namespace SeekSliderProgress {
+    type Props = SeekSliderProgressProps;
+    type State = SeekSliderProgressState;
+    type RenderProps = SeekSliderProgressRenderProps;
+}
+declare const SeekSliderThumb: React.ForwardRefExoticComponent<Omit<SeekSliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare namespace SeekSliderThumb {
+    type Props = SeekSliderThumbProps;
+    type State = SeekSliderThumbState;
+    type RenderProps = SeekSliderThumbRenderProps;
+}
+declare const SeekSliderBuffered: React.ForwardRefExoticComponent<Omit<SeekSliderBufferedProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare namespace SeekSliderBuffered {
+    type Props = SeekSliderBufferedProps;
+    type State = SeekSliderBufferedState;
+    type RenderProps = SeekSliderBufferedRenderProps;
+}
+declare const SeekSliderPreviewThumb: React.ForwardRefExoticComponent<Omit<SeekSliderPreviewThumbProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare namespace SeekSliderPreviewThumb {
+    type Props = SeekSliderPreviewThumbProps;
+    type State = SeekSliderPreviewThumbState;
+    type RenderProps = SeekSliderPreviewThumbRenderProps;
+}
+declare const SeekSliderHover: React.ForwardRefExoticComponent<Omit<SeekSliderHoverProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare namespace SeekSliderHover {
+    type Props = SeekSliderHoverProps;
+    type State = SeekSliderHoverState;
+    type RenderProps = SeekSliderHoverRenderProps;
+}
+declare function SeekSliderPreviewTooltip({ sideOffset, collisionPadding, collisionBoundary, keepMounted, container, children, ...popupProps }: SeekSliderPreviewTooltipProps): react_jsx_runtime.JSX.Element;
+declare namespace SeekSliderPreviewTooltip {
+    var Portal: typeof SeekSliderPreviewTooltipPortal;
+    var Positioner: React.ForwardRefExoticComponent<Omit<SeekSliderPreviewTooltipPositionerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    var Popup: React.ForwardRefExoticComponent<Omit<SeekSliderPreviewTooltipPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+}
+declare namespace SeekSliderPreviewTooltip {
+    type Props = SeekSliderPreviewTooltipProps;
+    type PortalProps = SeekSliderPreviewTooltipPortalProps;
+    type PositionerProps = SeekSliderPreviewTooltipPositionerProps;
+    type PopupProps = SeekSliderPreviewTooltipPopupProps;
+}
+
+declare enum ThumbnailDataAttributes {
+    loading = "data-loading",
+    ready = "data-ready",
+    error = "data-error"
+}
+
+interface ThumbnailProps extends Omit<React.ComponentPropsWithRef<'canvas'>, 'children'> {
+    /**
+     * The time in seconds to capture the thumbnail from.
+     * If not provided, uses the current hoverTime from context.
+     */
+    time?: number | null;
+    /**
+     * Crossorigin attribute for the hidden video element.
+     * Should match the main video's crossOrigin attribute.
+     * @default 'anonymous'
+     */
+    crossOrigin?: '' | 'anonymous' | 'use-credentials';
+    /**
+     * Render prop for custom rendering.
+     */
+    render?: RenderProp<ThumbnailRenderProps, ThumbnailState>;
+    children?: React.ReactNode;
+}
+interface ThumbnailRenderProps {
+    ref: React.Ref<HTMLCanvasElement>;
+    width: number;
+    height: number;
+    [ThumbnailDataAttributes.loading]?: boolean;
+    [ThumbnailDataAttributes.ready]?: boolean;
+    [ThumbnailDataAttributes.error]?: boolean;
+}
+interface ThumbnailState {
+    loading: boolean;
+    ready: boolean;
+    error: boolean;
+    time: number | null;
+    /** Natural width of the video */
+    videoWidth: number;
+    /** Natural height of the video */
+    videoHeight: number;
+}
+declare const Thumbnail: React.ForwardRefExoticComponent<Omit<ThumbnailProps, "ref"> & React.RefAttributes<HTMLCanvasElement>>;
+declare namespace Thumbnail {
+    type Props = ThumbnailProps;
+    type State = ThumbnailState;
+    type RenderProps = ThumbnailRenderProps;
+}
+
+declare enum TimeDisplayDataAttributes {
+    /** Applied when the seek slider is being hovered and hover time is available. */
+    hovering = "data-hovering"
+}
+
+type TimeDisplayFormat = 'current' | 'duration' | 'remaining' | 'current / duration' | 'current / remaining' | 'hover';
+interface TimeDisplayProps extends React.ComponentPropsWithRef<'span'> {
+    format?: TimeDisplayFormat;
+    /**
+     * When true, reserves space for the maximum possible width based on
+     * the duration format, preventing layout shift during playback/seeking.
+     * @default true
+     */
+    fixedWidth?: boolean;
+    /**
+     * Alignment of the text within the reserved space when fixedWidth is true.
+     * @default 'left'
+     */
+    align?: 'left' | 'center' | 'right';
+    render?: RenderProp<TimeDisplayRenderProps, TimeDisplayState>;
+}
+interface TimeDisplayRenderProps {
+    ref: React.Ref<HTMLElement>;
+    style: React.CSSProperties;
+    [TimeDisplayDataAttributes.hovering]?: boolean;
+}
+interface TimeDisplayState {
+    currentTime: number;
+    duration: number;
+    remaining: number;
+    hoverTime: number | null;
+    hovering: boolean;
+    formattedCurrent: string;
+    formattedDuration: string;
+    formattedRemaining: string;
+    formattedHover: string | null;
+}
+declare const TimeDisplay: React.ForwardRefExoticComponent<Omit<TimeDisplayProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+declare namespace TimeDisplay {
+    type Props = TimeDisplayProps;
+    type State = TimeDisplayState;
+    type Format = TimeDisplayFormat;
+}
+
+interface TrackProps extends Omit<React.ComponentPropsWithRef<'track'>, 'kind'> {
+    /** Track kind (defaults to 'captions') */
+    kind?: TextTrackKind;
+    /** Source URL for the track file (.vtt) */
+    src: string;
+    /** Human-readable label displayed in caption menus */
+    label: string;
+    /** Language code (e.g., 'en', 'es', 'fr') */
+    srcLang: string;
+    /** Set as the default track (auto-enabled) */
+    default?: boolean;
+}
+/**
+ * Wraps native <track> element and registers with VideoPlayer context.
+ * Must be used as a child of VideoPlayer.Video.
+ *
+ * @example
+ * <VideoPlayer.Video>
+ *   <VideoPlayer.Track
+ *     kind="captions"
+ *     src="/captions-en.vtt"
+ *     label="English"
+ *     srcLang="en"
+ *   />
+ * </VideoPlayer.Video>
+ */
+declare const Track: React.ForwardRefExoticComponent<Omit<TrackProps, "ref"> & React.RefAttributes<HTMLTrackElement>>;
+declare namespace Track {
+    type Props = TrackProps;
+}
+
+interface VideoProps extends Omit<React.ComponentPropsWithRef<'video'>, 'onTimeUpdate' | 'onDurationChange' | 'onProgress' | 'onPlay' | 'onPause' | 'onEnded' | 'onWaiting' | 'onCanPlay' | 'onSeeking' | 'onSeeked' | 'onVolumeChange' | 'onLoadedMetadata'> {
+    /**
+     * Toggle play/pause when clicking on the video.
+     * @default true
+     */
+    toggleOnClick?: boolean;
+}
+interface VideoState {
+    playing: boolean;
+    paused: boolean;
+    ended: boolean;
+    waiting: boolean;
+    seeking: boolean;
+}
+declare const Video: React.ForwardRefExoticComponent<Omit<VideoProps, "ref"> & React.RefAttributes<HTMLVideoElement>>;
+declare namespace Video {
+    type Props = VideoProps;
+    type State = VideoState;
+}
+
+declare enum VolumeSliderCssVars {
+    /** Raw volume value (0-1). */
+    volume = "--volume",
+    /** Volume as a percentage (e.g., "75%"). */
+    volumePercentage = "--volume-percentage"
+}
+
+declare enum VolumeSliderDataAttributes {
+    /** Applied when the audio is muted. */
+    muted = "data-muted",
+    /** The current volume level (0-1). */
+    volume = "data-volume",
+    /** Applied when the slider is being pressed. */
+    pressing = "data-pressing",
+    /** Applied when the slider is being dragged after pressing. */
+    dragging = "data-dragging"
+}
+
+interface VolumeSliderProps extends Omit<React.ComponentPropsWithRef<typeof Slider.Root>, 'value' | 'onValueChange' | 'min' | 'max' | 'step' | 'render'> {
+    render?: RenderProp<VolumeSliderRenderProps, VolumeSliderState>;
+}
+interface VolumeSliderRenderProps {
+    [VolumeSliderDataAttributes.muted]?: boolean;
+    [VolumeSliderDataAttributes.volume]: number;
+    [VolumeSliderDataAttributes.pressing]?: boolean;
+    [VolumeSliderDataAttributes.dragging]?: boolean;
+    style: React.CSSProperties;
+}
+interface VolumeSliderState {
+    volume: number;
+    muted: boolean;
+    percentage: number;
+    pressing: boolean;
+    dragging: boolean;
+}
+declare const VolumeSliderControl: React.ForwardRefExoticComponent<_base_ui_react_slider.SliderControlProps & React.RefAttributes<HTMLDivElement>>;
+interface VolumeSliderTrackProps extends React.ComponentPropsWithRef<typeof Slider.Track> {
+}
+declare const VolumeSliderTrack: React.ForwardRefExoticComponent<Omit<VolumeSliderTrackProps, "ref"> & React.RefAttributes<HTMLElement>>;
+interface VolumeSliderRangeProps extends React.ComponentPropsWithRef<typeof Slider.Indicator> {
+}
+declare const VolumeSliderRange: React.ForwardRefExoticComponent<Omit<VolumeSliderRangeProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface VolumeSliderThumbProps extends React.ComponentPropsWithRef<typeof Slider.Thumb> {
+}
+declare const VolumeSliderThumb: React.ForwardRefExoticComponent<Omit<VolumeSliderThumbProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const VolumeSlider: React.ForwardRefExoticComponent<Omit<VolumeSliderProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare namespace VolumeSlider {
+    type Props = VolumeSliderProps;
+    type State = VolumeSliderState;
+}
+
+type TransitionStatus = 'starting' | 'ending' | undefined;
+interface UseTransitionStatusOptions {
+    /**
+     * Whether the element should be visible/open.
+     */
+    open: boolean;
+    /**
+     * Keep the element always mounted in the DOM, even when closed.
+     * Only needed for JavaScript animation libraries (e.g., Framer Motion).
+     * CSS transitions and animations work automatically without this.
+     * @default false
+     */
+    keepMounted?: boolean;
+}
+interface UseTransitionStatusReturn {
+    /**
+     * Whether the element should be rendered in the DOM.
+     * Stays true during exit animations.
+     */
+    mounted: boolean;
+    /**
+     * Current transition status:
+     * - 'starting': First frame of enter animation
+     * - 'ending': Exit animation in progress
+     * - undefined: Idle state
+     */
+    transitionStatus: TransitionStatus;
+    /**
+     * Ref to attach to the animated element.
+     * Used to detect when CSS animations/transitions complete.
+     */
+    elementRef: React.RefObject<HTMLElement | null>;
+}
+declare function useTransitionStatus(options: UseTransitionStatusOptions): UseTransitionStatusReturn;
+
+declare const index_parts_BufferedIndicator: typeof BufferedIndicator;
+declare const index_parts_Captions: typeof Captions;
+declare const index_parts_CaptionsButton: typeof CaptionsButton;
+type index_parts_CaptionsDataAttributes = CaptionsDataAttributes;
+declare const index_parts_CaptionsDataAttributes: typeof CaptionsDataAttributes;
+declare const index_parts_CaptionsMenu: typeof CaptionsMenu;
+declare const index_parts_CaptionsMenuItem: typeof CaptionsMenuItem;
+declare const index_parts_Controls: typeof Controls;
+type index_parts_ControlsDataAttributes = ControlsDataAttributes;
+declare const index_parts_ControlsDataAttributes: typeof ControlsDataAttributes;
+declare const index_parts_FullscreenButton: typeof FullscreenButton;
+declare const index_parts_MuteButton: typeof MuteButton;
+declare const index_parts_Overlay: typeof Overlay;
+type index_parts_OverlayDataAttributes = OverlayDataAttributes;
+declare const index_parts_OverlayDataAttributes: typeof OverlayDataAttributes;
+declare const index_parts_PictureInPictureButton: typeof PictureInPictureButton;
+declare const index_parts_PlayButton: typeof PlayButton;
+type index_parts_PlaybackIntent = PlaybackIntent;
+declare const index_parts_PlaybackRateButton: typeof PlaybackRateButton;
+declare const index_parts_PlaybackRateMenu: typeof PlaybackRateMenu;
+declare const index_parts_PlaybackRateMenuItem: typeof PlaybackRateMenuItem;
+type index_parts_PlaybackStatus = PlaybackStatus;
+declare const index_parts_Portal: typeof Portal;
+declare const index_parts_Poster: typeof Poster;
+declare const index_parts_QualityMenu: typeof QualityMenu;
+declare const index_parts_QualityMenuItem: typeof QualityMenuItem;
+type index_parts_RenderProp<Props = Record<string, unknown>, State = Record<string, unknown>> = RenderProp<Props, State>;
+type index_parts_RootDataAttributes = RootDataAttributes;
+declare const index_parts_RootDataAttributes: typeof RootDataAttributes;
+declare const index_parts_SeekSlider: typeof SeekSlider;
+declare const index_parts_SeekSliderBuffered: typeof SeekSliderBuffered;
+declare const index_parts_SeekSliderControl: typeof SeekSliderControl;
+type index_parts_SeekSliderCssVars = SeekSliderCssVars;
+declare const index_parts_SeekSliderCssVars: typeof SeekSliderCssVars;
+type index_parts_SeekSliderDataAttributes = SeekSliderDataAttributes;
+declare const index_parts_SeekSliderDataAttributes: typeof SeekSliderDataAttributes;
+declare const index_parts_SeekSliderHover: typeof SeekSliderHover;
+declare const index_parts_SeekSliderPreviewThumb: typeof SeekSliderPreviewThumb;
+type index_parts_SeekSliderPreviewThumbDataAttributes = SeekSliderPreviewThumbDataAttributes;
+declare const index_parts_SeekSliderPreviewThumbDataAttributes: typeof SeekSliderPreviewThumbDataAttributes;
+declare const index_parts_SeekSliderPreviewTooltip: typeof SeekSliderPreviewTooltip;
+declare const index_parts_SeekSliderPreviewTooltipPopup: typeof SeekSliderPreviewTooltipPopup;
+declare const index_parts_SeekSliderPreviewTooltipPortal: typeof SeekSliderPreviewTooltipPortal;
+declare const index_parts_SeekSliderPreviewTooltipPositioner: typeof SeekSliderPreviewTooltipPositioner;
+declare const index_parts_SeekSliderProgress: typeof SeekSliderProgress;
+declare const index_parts_SeekSliderThumb: typeof SeekSliderThumb;
+declare const index_parts_SeekSliderTrack: typeof SeekSliderTrack;
+declare const index_parts_Thumbnail: typeof Thumbnail;
+type index_parts_ThumbnailDataAttributes = ThumbnailDataAttributes;
+declare const index_parts_ThumbnailDataAttributes: typeof ThumbnailDataAttributes;
+declare const index_parts_TimeDisplay: typeof TimeDisplay;
+type index_parts_TimeDisplayDataAttributes = TimeDisplayDataAttributes;
+declare const index_parts_TimeDisplayDataAttributes: typeof TimeDisplayDataAttributes;
+declare const index_parts_Track: typeof Track;
+type index_parts_TrackInfo = TrackInfo;
+type index_parts_TransitionStatus = TransitionStatus;
+type index_parts_UseTransitionStatusOptions = UseTransitionStatusOptions;
+type index_parts_UseTransitionStatusReturn = UseTransitionStatusReturn;
+declare const index_parts_Video: typeof Video;
+type index_parts_VideoPlayerActions = VideoPlayerActions;
+type index_parts_VideoPlayerContextValue = VideoPlayerContextValue;
+type index_parts_VideoPlayerRootProps = VideoPlayerRootProps;
+type index_parts_VideoPlayerState = VideoPlayerState;
+type index_parts_VideoQuality = VideoQuality;
+type index_parts_VideoTextTrack = VideoTextTrack;
+declare const index_parts_VolumeSlider: typeof VolumeSlider;
+declare const index_parts_VolumeSliderControl: typeof VolumeSliderControl;
+type index_parts_VolumeSliderCssVars = VolumeSliderCssVars;
+declare const index_parts_VolumeSliderCssVars: typeof VolumeSliderCssVars;
+type index_parts_VolumeSliderDataAttributes = VolumeSliderDataAttributes;
+declare const index_parts_VolumeSliderDataAttributes: typeof VolumeSliderDataAttributes;
+declare const index_parts_VolumeSliderRange: typeof VolumeSliderRange;
+declare const index_parts_VolumeSliderThumb: typeof VolumeSliderThumb;
+declare const index_parts_VolumeSliderTrack: typeof VolumeSliderTrack;
+declare const index_parts_useTransitionStatus: typeof useTransitionStatus;
+declare const index_parts_useVideoPlayer: typeof useVideoPlayer;
+declare namespace index_parts {
+  export { index_parts_BufferedIndicator as BufferedIndicator, index_parts_Captions as Captions, index_parts_CaptionsButton as CaptionsButton, index_parts_CaptionsDataAttributes as CaptionsDataAttributes, index_parts_CaptionsMenu as CaptionsMenu, index_parts_CaptionsMenuItem as CaptionsMenuItem, index_parts_Controls as Controls, index_parts_ControlsDataAttributes as ControlsDataAttributes, index_parts_FullscreenButton as FullscreenButton, index_parts_MuteButton as MuteButton, index_parts_Overlay as Overlay, index_parts_OverlayDataAttributes as OverlayDataAttributes, index_parts_PictureInPictureButton as PictureInPictureButton, index_parts_PlayButton as PlayButton, type index_parts_PlaybackIntent as PlaybackIntent, index_parts_PlaybackRateButton as PlaybackRateButton, index_parts_PlaybackRateMenu as PlaybackRateMenu, index_parts_PlaybackRateMenuItem as PlaybackRateMenuItem, type index_parts_PlaybackStatus as PlaybackStatus, index_parts_Portal as Portal, index_parts_Poster as Poster, index_parts_QualityMenu as QualityMenu, index_parts_QualityMenuItem as QualityMenuItem, type index_parts_RenderProp as RenderProp, VideoPlayerRoot as Root, index_parts_RootDataAttributes as RootDataAttributes, index_parts_SeekSlider as SeekSlider, index_parts_SeekSliderBuffered as SeekSliderBuffered, index_parts_SeekSliderControl as SeekSliderControl, index_parts_SeekSliderCssVars as SeekSliderCssVars, index_parts_SeekSliderDataAttributes as SeekSliderDataAttributes, index_parts_SeekSliderHover as SeekSliderHover, index_parts_SeekSliderPreviewThumb as SeekSliderPreviewThumb, index_parts_SeekSliderPreviewThumbDataAttributes as SeekSliderPreviewThumbDataAttributes, index_parts_SeekSliderPreviewTooltip as SeekSliderPreviewTooltip, index_parts_SeekSliderPreviewTooltipPopup as SeekSliderPreviewTooltipPopup, index_parts_SeekSliderPreviewTooltipPortal as SeekSliderPreviewTooltipPortal, index_parts_SeekSliderPreviewTooltipPositioner as SeekSliderPreviewTooltipPositioner, index_parts_SeekSliderProgress as SeekSliderProgress, index_parts_SeekSliderThumb as SeekSliderThumb, index_parts_SeekSliderTrack as SeekSliderTrack, index_parts_Thumbnail as Thumbnail, index_parts_ThumbnailDataAttributes as ThumbnailDataAttributes, index_parts_TimeDisplay as TimeDisplay, index_parts_TimeDisplayDataAttributes as TimeDisplayDataAttributes, index_parts_Track as Track, type index_parts_TrackInfo as TrackInfo, type index_parts_TransitionStatus as TransitionStatus, type index_parts_UseTransitionStatusOptions as UseTransitionStatusOptions, type index_parts_UseTransitionStatusReturn as UseTransitionStatusReturn, index_parts_Video as Video, type index_parts_VideoPlayerActions as VideoPlayerActions, type index_parts_VideoPlayerContextValue as VideoPlayerContextValue, type index_parts_VideoPlayerRootProps as VideoPlayerRootProps, type index_parts_VideoPlayerState as VideoPlayerState, type index_parts_VideoQuality as VideoQuality, type index_parts_VideoTextTrack as VideoTextTrack, index_parts_VolumeSlider as VolumeSlider, index_parts_VolumeSliderControl as VolumeSliderControl, index_parts_VolumeSliderCssVars as VolumeSliderCssVars, index_parts_VolumeSliderDataAttributes as VolumeSliderDataAttributes, index_parts_VolumeSliderRange as VolumeSliderRange, index_parts_VolumeSliderThumb as VolumeSliderThumb, index_parts_VolumeSliderTrack as VolumeSliderTrack, index_parts_useTransitionStatus as useTransitionStatus, index_parts_useVideoPlayer as useVideoPlayer };
+}
+
+export { type PlaybackIntent, type PlaybackStatus, type RenderProp, index_parts as VideoPlayer, type VideoPlayerActions, type VideoPlayerContextValue, type VideoPlayerExternalActions, type VideoPlayerRootProps, type VideoPlayerRootState, type VideoPlayerState, type VideoQuality, type VideoTextTrack, useVideoPlayer };