@hanifhan1f/vidstack-react 1.12.13

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { TooltipPlacement } from 'vidstack';
+export interface DefaultTooltipProps {
+    content: string;
+    placement?: TooltipPlacement;
+    children: React.ReactNode;
+}
+declare function DefaultTooltip({ content, placement, children }: DefaultTooltipProps): React.JSX.Element;
+declare namespace DefaultTooltip {
+    var displayName: string;
+}
+export { DefaultTooltip };

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

@@ -0,0 +1,8 @@
+export * from './audio-layout';
+export * from './video-layout';
+export * from './ui/menus/items/menu-checkbox';
+export * from './ui/menus/items/menu-items';
+export * from './ui/menus/items/menu-slider';
+export * from './ui/tooltip';
+export * from './icons';
+export { DefaultKeyboardDisplay, type DefaultKeyboardDisplayProps } from './ui/keyboard-display';

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { type DefaultLayoutProps } from './media-layout';
+import { type DefaultVideoLayoutSlots } from './slots';
+export interface DefaultVideoLayoutProps extends DefaultLayoutProps<DefaultVideoLayoutSlots> {
+}
+/**
+ * The video layout is our production-ready UI that's displayed when the media view type is set to
+ * 'video'. It includes support for picture-in-picture, fullscreen, slider chapters, slider
+ * previews, captions, audio/quality settings, 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="video.mp4">
+ *   <MediaProvider />
+ *   <DefaultVideoLayout thumbnails="/thumbnails.vtt" icons={defaultLayoutIcons} />
+ * </MediaPlayer>
+ * ```
+ */
+declare function DefaultVideoLayout(props: DefaultVideoLayoutProps): React.JSX.Element;
+declare namespace DefaultVideoLayout {
+    var displayName: string;
+}
+export { DefaultVideoLayout };
+declare function DefaultVideoLargeLayout(): React.JSX.Element;
+declare namespace DefaultVideoLargeLayout {
+    var displayName: string;
+}
+export { DefaultVideoLargeLayout };
+declare function DefaultVideoSmallLayout(): React.JSX.Element;
+declare namespace DefaultVideoSmallLayout {
+    var displayName: string;
+}
+export { DefaultVideoSmallLayout };
+declare function DefaultVideoGestures(): React.JSX.Element | null;
+declare namespace DefaultVideoGestures {
+    var displayName: string;
+}
+export { DefaultVideoGestures };
+declare function DefaultBufferingIndicator(): React.JSX.Element;
+declare namespace DefaultBufferingIndicator {
+    var displayName: string;
+}
+export { DefaultBufferingIndicator };

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

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { type WriteSignal } from 'maverick.js';
+import type { PlyrLayoutWord } from 'vidstack';
+import type { PlyrLayoutProps } from './props';
+interface PlyrLayoutContext extends PlyrLayoutProps {
+    previewTime: WriteSignal<number>;
+}
+export declare const PlyrLayoutContext: React.Context<PlyrLayoutContext>;
+export declare function usePlyrLayoutContext(): PlyrLayoutContext;
+export declare function usePlyrLayoutWord(word: PlyrLayoutWord): any;
+export declare function i18n(translations: any, word: string): any;
+export {};

package/types/react/src/components/layouts/plyr/icons/plyr-airplay.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<g><path d=\"M16,1 L2,1 C1.447,1 1,1.447 1,2 L1,12 C1,12.553 1.447,13 2,13 L5,13 L5,11 L3,11 L3,3 L15,3 L15,11 L13,11 L13,13 L16,13 C16.553,13 17,12.553 17,12 L17,2 C17,1.447 16.553,1 16,1 L16,1 Z\"></path><polygon points=\"4 17 14 17 9 11\"></polygon></g>";
+export default _default;

