@primer/react-brand/lib/MediaPlaylist/MediaPlaylist.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React from 'react';
import { type HeadingProps, type TextProps } from '..';
import type { BaseProps } from '../component-helpers';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/media-playlist/colors-with-modes.css';
export type MediaPlaylistProps = React.PropsWithChildren<{
    /**
     * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.
     */
    defaultSelectedIndex?: number;
    /**
     * The index of the currently selected item. This makes the component controlled.
     */
    selectedIndex?: number;
    /**
     * Callback fired when the selected index changes.
     */
    onChange?: (selectedIndex: number) => void;
    'data-testid'?: string;
}> & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'>;
export type MediaPlaylistHeadingProps = React.PropsWithChildren<{
    as?: Exclude<HeadingProps['as'], 'h1'>;
}> & BaseProps<HTMLDivElement>;
type MediaPlaylistHeadingInternalProps = {
    activeIndex?: number | null;
    itemCount?: number;
};
declare function MediaPlaylistHeading({ activeIndex, as, children, className, id, itemCount, ...props }: MediaPlaylistHeadingProps & MediaPlaylistHeadingInternalProps): import("react/jsx-runtime").JSX.Element;
export type MediaPlaylistItemProps = React.PropsWithChildren<{
    /**
     * An optional thumbnail to be shown in the playlist for this item.
     */
    thumbnail?: React.ReactNode;
} & BaseProps<HTMLDivElement>>;
declare function MediaPlaylistItem({ children }: MediaPlaylistItemProps): import("react/jsx-runtime").JSX.Element;
export type MediaPlaylistItemHeadingProps = Omit<TextProps, 'as' | 'children' | 'title'> & {
    children?: React.ReactNode;
    description?: React.ReactNode;
    title?: React.ReactNode;
};
declare function MediaPlaylistItemHeading({ children, className, description, font, size, title, variant, weight, ...props }: MediaPlaylistItemHeadingProps): import("react/jsx-runtime").JSX.Element;
export type MediaPlaylistItemContentProps = React.HTMLAttributes<HTMLDivElement>;
declare function MediaPlaylistItemContent({ children, className, ...props }: MediaPlaylistItemContentProps): import("react/jsx-runtime").JSX.Element;
export type MediaPlaylistItemMediaProps = React.HTMLAttributes<HTMLDivElement>;
/**
 * Use MediaPlaylist to pair media playback with an itemized, thumbnail-backed playlist.
 */
export declare const MediaPlaylist: React.ForwardRefExoticComponent<{
    /**
     * The index of the item to be selected by default. This is ignored if `selectedIndex` is provided.
     */
    defaultSelectedIndex?: number;
    /**
     * The index of the currently selected item. This makes the component controlled.
     */
    selectedIndex?: number;
    /**
     * Callback fired when the selected index changes.
     */
    onChange?: (selectedIndex: number) => void;
    'data-testid'?: string;
} & {
    children?: React.ReactNode | undefined;
} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLDivElement>> & {
    Heading: typeof MediaPlaylistHeading;
    Item: typeof MediaPlaylistItem;
    ItemHeading: typeof MediaPlaylistItemHeading;
    ItemContent: typeof MediaPlaylistItemContent;
    ItemMedia: React.ForwardRefExoticComponent<MediaPlaylistItemMediaProps & React.RefAttributes<HTMLDivElement>>;
    testIds: {
        root: string;
    };
};
export {};