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.
Files changed (95) hide show
  1. package/README.md +297 -32
  2. package/dist/chunk-5HIHJGIV.mjs +45 -0
  3. package/dist/chunk-6TPHLAUP.mjs +1 -0
  4. package/dist/chunk-AKY343WN.mjs +1 -0
  5. package/dist/chunk-BIDZ4WZB.mjs +2 -0
  6. package/dist/chunk-DBIFLX6Y.mjs +6 -0
  7. package/dist/chunk-ECQ74X24.mjs +1 -0
  8. package/dist/chunk-FJYYM5TH.mjs +1 -0
  9. package/dist/chunk-GSEIEFRW.mjs +1 -0
  10. package/dist/chunk-GT6IL37J.mjs +1 -0
  11. package/dist/chunk-J4E4PKE5.mjs +1 -0
  12. package/dist/chunk-JD3VAF3N.mjs +4 -0
  13. package/dist/chunk-JMFDRKTX.mjs +2 -0
  14. package/dist/chunk-K6PQU6HF.mjs +1 -0
  15. package/dist/chunk-KSOQWCCL.mjs +6 -0
  16. package/dist/chunk-NABNX5HB.mjs +1 -0
  17. package/dist/chunk-NEJ27O2B.mjs +2 -0
  18. package/dist/chunk-Q2PY6ZMU.mjs +2 -0
  19. package/dist/chunk-TKPLWDPW.mjs +7 -0
  20. package/dist/chunk-UAEPMZQY.mjs +1 -0
  21. package/dist/chunk-UV2SUN5V.mjs +1 -0
  22. package/dist/chunk-VXSRNAH4.mjs +1 -0
  23. package/dist/chunk-WLWVKQPL.mjs +4 -0
  24. package/dist/chunk-WZWMG4ZT.mjs +1 -0
  25. package/dist/chunk-XOS5AXSR.mjs +4 -0
  26. package/dist/chunk-ZX5E327W.mjs +1 -0
  27. package/dist/{elements-Bd1vm4Uk.d.mts → controls-SpWg1Kgt.d.mts} +10 -3
  28. package/dist/core.d.mts +20 -9
  29. package/dist/core.mjs +1 -1
  30. package/dist/entries.css +1 -1
  31. package/dist/entries.d.mts +41 -11
  32. package/dist/entries.mjs +1 -1
  33. package/dist/fullscreen.css +1 -1
  34. package/dist/fullscreen.d.mts +36 -135
  35. package/dist/fullscreen.mjs +1 -1
  36. package/dist/fullscreenThumbnails.css +1 -1
  37. package/dist/fullscreenThumbnails.d.mts +9 -6
  38. package/dist/fullscreenThumbnails.mjs +1 -1
  39. package/dist/grid.css +1 -1
  40. package/dist/grid.d.mts +18 -115
  41. package/dist/grid.mjs +1 -1
  42. package/dist/{index-C0AqfaC3.d.mts → index-CwwxTQKa.d.mts} +3 -3
  43. package/dist/index.css +1 -1
  44. package/dist/index.d.mts +19 -15
  45. package/dist/index.mjs +1 -1
  46. package/dist/layout-CR6f2aPH.d.mts +95 -0
  47. package/dist/masonry.css +1 -1
  48. package/dist/masonry.d.mts +12 -65
  49. package/dist/masonry.mjs +1 -1
  50. package/dist/metafile-esm.json +1 -1
  51. package/dist/{media-moIXOhT1.d.mts → plyrTypes-Cq4C3ul5.d.mts} +8 -1
  52. package/dist/responsive-D_xhZmVI.d.mts +186 -0
  53. package/dist/slider.css +1 -1
  54. package/dist/slider.d.mts +16 -8
  55. package/dist/slider.mjs +1 -1
  56. package/dist/{sliderSub-DDPjywVp.d.mts → sliderSub-Bo6Y8as_.d.mts} +13 -1
  57. package/dist/text-Cl2tR8oO.d.mts +4 -0
  58. package/dist/thumbnails.css +1 -1
  59. package/dist/thumbnails.d.mts +22 -8
  60. package/dist/thumbnails.mjs +1 -1
  61. package/dist/{types-Bi2iBbyG.d.mts → types-CHUayqcj.d.mts} +26 -5
  62. package/dist/{types-9fvdyhuG.d.mts → types-DY058l5M.d.mts} +45 -10
  63. package/dist/types-Dhh8xfHo.d.mts +18 -0
  64. package/dist/{types-CQ6I3EfZ.d.mts → types-ROPjU8Nl.d.mts} +24 -12
  65. package/dist/types-VULXzSa2.d.mts +68 -0
  66. package/dist/types-XEr8LRal.d.mts +65 -0
  67. package/dist/{types-ChjyCquV.d.mts → types-_1D0QtfD.d.mts} +24 -8
  68. package/dist/video.css +1 -1
  69. package/dist/video.d.mts +2 -2
  70. package/dist/video.mjs +1 -1
  71. package/dist/zoomPan.d.mts +16 -0
  72. package/dist/zoomPan.mjs +1 -0
  73. package/package.json +11 -22
  74. package/dist/chunk-2AHLR3V4.mjs +0 -1
  75. package/dist/chunk-CAYO7NIA.mjs +0 -2
  76. package/dist/chunk-CROFW72U.mjs +0 -2
  77. package/dist/chunk-ESF6XBYF.mjs +0 -1
  78. package/dist/chunk-EV6ZK4QI.mjs +0 -1
  79. package/dist/chunk-H4BEIJAD.mjs +0 -5
  80. package/dist/chunk-HHAEEL7K.mjs +0 -10
  81. package/dist/chunk-KN72Q6DM.mjs +0 -5
  82. package/dist/chunk-KZUAS63N.mjs +0 -1
  83. package/dist/chunk-NWU2GBRJ.mjs +0 -1
  84. package/dist/chunk-O6MJXVAN.mjs +0 -4
  85. package/dist/chunk-PGF2LSVK.mjs +0 -2
  86. package/dist/chunk-Q5LUIIWE.mjs +0 -1
  87. package/dist/chunk-SALMTFMK.mjs +0 -1
  88. package/dist/chunk-TZGAHWM7.mjs +0 -1
  89. package/dist/chunk-UOXJOJEY.mjs +0 -59
  90. package/dist/chunk-X4HEGEZV.mjs +0 -1
  91. package/dist/chunk-YRQVG3MM.mjs +0 -1
  92. package/dist/lazy-dGoYpcRa.d.mts +0 -14
  93. package/dist/plyrTypes-CmP9NWvX.d.mts +0 -8
  94. package/dist/responsive-CvE5dTnP.d.mts +0 -5
  95. 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
