@hanifhan1f/vidstack-react 1.12.13

package/types/react/src/components/announcer.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { type ReactElementProps } from 'maverick.js/react';
+import { MediaAnnouncerInstance } from './primitives/instances';
+export 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>>;
+export { MediaAnnouncer };

package/types/react/src/components/layouts/default/audio-layout.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { type DefaultLayoutProps } from './media-layout';
+import { type DefaultAudioLayoutSlots } from './slots';
+export interface DefaultAudioLayoutProps extends DefaultLayoutProps<DefaultAudioLayoutSlots> {
+}
+/**
+ * The audio layout is our production-ready UI that's displayed when the media view type is set to
+ * 'audio'. It includes support for audio tracks, slider chapters, captions, live streams
+ * and more out of the box.
+ *
+ * @attr data-match - Whether this layout is being used.
+ * @attr data-sm - The small layout is active
+ * @attr data-lg - The large layout is active.
+ * @attr data-size - The active layout size (sm or lg).
+ * @example
+ * ```tsx
+ * <MediaPlayer src="audio.mp3">
+ *   <MediaProvider />
+ *   <DefaultAudioLayout icons={defaultLayoutIcons} />
+ * </MediaPlayer>
+ * ```
+ */
+declare function DefaultAudioLayout(props: DefaultAudioLayoutProps): React.JSX.Element;
+declare namespace DefaultAudioLayout {
+    var displayName: string;
+}
+export { DefaultAudioLayout };

package/types/react/src/components/layouts/default/context.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { ReadSignal, WriteSignal } from 'maverick.js';
+import type { DefaultLayoutProps } from './media-layout';
+export declare const DefaultLayoutContext: React.Context<DefaultLayoutContext>;
+interface DefaultLayoutContext extends DefaultLayoutProps {
+    layoutEl: ReadSignal<HTMLElement | null>;
+    isSmallLayout: boolean;
+    userPrefersAnnouncements: WriteSignal<boolean>;
+    userPrefersKeyboardAnimations: WriteSignal<boolean>;
+}
+export declare function useDefaultLayoutContext(): DefaultLayoutContext;
+export declare function useDefaultLayoutWord(word: string): any;
+export declare function i18n(translations: any, word: string): any;
+export {};

package/types/react/src/components/layouts/default/hooks.d.ts

@@ -0,0 +1,2 @@
+import type { DefaultLayoutProps } from './media-layout';
+export declare function useColorSchemeClass(colorScheme: DefaultLayoutProps['colorScheme']): "light" | "dark" | null | undefined;

package/types/react/src/components/layouts/default/icons.d.ts

