@chayns-components/gallery 5.2.4 → 5.2.6

package/lib/types/components/gallery-editor/gallery-editor-item/GalleryEditorItem.types.d.ts

@@ -11,6 +11,14 @@ export interface GalleryEditorItemProps {
      * <GalleryEditorItem fileItem={fileItem} handleDeleteFile={handleDeleteFile} onClick={handleOpen} />
      */
     fileItem: InternalFileItem;
+    /**
+     * Controls whether the item may load the final media source immediately.
+     * @description
+     * The item forwards this flag to the shared media renderer so uploaded media can stay on the preview until loading is allowed.
+     * @default true
+     * @optional
+     */
+    shouldLoadImages?: boolean;
     /**
      * Is called when the delete button is clicked in edit mode.
      * @description

package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React from 'react';
 import type { GalleryEditorMediaItemProps } from './GalleryEditorMediaItem.types';
-declare const GalleryEditorMediaItem: FC<GalleryEditorMediaItemProps>;
-export default GalleryEditorMediaItem;
+declare const _default: React.NamedExoticComponent<GalleryEditorMediaItemProps>;
+export default _default;

package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.styles.d.ts

@@ -1,3 +1,5 @@
 export declare const StyledMotionGalleryEditorMediaItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+}, never> & Partial<Pick<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;

package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-media-item/GalleryEditorMediaItem.types.d.ts

@@ -11,6 +11,14 @@ export interface GalleryEditorMediaItemProps {
      * <GalleryEditorMediaItem fileItem={fileItem} onClick={handleOpen} ratio={1} />
      */
     fileItem: InternalFileItem;
+    /**
+     * Controls whether the media renderer may load the final uploaded source immediately.
+     * @description
+     * When disabled, the shared media renderer keeps showing the preview until the parent gallery allows the final load.
+     * @default true
+     * @optional
+     */
+    shouldLoadImages?: boolean;
     /**
      * Is called when the media tile is selected.
      * @description
@@ -27,4 +35,11 @@ export interface GalleryEditorMediaItemProps {
      * <GalleryEditorMediaItem fileItem={fileItem} openSelectedFile={handleOpen} ratio={1.5} />
      */
     ratio: number;
+    /**
+     * Provides an optional preview source that can be shown before the final uploaded media loads.
+     * @description
+     * This is typically the local base64 preview generated while the file is still being uploaded.
+     * @optional
+     */
+    previewUrl?: string;
 }

package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React from 'react';
 import type { GalleryEditorPreviewItemProps } from './GalleryEditorPreviewItem.types';
-declare const GalleryEditorPreviewItem: FC<GalleryEditorPreviewItemProps>;
-export default GalleryEditorPreviewItem;
+declare const _default: React.NamedExoticComponent<GalleryEditorPreviewItemProps>;
+export default _default;

package/lib/types/components/gallery-editor/gallery-editor-item/gallery-editor-preview-item/GalleryEditorPreviewItem.styles.d.ts

@@ -1,10 +1,16 @@
 export declare const StyledMotionGalleryEditorPreviewItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, never>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
-export declare const StyledGalleryEditorPreviewItemImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+}, never> & Partial<Pick<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledGalleryEditorPreviewItemImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$ratio"> & {
+    $ratio: number;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$ratio"> & {
     $ratio: number;
-}>> & string;
-export declare const StyledGalleryEditorPreviewItemImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
+}, never>>> & string;
+export declare const StyledGalleryEditorPreviewItemImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
+    theme: import("@chayns-components/core").Theme;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
     theme: import("@chayns-components/core").Theme;
-}>> & string;
-export declare const StyledGalleryEditorPreviewItemLoadingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+}, never>>> & string;
+export declare const StyledGalleryEditorPreviewItemLoadingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/lib/types/components/gallery-editor/useGalleryEditorState.d.ts

