@reevit/react 0.4.1 → 0.4.2
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/index.d.mts +31 -2
- package/dist/index.d.ts +31 -2
- package/dist/index.js +243 -9
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +244 -10
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +212 -82
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -3,54 +3,78 @@
|
|
|
3
3
|
* Minimal design system matching Reevit dashboard
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
/* Import
|
|
7
|
-
@import url('https://fonts.googleapis.com/css2?family=
|
|
6
|
+
/* Import Space Grotesk font */
|
|
7
|
+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
|
|
8
8
|
|
|
9
9
|
/* CSS Variables for theming - Light mode */
|
|
10
10
|
:root {
|
|
11
|
-
--reevit-primary:
|
|
12
|
-
--reevit-primary-hover:
|
|
13
|
-
--reevit-primary-foreground:
|
|
14
|
-
--reevit-background:
|
|
15
|
-
--reevit-surface:
|
|
16
|
-
--reevit-border:
|
|
17
|
-
--reevit-text:
|
|
18
|
-
--reevit-text-secondary:
|
|
19
|
-
--reevit-muted:
|
|
20
|
-
--reevit-success:
|
|
21
|
-
--reevit-error:
|
|
22
|
-
--reevit-warning:
|
|
23
|
-
--reevit-radius: 0.
|
|
24
|
-
--reevit-radius-sm: 0.
|
|
25
|
-
--reevit-radius-lg:
|
|
26
|
-
--reevit-font: '
|
|
27
|
-
--reevit-shadow: 0
|
|
28
|
-
--reevit-shadow-sm: 0
|
|
11
|
+
--reevit-primary: #0ea5e9;
|
|
12
|
+
--reevit-primary-hover: #0284c7;
|
|
13
|
+
--reevit-primary-foreground: #ffffff;
|
|
14
|
+
--reevit-background: #f8fafc;
|
|
15
|
+
--reevit-surface: #ffffff;
|
|
16
|
+
--reevit-border: rgba(15, 23, 42, 0.12);
|
|
17
|
+
--reevit-text: #0f172a;
|
|
18
|
+
--reevit-text-secondary: #475569;
|
|
19
|
+
--reevit-muted: #94a3b8;
|
|
20
|
+
--reevit-success: #16a34a;
|
|
21
|
+
--reevit-error: #dc2626;
|
|
22
|
+
--reevit-warning: #f59e0b;
|
|
23
|
+
--reevit-radius: 0.75rem;
|
|
24
|
+
--reevit-radius-sm: 0.6rem;
|
|
25
|
+
--reevit-radius-lg: 1rem;
|
|
26
|
+
--reevit-font: 'Space Grotesk', 'Avenir Next', 'Segoe UI', sans-serif;
|
|
27
|
+
--reevit-shadow: 0 30px 60px -30px rgba(15, 23, 42, 0.35);
|
|
28
|
+
--reevit-shadow-sm: 0 12px 24px -18px rgba(15, 23, 42, 0.3);
|
|
29
29
|
}
|
|
30
30
|
|
|
31
31
|
/* Dark mode support */
|
|
32
32
|
@media (prefers-color-scheme: dark) {
|
|
33
33
|
:root {
|
|
34
|
-
--reevit-primary:
|
|
35
|
-
--reevit-primary-hover:
|
|
36
|
-
--reevit-primary-foreground:
|
|
37
|
-
--reevit-background:
|
|
38
|
-
--reevit-surface:
|
|
39
|
-
--reevit-border:
|
|
40
|
-
--reevit-text:
|
|
41
|
-
--reevit-text-secondary:
|
|
42
|
-
--reevit-muted:
|
|
43
|
-
--reevit-success:
|
|
44
|
-
--reevit-error:
|
|
45
|
-
--reevit-warning:
|
|
34
|
+
--reevit-primary: #38bdf8;
|
|
35
|
+
--reevit-primary-hover: #0ea5e9;
|
|
36
|
+
--reevit-primary-foreground: #0b1120;
|
|
37
|
+
--reevit-background: #0b1120;
|
|
38
|
+
--reevit-surface: #111827;
|
|
39
|
+
--reevit-border: rgba(148, 163, 184, 0.2);
|
|
40
|
+
--reevit-text: #f8fafc;
|
|
41
|
+
--reevit-text-secondary: #cbd5f5;
|
|
42
|
+
--reevit-muted: #94a3b8;
|
|
43
|
+
--reevit-success: #22c55e;
|
|
44
|
+
--reevit-error: #f87171;
|
|
45
|
+
--reevit-warning: #fbbf24;
|
|
46
46
|
}
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
+
.reevit-modal[data-reevit-theme="light"] {
|
|
50
|
+
--reevit-primary: #0ea5e9;
|
|
51
|
+
--reevit-primary-hover: #0284c7;
|
|
52
|
+
--reevit-primary-foreground: #ffffff;
|
|
53
|
+
--reevit-background: #f8fafc;
|
|
54
|
+
--reevit-surface: #ffffff;
|
|
55
|
+
--reevit-border: rgba(15, 23, 42, 0.12);
|
|
56
|
+
--reevit-text: #0f172a;
|
|
57
|
+
--reevit-text-secondary: #475569;
|
|
58
|
+
--reevit-muted: #94a3b8;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.reevit-modal[data-reevit-theme="dark"] {
|
|
62
|
+
--reevit-primary: #38bdf8;
|
|
63
|
+
--reevit-primary-hover: #0ea5e9;
|
|
64
|
+
--reevit-primary-foreground: #0b1120;
|
|
65
|
+
--reevit-background: #0b1120;
|
|
66
|
+
--reevit-surface: #111827;
|
|
67
|
+
--reevit-border: rgba(148, 163, 184, 0.2);
|
|
68
|
+
--reevit-text: #f8fafc;
|
|
69
|
+
--reevit-text-secondary: #cbd5f5;
|
|
70
|
+
--reevit-muted: #94a3b8;
|
|
71
|
+
}
|
|
72
|
+
|
|
49
73
|
/* ===== OVERLAY ===== */
|
|
50
74
|
.reevit-overlay {
|
|
51
75
|
position: fixed;
|
|
52
76
|
inset: 0;
|
|
53
|
-
background: rgba(
|
|
77
|
+
background: radial-gradient(120% 120% at 50% 0%, rgba(14, 165, 233, 0.2), transparent 55%), rgba(15, 23, 42, 0.6);
|
|
54
78
|
backdrop-filter: blur(8px);
|
|
55
79
|
-webkit-backdrop-filter: blur(8px);
|
|
56
80
|
display: flex;
|
|
@@ -73,7 +97,7 @@
|
|
|
73
97
|
border: 1px solid var(--reevit-border);
|
|
74
98
|
box-shadow: var(--reevit-shadow);
|
|
75
99
|
width: 100%;
|
|
76
|
-
max-width:
|
|
100
|
+
max-width: 440px;
|
|
77
101
|
max-height: 90vh;
|
|
78
102
|
overflow: hidden;
|
|
79
103
|
display: flex;
|
|
@@ -102,8 +126,9 @@
|
|
|
102
126
|
display: flex;
|
|
103
127
|
align-items: center;
|
|
104
128
|
justify-content: space-between;
|
|
105
|
-
padding:
|
|
129
|
+
padding: 18px 22px;
|
|
106
130
|
border-bottom: 1px solid var(--reevit-border);
|
|
131
|
+
background: linear-gradient(120deg, rgba(14, 165, 233, 0.08), transparent 55%);
|
|
107
132
|
}
|
|
108
133
|
|
|
109
134
|
.reevit-modal__branding {
|
|
@@ -141,9 +166,9 @@
|
|
|
141
166
|
|
|
142
167
|
/* Modal Amount */
|
|
143
168
|
.reevit-modal__amount {
|
|
144
|
-
padding:
|
|
169
|
+
padding: 28px 22px;
|
|
145
170
|
text-align: center;
|
|
146
|
-
background:
|
|
171
|
+
background: linear-gradient(135deg, rgba(14, 165, 233, 0.12), rgba(14, 165, 233, 0.04));
|
|
147
172
|
border-bottom: 1px solid var(--reevit-border);
|
|
148
173
|
}
|
|
149
174
|
|
|
@@ -187,6 +212,111 @@
|
|
|
187
212
|
letter-spacing: 0.02em;
|
|
188
213
|
}
|
|
189
214
|
|
|
215
|
+
/* ===== PSP SELECTOR ===== */
|
|
216
|
+
.reevit-psp-selector {
|
|
217
|
+
margin-bottom: 20px;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.reevit-psp-selector__label {
|
|
221
|
+
font-size: 12px;
|
|
222
|
+
font-weight: 600;
|
|
223
|
+
color: var(--reevit-text);
|
|
224
|
+
margin-bottom: 10px;
|
|
225
|
+
letter-spacing: 0.02em;
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
.reevit-psp-selector__options {
|
|
229
|
+
display: grid;
|
|
230
|
+
gap: 10px;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.reevit-psp-option {
|
|
234
|
+
display: flex;
|
|
235
|
+
align-items: center;
|
|
236
|
+
gap: 14px;
|
|
237
|
+
padding: 14px 16px;
|
|
238
|
+
border-radius: var(--reevit-radius);
|
|
239
|
+
border: 1px solid var(--reevit-border);
|
|
240
|
+
background: var(--reevit-surface);
|
|
241
|
+
cursor: pointer;
|
|
242
|
+
transition: all 0.2s ease;
|
|
243
|
+
text-align: left;
|
|
244
|
+
width: 100%;
|
|
245
|
+
position: relative;
|
|
246
|
+
overflow: hidden;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.reevit-psp-option--selected {
|
|
250
|
+
border-color: color-mix(in srgb, var(--reevit-primary) 70%, var(--reevit-border));
|
|
251
|
+
box-shadow: 0 12px 24px -20px color-mix(in srgb, var(--reevit-primary) 60%, transparent);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.reevit-psp-option--disabled {
|
|
255
|
+
opacity: 0.6;
|
|
256
|
+
cursor: not-allowed;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
.reevit-psp-option__logo {
|
|
260
|
+
width: 36px;
|
|
261
|
+
height: 36px;
|
|
262
|
+
border-radius: 12px;
|
|
263
|
+
background: transparent;
|
|
264
|
+
display: inline-flex;
|
|
265
|
+
align-items: center;
|
|
266
|
+
justify-content: center;
|
|
267
|
+
flex-shrink: 0;
|
|
268
|
+
position: relative;
|
|
269
|
+
z-index: 1;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.reevit-psp-option__logo-img {
|
|
273
|
+
width: 100%;
|
|
274
|
+
height: 100%;
|
|
275
|
+
object-fit: contain;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
.reevit-psp-option__logo-fallback {
|
|
279
|
+
font-weight: 700;
|
|
280
|
+
color: var(--reevit-text-secondary);
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
.reevit-psp-option__content {
|
|
284
|
+
flex: 1;
|
|
285
|
+
min-width: 0;
|
|
286
|
+
position: relative;
|
|
287
|
+
z-index: 1;
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
.reevit-psp-option__name {
|
|
291
|
+
display: block;
|
|
292
|
+
font-size: 14px;
|
|
293
|
+
font-weight: 600;
|
|
294
|
+
color: var(--reevit-text);
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.reevit-psp-option__methods {
|
|
298
|
+
display: block;
|
|
299
|
+
font-size: 11px;
|
|
300
|
+
color: var(--reevit-text-secondary);
|
|
301
|
+
margin-top: 2px;
|
|
302
|
+
}
|
|
303
|
+
|
|
304
|
+
.reevit-psp-option__check {
|
|
305
|
+
font-size: 10px;
|
|
306
|
+
font-weight: 600;
|
|
307
|
+
color: var(--reevit-text-secondary);
|
|
308
|
+
background: rgba(148, 163, 184, 0.2);
|
|
309
|
+
padding: 4px 8px;
|
|
310
|
+
border-radius: 999px;
|
|
311
|
+
position: relative;
|
|
312
|
+
z-index: 1;
|
|
313
|
+
}
|
|
314
|
+
|
|
315
|
+
.reevit-psp-option--selected .reevit-psp-option__check {
|
|
316
|
+
background: color-mix(in srgb, var(--reevit-primary) 18%, transparent);
|
|
317
|
+
color: var(--reevit-primary);
|
|
318
|
+
}
|
|
319
|
+
|
|
190
320
|
/* ===== PAYMENT METHOD SELECTOR ===== */
|
|
191
321
|
.reevit-method-selector {
|
|
192
322
|
margin-bottom: 20px;
|
|
@@ -211,7 +341,7 @@
|
|
|
211
341
|
align-items: center;
|
|
212
342
|
gap: 12px;
|
|
213
343
|
padding: 14px 16px;
|
|
214
|
-
background:
|
|
344
|
+
background: var(--reevit-surface);
|
|
215
345
|
border: 1px solid var(--reevit-border);
|
|
216
346
|
border-radius: var(--reevit-radius);
|
|
217
347
|
cursor: pointer;
|
|
@@ -221,13 +351,13 @@
|
|
|
221
351
|
}
|
|
222
352
|
|
|
223
353
|
.reevit-method-option:hover {
|
|
224
|
-
border-color: var(--reevit-text-
|
|
225
|
-
|
|
354
|
+
border-color: color-mix(in srgb, var(--reevit-text) 25%, var(--reevit-border));
|
|
355
|
+
box-shadow: var(--reevit-shadow-sm);
|
|
226
356
|
}
|
|
227
357
|
|
|
228
358
|
.reevit-method-option--selected {
|
|
229
|
-
border-color: var(--reevit-
|
|
230
|
-
|
|
359
|
+
border-color: var(--reevit-primary);
|
|
360
|
+
box-shadow: 0 10px 18px -14px rgba(14, 165, 233, 0.6);
|
|
231
361
|
}
|
|
232
362
|
|
|
233
363
|
.reevit-method-option--disabled {
|
|
@@ -293,7 +423,7 @@
|
|
|
293
423
|
font-size: 14px;
|
|
294
424
|
border: 1px solid var(--reevit-border);
|
|
295
425
|
border-radius: var(--reevit-radius);
|
|
296
|
-
background:
|
|
426
|
+
background: var(--reevit-surface);
|
|
297
427
|
color: var(--reevit-text);
|
|
298
428
|
transition: all 0.15s ease;
|
|
299
429
|
font-family: var(--reevit-font);
|
|
@@ -354,14 +484,14 @@
|
|
|
354
484
|
}
|
|
355
485
|
|
|
356
486
|
.reevit-network-btn--selected {
|
|
357
|
-
border-color: var(--reevit-
|
|
358
|
-
background: var(--reevit-
|
|
359
|
-
color:
|
|
487
|
+
border-color: var(--network-color, var(--reevit-primary));
|
|
488
|
+
background: var(--network-color, var(--reevit-primary));
|
|
489
|
+
color: #ffffff;
|
|
360
490
|
}
|
|
361
491
|
|
|
362
492
|
.reevit-network-btn--selected:hover {
|
|
363
|
-
background: var(--reevit-
|
|
364
|
-
border-color: var(--reevit-
|
|
493
|
+
background: var(--network-color, var(--reevit-primary-hover));
|
|
494
|
+
border-color: var(--network-color, var(--reevit-primary-hover));
|
|
365
495
|
}
|
|
366
496
|
|
|
367
497
|
.reevit-momo-form__actions {
|
|
@@ -397,24 +527,24 @@
|
|
|
397
527
|
|
|
398
528
|
.reevit-btn--primary {
|
|
399
529
|
flex: 1;
|
|
400
|
-
background:
|
|
401
|
-
color:
|
|
402
|
-
border: 1px solid var(--reevit-border);
|
|
530
|
+
background: var(--reevit-primary);
|
|
531
|
+
color: var(--reevit-primary-foreground);
|
|
532
|
+
border: 1px solid color-mix(in srgb, var(--reevit-primary) 60%, var(--reevit-border));
|
|
403
533
|
}
|
|
404
534
|
|
|
405
535
|
.reevit-btn--primary:hover:not(:disabled) {
|
|
406
|
-
background:
|
|
407
|
-
border-color: var(--reevit-
|
|
536
|
+
background: var(--reevit-primary-hover);
|
|
537
|
+
border-color: var(--reevit-primary-hover);
|
|
408
538
|
}
|
|
409
539
|
|
|
410
540
|
.reevit-btn--primary:focus:not(:disabled) {
|
|
411
541
|
outline: none;
|
|
412
|
-
border-color: var(--reevit-
|
|
413
|
-
box-shadow: 0 0 0
|
|
542
|
+
border-color: var(--reevit-primary);
|
|
543
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--reevit-primary) 25%, transparent);
|
|
414
544
|
}
|
|
415
545
|
|
|
416
546
|
.reevit-btn--primary:active:not(:disabled) {
|
|
417
|
-
background:
|
|
547
|
+
background: var(--reevit-primary-hover);
|
|
418
548
|
transform: scale(0.98);
|
|
419
549
|
}
|
|
420
550
|
|
|
@@ -444,9 +574,9 @@
|
|
|
444
574
|
padding: 10px 18px;
|
|
445
575
|
font-size: 13px;
|
|
446
576
|
font-weight: 600;
|
|
447
|
-
background:
|
|
448
|
-
color:
|
|
449
|
-
border: 1px solid var(--reevit-border);
|
|
577
|
+
background: var(--reevit-primary);
|
|
578
|
+
color: var(--reevit-primary-foreground);
|
|
579
|
+
border: 1px solid color-mix(in srgb, var(--reevit-primary) 70%, var(--reevit-border));
|
|
450
580
|
border-radius: var(--reevit-radius);
|
|
451
581
|
cursor: pointer;
|
|
452
582
|
font-family: var(--reevit-font);
|
|
@@ -455,38 +585,38 @@
|
|
|
455
585
|
}
|
|
456
586
|
|
|
457
587
|
.reevit-trigger-btn:hover {
|
|
458
|
-
background:
|
|
459
|
-
border-color: var(--reevit-
|
|
588
|
+
background: var(--reevit-primary-hover);
|
|
589
|
+
border-color: var(--reevit-primary-hover);
|
|
460
590
|
}
|
|
461
591
|
|
|
462
592
|
.reevit-trigger-btn:focus {
|
|
463
593
|
outline: none;
|
|
464
|
-
border-color: var(--reevit-
|
|
465
|
-
box-shadow: 0 0 0
|
|
594
|
+
border-color: var(--reevit-primary);
|
|
595
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--reevit-primary) 25%, transparent);
|
|
466
596
|
}
|
|
467
597
|
|
|
468
598
|
/* Dark mode button overrides */
|
|
469
599
|
@media (prefers-color-scheme: dark) {
|
|
470
600
|
.reevit-btn--primary {
|
|
471
|
-
background:
|
|
472
|
-
color:
|
|
601
|
+
background: var(--reevit-primary);
|
|
602
|
+
color: var(--reevit-primary-foreground);
|
|
473
603
|
}
|
|
474
604
|
|
|
475
605
|
.reevit-btn--primary:hover:not(:disabled) {
|
|
476
|
-
background:
|
|
606
|
+
background: var(--reevit-primary-hover);
|
|
477
607
|
}
|
|
478
608
|
|
|
479
609
|
.reevit-btn--primary:active:not(:disabled) {
|
|
480
|
-
background:
|
|
610
|
+
background: var(--reevit-primary-hover);
|
|
481
611
|
}
|
|
482
612
|
|
|
483
613
|
.reevit-trigger-btn {
|
|
484
|
-
background:
|
|
485
|
-
color:
|
|
614
|
+
background: var(--reevit-primary);
|
|
615
|
+
color: var(--reevit-primary-foreground);
|
|
486
616
|
}
|
|
487
617
|
|
|
488
618
|
.reevit-trigger-btn:hover {
|
|
489
|
-
background:
|
|
619
|
+
background: var(--reevit-primary-hover);
|
|
490
620
|
}
|
|
491
621
|
}
|
|
492
622
|
|
|
@@ -669,24 +799,24 @@
|
|
|
669
799
|
font-family: var(--reevit-font);
|
|
670
800
|
min-height: 44px;
|
|
671
801
|
letter-spacing: -0.01em;
|
|
672
|
-
background:
|
|
673
|
-
color:
|
|
674
|
-
border: 1px solid var(--reevit-border);
|
|
802
|
+
background: var(--reevit-primary);
|
|
803
|
+
color: var(--reevit-primary-foreground);
|
|
804
|
+
border: 1px solid color-mix(in srgb, var(--reevit-primary) 60%, var(--reevit-border));
|
|
675
805
|
}
|
|
676
806
|
|
|
677
807
|
.reevit-submit-btn:hover:not(:disabled) {
|
|
678
|
-
background:
|
|
679
|
-
border-color: var(--reevit-
|
|
808
|
+
background: var(--reevit-primary-hover);
|
|
809
|
+
border-color: var(--reevit-primary-hover);
|
|
680
810
|
}
|
|
681
811
|
|
|
682
812
|
.reevit-submit-btn:focus:not(:disabled) {
|
|
683
813
|
outline: none;
|
|
684
|
-
border-color: var(--reevit-
|
|
685
|
-
box-shadow: 0 0 0
|
|
814
|
+
border-color: var(--reevit-primary);
|
|
815
|
+
box-shadow: 0 0 0 3px color-mix(in srgb, var(--reevit-primary) 25%, transparent);
|
|
686
816
|
}
|
|
687
817
|
|
|
688
818
|
.reevit-submit-btn:active:not(:disabled) {
|
|
689
|
-
background:
|
|
819
|
+
background: var(--reevit-primary-hover);
|
|
690
820
|
transform: scale(0.98);
|
|
691
821
|
}
|
|
692
822
|
|
|
@@ -738,16 +868,16 @@
|
|
|
738
868
|
/* Dark mode button overrides for Stripe */
|
|
739
869
|
@media (prefers-color-scheme: dark) {
|
|
740
870
|
.reevit-submit-btn {
|
|
741
|
-
background:
|
|
742
|
-
color:
|
|
871
|
+
background: var(--reevit-primary);
|
|
872
|
+
color: var(--reevit-primary-foreground);
|
|
743
873
|
}
|
|
744
874
|
|
|
745
875
|
.reevit-submit-btn:hover:not(:disabled) {
|
|
746
|
-
background:
|
|
876
|
+
background: var(--reevit-primary-hover);
|
|
747
877
|
}
|
|
748
878
|
|
|
749
879
|
.reevit-submit-btn:active:not(:disabled) {
|
|
750
|
-
background:
|
|
880
|
+
background: var(--reevit-primary-hover);
|
|
751
881
|
}
|
|
752
882
|
}
|
|
753
883
|
|