@@ -0,0 +1,95 @@
+import * as React from 'react';
+export declare const defaultLayoutIcons: DefaultLayoutIcons;
+export interface DefaultLayoutIconProps extends React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> {
+}
+export interface DefaultLayoutIcon {
+    (props: DefaultLayoutIconProps): React.ReactNode;
+}
+export interface DefaultAirPlayButtonIcons {
+    Default: DefaultLayoutIcon;
+    Connecting?: DefaultLayoutIcon;
+    Connected?: DefaultLayoutIcon;
+}
+export interface DefaultGoogleCastButtonIcons {
+    Default: DefaultLayoutIcon;
+    Connecting?: DefaultLayoutIcon;
+    Connected?: DefaultLayoutIcon;
+}
+export interface DefaultPlayButtonIcons {
+    Play: DefaultLayoutIcon;
+    Pause: DefaultLayoutIcon;
+    Replay: DefaultLayoutIcon;
+}
+export interface DefaultMuteButtonIcons {
+    Mute: DefaultLayoutIcon;
+    VolumeLow: DefaultLayoutIcon;
+    VolumeHigh: DefaultLayoutIcon;
+}
+export interface DefaultCaptionButtonIcons {
+    On: DefaultLayoutIcon;
+    Off: DefaultLayoutIcon;
+}
+export interface DefaultPIPButtonIcons {
+    Enter: DefaultLayoutIcon;
+    Exit: DefaultLayoutIcon;
+}
+export interface DefaultFullscreenButtonIcons {
+    Enter: DefaultLayoutIcon;
+    Exit: DefaultLayoutIcon;
+}
+export interface DefaultSeekButtonIcons {
+    Backward: DefaultLayoutIcon;
+    Forward: DefaultLayoutIcon;
+}
+export interface DefaultDownloadButtonIcons {
+    Default: DefaultLayoutIcon;
+}
+export interface DefaultMenuIcons {
+    Accessibility: DefaultLayoutIcon;
+    ArrowLeft: DefaultLayoutIcon;
+    ArrowRight: DefaultLayoutIcon;
+    Audio: DefaultLayoutIcon;
+    AudioBoostUp: DefaultLayoutIcon;
+    AudioBoostDown: DefaultLayoutIcon;
+    Chapters: DefaultLayoutIcon;
+    Captions: DefaultLayoutIcon;
+    Playback: DefaultLayoutIcon;
+    Settings: DefaultLayoutIcon;
+    SpeedUp: DefaultLayoutIcon;
+    SpeedDown: DefaultLayoutIcon;
+    QualityUp: DefaultLayoutIcon;
+    QualityDown: DefaultLayoutIcon;
+    FontSizeUp: DefaultLayoutIcon;
+    FontSizeDown: DefaultLayoutIcon;
+    OpacityUp: DefaultLayoutIcon;
+    OpacityDown: DefaultLayoutIcon;
+    RadioCheck: DefaultLayoutIcon;
+}
+export interface DefaultKeyboardDisplayIcons {
+    Play: DefaultLayoutIcon;
+    Pause: DefaultLayoutIcon;
+    Mute: DefaultLayoutIcon;
+    VolumeUp: DefaultLayoutIcon;
+    VolumeDown: DefaultLayoutIcon;
+    EnterFullscreen: DefaultLayoutIcon;
+    ExitFullscreen: DefaultLayoutIcon;
+    EnterPiP: DefaultLayoutIcon;
+    ExitPiP: DefaultLayoutIcon;
+    CaptionsOn: DefaultLayoutIcon;
+    CaptionsOff: DefaultLayoutIcon;
+    SeekForward: DefaultLayoutIcon;
+    SeekBackward: DefaultLayoutIcon;
+}
+export interface DefaultLayoutIcons {
+    AirPlayButton: DefaultAirPlayButtonIcons;
+    GoogleCastButton: DefaultGoogleCastButtonIcons;
+    PlayButton: DefaultPlayButtonIcons;
+    MuteButton: DefaultMuteButtonIcons;
+    CaptionButton: DefaultCaptionButtonIcons;
+    PIPButton: DefaultPIPButtonIcons;
+    FullscreenButton: DefaultFullscreenButtonIcons;
+    SeekButton: DefaultSeekButtonIcons;
+    DownloadButton?: DefaultDownloadButtonIcons;
+    Menu: DefaultMenuIcons;
+    KeyboardDisplay?: Partial<DefaultKeyboardDisplayIcons>;
+}

package/types/react/src/components/layouts/default/index.d.ts

@@ -0,0 +1,5 @@
+export type { DefaultLayoutSlots, DefaultAudioLayoutSlots, DefaultVideoLayoutSlots, DefaultLayoutSlotName, DefaultLayoutMenuSlotName, } from './slots';
+export type { DefaultLayoutTranslations, DefaultLayoutWord } from 'vidstack';
+export type { DefaultLayoutProps } from './media-layout';
+export * from './context';
+export * from './ui';

package/types/react/src/components/layouts/default/media-layout.d.ts