- export { type MediaItem as M, toMediaItems as t };
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
- .n{position:relative;left:0;display:flex;width:100%;align-items:stretch;will-change:transform;transform:translateZ(0);backface-visibility:hidden}.n[data-rmg-axis=x]{flex-direction:row}.n[data-rmg-axis=y]{flex-direction:column}.I .n{left:auto;right:0}.Ii{overflow:hidden;height:auto;width:100%;position:relative}.Ji{position:relative;z-index:1}.Ki{pointer-events:none}.J{position:absolute;inset:0;z-index:5;opacity:1;pointer-events:none;transition:opacity .22s ease;will-change:opacity;overflow:hidden}.Li,.Mi{opacity:0}.v{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}@media(prefers-reduced-motion:reduce){.v,.J{transition:none}}.o{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}.o:hover{transform:scale(1.2)}.o.Ni{background-color:#50a3ff;box-shadow:0 0 8px #50a3ff99}.o.Oi{background-color:#d3d3d3}.b{position:absolute;border-radius:50%;transform:scale(0);animation:b .6s linear;background-color:#0000004d;pointer-events:none}@keyframes b{to{transform:scale(4);opacity:0}}.K [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}.K.v [data-rmg-idx]>*{opacity:1;transform:translateY(0)}.Pi{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:L 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 L{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.Qi{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}.M{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;justify-content:center}.Ri{display:flex;flex-direction:column;width:100%;min-width:0;min-height:0}.Si{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}.Ti{display:flex;flex-direction:column;width:100%;min-width:0;min-height:0}.Ui{position:relative;width:100%;container-type:inline-size}.Vi{position:relative;overflow-anchor:none;width:100%;height:auto;min-height:var(--rmg-slider-initial-height, var(--rmg-slider-height));max-height:none}.N{flex:1 1 0;height:100%;min-width:0;display:flex}.M[data-rmg-skel-mode=peek] .N{flex:0 0 auto}.Wi{display:flex;min-width:0;min-height:0;width:100%}.y{width:100%;height:auto;position:relative;overflow:hidden;border-radius:var(--rmg-skel-radius, 12px);background:var(--rmg-skel-bg, #e5e5e5)}.y: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:O var(--rmg-skel-shimmer-duration, 1.2s) var(--rmg-skel-shimmer-timing, ease-in-out) infinite;will-change:transform}@keyframes O{0%{transform:translate(-100%)}to{transform:translate(100%)}}@media(prefers-reduced-motion:reduce){.y:after{animation:none;opacity:0}}
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 { a as BreakpointMap } from './responsive-CvE5dTnP.mjs';
3
- import { S as SliderOptions, a as SliderHandle } from './types-9fvdyhuG.mjs';
4
- export { R as ResponsiveHeightRule } from './types-9fvdyhuG.mjs';
5
- import { S as SliderIndexChannel } from './sliderSub-DDPjywVp.mjs';
6
- export { c as createSliderIndexChannel } from './sliderSub-DDPjywVp.mjs';
7
- export { I as IndexMode } from './types-tb9Qf2Mj.mjs';
8
- import './elements-Bd1vm4Uk.mjs';
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: 3000;
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{a as DEFAULT_SLIDER,b as Slider,b as default}from'./chunk-UOXJOJEY.mjs';import'./chunk-YRQVG3MM.mjs';import'./chunk-KZUAS63N.mjs';export{a as createSliderIndexChannel}from'./chunk-H4BEIJAD.mjs';import'./chunk-TZGAHWM7.mjs';import'./chunk-ESF6XBYF.mjs';import'./chunk-EV6ZK4QI.mjs';import'./chunk-X4HEGEZV.mjs';import'./chunk-LVYED5ZM.mjs';import'./chunk-2AHLR3V4.mjs';
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 './types-tb9Qf2Mj.mjs';
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;
@@ -0,0 +1,4 @@
1
+ type ResponsiveTextLineCount = number | Record<string, number>;
2
+ type ResponsiveTextLineWidth = number | string | Record<string, number | string>;
3
+
4
+ export type { ResponsiveTextLineCount as R, ResponsiveTextLineWidth as a };
@@ -1 +1 @@
1
- .gi{position:relative}.fi{position:relative;z-index:1}.hi{pointer-events:none}.C{position:absolute;inset:0;z-index:5;opacity:1;pointer-events:none;transition:opacity .22s ease;will-change:opacity}.vi{opacity:0}.bi{position:absolute;inset:0;z-index:5;pointer-events:none;display:flex;align-items:center;justify-content:center}.yi{display:flex;width:100%;height:100%}.ui{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:D var(--rmg-shimmer-duration, 1.2s) infinite var(--rmg-shimmer-timing, linear)}@keyframes D{0%{background-position:100% 0}to{background-position:-100% 0}}@media(prefers-reduced-motion:reduce){.C{transition:none}}.l{position:relative;overflow:hidden;box-sizing:border-box}.l: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}.l[data-active=true]:after{opacity:1}.xi{opacity:0}.c{opacity:1;transition:opacity var(--rmg-intro-duration, .42s) var(--rmg-intro-easing, cubic-bezier(.2,.7,.2,1))}@media(prefers-reduced-motion:reduce){.c{transition:none}}.E [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}.E.c [data-rmg-thumb-index]>*{opacity:1;transform:translateY(0)}.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}}
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}}
@@ -1,30 +1,42 @@
1
1
  import * as React from 'react';
