react-motion-gallery 2.0.6 → 2.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1029 -29
- package/dist/chunk-2AHLR3V4.mjs +1 -0
- package/dist/chunk-2UHS4WYL.mjs +5 -0
- package/dist/chunk-3HPXMD5O.mjs +10 -0
- package/dist/chunk-4JEELX5B.mjs +2 -0
- package/dist/chunk-A6MPGIEJ.mjs +1 -0
- package/dist/chunk-ESF6XBYF.mjs +1 -0
- package/dist/chunk-EV6ZK4QI.mjs +1 -0
- package/dist/chunk-H4BEIJAD.mjs +5 -0
- package/dist/chunk-HL75KJY3.mjs +2 -0
- package/dist/chunk-JYKEA7LO.mjs +1 -0
- package/dist/chunk-KA2TOUNO.mjs +59 -0
- package/dist/chunk-LPIHQAND.mjs +1 -0
- package/dist/chunk-LVYED5ZM.mjs +1 -0
- package/dist/chunk-NKBEYOBF.mjs +1 -0
- package/dist/chunk-P2GQPFSL.mjs +1 -0
- package/dist/chunk-TZGAHWM7.mjs +1 -0
- package/dist/chunk-UYTKRIYQ.mjs +1 -0
- package/dist/chunk-V35ILQJ4.mjs +4 -0
- package/dist/chunk-X4HEGEZV.mjs +1 -0
- package/dist/chunk-XO5LPPN6.mjs +2 -0
- package/dist/core.d.mts +86 -0
- package/dist/core.mjs +1 -0
- package/dist/elements-Bd1vm4Uk.d.mts +37 -0
- package/dist/entries.css +1 -0
- package/dist/entries.d.mts +77 -0
- package/dist/entries.mjs +1 -0
- package/dist/fullscreen.css +1 -0
- package/dist/fullscreen.d.mts +281 -0
- package/dist/fullscreen.mjs +1 -0
- package/dist/fullscreenThumbnails.css +1 -0
- package/dist/fullscreenThumbnails.d.mts +10 -0
- package/dist/fullscreenThumbnails.mjs +1 -0
- package/dist/grid.css +1 -0
- package/dist/grid.d.mts +126 -0
- package/dist/grid.mjs +1 -0
- package/dist/index-Bpj0ZM8C.d.mts +38 -0
- package/dist/index.css +1 -1
- package/dist/index.d.mts +23 -1164
- package/dist/index.mjs +1 -65
- package/dist/lazy-dGoYpcRa.d.mts +14 -0
- package/dist/masonry.css +1 -0
- package/dist/masonry.d.mts +73 -0
- package/dist/masonry.mjs +1 -0
- package/dist/media-moIXOhT1.d.mts +36 -0
- package/dist/metafile-esm.json +1 -1
- package/dist/plyrTypes-CmP9NWvX.d.mts +8 -0
- package/dist/responsive-CvE5dTnP.d.mts +5 -0
- package/dist/slider.css +1 -0
- package/dist/slider.d.mts +80 -0
- package/dist/slider.mjs +1 -0
- package/dist/sliderSub-DNikv2lm.d.mts +76 -0
- package/dist/thumbnails.css +1 -0
- package/dist/thumbnails.d.mts +68 -0
- package/dist/thumbnails.mjs +1 -0
- package/dist/types-Bi2iBbyG.d.mts +85 -0
- package/dist/types-CQ6I3EfZ.d.mts +109 -0
- package/dist/types-ChjyCquV.d.mts +158 -0
- package/dist/types-Dqm2ynv2.d.mts +262 -0
- package/dist/video.css +1 -0
- package/dist/video.d.mts +38 -0
- package/dist/video.mjs +1 -0
- package/package.json +34 -14
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
export { D as DEFAULT_ENTRIES, E as Entries, a as EntriesMediaContainerRender, b as EntriesProps, E as default, f as flattenEntries, n as nodeFromMediaDefault } from './index-Bpj0ZM8C.mjs';
|
|
2
|
+
import { E as EntriesOptions } from './types-ChjyCquV.mjs';
|
|
3
|
+
export { g as EntriesLoadingOptions, e as EntryCardRenderArgs, a as EntryItem, d as EntryMediaLayout, b as EntryMediaRenderArgs, c as EntryOverlayRenderArgs, h as EntrySkeletonRenderArgs, f as EntrySkeletonResolverArgs, I as IntroOptions, M as MediaEntryLink, S as SlideOwner } from './types-ChjyCquV.mjs';
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
|
+
import { M as MediaItem } from './media-moIXOhT1.mjs';
|
|
7
|
+
import { a as SliderHandle } from './types-Dqm2ynv2.mjs';
|
|
8
|
+
import './elements-Bd1vm4Uk.mjs';
|
|
9
|
+
import './responsive-CvE5dTnP.mjs';
|
|
10
|
+
import './sliderSub-DNikv2lm.mjs';
|
|
11
|
+
|
|
12
|
+
type UseEntryInViewOpts = IntersectionObserverInit & {
|
|
13
|
+
nearMargin?: string;
|
|
14
|
+
viewMargin?: string;
|
|
15
|
+
};
|
|
16
|
+
declare function useEntryInView(len: number, opts?: UseEntryInViewOpts): {
|
|
17
|
+
nearView: boolean[];
|
|
18
|
+
everInView: boolean[];
|
|
19
|
+
setEntryRef: (index: number) => (node: HTMLElement | null) => void;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
type EntryLike = {
|
|
23
|
+
key?: string;
|
|
24
|
+
id?: string;
|
|
25
|
+
media?: Array<{
|
|
26
|
+
kind?: string;
|
|
27
|
+
src?: string;
|
|
28
|
+
}>;
|
|
29
|
+
};
|
|
30
|
+
declare function useEntryDecodeReady(enabled: boolean, entries: EntryLike[] | undefined, inView: boolean[], opts?: {
|
|
31
|
+
timeoutMs?: number;
|
|
32
|
+
}): {
|
|
33
|
+
decodedReady: boolean[];
|
|
34
|
+
entriesKey: string;
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
declare function useNormalizedEntriesLoading(entries: EntriesOptions): {
|
|
38
|
+
enabled: any;
|
|
39
|
+
force: any;
|
|
40
|
+
skeleton: any;
|
|
41
|
+
minHeight: string;
|
|
42
|
+
nearMargin: any;
|
|
43
|
+
viewMargin: any;
|
|
44
|
+
threshold: any;
|
|
45
|
+
waitForDecode: boolean;
|
|
46
|
+
decodeTimeoutMs: any;
|
|
47
|
+
skeletonWrap: any;
|
|
48
|
+
};
|
|
49
|
+
declare function useNormalizedEntriesIntro(entries: EntriesOptions): {
|
|
50
|
+
renderIntro: ((args: {
|
|
51
|
+
active: boolean;
|
|
52
|
+
containerProps: React.HTMLAttributes<HTMLDivElement>;
|
|
53
|
+
}, content: React.ReactNode) => React.ReactNode) | undefined;
|
|
54
|
+
staggerMs: number;
|
|
55
|
+
durationMs: number;
|
|
56
|
+
easing: string;
|
|
57
|
+
staggerLimit: number;
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
type Props = {
|
|
61
|
+
enabled: boolean;
|
|
62
|
+
entries: EntriesOptions;
|
|
63
|
+
fsEnabled: boolean;
|
|
64
|
+
openFullscreenAt: (globalIndex: number, originEl?: HTMLElement | null) => void;
|
|
65
|
+
entryFlatIndexRef: React.RefObject<number[][] | null>;
|
|
66
|
+
nodeFromMedia: (m: MediaItem) => React.ReactNode;
|
|
67
|
+
renderMediaContainer: (args: {
|
|
68
|
+
entryIndex: number;
|
|
69
|
+
mediaNodes: React.ReactNode[];
|
|
70
|
+
entrySliderRefs?: React.RefObject<Array<SliderHandle | null>>;
|
|
71
|
+
}) => React.ReactNode;
|
|
72
|
+
registerExpandableImage?: (globalIndex: number, node: HTMLImageElement | HTMLVideoElement | null) => void;
|
|
73
|
+
entrySliderRefs?: React.RefObject<Array<SliderHandle | null>>;
|
|
74
|
+
};
|
|
75
|
+
declare function EntryList({ enabled, entries, fsEnabled, openFullscreenAt, entryFlatIndexRef, nodeFromMedia, renderMediaContainer, registerExpandableImage, entrySliderRefs, }: Props): string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
|
|
76
|
+
|
|
77
|
+
export { EntriesOptions, EntryList, type UseEntryInViewOpts, useEntryDecodeReady, useEntryInView, useNormalizedEntriesIntro, useNormalizedEntriesLoading };
|
package/dist/entries.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{a as DEFAULT_ENTRIES,i as Entries,f as EntryList,i as default,h as flattenEntries,g as nodeFromMediaDefault,c as useEntryDecodeReady,b as useEntryInView,e as useNormalizedEntriesIntro,d as useNormalizedEntriesLoading}from'./chunk-XO5LPPN6.mjs';import'./chunk-EV6ZK4QI.mjs';import'./chunk-LVYED5ZM.mjs';import'./chunk-2AHLR3V4.mjs';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.track{position:relative;left:0}.rtl .track{left:auto;right:0}[data-rmg-plyr-provider=mp4] :global(.plyr__video-wrapper),[data-rmg-plyr-provider=vimeo] :global(.plyr__video-wrapper){pointer-events:none!important}.spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;pointer-events:none;z-index:3;animation:rmgLazySpin 1s linear infinite;background:conic-gradient(from 0deg,#fff,#cfe6ff,#8ec5ff,#4ea1ff,#2f7fff,#1d4ed8);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0)}.spinnerWrap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3}@keyframes rmgLazySpin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s ease;will-change:opacity;z-index:3;animation:rmgSpin 1s linear infinite;background:conic-gradient(from 0deg,#fff,#cfe6ff,#8ec5ff,#4ea1ff,#2f7fff,#1d4ed8);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0)}@keyframes rmgSpin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.spinnerWrap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s ease;will-change:opacity;z-index:3}.fullscreenOverlay{position:fixed;inset:0;opacity:0;pointer-events:none;background-color:#000c;transition:opacity .3s cubic-bezier(.4,0,.22,1);will-change:opacity;z-index:calc(var(--rmg-fs-z, 9999) - 1);transform:translateZ(0);backface-visibility:hidden;contain:paint}.open{opacity:1;pointer-events:auto}.duplicateImg{position:fixed;display:none;transform-origin:top left;transition:transform .3s cubic-bezier(.4,0,.22,1);z-index:calc(var(--rmg-fs-z, 9999) + 1);will-change:transform}.closeBtn,.leftChevron,.rightChevron,.counter{position:fixed;opacity:0;pointer-events:none;transition:opacity .36s cubic-bezier(.4,0,.22,1);z-index:calc(var(--rmg-fs-z, 9999) + 2)}.closeBtn.open,.leftChevron.open,.rightChevron.open,.counter.open{opacity:1;pointer-events:auto}.closeBtn{top:12px;right:12px;background:transparent;border:none;padding:0;width:35px;height:35px;cursor:pointer}.leftChevron,.rightChevron{top:45.5%;width:50px;height:50px;cursor:pointer;background-color:transparent;border:none}.leftChevron{left:0;transform:rotate(180deg)}.rightChevron{right:0}.counter{top:15px;left:16px;color:#fff;font-size:14px;line-height:32px;user-select:none;text-shadow:1px 1px 3px #4f4f4f}.fsOverlayCaption{position:fixed;padding:1rem 1.5rem;color:#fff;font-size:.875rem;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);z-index:calc(var(--rmg-fs-z, 9999) + 1)}.fsOverlayCaption.open{opacity:1;transform:translateY(0)}
|
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import React__default from 'react';
|
|
4
|
+
import { M as MediaItem } from './media-moIXOhT1.mjs';
|
|
5
|
+
import { E as ElementStyle } from './elements-Bd1vm4Uk.mjs';
|
|
6
|
+
import { a as FullscreenOpenMethod$1, F as FullscreenOpenRequest } from './sliderSub-DNikv2lm.mjs';
|
|
7
|
+
export { G as GalleryApi, I as IndexMode } from './sliderSub-DNikv2lm.mjs';
|
|
8
|
+
import { P as PlyrSourceBuilder, a as PlyrOptionsBuilder } from './plyrTypes-CmP9NWvX.mjs';
|
|
9
|
+
import { a as FullscreenThumbnailBridge } from './types-CQ6I3EfZ.mjs';
|
|
10
|
+
import { S as SliderOptions } from './types-Dqm2ynv2.mjs';
|
|
11
|
+
import './responsive-CvE5dTnP.mjs';
|
|
12
|
+
import './types-Bi2iBbyG.mjs';
|
|
13
|
+
|
|
14
|
+
type FsCounterArgs = {
|
|
15
|
+
index: number;
|
|
16
|
+
count: number;
|
|
17
|
+
};
|
|
18
|
+
type FsCaptionPlacement = "top" | "right" | "bottom" | "left";
|
|
19
|
+
type FsIntroRequest = null | {
|
|
20
|
+
originalImage: HTMLImageElement | null;
|
|
21
|
+
index: number;
|
|
22
|
+
method: FullscreenOpenMethod$1;
|
|
23
|
+
closestSelector?: string;
|
|
24
|
+
};
|
|
25
|
+
/**
|
|
26
|
+
* Custom fullscreen image renderers must output a real DOM `<img>` somewhere in
|
|
27
|
+
* the returned tree so zoom, pinch, pan, and close transitions can resolve the
|
|
28
|
+
* primary active image element. Wrapped renderers such as `next/image` are
|
|
29
|
+
* supported, but the wrapper should act as layout scaffolding instead of
|
|
30
|
+
* shrinking the fullscreen media surface on both axes or forcing the inner
|
|
31
|
+
* image itself to behave like a full-bleed fill box.
|
|
32
|
+
*
|
|
33
|
+
* When this callback is provided and `fullscreen.lazyLoad.images.enabled` is
|
|
34
|
+
* `false`, the renderer owns loading, placeholders, and image optimization
|
|
35
|
+
* behavior exactly as usual.
|
|
36
|
+
*
|
|
37
|
+
* When this callback is provided and `fullscreen.lazyLoad.images.enabled` is
|
|
38
|
+
* `true`, the built-in fullscreen lazy/decode/spinner pipeline waits on the
|
|
39
|
+
* primary descendant DOM `<img>`. Custom placeholders or spinners inside the
|
|
40
|
+
* renderer may still be visible beneath the built-in fullscreen spinner once
|
|
41
|
+
* the renderer mounts.
|
|
42
|
+
*/
|
|
43
|
+
type FSImageRender = (args: {
|
|
44
|
+
item: Extract<MediaItem, {
|
|
45
|
+
kind: "image";
|
|
46
|
+
}>;
|
|
47
|
+
index: number;
|
|
48
|
+
isZoomed: boolean;
|
|
49
|
+
className: string;
|
|
50
|
+
baseStyle: React.CSSProperties;
|
|
51
|
+
}) => React.ReactNode;
|
|
52
|
+
type FullscreenArrows = {
|
|
53
|
+
enabled?: boolean;
|
|
54
|
+
arrow?: ElementStyle;
|
|
55
|
+
prev?: ElementStyle;
|
|
56
|
+
next?: ElementStyle;
|
|
57
|
+
render?: (args: {
|
|
58
|
+
dir: "prev" | "next";
|
|
59
|
+
}) => React.ReactNode;
|
|
60
|
+
renderPrev?: () => React.ReactNode;
|
|
61
|
+
renderNext?: () => React.ReactNode;
|
|
62
|
+
};
|
|
63
|
+
type FullscreenClose = {
|
|
64
|
+
enabled?: boolean;
|
|
65
|
+
style?: React.CSSProperties;
|
|
66
|
+
className?: string;
|
|
67
|
+
render?: () => React.ReactNode;
|
|
68
|
+
};
|
|
69
|
+
type FullscreenCounter = {
|
|
70
|
+
enabled?: boolean;
|
|
71
|
+
style?: React.CSSProperties;
|
|
72
|
+
className?: string;
|
|
73
|
+
render?: (args: FsCounterArgs) => React.ReactNode;
|
|
74
|
+
};
|
|
75
|
+
type FullscreenControlsOptions = {
|
|
76
|
+
close?: FullscreenClose;
|
|
77
|
+
arrows?: FullscreenArrows;
|
|
78
|
+
counter?: FullscreenCounter;
|
|
79
|
+
};
|
|
80
|
+
type FsCaptionRenderArgs = {
|
|
81
|
+
item: MediaItem;
|
|
82
|
+
index: number;
|
|
83
|
+
isZoomed: boolean;
|
|
84
|
+
};
|
|
85
|
+
type FullscreenCaptionOptions = {
|
|
86
|
+
className?: string;
|
|
87
|
+
style?: React.CSSProperties;
|
|
88
|
+
placement?: FsCaptionPlacement;
|
|
89
|
+
width?: number;
|
|
90
|
+
height?: number;
|
|
91
|
+
breakpoint?: number;
|
|
92
|
+
render?: (args: FsCaptionRenderArgs) => React.ReactNode;
|
|
93
|
+
};
|
|
94
|
+
type FullscreenEffectsOptions = {
|
|
95
|
+
introDuration?: number;
|
|
96
|
+
introEasing?: string;
|
|
97
|
+
introFade?: boolean;
|
|
98
|
+
slideFade?: boolean;
|
|
99
|
+
slideFadeDuration?: number;
|
|
100
|
+
slideFadeEasing?: string;
|
|
101
|
+
};
|
|
102
|
+
type FullscreenSliderOptions = {
|
|
103
|
+
duration?: number;
|
|
104
|
+
friction?: number;
|
|
105
|
+
};
|
|
106
|
+
type FullscreenZoomPanOptions = {
|
|
107
|
+
clickZoomLevel?: number;
|
|
108
|
+
maxZoomLevel?: number;
|
|
109
|
+
panDuration?: number;
|
|
110
|
+
panFriction?: number;
|
|
111
|
+
};
|
|
112
|
+
type FullscreenVideoOptions = {
|
|
113
|
+
source?: PlyrSourceBuilder;
|
|
114
|
+
options?: PlyrOptionsBuilder;
|
|
115
|
+
style?: React.CSSProperties;
|
|
116
|
+
className?: string;
|
|
117
|
+
};
|
|
118
|
+
type FullscreenLazyLoadKind = "image" | "video";
|
|
119
|
+
type FullscreenLazyLoadArgs = {
|
|
120
|
+
kind: FullscreenLazyLoadKind;
|
|
121
|
+
isClone?: boolean;
|
|
122
|
+
};
|
|
123
|
+
type FullscreenLazyLoadConfig = {
|
|
124
|
+
enabled?: boolean;
|
|
125
|
+
spinner?: boolean | React.ReactNode | ((args: FullscreenLazyLoadArgs) => React.ReactNode);
|
|
126
|
+
spinnerClassName?: string;
|
|
127
|
+
spinnerStyle?: React.CSSProperties;
|
|
128
|
+
};
|
|
129
|
+
type FullscreenLazyLoadOptions = {
|
|
130
|
+
images?: FullscreenLazyLoadConfig;
|
|
131
|
+
videos?: FullscreenLazyLoadConfig;
|
|
132
|
+
};
|
|
133
|
+
type FullscreenOptions = {
|
|
134
|
+
enabled?: boolean;
|
|
135
|
+
items?: MediaItem[] | string[];
|
|
136
|
+
renderImage?: FSImageRender;
|
|
137
|
+
video?: FullscreenVideoOptions;
|
|
138
|
+
controls?: FullscreenControlsOptions;
|
|
139
|
+
caption?: FullscreenCaptionOptions;
|
|
140
|
+
slider?: FullscreenSliderOptions;
|
|
141
|
+
zoom?: FullscreenZoomPanOptions;
|
|
142
|
+
effects?: FullscreenEffectsOptions;
|
|
143
|
+
lazyLoad?: FullscreenLazyLoadOptions;
|
|
144
|
+
};
|
|
145
|
+
|
|
146
|
+
type FullscreenOpenMethod = "fade" | "scale";
|
|
147
|
+
type UseFullscreenArgs = {
|
|
148
|
+
fullscreen?: FullscreenOptions;
|
|
149
|
+
slider?: SliderOptions;
|
|
150
|
+
sliderObject: any;
|
|
151
|
+
cellsStateLength: number;
|
|
152
|
+
};
|
|
153
|
+
declare function useFullscreenController(args: UseFullscreenArgs): {
|
|
154
|
+
fs: {
|
|
155
|
+
slider: {
|
|
156
|
+
duration: number;
|
|
157
|
+
friction: number;
|
|
158
|
+
};
|
|
159
|
+
zoom: {
|
|
160
|
+
clickZoomLevel: number;
|
|
161
|
+
maxZoomLevel: number;
|
|
162
|
+
panDuration: number;
|
|
163
|
+
panFriction: number;
|
|
164
|
+
};
|
|
165
|
+
effects: {
|
|
166
|
+
introDuration: number;
|
|
167
|
+
introEasing: string;
|
|
168
|
+
introFade: boolean;
|
|
169
|
+
slideFade: boolean;
|
|
170
|
+
slideFadeDuration: number;
|
|
171
|
+
slideFadeEasing: string;
|
|
172
|
+
thumbnailsFadeDuration?: number;
|
|
173
|
+
thumbnailsFadeEasing?: string;
|
|
174
|
+
};
|
|
175
|
+
controls: {
|
|
176
|
+
close?: FullscreenClose;
|
|
177
|
+
arrows?: FullscreenArrows;
|
|
178
|
+
counter?: FullscreenCounter;
|
|
179
|
+
};
|
|
180
|
+
caption: {
|
|
181
|
+
className?: string;
|
|
182
|
+
style?: React__default.CSSProperties;
|
|
183
|
+
placement?: FsCaptionPlacement;
|
|
184
|
+
width?: number;
|
|
185
|
+
height?: number;
|
|
186
|
+
breakpoint?: number;
|
|
187
|
+
render?: (args: FsCaptionRenderArgs) => React__default.ReactNode;
|
|
188
|
+
};
|
|
189
|
+
enabled: boolean;
|
|
190
|
+
items?: MediaItem[] | string[];
|
|
191
|
+
renderImage?: FSImageRender;
|
|
192
|
+
video?: FullscreenVideoOptions;
|
|
193
|
+
lazyLoad?: FullscreenLazyLoadOptions;
|
|
194
|
+
thumbnails?: unknown;
|
|
195
|
+
};
|
|
196
|
+
fullscreenNode: react_jsx_runtime.JSX.Element | null;
|
|
197
|
+
fullscreenThumbnailBridge: FullscreenThumbnailBridge;
|
|
198
|
+
openFullscreenAt: (source: FullscreenOpenRequest["source"], gridIndex: number, originEl?: HTMLElement | null, requestedMethod?: FullscreenOpenMethod) => void;
|
|
199
|
+
isClick: React__default.RefObject<boolean>;
|
|
200
|
+
expandableImageRefs: React__default.RefObject<(HTMLImageElement | null)[]>;
|
|
201
|
+
overlayDivRef: React__default.RefObject<HTMLDivElement | null>;
|
|
202
|
+
duplicateImgRef: React__default.RefObject<HTMLElement | null>;
|
|
203
|
+
closeButtonRef: React__default.RefObject<HTMLElement | null>;
|
|
204
|
+
counterRef: React__default.RefObject<HTMLElement | null>;
|
|
205
|
+
leftChevronRef: React__default.RefObject<HTMLElement | null>;
|
|
206
|
+
rightChevronRef: React__default.RefObject<HTMLElement | null>;
|
|
207
|
+
sliderForFullscreen: React__default.RefObject<HTMLDivElement | null>;
|
|
208
|
+
slidesForFullscreen: React__default.RefObject<{
|
|
209
|
+
cells: {
|
|
210
|
+
element: HTMLElement;
|
|
211
|
+
index: number;
|
|
212
|
+
}[];
|
|
213
|
+
target: number;
|
|
214
|
+
}[]>;
|
|
215
|
+
visibleImagesForFullscreen: React__default.RefObject<number>;
|
|
216
|
+
selectedIndexForFullscreen: React__default.RefObject<number>;
|
|
217
|
+
sliderXForFullscreen: React__default.RefObject<number>;
|
|
218
|
+
sliderVelocityForFullscreen: React__default.RefObject<number>;
|
|
219
|
+
isWrappingForFullscreen: React__default.RefObject<boolean>;
|
|
220
|
+
fsThumbContainerRef: React__default.RefObject<HTMLDivElement | null>;
|
|
221
|
+
cells: React__default.RefObject<{
|
|
222
|
+
element: HTMLElement;
|
|
223
|
+
index: number;
|
|
224
|
+
}[]>;
|
|
225
|
+
setSlideIndex: React__default.Dispatch<React__default.SetStateAction<number>>;
|
|
226
|
+
setShowFullscreenModal: React__default.Dispatch<React__default.SetStateAction<boolean>>;
|
|
227
|
+
setShowFullscreenSlider: React__default.Dispatch<React__default.SetStateAction<boolean>>;
|
|
228
|
+
setFsFadeOpening: React__default.Dispatch<React__default.SetStateAction<boolean>>;
|
|
229
|
+
showFullscreenModal: boolean;
|
|
230
|
+
showFullscreenSlider: boolean;
|
|
231
|
+
fsFadeOpening: boolean;
|
|
232
|
+
closingModal: boolean;
|
|
233
|
+
};
|
|
234
|
+
|
|
235
|
+
declare const DEFAULT_FULLSCREEN: {
|
|
236
|
+
readonly enabled: false;
|
|
237
|
+
readonly controls: {
|
|
238
|
+
readonly close: {
|
|
239
|
+
readonly enabled: true;
|
|
240
|
+
readonly style: {};
|
|
241
|
+
readonly className: "";
|
|
242
|
+
readonly render: undefined;
|
|
243
|
+
};
|
|
244
|
+
readonly arrows: {
|
|
245
|
+
readonly enabled: true;
|
|
246
|
+
readonly arrow: {};
|
|
247
|
+
readonly prev: {};
|
|
248
|
+
readonly next: {};
|
|
249
|
+
readonly render: undefined;
|
|
250
|
+
readonly renderPrev: undefined;
|
|
251
|
+
readonly renderNext: undefined;
|
|
252
|
+
};
|
|
253
|
+
readonly counter: {
|
|
254
|
+
readonly enabled: true;
|
|
255
|
+
readonly style: {};
|
|
256
|
+
readonly className: "";
|
|
257
|
+
readonly render: undefined;
|
|
258
|
+
};
|
|
259
|
+
};
|
|
260
|
+
readonly effects: {
|
|
261
|
+
readonly introDuration: 300;
|
|
262
|
+
readonly introEasing: "cubic-bezier(.4,0,.22,1)";
|
|
263
|
+
readonly introFade: false;
|
|
264
|
+
readonly slideFade: false;
|
|
265
|
+
readonly slideFadeDuration: 120;
|
|
266
|
+
readonly slideFadeEasing: "cubic-bezier(.4,0,.22,1)";
|
|
267
|
+
};
|
|
268
|
+
readonly slider: {
|
|
269
|
+
readonly duration: 25;
|
|
270
|
+
readonly friction: 0.68;
|
|
271
|
+
};
|
|
272
|
+
readonly zoom: {
|
|
273
|
+
readonly clickZoomLevel: 2.5;
|
|
274
|
+
readonly maxZoomLevel: 3;
|
|
275
|
+
readonly panDuration: 43;
|
|
276
|
+
readonly panFriction: 0.68;
|
|
277
|
+
};
|
|
278
|
+
readonly caption: {};
|
|
279
|
+
};
|
|
280
|
+
|
|
281
|
+
export { DEFAULT_FULLSCREEN, type FsCaptionPlacement, type FsIntroRequest, type FullscreenOptions, useFullscreenController };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{a as DEFAULT_FULLSCREEN,b as useFullscreenController}from'./chunk-3HPXMD5O.mjs';import'./chunk-P2GQPFSL.mjs';import'./chunk-LPIHQAND.mjs';import'./chunk-JYKEA7LO.mjs';import'./chunk-TZGAHWM7.mjs';import'./chunk-NKBEYOBF.mjs';import'./chunk-EV6ZK4QI.mjs';import'./chunk-2AHLR3V4.mjs';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.thumbShell{position:relative}.thumbContentLayer{position:relative;z-index:1}.thumbContentBlocked{pointer-events:none}.thumbLoadingLayer{position:absolute;inset:0;z-index:5;opacity:1;pointer-events:none;transition:opacity .22s ease;will-change:opacity}.thumbLoadingLayerExit{opacity:0}.thumbSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:center}.thumbSkeletonRow{display:flex;width:100%;height:100%}.thumbSkeleton{border-radius:6px;overflow:hidden;position:relative;background:linear-gradient(90deg,var(--rmg-shimmer-c1, #f0f2f5) 25%,var(--rmg-shimmer-c2, #e6e9ef) 37%,var(--rmg-shimmer-c3, #f0f2f5) 63%);background-size:var(--rmg-shimmer-size, 400% 100%);animation:rmgThumbShimmer var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear)}@keyframes rmgThumbShimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.thumbLoadingLayer{transition:none}}.thumb{position:relative;overflow:hidden;box-sizing:border-box}.thumb:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px #111 inset;opacity:0;transition:opacity .12s ease;z-index:1}.thumb[data-active=true]:after{opacity:1}.fadeInStart{opacity:0}.fadeInActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}@media(prefers-reduced-motion:reduce){.fadeInActive{transition:none}}.fade_container [data-rmg-thumb-index]>*{opacity:0;transform:translateY(var(--rmg-intro-transform, 10px));transition:opacity var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-thumb-index]>*{opacity:1;transform:translateY(0)}.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background-color:#0000004d;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React__default from 'react';
|
|
2
|
+
import { b as FullscreenThumbnailSliderProps } from './types-CQ6I3EfZ.mjs';
|
|
3
|
+
export { F as FSItem, a as FullscreenThumbnailBridge, c as FullscreenThumbnailSlotLayout } from './types-CQ6I3EfZ.mjs';
|
|
4
|
+
import './responsive-CvE5dTnP.mjs';
|
|
5
|
+
import './types-Bi2iBbyG.mjs';
|
|
6
|
+
import './elements-Bd1vm4Uk.mjs';
|
|
7
|
+
|
|
8
|
+
declare function FullscreenThumbnailSlider({ bridge, items, position, containerClassName, containerStyle, thumbnailWidth, thumbnailHeight, thumbnailsCenter, thumbnailsContainerWidth, thumbnailsContainerHeight, fadeDurationMs, fadeEasing, thumbnailItemClassName, thumbnailItemStyle, gap, freeScroll, groupCells, loop, skipSnaps, centerActiveThumb, selectDuration, freeScrollDuration, sliderFriction, breakpointMap, rippleEnabled, rippleClassName, showArrows, arrowStyles, arrowClassName, prevArrowStyles, prevArrowClassName, nextArrowStyles, nextArrowClassName, renderArrows, renderPrevArrow, renderNextArrow }: FullscreenThumbnailSliderProps): React__default.ReactPortal | null;
|
|
9
|
+
|
|
10
|
+
export { FullscreenThumbnailSlider, FullscreenThumbnailSliderProps, FullscreenThumbnailSlider as default };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{a as FullscreenThumbnailSlider,a as default}from'./chunk-V35ILQJ4.mjs';import'./chunk-2UHS4WYL.mjs';import'./chunk-P2GQPFSL.mjs';import'./chunk-H4BEIJAD.mjs';import'./chunk-TZGAHWM7.mjs';import'./chunk-ESF6XBYF.mjs';import'./chunk-X4HEGEZV.mjs';import'./chunk-LVYED5ZM.mjs';import'./chunk-2AHLR3V4.mjs';
|
package/dist/grid.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.gridRoot,.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridItem{position:relative;display:block}.gridItem img,.gridItem video{display:block;width:100%;height:auto;object-fit:cover}.gridShell{display:grid;position:relative;width:100%}.gridContentLayer,.gridLoadingLayer{grid-area:1 / 1;min-width:0}.gridContentLayer{position:relative;z-index:1}.gridContentBlocked{pointer-events:none}.gridLoadingLayer{position:relative;z-index:2;opacity:1;pointer-events:none;transition:opacity .22s ease;will-change:opacity}.gridLoadingLayerExit{opacity:0}.gridSkeletonOverlay{position:relative;width:100%}.gridSkeletonGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridSkeletonItem{position:relative;width:100%}@keyframes rmgShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media(prefers-reduced-motion:reduce){.gridSkeletonItem{animation:none}.gridLoadingLayer{transition:none}}.gridSkelSquare{aspect-ratio:1 / 1}.gridSkelCircle{aspect-ratio:1 / 1;border-radius:999px}.gridSkelGroup{display:flex;min-width:0}.gridSkelRow{flex-direction:row;align-items:center}.gridSkelCol,.gridSkelStack{flex-direction:column;align-items:stretch}.gridSkelTile{position:relative;display:block;width:100%;min-width:0;height:auto;background:var(--rmg-skel-bg, #e5e5e5);border-radius:var(--rmg-skel-radius, 12px);overflow:hidden}.gridSkelShimmer:before{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, ease-in-out) infinite;will-change:transform}@keyframes rmgShimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.introContainer{opacity:0}.introActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}.introContainer [data-rmg-idx]{opacity:0;transform:var(--rmg-intro-transform, translateY(10px) scale(.99));transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.introContainer.introActive [data-rmg-idx]{opacity:1;transform:none}.gridItem:focus-visible{outline:2px solid #0066cc;outline-offset:2px;border-radius:4px}.spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;pointer-events:none;z-index:3;animation:rmgLazySpin 1s linear infinite;background:conic-gradient(from 0deg,#fff,#cfe6ff,#8ec5ff,#4ea1ff,#2f7fff,#1d4ed8);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0)}.spinnerWrap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3}@keyframes rmgLazySpin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
|
package/dist/grid.d.mts
ADDED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import * as React$1 from 'react';
|
|
3
|
+
import { R as ResponsiveNumber, a as BreakpointMap } from './responsive-CvE5dTnP.mjs';
|
|
4
|
+
import { G as GalleryLazyLoadOptions } from './lazy-dGoYpcRa.mjs';
|
|
5
|
+
|
|
6
|
+
type SkeletonLength = number | string;
|
|
7
|
+
type SkeletonShimmer = {
|
|
8
|
+
enabled?: boolean;
|
|
9
|
+
durationMs?: number;
|
|
10
|
+
angleDeg?: number;
|
|
11
|
+
opacity?: number;
|
|
12
|
+
blurPx?: number;
|
|
13
|
+
timing?: string;
|
|
14
|
+
c1?: string;
|
|
15
|
+
c2?: string;
|
|
16
|
+
c3?: string;
|
|
17
|
+
};
|
|
18
|
+
type SkeletonBaseStyle = {
|
|
19
|
+
width?: SkeletonLength;
|
|
20
|
+
maxWidth?: SkeletonLength;
|
|
21
|
+
height?: SkeletonLength;
|
|
22
|
+
maxHeight?: SkeletonLength;
|
|
23
|
+
backgroundColor?: string;
|
|
24
|
+
borderRadius?: SkeletonLength;
|
|
25
|
+
marginTop?: SkeletonLength;
|
|
26
|
+
marginRight?: SkeletonLength;
|
|
27
|
+
marginBottom?: SkeletonLength;
|
|
28
|
+
marginLeft?: SkeletonLength;
|
|
29
|
+
alignSelf?: React$1.CSSProperties["alignSelf"];
|
|
30
|
+
aspectRatio?: SkeletonLength;
|
|
31
|
+
};
|
|
32
|
+
type SkeletonContainerStyle = {
|
|
33
|
+
gap?: SkeletonLength;
|
|
34
|
+
padding?: SkeletonLength;
|
|
35
|
+
align?: React$1.CSSProperties["alignItems"];
|
|
36
|
+
justify?: React$1.CSSProperties["justifyContent"];
|
|
37
|
+
wrap?: boolean;
|
|
38
|
+
width?: SkeletonLength;
|
|
39
|
+
maxWidth?: SkeletonLength;
|
|
40
|
+
};
|
|
41
|
+
type SkeletonContainerStyleResponsive = SkeletonContainerStyle | Record<string, SkeletonContainerStyle>;
|
|
42
|
+
type GridSkeletonNode = {
|
|
43
|
+
kind: "grid";
|
|
44
|
+
style?: SkeletonContainerStyleResponsive;
|
|
45
|
+
count?: number;
|
|
46
|
+
item: SkeletonNode;
|
|
47
|
+
itemWrapStyle?: SkeletonBaseStyle;
|
|
48
|
+
} | SkeletonNode;
|
|
49
|
+
type SkeletonNode = {
|
|
50
|
+
kind: "stack" | "row" | "col";
|
|
51
|
+
style?: SkeletonContainerStyleResponsive;
|
|
52
|
+
children: SkeletonNode[];
|
|
53
|
+
} | {
|
|
54
|
+
kind: "rect" | "square" | "circle";
|
|
55
|
+
style?: SkeletonBaseStyle;
|
|
56
|
+
shimmer?: SkeletonShimmer;
|
|
57
|
+
} | {
|
|
58
|
+
kind: "media";
|
|
59
|
+
count: number;
|
|
60
|
+
direction?: "row" | "col";
|
|
61
|
+
style?: SkeletonContainerStyleResponsive;
|
|
62
|
+
tile?: {
|
|
63
|
+
shape?: "rect" | "square" | "circle";
|
|
64
|
+
style?: SkeletonBaseStyle;
|
|
65
|
+
shimmer?: SkeletonShimmer;
|
|
66
|
+
};
|
|
67
|
+
} | {
|
|
68
|
+
kind: "text";
|
|
69
|
+
fontSize: number;
|
|
70
|
+
lineHeight: number;
|
|
71
|
+
lines?: number;
|
|
72
|
+
style?: SkeletonBaseStyle;
|
|
73
|
+
shimmer?: SkeletonShimmer;
|
|
74
|
+
};
|
|
75
|
+
type GridSkeletonSpec = {
|
|
76
|
+
className?: string;
|
|
77
|
+
layout?: GridSkeletonNode;
|
|
78
|
+
backgroundColor?: string;
|
|
79
|
+
radius?: SkeletonLength;
|
|
80
|
+
shimmer?: SkeletonShimmer;
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
type LoadingOptions = {
|
|
84
|
+
enabled?: boolean;
|
|
85
|
+
force?: boolean;
|
|
86
|
+
renderLoading?: (args: {
|
|
87
|
+
count: number;
|
|
88
|
+
}) => React.ReactNode;
|
|
89
|
+
skeleton?: GridSkeletonSpec;
|
|
90
|
+
};
|
|
91
|
+
type IntroOptions = {
|
|
92
|
+
renderIntro?: (args: {
|
|
93
|
+
active: boolean;
|
|
94
|
+
containerProps: React.HTMLAttributes<HTMLDivElement>;
|
|
95
|
+
}, content: React.ReactNode) => React.ReactNode;
|
|
96
|
+
staggerMs?: number;
|
|
97
|
+
transform?: string;
|
|
98
|
+
durationMs?: number;
|
|
99
|
+
easing?: string;
|
|
100
|
+
staggerLimit?: number;
|
|
101
|
+
};
|
|
102
|
+
type FullscreenTrigger = 'item' | 'media';
|
|
103
|
+
type GridLazyLoadOptions = GalleryLazyLoadOptions;
|
|
104
|
+
type GridOptions = {
|
|
105
|
+
columns?: ResponsiveNumber;
|
|
106
|
+
minColumnWidth?: number | string;
|
|
107
|
+
gap?: ResponsiveNumber;
|
|
108
|
+
rootClassName?: string;
|
|
109
|
+
itemClassName?: string;
|
|
110
|
+
fullscreenTrigger?: FullscreenTrigger;
|
|
111
|
+
lazyLoad?: GridLazyLoadOptions;
|
|
112
|
+
loading?: LoadingOptions;
|
|
113
|
+
intro?: IntroOptions;
|
|
114
|
+
};
|
|
115
|
+
|
|
116
|
+
type Props = GridOptions & {
|
|
117
|
+
children?: React$1.ReactNode;
|
|
118
|
+
breakpoints?: BreakpointMap;
|
|
119
|
+
gridItemBaseClass?: string;
|
|
120
|
+
renderMode?: "wrap" | "passthrough";
|
|
121
|
+
};
|
|
122
|
+
declare function GridLayoutRuntime(props: Props): react_jsx_runtime.JSX.Element;
|
|
123
|
+
|
|
124
|
+
declare const DEFAULT_GRID: Required<Pick<GridOptions, "minColumnWidth" | "gap">>;
|
|
125
|
+
|
|
126
|
+
export { DEFAULT_GRID, GridLayoutRuntime as Grid, type GridLazyLoadOptions, type GridOptions, GridLayoutRuntime as default };
|
package/dist/grid.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{a as DEFAULT_GRID,b as Grid,b as default}from'./chunk-4JEELX5B.mjs';import'./chunk-A6MPGIEJ.mjs';import'./chunk-ESF6XBYF.mjs';import'./chunk-NKBEYOBF.mjs';import'./chunk-EV6ZK4QI.mjs';import'./chunk-X4HEGEZV.mjs';import'./chunk-LVYED5ZM.mjs';import'./chunk-2AHLR3V4.mjs';
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { E as EntriesOptions, M as MediaEntryLink, S as SlideOwner, a as EntryItem } from './types-ChjyCquV.mjs';
|
|
2
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { M as MediaItem } from './media-moIXOhT1.mjs';
|
|
5
|
+
import { a as SliderHandle } from './types-Dqm2ynv2.mjs';
|
|
6
|
+
|
|
7
|
+
declare const DEFAULT_ENTRIES: Required<Pick<EntriesOptions, "mediaLayout">>;
|
|
8
|
+
|
|
9
|
+
type EntriesMediaContainerRender = (args: {
|
|
10
|
+
entryIndex: number;
|
|
11
|
+
mediaNodes: React.ReactNode[];
|
|
12
|
+
entrySliderRefs?: React.RefObject<Array<SliderHandle | null>>;
|
|
13
|
+
}) => React.ReactNode;
|
|
14
|
+
type FullscreenItemsInput = MediaItem[] | string[];
|
|
15
|
+
declare function nodeFromMediaDefault(m: MediaItem): React.ReactNode;
|
|
16
|
+
declare function flattenEntries(items: EntryItem[] | undefined): {
|
|
17
|
+
flattenedMedia: MediaItem[];
|
|
18
|
+
flattenedMap: MediaEntryLink[];
|
|
19
|
+
entryFlatIndex: number[][] | null;
|
|
20
|
+
owners: SlideOwner[];
|
|
21
|
+
};
|
|
22
|
+
type EntriesProps = {
|
|
23
|
+
enabled?: boolean;
|
|
24
|
+
entries: EntriesOptions;
|
|
25
|
+
fullscreen?: {
|
|
26
|
+
enabled?: boolean;
|
|
27
|
+
items?: FullscreenItemsInput;
|
|
28
|
+
};
|
|
29
|
+
renderMediaContainer: EntriesMediaContainerRender;
|
|
30
|
+
nodeFromMedia?: (m: MediaItem) => React.ReactNode;
|
|
31
|
+
entryFlatIndexRef?: React.RefObject<number[][] | null>;
|
|
32
|
+
entryMapRef?: React.RefObject<MediaEntryLink[] | null>;
|
|
33
|
+
fsOwnersRef?: React.RefObject<SlideOwner[]>;
|
|
34
|
+
entrySliderRefs?: React.RefObject<Array<SliderHandle | null>>;
|
|
35
|
+
};
|
|
36
|
+
declare function Entries(props: EntriesProps): react_jsx_runtime.JSX.Element;
|
|
37
|
+
|
|
38
|
+
export { DEFAULT_ENTRIES as D, Entries as E, type EntriesMediaContainerRender as a, type EntriesProps as b, flattenEntries as f, nodeFromMediaDefault as n };
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.entryRow{position:relative;min-height:var(--rmg-entry-min-height, 260px)}.entryRow[data-rmg-entry-mounted="1"] .entrySkeletonWrap{position:absolute;inset:0;z-index:1;height:auto}.entrySkeletonWrap{position:relative;display:block;opacity:1;transition:opacity .15s linear;pointer-events:none;z-index:0;height:var(--rmg-entry-min-height, 260px);border-radius:12px;background-color:var(--rmg-entry-skeleton-bg, transparent);overflow:hidden}.entryInner{position:relative;opacity:0;pointer-events:none;min-height:var(--rmg-entry-min-height, 260px);transition:opacity var(--rmg-entry-intro-duration, .7s) var(--rmg-entry-intro-easing, cubic-bezier(.4,0,.22,1));transition-delay:0ms;z-index:0}.entryRow[data-rmg-entry-ready="1"] .entrySkeletonWrap{opacity:0}.entryRow[data-rmg-entry-ready="1"] .entryInner{opacity:1;pointer-events:auto;transition-delay:calc(var(--rmg-entry-intro-index, 0) * var(--rmg-entry-intro-stagger, .2s))}.entryList{display:flex;flex-direction:column;gap:1.5rem}.entrySkeletonTile{width:100%;height:100%;overflow:hidden}.entrySkeletonShimmer{position:relative;overflow:hidden;border-radius:inherit;--rmg-shimmer-c1: #f0f2f5;--rmg-shimmer-c2: #e6e9ef;--rmg-shimmer-c3: #f0f2f5;--rmg-shimmer-size: 400% 100%;--rmg-shimmer-duration: 1.2s;--rmg-shimmer-timing: linear;background:linear-gradient(90deg,var(--rmg-shimmer-c1) 25%,var(--rmg-shimmer-c2) 37%,var(--rmg-shimmer-c3) 63%);background-size:var(--rmg-shimmer-size);animation:rmgShimmer var(--rmg-shimmer-duration) infinite var(--rmg-shimmer-timing)}.entrySkelRoot{--rmg-skel-bg: rgba(0, 0, 0, .08);--rmg-skel-hi: rgba(0, 0, 0, .12);--rmg-skel-radius: 12px;--rmg-skel-shimmer-enabled: 1;--rmg-skel-shimmer-duration: 1.2s;--rmg-skel-shimmer-band: 40%;--rmg-skel-shimmer-angle: 25deg;width:100%}.entrySkelGroup{display:flex;min-width:0}.entrySkelStack{flex-direction:column;width:100%}.entrySkelRow{flex-direction:row;width:100%}.entrySkelCol{flex-direction:column;width:100%}.entrySkelTile{flex:0 0 auto;position:relative;display:block;background:var(--rmg-skel-bg, rgba(0, 0, 0, .08));border-radius:var(--rmg-skel-radius);overflow:hidden}.entrySkelTile:after{content:"";position:absolute;opacity:calc(var(--rmg-skel-shimmer-enabled) * 1);transform:rotate(var(--rmg-skel-shimmer-angle));background:linear-gradient(90deg,transparent 0%,var(--rmg-skel-hi, rgba(255, 255, 255, .18)) 50%,transparent 100%);width:var(--rmg-skel-shimmer-band);inset:-40% -40% -40% -60%;animation:rmg-skel-shimmer var(--rmg-skel-shimmer-duration) linear infinite}@keyframes rmg-skel-shimmer{0%{left:-60%}to{left:160%}}.entrySkelRect{flex:0 0 auto;width:100%;height:16px}.entrySkelSquare{width:48px;height:48px}.entrySkelCircle{width:44px;height:44px;border-radius:999px}[data-rmg-plyr-provider=mp4] :global(.plyr__video-wrapper),[data-rmg-plyr-provider=vimeo] :global(.plyr__video-wrapper){pointer-events:none!important}.thumb{position:relative;border:1px solid rgba(0,0,0,.12);border-radius:6px;overflow:hidden;box-sizing:border-box}.thumb:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px #111 inset;opacity:0;transition:opacity .12s ease;z-index:1}.thumb[data-active=true]:after{opacity:1}.thumb :global(img){display:block;width:100%;height:100%;object-fit:cover;position:relative;z-index:0}.fade_container [data-rmg-thumb-index]>*{opacity:0;transform:translateY(var(--rmg-intro-transform, 10px));transition:opacity var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-thumb-index]>*{opacity:1;transform:translateY(0)}.fullscreenOverlay{position:fixed;inset:0;opacity:0;pointer-events:none;background-color:#000c;transition:opacity .3s cubic-bezier(.4,0,.22,1);will-change:opacity;z-index:8999;transform:translateZ(0);backface-visibility:hidden;contain:paint}.open{opacity:1;pointer-events:auto}.duplicateImg{position:fixed;display:none;transform-origin:top left;transition:transform .3s cubic-bezier(.4,0,.22,1);z-index:9998;will-change:transform}.closeBtn,.leftChevron,.rightChevron,.counter{position:fixed;opacity:0;pointer-events:none;transition:opacity .3s cubic-bezier(.4,0,.22,1);z-index:2147483602}.closeBtn.open,.leftChevron.open,.rightChevron.open,.counter.open{opacity:1;pointer-events:auto}.closeBtn{top:12px;right:12px;background:transparent;border:none;padding:0;width:35px;height:35px;cursor:pointer}.leftChevron,.rightChevron{top:45.5%;width:50px;height:50px;cursor:pointer;background-color:transparent;border:none}.leftChevron{left:0;transform:rotate(180deg)}.rightChevron{right:0}.counter{top:15px;left:16px;color:#fff;font-size:14px;line-height:32px;user-select:none;text-shadow:1px 1px 3px #4f4f4f}.fsOverlayCaption{position:fixed;padding:1rem 1.5rem;color:#fff;font-size:.875rem;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);z-index:9999}.fsOverlayCaption.open{opacity:1;transform:translateY(0)}.track{position:relative;left:0}.rtl .track{left:auto;right:0}.slider_container,.fade_container{height:100%;min-height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px))}.viewport{overflow:hidden;height:100%;width:100%;position:relative}.track{position:relative;height:100%;width:100%;will-change:transform;transform:translateZ(0);backface-visibility:hidden}.fadeInStart{opacity:0}.fadeInActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}@media(prefers-reduced-motion:reduce){.fadeInActive{transition:none}}.pagination_dot{position:relative;width:14px;height:14px;overflow:hidden;border-radius:50%;margin:5px;cursor:pointer;transition:transform .2s ease,background-color .3s ease,box-shadow .3s ease}.pagination_dot:hover{transform:scale(1.2)}.pagination_dot.active{background-color:#50a3ff;box-shadow:0 0 8px #50a3ff99}.pagination_dot.inactive{background-color:#d3d3d3}.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background-color:#0000004d;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}.fade_container [data-rmg-idx]>*{opacity:0;transform:translateY(var(--rmg-intro-offset, 10px));transition:opacity var(--rmg-intro-duration, 300) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, 300) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-idx]>*{opacity:1;transform:translateY(0)}.sliderSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;justify-content:center}.sliderSkeletonRow{display:flex;width:100%;gap:.75rem;height:var(--rmg-slider-initial-height, var(--rmg-slider-height, 320px));align-items:stretch}.sliderShell{position:relative;width:100%;container-type:inline-size;height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px));min-height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px));max-height:var(--rmg-slider-height, var(--rmg-slider-initial-height, 1px))}.sliderSkeletonItem{flex:1 1 0;height:100%;min-width:0;display:flex}.sliderSkeletonGroup{display:flex;min-width:0;min-height:0;width:100%}.sliderSkeleton{width:100%;height:auto;border-radius:var(--rmg-shimmer-radius, 10px);overflow:hidden;position:relative;background:linear-gradient(90deg,var(--rmg-shimmer-c1, #f0f2f5) 25%,var(--rmg-shimmer-c2, #e6e9ef) 37%,var(--rmg-shimmer-c3, #f0f2f5) 63%);background-size:var(--rmg-shimmer-size, 400% 100%);animation:rmgShimmer var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear)}.thumbSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:center;padding:.5rem}.thumbSkeletonRow{display:flex;width:100%;height:100%}.thumbSkeleton{border-radius:6px;overflow:hidden;position:relative;background:linear-gradient(90deg,var(--rmg-shimmer-c1, #f0f2f5) 25%,var(--rmg-shimmer-c2, #e6e9ef) 37%,var(--rmg-shimmer-c3, #f0f2f5) 63%);background-size:var(--rmg-shimmer-size, 400% 100%);animation:rmgShimmer var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear)}.gridRoot,.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridItem{position:relative;display:block;cursor:pointer}.gridItem img,.gridItem video{display:block;width:100%;height:auto;object-fit:cover}.gridSkeletonOverlay{position:relative;width:100%}.gridSkeletonGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridSkeletonItem{position:relative;width:100%}@keyframes rmgShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media(prefers-reduced-motion:reduce){.gridSkeletonItem{animation:none}}.gridSkelTile{position:relative;display:block;width:100%;min-width:0;height:auto;background:var(--rmg-skel-bg, rgba(0, 0, 0, .08));border-radius:var(--rmg-skel-radius, 12px);overflow:hidden}.gridSkelSquare{aspect-ratio:1 / 1}.gridSkelCircle{aspect-ratio:1 / 1;border-radius:999px}.gridSkelGroup{display:flex;min-width:0}.gridSkelRow{flex-direction:row;align-items:center}.gridSkelCol,.gridSkelStack{flex-direction:column;align-items:stretch}.gridSkelShimmer:before{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * 1);background:linear-gradient(var(--rmg-skel-shimmer-angle, 25deg),transparent 0%,var(--rmg-skel-hi, rgba(255, 255, 255, .16)) 50%,transparent 100%);transform:translate(-120%);animation:rmg_grid_skel_shimmer var(--rmg-skel-shimmer-duration, 1.2s) linear infinite;background-size:var(--rmg-skel-shimmer-band, 40%) 100%}@keyframes rmg_grid_skel_shimmer{0%{transform:translate(-120%)}to{transform:translate(120%)}}.masonryRoot{display:flex;align-items:flex-start;width:100%;column-gap:var(--rmg-masonry-gap, 8px)}.masonryCol{flex:1;min-width:0;display:flex;flex-direction:column}.masonryItem{position:relative;display:block;cursor:pointer}.masonryItem img,.masonryItem video{display:block;width:100%;object-fit:cover}.introContainer{opacity:0}.introActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}.introContainer [data-rmg-idx]{opacity:0;transform:var(--rmg-intro-transform, translateY(10px) scale(.99));transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.introContainer.introActive [data-rmg-idx]{opacity:1;transform:none}
|
|
1
|
+
.entryRow{position:relative;min-height:var(--rmg-entry-min-height, 260px)}.entryRow[data-rmg-entry-mounted="1"] .entrySkeletonWrap{position:absolute;inset:0;z-index:1;height:auto}.entrySkeletonWrap{position:relative;display:block;opacity:1;transition:opacity .22s ease;transition-delay:0ms;pointer-events:none;z-index:0;height:var(--rmg-entry-min-height, 260px);border-radius:12px;background-color:var(--rmg-entry-skeleton-bg, transparent);overflow:hidden}.entryInner{position:relative;opacity:0;pointer-events:none;min-height:var(--rmg-entry-min-height, 260px);transition:opacity var(--rmg-entry-intro-duration, .7s) var(--rmg-entry-intro-easing, cubic-bezier(.4,0,.22,1));transition-delay:0ms;z-index:0}.entryRow[data-rmg-entry-ready="1"] .entrySkeletonWrap{opacity:0;transition-delay:var(--rmg-entry-intro-delay, 0ms)}.entryRow[data-rmg-entry-ready="1"] .entryInner{opacity:1;pointer-events:auto;transition-delay:var(--rmg-entry-intro-delay, 0ms)}.entryList{display:flex;flex-direction:column;gap:1.5rem}.entrySkelRoot{--rmg-skel-radius: 12px;width:100%}.entrySkelGroup{display:flex;min-width:0}.entrySkelStack{flex-direction:column;width:100%}.entrySkelRow{flex-direction:row;width:100%}.entrySkelCol{flex-direction:column;width:100%}.entrySkelTile{flex:0 0 auto;width:100%;height:100%;position:relative;display:block;background:var(--rmg-skel-bg, #e5e5e5);border-radius:var(--rmg-skel-radius);overflow:hidden}.entrySkelTile:after{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, ease-in-out) infinite;will-change:transform}.entrySkelRect{flex:0 0 auto;width:100%;height:16px}.entrySkelSquare{width:48px;height:48px}.entrySkelCircle{width:44px;height:44px;border-radius:999px}.track{position:relative;left:0}[data-rmg-plyr-provider=mp4] :global(.plyr__video-wrapper),[data-rmg-plyr-provider=vimeo] :global(.plyr__video-wrapper){pointer-events:none!important}.spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;pointer-events:none;z-index:3;animation:rmgLazySpin 1s linear infinite;background:conic-gradient(from 0deg,#fff,#cfe6ff,#8ec5ff,#4ea1ff,#2f7fff,#1d4ed8);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0)}.spinnerWrap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3}@keyframes rmgLazySpin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.fullscreenOverlay{position:fixed;inset:0;opacity:0;pointer-events:none;background-color:#000c;transition:opacity .3s cubic-bezier(.4,0,.22,1);will-change:opacity;z-index:calc(var(--rmg-fs-z, 9999) - 1);transform:translateZ(0);backface-visibility:hidden;contain:paint}.open{opacity:1;pointer-events:auto}.duplicateImg{position:fixed;display:none;transform-origin:top left;transition:transform .3s cubic-bezier(.4,0,.22,1);z-index:calc(var(--rmg-fs-z, 9999) + 1);will-change:transform}.closeBtn,.leftChevron,.rightChevron,.counter{position:fixed;opacity:0;pointer-events:none;transition:opacity .36s cubic-bezier(.4,0,.22,1);z-index:calc(var(--rmg-fs-z, 9999) + 2)}.closeBtn.open,.leftChevron.open,.rightChevron.open,.counter.open{opacity:1;pointer-events:auto}.closeBtn{top:12px;right:12px;background:transparent;border:none;padding:0;width:35px;height:35px;cursor:pointer}.leftChevron,.rightChevron{top:45.5%;width:50px;height:50px;cursor:pointer;background-color:transparent;border:none}.leftChevron{left:0;transform:rotate(180deg)}.rightChevron{right:0}.counter{top:15px;left:16px;color:#fff;font-size:14px;line-height:32px;user-select:none;text-shadow:1px 1px 3px #4f4f4f}.fsOverlayCaption{position:fixed;padding:1rem 1.5rem;color:#fff;font-size:.875rem;pointer-events:none;opacity:0;transform:translateY(8px);transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);z-index:calc(var(--rmg-fs-z, 9999) + 1)}.fsOverlayCaption.open{opacity:1;transform:translateY(0)}.thumbShell{position:relative}.thumbContentLayer{position:relative;z-index:1}.thumbContentBlocked{pointer-events:none}.thumbLoadingLayer{position:absolute;inset:0;z-index:5;opacity:1;pointer-events:none;transition:opacity .22s ease;will-change:opacity}.thumbLoadingLayerExit{opacity:0}.thumbSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:center}.thumbSkeletonRow{display:flex;width:100%;height:100%}.thumbSkeleton{border-radius:6px;overflow:hidden;position:relative;background:linear-gradient(90deg,var(--rmg-shimmer-c1, #f0f2f5) 25%,var(--rmg-shimmer-c2, #e6e9ef) 37%,var(--rmg-shimmer-c3, #f0f2f5) 63%);background-size:var(--rmg-shimmer-size, 400% 100%);animation:rmgThumbShimmer var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear)}@keyframes rmgThumbShimmer{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.thumbLoadingLayer{transition:none}}.thumb{position:relative;overflow:hidden;box-sizing:border-box}.thumb:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px #111 inset;opacity:0;transition:opacity .12s ease;z-index:1}.thumb[data-active=true]:after{opacity:1}.fadeInStart{opacity:0}@media(prefers-reduced-motion:reduce){.fadeInActive{transition:none}}.fade_container [data-rmg-thumb-index]>*{opacity:0;transform:translateY(var(--rmg-intro-transform, 10px));transition:opacity var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, .3s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-thumb-index]>*{opacity:1;transform:translateY(0)}.track{position:relative;left:0;display:flex;width:100%;align-items:stretch;will-change:transform;transform:translateZ(0);backface-visibility:hidden}.track[data-rmg-axis=x]{flex-direction:row}.track[data-rmg-axis=y]{flex-direction:column}.rtl .track{left:auto;right:0}.viewport{overflow:hidden;height:auto;width:100%;position:relative}.contentLayer{position:relative;z-index:1}.contentBlocked{pointer-events:none}.loadingLayer{position:absolute;inset:0;z-index:5;opacity:1;pointer-events:none;transition:opacity .22s ease;will-change:opacity}.loadingLayerExit,.fadeInStart{opacity:0}.fadeInActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}@media(prefers-reduced-motion:reduce){.fadeInActive,.loadingLayer{transition:none}}.pagination_dot{position:relative;width:14px;height:14px;overflow:hidden;border-radius:50%;margin:5px;cursor:pointer;transition:transform .2s ease,background-color .3s ease,box-shadow .3s ease}.pagination_dot:hover{transform:scale(1.2)}.pagination_dot.active{background-color:#50a3ff;box-shadow:0 0 8px #50a3ff99}.pagination_dot.inactive{background-color:#d3d3d3}.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple .6s linear;background-color:#0000004d;pointer-events:none}@keyframes ripple{to{transform:scale(4);opacity:0}}.fade_container [data-rmg-idx]>*{opacity:0;transform:translateY(var(--rmg-intro-offset, 10px));transition:opacity var(--rmg-intro-duration, 600) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1)),transform var(--rmg-intro-duration, 600) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1));transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 60ms));will-change:opacity,transform}.fade_container.fadeInActive [data-rmg-idx]>*{opacity:1;transform:translateY(0)}.spinner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s ease;will-change:opacity;z-index:3;animation:rmgSpin 1s linear infinite;background:conic-gradient(from 0deg,#fff,#cfe6ff,#8ec5ff,#4ea1ff,#2f7fff,#1d4ed8);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0)}@keyframes rmgSpin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.spinnerWrap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .18s ease;will-change:opacity;z-index:3}.sliderSkeletonOverlay{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;justify-content:center}.sliderSkeletonRow{display:flex;width:100%;gap:.75rem;height:var(--rmg-slider-initial-height, var(--rmg-slider-height, 320px));align-items:stretch}.sliderShell{position:relative;overflow-anchor:none;width:100%;container-type:inline-size;height:auto;min-height:var(--rmg-slider-initial-height, var(--rmg-slider-height));max-height:none}.sliderSkeletonItem{flex:1 1 0;height:100%;min-width:0;display:flex}.sliderSkeletonOverlay[data-rmg-skel-mode=peek] .sliderSkeletonItem{flex:0 0 auto}.sliderSkeletonGroup{display:flex;min-width:0;min-height:0;width:100%}.sliderSkeleton{width:100%;height:auto;position:relative;overflow:hidden;border-radius:var(--rmg-skel-radius, 12px);background:var(--rmg-skel-bg, #e5e5e5)}.sliderSkeleton:after{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, ease-in-out) infinite;will-change:transform}@media(prefers-reduced-motion:reduce){.sliderSkeleton:after{animation:none;opacity:0}}.gridRoot,.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridItem{position:relative;display:block}.gridItem img,.gridItem video{display:block;width:100%;height:auto;object-fit:cover}.gridShell{display:grid;position:relative;width:100%}.gridContentLayer,.gridLoadingLayer{grid-area:1 / 1;min-width:0}.gridContentLayer{position:relative;z-index:1}.gridContentBlocked{pointer-events:none}.gridLoadingLayer{position:relative;z-index:2;opacity:1;pointer-events:none;transition:opacity .22s ease;will-change:opacity}.gridLoadingLayerExit{opacity:0}.gridSkeletonOverlay{position:relative;width:100%}.gridSkeletonGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--rmg-grid-min, 160px),1fr));gap:var(--rmg-grid-gap, 8px)}.gridSkeletonItem{position:relative;width:100%}@keyframes rmgShimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@media(prefers-reduced-motion:reduce){.gridSkeletonItem{animation:none}.gridLoadingLayer{transition:none}}.gridSkelSquare{aspect-ratio:1 / 1}.gridSkelCircle{aspect-ratio:1 / 1;border-radius:999px}.gridSkelGroup{display:flex;min-width:0}.gridSkelRow{flex-direction:row;align-items:center}.gridSkelCol,.gridSkelStack{flex-direction:column;align-items:stretch}.gridSkelTile{position:relative;display:block;width:100%;min-width:0;height:auto;background:var(--rmg-skel-bg, #e5e5e5);border-radius:var(--rmg-skel-radius, 12px);overflow:hidden}.gridSkelShimmer:before{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, ease-in-out) infinite;will-change:transform}.introContainer{opacity:0}.gridItem:focus-visible{outline:2px solid #0066cc;outline-offset:2px;border-radius:4px}.masonryRoot{display:flex;align-items:flex-start;width:100%;column-gap:var(--rmg-masonry-gap, 8px)}.masonryCol{flex:1;min-width:0;display:flex;flex-direction:column}.masonryItem{position:relative;display:block}.masonryItem img,.masonryItem video{display:block;width:100%;object-fit:cover}.masonryShell{display:grid;position:relative;width:100%}.masonryContentLayer,.masonryLoadingLayer{grid-area:1 / 1;min-width:0}.masonryContentLayer{position:relative;z-index:1}.masonryContentBlocked{pointer-events:none}.masonryLoadingLayer{position:relative;z-index:2;opacity:1;pointer-events:none;transition:opacity .22s ease;will-change:opacity}.masonryLoadingLayerExit,.introContainer{opacity:0}.introActive{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}.introContainer [data-rmg-idx]{opacity:0;transform:var(--rmg-intro-transform, translateY(10px) scale(.99));transition:opacity .3s cubic-bezier(.4,0,.22,1),transform .3s cubic-bezier(.4,0,.22,1);transition-delay:calc(var(--rmg-intro-index, 0) * var(--rmg-intro-stagger, 40ms));will-change:opacity,transform}.introContainer.introActive [data-rmg-idx]{opacity:1;transform:none}.masonrySkelItem{display:block;width:100%;break-inside:avoid;page-break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:var(--rmg-mskel-gap)}.masonrySkeletonOverlay{position:relative;inset:0;z-index:5;pointer-events:none}.masonrySkeletonRoot{width:100%}.masonrySkeletonCol{flex:1;min-width:0;display:flex;flex-direction:column}.masonrySkeletonItem{display:block;width:100%;break-inside:avoid;page-break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:var(--rmg-mskel-gap);border-radius:var(--rmg-skel-radius, 12px);background:var(--rmg-skel-bg, #e5e5e5);overflow:hidden;position:relative}.masonrySkeletonItem:after{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:blur(var(--rmg-skel-shimmer-blur, .2px));background-image:linear-gradient(var(--rmg-skel-shimmer-angle, 90deg),transparent 0%,var(--rmg-skel-shimmer-c1, rgba(255, 255, 255, .25)) 22%,var(--rmg-skel-shimmer-c2, rgba(255, 255, 255, .45)) 50%,var(--rmg-skel-shimmer-c3, rgba(255, 255, 255, .25)) 78%,transparent 100%);animation:rmgShimmer var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, ease-in-out) infinite;will-change:transform}@keyframes rmgShimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.masonryLoadingLayer{transition:none}}
|