package/types/react/src/components/layouts/plyr/icons/plyr-captions-off.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<g fill-rule=\"evenodd\" fill-opacity=\"0.5\"><path d=\"M1,1 C0.4,1 0,1.4 0,2 L0,13 C0,13.6 0.4,14 1,14 L5.6,14 L8.3,16.7 C8.5,16.9 8.7,17 9,17 C9.3,17 9.5,16.9 9.7,16.7 L12.4,14 L17,14 C17.6,14 18,13.6 18,13 L18,2 C18,1.4 17.6,1 17,1 L1,1 Z M5.52,11.15 C7.51,11.15 8.53,9.83 8.8,8.74 L7.51,8.35 C7.32,9.01 6.73,9.8 5.52,9.8 C4.38,9.8 3.32,8.97 3.32,7.46 C3.32,5.85 4.44,5.09 5.5,5.09 C6.73,5.09 7.28,5.84 7.45,6.52 L8.75,6.11 C8.47,4.96 7.46,3.76 5.5,3.76 C3.6,3.76 1.89,5.2 1.89,7.46 C1.89,9.72 3.54,11.15 5.52,11.15 Z M13.09,11.15 C15.08,11.15 16.1,9.83 16.37,8.74 L15.08,8.35 C14.89,9.01 14.3,9.8 13.09,9.8 C11.95,9.8 10.89,8.97 10.89,7.46 C10.89,5.85 12.01,5.09 13.07,5.09 C14.3,5.09 14.85,5.84 15.02,6.52 L16.32,6.11 C16.04,4.96 15.03,3.76 13.07,3.76 C11.17,3.76 9.46,5.2 9.46,7.46 C9.46,9.72 11.11,11.15 13.09,11.15 Z\"></path></g>";
+export default _default;

package/types/react/src/components/layouts/plyr/icons/plyr-captions-on.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<g fill-rule=\"evenodd\"><path d=\"M1,1 C0.4,1 0,1.4 0,2 L0,13 C0,13.6 0.4,14 1,14 L5.6,14 L8.3,16.7 C8.5,16.9 8.7,17 9,17 C9.3,17 9.5,16.9 9.7,16.7 L12.4,14 L17,14 C17.6,14 18,13.6 18,13 L18,2 C18,1.4 17.6,1 17,1 L1,1 Z M5.52,11.15 C7.51,11.15 8.53,9.83 8.8,8.74 L7.51,8.35 C7.32,9.01 6.73,9.8 5.52,9.8 C4.38,9.8 3.32,8.97 3.32,7.46 C3.32,5.85 4.44,5.09 5.5,5.09 C6.73,5.09 7.28,5.84 7.45,6.52 L8.75,6.11 C8.47,4.96 7.46,3.76 5.5,3.76 C3.6,3.76 1.89,5.2 1.89,7.46 C1.89,9.72 3.54,11.15 5.52,11.15 Z M13.09,11.15 C15.08,11.15 16.1,9.83 16.37,8.74 L15.08,8.35 C14.89,9.01 14.3,9.8 13.09,9.8 C11.95,9.8 10.89,8.97 10.89,7.46 C10.89,5.85 12.01,5.09 13.07,5.09 C14.3,5.09 14.85,5.84 15.02,6.52 L16.32,6.11 C16.04,4.96 15.03,3.76 13.07,3.76 C11.17,3.76 9.46,5.2 9.46,7.46 C9.46,9.72 11.11,11.15 13.09,11.15 Z\"></path></g>";
+export default _default;

package/types/react/src/components/layouts/plyr/icons/plyr-download.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<g transform=\"translate(2 1)\"><path d=\"M7,12 C7.3,12 7.5,11.9 7.7,11.7 L13.4,6 L12,4.6 L8,8.6 L8,0 L6,0 L6,8.6 L2,4.6 L0.6,6 L6.3,11.7 C6.5,11.9 6.7,12 7,12 Z\" /><rect width=\"14\" height=\"2\" y=\"14\" /></g>";
+export default _default;

package/types/react/src/components/layouts/plyr/icons/plyr-enter-fullscreen.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<polygon points=\"10 3 13.6 3 9.6 7 11 8.4 15 4.4 15 8 17 8 17 1 10 1\"></polygon><polygon points=\"7 9.6 3 13.6 3 10 1 10 1 17 8 17 8 15 4.4 15 8.4 11\"></polygon>";
+export default _default;

