@hanifhan1f/vidstack 1.12.13

package/types/components/ui/sliders/slider/slider-controller.d.ts

@@ -0,0 +1,59 @@
+import { ViewController } from 'maverick.js';
+import type { SliderEvents } from './api/events';
+import type { SliderState } from './api/state';
+import { type SliderEventDelegate } from './events-controller';
+import type { SliderOrientation } from './types';
+export interface SliderDelegate extends Omit<SliderEventDelegate, '_getOrientation'> {
+    aria: {
+        valueNow(): number;
+        valueText(): string;
+        valueMin?(): number;
+        valueMax?(): number;
+    };
+}
+export declare class SliderController extends ViewController<SliderControllerProps, SliderState, SliderEvents> {
+    #private;
+    static props: SliderControllerProps;
+    constructor(delegate: SliderDelegate);
+    protected onSetup(): void;
+    protected onAttach(el: HTMLElement): void;
+    protected onConnect(el: HTMLElement): void;
+}
+export interface SliderControllerProps {
+    /**
+     * Whether the slider should be disabled (non-interactive).
+     */
+    disabled: boolean;
+    /**
+     * Provides a hint that the slider is not visible and stops all events and expensive updates to
+     * be more power efficient.
+     */
+    hidden: boolean;
+    /**
+     * The orientation of the slider.
+     */
+    orientation: SliderOrientation;
+    /**
+     * A number that specifies the granularity that the slider value must adhere to.
+     *
+     * A step is an abstract unit that may carry a different type of measure depending on the type of
+     * slider. For example, for the volume slider each step is 1% of volume, and for the time slider
+     * it is 1 second which is a varying percentage depending on the media duration.
+     */
+    step: number;
+    /**
+     * ♿ **ARIA:** A number that specifies the number of steps taken when interacting with
+     * the slider via keyboard.
+     *
+     * A step is an abstract unit that may carry different type of measure depending on the type of
+     * slider. For example, for the volume slider each step is 1% of volume, and for the time slider
+     * it is 1 second which is a varying percentage depending on the media duration.
+     */
+    keyStep: number;
+    /**
+     * ♿ **ARIA:** A number that will be used to multiply the `keyStep` when the `Shift` key
+     * is held down and the slider value is changed by pressing `LeftArrow` or `RightArrow`. Think
+     * of it as `keyStep * shiftKeyMultiplier`.
+     */
+    shiftKeyMultiplier: number;
+}

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

@@ -0,0 +1,39 @@
+import { Component } from 'maverick.js';
+import type { SliderCSSVars } from './api/cssvars';
+import type { SliderEvents } from './api/events';
+import { type SliderState } from './api/state';
+import { type SliderControllerProps } from './slider-controller';
+/**
+ * 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.
+ *
+ * @attr data-dragging - Whether slider thumb is being dragged.
+ * @attr data-pointing - Whether user's pointing device is over slider.
+ * @attr data-active - Whether slider is being interacted with.
+ * @attr data-focus - Whether slider is being keyboard focused.
+ * @attr data-hocus - Whether slider is being keyboard focused or hovered over.
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/slider}
+ */
+export declare class Slider extends Component<SliderProps, SliderState, SliderEvents, SliderCSSVars> {
+    #private;
+    static props: SliderProps;
+    static state: import("maverick.js").State<SliderState>;
+    constructor();
+    protected onSetup(): void;
+}
+export interface SliderProps extends SliderControllerProps {
+    /**
+     * The lowest slider value in the range of permitted values.
+     */
+    min: number;
+    /**
+     * The greatest slider value in the range of permitted values.
+     */
+    max: number;
+    /**
+     * The current slider value.
+     */
+    value: number;
+}

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

@@ -0,0 +1 @@
+export type SliderOrientation = 'horizontal' | 'vertical';

package/types/components/ui/sliders/slider/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function getClampedValue(min: number, max: number, value: number, step: number): number;
+export declare function getValueFromRate(min: number, max: number, rate: number, step: number): number;

package/types/components/ui/sliders/slider-preview.d.ts

