@pixel-puppy/react/dist/Image.stories.d.ts

Official React library for Pixel Puppy - Transform and optimize images with WebP conversion and smart resizing

import type { StoryObj } from '@storybook/react';
declare const meta: {
    title: string;
    component: import("react").ForwardRefExoticComponent<import("./Image").ImageProps & import("react").RefAttributes<HTMLImageElement>>;
    parameters: {
        layout: string;
    };
    tags: string[];
    argTypes: {
        project: {
            control: "text";
            description: string;
        };
        src: {
            control: "text";
            description: string;
        };
        width: {
            control: "number";
            description: string;
        };
        format: {
            control: "radio";
            options: string[];
            description: string;
        };
        alt: {
            control: "text";
            description: string;
        };
        loading: {
            control: "radio";
            options: string[];
            description: string;
        };
        sizes: {
            control: "text";
            description: string;
        };
    };
    args: {
        project: string;
        src: string;
        alt: string;
        width: number;
    };
};
export default meta;
type Story = StoryObj<typeof meta>;
/**
 * Default image with WebP format (automatic optimization).
 * Width is controlled via CSS instead of the width prop, which demonstrates
 * the default responsive strategy with all device breakpoints.
 */
export declare const Default: Story;
/**
 * Image resized to 400px width while maintaining aspect ratio.
 */
export declare const WithWidth: Story;
/**
 * Image in PNG format instead of WebP.
 */
export declare const PngFormat: Story;
/**
 * Large image (1920px) suitable for hero sections.
 */
export declare const LargeHero: Story;
/**
 * Medium image (800px) suitable for content sections.
 */
export declare const MediumContent: Story;
/**
 * Small thumbnail (200px) suitable for cards or lists.
 */
export declare const SmallThumbnail: Story;
/**
 * Image with custom styling using className.
 */
export declare const WithCustomStyling: Story;
/**
 * Image with lazy loading enabled for better performance.
 */
export declare const LazyLoading: Story;
/**
 * Portrait orientation image.
 */
export declare const Portrait: Story;
/**
 * Landscape orientation image.
 */
export declare const Landscape: Story;
/**
 * Multiple images in a grid layout.
 */
export declare const ImageGrid: Story;
/**
 * Responsive image that adapts to container size.
 */
export declare const Responsive: Story;
/**
 * Image with automatic srcset generation.
 * The component automatically generates srcset with common device widths
 * (640, 750, 828, 1080, 1200, 1920, 2048, 3840) plus the provided width.
 * The browser will select the most appropriate size based on the device and viewport.
 */
export declare const WithSrcSet: Story;
/**
 * Image with custom sizes attribute.
 * The sizes attribute tells the browser how much space the image will occupy,
 * helping it choose the optimal image from the srcset.
 * This example shows an image that takes 50% viewport width on large screens
 * and full width on mobile.
 */
export declare const WithCustomSizes: Story;
/**
 * Full-width hero image with responsive srcset.
 * Uses default sizes attribute optimized for full-width hero sections.
 */
export declare const ResponsiveHero: Story;
/**
 * Image without width prop.
 * Even without a width prop, the component generates a responsive srcset
 * with all common device sizes (640-3840px).
 */
export declare const WithoutWidth: Story;
//# sourceMappingURL=Image.stories.d.ts.map