package/types/react/src/components/layouts/plyr/icons/plyr-exit-fullscreen.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<polygon points=\"1 12 4.6 12 0.6 16 2 17.4 6 13.4 6 17 8 17 8 10 1 10\"></polygon><polygon points=\"16 0.6 12 4.6 12 1 10 1 10 8 17 8 17 6 13.4 6 17.4 2\"></polygon>";
+export default _default;

package/types/react/src/components/layouts/plyr/icons/plyr-fast-forward.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<polygon points=\"7.875 7.17142857 0 1 0 17 7.875 10.8285714 7.875 17 18 9 7.875 1\"></polygon>";
+export default _default;

package/types/react/src/components/layouts/plyr/icons/plyr-muted.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<polygon points=\"12.4 12.5 14.5 10.4 16.6 12.5 18 11.1 15.9 9 18 6.9 16.6 5.5 14.5 7.6 12.4 5.5 11 6.9 13.1 9 11 11.1\"></polygon><path d=\"M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z\"></path>";
+export default _default;

package/types/react/src/components/layouts/plyr/icons/plyr-pause.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<path d=\"M6,1 L3,1 C2.4,1 2,1.4 2,2 L2,16 C2,16.6 2.4,17 3,17 L6,17 C6.6,17 7,16.6 7,16 L7,2 C7,1.4 6.6,1 6,1 L6,1 Z\"></path><path d=\"M12,1 C11.4,1 11,1.4 11,2 L11,16 C11,16.6 11.4,17 12,17 L15,17 C15.6,17 16,16.6 16,16 L16,2 C16,1.4 15.6,1 15,1 L12,1 Z\"></path>";
+export default _default;

package/types/react/src/components/layouts/plyr/icons/plyr-pip.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<polygon points=\"13.293 3.293 7.022 9.564 8.436 10.978 14.707 4.707 17 7 17 1 11 1\"></polygon><path d=\"M13,15 L3,15 L3,5 L8,5 L8,3 L2,3 C1.448,3 1,3.448 1,4 L1,16 C1,16.552 1.448,17 2,17 L14,17 C14.552,17 15,16.552 15,16 L15,10 L13,10 L13,15 L13,15 Z\"></path>";
+export default _default;

package/types/react/src/components/layouts/plyr/icons/plyr-play.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<path d=\"M15.5615866,8.10002147 L3.87056367,0.225209313 C3.05219207,-0.33727727 2,0.225209313 2,1.12518784 L2,16.8748122 C2,17.7747907 3.05219207,18.3372773 3.87056367,17.7747907 L15.5615866,9.89997853 C16.1461378,9.44998927 16.1461378,8.55001073 15.5615866,8.10002147 L15.5615866,8.10002147 Z\"></path>";
+export default _default;

package/types/react/src/components/layouts/plyr/icons/plyr-restart.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<path d=\"M9.7,1.2 L10.4,7.6 L12.5,5.5 C14.4,7.4 14.4,10.6 12.5,12.5 C11.6,13.5 10.3,14 9,14 C7.7,14 6.4,13.5 5.5,12.5 C3.6,10.6 3.6,7.4 5.5,5.5 C6.1,4.9 6.9,4.4 7.8,4.2 L7.2,2.3 C6,2.6 4.9,3.2 4,4.1 C1.3,6.8 1.3,11.2 4,14 C5.3,15.3 7.1,16 8.9,16 C10.8,16 12.5,15.3 13.8,14 C16.5,11.3 16.5,6.9 13.8,4.1 L16,1.9 L9.7,1.2 L9.7,1.2 Z\"></path>";
+export default _default;

package/types/react/src/components/layouts/plyr/icons/plyr-rewind.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<polygon points=\"10.125 1 0 9 10.125 17 10.125 10.8285714 18 17 18 1 10.125 7.17142857\"></polygon>";
+export default _default;