@@ -0,0 +1,34 @@
+import { Component } from 'maverick.js';
+import type { SliderOrientation } from './slider/types';
+/**
+ * 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.
+ *
+ * @attr data-visible - Whether the preview is visible.
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/slider#preview}
+ */
+export declare class SliderPreview extends Component<SliderPreviewProps> {
+    #private;
+    static props: SliderPreviewProps;
+    protected onSetup(): void;
+    protected onAttach(el: HTMLElement): void;
+    protected onConnect(el: HTMLElement): void;
+}
+export declare function updateSliderPreviewPlacement(el: HTMLElement, { clamp, offset, orientation, }: {
+    clamp: boolean;
+    offset: number;
+    orientation: SliderOrientation;
+}): void;
+export interface SliderPreviewProps {
+    /**
+     * The distance in pixels between the preview and the slider. You can also set
+     * the CSS variable `--media-slider-preview-offset` to adjust this offset.
+     */
+    offset: number;
+    /**
+     * By default, the preview will be clamped to the left and right of the slider track. If this
+     * is set to `true`, the preview will flow outside of the container when at the edges.
+     */
+    noClamp: boolean;
+}

package/types/components/ui/sliders/slider-thumbnail.d.ts

@@ -0,0 +1,16 @@
+import { Thumbnail } from '../thumbnails/thumbnail';
+/**
+ * Used to display preview thumbnails when the user is hovering or dragging the time slider.
+ * The time ranges in the WebVTT file will automatically be matched based on the current slider
+ * pointer position.
+ *
+ * @attr data-loading - Whether thumbnail image is loading.
+ * @attr data-error - Whether an error occurred loading thumbnail.
+ * @attr data-hidden - Whether thumbnail is not available or failed to load.
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/slider-thumbnail}
+ */
+export declare class SliderThumbnail extends Thumbnail {
+    #private;
+    protected onAttach(el: HTMLElement): void;
+    protected getTime(): number;
+}

package/types/components/ui/sliders/slider-value.d.ts

@@ -0,0 +1,59 @@
+import { Component } from 'maverick.js';
+/**
+ * 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/sliders/slider-value}
+ */
+export declare class SliderValue extends Component<SliderValueProps> {
+    #private;
+    static props: SliderValueProps;
+    protected onSetup(): void;
+    /**
+     * Returns the current value formatted as text based on prop settings.
+     */
+    getValueText(): string;
+}
+export interface SliderValueProps {
+    /**
+     * Whether to use the slider's current value, or pointer value.
+     */
+    type: 'current' | 'pointer';
+    /**
+     * Determines how the value is formatted. By default it will use the most appropriate formatting,
+     * for the time slider that's time, and for volume percent.
+     */
+    format: 'value' | 'percent' | 'time' | null;
+    /**
+     * Whether the time should always show the hours unit, even if the time is less than
+     * 1 hour. Only available if the `format` prop is set to `time`.
+     *
+     * @example `20:30 -> 0:20:35`
+     */
+    showHours: boolean;
+    /**
+     * Whether the time should display milliseconds. Only available if the `format` prop is set to
+     * `time`.
+     */
+    showMs: boolean;
+    /**
+     * Whether the hours unit should be padded with zeroes to a length of 2. Only available if
+     * the `format` prop is set to `time`.
+     *
+     * @example `1:20:03 -> 01:20:03`
+     */
+    padHours: boolean | null;
+    /**
+     * Whether the minutes unit should be padded with zeroes to a length of 2. Setting this to `null`
+     * will pad minutes when hours is >=1. Only available if the `format` prop is set to `time`.
+     *
+     * @example `5:22 -> 05:22`
+     */
+    padMinutes: boolean | null;
+    /**
+     * Round the value when formatted as a percentage to the given number of decimal places. Only
+     * available if `format` prop is `percent`.
+     */
+    decimalPlaces: number;
+}

package/types/components/ui/sliders/slider-video.d.ts

