@codeworker.br/govbr-tw-react/dist/components/PhotoGallery/index.d.ts

Biblioteca de componentes React usando Tailwind CSS que implementa o Padrão Digital de Governo.

import { HTMLAttributes } from "react";
type PhotoGalleryVariant = "light" | "dark";
type FieldSelector<TItem> = keyof TItem extends string ? keyof TItem | string | ((item: TItem) => unknown) : string | ((item: TItem) => unknown);
export type PhotoGalleryFieldMap<TItem> = {
    /**
     * Path or getter that resolves to the full sized image URL.
     */
    image?: FieldSelector<TItem>;
    /**
     * Path or getter for the thumbnail image URL. Falls back to the `image` value.
     */
    thumbnail?: FieldSelector<TItem>;
    /**
     * Path or getter for the image title.
     */
    title?: FieldSelector<TItem>;
    /**
     * Path or getter for the image description.
     */
    description?: FieldSelector<TItem>;
    /**
     * Path or getter for the attribution label (e.g. source name).
     */
    attributionLabel?: FieldSelector<TItem>;
    /**
     * Path or getter for the attribution URL.
     */
    attributionUrl?: FieldSelector<TItem>;
    /**
     * Path or getter that indicates the media type ("image" | "video").
     */
    mediaType?: FieldSelector<TItem>;
    /**
     * Path or getter for the video URL (e.g., YouTube).
     */
    videoUrl?: FieldSelector<TItem>;
    /**
     * Path or getter for the video identifier (e.g., YouTube video ID).
     */
    videoId?: FieldSelector<TItem>;
    /**
     * Path or getter for the video provider (e.g., "youtube").
     */
    videoProvider?: FieldSelector<TItem>;
};
export interface PhotoGalleryProps<TItem = Record<string, unknown>> extends HTMLAttributes<HTMLDivElement> {
    /**
     * The raw list of media objects to be rendered.
     */
    items: TItem[];
    /**
     * Mapping used to resolve the relevant fields inside each item.
     */
    fieldMap?: Partial<PhotoGalleryFieldMap<TItem>>;
    /**
     * Accessible label for the gallery main region.
     */
    ariaLabel?: string;
    /**
     * Message displayed when there are no media items.
     */
    emptyStateLabel?: string;
    /**
     * Visual variant of the gallery.
     */
    variant?: PhotoGalleryVariant;
    /**
     * Maximum number of characters shown in the main caption area before truncation.
     */
    captionMaxLength?: number;
    /**
     * Determines how the image is rendered inside the fullscreen lightbox.
     */
    fullscreenFit?: "contain" | "cover";
    /**
     * Custom labels for internationalization.
     */
    labels?: Partial<PhotoGalleryLabels>;
}
export type PhotoGalleryLabels = {
    galleryLabel: string;
    emptyState: string;
    previousImageButton: string;
    nextImageButton: string;
    scrollThumbnailsLeft: string;
    scrollThumbnailsRight: string;
    creditPrefix: string;
    closeLightbox: string;
    openLightbox: string;
    selectedImageAlt: string;
    fullscreenImageAlt: string;
    thumbnailAlt: string;
    thumbnailButton: string;
    openVideoLightbox: string;
    videoPreviewAlt: string;
    videoIframeTitle: string;
};
export declare function PhotoGallery<TItem = Record<string, unknown>>({ items, fieldMap, className, ariaLabel, emptyStateLabel, variant, captionMaxLength, fullscreenFit, labels: labelsProp, ...rest }: PhotoGalleryProps<TItem>): import("react/jsx-runtime").JSX.Element;
export default PhotoGallery;