package/types/react/src/components/layouts/plyr/icons/plyr-settings.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<path d=\"M16.135,7.784 C14.832,7.458 14.214,5.966 14.905,4.815 C15.227,4.279 15.13,3.817 14.811,3.499 L14.501,3.189 C14.183,2.871 13.721,2.774 13.185,3.095 C12.033,3.786 10.541,3.168 10.216,1.865 C10.065,1.258 9.669,1 9.219,1 L8.781,1 C8.331,1 7.936,1.258 7.784,1.865 C7.458,3.168 5.966,3.786 4.815,3.095 C4.279,2.773 3.816,2.87 3.498,3.188 L3.188,3.498 C2.87,3.816 2.773,4.279 3.095,4.815 C3.786,5.967 3.168,7.459 1.865,7.784 C1.26,7.935 1,8.33 1,8.781 L1,9.219 C1,9.669 1.258,10.064 1.865,10.216 C3.168,10.542 3.786,12.034 3.095,13.185 C2.773,13.721 2.87,14.183 3.189,14.501 L3.499,14.811 C3.818,15.13 4.281,15.226 4.815,14.905 C5.967,14.214 7.459,14.832 7.784,16.135 C7.935,16.742 8.331,17 8.781,17 L9.219,17 C9.669,17 10.064,16.742 10.216,16.135 C10.542,14.832 12.034,14.214 13.185,14.905 C13.72,15.226 14.182,15.13 14.501,14.811 L14.811,14.501 C15.129,14.183 15.226,13.72 14.905,13.185 C14.214,12.033 14.832,10.541 16.135,10.216 C16.742,10.065 17,9.669 17,9.219 L17,8.781 C17,8.33 16.74,7.935 16.135,7.784 L16.135,7.784 Z M9,12 C7.343,12 6,10.657 6,9 C6,7.343 7.343,6 9,6 C10.657,6 12,7.343 12,9 C12,10.657 10.657,12 9,12 L9,12 Z\"></path>";
+export default _default;

package/types/react/src/components/layouts/plyr/icons/plyr-volume.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "<path d=\"M15.5999996,3.3 C15.1999996,2.9 14.5999996,2.9 14.1999996,3.3 C13.7999996,3.7 13.7999996,4.3 14.1999996,4.7 C15.3999996,5.9 15.9999996,7.4 15.9999996,9 C15.9999996,10.6 15.3999996,12.1 14.1999996,13.3 C13.7999996,13.7 13.7999996,14.3 14.1999996,14.7 C14.3999996,14.9 14.6999996,15 14.8999996,15 C15.1999996,15 15.3999996,14.9 15.5999996,14.7 C17.0999996,13.2 17.9999996,11.2 17.9999996,9 C17.9999996,6.8 17.0999996,4.8 15.5999996,3.3 L15.5999996,3.3 Z\"></path><path d=\"M11.2819745,5.28197449 C10.9060085,5.65794047 10.9060085,6.22188944 11.2819745,6.59785542 C12.0171538,7.33303477 12.2772954,8.05605449 12.2772954,9.00000021 C12.2772954,9.93588462 11.851678,10.9172014 11.2819745,11.4869049 C10.9060085,11.8628709 10.9060085,12.4268199 11.2819745,12.8027859 C11.4271642,12.9479755 11.9176724,13.0649528 12.2998149,12.9592565 C12.4124479,12.9281035 12.5156669,12.8776063 12.5978555,12.8027859 C13.773371,11.732654 14.1311161,10.1597914 14.1312523,9.00000021 C14.1312723,8.8299555 14.1286311,8.66015647 14.119665,8.4897429 C14.0674781,7.49784946 13.8010171,6.48513613 12.5978554,5.28197449 C12.2218894,4.9060085 11.6579405,4.9060085 11.2819745,5.28197449 Z\"></path><path d=\"M3.78571429,6.00820648 L0.714285714,6.00820648 C0.285714286,6.00820648 0,6.30901277 0,6.76022222 L0,11.2723167 C0,11.7235261 0.285714286,12.0243324 0.714285714,12.0243324 L3.78571429,12.0243324 L7.85714286,15.8819922 C8.35714286,16.1827985 9,15.8819922 9,15.2803796 L9,2.75215925 C9,2.15054666 8.35714286,1.77453879 7.85714286,2.15054666 L3.78571429,6.00820648 Z\"></path>";
+export default _default;

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+export declare const plyrLayoutIcons: PlyrLayoutIcons;
+export interface PlyrLayoutIconProps extends React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> {
+}
+export interface PlyrLayoutIcon {
+    (props: PlyrLayoutIconProps): React.ReactNode;
+}
+export interface PlyrLayoutIcons {
+    AirPlay: PlyrLayoutIcon;
+    CaptionsOff: PlyrLayoutIcon;
+    CaptionsOn: PlyrLayoutIcon;
+    Download: PlyrLayoutIcon;
+    EnterFullscreen: PlyrLayoutIcon;
+    EnterPiP: PlyrLayoutIcon;
+    ExitFullscreen: PlyrLayoutIcon;
+    ExitPiP: PlyrLayoutIcon;
+    FastForward: PlyrLayoutIcon;
+    Muted: PlyrLayoutIcon;
+    Pause: PlyrLayoutIcon;
+    Play: PlyrLayoutIcon;
+    Restart: PlyrLayoutIcon;
+    Rewind: PlyrLayoutIcon;
+    Settings: PlyrLayoutIcon;
+    Volume: PlyrLayoutIcon;
+}

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

