import type { BaseProps } from '../BaseProps';
export interface ThumbnailProps extends BaseProps<HTMLDivElement> {
    /** Ref forwarded to the root element */
    ref?: React.Ref<HTMLDivElement>;
    /**
     * Image source for the thumbnail preview.
     * Shows a skeleton while loading, the image on success, or a placeholder on error.
     */
    src?: string;
    /**
     * Alt text for the image.
     *
     * When omitted, the image is explicitly decorative (`alt=""` +
     * `role="presentation"` + `aria-hidden`, matching Avatar) and hidden from
     * assistive technology. Provide `alt` whenever the image conveys content;
     * without it, screen reader users only hear the `label` (file name), or a
     * generic "thumbnail" if `label` is also missing — which triggers a
     * dev-time warning.
     */
    alt?: string;
    /**
     * Accessible label for the thumbnail (e.g. file name).
     * Not rendered visually — shown in a tooltip on hover, exposed as the
     * accessible name of the thumbnail group, and used as the accessible
     * name for the remove button.
     */
    label?: string;
    /**
     * Callback when the remove button is clicked.
     * When provided, an overlaid close button appears in the top-right corner.
     */
    onRemove?: (e: React.MouseEvent) => void;
    /**
     * Click handler for opening a lightbox or detail view.
     * When provided, the thumbnail renders as interactive.
     */
    onClick?: (e: React.MouseEvent) => void;
    /**
     * Content rendered below the thumbnail image area.
     * Use for metadata like file size, duration, or status.
     */
    /**
     * Whether the thumbnail is in a loading state.
     * Shows a skeleton shimmer regardless of `src`. Use while uploading
     * or processing before an image URL is available.
     * @default false
     */
    isLoading?: boolean;
    /**
     * Whether the thumbnail is in a disabled state.
     * @default false
     */
    isDisabled?: boolean;
    /**
     * When the remove button is visible.
     * - `'hover'` — the button is revealed on hover, and on keyboard focus so
     *   it stays reachable. On any touch-capable device it stays visible.
     *   This is the default.
     * - `'always'` — the button is always shown.
     *
     * Only has an effect when `onRemove` is set.
     * @default 'hover'
     */
    showRemoveOn?: 'always' | 'hover';
    /**
     * Test ID for testing frameworks.
     */
    'data-testid'?: string;
}
/**
 * A square thumbnail preview for image attachments.
 *
 * Shows a skeleton shimmer while the image loads, the image on success, or
 * a placeholder icon on failure / when no src is provided. An overlaid
 * remove button appears when `onRemove` is set — revealed on hover or
 * keyboard focus by default (`showRemoveOn`), or always shown.
 *
 * The remove button uses a fixed `--color-overlay` scrim with an
 * `--color-on-dark` icon so it stays legible on any image without sampling
 * the image's luminance.
 *
 * @example
 * ```
 * <Thumbnail src="/photo.jpg" alt="Vacation photo" onRemove={() => {}} />
 * <Thumbnail src="/preview.png" alt="Preview" onClick={() => {}} label="preview.png" />
 * <Thumbnail src="/logo.png" alt="Logo" onRemove={() => {}} showRemoveOn="always" />
 * ```
 */
export declare function Thumbnail({ src, alt, label, onRemove, onClick, isLoading, isDisabled, showRemoveOn, xstyle, className, style, 'data-testid': testId, ref, ...props }: ThumbnailProps): import("react").JSX.Element;
export declare namespace Thumbnail {
    var displayName: string;
}
//# sourceMappingURL=Thumbnail.d.ts.map