@@ -0,0 +1,133 @@
+import * as React from 'react';
+import { type DefaultLayoutTranslations, type FileDownloadInfo, type MediaPlayerQuery, type MediaStreamType, type ThumbnailSrc } from 'vidstack';
+import type { PrimitivePropsWithRef } from '../../primitives/nodes';
+import type { DefaultLayoutIcons } from './icons';
+export interface DefaultLayoutProps<Slots = unknown> extends PrimitivePropsWithRef<'div'> {
+    children?: React.ReactNode;
+    /**
+     * The icons to be rendered and displayed inside the layout.
+     */
+    icons: DefaultLayoutIcons;
+    /**
+     * Whether light or dark color theme should be active. Defaults to user operating system
+     * preference.
+     *
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme}
+     */
+    colorScheme?: 'light' | 'dark' | 'system' | 'default';
+    /**
+     * Sets the download URL and filename for the download button.
+     */
+    download?: FileDownloadInfo;
+    /**
+     * Specifies the number of milliseconds to wait before tooltips are visible after interacting
+     * with a control.
+     *
+     * @defaultValue 700
+     */
+    showTooltipDelay?: number;
+    /**
+     * Specifies the number of milliseconds to wait before menus are visible after opening them.
+     *
+     * @defaultValue 0
+     */
+    showMenuDelay?: number;
+    /**
+     * Whether the bitrate should be hidden in the settings quality menu next to each option.
+     *
+     * @defaultValue false
+     */
+    hideQualityBitrate?: boolean;
+    /**
+     * Determines when the small (e.g., mobile) UI should be displayed.
+     *
+     * @defaultValue `({ width, height }) => width < 576 || height < 380`
+     */
+    smallLayoutWhen?: boolean | MediaPlayerQuery;
+    /**
+     * The thumbnails resource.
+     *
+     * @see {@link https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails}
+     */
+    thumbnails?: ThumbnailSrc;
+    /**
+     * Translation map from english to your desired language for words used throughout the layout.
+     */
+    translations?: Partial<DefaultLayoutTranslations> | null;
+    /**
+     * A document query selector string or `HTMLElement` to mount menus inside.
+     *
+     * @defaultValue `document.body`
+     */
+    menuContainer?: string | HTMLElement | null;
+    /**
+     * Specifies whether menu buttons should be placed in the top or bottom controls group. This
+     * only applies to the large video layout.
+     */
+    menuGroup?: 'top' | 'bottom';
+    /**
+     * Disable audio boost slider in the settings menu.
+     */
+    noAudioGain?: boolean;
+    /**
+     * The audio gain options to be displayed in the settings menu.
+     */
+    audioGains?: number[] | {
+        min: number;
+        max: number;
+        step: number;
+    };
+    /**
+     * Whether modal menus should be disabled when the small layout is active. A modal menu is
+     * a floating panel that floats up from the bottom of the screen (outside of the player). It's
+     * enabled by default as it provides a better user experience for touch devices.
+     */
+    noModal?: boolean;
+    /**
+     * Whether to disable scrubbing by touch swiping left or right on the player canvas.
+     */
+    noScrubGesture?: boolean;
+    /**
+     * The minimum width of the slider to start displaying slider chapters when available.
+     */
+    sliderChaptersMinWidth?: number;
+    /**
+     * Whether the time slider should be disabled.
+     */
+    disableTimeSlider?: boolean;
+    /**
+     * Whether all gestures such as press to play or seek should not be active.
+     */
+    noGestures?: boolean;
+    /**
+     * Whether keyboard actions should not be displayed.
+     */
+    noKeyboardAnimations?: boolean;
+    /**
+     * The playback rate options to be displayed in the settings menu.
+     */
+    playbackRates?: number[] | {
+        min: number;
+        max: number;
+        step: number;
+    };
+    /**
+     * The number of seconds to seek forward or backward when pressing the seek button or using
+     * keyboard shortcuts.
+     */
+    seekStep?: number;
+    /**
+     * Provide additional content to be inserted in specific positions.
+     */
+    slots?: Slots;
+}
+export interface CreateDefaultMediaLayout {
+    type: 'audio' | 'video';
+    smLayoutWhen: MediaPlayerQuery;
+    renderLayout: (props: {
+        streamType: MediaStreamType;
+        isLoadLayout: boolean;
+        isSmallLayout: boolean;
+    }) => React.ReactNode;
+}
+export declare function createDefaultMediaLayout({ type, smLayoutWhen, renderLayout, }: CreateDefaultMediaLayout): React.ForwardRefExoticComponent<Omit<DefaultLayoutProps<unknown>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/types/react/src/components/layouts/default/slots.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+export type SlotPositions<Name extends string> = `before${Capitalize<Name>}` | Name | `after${Capitalize<Name>}`;
+export type Slots<Names extends string> = {
+    [slotName in SlotPositions<Names>]?: React.ReactNode;
+};
+export type DefaultLayoutSlotName = 'bufferingIndicator' | 'captionButton' | 'captions' | 'title' | 'chapterTitle' | 'currentTime' | 'timeDivider' | 'endTime' | 'fullscreenButton' | 'liveButton' | 'livePlayButton' | 'muteButton' | 'pipButton' | 'airPlayButton' | 'googleCastButton' | 'downloadButton' | 'playButton' | 'loadButton' | 'seekBackwardButton' | 'seekForwardButton' | 'startDuration' | 'timeSlider' | 'volumeSlider' | 'topControlsGroupStart' | 'topControlsGroupCenter' | 'topControlsGroupEnd' | 'centerControlsGroupStart' | 'centerControlsGroupCenter' | 'centerControlsGroupEnd' | DefaultLayoutMenuSlotName;
+export type DefaultLayoutMenuSlotName = 'chaptersMenu' | 'settingsMenu'
+/** @deprecated - use `settingsMenuItemsStart` */
+ | 'settingsMenuStartItems'
+/** @deprecated - use `settingsMenuItemsEnd` */
+ | 'settingsMenuEndItems' | 'settingsMenuItemsStart' | 'settingsMenuItemsEnd' | 'playbackMenuItemsStart' | 'playbackMenuItemsEnd' | 'playbackMenuLoop' | 'accessibilityMenuItemsStart' | 'accessibilityMenuItemsEnd' | 'audioMenuItemsStart' | 'audioMenuItemsEnd' | 'captionsMenuItemsStart' | 'captionsMenuItemsEnd';
+export interface DefaultLayoutSlots extends Slots<DefaultLayoutSlotName> {
+}
+export interface DefaultAudioLayoutSlots extends DefaultLayoutSlots {
+}
+export interface DefaultVideoLayoutSlots extends DefaultLayoutSlots {
+    smallLayout?: DefaultLayoutSlots;
+    largeLayout?: DefaultLayoutSlots;
+}
+export declare function useDefaultAudioLayoutSlots(): DefaultAudioLayoutSlots | undefined;
+export declare function useDefaultVideoLayoutSlots(): DefaultVideoLayoutSlots | undefined;
+export declare function slot<T>(slots: T | undefined, name: keyof T, defaultValue: React.ReactNode): React.ReactNode;

