import type { ComponentPropsWithRef, ReactNode } from "react";
export type MediaTileRatio = "poster" | "square" | "video";
export type MediaTileProps = Omit<ComponentPropsWithRef<"figure">, "children"> & {
    /**
     * Required. The one thing three hand-rolled poster grids all
     * omit — and a 200-tile page of unnamed images is unnavigable
     * rather than merely imperfect.
     */
    alt: string;
    aspectRatio?: MediaTileRatio;
    /** A `Badge`, usually. Pinned inside the media box. */
    badge?: ReactNode;
    /** Shown in place of the image when it fails. */
    fallback?: ReactNode;
    /** Untruncated content beneath the title and subtitle. No nested controls in an interactive tile. */
    details?: ReactNode;
    /** Keep the entire object visible, or fill the frame. */
    imageFit?: "cover" | "contain";
    /** Put a thumbnail beside the caption for a compact list. */
    layout?: "vertical" | "horizontal";
    isTitleTruncated?: boolean;
    href?: string;
    /**
     * Makes the tile a button. Hover, focus-visible and
     * `cursor-pointer` come with it — wrapping `MediaTile` in a
     * bare `<button>` is how a poster ends up with a text cursor
     * and no hover at all. `href` wins if both are set.
     */
    isDisabled?: boolean;
    onClick?: ComponentPropsWithRef<"button">["onClick"];
    src?: string;
    subtitle?: ReactNode;
    title: string;
};
/**
 * Three repos, and shipping one of these is what makes
 * plex-channels, image-viewer, and gallery-downloader look like one
 * family instead of three.
 *
 * The interesting part is not the layout, it is the three states an
 * image has and the fact that no hand-rolled version models them:
 *
 *  - **Loading** shows a `Skeleton` at the tile's exact aspect ratio,
 *    so the grid does not reflow when 200 posters land. Layout shift
 *    is the thing users notice in these apps today.
 *  - **Error** keeps the tile's box and its name. An `<img>` with a
 *    broken `src` collapses to a glyph and takes the row's height
 *    with it; the fallback here is a `role="img"` carrying the same
 *    `alt`, so the tile stays findable and the grid stays a grid.
 *  - **Cached** is the case that bites: a `complete` image never
 *    fires `load`, so a naive `onLoad`-only implementation leaves a
 *    shimmering skeleton over a perfectly rendered poster forever.
 *    The effect below checks `complete`/`naturalWidth` on mount and
 *    on every `src` change.
 *
 * Those states are a `useStatus` machine rather than a
 * `useState<string>`, which is what makes `loaded → error`
 * impossible instead of merely unlikely — see `mediaStatus.ts`.
 */
export declare const MediaTile: ({ alt, aspectRatio, badge, className, fallback, details, imageFit, layout, isTitleTruncated, href, isDisabled, onClick, src, subtitle, title, ...figureProps }: MediaTileProps) => ReactNode;
//# sourceMappingURL=MediaTile.d.ts.map