@@ -0,0 +1,73 @@
+import { Component, State } from 'maverick.js';
+import { type DOMEvent } from 'maverick.js/std';
+import type { MediaCrossOrigin } from '../../../core/api/types';
+/**
+ * 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).
+ *
+ * @attr data-loading - Whether the video is loading.
+ * @attr data-error - Whether an error occurred loading video.
+ * @attr data-hidden - Whether the video is not ready or has failed to load.
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/slider-video}
+ */
+export declare class SliderVideo extends Component<SliderVideoProps, SliderVideoState, SliderVideoEvents> {
+    #private;
+    static props: SliderVideoProps;
+    static state: State<SliderVideoState>;
+    get video(): HTMLVideoElement | null;
+    protected onSetup(): void;
+    protected onAttach(el: HTMLElement): void;
+}
+export interface SliderVideoProps {
+    /**
+     * The URL of a media resource to use.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/src}
+     */
+    src: string | null;
+    /**
+     * Defines how the media handles cross-origin requests, thereby enabling the
+     * configuration of the CORS requests for the element's fetched data.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin}
+     */
+    crossOrigin: true | MediaCrossOrigin | null;
+}
+export interface SliderVideoState {
+    video: HTMLVideoElement | null;
+    src: string | null;
+    crossOrigin: MediaCrossOrigin | null;
+    canPlay: boolean;
+    error: ErrorEvent | null;
+    hidden: boolean;
+}
+export interface SliderVideoEvents {
+    'can-play': SliderVideoCanPlayEvent;
+    error: SliderVideoErrorEvent;
+}
+/**
+ * Fired when the user agent can play the media, but estimates that **not enough** data has been
+ * loaded to play the media up to its end without having to stop for further buffering of content.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event}
+ */
+export interface SliderVideoCanPlayEvent extends DOMEvent<void> {
+    target: SliderVideo;
+    /** The `canplay` media event. */
+    readonly trigger: Event;
+}
+/**
+ * Fired when media loading or playback has encountered any issues (for example, a network
+ * connectivity problem). The event detail contains a potential message containing more
+ * information about the error (empty string if nothing available), and a code that identifies
+ * the general type of error that occurred.
+ *
+ * @see {@link https://html.spec.whatwg.org/multipage/media.html#error-codes}
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/error_event}
+ */
+export interface SliderVideoErrorEvent extends DOMEvent<void> {
+    target: SliderVideo;
+    /** The `error` media event. */
+    readonly trigger: Event;
+}

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

@@ -0,0 +1,42 @@
+import { Component } from 'maverick.js';
+import type { MediaRequestEvents } from '../../../core/api/media-request-events';
+import type { SliderCSSVars } from './slider/api/cssvars';
+import type { SliderEvents } from './slider/api/events';
+import { type SliderState } from './slider/api/state';
+import { type SliderControllerProps } from './slider/slider-controller';
+/**
+ * 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.
+ *
+ * @attr data-dragging - Whether slider thumb is being dragged.
+ * @attr data-pointing - Whether user's pointing device is over slider.
+ * @attr data-active - Whether slider is being interacted with.
+ * @attr data-focus - Whether slider is being keyboard focused.
+ * @attr data-hocus - Whether slider is being keyboard focused or hovered over.
+ * @attr data-supported - Whether setting playback rate is supported.
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/speed-slider}
+ */
+export declare class SpeedSlider extends Component<SpeedSliderProps, SpeedSliderState, SpeedSliderEvents, SpeedSliderCSSVars> {
+    #private;
+    static props: SpeedSliderProps;
+    static state: import("maverick.js").State<SliderState>;
+    protected onSetup(): void;
+    protected onAttach(el: HTMLElement): void;
+}
+export interface SpeedSliderProps extends SliderControllerProps {
+    /**
+     * The minimum playback rate.
+     */
+    min: number;
+    /**
+     * The maximum playback rate.
+     */
+    max: number;
+}
+export interface SpeedSliderState extends SliderState {
+}
+export interface SpeedSliderEvents extends SliderEvents, Pick<MediaRequestEvents, 'media-rate-change-request'> {
+}
+export interface SpeedSliderCSSVars extends SliderCSSVars {
+}

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