package/types/react/src/components/layouts/default/ui/announcer.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare function DefaultAnnouncer(): React.JSX.Element | null;
+declare namespace DefaultAnnouncer {
+    var displayName: string;
+}
+export { DefaultAnnouncer };

package/types/react/src/components/layouts/default/ui/buttons.d.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import * as Tooltip from '../../../ui/tooltip';
+interface DefaultMediaButtonProps {
+    tooltip: Tooltip.ContentProps['placement'];
+}
+declare function DefaultPlayButton({ tooltip }: DefaultMediaButtonProps): React.JSX.Element;
+declare namespace DefaultPlayButton {
+    var displayName: string;
+}
+export { DefaultPlayButton };
+declare const DefaultMuteButton: React.ForwardRefExoticComponent<DefaultMediaButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { DefaultMuteButton };
+declare function DefaultCaptionButton({ tooltip }: DefaultMediaButtonProps): React.JSX.Element;
+declare namespace DefaultCaptionButton {
+    var displayName: string;
+}
+export { DefaultCaptionButton };
+declare function DefaultPIPButton({ tooltip }: DefaultMediaButtonProps): React.JSX.Element;
+declare namespace DefaultPIPButton {
+    var displayName: string;
+}
+export { DefaultPIPButton };
+declare function DefaultFullscreenButton({ tooltip }: DefaultMediaButtonProps): React.JSX.Element;
+declare namespace DefaultFullscreenButton {
+    var displayName: string;
+}
+export { DefaultFullscreenButton };
+declare function DefaultSeekButton({ backward, tooltip, }: DefaultMediaButtonProps & {
+    backward?: boolean;
+}): React.JSX.Element;
+declare namespace DefaultSeekButton {
+    var displayName: string;
+}
+export { DefaultSeekButton };
+declare function DefaultAirPlayButton({ tooltip }: DefaultMediaButtonProps): React.JSX.Element;
+declare namespace DefaultAirPlayButton {
+    var displayName: string;
+}
+export { DefaultAirPlayButton };
+declare function DefaultGoogleCastButton({ tooltip }: DefaultMediaButtonProps): React.JSX.Element;
+declare namespace DefaultGoogleCastButton {
+    var displayName: string;
+}
+export { DefaultGoogleCastButton };
+declare function DefaultLiveButton(): React.JSX.Element | null;
+declare namespace DefaultLiveButton {
+    var displayName: string;
+}
+export { DefaultLiveButton };
+declare function DefaultDownloadButton(): React.JSX.Element | null;
+declare namespace DefaultDownloadButton {
+    var displayName: string;
+}
+export { DefaultDownloadButton };

