import { type Resource, type Server } from '@tomic/lib';
import React from 'react';
type SizeIndicationKey = `${number}px`;
type Unit = number | `${number}${'px' | 'vw' | 'em' | 'rem' | 'ch'}`;
export type SizeIndication = {
    [key: SizeIndicationKey]: Unit;
    default: Unit;
} | Unit;
interface ImageInnerProps extends Omit<React.ImgHTMLAttributes<HTMLPictureElement>, 'resource' | 'src'> {
    resource: Resource<Server.File>;
    /**
     * SizeIndication is used to help the browser choose the right image size to fetch.
     * By default, the browser looks at the entire viewport width and chooses the smallest version that still covers this width.
     * This is often too big so we should help by giving it an approximation of the size of the image relative to the viewport.
     *
     * When the unit given is a number it is interpreted as a percentage of the viewport width. If your image is displayed in a static size you can also pass a string like '4rem'.
     * Note that percentages don't work as the browser doesn't know the size of the parent element yet.
     *
     * ```jsx
     * <Image
     *  className='inline-image'
     *  subject='http://myatomicserver.com/files/1664878581079-hiker.jpg'
     *  alt='a person standing in front of a mountain'
     *  sizeIndication={50} // the image is about 50% of the viewport width
     * />
     * ```
     * When the image size changes based on media queries we can give the browser a more detailed indication.
     * ```jsx
     * <Image
     *  className='inline-image'
     *  subject='http://myatomicserver.com/files/1664878581079-hiker.jpg'
     *  alt='a person standing in front of a mountain'
     *  sizeIndication={{
     *    '500px': 100, // On screens smaller than 500px the image is displayed at full width.
     *    default: 50, // the image is about 50% of the viewport when no media query matches
     *  }}
     * />
     * ```
     */
    sizeIndication?: SizeIndication;
    /** Alt text for the image, if you can't add alt text it's best practice to pass an empty string */
    alt: string;
    /** Quality setting used by the image encoders, defaults to 60 (more than enough in most cases). Should be between 0 - 100 */
    quality?: number;
}
export interface ImageProps extends Omit<ImageInnerProps, 'resource'> {
    /** Subject of the file resource */
    subject: string;
}
/**
 * Takes the subject of a file resource and renders it as an image.
 * Uses AtomicServer to automatically generate avif and webp versions of the image and scale them to different sizes.
 * To help the browser choose the best size to load use the `sizeIndication` prop.
 *
 * Throws when the file is not an image.
 * @example
 * ```jsx
 * <Image
 *  subject='http://myatomicserver.com/files/1664878581079-hiker.jpg'
 *  alt='a person standing in front of a mountain'
 *  className='article-inline-image'
 *  loading='lazy'
 *  sizeIndication={{
 *    '500px': 100, // On screens smaller than 500px the image is displayed at full width.
 *    default: 50, // the image is about 50% of the viewport when no media query matches
 *  }}
 * />
 * ```
 */
export declare const Image: React.FC<ImageProps>;
export {};
//# sourceMappingURL=Image.d.ts.map