@dust-tt/sparkle 0.7.1 → 0.7.3
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/dist/cjs/index.js +5 -5
- package/dist/cjs/index.js.map +2 -2
- package/dist/esm/components/Citation.js +1 -1
- package/dist/esm/components/ImagePreview.d.ts +3 -2
- package/dist/esm/components/ImagePreview.d.ts.map +1 -1
- package/dist/esm/components/ImagePreview.js +23 -10
- package/dist/esm/components/ImagePreview.js.map +1 -1
- package/dist/esm/components/InteractiveImageGrid.js +2 -2
- package/dist/esm/components/InteractiveImageGrid.js.map +1 -1
- package/dist/esm/lottie/collapseBar.d.ts +21 -21
- package/dist/esm/lottie/spinnerColorLG.d.ts +125 -125
- package/dist/esm/lottie/spinnerColorXS.d.ts +11 -11
- package/dist/esm/lottie/spinnerDarkXS.d.ts +38 -38
- package/dist/esm/lottie/spinnerLight.d.ts +66 -66
- package/dist/esm/stories/ImagePreview.stories.d.ts +2 -4
- package/dist/esm/stories/ImagePreview.stories.d.ts.map +1 -1
- package/dist/esm/stories/ImagePreview.stories.js +24 -48
- package/dist/esm/stories/ImagePreview.stories.js.map +1 -1
- package/dist/sparkle.css +7 -6
- package/package.json +1 -1
- package/src/components/Citation.tsx +1 -1
- package/src/components/ImagePreview.tsx +27 -11
- package/src/components/InteractiveImageGrid.tsx +2 -2
|
@@ -41,12 +41,12 @@ declare const animation: {
|
|
|
41
41
|
to: number[];
|
|
42
42
|
ti: number[];
|
|
43
43
|
} | {
|
|
44
|
+
i?: undefined;
|
|
45
|
+
o?: undefined;
|
|
44
46
|
to?: undefined;
|
|
45
47
|
ti?: undefined;
|
|
46
48
|
t: number;
|
|
47
49
|
s: number[];
|
|
48
|
-
i?: undefined;
|
|
49
|
-
o?: undefined;
|
|
50
50
|
})[];
|
|
51
51
|
ix: number;
|
|
52
52
|
l: number;
|
|
@@ -68,6 +68,19 @@ declare const animation: {
|
|
|
68
68
|
shapes: {
|
|
69
69
|
ty: string;
|
|
70
70
|
it: ({
|
|
71
|
+
o?: undefined;
|
|
72
|
+
c?: undefined;
|
|
73
|
+
bm?: undefined;
|
|
74
|
+
p?: undefined;
|
|
75
|
+
a?: undefined;
|
|
76
|
+
s?: undefined;
|
|
77
|
+
sk?: undefined;
|
|
78
|
+
sa?: undefined;
|
|
79
|
+
r?: undefined;
|
|
80
|
+
w?: undefined;
|
|
81
|
+
lc?: undefined;
|
|
82
|
+
lj?: undefined;
|
|
83
|
+
ml?: undefined;
|
|
71
84
|
ind: number;
|
|
72
85
|
ty: string;
|
|
73
86
|
ix: number;
|
|
@@ -90,6 +103,8 @@ declare const animation: {
|
|
|
90
103
|
c: boolean;
|
|
91
104
|
}[];
|
|
92
105
|
} | {
|
|
106
|
+
i?: undefined;
|
|
107
|
+
o?: undefined;
|
|
93
108
|
t: number;
|
|
94
109
|
s: {
|
|
95
110
|
i: number[][];
|
|
@@ -97,28 +112,22 @@ declare const animation: {
|
|
|
97
112
|
v: number[][];
|
|
98
113
|
c: boolean;
|
|
99
114
|
}[];
|
|
100
|
-
i?: undefined;
|
|
101
|
-
o?: undefined;
|
|
102
115
|
})[];
|
|
103
116
|
ix: number;
|
|
104
117
|
};
|
|
105
118
|
nm: string;
|
|
106
119
|
mn: string;
|
|
107
120
|
hd: boolean;
|
|
108
|
-
|
|
109
|
-
c?: undefined;
|
|
110
|
-
w?: undefined;
|
|
111
|
-
lc?: undefined;
|
|
112
|
-
lj?: undefined;
|
|
113
|
-
ml?: undefined;
|
|
114
|
-
bm?: undefined;
|
|
121
|
+
} | {
|
|
115
122
|
p?: undefined;
|
|
116
123
|
a?: undefined;
|
|
117
124
|
s?: undefined;
|
|
118
|
-
r?: undefined;
|
|
119
125
|
sk?: undefined;
|
|
120
126
|
sa?: undefined;
|
|
121
|
-
|
|
127
|
+
ix?: undefined;
|
|
128
|
+
ind?: undefined;
|
|
129
|
+
ks?: undefined;
|
|
130
|
+
r?: undefined;
|
|
122
131
|
ty: string;
|
|
123
132
|
c: {
|
|
124
133
|
a: number;
|
|
@@ -142,16 +151,19 @@ declare const animation: {
|
|
|
142
151
|
nm: string;
|
|
143
152
|
mn: string;
|
|
144
153
|
hd: boolean;
|
|
145
|
-
|
|
146
|
-
ix?: undefined;
|
|
147
|
-
ks?: undefined;
|
|
154
|
+
} | {
|
|
148
155
|
p?: undefined;
|
|
149
156
|
a?: undefined;
|
|
150
157
|
s?: undefined;
|
|
151
|
-
r?: undefined;
|
|
152
158
|
sk?: undefined;
|
|
153
159
|
sa?: undefined;
|
|
154
|
-
|
|
160
|
+
ix?: undefined;
|
|
161
|
+
ind?: undefined;
|
|
162
|
+
ks?: undefined;
|
|
163
|
+
w?: undefined;
|
|
164
|
+
lc?: undefined;
|
|
165
|
+
lj?: undefined;
|
|
166
|
+
ml?: undefined;
|
|
155
167
|
ty: string;
|
|
156
168
|
c: {
|
|
157
169
|
a: number;
|
|
@@ -172,10 +184,10 @@ declare const animation: {
|
|
|
172
184
|
t: number;
|
|
173
185
|
s: number[];
|
|
174
186
|
} | {
|
|
175
|
-
t: number;
|
|
176
|
-
s: number[];
|
|
177
187
|
i?: undefined;
|
|
178
188
|
o?: undefined;
|
|
189
|
+
t: number;
|
|
190
|
+
s: number[];
|
|
179
191
|
})[];
|
|
180
192
|
ix: number;
|
|
181
193
|
};
|
|
@@ -184,19 +196,18 @@ declare const animation: {
|
|
|
184
196
|
nm: string;
|
|
185
197
|
mn: string;
|
|
186
198
|
hd: boolean;
|
|
187
|
-
|
|
199
|
+
} | {
|
|
200
|
+
c?: undefined;
|
|
201
|
+
bm?: undefined;
|
|
202
|
+
mn?: undefined;
|
|
203
|
+
hd?: undefined;
|
|
188
204
|
ix?: undefined;
|
|
205
|
+
ind?: undefined;
|
|
189
206
|
ks?: undefined;
|
|
190
207
|
w?: undefined;
|
|
191
208
|
lc?: undefined;
|
|
192
209
|
lj?: undefined;
|
|
193
210
|
ml?: undefined;
|
|
194
|
-
p?: undefined;
|
|
195
|
-
a?: undefined;
|
|
196
|
-
s?: undefined;
|
|
197
|
-
sk?: undefined;
|
|
198
|
-
sa?: undefined;
|
|
199
|
-
} | {
|
|
200
211
|
ty: string;
|
|
201
212
|
p: {
|
|
202
213
|
a: number;
|
|
@@ -234,17 +245,6 @@ declare const animation: {
|
|
|
234
245
|
ix: number;
|
|
235
246
|
};
|
|
236
247
|
nm: string;
|
|
237
|
-
ind?: undefined;
|
|
238
|
-
ix?: undefined;
|
|
239
|
-
ks?: undefined;
|
|
240
|
-
c?: undefined;
|
|
241
|
-
w?: undefined;
|
|
242
|
-
lc?: undefined;
|
|
243
|
-
lj?: undefined;
|
|
244
|
-
ml?: undefined;
|
|
245
|
-
bm?: undefined;
|
|
246
|
-
mn?: undefined;
|
|
247
|
-
hd?: undefined;
|
|
248
248
|
})[];
|
|
249
249
|
nm: string;
|
|
250
250
|
np: number;
|
|
@@ -51,10 +51,10 @@ declare const animation: {
|
|
|
51
51
|
t: number;
|
|
52
52
|
s: number[];
|
|
53
53
|
} | {
|
|
54
|
-
t: number;
|
|
55
|
-
s: number[];
|
|
56
54
|
i?: undefined;
|
|
57
55
|
o?: undefined;
|
|
56
|
+
t: number;
|
|
57
|
+
s: number[];
|
|
58
58
|
})[];
|
|
59
59
|
ix: number;
|
|
60
60
|
l: number;
|
|
@@ -64,6 +64,9 @@ declare const animation: {
|
|
|
64
64
|
shapes: {
|
|
65
65
|
ty: string;
|
|
66
66
|
it: ({
|
|
67
|
+
o?: undefined;
|
|
68
|
+
c?: undefined;
|
|
69
|
+
bm?: undefined;
|
|
67
70
|
ty: string;
|
|
68
71
|
d: number;
|
|
69
72
|
s: {
|
|
@@ -90,19 +93,16 @@ declare const animation: {
|
|
|
90
93
|
t: number;
|
|
91
94
|
s: number[];
|
|
92
95
|
} | {
|
|
93
|
-
t: number;
|
|
94
|
-
s: number[];
|
|
95
96
|
i?: undefined;
|
|
96
97
|
o?: undefined;
|
|
98
|
+
t: number;
|
|
99
|
+
s: number[];
|
|
97
100
|
})[];
|
|
98
101
|
ix: number;
|
|
99
102
|
};
|
|
100
103
|
nm: string;
|
|
101
104
|
mn: string;
|
|
102
105
|
hd: boolean;
|
|
103
|
-
o?: undefined;
|
|
104
|
-
c?: undefined;
|
|
105
|
-
bm?: undefined;
|
|
106
106
|
a?: undefined;
|
|
107
107
|
sk?: undefined;
|
|
108
108
|
sa?: undefined;
|
|
@@ -123,10 +123,10 @@ declare const animation: {
|
|
|
123
123
|
t: number;
|
|
124
124
|
s: number[];
|
|
125
125
|
} | {
|
|
126
|
-
t: number;
|
|
127
|
-
s: number[];
|
|
128
126
|
i?: undefined;
|
|
129
127
|
o?: undefined;
|
|
128
|
+
t: number;
|
|
129
|
+
s: number[];
|
|
130
130
|
})[];
|
|
131
131
|
ix: number;
|
|
132
132
|
};
|
|
@@ -144,10 +144,10 @@ declare const animation: {
|
|
|
144
144
|
t: number;
|
|
145
145
|
s: number[];
|
|
146
146
|
} | {
|
|
147
|
-
t: number;
|
|
148
|
-
s: number[];
|
|
149
147
|
i?: undefined;
|
|
150
148
|
o?: undefined;
|
|
149
|
+
t: number;
|
|
150
|
+
s: number[];
|
|
151
151
|
})[];
|
|
152
152
|
ix: number;
|
|
153
153
|
};
|
|
@@ -162,7 +162,11 @@ declare const animation: {
|
|
|
162
162
|
sk?: undefined;
|
|
163
163
|
sa?: undefined;
|
|
164
164
|
} | {
|
|
165
|
+
c?: undefined;
|
|
166
|
+
bm?: undefined;
|
|
165
167
|
d?: undefined;
|
|
168
|
+
mn?: undefined;
|
|
169
|
+
hd?: undefined;
|
|
166
170
|
ty: string;
|
|
167
171
|
p: {
|
|
168
172
|
a: number;
|
|
@@ -200,10 +204,6 @@ declare const animation: {
|
|
|
200
204
|
ix: number;
|
|
201
205
|
};
|
|
202
206
|
nm: string;
|
|
203
|
-
c?: undefined;
|
|
204
|
-
bm?: undefined;
|
|
205
|
-
mn?: undefined;
|
|
206
|
-
hd?: undefined;
|
|
207
207
|
})[];
|
|
208
208
|
nm: string;
|
|
209
209
|
np: number;
|
|
@@ -243,10 +243,10 @@ declare const animation: {
|
|
|
243
243
|
t: number;
|
|
244
244
|
s: number[];
|
|
245
245
|
} | {
|
|
246
|
-
t: number;
|
|
247
|
-
s: number[];
|
|
248
246
|
i?: undefined;
|
|
249
247
|
o?: undefined;
|
|
248
|
+
t: number;
|
|
249
|
+
s: number[];
|
|
250
250
|
})[];
|
|
251
251
|
ix: number;
|
|
252
252
|
};
|
|
@@ -273,6 +273,13 @@ declare const animation: {
|
|
|
273
273
|
shapes: {
|
|
274
274
|
ty: string;
|
|
275
275
|
it: ({
|
|
276
|
+
o?: undefined;
|
|
277
|
+
c?: undefined;
|
|
278
|
+
bm?: undefined;
|
|
279
|
+
a?: undefined;
|
|
280
|
+
s?: undefined;
|
|
281
|
+
sk?: undefined;
|
|
282
|
+
sa?: undefined;
|
|
276
283
|
ty: string;
|
|
277
284
|
sy: number;
|
|
278
285
|
d: number;
|
|
@@ -305,15 +312,14 @@ declare const animation: {
|
|
|
305
312
|
nm: string;
|
|
306
313
|
mn: string;
|
|
307
314
|
hd: boolean;
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
315
|
+
} | {
|
|
316
|
+
ix?: undefined;
|
|
317
|
+
d?: undefined;
|
|
318
|
+
p?: undefined;
|
|
311
319
|
a?: undefined;
|
|
312
320
|
s?: undefined;
|
|
313
321
|
sk?: undefined;
|
|
314
322
|
sa?: undefined;
|
|
315
|
-
} | {
|
|
316
|
-
d?: undefined;
|
|
317
323
|
sy?: undefined;
|
|
318
324
|
pt?: undefined;
|
|
319
325
|
or?: undefined;
|
|
@@ -334,14 +340,13 @@ declare const animation: {
|
|
|
334
340
|
nm: string;
|
|
335
341
|
mn: string;
|
|
336
342
|
hd: boolean;
|
|
337
|
-
ix?: undefined;
|
|
338
|
-
p?: undefined;
|
|
339
|
-
a?: undefined;
|
|
340
|
-
s?: undefined;
|
|
341
|
-
sk?: undefined;
|
|
342
|
-
sa?: undefined;
|
|
343
343
|
} | {
|
|
344
|
+
ix?: undefined;
|
|
345
|
+
c?: undefined;
|
|
346
|
+
bm?: undefined;
|
|
344
347
|
d?: undefined;
|
|
348
|
+
mn?: undefined;
|
|
349
|
+
hd?: undefined;
|
|
345
350
|
sy?: undefined;
|
|
346
351
|
pt?: undefined;
|
|
347
352
|
or?: undefined;
|
|
@@ -383,11 +388,6 @@ declare const animation: {
|
|
|
383
388
|
ix: number;
|
|
384
389
|
};
|
|
385
390
|
nm: string;
|
|
386
|
-
ix?: undefined;
|
|
387
|
-
c?: undefined;
|
|
388
|
-
bm?: undefined;
|
|
389
|
-
mn?: undefined;
|
|
390
|
-
hd?: undefined;
|
|
391
391
|
})[];
|
|
392
392
|
nm: string;
|
|
393
393
|
np: number;
|
|
@@ -434,12 +434,12 @@ declare const animation: {
|
|
|
434
434
|
to: number[];
|
|
435
435
|
ti: number[];
|
|
436
436
|
} | {
|
|
437
|
+
i?: undefined;
|
|
438
|
+
o?: undefined;
|
|
437
439
|
to?: undefined;
|
|
438
440
|
ti?: undefined;
|
|
439
441
|
t: number;
|
|
440
442
|
s: number[];
|
|
441
|
-
i?: undefined;
|
|
442
|
-
o?: undefined;
|
|
443
443
|
})[];
|
|
444
444
|
ix: number;
|
|
445
445
|
l: number;
|
|
@@ -461,6 +461,13 @@ declare const animation: {
|
|
|
461
461
|
shapes: {
|
|
462
462
|
ty: string;
|
|
463
463
|
it: ({
|
|
464
|
+
o?: undefined;
|
|
465
|
+
c?: undefined;
|
|
466
|
+
r?: undefined;
|
|
467
|
+
bm?: undefined;
|
|
468
|
+
a?: undefined;
|
|
469
|
+
sk?: undefined;
|
|
470
|
+
sa?: undefined;
|
|
464
471
|
d: number;
|
|
465
472
|
ty: string;
|
|
466
473
|
s: {
|
|
@@ -476,15 +483,13 @@ declare const animation: {
|
|
|
476
483
|
nm: string;
|
|
477
484
|
mn: string;
|
|
478
485
|
hd: boolean;
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
486
|
+
} | {
|
|
487
|
+
d?: undefined;
|
|
488
|
+
p?: undefined;
|
|
482
489
|
a?: undefined;
|
|
483
|
-
|
|
490
|
+
s?: undefined;
|
|
484
491
|
sk?: undefined;
|
|
485
492
|
sa?: undefined;
|
|
486
|
-
} | {
|
|
487
|
-
d?: undefined;
|
|
488
493
|
ty: string;
|
|
489
494
|
c: {
|
|
490
495
|
a: number;
|
|
@@ -501,13 +506,12 @@ declare const animation: {
|
|
|
501
506
|
nm: string;
|
|
502
507
|
mn: string;
|
|
503
508
|
hd: boolean;
|
|
504
|
-
p?: undefined;
|
|
505
|
-
a?: undefined;
|
|
506
|
-
s?: undefined;
|
|
507
|
-
sk?: undefined;
|
|
508
|
-
sa?: undefined;
|
|
509
509
|
} | {
|
|
510
|
+
c?: undefined;
|
|
511
|
+
bm?: undefined;
|
|
510
512
|
d?: undefined;
|
|
513
|
+
mn?: undefined;
|
|
514
|
+
hd?: undefined;
|
|
511
515
|
ty: string;
|
|
512
516
|
p: {
|
|
513
517
|
a: number;
|
|
@@ -545,10 +549,6 @@ declare const animation: {
|
|
|
545
549
|
ix: number;
|
|
546
550
|
};
|
|
547
551
|
nm: string;
|
|
548
|
-
c?: undefined;
|
|
549
|
-
bm?: undefined;
|
|
550
|
-
mn?: undefined;
|
|
551
|
-
hd?: undefined;
|
|
552
552
|
})[];
|
|
553
553
|
nm: string;
|
|
554
554
|
np: number;
|
|
@@ -605,10 +605,10 @@ declare const animation: {
|
|
|
605
605
|
t: number;
|
|
606
606
|
s: number[];
|
|
607
607
|
} | {
|
|
608
|
-
t: number;
|
|
609
|
-
s: number[];
|
|
610
608
|
i?: undefined;
|
|
611
609
|
o?: undefined;
|
|
610
|
+
t: number;
|
|
611
|
+
s: number[];
|
|
612
612
|
})[];
|
|
613
613
|
ix: number;
|
|
614
614
|
l: number;
|
|
@@ -618,6 +618,12 @@ declare const animation: {
|
|
|
618
618
|
shapes: {
|
|
619
619
|
ty: string;
|
|
620
620
|
it: ({
|
|
621
|
+
o?: undefined;
|
|
622
|
+
c?: undefined;
|
|
623
|
+
bm?: undefined;
|
|
624
|
+
a?: undefined;
|
|
625
|
+
sk?: undefined;
|
|
626
|
+
sa?: undefined;
|
|
621
627
|
ty: string;
|
|
622
628
|
d: number;
|
|
623
629
|
s: {
|
|
@@ -638,14 +644,13 @@ declare const animation: {
|
|
|
638
644
|
nm: string;
|
|
639
645
|
mn: string;
|
|
640
646
|
hd: boolean;
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
647
|
+
} | {
|
|
648
|
+
d?: undefined;
|
|
649
|
+
p?: undefined;
|
|
644
650
|
a?: undefined;
|
|
651
|
+
s?: undefined;
|
|
645
652
|
sk?: undefined;
|
|
646
653
|
sa?: undefined;
|
|
647
|
-
} | {
|
|
648
|
-
d?: undefined;
|
|
649
654
|
ty: string;
|
|
650
655
|
c: {
|
|
651
656
|
a: number;
|
|
@@ -662,13 +667,12 @@ declare const animation: {
|
|
|
662
667
|
nm: string;
|
|
663
668
|
mn: string;
|
|
664
669
|
hd: boolean;
|
|
665
|
-
p?: undefined;
|
|
666
|
-
a?: undefined;
|
|
667
|
-
s?: undefined;
|
|
668
|
-
sk?: undefined;
|
|
669
|
-
sa?: undefined;
|
|
670
670
|
} | {
|
|
671
|
+
c?: undefined;
|
|
672
|
+
bm?: undefined;
|
|
671
673
|
d?: undefined;
|
|
674
|
+
mn?: undefined;
|
|
675
|
+
hd?: undefined;
|
|
672
676
|
ty: string;
|
|
673
677
|
p: {
|
|
674
678
|
a: number;
|
|
@@ -706,10 +710,6 @@ declare const animation: {
|
|
|
706
710
|
ix: number;
|
|
707
711
|
};
|
|
708
712
|
nm: string;
|
|
709
|
-
c?: undefined;
|
|
710
|
-
bm?: undefined;
|
|
711
|
-
mn?: undefined;
|
|
712
|
-
hd?: undefined;
|
|
713
713
|
})[];
|
|
714
714
|
nm: string;
|
|
715
715
|
np: number;
|
|
@@ -7,7 +7,7 @@ declare const meta: {
|
|
|
7
7
|
argTypes: {
|
|
8
8
|
variant: {
|
|
9
9
|
description: string;
|
|
10
|
-
options: readonly ["
|
|
10
|
+
options: readonly ["embedded", "standalone"];
|
|
11
11
|
control: {
|
|
12
12
|
type: "select";
|
|
13
13
|
};
|
|
@@ -41,7 +41,5 @@ declare const meta: {
|
|
|
41
41
|
export default meta;
|
|
42
42
|
type Story = StoryObj<typeof meta>;
|
|
43
43
|
export declare const ExampleImagePreview: Story;
|
|
44
|
-
export declare const
|
|
45
|
-
export declare const WithDownload: Story;
|
|
46
|
-
export declare const Gallery: Story;
|
|
44
|
+
export declare const Variants: Story;
|
|
47
45
|
//# sourceMappingURL=ImagePreview.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImagePreview.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ImagePreview.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8C2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,mBAAmB,EAAE,KAUjC,CAAC;AAEF,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"ImagePreview.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/ImagePreview.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8C2B,CAAC;AAEtC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,mBAAmB,EAAE,KAUjC,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KA6DtB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { IMAGE_PREVIEW_TITLE_POSITIONS, IMAGE_PREVIEW_VARIANTS, } from "../components/ImagePreview";
|
|
3
|
-
import { ImagePreview
|
|
3
|
+
import { ImagePreview } from "../index_with_tw_base";
|
|
4
4
|
const SAMPLE_IMAGE = "https://dust.tt/static/droidavatar/Droid_Lime_3.jpg";
|
|
5
5
|
const meta = {
|
|
6
6
|
title: "Components/ImagePreview",
|
|
@@ -35,7 +35,7 @@ const meta = {
|
|
|
35
35
|
},
|
|
36
36
|
},
|
|
37
37
|
render: (args) => {
|
|
38
|
-
if (args.variant === "
|
|
38
|
+
if (args.variant === "embedded") {
|
|
39
39
|
return (React.createElement("div", { className: "s-relative s-h-48 s-w-48" },
|
|
40
40
|
React.createElement(ImagePreview, Object.assign({}, args))));
|
|
41
41
|
}
|
|
@@ -49,59 +49,35 @@ export const ExampleImagePreview = {
|
|
|
49
49
|
imgSrc: SAMPLE_IMAGE,
|
|
50
50
|
title: "Sample Image",
|
|
51
51
|
alt: "A sample droid avatar",
|
|
52
|
-
variant: "
|
|
52
|
+
variant: "standalone",
|
|
53
53
|
titlePosition: "bottom",
|
|
54
54
|
isLoading: false,
|
|
55
55
|
manageZoomDialog: true,
|
|
56
56
|
},
|
|
57
57
|
};
|
|
58
|
-
export const
|
|
59
|
-
args: {
|
|
60
|
-
imgSrc: SAMPLE_IMAGE,
|
|
61
|
-
title: "Closeable Image",
|
|
62
|
-
variant: "square",
|
|
63
|
-
titlePosition: "bottom",
|
|
64
|
-
},
|
|
65
|
-
render: (args) => (React.createElement("div", { className: "s-w-48" },
|
|
66
|
-
React.createElement(ImagePreview, Object.assign({}, args, { onClose: () => alert("Close clicked") })))),
|
|
67
|
-
};
|
|
68
|
-
export const WithDownload = {
|
|
69
|
-
args: {
|
|
70
|
-
imgSrc: SAMPLE_IMAGE,
|
|
71
|
-
title: "Downloadable Image",
|
|
72
|
-
downloadUrl: SAMPLE_IMAGE,
|
|
73
|
-
variant: "square",
|
|
74
|
-
titlePosition: "bottom",
|
|
75
|
-
},
|
|
76
|
-
render: (args) => (React.createElement("div", { className: "s-w-48" },
|
|
77
|
-
React.createElement(ImagePreview, Object.assign({}, args)))),
|
|
78
|
-
};
|
|
79
|
-
const ImagePreviewByVariant = ({ variant, }) => (React.createElement(React.Fragment, null,
|
|
80
|
-
React.createElement(Separator, null),
|
|
81
|
-
React.createElement("h3", { className: "s-text-primary dark:s-text-primary-50" }, variant === null || variant === void 0 ? void 0 : variant.toUpperCase()),
|
|
82
|
-
React.createElement("div", { className: "s-flex s-flex-col s-gap-4" }, IMAGE_PREVIEW_TITLE_POSITIONS.map((titlePosition) => (React.createElement("div", { key: titlePosition, className: "s-flex s-flex-col s-gap-2" },
|
|
83
|
-
React.createElement("div", { className: "s-text-sm s-font-medium s-text-primary dark:s-text-primary-night" },
|
|
84
|
-
"titlePosition: ",
|
|
85
|
-
titlePosition),
|
|
86
|
-
React.createElement("div", { className: "s-flex s-items-center s-gap-4" }, variant === "absolute" ? (React.createElement(React.Fragment, null,
|
|
87
|
-
React.createElement("div", { className: "s-relative s-h-32 s-w-32" },
|
|
88
|
-
React.createElement(ImagePreview, { imgSrc: SAMPLE_IMAGE, title: "Normal", variant: variant, titlePosition: titlePosition })),
|
|
89
|
-
React.createElement("div", { className: "s-relative s-h-32 s-w-32" },
|
|
90
|
-
React.createElement(ImagePreview, { imgSrc: SAMPLE_IMAGE, title: "Loading", variant: variant, titlePosition: titlePosition, isLoading: true })),
|
|
91
|
-
React.createElement("div", { className: "s-relative s-h-32 s-w-32" },
|
|
92
|
-
React.createElement(ImagePreview, { imgSrc: SAMPLE_IMAGE, title: "With Close", variant: variant, titlePosition: titlePosition, onClose: () => { } })))) : (React.createElement(React.Fragment, null,
|
|
93
|
-
React.createElement("div", { className: "s-w-32" },
|
|
94
|
-
React.createElement(ImagePreview, { imgSrc: SAMPLE_IMAGE, title: "Normal", variant: variant, titlePosition: titlePosition })),
|
|
95
|
-
React.createElement("div", { className: "s-w-32" },
|
|
96
|
-
React.createElement(ImagePreview, { imgSrc: SAMPLE_IMAGE, title: "Loading", variant: variant, titlePosition: titlePosition, isLoading: true })),
|
|
97
|
-
React.createElement("div", { className: "s-w-32" },
|
|
98
|
-
React.createElement(ImagePreview, { imgSrc: SAMPLE_IMAGE, title: "With Close", variant: variant, titlePosition: titlePosition, onClose: () => { } })))))))))));
|
|
99
|
-
export const Gallery = {
|
|
58
|
+
export const Variants = {
|
|
100
59
|
args: {
|
|
101
60
|
imgSrc: SAMPLE_IMAGE,
|
|
61
|
+
variant: "standalone",
|
|
102
62
|
},
|
|
103
|
-
render: () => (React.createElement("div", { className: "s-flex s-flex-col s-gap-
|
|
104
|
-
React.createElement(
|
|
105
|
-
|
|
63
|
+
render: (args) => (React.createElement("div", { className: "s-flex s-flex-col s-gap-6" },
|
|
64
|
+
React.createElement("div", { className: "s-flex s-flex-col s-gap-2" },
|
|
65
|
+
React.createElement("div", { className: "s-text-sm s-font-medium s-text-primary dark:s-text-primary-night" }, "Title Position: Bottom"),
|
|
66
|
+
React.createElement("div", { className: "s-flex s-items-center s-gap-4" },
|
|
67
|
+
React.createElement("div", { className: "s-w-32" },
|
|
68
|
+
React.createElement(ImagePreview, Object.assign({}, args, { title: "Normal", titlePosition: "bottom" }))),
|
|
69
|
+
React.createElement("div", { className: "s-w-32" },
|
|
70
|
+
React.createElement(ImagePreview, Object.assign({}, args, { title: "With Close", titlePosition: "bottom", onClose: () => alert("Close clicked") }))),
|
|
71
|
+
React.createElement("div", { className: "s-w-32" },
|
|
72
|
+
React.createElement(ImagePreview, Object.assign({}, args, { title: "With Download", titlePosition: "bottom", downloadUrl: SAMPLE_IMAGE }))))),
|
|
73
|
+
React.createElement("div", { className: "s-flex s-flex-col s-gap-2" },
|
|
74
|
+
React.createElement("div", { className: "s-text-sm s-font-medium s-text-primary dark:s-text-primary-night" }, "Title Position: Center"),
|
|
75
|
+
React.createElement("div", { className: "s-flex s-items-center s-gap-4" },
|
|
76
|
+
React.createElement("div", { className: "s-w-32" },
|
|
77
|
+
React.createElement(ImagePreview, Object.assign({}, args, { title: "Normal", titlePosition: "center" }))),
|
|
78
|
+
React.createElement("div", { className: "s-w-32" },
|
|
79
|
+
React.createElement(ImagePreview, Object.assign({}, args, { title: "With Close", titlePosition: "center", onClose: () => alert("Close clicked") }))),
|
|
80
|
+
React.createElement("div", { className: "s-w-32" },
|
|
81
|
+
React.createElement(ImagePreview, Object.assign({}, args, { title: "With Download", titlePosition: "center", downloadUrl: SAMPLE_IMAGE }))))))),
|
|
106
82
|
};
|
|
107
83
|
//# sourceMappingURL=ImagePreview.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImagePreview.stories.js","sourceRoot":"","sources":["../../../src/stories/ImagePreview.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EACL,6BAA6B,EAC7B,sBAAsB,GACvB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"ImagePreview.stories.js","sourceRoot":"","sources":["../../../src/stories/ImagePreview.stories.tsx"],"names":[],"mappings":"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"}
|
package/dist/sparkle.css
CHANGED
|
@@ -1406,10 +1406,6 @@ select {
|
|
|
1406
1406
|
height: 0.875rem;
|
|
1407
1407
|
}
|
|
1408
1408
|
|
|
1409
|
-
.s-h-32 {
|
|
1410
|
-
height: 8rem;
|
|
1411
|
-
}
|
|
1412
|
-
|
|
1413
1409
|
.s-h-36 {
|
|
1414
1410
|
height: 9rem;
|
|
1415
1411
|
}
|
|
@@ -6311,7 +6307,7 @@ select {
|
|
|
6311
6307
|
opacity: 1;
|
|
6312
6308
|
}
|
|
6313
6309
|
|
|
6314
|
-
.s-group\/
|
|
6310
|
+
.s-group\/image-preview:hover .group-hover\/image-preview\:s-opacity-100 {
|
|
6315
6311
|
opacity: 1;
|
|
6316
6312
|
}
|
|
6317
6313
|
|
|
@@ -6327,7 +6323,12 @@ select {
|
|
|
6327
6323
|
opacity: 1;
|
|
6328
6324
|
}
|
|
6329
6325
|
|
|
6330
|
-
.s-group\/
|
|
6326
|
+
.s-group\/image-preview:hover .group-hover\/image-preview\:s-blur-sm {
|
|
6327
|
+
--tw-blur: blur(4px);
|
|
6328
|
+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
6329
|
+
}
|
|
6330
|
+
|
|
6331
|
+
.s-group:hover .group-hover\:s-blur-sm {
|
|
6331
6332
|
--tw-blur: blur(4px);
|
|
6332
6333
|
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
|
|
6333
6334
|
}
|
package/package.json
CHANGED
|
@@ -200,7 +200,7 @@ const CitationImage = React.forwardRef<HTMLDivElement, CitationImageProps>(
|
|
|
200
200
|
isLoading={isLoading}
|
|
201
201
|
onClose={onClose ? () => onClose() : undefined}
|
|
202
202
|
className={className}
|
|
203
|
-
variant="
|
|
203
|
+
variant="embedded"
|
|
204
204
|
titlePosition="bottom"
|
|
205
205
|
/>
|
|
206
206
|
);
|