package/types/react/src/components/layouts/default/ui/captions.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare function DefaultCaptions(): React.JSX.Element;
+declare namespace DefaultCaptions {
+    var displayName: string;
+}
+export { DefaultCaptions };

package/types/react/src/components/layouts/default/ui/controls.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare function DefaultControlsSpacer(): React.JSX.Element;
+declare namespace DefaultControlsSpacer {
+    var displayName: string;
+}
+export { DefaultControlsSpacer };

package/types/react/src/components/layouts/default/ui/keyboard-display.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { type PrimitivePropsWithRef } from '../../../primitives/nodes';
+import type { DefaultKeyboardDisplayIcons } from '../icons';
+export interface DefaultKeyboardDisplayProps extends Omit<PrimitivePropsWithRef<'div'>, 'disabled'> {
+    icons: Partial<DefaultKeyboardDisplayIcons>;
+}
+declare const DefaultKeyboardDisplay: React.ForwardRefExoticComponent<Omit<DefaultKeyboardDisplayProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export { DefaultKeyboardDisplay };

package/types/react/src/components/layouts/default/ui/menus/accessibility-menu.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { type DefaultLayoutMenuSlotName, type Slots } from '../../slots';
+interface DefaultAccessibilityMenuProps {
+    slots?: Slots<DefaultLayoutMenuSlotName>;
+}
+declare function DefaultAccessibilityMenu({ slots }: DefaultAccessibilityMenuProps): React.JSX.Element;
+declare namespace DefaultAccessibilityMenu {
+    var displayName: string;
+}
+export { DefaultAccessibilityMenu };

package/types/react/src/components/layouts/default/ui/menus/audio-menu.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { type DefaultLayoutMenuSlotName, type Slots } from '../../slots';
+interface DefaultAudioMenuProps {
+    slots?: Slots<DefaultLayoutMenuSlotName>;
+}
+declare function DefaultAudioMenu({ slots }: DefaultAudioMenuProps): React.JSX.Element | null;
+declare namespace DefaultAudioMenu {
+    var displayName: string;
+}
+export { DefaultAudioMenu };

package/types/react/src/components/layouts/default/ui/menus/captions-menu.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { type DefaultLayoutMenuSlotName, type Slots } from '../../slots';
+interface DefaultCaptionMenuProps {
+    slots?: Slots<DefaultLayoutMenuSlotName>;
+}
+declare function DefaultCaptionMenu({ slots }: DefaultCaptionMenuProps): React.JSX.Element | null;
+declare namespace DefaultCaptionMenu {
+    var displayName: string;
+}
+export { DefaultCaptionMenu };

