import { ReactNode } from 'react';
import { ImageParams, RenderImageFn } from '@mercuriya/slate-gallery-common';
type RenderExtraProps = {
    images: ImageParams[];
    /**
     * Selected image index
     */
    index?: number;
};
export type GridProps = {
    images?: ImageParams[];
    /**
     * Grid size - number of images that will be visible for "readOnly: false" mode
     * The remaining images will be hidden, but user will have an ability to find them
     * by opening full screen slider
     *
     * min value: 1
     * max value: 9
     * default: 9
     */
    size: number;
    /**
     * A render function which should return a custom image component, for example
     * it could be wrapped into tooltip which shows image description
     */
    renderImage?: RenderImageFn;
    /**
     * A render function that allows you to place something like lightbox near your
     * images grid. It can be rendered in `readOnly: true` mode only
     */
    renderExtra?: (args: RenderExtraProps) => ReactNode;
    /**
     * Image wrapper custom className
     */
    imageWrapperClassName?: string;
    /**
     * Image custom className
     * We have a restriction here: if you will implement this property, then you
     * will have to add all css rules from default style, since, they will be skipped
     *
     * Example:
     * .custom-image-class {
     *   width: 100%;
     *   height: 100%;
     *   objectFit: cover;
     *   ...rest
     * }
     */
    imageClassName?: string;
    /**
     * Number of left images (+x) custom className
     * We have a restriction here: if you will implement this property, then you
     * will have to create all rules from scratch, since, they default styles be skipped
     */
    leftClassName?: string;
    gridClassName?: string;
};
export declare function Grid(props: GridProps): import("react/jsx-runtime").JSX.Element;
export {};