@reevit/react 0.4.2 → 0.4.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/index.d.mts +19 -4
- package/dist/index.d.ts +19 -4
- package/dist/index.js +212 -178
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +212 -178
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +262 -67
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -98,12 +98,14 @@
|
|
|
98
98
|
box-shadow: var(--reevit-shadow);
|
|
99
99
|
width: 100%;
|
|
100
100
|
max-width: 440px;
|
|
101
|
+
min-height: 380px;
|
|
101
102
|
max-height: 90vh;
|
|
102
103
|
overflow: hidden;
|
|
103
104
|
display: flex;
|
|
104
105
|
flex-direction: column;
|
|
105
106
|
font-family: var(--reevit-font);
|
|
106
|
-
animation: reevit-slide-up 0.
|
|
107
|
+
animation: reevit-slide-up 0.3s cubic-bezier(0.22, 1, 0.36, 1);
|
|
108
|
+
transition: min-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
107
109
|
}
|
|
108
110
|
|
|
109
111
|
@keyframes reevit-slide-up {
|
|
@@ -317,85 +319,280 @@
|
|
|
317
319
|
color: var(--reevit-primary);
|
|
318
320
|
}
|
|
319
321
|
|
|
322
|
+
|
|
323
|
+
/* ===== ANIMATIONS ===== */
|
|
324
|
+
@keyframes reevit-fade-in {
|
|
325
|
+
from { opacity: 0; }
|
|
326
|
+
to { opacity: 1; }
|
|
327
|
+
}
|
|
328
|
+
|
|
329
|
+
@keyframes reevit-slide-up {
|
|
330
|
+
from {
|
|
331
|
+
opacity: 0;
|
|
332
|
+
transform: translateY(12px);
|
|
333
|
+
}
|
|
334
|
+
to {
|
|
335
|
+
opacity: 1;
|
|
336
|
+
transform: translateY(0);
|
|
337
|
+
}
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
@keyframes reevit-accordion-expand {
|
|
341
|
+
from {
|
|
342
|
+
opacity: 0;
|
|
343
|
+
max-height: 0;
|
|
344
|
+
transform: scale(0.98) translateY(-8px);
|
|
345
|
+
}
|
|
346
|
+
to {
|
|
347
|
+
opacity: 1;
|
|
348
|
+
max-height: 1000px;
|
|
349
|
+
transform: scale(1) translateY(0);
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
.reevit-animate-slide-up {
|
|
354
|
+
animation: reevit-slide-up 0.5s cubic-bezier(0.16, 1, 0.3, 1);
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.reevit-animate-fade-in {
|
|
358
|
+
animation: reevit-fade-in 0.4s ease-out;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
/* ===== PSP ACCORDION ===== */
|
|
362
|
+
.reevit-psp-accordion {
|
|
363
|
+
display: flex;
|
|
364
|
+
flex-direction: column;
|
|
365
|
+
gap: 0;
|
|
366
|
+
margin-bottom: 12px;
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
.reevit-psp-accordion:last-child {
|
|
370
|
+
margin-bottom: 0;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
.reevit-psp-option {
|
|
374
|
+
display: flex;
|
|
375
|
+
align-items: center;
|
|
376
|
+
gap: 14px;
|
|
377
|
+
padding: 18px 20px;
|
|
378
|
+
border-radius: 8px;
|
|
379
|
+
border: 1px solid var(--reevit-border);
|
|
380
|
+
background: var(--reevit-surface);
|
|
381
|
+
cursor: pointer;
|
|
382
|
+
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
383
|
+
text-align: left;
|
|
384
|
+
width: 100%;
|
|
385
|
+
position: relative;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.reevit-psp-option:hover:not(.reevit-psp-option--disabled) {
|
|
389
|
+
border-color: var(--reevit-primary);
|
|
390
|
+
background: color-mix(in srgb, var(--reevit-primary) 3%, var(--reevit-surface));
|
|
391
|
+
transform: translateY(-1px);
|
|
392
|
+
}
|
|
393
|
+
|
|
394
|
+
.reevit-psp-option--selected {
|
|
395
|
+
border-radius: 8px 8px 0 0 !important;
|
|
396
|
+
box-shadow: 0 4px 20px -10px rgba(0, 0, 0, 0.1);
|
|
397
|
+
border-color: var(--reevit-primary);
|
|
398
|
+
background: color-mix(in srgb, var(--reevit-primary) 5%, var(--reevit-surface));
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.reevit-psp-accordion__content {
|
|
402
|
+
padding: 24px 20px;
|
|
403
|
+
background: transparent;
|
|
404
|
+
border: 1px solid var(--reevit-border);
|
|
405
|
+
border-top: none;
|
|
406
|
+
border-radius: 0 0 8px 8px;
|
|
407
|
+
margin-top: -1px;
|
|
408
|
+
overflow: hidden;
|
|
409
|
+
animation: reevit-accordion-expand 0.6s cubic-bezier(0.16, 1, 0.3, 1);
|
|
410
|
+
transform-origin: top;
|
|
411
|
+
}
|
|
412
|
+
|
|
320
413
|
/* ===== PAYMENT METHOD SELECTOR ===== */
|
|
321
414
|
.reevit-method-selector {
|
|
322
|
-
margin-bottom:
|
|
415
|
+
margin-bottom: 24px;
|
|
416
|
+
width: 100%;
|
|
323
417
|
}
|
|
324
418
|
|
|
325
419
|
.reevit-method-selector__label {
|
|
326
|
-
font-size:
|
|
327
|
-
font-weight:
|
|
420
|
+
font-size: 13px;
|
|
421
|
+
font-weight: 600;
|
|
328
422
|
color: var(--reevit-text);
|
|
329
|
-
margin-bottom:
|
|
330
|
-
letter-spacing: 0.
|
|
423
|
+
margin-bottom: 16px;
|
|
424
|
+
letter-spacing: -0.01em;
|
|
425
|
+
opacity: 0.8;
|
|
426
|
+
}
|
|
427
|
+
|
|
428
|
+
.reevit-method-selector__options--grid {
|
|
429
|
+
display: grid;
|
|
430
|
+
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
|
431
|
+
gap: 12px;
|
|
432
|
+
width: 100%;
|
|
331
433
|
}
|
|
332
434
|
|
|
333
|
-
.reevit-method-selector__options {
|
|
435
|
+
.reevit-method-selector__options--list {
|
|
334
436
|
display: flex;
|
|
335
437
|
flex-direction: column;
|
|
336
|
-
gap:
|
|
438
|
+
gap: 12px;
|
|
439
|
+
width: 100%;
|
|
337
440
|
}
|
|
338
441
|
|
|
339
|
-
|
|
442
|
+
/* Grid layout styles */
|
|
443
|
+
.reevit-method-option--grid {
|
|
340
444
|
display: flex;
|
|
445
|
+
flex-direction: column;
|
|
341
446
|
align-items: center;
|
|
342
|
-
|
|
343
|
-
|
|
447
|
+
justify-content: center;
|
|
448
|
+
gap: 14px;
|
|
449
|
+
padding: 24px 16px;
|
|
450
|
+
min-height: 120px;
|
|
344
451
|
background: var(--reevit-surface);
|
|
345
452
|
border: 1px solid var(--reevit-border);
|
|
346
453
|
border-radius: var(--reevit-radius);
|
|
347
454
|
cursor: pointer;
|
|
348
|
-
transition: all 0.
|
|
349
|
-
text-align:
|
|
455
|
+
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
456
|
+
text-align: center;
|
|
350
457
|
width: 100%;
|
|
351
458
|
}
|
|
352
459
|
|
|
353
|
-
.reevit-method-option:hover {
|
|
354
|
-
border-color:
|
|
355
|
-
|
|
460
|
+
.reevit-method-option--grid:hover:not(.reevit-method-option--disabled) {
|
|
461
|
+
border-color: var(--reevit-primary);
|
|
462
|
+
transform: translateY(-3px);
|
|
463
|
+
box-shadow: 0 12px 24px -10px color-mix(in srgb, var(--reevit-primary) 30%, transparent);
|
|
356
464
|
}
|
|
357
465
|
|
|
358
|
-
.reevit-method-option--selected {
|
|
466
|
+
.reevit-method-option--grid.reevit-method-option--selected {
|
|
359
467
|
border-color: var(--reevit-primary);
|
|
360
|
-
|
|
468
|
+
background: color-mix(in srgb, var(--reevit-primary) 8%, var(--reevit-surface));
|
|
469
|
+
border-width: 2px;
|
|
470
|
+
box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--reevit-primary) 35%, transparent);
|
|
361
471
|
}
|
|
362
472
|
|
|
363
|
-
.reevit-method-option--
|
|
364
|
-
|
|
365
|
-
|
|
473
|
+
.reevit-method-option--grid .reevit-method-option__icon-wrapper {
|
|
474
|
+
display: flex;
|
|
475
|
+
align-items: center;
|
|
476
|
+
justify-content: center;
|
|
477
|
+
width: 56px;
|
|
478
|
+
height: 56px;
|
|
479
|
+
background: color-mix(in srgb, var(--reevit-text) 5%, transparent);
|
|
480
|
+
border-radius: 18px;
|
|
481
|
+
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
|
366
482
|
}
|
|
367
483
|
|
|
368
|
-
.reevit-method-option__icon {
|
|
369
|
-
|
|
484
|
+
.reevit-method-option--grid:hover .reevit-method-option__icon-wrapper {
|
|
485
|
+
transform: scale(1.15) rotate(5deg);
|
|
486
|
+
background: color-mix(in srgb, var(--reevit-primary) 15%, transparent);
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
.reevit-method-option--grid.reevit-method-option--selected .reevit-method-option__icon-wrapper {
|
|
490
|
+
background: color-mix(in srgb, var(--reevit-primary) 25%, transparent);
|
|
491
|
+
color: var(--reevit-primary);
|
|
492
|
+
transform: scale(1.1);
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
.reevit-method-option--grid .reevit-method-option__icon {
|
|
496
|
+
font-size: 36px;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
.reevit-method-option--grid .reevit-method-option__label {
|
|
500
|
+
font-size: 13px;
|
|
501
|
+
font-weight: 800;
|
|
502
|
+
color: var(--reevit-text);
|
|
503
|
+
text-transform: uppercase;
|
|
504
|
+
letter-spacing: 0.12em;
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
/* List layout styles */
|
|
508
|
+
.reevit-method-option--list {
|
|
509
|
+
display: flex;
|
|
510
|
+
flex-direction: row;
|
|
511
|
+
align-items: center;
|
|
512
|
+
gap: 16px;
|
|
513
|
+
padding: 18px 20px;
|
|
514
|
+
background: color-mix(in srgb, var(--reevit-surface) 92%, #ffffff);
|
|
515
|
+
border: 1px solid color-mix(in srgb, var(--reevit-border) 80%, transparent);
|
|
516
|
+
border-radius: 18px;
|
|
517
|
+
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
|
|
518
|
+
cursor: pointer;
|
|
519
|
+
transition: all 0.2s ease;
|
|
520
|
+
text-align: left;
|
|
521
|
+
width: 100%;
|
|
522
|
+
position: relative;
|
|
523
|
+
overflow: hidden;
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
.reevit-method-option--list:hover:not(.reevit-method-option--disabled) {
|
|
527
|
+
border-color: var(--reevit-primary);
|
|
528
|
+
background: var(--reevit-surface);
|
|
529
|
+
transform: translateY(-1px);
|
|
530
|
+
box-shadow: 0 10px 24px -18px rgba(15, 23, 42, 0.35);
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
.reevit-method-option--list.reevit-method-option--selected {
|
|
534
|
+
border-color: var(--reevit-primary);
|
|
535
|
+
background: color-mix(in srgb, var(--reevit-primary) 6%, var(--reevit-surface));
|
|
536
|
+
box-shadow: 0 12px 26px -20px rgba(15, 23, 42, 0.4);
|
|
537
|
+
}
|
|
538
|
+
|
|
539
|
+
.reevit-method-option--list .reevit-method-option__icon-wrapper {
|
|
540
|
+
display: flex;
|
|
541
|
+
align-items: center;
|
|
542
|
+
justify-content: center;
|
|
543
|
+
width: 50px;
|
|
544
|
+
height: 50px;
|
|
545
|
+
background: color-mix(in srgb, var(--reevit-text) 5%, transparent);
|
|
546
|
+
border-radius: 14px;
|
|
370
547
|
flex-shrink: 0;
|
|
371
|
-
|
|
548
|
+
transition: all 0.2s ease;
|
|
549
|
+
font-size: 24px;
|
|
550
|
+
}
|
|
551
|
+
|
|
552
|
+
.reevit-method-option--list:hover .reevit-method-option__icon-wrapper {
|
|
553
|
+
background: color-mix(in srgb, var(--reevit-primary) 12%, transparent);
|
|
554
|
+
transform: scale(1.03);
|
|
372
555
|
}
|
|
373
556
|
|
|
374
|
-
.reevit-method-
|
|
557
|
+
.reevit-method-option--list.reevit-method-option--selected .reevit-method-option__icon-wrapper {
|
|
558
|
+
background: color-mix(in srgb, var(--reevit-primary) 16%, transparent);
|
|
559
|
+
transform: scale(1.05);
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
.reevit-method-option--list .reevit-method-option__content {
|
|
375
563
|
flex: 1;
|
|
376
564
|
min-width: 0;
|
|
377
565
|
}
|
|
378
566
|
|
|
379
|
-
.reevit-method-option__label {
|
|
567
|
+
.reevit-method-option--list .reevit-method-option__label {
|
|
380
568
|
display: block;
|
|
381
|
-
font-size:
|
|
382
|
-
font-weight:
|
|
569
|
+
font-size: 16px;
|
|
570
|
+
font-weight: 700;
|
|
383
571
|
color: var(--reevit-text);
|
|
572
|
+
margin-bottom: 4px;
|
|
384
573
|
letter-spacing: -0.01em;
|
|
385
574
|
}
|
|
386
575
|
|
|
387
|
-
.reevit-method-option__description {
|
|
576
|
+
.reevit-method-option--list .reevit-method-option__description {
|
|
388
577
|
display: block;
|
|
389
|
-
font-size:
|
|
390
|
-
color: var(--reevit-text
|
|
391
|
-
|
|
392
|
-
|
|
578
|
+
font-size: 14px;
|
|
579
|
+
color: var(--reevit-text);
|
|
580
|
+
opacity: 0.6;
|
|
581
|
+
line-height: 1.4;
|
|
393
582
|
}
|
|
394
583
|
|
|
395
|
-
.reevit-method-
|
|
396
|
-
color: var(--reevit-
|
|
584
|
+
.reevit-method-option--list .reevit-method-option__chevron {
|
|
585
|
+
color: var(--reevit-primary);
|
|
586
|
+
opacity: 0;
|
|
587
|
+
transform: translateX(-10px);
|
|
588
|
+
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
397
589
|
flex-shrink: 0;
|
|
398
|
-
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
.reevit-method-option--list:hover .reevit-method-option__chevron,
|
|
593
|
+
.reevit-method-option--list.reevit-method-option--selected .reevit-method-option__chevron {
|
|
594
|
+
opacity: 1;
|
|
595
|
+
transform: translateX(0);
|
|
399
596
|
}
|
|
400
597
|
|
|
401
598
|
/* ===== MOBILE MONEY FORM ===== */
|
|
@@ -403,89 +600,87 @@
|
|
|
403
600
|
display: flex;
|
|
404
601
|
flex-direction: column;
|
|
405
602
|
gap: 16px;
|
|
603
|
+
width: 100%;
|
|
406
604
|
}
|
|
407
605
|
|
|
408
606
|
.reevit-momo-form__field {
|
|
409
607
|
display: flex;
|
|
410
608
|
flex-direction: column;
|
|
411
|
-
gap:
|
|
609
|
+
gap: 8px;
|
|
412
610
|
}
|
|
413
611
|
|
|
414
612
|
.reevit-momo-form__label {
|
|
415
|
-
font-size:
|
|
416
|
-
font-weight:
|
|
613
|
+
font-size: 13px;
|
|
614
|
+
font-weight: 600;
|
|
417
615
|
color: var(--reevit-text);
|
|
418
|
-
letter-spacing: 0.
|
|
616
|
+
letter-spacing: -0.01em;
|
|
419
617
|
}
|
|
420
618
|
|
|
421
619
|
.reevit-momo-form__input {
|
|
422
|
-
padding:
|
|
423
|
-
font-size:
|
|
620
|
+
padding: 14px 16px;
|
|
621
|
+
font-size: 15px;
|
|
424
622
|
border: 1px solid var(--reevit-border);
|
|
425
623
|
border-radius: var(--reevit-radius);
|
|
426
624
|
background: var(--reevit-surface);
|
|
427
625
|
color: var(--reevit-text);
|
|
428
|
-
transition: all 0.
|
|
626
|
+
transition: all 0.2s ease;
|
|
429
627
|
font-family: var(--reevit-font);
|
|
628
|
+
width: 100%;
|
|
430
629
|
}
|
|
431
630
|
|
|
432
631
|
.reevit-momo-form__input:focus {
|
|
433
632
|
outline: none;
|
|
434
|
-
border-color: var(--reevit-
|
|
435
|
-
|
|
633
|
+
border-color: var(--reevit-primary);
|
|
634
|
+
border-width: 1.5px;
|
|
635
|
+
box-shadow: 0 0 0 4px color-mix(in srgb, var(--reevit-primary) 10%, transparent);
|
|
436
636
|
}
|
|
437
637
|
|
|
438
638
|
.reevit-momo-form__input--error {
|
|
439
639
|
border-color: var(--reevit-error);
|
|
440
640
|
}
|
|
441
641
|
|
|
442
|
-
.reevit-momo-form__input--error:focus {
|
|
443
|
-
border-color: var(--reevit-error);
|
|
444
|
-
}
|
|
445
|
-
|
|
446
642
|
.reevit-momo-form__formatted {
|
|
447
|
-
font-size:
|
|
643
|
+
font-size: 12px;
|
|
448
644
|
color: var(--reevit-text-secondary);
|
|
645
|
+
font-family: var(--reevit-font-mono, monospace);
|
|
646
|
+
margin-top: 2px;
|
|
449
647
|
}
|
|
450
648
|
|
|
451
649
|
.reevit-momo-form__error {
|
|
452
|
-
font-size:
|
|
650
|
+
font-size: 12px;
|
|
453
651
|
color: var(--reevit-error);
|
|
652
|
+
margin-top: 4px;
|
|
454
653
|
}
|
|
455
654
|
|
|
456
655
|
.reevit-momo-form__networks {
|
|
457
656
|
display: flex;
|
|
458
|
-
gap:
|
|
657
|
+
gap: 10px;
|
|
459
658
|
}
|
|
460
659
|
|
|
461
660
|
.reevit-network-btn {
|
|
462
661
|
flex: 1;
|
|
463
|
-
padding:
|
|
662
|
+
padding: 12px;
|
|
464
663
|
font-size: 12px;
|
|
465
|
-
font-weight:
|
|
664
|
+
font-weight: 700;
|
|
466
665
|
border: 1px solid var(--reevit-border);
|
|
467
|
-
border-radius: var(--reevit-radius);
|
|
666
|
+
border-radius: var(--reevit-radius-sm);
|
|
468
667
|
background: transparent;
|
|
469
668
|
color: var(--reevit-text);
|
|
470
669
|
cursor: pointer;
|
|
471
|
-
transition: all 0.
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
.reevit-network-btn:hover {
|
|
476
|
-
border-color: var(--reevit-text);
|
|
477
|
-
background: transparent;
|
|
670
|
+
transition: all 0.2s ease;
|
|
671
|
+
text-transform: uppercase;
|
|
672
|
+
letter-spacing: 0.5px;
|
|
478
673
|
}
|
|
479
674
|
|
|
480
|
-
.reevit-network-btn:
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
box-shadow: 0 0 0 2px var(--reevit-border);
|
|
675
|
+
.reevit-network-btn:hover:not(:disabled) {
|
|
676
|
+
border-color: var(--reevit-text-secondary);
|
|
677
|
+
background: rgba(255, 255, 255, 0.02);
|
|
484
678
|
}
|
|
485
679
|
|
|
486
680
|
.reevit-network-btn--selected {
|
|
487
681
|
border-color: var(--network-color, var(--reevit-primary));
|
|
488
|
-
background: var(--network-color, var(--reevit-primary));
|
|
682
|
+
background: color-mix(in srgb, var(--network-color, var(--reevit-primary)) 10%, transparent);
|
|
683
|
+
color: var(--reevit-text);
|
|
489
684
|
color: #ffffff;
|
|
490
685
|
}
|
|
491
686
|
|