package/types/react/src/components/layouts/default/ui/menus/chapters-menu.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { DefaultMediaMenuProps } from './settings-menu';
+declare function DefaultChaptersMenu({ tooltip, placement, portalClass }: DefaultMediaMenuProps): React.JSX.Element | null;
+declare namespace DefaultChaptersMenu {
+    var displayName: string;
+}
+export { DefaultChaptersMenu };

package/types/react/src/components/layouts/default/ui/menus/font-menu.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare function DefaultFontMenu(): React.JSX.Element | null;
+declare namespace DefaultFontMenu {
+    var displayName: string;
+}
+export { DefaultFontMenu };

package/types/react/src/components/layouts/default/ui/menus/items/menu-checkbox.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export interface DefaultMenuCheckboxProps {
+    label: string;
+    checked?: boolean;
+    storageKey?: string;
+    defaultChecked?: boolean;
+    onChange?(checked: boolean, trigger?: Event): void;
+}
+declare function DefaultMenuCheckbox({ label, checked, storageKey, defaultChecked, onChange, }: DefaultMenuCheckboxProps): React.JSX.Element;
+declare namespace DefaultMenuCheckbox {
+    var displayName: string;
+}
+export { DefaultMenuCheckbox };

package/types/react/src/components/layouts/default/ui/menus/items/menu-items.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import type { DefaultLayoutIcon } from '../../../icons';
+export interface DefaultMenuSectionProps {
+    label?: string;
+    value?: string;
+    children: React.ReactNode;
+}
+declare function DefaultMenuSection({ label, value, children }: DefaultMenuSectionProps): React.JSX.Element;
+declare namespace DefaultMenuSection {
+    var displayName: string;
+}
+export { DefaultMenuSection };
+export interface DefaultMenuButtonProps {
+    label: string;
+    hint?: string;
+    disabled?: boolean;
+    Icon?: DefaultLayoutIcon;
+}
+declare function DefaultMenuButton({ label, hint, Icon, disabled }: DefaultMenuButtonProps): React.JSX.Element;
+declare namespace DefaultMenuButton {
+    var displayName: string;
+}
+export { DefaultMenuButton };
+export interface DefaultMenuItemProps {
+    label: string;
+    children: React.ReactNode;
+}
+declare function DefaultMenuItem({ label, children }: DefaultMenuItemProps): React.JSX.Element;
+declare namespace DefaultMenuItem {
+    var displayName: string;
+}
+export { DefaultMenuItem };
+export interface DefaultMenuRadioGroupProps {
+    value: string;
+    options: {
+        label: string;
+        value: string;
+    }[];
+    onChange?(newValue: string): void;
+}
+declare function DefaultMenuRadioGroup({ value, options, onChange }: DefaultMenuRadioGroupProps): React.JSX.Element;
+declare namespace DefaultMenuRadioGroup {
+    var displayName: string;
+}
+export { DefaultMenuRadioGroup };
+export declare function createRadioOptions(entries: string[] | Record<string, string>): {
+    label: string;
+    value: string;
+}[];

package/types/react/src/components/layouts/default/ui/menus/items/menu-slider.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import type { DefaultLayoutIcon } from '../../../icons';
+export interface DefaultMenuSliderItemProps {
+    label?: string;
+    value?: string;
+    UpIcon?: DefaultLayoutIcon;
+    DownIcon?: DefaultLayoutIcon;
+    children: React.ReactNode;
+    isMin: boolean;
+    isMax: boolean;
+}
+declare function DefaultMenuSliderItem({ label, value, UpIcon, DownIcon, children, isMin, isMax, }: DefaultMenuSliderItemProps): React.JSX.Element;
+declare namespace DefaultMenuSliderItem {
+    var displayName: string;
+}
+export { DefaultMenuSliderItem };
+declare function DefaultSliderParts(): React.JSX.Element;
+declare namespace DefaultSliderParts {
+    var displayName: string;
+}
+export { DefaultSliderParts };
+declare function DefaultSliderSteps(): React.JSX.Element;
+declare namespace DefaultSliderSteps {
+    var displayName: string;
+}
+export { DefaultSliderSteps };