2
- import { S as SliderIndexChannel } from './sliderSub-DDPjywVp.mjs';
3
- import { a as BreakpointMap } from './responsive-CvE5dTnP.mjs';
4
- import { a as ThumbnailsOptions } from './types-Bi2iBbyG.mjs';
5
- export { R as ResponsivePosition, e as ThumbnailContainerLayout, c as ThumbnailIntroOptions, d as ThumbnailLayout, b as ThumbnailLoadingOptions, T as ThumbnailPosition, k as ThumbnailsControls, g as ThumbnailsElements, f as ThumbnailsLayout, i as ThumbnailsMotion, j as ThumbnailsRipple, h as ThumbnailsScroll, l as ThumbnailsTransitions } from './types-Bi2iBbyG.mjs';
6
- import { I as IndexMode } from './types-tb9Qf2Mj.mjs';
7
- import './elements-Bd1vm4Uk.mjs';
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
 
@@ -1 +1 @@
1
- export{a as DEFAULT_THUMBNAILS,c as ThumbnailSlider,b as createThumbnailSyncBridge,c as default}from'./chunk-KN72Q6DM.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';
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, a as BreakpointMap } from './responsive-CvE5dTnP.mjs';
3
- import { E as ElementStyle, A as ArrowRenderArgs } from './elements-Bd1vm4Uk.mjs';
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
- renderLoading?: () => React.ReactNode;
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, ThumbnailsOptions as a, ThumbnailLoadingOptions as b, ThumbnailIntroOptions as c, ThumbnailLayout as d, ThumbnailContainerLayout as e, ThumbnailsLayout as f, ThumbnailsElements as g, ThumbnailsScroll as h, ThumbnailsMotion as i, ThumbnailsRipple as j, ThumbnailsControls as k, ThumbnailsTransitions as l };
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-CvE5dTnP.mjs';
2
- import { E as ElementStyle, A as ArrowRenderArgs, D as DotsRenderArgs, P as ProgressRenderArgs } from './elements-Bd1vm4Uk.mjs';
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 { S as SliderIndexChannel } from './sliderSub-DDPjywVp.mjs';
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?: SkeletonBaseStyle;
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?: SkeletonBaseStyle;
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?: SkeletonBaseStyle;
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?: number;
77
- style?: SkeletonBaseStyle;
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 };