react-motion-gallery 2.0.17 → 2.0.19
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 +297 -32
- package/dist/chunk-5HIHJGIV.mjs +45 -0
- package/dist/chunk-6TPHLAUP.mjs +1 -0
- package/dist/chunk-AKY343WN.mjs +1 -0
- package/dist/chunk-BIDZ4WZB.mjs +2 -0
- package/dist/chunk-DBIFLX6Y.mjs +6 -0
- package/dist/chunk-ECQ74X24.mjs +1 -0
- package/dist/chunk-FJYYM5TH.mjs +1 -0
- package/dist/chunk-GSEIEFRW.mjs +1 -0
- package/dist/chunk-GT6IL37J.mjs +1 -0
- package/dist/chunk-J4E4PKE5.mjs +1 -0
- package/dist/chunk-JD3VAF3N.mjs +4 -0
- package/dist/chunk-JMFDRKTX.mjs +2 -0
- package/dist/chunk-K6PQU6HF.mjs +1 -0
- package/dist/chunk-KSOQWCCL.mjs +6 -0
- package/dist/chunk-NABNX5HB.mjs +1 -0
- package/dist/chunk-NEJ27O2B.mjs +2 -0
- package/dist/chunk-Q2PY6ZMU.mjs +2 -0
- package/dist/chunk-TKPLWDPW.mjs +7 -0
- package/dist/chunk-UAEPMZQY.mjs +1 -0
- package/dist/chunk-UV2SUN5V.mjs +1 -0
- package/dist/chunk-VXSRNAH4.mjs +1 -0
- package/dist/chunk-WLWVKQPL.mjs +4 -0
- package/dist/chunk-WZWMG4ZT.mjs +1 -0
- package/dist/chunk-XOS5AXSR.mjs +4 -0
- package/dist/chunk-ZX5E327W.mjs +1 -0
- package/dist/{elements-Bd1vm4Uk.d.mts → controls-SpWg1Kgt.d.mts} +10 -3
- package/dist/core.d.mts +20 -9
- package/dist/core.mjs +1 -1
- package/dist/entries.css +1 -1
- package/dist/entries.d.mts +41 -11
- package/dist/entries.mjs +1 -1
- package/dist/fullscreen.css +1 -1
- package/dist/fullscreen.d.mts +36 -135
- package/dist/fullscreen.mjs +1 -1
- package/dist/fullscreenThumbnails.css +1 -1
- package/dist/fullscreenThumbnails.d.mts +9 -6
- package/dist/fullscreenThumbnails.mjs +1 -1
- package/dist/grid.css +1 -1
- package/dist/grid.d.mts +18 -115
- package/dist/grid.mjs +1 -1
- package/dist/{index-C0AqfaC3.d.mts → index-CwwxTQKa.d.mts} +3 -3
- package/dist/index.css +1 -1
- package/dist/index.d.mts +19 -15
- package/dist/index.mjs +1 -1
- package/dist/layout-CR6f2aPH.d.mts +95 -0
- package/dist/masonry.css +1 -1
- package/dist/masonry.d.mts +12 -65
- package/dist/masonry.mjs +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/{media-moIXOhT1.d.mts → plyrTypes-Cq4C3ul5.d.mts} +8 -1
- package/dist/responsive-D_xhZmVI.d.mts +186 -0
- package/dist/slider.css +1 -1
- package/dist/slider.d.mts +16 -8
- package/dist/slider.mjs +1 -1
- package/dist/{sliderSub-DDPjywVp.d.mts → sliderSub-Bo6Y8as_.d.mts} +13 -1
- package/dist/text-Cl2tR8oO.d.mts +4 -0
- package/dist/thumbnails.css +1 -1
- package/dist/thumbnails.d.mts +22 -8
- package/dist/thumbnails.mjs +1 -1
- package/dist/{types-Bi2iBbyG.d.mts → types-CHUayqcj.d.mts} +26 -5
- package/dist/{types-9fvdyhuG.d.mts → types-DY058l5M.d.mts} +45 -10
- package/dist/types-Dhh8xfHo.d.mts +18 -0
- package/dist/{types-CQ6I3EfZ.d.mts → types-ROPjU8Nl.d.mts} +24 -12
- package/dist/types-VULXzSa2.d.mts +68 -0
- package/dist/types-XEr8LRal.d.mts +65 -0
- package/dist/{types-ChjyCquV.d.mts → types-_1D0QtfD.d.mts} +24 -8
- package/dist/video.css +1 -1
- package/dist/video.d.mts +2 -2
- package/dist/video.mjs +1 -1
- package/dist/zoomPan.d.mts +16 -0
- package/dist/zoomPan.mjs +1 -0
- package/package.json +11 -22
- package/dist/chunk-2AHLR3V4.mjs +0 -1
- package/dist/chunk-CAYO7NIA.mjs +0 -2
- package/dist/chunk-CROFW72U.mjs +0 -2
- package/dist/chunk-ESF6XBYF.mjs +0 -1
- package/dist/chunk-EV6ZK4QI.mjs +0 -1
- package/dist/chunk-H4BEIJAD.mjs +0 -5
- package/dist/chunk-HHAEEL7K.mjs +0 -10
- package/dist/chunk-KN72Q6DM.mjs +0 -5
- package/dist/chunk-KZUAS63N.mjs +0 -1
- package/dist/chunk-NWU2GBRJ.mjs +0 -1
- package/dist/chunk-O6MJXVAN.mjs +0 -4
- package/dist/chunk-PGF2LSVK.mjs +0 -2
- package/dist/chunk-Q5LUIIWE.mjs +0 -1
- package/dist/chunk-SALMTFMK.mjs +0 -1
- package/dist/chunk-TZGAHWM7.mjs +0 -1
- package/dist/chunk-UOXJOJEY.mjs +0 -59
- package/dist/chunk-X4HEGEZV.mjs +0 -1
- package/dist/chunk-YRQVG3MM.mjs +0 -1
- package/dist/lazy-dGoYpcRa.d.mts +0 -14
- package/dist/plyrTypes-CmP9NWvX.d.mts +0 -8
- package/dist/responsive-CvE5dTnP.d.mts +0 -5
- package/dist/types-tb9Qf2Mj.d.mts +0 -46
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import Plyr from 'plyr';
|
|
2
|
+
|
|
1
3
|
type MediaItem = {
|
|
2
4
|
kind: "image";
|
|
3
5
|
src: string;
|
|
@@ -33,4 +35,9 @@ type MediaInput = string | {
|
|
|
33
35
|
};
|
|
34
36
|
declare const toMediaItems: (inputs: string[] | MediaInput[]) => MediaItem[];
|
|
35
37
|
|
|
36
|
-
|
|
38
|
+
type PlyrSource = Plyr.SourceInfo;
|
|
39
|
+
type PlyrOptions = Plyr.Options;
|
|
40
|
+
type PlyrSourceBuilder = (item: MediaItem, index: number) => PlyrSource;
|
|
41
|
+
type PlyrOptionsBuilder = PlyrOptions | ((item: MediaItem, index: number) => PlyrOptions);
|
|
42
|
+
|
|
43
|
+
export { type MediaItem as M, type PlyrSourceBuilder as P, type PlyrOptionsBuilder as a, type PlyrSource as b, type PlyrOptions as c, toMediaItems as t };
|
|
@@ -0,0 +1,186 @@
|
|
|
1
|
+
import * as React$1 from 'react';
|
|
2
|
+
import { M as MediaItem, P as PlyrSourceBuilder, a as PlyrOptionsBuilder } from './plyrTypes-Cq4C3ul5.mjs';
|
|
3
|
+
import { a as ZoomPanOptions } from './types-Dhh8xfHo.mjs';
|
|
4
|
+
|
|
5
|
+
type ElementStyle = {
|
|
6
|
+
className?: string;
|
|
7
|
+
style?: React.CSSProperties;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
type LoadingTimingOptions = {
|
|
11
|
+
exitMs?: number;
|
|
12
|
+
minVisibleMs?: number;
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
type IndexMode = "animated" | "instant";
|
|
16
|
+
type FullscreenOpenMethod = "fade" | "scale";
|
|
17
|
+
type OpenFullscreenAtArgs = {
|
|
18
|
+
index: number;
|
|
19
|
+
method?: FullscreenOpenMethod;
|
|
20
|
+
event?: Event;
|
|
21
|
+
};
|
|
22
|
+
type FullscreenOpenSource = "slider" | "grid" | "masonry" | "entries" | "api";
|
|
23
|
+
type FullscreenOpenRequest = {
|
|
24
|
+
source: FullscreenOpenSource;
|
|
25
|
+
index: number;
|
|
26
|
+
image: HTMLImageElement | null;
|
|
27
|
+
method?: FullscreenOpenMethod;
|
|
28
|
+
requestedMethod?: FullscreenOpenMethod;
|
|
29
|
+
event?: Event;
|
|
30
|
+
};
|
|
31
|
+
interface GalleryApi {
|
|
32
|
+
rootNode(): HTMLElement | null;
|
|
33
|
+
containerNode(): HTMLElement | null;
|
|
34
|
+
getViewportNode: () => HTMLDivElement | null;
|
|
35
|
+
slideNodes(): HTMLElement[];
|
|
36
|
+
onReady?(cb: (nodes: HTMLElement[]) => void): () => void;
|
|
37
|
+
whenReady?(): Promise<HTMLElement[]>;
|
|
38
|
+
isReady?(): boolean;
|
|
39
|
+
scrollTo(index: number, jump?: boolean): void;
|
|
40
|
+
scrollNext(jump?: boolean): void;
|
|
41
|
+
scrollPrev(jump?: boolean): void;
|
|
42
|
+
canScrollNext(): boolean;
|
|
43
|
+
canScrollPrev(): boolean;
|
|
44
|
+
getIndex(): number;
|
|
45
|
+
selectCell(index: number, jump?: boolean): void;
|
|
46
|
+
scrollProgress(): number;
|
|
47
|
+
cellsInView(): number[];
|
|
48
|
+
append(nodes: React.ReactNode | React.ReactNode[]): number;
|
|
49
|
+
prepend(nodes: React.ReactNode | React.ReactNode[]): number;
|
|
50
|
+
insert(index: number, nodes: React.ReactNode | React.ReactNode[]): number;
|
|
51
|
+
remove(indexOrPredicate: number | ((i: number) => boolean)): number;
|
|
52
|
+
replace(index: number, node: React.ReactNode): void;
|
|
53
|
+
setItems(nodes: React.ReactNode[]): number;
|
|
54
|
+
onIndexChange(cb: (i: number, meta: {
|
|
55
|
+
mode: IndexMode;
|
|
56
|
+
}) => void): () => void;
|
|
57
|
+
openFullscreenAt: (args: OpenFullscreenAtArgs) => void;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
type FsCounterArgs = {
|
|
61
|
+
index: number;
|
|
62
|
+
count: number;
|
|
63
|
+
};
|
|
64
|
+
type FsCaptionPlacement = "top" | "right" | "bottom" | "left";
|
|
65
|
+
type FsIntroRequest = null | {
|
|
66
|
+
originalImage: HTMLImageElement | null;
|
|
67
|
+
index: number;
|
|
68
|
+
method: FullscreenOpenMethod;
|
|
69
|
+
closestSelector?: string;
|
|
70
|
+
};
|
|
71
|
+
type FSImageRender = (args: {
|
|
72
|
+
item: Extract<MediaItem, {
|
|
73
|
+
kind: "image";
|
|
74
|
+
}>;
|
|
75
|
+
index: number;
|
|
76
|
+
isZoomed: boolean;
|
|
77
|
+
className: string;
|
|
78
|
+
baseStyle: React$1.CSSProperties;
|
|
79
|
+
}) => React$1.ReactNode;
|
|
80
|
+
type FullscreenArrows = {
|
|
81
|
+
enabled?: boolean;
|
|
82
|
+
arrow?: ElementStyle;
|
|
83
|
+
prev?: ElementStyle;
|
|
84
|
+
next?: ElementStyle;
|
|
85
|
+
render?: (args: {
|
|
86
|
+
dir: "prev" | "next";
|
|
87
|
+
}) => React$1.ReactNode;
|
|
88
|
+
renderPrev?: () => React$1.ReactNode;
|
|
89
|
+
renderNext?: () => React$1.ReactNode;
|
|
90
|
+
};
|
|
91
|
+
type FullscreenClose = {
|
|
92
|
+
enabled?: boolean;
|
|
93
|
+
style?: React$1.CSSProperties;
|
|
94
|
+
className?: string;
|
|
95
|
+
render?: () => React$1.ReactNode;
|
|
96
|
+
};
|
|
97
|
+
type FullscreenCounter = {
|
|
98
|
+
enabled?: boolean;
|
|
99
|
+
style?: React$1.CSSProperties;
|
|
100
|
+
className?: string;
|
|
101
|
+
render?: (args: FsCounterArgs) => React$1.ReactNode;
|
|
102
|
+
};
|
|
103
|
+
type FullscreenControlsOptions = {
|
|
104
|
+
close?: FullscreenClose;
|
|
105
|
+
arrows?: FullscreenArrows;
|
|
106
|
+
counter?: FullscreenCounter;
|
|
107
|
+
};
|
|
108
|
+
type FsCaptionRenderArgs = {
|
|
109
|
+
item: MediaItem;
|
|
110
|
+
index: number;
|
|
111
|
+
isZoomed: boolean;
|
|
112
|
+
};
|
|
113
|
+
type FullscreenCaptionOptions = {
|
|
114
|
+
className?: string;
|
|
115
|
+
style?: React$1.CSSProperties;
|
|
116
|
+
width?: ResponsiveLength;
|
|
117
|
+
height?: ResponsiveLength;
|
|
118
|
+
placement?: ResponsiveCaptionPlacement;
|
|
119
|
+
breakpoint?: number;
|
|
120
|
+
render?: (args: FsCaptionRenderArgs) => React$1.ReactNode;
|
|
121
|
+
layout?: "overlay" | "slide";
|
|
122
|
+
overlayCrossfadeTarget?: "content" | "overlay";
|
|
123
|
+
zoomFade?: boolean;
|
|
124
|
+
zoomFadeDurationMs?: number;
|
|
125
|
+
zoomFadeEasing?: string;
|
|
126
|
+
zoomInTransform?: string;
|
|
127
|
+
zoomOutTransform?: string;
|
|
128
|
+
};
|
|
129
|
+
type FullscreenEffectsOptions = {
|
|
130
|
+
introDuration?: number;
|
|
131
|
+
introEasing?: string;
|
|
132
|
+
introFade?: boolean;
|
|
133
|
+
introStickyNavSelector?: string;
|
|
134
|
+
controlsFade?: boolean;
|
|
135
|
+
dragFade?: boolean;
|
|
136
|
+
slideFadeDuration?: number;
|
|
137
|
+
slideFadeEasing?: string;
|
|
138
|
+
};
|
|
139
|
+
type FullscreenSliderOptions = {
|
|
140
|
+
duration?: number;
|
|
141
|
+
friction?: number;
|
|
142
|
+
direction?: "ltr" | "rtl";
|
|
143
|
+
};
|
|
144
|
+
type FullscreenZoomPanOptions = ZoomPanOptions;
|
|
145
|
+
type FullscreenVideoOptions = {
|
|
146
|
+
source?: PlyrSourceBuilder;
|
|
147
|
+
options?: PlyrOptionsBuilder;
|
|
148
|
+
style?: React$1.CSSProperties;
|
|
149
|
+
className?: string;
|
|
150
|
+
};
|
|
151
|
+
type FullscreenLazyLoadKind = "image" | "video";
|
|
152
|
+
type FullscreenLazyLoadArgs = {
|
|
153
|
+
kind: FullscreenLazyLoadKind;
|
|
154
|
+
isClone?: boolean;
|
|
155
|
+
};
|
|
156
|
+
type FullscreenLazyLoadConfig = {
|
|
157
|
+
enabled?: boolean;
|
|
158
|
+
spinner?: boolean | React$1.ReactNode | ((args: FullscreenLazyLoadArgs) => React$1.ReactNode);
|
|
159
|
+
spinnerClassName?: string;
|
|
160
|
+
spinnerStyle?: React$1.CSSProperties;
|
|
161
|
+
};
|
|
162
|
+
type FullscreenLazyLoadOptions = {
|
|
163
|
+
images?: FullscreenLazyLoadConfig;
|
|
164
|
+
videos?: FullscreenLazyLoadConfig;
|
|
165
|
+
};
|
|
166
|
+
type FullscreenOptions = {
|
|
167
|
+
enabled?: boolean;
|
|
168
|
+
items?: MediaItem[] | string[];
|
|
169
|
+
renderImage?: FSImageRender;
|
|
170
|
+
video?: FullscreenVideoOptions;
|
|
171
|
+
controls?: FullscreenControlsOptions;
|
|
172
|
+
caption?: FullscreenCaptionOptions;
|
|
173
|
+
slider?: FullscreenSliderOptions;
|
|
174
|
+
zoom?: FullscreenZoomPanOptions;
|
|
175
|
+
effects?: FullscreenEffectsOptions;
|
|
176
|
+
lazyLoad?: FullscreenLazyLoadOptions;
|
|
177
|
+
};
|
|
178
|
+
|
|
179
|
+
declare const BREAKPOINT_MAP: Record<string, number>;
|
|
180
|
+
type BreakpointMap = Record<string, number>;
|
|
181
|
+
type ResponsiveNumber = number | Record<string, number>;
|
|
182
|
+
type ResponsiveLengthValue = number | string;
|
|
183
|
+
type ResponsiveLength = ResponsiveLengthValue | Record<string, ResponsiveLengthValue>;
|
|
184
|
+
type ResponsiveCaptionPlacement = FsCaptionPlacement | Array<FsCaptionPlacement> | Record<string, FsCaptionPlacement>;
|
|
185
|
+
|
|
186
|
+
export { BREAKPOINT_MAP as B, type ElementStyle as E, type FullscreenOptions as F, type GalleryApi as G, type IndexMode as I, type LoadingTimingOptions as L, type OpenFullscreenAtArgs as O, type ResponsiveNumber as R, type FsCaptionPlacement as a, type FsIntroRequest as b, type BreakpointMap as c, type ResponsiveLength as d, type ResponsiveCaptionPlacement as e, type FullscreenOpenRequest as f, type FullscreenClose as g, type FullscreenArrows as h, type FullscreenCounter as i, type FsCaptionRenderArgs as j, type FSImageRender as k, type FullscreenVideoOptions as l, type FullscreenLazyLoadOptions as m };
|
package/dist/slider.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.r{position:relative;left:0;display:flex;width:100%;align-items:stretch;will-change:transform;transform:translateZ(0);backface-visibility:hidden}.r[data-rmg-axis=x]{flex-direction:row}.r[data-rmg-axis=y]{flex-direction:column}.q .r{left:auto;right:0}.ue{overflow:hidden;height:auto;width:100%;position:relative}:where(.xe){display:flex;justify-content:center;position:absolute;z-index:10;background:#00000080;border-radius:9999px;cursor:auto}:where(.ye){left:50%;bottom:10px;transform:translate(-50%);flex-direction:row;padding:4px 8px}:where(.ke){top:50%;left:10px;transform:translateY(-50%);flex-direction:column;padding:8px 4px}.we{position:relative;z-index:2}.ze{pointer-events:none}.A{position:absolute;inset:0;z-index:1;opacity:1;pointer-events:none;transition:opacity var(--rmg-loading-fade-duration, .6s) ease;will-change:opacity;overflow:hidden}.Xe,._e{opacity:0}.g{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}@media(prefers-reduced-motion:reduce){.g,.A{transition:none}}.a{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}.a:hover{transform:scale(1.2)}.a.je{background-color:#50a3ff;box-shadow:0 0 8px #50a3ff99}.a.Ye{background-color:#d3d3d3}.i{-webkit-tap-highlight-color:rgba(0,0,0,.18);-webkit-appearance:none;appearance:none;background:transparent;touch-action:manipulation;display:flex;cursor:pointer;border:0;margin:0;padding:calc((var(--rmg-scrollbar-thumb-size, 1rem) - var(--rmg-scrollbar-track-size, .375rem)) / 2) 0;pointer-events:auto;--rmg-scrollbar-track: rgba(15, 23, 42, .16);--rmg-scrollbar-track-active: rgba(80, 163, 255, .28);--rmg-scrollbar-thumb: rgb(80, 163, 255);--rmg-scrollbar-thumb-shadow: 0 4px 14px rgba(80, 163, 255, .28)}.Ze{transform-origin:center}.i::-webkit-slider-runnable-track{border-radius:9999px;background:linear-gradient(90deg,var(--rmg-scrollbar-track-active) 0%,var(--rmg-scrollbar-track-active) calc(var(--rmg-scrollbar-progress, 0) * 100%),var(--rmg-scrollbar-track) calc(var(--rmg-scrollbar-progress, 0) * 100%),var(--rmg-scrollbar-track) 100%);height:var(--rmg-scrollbar-track-size, .375rem)}.i::-moz-range-track{border-radius:9999px;background:var(--rmg-scrollbar-track);height:var(--rmg-scrollbar-track-size, .375rem)}.i::-webkit-slider-thumb{-webkit-appearance:none;width:var(--rmg-scrollbar-thumb-size, 1rem);height:var(--rmg-scrollbar-thumb-size, 1rem);border-radius:50%;border:0;background:var(--rmg-scrollbar-thumb);box-shadow:var(--rmg-scrollbar-thumb-shadow);margin-top:calc((var(--rmg-scrollbar-thumb-size, 1rem) - var(--rmg-scrollbar-track-size, .375rem)) / -2)}.i::-moz-range-thumb{width:var(--rmg-scrollbar-thumb-size, 1rem);height:var(--rmg-scrollbar-thumb-size, 1rem);border-radius:50%;border:0;background:var(--rmg-scrollbar-thumb);box-shadow:var(--rmg-scrollbar-thumb-shadow)}.p{position:absolute;border-radius:50%;transform:scale(0);animation:p .6s linear;background-color:#0000004d;pointer-events:none}@keyframes p{to{transform:scale(4);opacity:0}}.B [data-rmg-idx]>*{opacity:0;transition:opacity var(--rmg-intro-duration, .6s) 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}.B.g [data-rmg-idx]>*{opacity:1}.qe{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:C 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 C{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.Ae{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}.D{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;justify-content:center}.Be{display:flex;flex-direction:column;width:100%;min-width:0;min-height:0}.Ce{display:flex;width:100%;gap:.75rem;height:var(--rmg-slider-row-height, var(--rmg-slider-initial-height, var(--rmg-slider-height, 320px)));align-items:stretch}.De{display:flex;flex-direction:column;width:100%;min-width:0;min-height:0}.Ee{position:relative;width:100%;container-type:inline-size}.Fe{position:relative;overflow-anchor:none;width:100%;height:auto;max-height:none}.E{flex:1 1 0;height:100%;min-width:0;display:flex;box-sizing:border-box}.D[data-rmg-skel-mode=peek] .E{flex:0 0 auto}.Ge{display:flex;min-width:0;min-height:0;width:100%}.He{display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;align-items:flex-start;align-content:flex-start}.Ie{min-width:0;align-self:flex-start}.f{width:100%;height:auto;position:relative;overflow:hidden;border-radius:var(--rmg-skel-radius, 12px);background:var(--rmg-skel-bg, #e5e5e5)}.f:after{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:var(--rmg-skel-shimmer-filter, none);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:F var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, linear) infinite;transform:translate(-100%);pointer-events:none}@keyframes F{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.f:after{animation:none}}.de{aspect-ratio:1 / 1}.me{aspect-ratio:1 / 1;border-radius:999px}.ce{display:flex;min-width:0}.ge{flex-direction:row;align-items:center}.pe,.fe{flex-direction:column;align-items:stretch}.he{display:flex;flex-direction:column;width:100%;min-width:0;box-sizing:border-box;align-items:flex-start;align-content:flex-start}.be{min-width:0;align-self:flex-start}.ve{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}.m{position:relative;overflow:hidden;border-radius:var(--rmg-skel-radius, 12px);--rmg-skel-shimmer-enabled: 0}.m:after{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-card-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:var(--rmg-skel-shimmer-filter, none);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:c var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, linear) infinite;transform:translate(-100%);pointer-events:none}.Z:before{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:var(--rmg-skel-shimmer-filter, none);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:c var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, linear) infinite;transform:translate(-100%);pointer-events:none}@keyframes c{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.m:after,.Z:before{animation:none}}
|
package/dist/slider.d.mts
CHANGED
|
@@ -1,11 +1,15 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
export {
|
|
8
|
-
import './
|
|
2
|
+
import { c as BreakpointMap } from './responsive-D_xhZmVI.mjs';
|
|
3
|
+
export { I as IndexMode } from './responsive-D_xhZmVI.mjs';
|
|
4
|
+
import { S as SliderOptions, a as SliderHandle } from './types-DY058l5M.mjs';
|
|
5
|
+
export { R as ResponsiveHeightRule } from './types-DY058l5M.mjs';
|
|
6
|
+
import { S as SliderIndexChannel } from './sliderSub-Bo6Y8as_.mjs';
|
|
7
|
+
export { c as createSliderIndexChannel } from './sliderSub-Bo6Y8as_.mjs';
|
|
8
|
+
import './plyrTypes-Cq4C3ul5.mjs';
|
|
9
|
+
import 'plyr';
|
|
10
|
+
import './types-Dhh8xfHo.mjs';
|
|
11
|
+
import './controls-SpWg1Kgt.mjs';
|
|
12
|
+
import './text-Cl2tR8oO.mjs';
|
|
9
13
|
|
|
10
14
|
declare const Slider: React.ForwardRefExoticComponent<SliderOptions & {
|
|
11
15
|
children?: React.ReactNode;
|
|
@@ -52,6 +56,10 @@ declare const DEFAULT_SLIDER: {
|
|
|
52
56
|
readonly root: {};
|
|
53
57
|
readonly bar: {};
|
|
54
58
|
};
|
|
59
|
+
readonly scrollbar: {
|
|
60
|
+
readonly enabled: false;
|
|
61
|
+
readonly root: {};
|
|
62
|
+
};
|
|
55
63
|
readonly ripple: {
|
|
56
64
|
readonly enabled: true;
|
|
57
65
|
readonly className: "";
|
|
@@ -66,7 +74,7 @@ declare const DEFAULT_SLIDER: {
|
|
|
66
74
|
};
|
|
67
75
|
readonly scroll: {
|
|
68
76
|
readonly enabled: false;
|
|
69
|
-
readonly speedMs:
|
|
77
|
+
readonly speedMs: 0.3;
|
|
70
78
|
readonly pauseMs: 1000;
|
|
71
79
|
readonly pauseOnHover: true;
|
|
72
80
|
};
|
package/dist/slider.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{
|
|
1
|
+
export{b as DEFAULT_SLIDER,c as Slider,c as default}from'./chunk-5HIHJGIV.mjs';import'./chunk-ZX5E327W.mjs';export{a as createSliderIndexChannel}from'./chunk-DBIFLX6Y.mjs';import'./chunk-NABNX5HB.mjs';import'./chunk-FJYYM5TH.mjs';import'./chunk-BIDZ4WZB.mjs';import'./chunk-AKY343WN.mjs';import'./chunk-JMFDRKTX.mjs';import'./chunk-J4E4PKE5.mjs';import'./chunk-ECQ74X24.mjs';import'./chunk-LVYED5ZM.mjs';import'./chunk-6TPHLAUP.mjs';
|
|
@@ -1,14 +1,24 @@
|
|
|
1
|
-
import { I as IndexMode } from './
|
|
1
|
+
import { I as IndexMode } from './responsive-D_xhZmVI.mjs';
|
|
2
2
|
|
|
3
3
|
type IndexListener = () => void;
|
|
4
|
+
type IndexEventMeta = {
|
|
5
|
+
source?: "thumbnail" | "external";
|
|
6
|
+
transition?: "scroll" | "crossfade";
|
|
7
|
+
crossfade?: {
|
|
8
|
+
durationMs?: number;
|
|
9
|
+
easing?: string;
|
|
10
|
+
};
|
|
11
|
+
};
|
|
4
12
|
type IndexEvent = {
|
|
5
13
|
type: "set";
|
|
6
14
|
index: number;
|
|
7
15
|
mode: IndexMode;
|
|
16
|
+
meta?: IndexEventMeta;
|
|
8
17
|
} | {
|
|
9
18
|
type: "bump";
|
|
10
19
|
delta: number;
|
|
11
20
|
mode: IndexMode;
|
|
21
|
+
meta?: IndexEventMeta;
|
|
12
22
|
};
|
|
13
23
|
type EventListener = (ev: IndexEvent) => void;
|
|
14
24
|
type BasePointerDownListener = () => void;
|
|
@@ -20,9 +30,11 @@ declare function createSliderIndexChannel(initialIndex?: number, initialMode?: I
|
|
|
20
30
|
};
|
|
21
31
|
set(next: number, m?: IndexMode, opts?: {
|
|
22
32
|
silent?: boolean;
|
|
33
|
+
meta?: IndexEventMeta;
|
|
23
34
|
}): void;
|
|
24
35
|
bump(delta: number, m?: IndexMode, opts?: {
|
|
25
36
|
silent?: boolean;
|
|
37
|
+
meta?: IndexEventMeta;
|
|
26
38
|
}): void;
|
|
27
39
|
subscribe(fn: IndexListener): () => void;
|
|
28
40
|
onEvent(fn: EventListener): () => void;
|
package/dist/thumbnails.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.pi{position:relative}.fi{position:relative;z-index:2}.hi{pointer-events:none}.R{position:absolute;inset:0;z-index:1;opacity:1;pointer-events:none;transition:opacity var(--rmg-loading-fade-duration, .6s) ease;will-change:opacity;overflow:hidden}.bi{opacity:0}.vi{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:center}.ui{display:flex;width:100%;height:100%}.w{border-radius:6px;overflow:hidden;position:relative;background:var(--rmg-skel-bg, #e5e5e5)}.w:after{content:"";position:absolute;inset:0;opacity:calc(var(--rmg-skel-shimmer-enabled, 1) * var(--rmg-skel-shimmer-opacity, 1));filter:var(--rmg-skel-shimmer-filter, none);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:S var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, linear) infinite;transform:translate(-100%);pointer-events:none}@keyframes S{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.w:after{animation:none}.R{transition:none}}.z{position:relative;overflow:hidden;box-sizing:border-box}.z: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}.z[data-active=true]:after{opacity:1}.xi{opacity:0}.X{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}@media(prefers-reduced-motion:reduce){.X{transition:none}}.T [data-rmg-thumb-index]>*{opacity:0;transition:opacity 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}.T.X [data-rmg-thumb-index]>*{opacity:1}._{position:absolute;border-radius:50%;transform:scale(0);animation:_ .6s linear;background-color:#0000004d;pointer-events:none}@keyframes _{to{transform:scale(4);opacity:0}}
|
package/dist/thumbnails.d.mts
CHANGED
|
@@ -1,30 +1,42 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { S as SliderIndexChannel } from './sliderSub-
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
export { R as ResponsivePosition,
|
|
6
|
-
import
|
|
7
|
-
import '
|
|
2
|
+
import { S as SliderIndexChannel } from './sliderSub-Bo6Y8as_.mjs';
|
|
3
|
+
import { c as BreakpointMap, I as IndexMode } from './responsive-D_xhZmVI.mjs';
|
|
4
|
+
import { f as ThumbnailsOptions, h as ThumbnailSelectMeta } from './types-CHUayqcj.mjs';
|
|
5
|
+
export { R as ResponsivePosition, j as ThumbnailContainerLayout, e as ThumbnailIntroOptions, i as ThumbnailLayout, a as ThumbnailLoadingElements, c as ThumbnailLoadingOptions, b as ThumbnailLoadingRenderArgs, T as ThumbnailPosition, d as ThumbnailSkeletonMode, p as ThumbnailsControls, l as ThumbnailsElements, k as ThumbnailsLayout, n as ThumbnailsMotion, o as ThumbnailsRipple, m as ThumbnailsScroll, q as ThumbnailsTransitions } from './types-CHUayqcj.mjs';
|
|
6
|
+
import './plyrTypes-Cq4C3ul5.mjs';
|
|
7
|
+
import 'plyr';
|
|
8
|
+
import './types-Dhh8xfHo.mjs';
|
|
9
|
+
import './controls-SpWg1Kgt.mjs';
|
|
8
10
|
|
|
9
11
|
type Props = {
|
|
10
12
|
options?: ThumbnailsOptions;
|
|
11
13
|
children?: React.ReactNode;
|
|
12
14
|
indexChannel?: SliderIndexChannel;
|
|
13
15
|
breakpoints?: BreakpointMap;
|
|
14
|
-
onThumbnailClick?: (index: number) => void;
|
|
16
|
+
onThumbnailClick?: (index: number, meta?: ThumbnailSelectMeta) => void;
|
|
15
17
|
onReadyChange?: (ready: boolean) => void;
|
|
16
18
|
direction?: "ltr" | "rtl";
|
|
17
19
|
};
|
|
18
20
|
declare const ThumbnailSlider: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
|
|
19
21
|
|
|
22
|
+
type SliderIndexEventMeta = {
|
|
23
|
+
source?: "thumbnail" | "external";
|
|
24
|
+
transition?: "scroll" | "crossfade";
|
|
25
|
+
crossfade?: {
|
|
26
|
+
durationMs?: number;
|
|
27
|
+
easing?: string;
|
|
28
|
+
};
|
|
29
|
+
};
|
|
20
30
|
type SliderIndexEvent = {
|
|
21
31
|
type: "set";
|
|
22
32
|
index: number;
|
|
23
33
|
mode: IndexMode;
|
|
34
|
+
meta?: SliderIndexEventMeta;
|
|
24
35
|
} | {
|
|
25
36
|
type: "bump";
|
|
26
37
|
delta: number;
|
|
27
38
|
mode: IndexMode;
|
|
39
|
+
meta?: SliderIndexEventMeta;
|
|
28
40
|
};
|
|
29
41
|
type SliderIndexChannelLike = {
|
|
30
42
|
get: () => {
|
|
@@ -33,9 +45,11 @@ type SliderIndexChannelLike = {
|
|
|
33
45
|
};
|
|
34
46
|
set: (index: number, mode?: IndexMode, opts?: {
|
|
35
47
|
silent?: boolean;
|
|
48
|
+
meta?: SliderIndexEventMeta;
|
|
36
49
|
}) => void;
|
|
37
50
|
bump: (delta: number, mode?: IndexMode, opts?: {
|
|
38
51
|
silent?: boolean;
|
|
52
|
+
meta?: SliderIndexEventMeta;
|
|
39
53
|
}) => void;
|
|
40
54
|
onEvent?: (fn: (event: SliderIndexEvent) => void) => () => void;
|
|
41
55
|
subscribe?: (fn: () => void) => () => void;
|
|
@@ -50,7 +64,7 @@ type CreateThumbnailSyncBridgeArgs = {
|
|
|
50
64
|
type ThumbnailSyncBridge = {
|
|
51
65
|
start: () => () => void;
|
|
52
66
|
stop: () => void;
|
|
53
|
-
publishThumbnailClick: (index: number, mode?: IndexMode) => void;
|
|
67
|
+
publishThumbnailClick: (index: number, mode?: IndexMode, meta?: SliderIndexEventMeta) => void;
|
|
54
68
|
};
|
|
55
69
|
declare function createThumbnailSyncBridge(args: CreateThumbnailSyncBridgeArgs): ThumbnailSyncBridge;
|
|
56
70
|
|
package/dist/thumbnails.mjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export{a as DEFAULT_THUMBNAILS,c as ThumbnailSlider,b as createThumbnailSyncBridge,c as default}from'./chunk-
|
|
1
|
+
export{a as DEFAULT_THUMBNAILS,c as ThumbnailSlider,b as createThumbnailSyncBridge,c as default}from'./chunk-KSOQWCCL.mjs';import'./chunk-P2GQPFSL.mjs';import'./chunk-DBIFLX6Y.mjs';import'./chunk-NABNX5HB.mjs';import'./chunk-FJYYM5TH.mjs';import'./chunk-ECQ74X24.mjs';import'./chunk-LVYED5ZM.mjs';import'./chunk-6TPHLAUP.mjs';
|
|
@@ -1,14 +1,26 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { R as ResponsiveNumber,
|
|
3
|
-
import {
|
|
2
|
+
import { E as ElementStyle, R as ResponsiveNumber, L as LoadingTimingOptions, c as BreakpointMap } from './responsive-D_xhZmVI.mjs';
|
|
3
|
+
import { A as ArrowRenderArgs } from './controls-SpWg1Kgt.mjs';
|
|
4
4
|
|
|
5
5
|
type ThumbnailPosition = "top" | "right" | "bottom" | "left";
|
|
6
6
|
type ResponsivePosition = ThumbnailPosition | Array<ThumbnailPosition> | Record<string, ThumbnailPosition>;
|
|
7
|
+
type ThumbnailLoadingElements = {
|
|
8
|
+
container?: ElementStyle;
|
|
9
|
+
row?: ElementStyle;
|
|
10
|
+
thumbnail?: ElementStyle;
|
|
11
|
+
};
|
|
12
|
+
type ThumbnailSkeletonMode = "fit" | "peek";
|
|
13
|
+
type ThumbnailLoadingRenderArgs = {
|
|
14
|
+
count: number;
|
|
15
|
+
};
|
|
7
16
|
type ThumbnailLoadingOptions = {
|
|
8
17
|
enabled?: boolean;
|
|
9
18
|
force?: boolean;
|
|
10
19
|
skeletonCount?: ResponsiveNumber;
|
|
11
|
-
|
|
20
|
+
mode?: ThumbnailSkeletonMode;
|
|
21
|
+
renderLoading?: (args: ThumbnailLoadingRenderArgs) => React.ReactNode;
|
|
22
|
+
elements?: ThumbnailLoadingElements;
|
|
23
|
+
timing?: LoadingTimingOptions;
|
|
12
24
|
};
|
|
13
25
|
type ThumbnailIntroOptions = {
|
|
14
26
|
renderIntro?: (args: {
|
|
@@ -16,7 +28,6 @@ type ThumbnailIntroOptions = {
|
|
|
16
28
|
containerProps: React.HTMLAttributes<HTMLDivElement>;
|
|
17
29
|
}, inner: React.ReactNode) => React.ReactNode;
|
|
18
30
|
staggerMs?: number;
|
|
19
|
-
transform?: string;
|
|
20
31
|
durationMs?: number;
|
|
21
32
|
easing?: string;
|
|
22
33
|
};
|
|
@@ -67,9 +78,19 @@ type ThumbnailsControls = {
|
|
|
67
78
|
renderNext?: (args: ArrowRenderArgs) => React.ReactNode;
|
|
68
79
|
ripple?: ThumbnailsRipple;
|
|
69
80
|
};
|
|
81
|
+
type ThumbnailCrossfadeOptions = {
|
|
82
|
+
enabled?: boolean;
|
|
83
|
+
durationMs?: number;
|
|
84
|
+
easing?: string;
|
|
85
|
+
};
|
|
86
|
+
type ThumbnailSelectMeta = {
|
|
87
|
+
transition: "scroll" | "crossfade";
|
|
88
|
+
crossfade?: ThumbnailCrossfadeOptions;
|
|
89
|
+
};
|
|
70
90
|
type ThumbnailsTransitions = {
|
|
71
91
|
loading?: ThumbnailLoadingOptions;
|
|
72
92
|
intro?: ThumbnailIntroOptions;
|
|
93
|
+
crossfade?: ThumbnailCrossfadeOptions;
|
|
73
94
|
};
|
|
74
95
|
type ThumbnailsOptions = {
|
|
75
96
|
children?: React.ReactNode;
|
|
@@ -82,4 +103,4 @@ type ThumbnailsOptions = {
|
|
|
82
103
|
breakpointMap?: BreakpointMap;
|
|
83
104
|
};
|
|
84
105
|
|
|
85
|
-
export type { ResponsivePosition as R, ThumbnailPosition as T,
|
|
106
|
+
export type { ResponsivePosition as R, ThumbnailPosition as T, ThumbnailLoadingElements as a, ThumbnailLoadingRenderArgs as b, ThumbnailLoadingOptions as c, ThumbnailSkeletonMode as d, ThumbnailIntroOptions as e, ThumbnailsOptions as f, ThumbnailCrossfadeOptions as g, ThumbnailSelectMeta as h, ThumbnailLayout as i, ThumbnailContainerLayout as j, ThumbnailsLayout as k, ThumbnailsElements as l, ThumbnailsScroll as m, ThumbnailsMotion as n, ThumbnailsRipple as o, ThumbnailsControls as p, ThumbnailsTransitions as q };
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { R as ResponsiveNumber } from './responsive-
|
|
2
|
-
import {
|
|
3
|
-
import { I as IndexMode } from './types-tb9Qf2Mj.mjs';
|
|
1
|
+
import { I as IndexMode, R as ResponsiveNumber, E as ElementStyle, L as LoadingTimingOptions } from './responsive-D_xhZmVI.mjs';
|
|
2
|
+
import { A as ArrowRenderArgs, D as DotsRenderArgs, P as ProgressRenderArgs, S as ScrollbarRenderArgs } from './controls-SpWg1Kgt.mjs';
|
|
4
3
|
import * as React$1 from 'react';
|
|
5
4
|
import { RefObject } from 'react';
|
|
6
|
-
import {
|
|
5
|
+
import { R as ResponsiveTextLineCount, a as ResponsiveTextLineWidth } from './text-Cl2tR8oO.mjs';
|
|
6
|
+
import { S as SliderIndexChannel } from './sliderSub-Bo6Y8as_.mjs';
|
|
7
7
|
|
|
8
8
|
type SkeletonLength = number | string;
|
|
9
9
|
type SkeletonShimmer = {
|
|
@@ -24,12 +24,19 @@ type SkeletonBaseStyle = {
|
|
|
24
24
|
maxHeight?: SkeletonLength;
|
|
25
25
|
backgroundColor?: string;
|
|
26
26
|
borderRadius?: SkeletonLength;
|
|
27
|
+
overflow?: React$1.CSSProperties["overflow"];
|
|
27
28
|
marginTop?: SkeletonLength;
|
|
28
29
|
marginRight?: SkeletonLength;
|
|
29
30
|
marginBottom?: SkeletonLength;
|
|
30
31
|
marginLeft?: SkeletonLength;
|
|
31
32
|
alignSelf?: React$1.CSSProperties["alignSelf"];
|
|
32
33
|
aspectRatio?: SkeletonLength;
|
|
34
|
+
scale?: number;
|
|
35
|
+
};
|
|
36
|
+
type SkeletonBaseStyleResponsive = SkeletonBaseStyle | Record<string, SkeletonBaseStyle>;
|
|
37
|
+
type SliderSkeletonWrapStyle = SkeletonBaseStyle & {
|
|
38
|
+
border?: React$1.CSSProperties["border"];
|
|
39
|
+
boxShadow?: React$1.CSSProperties["boxShadow"];
|
|
33
40
|
};
|
|
34
41
|
type SkeletonContainerStyle = {
|
|
35
42
|
gap?: SkeletonLength;
|
|
@@ -39,14 +46,20 @@ type SkeletonContainerStyle = {
|
|
|
39
46
|
wrap?: boolean;
|
|
40
47
|
width?: SkeletonLength;
|
|
41
48
|
maxWidth?: SkeletonLength;
|
|
49
|
+
overflow?: React$1.CSSProperties["overflow"];
|
|
42
50
|
};
|
|
43
51
|
type SkeletonContainerStyleResponsive = SkeletonContainerStyle | Record<string, SkeletonContainerStyle>;
|
|
52
|
+
type SliderSkeletonSlot = {
|
|
53
|
+
item?: SkeletonNode;
|
|
54
|
+
itemWrapStyle?: SliderSkeletonWrapStyle;
|
|
55
|
+
};
|
|
44
56
|
type SliderSkeletonSliderNode = {
|
|
45
57
|
kind: "slider";
|
|
46
58
|
style?: SkeletonContainerStyleResponsive;
|
|
47
59
|
count?: number;
|
|
48
60
|
item: SkeletonNode;
|
|
49
|
-
itemWrapStyle?:
|
|
61
|
+
itemWrapStyle?: SliderSkeletonWrapStyle;
|
|
62
|
+
slots?: SliderSkeletonSlot[];
|
|
50
63
|
direction?: "row" | "col";
|
|
51
64
|
children?: SkeletonNode[];
|
|
52
65
|
};
|
|
@@ -57,7 +70,7 @@ type SkeletonNode = {
|
|
|
57
70
|
children: SkeletonNode[];
|
|
58
71
|
} | {
|
|
59
72
|
kind: "rect" | "square" | "circle";
|
|
60
|
-
style?:
|
|
73
|
+
style?: SkeletonBaseStyleResponsive;
|
|
61
74
|
shimmer?: SkeletonShimmer;
|
|
62
75
|
} | {
|
|
63
76
|
kind: "media";
|
|
@@ -66,19 +79,21 @@ type SkeletonNode = {
|
|
|
66
79
|
style?: SkeletonContainerStyleResponsive;
|
|
67
80
|
tile?: {
|
|
68
81
|
shape?: "rect" | "square" | "circle";
|
|
69
|
-
style?:
|
|
82
|
+
style?: SkeletonBaseStyleResponsive;
|
|
70
83
|
shimmer?: SkeletonShimmer;
|
|
71
84
|
};
|
|
72
85
|
} | {
|
|
73
86
|
kind: "text";
|
|
74
87
|
fontSize: number;
|
|
75
88
|
lineHeight: number;
|
|
76
|
-
lines?:
|
|
77
|
-
|
|
89
|
+
lines?: ResponsiveTextLineCount;
|
|
90
|
+
lineWidth?: ResponsiveTextLineWidth;
|
|
91
|
+
style?: SkeletonBaseStyleResponsive;
|
|
78
92
|
shimmer?: SkeletonShimmer;
|
|
79
93
|
};
|
|
80
94
|
type SliderSkeletonSpec = {
|
|
81
95
|
mode?: "fit" | "peek";
|
|
96
|
+
centering?: "first";
|
|
82
97
|
className?: string;
|
|
83
98
|
style?: React$1.CSSProperties;
|
|
84
99
|
layout?: SliderSkeletonNode;
|
|
@@ -132,6 +147,11 @@ type SliderProgress = {
|
|
|
132
147
|
bar?: ElementStyle;
|
|
133
148
|
render?: (args: ProgressRenderArgs) => React.ReactNode;
|
|
134
149
|
};
|
|
150
|
+
type SliderScrollbar = {
|
|
151
|
+
enabled?: boolean;
|
|
152
|
+
root?: ElementStyle;
|
|
153
|
+
render?: (args: ScrollbarRenderArgs) => React.ReactNode;
|
|
154
|
+
};
|
|
135
155
|
type SliderRipple = {
|
|
136
156
|
enabled?: boolean;
|
|
137
157
|
className?: string;
|
|
@@ -140,6 +160,7 @@ type SliderControls = {
|
|
|
140
160
|
arrows?: SliderArrows;
|
|
141
161
|
dots?: SliderDots;
|
|
142
162
|
progress?: SliderProgress;
|
|
163
|
+
scrollbar?: SliderScrollbar;
|
|
143
164
|
ripple?: SliderRipple;
|
|
144
165
|
};
|
|
145
166
|
type SliderAutoPlay = {
|
|
@@ -166,6 +187,7 @@ type SliderLoadingOptions = {
|
|
|
166
187
|
count: number;
|
|
167
188
|
}) => React.ReactNode;
|
|
168
189
|
skeleton?: SliderSkeletonSpec;
|
|
190
|
+
timing?: LoadingTimingOptions;
|
|
169
191
|
};
|
|
170
192
|
type SliderIntroOptions = {
|
|
171
193
|
renderIntro?: (args: {
|
|
@@ -173,7 +195,6 @@ type SliderIntroOptions = {
|
|
|
173
195
|
containerProps: React.HTMLAttributes<HTMLDivElement>;
|
|
174
196
|
}, content: React.ReactNode) => React.ReactNode;
|
|
175
197
|
staggerMs?: number;
|
|
176
|
-
transform?: number | string;
|
|
177
198
|
durationMs?: number;
|
|
178
199
|
easing?: string;
|
|
179
200
|
};
|
|
@@ -193,11 +214,19 @@ type SliderScale = {
|
|
|
193
214
|
};
|
|
194
215
|
type SliderFade = {
|
|
195
216
|
enabled?: boolean;
|
|
217
|
+
minOpacity?: number;
|
|
218
|
+
};
|
|
219
|
+
type CrossFade = {
|
|
220
|
+
controls?: boolean;
|
|
221
|
+
drag?: boolean;
|
|
222
|
+
durationMs?: number;
|
|
223
|
+
easing?: string;
|
|
196
224
|
};
|
|
197
225
|
type SliderEffects = {
|
|
198
226
|
parallax?: SliderParallax;
|
|
199
227
|
scale?: SliderScale;
|
|
200
228
|
fade?: SliderFade;
|
|
229
|
+
crossfade?: CrossFade;
|
|
201
230
|
};
|
|
202
231
|
type SliderMotion = {
|
|
203
232
|
selectDuration?: number;
|
|
@@ -227,6 +256,11 @@ type SliderOptions = {
|
|
|
227
256
|
effects?: SliderEffects;
|
|
228
257
|
indexChannel?: SliderIndexChannel;
|
|
229
258
|
};
|
|
259
|
+
type SliderUiSelectOptions = {
|
|
260
|
+
crossfade?: boolean;
|
|
261
|
+
durationMs?: number;
|
|
262
|
+
easing?: string;
|
|
263
|
+
};
|
|
230
264
|
interface SliderHandle {
|
|
231
265
|
centerSlider: () => void;
|
|
232
266
|
getIndex: () => number;
|
|
@@ -261,6 +295,7 @@ interface SliderHandle {
|
|
|
261
295
|
sliderVelocity: RefObject<number>;
|
|
262
296
|
isWrapping: RefObject<boolean>;
|
|
263
297
|
};
|
|
298
|
+
setIndexFromUi: (i: number, opts?: SliderUiSelectOptions) => void;
|
|
264
299
|
}
|
|
265
300
|
|
|
266
301
|
export type { ResponsiveHeightRule as R, SliderOptions as S, SliderHandle as a };
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
type ZoomPanOptions = {
|
|
4
|
+
clickZoomLevel?: number;
|
|
5
|
+
maxZoomLevel?: number;
|
|
6
|
+
panDuration?: number;
|
|
7
|
+
panFriction?: number;
|
|
8
|
+
};
|
|
9
|
+
type ZoomPanImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, "children" | "className" | "style"> & {
|
|
10
|
+
className?: string;
|
|
11
|
+
style?: React.CSSProperties;
|
|
12
|
+
imageClassName?: string;
|
|
13
|
+
imageStyle?: React.CSSProperties;
|
|
14
|
+
zoom?: ZoomPanOptions;
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export type { ZoomPanImageProps as Z, ZoomPanOptions as a };
|