@furystack/shades-common-components/esm/components/image.d.ts

Common UI components for FuryStack Shades

export type ImageProps = {
    /**
     * The image source URL
     */
    src: string;
    /**
     * Alt text for the image
     */
    alt?: string;
    /**
     * Width of the image
     */
    width?: string;
    /**
     * Height of the image
     */
    height?: string;
    /**
     * Object-fit CSS property for the image
     */
    objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
    /**
     * Fallback content to display when the image fails to load
     */
    fallback?: JSX.Element | string;
    /**
     * Whether clicking the image opens a preview lightbox
     */
    preview?: boolean;
    /**
     * Whether to use lazy loading (loading="lazy")
     */
    lazy?: boolean;
    /**
     * Optional style overrides
     */
    style?: Partial<CSSStyleDeclaration>;
};
export type ImageGroupProps = {
    /**
     * Gap between images
     */
    gap?: string;
};
/**
 * Image component with preview lightbox, zoom/rotate, fallback, and lazy loading support.
 */
export declare const Image: (props: ImageProps & Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
/**
 * ImageGroup wraps multiple Image components and enables group preview navigation.
 * When one image is clicked, the lightbox shows navigation controls to browse all images in the group.
 */
export declare const ImageGroup: (props: ImageGroupProps & Omit<Partial<HTMLElement>, "style"> & {
    style?: Partial<CSSStyleDeclaration>;
} & {
    ref?: import("@furystack/shades").RefObject<Element>;
}, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
//# sourceMappingURL=image.d.ts.map