package/types/react/src/components/layouts/default/ui/menus/playback-menu.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { type DefaultLayoutMenuSlotName, type Slots } from '../../slots';
+interface DefaultPlaybackMenuProps {
+    slots?: Slots<DefaultLayoutMenuSlotName>;
+}
+declare function DefaultPlaybackMenu({ slots }: DefaultPlaybackMenuProps): React.JSX.Element;
+declare namespace DefaultPlaybackMenu {
+    var displayName: string;
+}
+export { DefaultPlaybackMenu };

package/types/react/src/components/layouts/default/ui/menus/settings-menu.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as Menu from '../../../../ui/menu';
+import type * as Tooltip from '../../../../ui/tooltip';
+import { type DefaultLayoutMenuSlotName, type Slots } from '../../slots';
+export interface DefaultMediaMenuProps {
+    tooltip: Tooltip.ContentProps['placement'];
+    placement: Menu.ContentProps['placement'];
+    portalClass?: string;
+    slots?: Slots<DefaultLayoutMenuSlotName>;
+}
+declare function DefaultSettingsMenu({ tooltip, placement, portalClass, slots, }: DefaultMediaMenuProps): React.JSX.Element;
+declare namespace DefaultSettingsMenu {
+    var displayName: string;
+}
+export { DefaultSettingsMenu };

package/types/react/src/components/layouts/default/ui/menus/utils.d.ts

@@ -0,0 +1 @@
+export declare function useParentDialogEl(): HTMLDialogElement | null | undefined;

package/types/react/src/components/layouts/default/ui/sliders.d.ts

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import type { SliderOrientation, TooltipPlacement } from 'vidstack';
+import * as VolumeSlider from '../../../ui/sliders/volume-slider';
+import { type DefaultLayoutSlots } from '../slots';
+export interface DefaultVolumePopupProps {
+    slots?: DefaultLayoutSlots;
+    tooltip: TooltipPlacement;
+    orientation: SliderOrientation;
+}
+declare function DefaultVolumePopup({ tooltip, orientation, slots }: DefaultVolumePopupProps): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+declare namespace DefaultVolumePopup {
+    var displayName: string;
+}
+export { DefaultVolumePopup };
+declare function DefaultVolumeSlider(props: VolumeSlider.RootProps): React.JSX.Element;
+declare namespace DefaultVolumeSlider {
+    var displayName: string;
+}
+export { DefaultVolumeSlider };
+declare function DefaultTimeSlider(): React.JSX.Element;
+declare namespace DefaultTimeSlider {
+    var displayName: string;
+}
+export { DefaultTimeSlider };

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

@@ -0,0 +1,30 @@
+import * as React from 'react';
+interface DefaultTimeGroupSlots {
+    currentTime?: React.ReactNode;
+    timeDivider?: React.ReactNode;
+    endTime?: React.ReactNode;
+}
+declare function DefaultTimeGroup({ slots }: {
+    slots?: DefaultTimeGroupSlots;
+}): React.JSX.Element | null;
+declare namespace DefaultTimeGroup {
+    var displayName: string;
+}
+export { DefaultTimeGroup };
+interface DefaultTimeInfoSlots extends DefaultTimeGroupSlots {
+    liveButton?: React.ReactNode;
+}
+declare function DefaultTimeInfo({ slots }: {
+    slots?: DefaultTimeInfoSlots;
+}): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+declare namespace DefaultTimeInfo {
+    var displayName: string;
+}
+export { DefaultTimeInfo };
+declare function DefaultTimeInvert({ slots }: {
+    slots?: DefaultTimeInfoSlots;
+}): React.ReactNode;
+declare namespace DefaultTimeInvert {
+    var displayName: string;
+}
+export { DefaultTimeInvert };

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare function DefaultTitle(): React.JSX.Element;
+declare namespace DefaultTitle {
+    var displayName: string;
+}
+export { DefaultTitle };