@@ -0,0 +1,36 @@
+import { Component } from 'maverick.js';
+import type { VTTCue } from 'media-captions';
+/**
+ * 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/sliders/slider-chapters}
+ */
+export declare class SliderChapters extends Component<SliderChaptersProps, {}, SliderChaptersCSSVars> {
+    #private;
+    static props: SliderChaptersProps;
+    get cues(): VTTCue[];
+    get activeCue(): VTTCue | null;
+    get activePointerCue(): VTTCue | null;
+    protected onSetup(): void;
+    protected onAttach(el: HTMLElement): void;
+    protected onConnect(): void;
+    protected onDestroy(): void;
+    setRefs(refs: HTMLElement[]): void;
+}
+export interface SliderChaptersProps {
+    /**
+     * Whether chapters should be disabled.
+     */
+    disabled: boolean;
+}
+export interface SliderChaptersCSSVars {
+    /**
+     * The percentage of the chapter that is filled.
+     */
+    readonly 'chapter-fill': string;
+    /**
+     * The percentage of the chapter that has been buffered.
+     */
+    readonly 'chapter-progress': string;
+}

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

@@ -0,0 +1,56 @@
+import { Component } from 'maverick.js';
+import type { MediaRequestEvents } from '../../../../core/api/media-request-events';
+import type { SliderCSSVars } from '../slider/api/cssvars';
+import type { SliderEvents } from '../slider/api/events';
+import { type SliderState } from '../slider/api/state';
+import { type SliderControllerProps } from '../slider/slider-controller';
+/**
+ * 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.
+ *
+ * @attr data-dragging - Whether slider thumb is being dragged.
+ * @attr data-pointing - Whether user's pointing device is over slider.
+ * @attr data-active - Whether slider is being interacted with.
+ * @attr data-focus - Whether slider is being keyboard focused.
+ * @attr data-hocus - Whether slider is being keyboard focused or hovered over.
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/time-slider}
+ */
+export declare class TimeSlider extends Component<TimeSliderProps, TimeSliderState, TimeSliderEvents, TimeSliderCSSVars> {
+    #private;
+    static props: TimeSliderProps;
+    static state: import("maverick.js").State<SliderState>;
+    constructor();
+    protected onSetup(): void;
+    protected onAttach(el: HTMLElement): void;
+    protected onConnect(el: HTMLElement): void;
+}
+export interface TimeSliderCSSVars extends SliderCSSVars {
+    /**
+     * The percentage of media playback that has been buffered.
+     */
+    readonly 'slider-progress': string;
+}
+export interface TimeSliderProps extends SliderControllerProps {
+    /**
+     * Whether it should request playback to pause while the user is dragging the
+     * thumb. If the media was playing before the dragging starts, the state will be restored by
+     * dispatching a user play request once the dragging ends.
+     */
+    pauseWhileDragging: boolean;
+    /**
+     * The amount of milliseconds to throttle media seeking request events being dispatched.
+     */
+    seekingRequestThrottle: number;
+    /**
+     * Whether touch swiping left or right on the player canvas should activate the time slider. This
+     * gesture makes it easier for touch users to drag anywhere on the player left or right to
+     * seek backwards or forwards, without directly interacting with time slider.
+     */
+    noSwipeGesture: boolean;
+}
+export interface TimeSliderState extends SliderState {
+}
+export interface TimeSliderEvents extends SliderEvents, Pick<MediaRequestEvents, 'media-play-request' | 'media-pause-request' | 'media-seeking-request' | 'media-seek-request' | 'media-live-edge-request'> {
+}

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

@@ -0,0 +1,35 @@
+import { Component } from 'maverick.js';
+import type { MediaRequestEvents } from '../../../core/api/media-request-events';
+import type { SliderCSSVars } from './slider/api/cssvars';
+import type { SliderEvents } from './slider/api/events';
+import { type SliderState } from './slider/api/state';
+import { type SliderControllerProps } from './slider/slider-controller';
+/**
+ * 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.
+ *
+ * @attr data-dragging - Whether slider thumb is being dragged.
+ * @attr data-pointing - Whether user's pointing device is over slider.
+ * @attr data-active - Whether slider is being interacted with.
+ * @attr data-focus - Whether slider is being keyboard focused.
+ * @attr data-hocus - Whether slider is being keyboard focused or hovered over.
+ * @attr data-supported - Whether volume control is supported.
+ * @docs {@link https://www.vidstack.io/docs/player/components/sliders/volume-slider}
+ */
+export declare class VolumeSlider extends Component<VolumeSliderProps, VolumeSliderState, VolumeSliderEvents, VolumeSliderCSSVars> {
+    #private;
+    static props: VolumeSliderProps;
+    static state: import("maverick.js").State<SliderState>;
+    protected onSetup(): void;
+    protected onAttach(el: HTMLElement): void;
+}
+export interface VolumeSliderProps extends SliderControllerProps {
+}
+export interface VolumeSliderState extends SliderState {
+}
+export interface VolumeSliderEvents extends SliderEvents, Pick<MediaRequestEvents, 'media-volume-change-request'> {
+}
+export interface VolumeSliderCSSVars extends SliderCSSVars {
+}