@@ -0,0 +1,6 @@
+export { type PlyrLayoutElementProps, PlyrLayout, PlyrAudioLayout, PlyrVideoLayout, } from './layout';
+export type { PlyrLayoutProps } from './props';
+export type { PlyrLayoutSlots, PlyrLayoutSlotName } from './slots';
+export type { PlyrControl, PlyrLayoutTranslations, PlyrLayoutWord, PlyrMarker } from 'vidstack';
+export * from './icons';
+export * from './context';

package/types/react/src/components/layouts/plyr/layout.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { type PrimitivePropsWithRef } from '../../primitives/nodes';
+import { type PlyrLayoutProps } from './props';
+export interface PlyrLayoutElementProps extends PlyrLayoutProps, PrimitivePropsWithRef<'div'> {
+}
+declare const PlyrLayout: React.ForwardRefExoticComponent<Omit<PlyrLayoutElementProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export { PlyrLayout };
+declare function PlyrAudioLayout(): React.JSX.Element;
+declare namespace PlyrAudioLayout {
+    var displayName: string;
+}
+export { PlyrAudioLayout };
+declare function PlyrVideoLayout(): React.JSX.Element;
+declare namespace PlyrVideoLayout {
+    var displayName: string;
+}
+export { PlyrVideoLayout };

package/types/react/src/components/layouts/plyr/props.d.ts

@@ -0,0 +1,71 @@
+import type { FileDownloadInfo, PlyrControl, PlyrLayoutTranslations, PlyrMarker, ThumbnailSrc } from 'vidstack';
+import type { PlyrLayoutIcons } from './icons';
+import type { PlyrLayoutSlots } from './slots';
+export declare const defaultPlyrLayoutProps: Omit<PlyrLayoutProps, 'icons' | 'slots' | 'posterFrame'>;
+export interface PlyrLayoutProps {
+    /**
+     * The icons to be rendered and displayed inside the layout.
+     */
+    icons: PlyrLayoutIcons;
+    /**
+     * The frame of the video to use as the poster. This only works with Remotion sources at the
+     * moment.
+     */
+    posterFrame?: number;
+    /**
+     * Press the video container to toggle play/pause.
+     */
+    clickToPlay?: boolean;
+    /**
+     * Double-press the video container to toggle fullscreen.
+     */
+    clickToFullscreen?: boolean;
+    /**
+     * The controls to be included in the layout and their order specified by the position in the
+     * array.
+     */
+    controls?: PlyrControl[];
+    /**
+     * Whether the duration should be displayed. This is ignored if `toggleTime` is `true`.
+     */
+    displayDuration?: boolean;
+    /**
+     * Sets the download URL and filename for the download button. The download button must be
+     * included in the `controls` prop for this to take effect.
+     */
+    download?: FileDownloadInfo;
+    /**
+     * Points on the time slider which should be visually marked for the user.
+     */
+    markers?: PlyrMarker[] | null;
+    /**
+     * Display the current time as a countdown rather than an incremental counter.
+     */
+    invertTime?: boolean;
+    /**
+     * The thumbnails resource.
+     *
+     * @see {@link https://www.vidstack.io/docs/wc/player/core-concepts/loading#thumbnails}
+     */
+    thumbnails?: ThumbnailSrc;
+    /**
+     * Allow users to press to toggle the inverted time.
+     */
+    toggleTime?: boolean;
+    /**
+     * Translation map from english to your desired language for words used throughout the layout.
+     */
+    translations?: Partial<PlyrLayoutTranslations> | null;
+    /**
+     * The time, in seconds, to seek when a user hits fast forward or rewind.
+     */
+    seekTime?: number;
+    /**
+     * The speed options to display in the UI.
+     */
+    speed?: (string | number)[];
+    /**
+     * Provide additional content to be inserted in specific positions.
+     */
+    slots?: PlyrLayoutSlots;
+}

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