@@ -0,0 +1,21 @@
+import { type FileItem, type InternalFileItem } from '@chayns-components/core';
+import { type DragEvent } from 'react';
+type UseGalleryEditorStateOptions = {
+    allowDragAndDrop: boolean;
+    doubleFileDialogMessage: string;
+    files?: FileItem[];
+    maxFiles?: number;
+    onAdd?: (file: FileItem) => void;
+    onFileCountChange?: (fileCount: number) => void;
+    onRemove?: (file: FileItem) => void;
+};
+type GalleryEditorStateResult = {
+    fileItems: InternalFileItem[];
+    handleAddFiles: (filesToAdd: File[]) => void;
+    handleClear: () => void;
+    handleDeleteFile: (id?: string) => void;
+    handleDrop: (event: DragEvent<HTMLDivElement>) => void;
+    handleOpenFiles: (file: InternalFileItem) => void;
+};
+declare const useGalleryEditorState: ({ allowDragAndDrop, doubleFileDialogMessage, files, maxFiles, onAdd, onFileCountChange, onRemove, }: UseGalleryEditorStateOptions) => GalleryEditorStateResult;
+export default useGalleryEditorState;

package/lib/types/components/gallery-viewer/GalleryViewer.constants.d.ts

@@ -0,0 +1 @@
+export declare const GALLERY_VIEWER_MAX_VISIBLE_ITEMS = 4;

package/lib/types/components/gallery-viewer/GalleryViewer.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React from 'react';
 import type { GalleryViewerProps } from './GalleryViewer.types';
-declare const GalleryViewer: FC<GalleryViewerProps>;
-export default GalleryViewer;
+declare const _default: React.NamedExoticComponent<GalleryViewerProps>;
+export default _default;

package/lib/types/components/gallery-viewer/GalleryViewer.styles.d.ts

@@ -1,7 +1,11 @@
 import { GalleryViewMode } from '../../types/gallery';
-export declare const StyledGalleryViewer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledGalleryViewerItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledGalleryViewer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledGalleryViewerItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$ratio" | "$itemCount" | "$viewMode"> & {
     $itemCount: number;
     $ratio: number;
     $viewMode: GalleryViewMode;
-}>> & string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$ratio" | "$itemCount" | "$viewMode"> & {
+    $itemCount: number;
+    $ratio: number;
+    $viewMode: GalleryViewMode;
+}, never>>> & string;

package/lib/types/components/gallery-viewer/GalleryViewer.types.d.ts