package/types/components/ui/thumbnails/thumbnail-loader.d.ts

@@ -0,0 +1,47 @@
+import { type ReadSignal } from 'maverick.js';
+import { type MediaContext } from '../../../core/api/media-context';
+import type { MediaCrossOrigin } from '../../../core/api/types';
+export declare class ThumbnailsLoader {
+    #private;
+    readonly $images: import("maverick.js").WriteSignal<ThumbnailImage[]>;
+    static create(src: ReadSignal<ThumbnailSrc>, crossOrigin: ReadSignal<MediaCrossOrigin | null>): ThumbnailsLoader;
+    constructor(src: ReadSignal<ThumbnailSrc>, crossOrigin: ReadSignal<MediaCrossOrigin | null>, media: MediaContext);
+}
+export type ThumbnailSrc = string | ThumbnailImageInit[] | ThumbnailStoryboard | MuxThumbnailStoryboard | null;
+export interface ThumbnailStoryboard {
+    url: string;
+    tileWidth: number;
+    tileHeight: number;
+    tiles: ThumbnailTile[];
+}
+export interface ThumbnailTile {
+    startTime: number;
+    x: number;
+    y: number;
+}
+export interface MuxThumbnailStoryboard {
+    url: string;
+    tile_width: number;
+    tile_height: number;
+    tiles: MuxThumbnailTile[];
+}
+export interface MuxThumbnailTile {
+    start: number;
+    x: number;
+    y: number;
+}
+export interface ThumbnailImageInit {
+    url: string | URL;
+    startTime: number;
+    endTime?: number;
+    width?: number;
+    height?: number;
+    coords?: ThumbnailCoords;
+}
+export interface ThumbnailImage extends Omit<ThumbnailImageInit, 'url'> {
+    url: URL;
+}
+export interface ThumbnailCoords {
+    x: number;
+    y: number;
+}

package/types/components/ui/thumbnails/thumbnail.d.ts

@@ -0,0 +1,50 @@
+import { Component, State } from 'maverick.js';
+import { type MediaContext } from '../../../core/api/media-context';
+import type { MediaCrossOrigin } from '../../../core/api/types';
+import { type ThumbnailImage, type ThumbnailSrc } from './thumbnail-loader';
+/**
+ * Used to load and display a preview thumbnail at the given `time`.
+ *
+ * @attr data-loading - Whether thumbnail image is loading.
+ * @attr data-error - Whether an error occurred loading thumbnail.
+ * @attr data-hidden - Whether thumbnail is not available or failed to load.
+ * @docs {@link https://www.vidstack.io/docs/player/components/display/thumbnail}
+ */
+export declare class Thumbnail extends Component<ThumbnailProps, ThumbnailState> {
+    #private;
+    static props: ThumbnailProps;
+    static state: State<ThumbnailState>;
+    protected media: MediaContext;
+    protected onSetup(): void;
+    protected onConnect(el: HTMLElement): void;
+    protected getTime(): number;
+}
+export interface ThumbnailProps {
+    /**
+     * The thumbnails resource.
+     *
+     * @see {@link https://www.vidstack.io/docs/player/core-concepts/loading#thumbnails}
+     */
+    src: ThumbnailSrc;
+    /**
+     * Finds, loads, and displays the first active thumbnail cue that's start/end times are in range.
+     */
+    time: number;
+    /**
+     * Defines how the media handles cross-origin requests, thereby enabling the
+     * configuration of the CORS requests for the element's fetched data.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin}
+     */
+    crossOrigin: true | MediaCrossOrigin | null;
+}
+export interface ThumbnailState {
+    src: string;
+    img: HTMLImageElement | null | undefined;
+    crossOrigin: MediaCrossOrigin | null;
+    thumbnails: ThumbnailImage[];
+    activeThumbnail: ThumbnailImage | null;
+    loading: boolean;
+    error: ErrorEvent | null;
+    hidden: boolean;
+}

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