@@ -0,0 +1,9 @@
+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 PlyrLayoutSlotName = 'airPlayButton' | 'captionsButton' | 'currentTime' | 'download' | 'duration' | 'fastForwardButton' | 'fullscreenButton' | 'liveButton' | 'muteButton' | 'pipButton' | 'playButton' | 'playLargeButton' | 'poster' | 'restartButton' | 'rewindButton' | 'rewindButton' | 'settings' | 'settingsButton' | 'timeSlider' | 'volumeSlider' | 'settingsMenu';
+export interface PlyrLayoutSlots extends Slots<PlyrLayoutSlotName> {
+}
+export declare function slot(name: PlyrLayoutSlotName, defaultValue: React.ReactNode): React.ReactNode;

package/types/react/src/components/layouts/remotion-ui.d.ts

@@ -0,0 +1,3 @@
+export declare const RemotionThumbnail: import("maverick.js").WriteSignal<import("react").LazyExoticComponent<import("react").ComponentType<any>> | null>;
+export declare const RemotionSliderThumbnail: import("maverick.js").WriteSignal<import("react").LazyExoticComponent<import("react").ComponentType<any>> | null>;
+export declare const RemotionPoster: import("maverick.js").WriteSignal<import("react").LazyExoticComponent<import("react").ComponentType<any>> | null>;

package/types/react/src/components/layouts/utils.d.ts

@@ -0,0 +1 @@
+export declare function useLayoutName(name: string): void;

package/types/react/src/components/player-callbacks.d.ts

@@ -0,0 +1,6 @@
+import type { InferComponentEvents } from 'maverick.js';
+import type { ReactEventCallbacks } from 'maverick.js/react';
+import type { MediaPlayerInstance } from './primitives/instances';
+type PlayerCallbacks = keyof ReactEventCallbacks<InferComponentEvents<MediaPlayerInstance>>;
+export declare const playerCallbacks: PlayerCallbacks[];
+export {};

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

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

package/types/react/src/components/primitives/instances.d.ts

