react-motion-gallery 2.0.7 → 2.0.9
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 +1030 -30
- 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 -1178
- package/dist/index.mjs +1 -66
- 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 +35 -15
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
type GalleryLazyLoadRenderArgs = {
|
|
4
|
+
kind: "image" | "video";
|
|
5
|
+
isClone: boolean;
|
|
6
|
+
};
|
|
7
|
+
type GalleryLazyLoadOptions = {
|
|
8
|
+
enabled?: boolean;
|
|
9
|
+
spinner?: boolean | React.ReactNode | ((args: GalleryLazyLoadRenderArgs) => React.ReactNode);
|
|
10
|
+
spinnerClassName?: string;
|
|
11
|
+
spinnerStyle?: React.CSSProperties;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export type { GalleryLazyLoadOptions as G };
|
package/dist/masonry.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
.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}}.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)}}
|
|
@@ -0,0 +1,73 @@
|
|
|
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 MasonrySkeletonSpec = {
|
|
19
|
+
className?: string;
|
|
20
|
+
ratios?: number[];
|
|
21
|
+
heightsPx?: number[];
|
|
22
|
+
backgroundColor?: string;
|
|
23
|
+
highlightColor?: string;
|
|
24
|
+
radius?: SkeletonLength;
|
|
25
|
+
shimmer?: SkeletonShimmer;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
type LoadingOptions = {
|
|
29
|
+
enabled?: boolean;
|
|
30
|
+
force?: boolean;
|
|
31
|
+
renderLoading?: (args: {
|
|
32
|
+
count: number;
|
|
33
|
+
}) => React.ReactNode;
|
|
34
|
+
skeleton?: MasonrySkeletonSpec;
|
|
35
|
+
};
|
|
36
|
+
type IntroOptions = {
|
|
37
|
+
renderIntro?: (args: {
|
|
38
|
+
active: boolean;
|
|
39
|
+
containerProps: React.HTMLAttributes<HTMLDivElement>;
|
|
40
|
+
}, content: React.ReactNode) => React.ReactNode;
|
|
41
|
+
staggerMs?: number;
|
|
42
|
+
transform?: string;
|
|
43
|
+
durationMs?: number;
|
|
44
|
+
easing?: string;
|
|
45
|
+
staggerLimit?: number;
|
|
46
|
+
};
|
|
47
|
+
type MasonryLazyLoadOptions = GalleryLazyLoadOptions;
|
|
48
|
+
type MasonryOptions = {
|
|
49
|
+
columns?: ResponsiveNumber;
|
|
50
|
+
gap?: ResponsiveNumber;
|
|
51
|
+
placement?: "balanced" | "roundRobin";
|
|
52
|
+
estimatedItemHeight?: number;
|
|
53
|
+
as?: React.ElementType;
|
|
54
|
+
rootRef?: React.Ref<HTMLDivElement>;
|
|
55
|
+
classNames?: {
|
|
56
|
+
root?: string;
|
|
57
|
+
column?: string;
|
|
58
|
+
item?: string;
|
|
59
|
+
};
|
|
60
|
+
lazyLoad?: MasonryLazyLoadOptions;
|
|
61
|
+
loading?: LoadingOptions;
|
|
62
|
+
intro?: IntroOptions;
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
type Props = MasonryOptions & {
|
|
66
|
+
children?: React$1.ReactNode;
|
|
67
|
+
breakpoints?: BreakpointMap;
|
|
68
|
+
};
|
|
69
|
+
declare function Masonry(props: Props): react_jsx_runtime.JSX.Element;
|
|
70
|
+
|
|
71
|
+
declare const DEFAULT_MASONRY: Required<Pick<MasonryOptions, "placement">>;
|
|
72
|
+
|
|
73
|
+
export { DEFAULT_MASONRY, Masonry, type MasonryLazyLoadOptions, type MasonryOptions, Masonry as default };
|
package/dist/masonry.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export{a as DEFAULT_MASONRY,b as Masonry,b as default}from'./chunk-HL75KJY3.mjs';import'./chunk-A6MPGIEJ.mjs';import'./chunk-NKBEYOBF.mjs';import'./chunk-EV6ZK4QI.mjs';import'./chunk-X4HEGEZV.mjs';import'./chunk-LVYED5ZM.mjs';import'./chunk-2AHLR3V4.mjs';
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
type MediaItem = {
|
|
2
|
+
kind: "image";
|
|
3
|
+
src: string;
|
|
4
|
+
alt?: string;
|
|
5
|
+
caption?: React.ReactNode;
|
|
6
|
+
srcSet?: string;
|
|
7
|
+
sizes?: string;
|
|
8
|
+
width?: number;
|
|
9
|
+
height?: number;
|
|
10
|
+
} | {
|
|
11
|
+
kind: "video";
|
|
12
|
+
src: string;
|
|
13
|
+
alt?: string;
|
|
14
|
+
poster?: string;
|
|
15
|
+
caption?: React.ReactNode;
|
|
16
|
+
} | {
|
|
17
|
+
kind: "node";
|
|
18
|
+
node: React.ReactNode;
|
|
19
|
+
};
|
|
20
|
+
type MediaInput = string | {
|
|
21
|
+
src: string;
|
|
22
|
+
kind?: "image" | "video";
|
|
23
|
+
poster?: string;
|
|
24
|
+
alt?: string;
|
|
25
|
+
caption?: React.ReactNode;
|
|
26
|
+
srcSet?: string;
|
|
27
|
+
sizes?: string;
|
|
28
|
+
width?: number;
|
|
29
|
+
height?: number;
|
|
30
|
+
} | {
|
|
31
|
+
kind: "node";
|
|
32
|
+
node: React.ReactNode;
|
|
33
|
+
};
|
|
34
|
+
declare const toMediaItems: (inputs: string[] | MediaInput[]) => MediaItem[];
|
|
35
|
+
|
|
36
|
+
export { type MediaItem as M, toMediaItems as t };
|