@@ -13,6 +13,17 @@ export interface GalleryViewerProps {
      * @optional
      */
     files?: FileItem[];
+    /**
+     * Controls whether the viewer may load the final media assets immediately.
+     * @description
+     * When set to `true`, the viewer renders and loads the actual images right away.
+     * When set to `false`, the viewer keeps showing previews first and defers the final image load until this flag becomes `true`.
+     * @default true
+     * @example
+     * <GalleryViewer files={files} shouldLoadImages={false} />
+     * @optional
+     */
+    shouldLoadImages?: boolean;
     /**
      * Defines how the media tiles are arranged in read-only mode.
      * @description

package/lib/types/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React from 'react';
 import type { GalleryViewerItemProps } from './GalleryViewerItem.types';
-declare const GalleryViewerItem: FC<GalleryViewerItemProps>;
-export default GalleryViewerItem;
+declare const _default: React.NamedExoticComponent<GalleryViewerItemProps>;
+export default _default;

package/lib/types/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.styles.d.ts

@@ -1,2 +1,2 @@
-export declare const StyledGalleryViewerItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const StyledGalleryViewerMoreItemsIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGalleryViewerItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledGalleryViewerMoreItemsIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/lib/types/components/gallery-viewer/gallery-viewer-item/GalleryViewerItem.types.d.ts

@@ -11,6 +11,14 @@ export interface GalleryViewerItemProps {
      * <GalleryViewerItem fileItem={file} onClick={handleOpen} />
      */
     fileItem: FileItem;
+    /**
+     * Controls whether the item may load the final media source immediately.
+     * @description
+     * The item forwards this flag to the shared media renderer so preview-first rendering can be controlled by the parent gallery.
+     * @default true
+     * @optional
+     */
+    shouldLoadImages?: boolean;
     /**
      * Defines the aspect ratio that should be reserved for the tile.
      * @description

package/lib/types/components/media-content/MediaContent.constants.d.ts

@@ -0,0 +1,4 @@
+export declare const MEDIA_CONTENT_IMAGE_FADE_DURATION_MS = 180;
+export declare const MEDIA_CONTENT_PREVIEW_BLUR = "blur(6px)";
+export declare const MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DELAY_MS = 100;
+export declare const MEDIA_CONTENT_PREVIEW_BLUR_REMOVE_DURATION_MS = 200;

package/lib/types/components/media-content/MediaContent.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import React from 'react';
 import type { MediaContentProps } from './MediaContent.types';
-declare const MediaContent: FC<MediaContentProps>;
-export default MediaContent;
+declare const _default: React.NamedExoticComponent<MediaContentProps>;
+export default _default;

package/lib/types/components/media-content/MediaContent.styles.d.ts

@@ -1,13 +1,54 @@
-export declare const StyledMediaContentVideoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+export declare const StyledMediaContentVideoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$ratio"> & {
     $ratio: number;
-}>> & string;
-export declare const StyledMediaContentImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$ratio"> & {
     $ratio: number;
-}>> & string;
-export declare const StyledMediaContentImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
+}, never>>> & string;
+export declare const StyledMediaContentImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$ratio"> & {
+    $ratio: number;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$ratio"> & {
+    $ratio: number;
+}, never>>> & string;
+export declare const StyledMediaContentPreviewImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
+    theme: import("@chayns-components/core").Theme;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
+    theme: import("@chayns-components/core").Theme;
+}, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
+    ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
+}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
+    theme: import("@chayns-components/core").Theme;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
+    theme: import("@chayns-components/core").Theme;
+}, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
+    ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
+}, never>>> & string;
+export declare const StyledMediaContentImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
+    theme: import("@chayns-components/core").Theme;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
+    theme: import("@chayns-components/core").Theme;
+}, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
+    ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
+}, never> & Partial<Pick<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
+    theme: import("@chayns-components/core").Theme;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "theme"> & {
+    theme: import("@chayns-components/core").Theme;
+}, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "ref"> & {
+    ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
+}, never>>> & string;
+export declare const StyledMediaContentVideo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "theme"> & {
     theme: import("@chayns-components/core").Theme;
-}>> & string;
-export declare const StyledMediaContentVideo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, {
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "theme"> & {
     theme: import("@chayns-components/core").Theme;
-}>> & string;
-export declare const StyledMediaContentPlayIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+}, never>>> & string;
+export declare const StyledMediaContentPlayIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/lib/types/components/media-content/MediaContent.types.d.ts

@@ -11,6 +11,14 @@ export interface MediaContentProps {
      * <MediaContent file={file.file} onClick={handleOpen} ratio={1} />
      */
     file: FileItem['file'];
+    /**
+     * Provides an optional preview source that can be displayed while the final media is still loading.
+     * @description
+     * This preview can be a base64 data URL or any low-resolution fallback image.
+     * When provided, the component shows the preview first and swaps to the final image once it has finished loading.
+     * @optional
+     */
+    previewUrl?: string;
     /**
      * Defines the aspect ratio that should be reserved for the media.
      * @description
@@ -19,6 +27,14 @@ export interface MediaContentProps {
      * <MediaContent file={file.file} onClick={handleOpen} ratio={1.5} />
      */
     ratio: number;
+    /**
+     * Controls whether the final media source may be loaded immediately.
+     * @description
+     * When set to `false`, only the preview source is rendered until this flag becomes `true`.
+     * @default true
+     * @optional
+     */
+    shouldLoadImages?: boolean;
     /**
      * Is called when the media tile is selected.
      * @description

package/lib/types/components/media-content/MediaContent.utils.d.ts

@@ -0,0 +1,5 @@
+import type { FileItem, Video } from '@chayns-components/core';
+export type GalleryMediaFile = FileItem['file'];
+export declare const isVideoFile: (file: GalleryMediaFile) => file is Video;
+export declare const getMediaSourceUrl: (file: GalleryMediaFile) => string;
+export declare const getMediaPreviewUrl: (file: GalleryMediaFile, previewUrl?: string) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/gallery",
-    "version": "5.2.4",
+    "version": "5.2.6",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -54,7 +54,7 @@
     "devDependencies": {
         "@babel/cli": "^7.28.6",
         "@babel/core": "^7.29.0",
-        "@babel/preset-env": "^7.29.0",
+        "@babel/preset-env": "^7.29.5",
         "@babel/preset-react": "^7.28.5",
         "@babel/preset-typescript": "^7.28.5",
         "@types/react": "^18.3.28",
@@ -70,7 +70,7 @@
         "typescript": "^5.9.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.2.4",
+        "@chayns-components/core": "^5.2.5",
         "react-compiler-runtime": "^1.0.0",
         "uuid": "^10.0.0"
     },
@@ -84,5 +84,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "ad65db8803761ed1bb154b1161a4a513c3ac9503"
+    "gitHead": "59187422f25173dbdf15343d50fe1363e93d16ff"
 }