@@ -0,0 +1,83 @@
+import { AirPlayButton, AudioGainSlider, CaptionButton, Captions, Controls, ControlsGroup, FullscreenButton, Gesture, GoogleCastButton, LiveButton, MediaAnnouncer, MediaPlayer, MediaProvider, Menu, MenuButton, MenuItem, MenuItems, MenuPortal, MuteButton, PIPButton, PlayButton, Poster, QualitySlider, Radio, RadioGroup, SeekButton, Slider, SliderChapters, SliderPreview, SliderThumbnail, SliderValue, SliderVideo, SpeedSlider, Thumbnail, Time, TimeSlider, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, VolumeSlider } from 'vidstack';
+export declare class MediaPlayerInstance extends MediaPlayer {
+}
+export declare class MediaProviderInstance extends MediaProvider {
+}
+export declare class MediaAnnouncerInstance extends MediaAnnouncer {
+}
+export declare class ControlsInstance extends Controls {
+}
+export declare class ControlsGroupInstance extends ControlsGroup {
+}
+export declare class ToggleButtonInstance extends ToggleButton {
+}
+export declare class CaptionButtonInstance extends CaptionButton {
+}
+export declare class FullscreenButtonInstance extends FullscreenButton {
+}
+export declare class LiveButtonInstance extends LiveButton {
+}
+export declare class MuteButtonInstance extends MuteButton {
+}
+export declare class PIPButtonInstance extends PIPButton {
+}
+export declare class PlayButtonInstance extends PlayButton {
+}
+export declare class AirPlayButtonInstance extends AirPlayButton {
+}
+export declare class GoogleCastButtonInstance extends GoogleCastButton {
+}
+export declare class SeekButtonInstance extends SeekButton {
+}
+export declare class TooltipInstance extends Tooltip {
+}
+export declare class TooltipTriggerInstance extends TooltipTrigger {
+}
+export declare class TooltipContentInstance extends TooltipContent {
+}
+export declare class SliderInstance extends Slider {
+}
+export declare class TimeSliderInstance extends TimeSlider {
+}
+export declare class VolumeSliderInstance extends VolumeSlider {
+}
+export declare class AudioGainSliderInstance extends AudioGainSlider {
+}
+export declare class SpeedSliderInstance extends SpeedSlider {
+}
+export declare class QualitySliderInstance extends QualitySlider {
+}
+export declare class SliderThumbnailInstance extends SliderThumbnail {
+}
+export declare class SliderValueInstance extends SliderValue {
+}
+export declare class SliderVideoInstance extends SliderVideo {
+}
+export declare class SliderPreviewInstance extends SliderPreview {
+}
+export declare class SliderChaptersInstance extends SliderChapters {
+}
+export declare class MenuInstance extends Menu {
+}
+export declare class MenuButtonInstance extends MenuButton {
+}
+export declare class MenuItemsInstance extends MenuItems {
+}
+export declare class MenuItemInstance extends MenuItem {
+}
+export declare class MenuPortalInstance extends MenuPortal {
+}
+export declare class RadioGroupInstance extends RadioGroup {
+}
+export declare class RadioInstance extends Radio {
+}
+export declare class CaptionsInstance extends Captions {
+}
+export declare class GestureInstance extends Gesture {
+}
+export declare class PosterInstance extends Poster {
+}
+export declare class ThumbnailInstance extends Thumbnail {
+}
+export declare class TimeInstance extends Time {
+}

package/types/react/src/components/primitives/nodes.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+declare const NODES: readonly ["button", "div", "span", "img", "video", "audio"];
+export declare const Primitive: Primitives;
+type PropsWithoutRef<P> = P extends any ? 'ref' extends keyof P ? Pick<P, Exclude<keyof P, 'ref'>> : P : P;
+export type ComponentPropsWithoutRef<T extends React.ElementType> = PropsWithoutRef<React.ComponentProps<T>>;
+type Primitives = {
+    [E in (typeof NODES)[number]]: PrimitiveForwardRefComponent<E>;
+};
+export type PrimitivePropsWithRef<E extends React.ElementType> = Omit<React.ComponentProps<E>, 'style'> & React.Attributes & {
+    asChild?: boolean;
+    style?: React.CSSProperties | (React.CSSProperties & Record<`--${string}`, string | null | undefined>) | undefined;
+};
+interface PrimitiveForwardRefComponent<E extends React.ElementType> extends React.ForwardRefExoticComponent<PrimitivePropsWithRef<E>> {
+}
+export {};

package/types/react/src/components/primitives/slot.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+declare const Slot: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
+declare const Slottable: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+declare const Root: React.ForwardRefExoticComponent<SlotProps & React.RefAttributes<HTMLElement>>;
+export { Slot, Slottable, Root };
+export type { SlotProps };

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

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

package/types/react/src/components/text-track.d.ts

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

package/types/react/src/components/ui/buttons/airplay-button.d.ts

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

package/types/react/src/components/ui/buttons/caption-button.d.ts

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