react-motion-gallery 2.0.5 → 2.0.7

package/dist/index.d.mts

@@ -42,12 +42,10 @@ type ElementStyle = {
 type ThumbnailPosition = "top" | "right" | "bottom" | "left";
 type ResponsivePosition = ThumbnailPosition | Array<ThumbnailPosition> | Record<string, ThumbnailPosition>;
 type ThumbnailLoadingOptions = {
-    isLoading?: boolean;
+    enabled?: boolean;
+    force?: boolean;
     skeletonCount?: ResponsiveNumber;
-    renderLoading?: (args: {
-        layout: "slider" | "thumbnails";
-        count: number;
-    }) => React$1.ReactNode;
+    renderLoading?: () => React$1.ReactNode;
 };
 type ThumbnailIntroOptions = {
     renderIntro?: (args: {
@@ -171,11 +169,85 @@ interface GalleryApi {
     }) => void): () => void;
 }
 
+type SkeletonLength$3 = number | string;
+type SkeletonShimmer$3 = {
+    enabled?: boolean;
+    durationMs?: number;
+    angleDeg?: number;
+    opacity?: number;
+    blurPx?: number;
+    timing?: string;
+    c1?: string;
+    c2?: string;
+    c3?: string;
+};
+type SkeletonBaseStyle$2 = {
+    width?: SkeletonLength$3;
+    maxWidth?: SkeletonLength$3;
+    height?: SkeletonLength$3;
+    maxHeight?: SkeletonLength$3;
+    backgroundColor?: string;
+    borderRadius?: SkeletonLength$3;
+    marginTop?: SkeletonLength$3;
+    marginRight?: SkeletonLength$3;
+    marginBottom?: SkeletonLength$3;
+    marginLeft?: SkeletonLength$3;
+    alignSelf?: React$1.CSSProperties["alignSelf"];
+    aspectRatio?: SkeletonLength$3;
+};
+type SkeletonContainerStyle$2 = {
+    gap?: SkeletonLength$3;
+    padding?: SkeletonLength$3;
+    align?: React$1.CSSProperties["alignItems"];
+    justify?: React$1.CSSProperties["justifyContent"];
+    wrap?: boolean;
+    width?: SkeletonLength$3;
+    maxWidth?: SkeletonLength$3;
+};
+type SkeletonContainerStyleResponsive$2 = SkeletonContainerStyle$2 | Record<string, SkeletonContainerStyle$2>;
+type SliderSkeletonNode = {
+    kind: "slider";
+    style?: SkeletonContainerStyleResponsive$2;
+    count?: number;
+    item: SkeletonNode$2;
+    itemWrapStyle?: SkeletonBaseStyle$2;
+    direction?: "row" | "col";
+} | SkeletonNode$2;
+type SkeletonNode$2 = {
+    kind: "stack" | "row" | "col";
+    style?: SkeletonContainerStyleResponsive$2;
+    children: SkeletonNode$2[];
+} | {
+    kind: "rect" | "square" | "circle";
+    style?: SkeletonBaseStyle$2;
+    shimmer?: SkeletonShimmer$3;
+} | {
+    kind: "media";
+    count: number;
+    direction?: "row" | "col";
+    style?: SkeletonContainerStyleResponsive$2;
+    tile?: {
+        shape?: "rect" | "square" | "circle";
+        style?: SkeletonBaseStyle$2;
+        shimmer?: SkeletonShimmer$3;
+    };
+};
+type SliderSkeletonSpec = {
+    className?: string;
+    layout?: SliderSkeletonNode;
+    defaults?: {
+        backgroundColor?: string;
+        highlightColor?: string;
+        radius?: SkeletonLength$3;
+        shimmer?: SkeletonShimmer$3;
+    };
+};
+
 type ResponsiveHeightRule = {
     query: string;
     height: string;
 };
-type SliderLayout$1 = {
+type SliderLayout = {
     gap?: number;
     cellsPerSlide?: ResponsiveNumber;
 };
@@ -250,21 +322,13 @@ type SliderAuto = {
     scroll?: SliderAutoScroll;
 };
 type SliderLoadingOptions = {
-    isLoading?: boolean;
+    enabled?: boolean;
+    force?: boolean;
     skeletonCount?: ResponsiveNumber;
     renderLoading?: (args: {
-        layout: "slider" | "thumbnails";
         count: number;
     }) => React.ReactNode;
-    shimmer?: {
-        radius?: number | string;
-        c1?: string;
-        c2?: string;
-        c3?: string;
-        size?: string;
-        duration?: string;
-        timing?: string;
-    };
+    skeleton?: SliderSkeletonSpec;
 };
 type SliderIntroOptions = {
     renderIntro?: (args: {
@@ -304,7 +368,7 @@ type SliderMotion = {
     friction?: number;
 };
 type SliderOptions = {
-    layout?: SliderLayout$1;
+    layout?: SliderLayout;
     direction?: SliderDirection;
     size?: SliderSize;
     align?: "start" | "center";
@@ -353,35 +417,71 @@ interface SliderHandle {
     };
 }
 
-type LoadingOptions = {
-    isLoading?: boolean;
-    skeletonCount?: ResponsiveNumber;
-    renderLoading?: (args: {
-        layout: "slider" | "grid" | "masonry" | "entries";
-        count: number;
-    }) => React.ReactNode;
-    shimmer?: {
-        paddingBottom?: string;
-        radius?: number | string;
-        c1?: string;
-        c2?: string;
-        c3?: string;
-        size?: string;
-        duration?: string;
-        timing?: string;
+type SkeletonLength$2 = number | string;
+type SkeletonShimmer$2 = {
+    enabled?: boolean;
+    durationMs?: number;
+    angleDeg?: number;
+    opacity?: number;
+    blurPx?: number;
+    timing?: string;
+    c1?: string;
+    c2?: string;
+    c3?: string;
+};
+type SkeletonBaseStyle$1 = {
+    width?: SkeletonLength$2;
+    maxWidth?: SkeletonLength$2;
+    height?: SkeletonLength$2;
+    maxHeight?: SkeletonLength$2;
+    backgroundColor?: string;
+    borderRadius?: SkeletonLength$2;
+    marginTop?: SkeletonLength$2;
+    marginRight?: SkeletonLength$2;
+    marginBottom?: SkeletonLength$2;
+    marginLeft?: SkeletonLength$2;
+    alignSelf?: React$1.CSSProperties["alignSelf"];
+    aspectRatio?: number | string;
+};
+type SkeletonContainerStyle$1 = {
+    gap?: SkeletonLength$2;
+    padding?: SkeletonLength$2;
+    align?: React$1.CSSProperties["alignItems"];
+    justify?: React$1.CSSProperties["justifyContent"];
+    wrap?: boolean;
+    width?: SkeletonLength$2;
+    maxWidth?: SkeletonLength$2;
+};
+type SkeletonContainerStyleResponsive$1 = SkeletonContainerStyle$1 | Record<string, SkeletonContainerStyle$1>;
+type SkeletonNode$1 = {
+    kind: "stack" | "row" | "col";
+    style?: SkeletonContainerStyleResponsive$1;
+    children: SkeletonNode$1[];
+} | {
+    kind: "rect" | "square" | "circle";
+    style?: SkeletonBaseStyle$1;
+    shimmer?: SkeletonShimmer$2;
+} | {
+    kind: "media";
+    count: number;
+    direction?: "row" | "col";
+    style?: SkeletonContainerStyleResponsive$1;
+    tile?: {
+        shape?: "rect" | "square" | "circle";
+        style?: SkeletonBaseStyle$1;
+        shimmer?: SkeletonShimmer$2;
     };
-    ratios?: number[];
 };
-type IntroOptions = {
-    renderIntro?: (args: {
-        active: boolean;
-        containerProps: React.HTMLAttributes<HTMLDivElement>;
-    }, content: React.ReactNode) => React.ReactNode;
-    staggerMs?: number;
-    transform?: string;
-    durationMs?: number;
-    easing?: string;
-    staggerLimit?: number;
+type EntrySkeletonSpec = {
+    layout?: SkeletonNode$1;
+    variant?: "solid";
+    minHeight?: SkeletonLength$2;
+    defaults?: {
+        backgroundColor?: string;
+        highlightColor?: string;
+        radius?: SkeletonLength$2;
+        shimmer?: SkeletonShimmer$2;
+    };
 };
 
 type EntryItem = {
@@ -414,6 +514,36 @@ type EntryCardRenderArgs = {
     entryIndex: number;
     media: React.ReactNode;
 };
+type EntrySkeletonResolverArgs = {
+    entry: EntryItem;
+    entryIndex: number;
+};
+type EntriesLoadingOptions = {
+    enabled?: boolean;
+    force?: boolean;
+    skeleton?: EntrySkeletonSpec | ((args: EntrySkeletonResolverArgs) => EntrySkeletonSpec | null | undefined);
+    minHeight?: SkeletonLength$2;
+    nearMargin?: string;
+    viewMargin?: string;
+    threshold?: number;
+    waitForDecode?: boolean;
+    decodeTimeoutMs?: number;
+    skeletonWrap?: ElementStyle;
+};
+type IntroOptions$2 = {
+    renderIntro?: (args: {
+        active: boolean;
+        containerProps: React.HTMLAttributes<HTMLDivElement>;
+    }, content: React.ReactNode) => React.ReactNode;
+    staggerMs?: number;
+    durationMs?: number;
+    easing?: string;
+    staggerLimit?: number;
+};
+type EntrySkeletonRenderArgs = {
+    entry: EntryItem;
+    entryIndex: number;
+};
 type EntriesOptions = {
     items?: EntryItem[];
     mediaLayout?: EntryMediaLayout;
@@ -421,10 +551,13 @@ type EntriesOptions = {
         card?: (args: EntryCardRenderArgs) => React.ReactNode;
         media?: (args: EntryMediaRenderArgs) => React.ReactNode;
         overlay?: (args: EntryOverlayRenderArgs) => React.ReactNode;
+        skeleton?: (args: EntrySkeletonRenderArgs) => React.ReactNode;
     };
     overlay?: ElementStyle;
-    loading?: LoadingOptions;
-    intro?: IntroOptions;
+    loading?: EntriesLoadingOptions;
+    intro?: IntroOptions$2;
+    entryList?: ElementStyle;
+    entryRow?: ElementStyle;
 };
 type SlideOwner = {
     entryIndex: number;
@@ -438,12 +571,6 @@ type EntriesMediaContainerRender = (args: {
     entrySliderRefs?: React$1.RefObject<Array<SliderHandle | null>>;
 }) => React$1.ReactNode;
 type FullscreenItemsInput = MediaItem[] | string[];
-/**
- * Flatten entries -> media list + link map + entry->flat indices + owners
- * Useful for:
- *  - fullscreenItems (fs addon)
- *  - entryFlatIndexRef / entryMapRef bookkeeping
- */
 declare function flattenEntries(items: EntryItem[] | undefined): {
     flattenedMedia: MediaItem[];
     flattenedMap: MediaEntryLink[];
@@ -453,37 +580,16 @@ declare function flattenEntries(items: EntryItem[] | undefined): {
 type EntriesProps = {
     enabled?: boolean;
     entries: EntriesOptions;
-    /**
-     * If you don't pass this, Entries will default to:
-     *  - fullscreen.items if provided
-     *  - else flattened entries media
-     */
     fullscreen?: {
         enabled?: boolean;
         items?: FullscreenItemsInput;
     };
-    /**
-     * Called by EntryList to wrap mediaNodes in the chosen layout container.
-     * This is what makes slider/grid/masonry *fully treeshakable*:
-     * users import ONE media renderer module and pass it here.
-     */
     renderMediaContainer: EntriesMediaContainerRender;
-    /**
-     * Override for media node creation when entries.render.media isn't provided.
-     */
     nodeFromMedia?: (m: MediaItem) => React$1.ReactNode;
-    /**
-     * Optional: provide your own refs if you want to read them outside.
-     * If omitted, Entries creates internal refs.
-     */
     entryFlatIndexRef?: React$1.RefObject<number[][] | null>;
     entryMapRef?: React$1.RefObject<MediaEntryLink[] | null>;
     fsOwnersRef?: React$1.RefObject<SlideOwner[]>;
     entrySliderRefs?: React$1.RefObject<Array<SliderHandle | null>>;
-    /**
-     * Optional: if you're NOT inside GalleryCore and still want to open fullscreen,
-     * you can provide a callback.
-     */
     onOpenFullscreen?: (args: {
         index: number;
         img: HTMLImageElement;
@@ -517,36 +623,18 @@ type FullscreenEntryContext = {
     expandableImgRefs?: React$1.RefObject<Array<HTMLImageElement | null>>;
 };
 type FullscreenSourceAdapter = {
-    /** for layouts that have a “real slider” behind a given index */
     getOwnerSliderHandle?: (index: number) => SliderHandle | null;
-    /** for entries: ensure the correct media slider is ready before opening */
     syncBeforeOpen?: (index: number) => void;
-    /** used by intro logic to find the “cell wrapper” */
     closestSelector?: string;
-    /** extra context used by fullscreen runtime (entries only) */
     getEntryContext?: () => FullscreenEntryContext;
 };
 type GalleryCoreProps = {
     children?: React$1.ReactNode;
-    /** tells add-ons which base layout is mounted */
     layout: CoreLayout;
-    /** optional breakpoint override */
     breakpoints?: BreakpointMap;
-    /**
-     * optional: provide fullscreen/media items centrally.
-     * - If MediaItem[], use as-is
-     * - If string[], will be converted via toMediaItems()
-     */
     fullscreenItems?: MediaItem[] | string[];
-    /**
-     * optional: if user passes children nodes (e.g. SliderLayout children),
-     * core can manage them as cells.
-     *
-     * NOTE: This is intentionally "opt-in" to keep core generic.
-     */
     nodes?: React$1.ReactNode | React$1.ReactNode[];
 };
-/** Provider (internal name kept for clarity) */
 declare function GalleryCoreProvider(props: GalleryCoreProps): react_jsx_runtime.JSX.Element;
 type GalleryCore = {
     layout: CoreLayout;
@@ -575,7 +663,6 @@ type GalleryCore = {
     expandableImgRefs: React$1.RefObject<Array<HTMLImageElement | null>>;
     registerExpandableImg: (index: number, node: HTMLElement | null) => void;
 };
-/** ✅ Option A: public component alias */
 declare const GalleryCore: typeof GalleryCoreProvider;
 
 type FsCounterArgs = {
@@ -775,20 +862,109 @@ declare function useFullscreenController(args: UseFullscreenArgs): {
     closingModal: boolean;
 };
 
-declare const SliderLayout: React$1.ForwardRefExoticComponent<SliderOptions & {
+declare const Slider: React$1.ForwardRefExoticComponent<SliderOptions & {
     children?: React$1.ReactNode;
     breakpoints?: BreakpointMap;
     expandableImgRefs?: React$1.RefObject<Array<HTMLImageElement | null>>;
 } & React$1.RefAttributes<SliderHandle>>;
 
+type SkeletonLength$1 = number | string;
+type SkeletonShimmer$1 = {
+    enabled?: boolean;
+    durationMs?: number;
+    angleDeg?: number;
+    opacity?: number;
+    blurPx?: number;
+    timing?: string;
+    c1?: string;
+    c2?: string;
+    c3?: string;
+};
+type SkeletonBaseStyle = {
+    width?: SkeletonLength$1;
+    maxWidth?: SkeletonLength$1;
+    height?: SkeletonLength$1;
+    maxHeight?: SkeletonLength$1;
+    backgroundColor?: string;
+    borderRadius?: SkeletonLength$1;
+    marginTop?: SkeletonLength$1;
+    marginRight?: SkeletonLength$1;
+    marginBottom?: SkeletonLength$1;
+    marginLeft?: SkeletonLength$1;
+    alignSelf?: React$1.CSSProperties["alignSelf"];
+    aspectRatio?: SkeletonLength$1;
+};
+type SkeletonContainerStyle = {
+    gap?: SkeletonLength$1;
+    padding?: SkeletonLength$1;
+    align?: React$1.CSSProperties["alignItems"];
+    justify?: React$1.CSSProperties["justifyContent"];
+    wrap?: boolean;
+    width?: SkeletonLength$1;
+    maxWidth?: SkeletonLength$1;
+};
+type SkeletonContainerStyleResponsive = SkeletonContainerStyle | Record<string, SkeletonContainerStyle>;
+type GridSkeletonNode = {
+    kind: "grid";
+    style?: SkeletonContainerStyleResponsive;
+    count?: number;
+    item: SkeletonNode;
+    itemWrapStyle?: SkeletonBaseStyle;
+} | SkeletonNode;
+type SkeletonNode = {
+    kind: "stack" | "row" | "col";
+    style?: SkeletonContainerStyleResponsive;
+    children: SkeletonNode[];
+} | {
+    kind: "rect" | "square" | "circle";
+    style?: SkeletonBaseStyle;
+    shimmer?: SkeletonShimmer$1;
+} | {
+    kind: "media";
+    count: number;
+    direction?: "row" | "col";
+    style?: SkeletonContainerStyleResponsive;
+    tile?: {
+        shape?: "rect" | "square" | "circle";
+        style?: SkeletonBaseStyle;
+        shimmer?: SkeletonShimmer$1;
+    };
+};
+type GridSkeletonSpec = {
+    className?: string;
+    layout?: GridSkeletonNode;
+    backgroundColor?: string;
+    radius?: SkeletonLength$1;
+    shimmer?: SkeletonShimmer$1;
+};
+
+type LoadingOptions$1 = {
+    enabled?: boolean;
+    force?: boolean;
+    renderLoading?: (args: {
+        count: number;
+    }) => React.ReactNode;
+    skeleton?: GridSkeletonSpec;
+};
+type IntroOptions$1 = {
+    renderIntro?: (args: {
+        active: boolean;
+        containerProps: React.HTMLAttributes<HTMLDivElement>;
+    }, content: React.ReactNode) => React.ReactNode;
+    staggerMs?: number;
+    transform?: string;
+    durationMs?: number;
+    easing?: string;
+    staggerLimit?: number;
+};
 type GridOptions = {
     columns?: ResponsiveNumber;
     minColumnWidth?: number | string;
     gap?: ResponsiveNumber;
     rootClassName?: string;
     itemClassName?: string;
-    loading?: LoadingOptions;
-    intro?: IntroOptions;
+    loading?: LoadingOptions$1;
+    intro?: IntroOptions$1;
 };
 
 type Props$1 = GridOptions & {
@@ -799,6 +975,47 @@ type Props$1 = GridOptions & {
 };
 declare function GridLayoutRuntime(props: Props$1): react_jsx_runtime.JSX.Element;
 
+type SkeletonLength = number | string;
+type SkeletonShimmer = {
+    enabled?: boolean;
+    durationMs?: number;
+    angleDeg?: number;
+    opacity?: number;
+    blurPx?: number;
+    timing?: string;
+    c1?: string;
+    c2?: string;
+    c3?: string;
+};
+type MasonrySkeletonSpec = {
+    className?: string;
+    ratios?: number[];
+    heightsPx?: number[];
+    backgroundColor?: string;
+    highlightColor?: string;
+    radius?: SkeletonLength;
+    shimmer?: SkeletonShimmer;
+};
+
+type LoadingOptions = {
+    enabled?: boolean;
+    force?: boolean;
+    renderLoading?: (args: {
+        count: number;
+    }) => React.ReactNode;
+    skeleton?: MasonrySkeletonSpec;
+};
+type IntroOptions = {
+    renderIntro?: (args: {
+        active: boolean;
+        containerProps: React.HTMLAttributes<HTMLDivElement>;
+    }, content: React.ReactNode) => React.ReactNode;
+    staggerMs?: number;
+    transform?: string;
+    durationMs?: number;
+    easing?: string;
+    staggerLimit?: number;
+};
 type MasonryOptions = {
     columns?: ResponsiveNumber;
     gap?: ResponsiveNumber;
@@ -819,7 +1036,7 @@ type Props = MasonryOptions & {
     children?: React$1.ReactNode;
     breakpoints?: BreakpointMap;
 };
-declare function MasonryLayoutRuntime(props: Props): react_jsx_runtime.JSX.Element;
+declare function Masonry(props: Props): react_jsx_runtime.JSX.Element;
 
 type RmgPlyrSourceBuilder = (args: {
     src: string;
@@ -830,7 +1047,7 @@ type RmgPlyrOptionsResolver = any | ((args: {
     poster?: string;
     index: number;
 }) => any);
-type RmgPlyrVideoProps = {
+type VideoProps = {
     src: string;
     poster?: string;
     alt?: string;
@@ -844,7 +1061,7 @@ type RmgPlyrVideoProps = {
     onApi?: (api: APITypes | null) => void;
     registerApiByIndex?: (index: number, api: APITypes | null) => void;
 };
-declare function RmgPlyrVideo(props: RmgPlyrVideoProps): react_jsx_runtime.JSX.Element;
+declare function Video(props: VideoProps): react_jsx_runtime.JSX.Element;
 
 declare function PanAxis(): {
     scroll: "x";
@@ -891,7 +1108,7 @@ declare const DEFAULT_SLIDER: {
             readonly className: "";
         };
     };
-    readonly thumbnails: Required<Pick<ThumbnailsOptions, "layout" | "scroll" | "motion">>;
+    readonly thumbnails: Required<Pick<ThumbnailsOptions, "scroll" | "layout" | "motion">>;
     readonly auto: {
         readonly play: {
             readonly enabled: false;
@@ -966,4 +1183,4 @@ declare const DEFAULT_FULLSCREEN: {
     readonly caption: {};
 };
 
-export { BREAKPOINT_MAP, DEFAULT_ENTRIES, DEFAULT_FULLSCREEN, DEFAULT_GRID, DEFAULT_MASONRY, DEFAULT_SLIDER, type ElementStyle, Entries, type EntriesOptions, type FsCaptionPlacement, type FsIntroRequest, type FullscreenOptions, type GalleryApi, GalleryCore, GridLayoutRuntime, type GridOptions, type IndexMode, MasonryLayoutRuntime, type MasonryOptions, type MediaEntryLink, type MediaItem, type PanAxisType, type ResponsiveHeightRule, RmgPlyrVideo, type SlideOwner, type SliderHandle, SliderLayout, type SliderOptions, flattenEntries, toMediaItems, useFullscreenController };
+export { BREAKPOINT_MAP, DEFAULT_ENTRIES, DEFAULT_FULLSCREEN, DEFAULT_GRID, DEFAULT_MASONRY, DEFAULT_SLIDER, type ElementStyle, Entries, type EntriesOptions, type FsCaptionPlacement, type FsIntroRequest, type FullscreenOptions, type GalleryApi, GalleryCore, GridLayoutRuntime as Grid, type GridOptions, type IndexMode, Masonry, type MasonryOptions, type MediaEntryLink, type MediaItem, type PanAxisType, type ResponsiveHeightRule, type SlideOwner, Slider, type SliderHandle, type SliderOptions, Video, flattenEntries, toMediaItems, useFullscreenController };