@@ -0,0 +1,62 @@
+import { Component, State } from 'maverick.js';
+/**
+ * Outputs a media duration (eg: `currentTime`, `duration`, `bufferedAmount`, etc.) value as time
+ * formatted text.
+ *
+ * @attr data-type - The type prop setting (current, duration, etc.).
+ * @attr data-remainder - Whether time remaining is being shown.
+ * @docs {@link https://www.vidstack.io/docs/player/components/display/time}
+ */
+export declare class Time extends Component<TimeProps, TimeState> {
+    #private;
+    static props: TimeProps;
+    static state: State<TimeState>;
+    protected onSetup(): void;
+    protected onAttach(el: HTMLElement): void;
+    protected onConnect(el: HTMLElement): void;
+}
+export interface TimeProps {
+    /**
+     * The type of media time to track.
+     */
+    type: 'current' | 'buffered' | 'duration';
+    /**
+     * Whether the time should always show the hours unit, even if the time is less than
+     * 1 hour.
+     *
+     * @example `20:30 -> 0:20:35`
+     */
+    showHours: boolean;
+    /**
+     * Whether the hours unit should be padded with zeroes to a length of 2.
+     *
+     * @example `1:20:03 -> 01:20:03`
+     */
+    padHours: boolean | null;
+    /**
+     * Whether the minutes unit should be padded with zeroes to a length of 2.
+     *
+     * @example `5:22 -> 05:22`
+     */
+    padMinutes: boolean | null;
+    /**
+     * Whether to display the remaining time from the current type, until the duration is reached.
+     *
+     * @example `duration` - `currentTime`
+     */
+    remainder: boolean;
+    /**
+     * Whether on press the time should invert showing the remaining time (i.e., toggle the
+     * `remainder` prop).
+     */
+    toggle: boolean;
+    /**
+     * Provides a hint that the time is not visible and stops all events and updates to be more
+     * power efficient.
+     */
+    hidden: boolean;
+}
+export interface TimeState {
+    timeText: string;
+    hidden: boolean;
+}

package/types/components/ui/tooltip/tooltip-content.d.ts

@@ -0,0 +1,39 @@
+import { Component } from 'maverick.js';
+/**
+ * This component contains the content that is visible when the tooltip trigger is interacted with.
+ *
+ * @attr data-visible - Whether tooltip is visible.
+ * @attr data-placement - The placement prop setting.
+ * @attr data-hocus - Whether tooltip is being keyboard focused or hovered over.
+ * @docs {@link https://www.vidstack.io/docs/player/components/tooltip}
+ */
+export declare class TooltipContent extends Component<TooltipContentProps> {
+    #private;
+    static props: TooltipContentProps;
+    constructor();
+    protected onAttach(el: HTMLElement): void;
+    protected onConnect(el: HTMLElement): void;
+}
+export type TooltipPlacement = TooltipPlacementSide | `${TooltipPlacementSide} ${TooltipPlacementAlign}`;
+export type TooltipPlacementSide = 'top' | 'right' | 'bottom' | 'left';
+export type TooltipPlacementAlign = 'start' | 'center' | 'end';
+export interface TooltipContentProps {
+    /**
+     * A space-separated list which specifies the side and alignment of the tooltip content relative
+     * to the trigger.
+     *
+     * @example `top center`
+     * @example `bottom end`
+     */
+    placement: TooltipPlacement;
+    /**
+     * The distance in pixels between the content and the tooltip trigger. You can also set
+     * the CSS variable `--media-tooltip-y-offset` to adjust this offset.
+     */
+    offset: number;
+    /**
+     * The offset in pixels from the start/center/end aligned position. You can also set
+     * the CSS variable `--media-tooltip-x-offset` to adjust this offset.
+     */
+    alignOffset: number;
+}