import type { GlobalProps } from '../../shared/global';
import { BaseImageProps } from '../../shared/image';
import { AccessibilityRole } from '../../shared/accessibility';
import { ExtractStrict } from '../../shared/utils';
import { BorderProps } from '../../shared/box';
/**
 * This is purely to give the ability
 * to have a space or not in the string literal types.
 *
 * For example in the `aspectRatio` property, `16/9` and `16 / 9` are both valid.
 */
export type optionalSpace = '' | ' ';
export interface ImageProps extends GlobalProps, BaseImageProps, BorderProps {
    /**
     * Sets the semantic meaning of the component’s content. When set,
     * the role will be used by assistive technologies to help users
     * navigate the page.
     *
     * @default 'img'
     *
     * @implementation The `img` role doesn't need to be applied if
     * the host applies it for you; for example, an HTML host rendering
     * an `<img>` element should not apply the `img` role.
     */
    accessibilityRole?: 'img' | ExtractStrict<AccessibilityRole, 'presentation' | 'none'>;
    /**
     * The displayed inline width of the image.
     *
     * `fill`: the image will takes up 100% of the available inline-size.
     * `auto`: the image will be displayed at its natural size.
     *
     * @default 'fill'
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width
     */
    inlineSize?: 'fill' | 'auto';
    /**
     * The aspect ratio of the image.
     *
     * - `auto`: the image will be displayed at its natural aspect ratio.
     *
     * The ratio will be respected even if the image hasn’t loaded yet unless it is set to `auto`. In that case, the
     * rendering will depends on the `inlineSize` value:
     *
     * - `inlineSize="fill"`: the aspect ratio will be `1/1`.
     * - `inlineSize="auto"`: the image will not render until it has loaded.
     *
     * Getters for this value should return `auto` or the ratio in `number / number` form. Input fractions should not be ‘simplified’.
     * For example, if the value is set as `50 /    100`, the getter returns `50 / 100`.
     * If the value is set as `0.5`, the getter returns `0.5 / 1`.
     *
     * @default 'auto'
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio
     */
    aspectRatio?: `${number}${optionalSpace}/${optionalSpace}${number}` | `${number}` | 'auto';
    /**
     * Determines how the content of the image is resized to fit its container.
     * The image is positioned in the center of the container.
     *
     * @default 'contain'
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
     */
    objectFit?: 'contain' | 'cover';
    /**
     * Determines the loading behavior of the image:
     * - `eager`: Immediately loads the image, irrespective of its position within the visible viewport.
     * - `lazy`: Delays loading the image until it approaches a specified distance from the viewport.
     *
     * @default `eager`
     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading
     */
    loading?: 'eager' | 'lazy';
    /**
     * Invoked when load completes successfully.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
     */
    onLoad?: () => void;
    /**
     * Invoked on load error.
     *
     * @see https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onerror
     */
    onError?: () => void;
}