import { CSSProperties, ReactNode } from 'react';
import { SlotClassNames, SlotStyles, HtmlProps } from '../types/slots.types.js';
export type LightboxSlots = 'root' | 'toolbar' | 'counter' | 'actions' | 'zoomButton' | 'closeButton' | 'figure' | 'image' | 'glow' | 'caption';
export interface LightboxImage {
    src: string;
    /** Read out by screen readers. Describe the picture, or pass `''` for a purely decorative one. */
    alt: string;
    /** Shown under the image. */
    caption?: ReactNode;
    /** A small version shown until `src` has loaded, usually the one in your grid, which the browser already has. Best in the same aspect ratio. */
    thumbnail?: string;
    /** The image's own width in pixels, with `height`, so the thumbnail takes the image's size from the start. Without them it does once the first bytes are in. */
    width?: number;
    /** The image's own height in pixels, with `width`. */
    height?: number;
}
/** Text Lightbox renders of its own, for translating it. */
export interface LightboxLabels {
    /** The dialog's name, read out by screen readers unless `aria-label` is passed. */
    dialog?: string;
    /** Close button, and its tooltip. */
    close?: string;
    /** Button to the previous image, and its tooltip. */
    previous?: string;
    /** Button to the next image, and its tooltip. */
    next?: string;
    /** Toolbar button that zooms the image on show in, and its tooltip. */
    zoomIn?: string;
    /** The same button once zoomed in, back to the fitted view. */
    zoomOut?: string;
    /** In place of an image that failed to load. */
    loadError?: string;
    /** Position in the set, given the 1-based position and the number of images. */
    counter?: (position: number, count: number) => string;
}
export interface LightboxProps extends Omit<HtmlProps<HTMLDivElement>, 'onChange'> {
    images: LightboxImage[];
    isOpen?: boolean;
    /** Called on the close button and on Escape. */
    onClose?: () => void;
    /** Controlled index of the image on show. */
    currentIndex?: number;
    /** Image to open on when uncontrolled. Read each time the lightbox opens. @default 0 */
    defaultIndex?: number;
    /** Called whenever the image changes, from the arrows, the arrow keys or a swipe. */
    onChange?: (index: number) => void;
    /** Buttons of your own for the image on show, in the toolbar before the close button. `ActionIcon` fits. */
    actions?: (image: LightboxImage, index: number) => ReactNode;
    /** The element in your grid that shows the image, usually its `<img>`. The image grows out of it as the viewer opens, and shrinks back into the one on show as it closes. */
    getThumbnail?: (image: LightboxImage, index: number) => HTMLElement | null | undefined;
    /** A soft glow in the image's own colours around it. Costs frame rate on weak phones. @default false */
    glow?: boolean;
    className?: string;
    style?: CSSProperties;
    classNames?: SlotClassNames<LightboxSlots>;
    styles?: SlotStyles<LightboxSlots>;
    /** Overrides the text Lightbox renders of its own. Merged per key. */
    labels?: LightboxLabels;
}