@payfit/unity-illustrations/dist/esm/components/illustration/Illustration.d.ts

import { VariantProps } from '@payfit/unity-themes';
import { ImgHTMLAttributes } from 'react';
import { UnityIllustrationAsset } from '../../generated/illustrationAssets.js';
export declare const illustratedPicture: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:object-contain uy:aspect-auto", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:object-contain uy:aspect-auto", unknown, unknown, undefined>>;
export declare const illustratedIcon: import('tailwind-variants').TVReturnType<{
    size: {
        sm: string;
        md: string;
        lg: string;
    };
}, undefined, "uy:object-contain uy:aspect-square", {
    size: {
        sm: string;
        md: string;
        lg: string;
    };
}, undefined, import('tailwind-variants').TVReturnType<{
    size: {
        sm: string;
        md: string;
        lg: string;
    };
}, undefined, "uy:object-contain uy:aspect-square", unknown, unknown, undefined>>;
interface IllustrationPropsCore extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'src' | 'children' | 'alt'> {
    /**
     * The illustration asset to render. Must be imported from @payfit/unity-illustrations
     */
    src: UnityIllustrationAsset;
}
interface NonDecorativeIllustrationProps extends IllustrationPropsCore {
    /** Whether this is decorative (hidden from screen readers) */
    isDecorative?: false | undefined;
    /** Accessible name for the illustration - required when not decorative */
    alt: string;
    /** Optional description for complex illustrations */
    description?: string;
}
interface DecorativeIllustrationProps extends IllustrationPropsCore {
    /** Whether this is decorative (hidden from screen readers) */
    isDecorative: true;
    /** Accessible name for the illustration - optional when decorative */
    alt?: string;
}
export type IllustrationPropsBase = NonDecorativeIllustrationProps | DecorativeIllustrationProps;
export type IllustratedPictureProps = IllustrationPropsBase & VariantProps<typeof illustratedPicture> & {
    /**
     * The illustration variant. It can be a regular picture or an illustrated icon
     */
    variant: 'picture';
};
export type IllustratedIconProps = IllustrationPropsBase & VariantProps<typeof illustratedIcon> & {
    /**
     * The illustration variant. It can be a regular picture or an illustrated icon
     */
    variant: 'icon';
    /**
     * The size of the illustration. It only applies to illustrated icons
     */
    size: VariantProps<typeof illustratedIcon>['size'];
};
export type IllustrationProps = IllustratedPictureProps | IllustratedIconProps;
/**
 * Renders illustrations from the Unity design system with consistent styling and accessibility features.
 *
 * The Illustration component provides a standardized way to display SVG illustrations and images
 * , ensuring consistent sizing, responsive behavior, and accessibility compliance.
 * @param {IllustrationProps} props - Component props including variant, src, size, and standard HTML attributes
 * @see {@link IllustrationProps} for all available props
 * @example
 * ```tsx
 * import { Illustration } from '@payfit/unity-illustrations'
 * import FAQ from '@payfit/unity-illustrations/FAQ'
 *
 * function Example() {
 *   return (
 *     <Illustration
 *       variant="picture"
 *       src={FAQ}
 *       className="uy:size-[150px]"
 *       alt="FAQ illustration"
 *     />
 *   )
 * }
 * ```
 * @remarks
 * You must import illustration assets individually from `@payfit/unity-illustrations/[AssetName]` to use with this component.
 * See the [usage documentation](https://unity-illustrations.payfit.io/?path=/docs/introduction-usage--docs) for complete examples and best practices.
 */
export declare const Illustration: import('react').ForwardRefExoticComponent<IllustrationProps & import('react').RefAttributes<HTMLImageElement>>;
export {};