@metropolle/design-system 1.2026.0-1.7.15 → 1.2026.0-1.7.2346
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/css/components.css +601 -0
- package/dist/react/components/react/ProfileCard/ProfileCard.d.ts +55 -0
- package/dist/react/components/react/ProfileCard/ProfileCard.d.ts.map +1 -0
- package/dist/react/components/react/ProfileCard/index.d.ts +3 -0
- package/dist/react/components/react/ProfileCard/index.d.ts.map +1 -0
- package/dist/react/components/react/index.d.ts +2 -0
- package/dist/react/components/react/index.d.ts.map +1 -1
- package/dist/react/index.d.ts +2 -0
- package/dist/react/index.esm.js +120 -1
- package/dist/react/index.esm.js.map +1 -1
- package/dist/react/index.js +120 -0
- package/dist/react/index.js.map +1 -1
- package/package.json +1 -1
package/dist/css/components.css
CHANGED
|
@@ -3355,3 +3355,604 @@ html[data-theme="light"] .mds-settings-card {
|
|
|
3355
3355
|
background: var(--mds-liquid-gradient);
|
|
3356
3356
|
color: var(--mds-color-text-primary);
|
|
3357
3357
|
}
|
|
3358
|
+
/**
|
|
3359
|
+
* ProfileCard Component Styles
|
|
3360
|
+
* Passport-style profile card with Liquid Glass aesthetic
|
|
3361
|
+
* Supports light/dark themes via data-theme attribute
|
|
3362
|
+
*
|
|
3363
|
+
* @package @metropolle/design-system
|
|
3364
|
+
*/
|
|
3365
|
+
|
|
3366
|
+
/* =============================================================================
|
|
3367
|
+
Main Card
|
|
3368
|
+
============================================================================= */
|
|
3369
|
+
|
|
3370
|
+
.mds-profile-card {
|
|
3371
|
+
--mds-profile-card-photo-width: 280px;
|
|
3372
|
+
|
|
3373
|
+
position: relative;
|
|
3374
|
+
display: grid;
|
|
3375
|
+
grid-template-columns: var(--mds-profile-card-photo-width) 1fr;
|
|
3376
|
+
gap: 0;
|
|
3377
|
+
/* Liquid Glass */
|
|
3378
|
+
background: rgba(255, 255, 255, 0.03);
|
|
3379
|
+
backdrop-filter: blur(24px) saturate(140%);
|
|
3380
|
+
-webkit-backdrop-filter: blur(24px) saturate(140%);
|
|
3381
|
+
border-radius: 24px;
|
|
3382
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
3383
|
+
box-shadow:
|
|
3384
|
+
0 12px 40px rgba(0, 0, 0, 0.3),
|
|
3385
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
3386
|
+
overflow: visible;
|
|
3387
|
+
font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
|
|
3388
|
+
max-width: 800px;
|
|
3389
|
+
width: 100%;
|
|
3390
|
+
animation: mds-profile-card-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
3391
|
+
}
|
|
3392
|
+
|
|
3393
|
+
@keyframes mds-profile-card-reveal {
|
|
3394
|
+
from {
|
|
3395
|
+
opacity: 0;
|
|
3396
|
+
transform: translateY(20px) scale(0.98);
|
|
3397
|
+
}
|
|
3398
|
+
to {
|
|
3399
|
+
opacity: 1;
|
|
3400
|
+
transform: translateY(0) scale(1);
|
|
3401
|
+
}
|
|
3402
|
+
}
|
|
3403
|
+
|
|
3404
|
+
/* Light theme */
|
|
3405
|
+
html[data-theme="light"] .mds-profile-card {
|
|
3406
|
+
background: rgba(255, 255, 255, 0.15);
|
|
3407
|
+
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
3408
|
+
box-shadow:
|
|
3409
|
+
0 8px 32px rgba(0, 0, 0, 0.08),
|
|
3410
|
+
inset 0 1px 0 rgba(255, 255, 255, 1);
|
|
3411
|
+
}
|
|
3412
|
+
|
|
3413
|
+
/* =============================================================================
|
|
3414
|
+
Grain Overlay
|
|
3415
|
+
============================================================================= */
|
|
3416
|
+
|
|
3417
|
+
.mds-profile-card__grain {
|
|
3418
|
+
position: absolute;
|
|
3419
|
+
inset: 0;
|
|
3420
|
+
border-radius: 24px;
|
|
3421
|
+
opacity: 0.12;
|
|
3422
|
+
mix-blend-mode: overlay;
|
|
3423
|
+
pointer-events: none;
|
|
3424
|
+
z-index: 5;
|
|
3425
|
+
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
|
|
3426
|
+
}
|
|
3427
|
+
|
|
3428
|
+
html[data-theme="light"] .mds-profile-card__grain {
|
|
3429
|
+
opacity: 0.05;
|
|
3430
|
+
}
|
|
3431
|
+
|
|
3432
|
+
/* =============================================================================
|
|
3433
|
+
Photo Section
|
|
3434
|
+
============================================================================= */
|
|
3435
|
+
|
|
3436
|
+
.mds-profile-card__photo {
|
|
3437
|
+
position: relative;
|
|
3438
|
+
overflow: hidden;
|
|
3439
|
+
z-index: 2;
|
|
3440
|
+
border-radius: 24px 0 0 24px;
|
|
3441
|
+
min-height: 272px;
|
|
3442
|
+
background-color: rgba(26, 26, 46, 0.1);
|
|
3443
|
+
}
|
|
3444
|
+
|
|
3445
|
+
html[data-theme="light"] .mds-profile-card__photo {
|
|
3446
|
+
background-color: rgba(255, 255, 255, 0.05);
|
|
3447
|
+
}
|
|
3448
|
+
|
|
3449
|
+
.mds-profile-card__avatar {
|
|
3450
|
+
width: 100%;
|
|
3451
|
+
height: 100%;
|
|
3452
|
+
-o-object-fit: cover;
|
|
3453
|
+
object-fit: cover;
|
|
3454
|
+
-o-object-position: center top;
|
|
3455
|
+
object-position: center top;
|
|
3456
|
+
display: block;
|
|
3457
|
+
}
|
|
3458
|
+
|
|
3459
|
+
.mds-profile-card__photo-slot {
|
|
3460
|
+
width: 100%;
|
|
3461
|
+
height: 100%;
|
|
3462
|
+
display: flex;
|
|
3463
|
+
align-items: center;
|
|
3464
|
+
justify-content: center;
|
|
3465
|
+
min-height: 272px;
|
|
3466
|
+
}
|
|
3467
|
+
|
|
3468
|
+
/* =============================================================================
|
|
3469
|
+
Content Section
|
|
3470
|
+
============================================================================= */
|
|
3471
|
+
|
|
3472
|
+
.mds-profile-card__content {
|
|
3473
|
+
position: relative;
|
|
3474
|
+
display: flex;
|
|
3475
|
+
flex-direction: column;
|
|
3476
|
+
justify-content: center;
|
|
3477
|
+
align-items: flex-start;
|
|
3478
|
+
padding: 27px;
|
|
3479
|
+
border-left: 1px solid rgba(255, 255, 255, 0.06);
|
|
3480
|
+
z-index: 2;
|
|
3481
|
+
gap: 16px;
|
|
3482
|
+
}
|
|
3483
|
+
|
|
3484
|
+
html[data-theme="light"] .mds-profile-card__content {
|
|
3485
|
+
border-left-color: rgba(0, 0, 0, 0.04);
|
|
3486
|
+
}
|
|
3487
|
+
|
|
3488
|
+
/* =============================================================================
|
|
3489
|
+
Identity Block
|
|
3490
|
+
============================================================================= */
|
|
3491
|
+
|
|
3492
|
+
.mds-profile-card__identity {
|
|
3493
|
+
width: 100%;
|
|
3494
|
+
margin-bottom: 20px;
|
|
3495
|
+
}
|
|
3496
|
+
|
|
3497
|
+
.mds-profile-card__name {
|
|
3498
|
+
font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
|
|
3499
|
+
font-size: 32px;
|
|
3500
|
+
font-weight: normal;
|
|
3501
|
+
color: var(--mds-color-text-primary, #ffffff);
|
|
3502
|
+
margin: 0 0 5px 0;
|
|
3503
|
+
letter-spacing: 0.06em;
|
|
3504
|
+
text-transform: uppercase;
|
|
3505
|
+
line-height: 1.2;
|
|
3506
|
+
}
|
|
3507
|
+
|
|
3508
|
+
.mds-profile-card__profession {
|
|
3509
|
+
font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
|
|
3510
|
+
font-size: 18px;
|
|
3511
|
+
color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.7));
|
|
3512
|
+
letter-spacing: 0.1em;
|
|
3513
|
+
text-transform: uppercase;
|
|
3514
|
+
margin: 5px 0 0 0;
|
|
3515
|
+
}
|
|
3516
|
+
|
|
3517
|
+
.mds-profile-card__username {
|
|
3518
|
+
font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
|
|
3519
|
+
font-size: 15px;
|
|
3520
|
+
color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
|
|
3521
|
+
letter-spacing: 0.06em;
|
|
3522
|
+
margin: 0;
|
|
3523
|
+
}
|
|
3524
|
+
|
|
3525
|
+
/* =============================================================================
|
|
3526
|
+
Details Block
|
|
3527
|
+
============================================================================= */
|
|
3528
|
+
|
|
3529
|
+
.mds-profile-card__details {
|
|
3530
|
+
width: 100%;
|
|
3531
|
+
}
|
|
3532
|
+
|
|
3533
|
+
.mds-profile-card__location {
|
|
3534
|
+
font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
|
|
3535
|
+
font-size: 18px;
|
|
3536
|
+
color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
|
|
3537
|
+
letter-spacing: 0.06em;
|
|
3538
|
+
margin: 0 0 5px 0;
|
|
3539
|
+
}
|
|
3540
|
+
|
|
3541
|
+
.mds-profile-card__username-detail {
|
|
3542
|
+
font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
|
|
3543
|
+
font-size: 18px;
|
|
3544
|
+
color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
|
|
3545
|
+
letter-spacing: 0.06em;
|
|
3546
|
+
}
|
|
3547
|
+
|
|
3548
|
+
.mds-profile-card__email {
|
|
3549
|
+
font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
|
|
3550
|
+
font-size: 14px;
|
|
3551
|
+
color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.7));
|
|
3552
|
+
letter-spacing: 0.04em;
|
|
3553
|
+
margin: 0 0 4px 0;
|
|
3554
|
+
}
|
|
3555
|
+
|
|
3556
|
+
.mds-profile-card__member {
|
|
3557
|
+
font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
|
|
3558
|
+
font-size: 11px;
|
|
3559
|
+
color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.4));
|
|
3560
|
+
letter-spacing: 0.08em;
|
|
3561
|
+
text-transform: uppercase;
|
|
3562
|
+
}
|
|
3563
|
+
|
|
3564
|
+
/* =============================================================================
|
|
3565
|
+
Verification Section (Compact Variant)
|
|
3566
|
+
============================================================================= */
|
|
3567
|
+
|
|
3568
|
+
.mds-profile-card__verification {
|
|
3569
|
+
display: flex;
|
|
3570
|
+
align-items: center;
|
|
3571
|
+
gap: 12px;
|
|
3572
|
+
margin-top: 8px;
|
|
3573
|
+
}
|
|
3574
|
+
|
|
3575
|
+
.mds-profile-card__verified-badge {
|
|
3576
|
+
display: inline-flex;
|
|
3577
|
+
align-items: center;
|
|
3578
|
+
gap: 6px;
|
|
3579
|
+
padding: 6px 12px;
|
|
3580
|
+
background: rgba(0, 212, 170, 0.1);
|
|
3581
|
+
border: 1px solid rgba(0, 212, 170, 0.2);
|
|
3582
|
+
border-radius: 100px;
|
|
3583
|
+
font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
|
|
3584
|
+
font-size: 10px;
|
|
3585
|
+
letter-spacing: 0.1em;
|
|
3586
|
+
text-transform: uppercase;
|
|
3587
|
+
color: #00d4aa;
|
|
3588
|
+
cursor: pointer;
|
|
3589
|
+
transition: all 0.2s ease;
|
|
3590
|
+
}
|
|
3591
|
+
|
|
3592
|
+
.mds-profile-card__verified-badge:hover {
|
|
3593
|
+
background: rgba(0, 212, 170, 0.15);
|
|
3594
|
+
border-color: rgba(0, 212, 170, 0.3);
|
|
3595
|
+
}
|
|
3596
|
+
|
|
3597
|
+
.mds-profile-card__verified-badge svg {
|
|
3598
|
+
width: 14px;
|
|
3599
|
+
height: 14px;
|
|
3600
|
+
fill: currentColor;
|
|
3601
|
+
}
|
|
3602
|
+
|
|
3603
|
+
.mds-profile-card__dots {
|
|
3604
|
+
display: flex;
|
|
3605
|
+
gap: 6px;
|
|
3606
|
+
}
|
|
3607
|
+
|
|
3608
|
+
.mds-profile-card__dot {
|
|
3609
|
+
width: 6px;
|
|
3610
|
+
height: 6px;
|
|
3611
|
+
border-radius: 50%;
|
|
3612
|
+
background: rgba(255, 255, 255, 0.15);
|
|
3613
|
+
transition: all 0.3s ease;
|
|
3614
|
+
}
|
|
3615
|
+
|
|
3616
|
+
.mds-profile-card__dot.active {
|
|
3617
|
+
background: #00d4aa;
|
|
3618
|
+
box-shadow: 0 0 8px rgba(0, 212, 170, 0.4);
|
|
3619
|
+
}
|
|
3620
|
+
|
|
3621
|
+
html[data-theme="light"] .mds-profile-card__dot {
|
|
3622
|
+
background: rgba(0, 0, 0, 0.15);
|
|
3623
|
+
}
|
|
3624
|
+
|
|
3625
|
+
/* =============================================================================
|
|
3626
|
+
Social Section (Full Variant)
|
|
3627
|
+
============================================================================= */
|
|
3628
|
+
|
|
3629
|
+
.mds-profile-card__social {
|
|
3630
|
+
position: absolute;
|
|
3631
|
+
bottom: 27px;
|
|
3632
|
+
right: 27px;
|
|
3633
|
+
z-index: 10;
|
|
3634
|
+
}
|
|
3635
|
+
|
|
3636
|
+
.mds-profile-card__social-trigger {
|
|
3637
|
+
width: 22px;
|
|
3638
|
+
height: 22px;
|
|
3639
|
+
display: flex;
|
|
3640
|
+
align-items: center;
|
|
3641
|
+
justify-content: center;
|
|
3642
|
+
background: transparent;
|
|
3643
|
+
border: none;
|
|
3644
|
+
color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
|
|
3645
|
+
cursor: pointer;
|
|
3646
|
+
transition: all 0.2s ease;
|
|
3647
|
+
padding: 0;
|
|
3648
|
+
}
|
|
3649
|
+
|
|
3650
|
+
.mds-profile-card__social-trigger svg {
|
|
3651
|
+
width: 20px;
|
|
3652
|
+
height: 20px;
|
|
3653
|
+
fill: currentColor;
|
|
3654
|
+
transition: transform 0.3s ease;
|
|
3655
|
+
}
|
|
3656
|
+
|
|
3657
|
+
.mds-profile-card__social-trigger:hover {
|
|
3658
|
+
color: var(--mds-color-text-primary, #ffffff);
|
|
3659
|
+
}
|
|
3660
|
+
|
|
3661
|
+
.mds-profile-card__social-trigger:hover svg {
|
|
3662
|
+
transform: rotate(90deg);
|
|
3663
|
+
}
|
|
3664
|
+
|
|
3665
|
+
.mds-profile-card__social-popup {
|
|
3666
|
+
position: absolute;
|
|
3667
|
+
bottom: 0;
|
|
3668
|
+
right: 36px;
|
|
3669
|
+
display: flex;
|
|
3670
|
+
gap: 8px;
|
|
3671
|
+
padding: 12px;
|
|
3672
|
+
/* Liquid Glass popup */
|
|
3673
|
+
background: rgba(20, 20, 30, 0.75);
|
|
3674
|
+
backdrop-filter: blur(16px) saturate(140%);
|
|
3675
|
+
-webkit-backdrop-filter: blur(16px) saturate(140%);
|
|
3676
|
+
border-radius: 14px;
|
|
3677
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
3678
|
+
box-shadow:
|
|
3679
|
+
0 8px 24px rgba(0, 0, 0, 0.25),
|
|
3680
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
3681
|
+
z-index: 20;
|
|
3682
|
+
}
|
|
3683
|
+
|
|
3684
|
+
html[data-theme="light"] .mds-profile-card__social-popup {
|
|
3685
|
+
background: rgba(255, 255, 255, 0.7);
|
|
3686
|
+
border: 1px solid rgba(255, 255, 255, 0.9);
|
|
3687
|
+
box-shadow:
|
|
3688
|
+
0 8px 24px rgba(0, 0, 0, 0.08),
|
|
3689
|
+
inset 0 1px 0 rgba(255, 255, 255, 1);
|
|
3690
|
+
}
|
|
3691
|
+
|
|
3692
|
+
.mds-profile-card__social-link {
|
|
3693
|
+
width: 38px;
|
|
3694
|
+
height: 38px;
|
|
3695
|
+
display: flex;
|
|
3696
|
+
align-items: center;
|
|
3697
|
+
justify-content: center;
|
|
3698
|
+
background: rgba(255, 255, 255, 0.05);
|
|
3699
|
+
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
3700
|
+
border-radius: 10px;
|
|
3701
|
+
color: rgba(255, 255, 255, 0.7);
|
|
3702
|
+
text-decoration: none;
|
|
3703
|
+
transition: all 0.2s ease;
|
|
3704
|
+
}
|
|
3705
|
+
|
|
3706
|
+
.mds-profile-card__social-link:hover {
|
|
3707
|
+
background: rgba(255, 255, 255, 0.1);
|
|
3708
|
+
color: #ffffff;
|
|
3709
|
+
}
|
|
3710
|
+
|
|
3711
|
+
html[data-theme="light"] .mds-profile-card__social-link {
|
|
3712
|
+
background: rgba(0, 0, 0, 0.05);
|
|
3713
|
+
border-color: rgba(0, 0, 0, 0.08);
|
|
3714
|
+
color: rgba(0, 0, 0, 0.7);
|
|
3715
|
+
}
|
|
3716
|
+
|
|
3717
|
+
html[data-theme="light"] .mds-profile-card__social-link:hover {
|
|
3718
|
+
background: rgba(0, 0, 0, 0.1);
|
|
3719
|
+
color: #000000;
|
|
3720
|
+
}
|
|
3721
|
+
|
|
3722
|
+
.mds-profile-card__social-link svg {
|
|
3723
|
+
width: 18px;
|
|
3724
|
+
height: 18px;
|
|
3725
|
+
fill: currentColor;
|
|
3726
|
+
}
|
|
3727
|
+
|
|
3728
|
+
/* =============================================================================
|
|
3729
|
+
Dynamic Info Group (Full Variant)
|
|
3730
|
+
============================================================================= */
|
|
3731
|
+
|
|
3732
|
+
.mds-profile-card__dynamic-group {
|
|
3733
|
+
position: absolute;
|
|
3734
|
+
right: 27px;
|
|
3735
|
+
top: 50%;
|
|
3736
|
+
transform: translateY(-40%);
|
|
3737
|
+
display: flex;
|
|
3738
|
+
align-items: center;
|
|
3739
|
+
gap: 10px;
|
|
3740
|
+
z-index: 10;
|
|
3741
|
+
}
|
|
3742
|
+
|
|
3743
|
+
.mds-profile-card__dynamic-info {
|
|
3744
|
+
font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
|
|
3745
|
+
font-size: 11px;
|
|
3746
|
+
color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
|
|
3747
|
+
letter-spacing: 0.08em;
|
|
3748
|
+
text-transform: uppercase;
|
|
3749
|
+
}
|
|
3750
|
+
|
|
3751
|
+
/* =============================================================================
|
|
3752
|
+
Verified Section (Full Variant)
|
|
3753
|
+
============================================================================= */
|
|
3754
|
+
|
|
3755
|
+
.mds-profile-card__verified-section {
|
|
3756
|
+
position: relative;
|
|
3757
|
+
}
|
|
3758
|
+
|
|
3759
|
+
.mds-profile-card__verified-trigger {
|
|
3760
|
+
width: 22px;
|
|
3761
|
+
height: 22px;
|
|
3762
|
+
display: flex;
|
|
3763
|
+
align-items: center;
|
|
3764
|
+
justify-content: center;
|
|
3765
|
+
background: transparent;
|
|
3766
|
+
border: none;
|
|
3767
|
+
color: rgba(255, 255, 255, 0.7);
|
|
3768
|
+
cursor: pointer;
|
|
3769
|
+
transition: all 0.2s ease;
|
|
3770
|
+
padding: 0;
|
|
3771
|
+
}
|
|
3772
|
+
|
|
3773
|
+
html[data-theme="light"] .mds-profile-card__verified-trigger {
|
|
3774
|
+
color: rgba(0, 0, 0, 0.6);
|
|
3775
|
+
}
|
|
3776
|
+
|
|
3777
|
+
.mds-profile-card__verified-trigger:hover {
|
|
3778
|
+
color: var(--mds-color-text-primary, #ffffff);
|
|
3779
|
+
}
|
|
3780
|
+
|
|
3781
|
+
.mds-profile-card__verified-trigger svg {
|
|
3782
|
+
width: 18px;
|
|
3783
|
+
height: 18px;
|
|
3784
|
+
fill: currentColor;
|
|
3785
|
+
}
|
|
3786
|
+
|
|
3787
|
+
.mds-profile-card__verified-popup {
|
|
3788
|
+
position: absolute;
|
|
3789
|
+
top: calc(100% + 12px);
|
|
3790
|
+
right: 0;
|
|
3791
|
+
padding: 16px;
|
|
3792
|
+
/* Liquid Glass popup */
|
|
3793
|
+
background: rgba(20, 20, 30, 0.75);
|
|
3794
|
+
backdrop-filter: blur(16px) saturate(140%);
|
|
3795
|
+
-webkit-backdrop-filter: blur(16px) saturate(140%);
|
|
3796
|
+
border-radius: 14px;
|
|
3797
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
3798
|
+
box-shadow:
|
|
3799
|
+
0 8px 24px rgba(0, 0, 0, 0.25),
|
|
3800
|
+
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
|
3801
|
+
min-width: 180px;
|
|
3802
|
+
z-index: 20;
|
|
3803
|
+
}
|
|
3804
|
+
|
|
3805
|
+
html[data-theme="light"] .mds-profile-card__verified-popup {
|
|
3806
|
+
background: rgba(255, 255, 255, 0.7);
|
|
3807
|
+
border: 1px solid rgba(255, 255, 255, 0.9);
|
|
3808
|
+
box-shadow:
|
|
3809
|
+
0 8px 24px rgba(0, 0, 0, 0.08),
|
|
3810
|
+
inset 0 1px 0 rgba(255, 255, 255, 1);
|
|
3811
|
+
}
|
|
3812
|
+
|
|
3813
|
+
.mds-profile-card__verified-header {
|
|
3814
|
+
font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
|
|
3815
|
+
font-size: 12px;
|
|
3816
|
+
font-weight: bold;
|
|
3817
|
+
color: #00d4aa;
|
|
3818
|
+
letter-spacing: 0.08em;
|
|
3819
|
+
text-transform: uppercase;
|
|
3820
|
+
margin-bottom: 14px;
|
|
3821
|
+
white-space: nowrap;
|
|
3822
|
+
}
|
|
3823
|
+
|
|
3824
|
+
.mds-profile-card__verified-stats {
|
|
3825
|
+
display: flex;
|
|
3826
|
+
flex-direction: column;
|
|
3827
|
+
gap: 10px;
|
|
3828
|
+
}
|
|
3829
|
+
|
|
3830
|
+
.mds-profile-card__stat-item {
|
|
3831
|
+
display: flex;
|
|
3832
|
+
justify-content: space-between;
|
|
3833
|
+
align-items: center;
|
|
3834
|
+
gap: 20px;
|
|
3835
|
+
}
|
|
3836
|
+
|
|
3837
|
+
.mds-profile-card__stat-label {
|
|
3838
|
+
font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
|
|
3839
|
+
font-size: 11px;
|
|
3840
|
+
color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
|
|
3841
|
+
letter-spacing: 0.06em;
|
|
3842
|
+
}
|
|
3843
|
+
|
|
3844
|
+
.mds-profile-card__stat-value {
|
|
3845
|
+
font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
|
|
3846
|
+
font-size: 11px;
|
|
3847
|
+
letter-spacing: 0.06em;
|
|
3848
|
+
text-transform: uppercase;
|
|
3849
|
+
color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
|
|
3850
|
+
}
|
|
3851
|
+
|
|
3852
|
+
.mds-profile-card__stat-value--verified {
|
|
3853
|
+
color: #00d4aa;
|
|
3854
|
+
}
|
|
3855
|
+
|
|
3856
|
+
.mds-profile-card__verified-date {
|
|
3857
|
+
font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
|
|
3858
|
+
font-size: 10px;
|
|
3859
|
+
color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.4));
|
|
3860
|
+
letter-spacing: 0.06em;
|
|
3861
|
+
text-transform: uppercase;
|
|
3862
|
+
margin-top: 14px;
|
|
3863
|
+
padding-top: 10px;
|
|
3864
|
+
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
|
3865
|
+
}
|
|
3866
|
+
|
|
3867
|
+
html[data-theme="light"] .mds-profile-card__verified-date {
|
|
3868
|
+
border-top-color: rgba(0, 0, 0, 0.06);
|
|
3869
|
+
}
|
|
3870
|
+
|
|
3871
|
+
/* Info dots (for rotating info) */
|
|
3872
|
+
.mds-profile-card__info-dots {
|
|
3873
|
+
display: flex;
|
|
3874
|
+
flex-direction: column;
|
|
3875
|
+
gap: 10px;
|
|
3876
|
+
}
|
|
3877
|
+
|
|
3878
|
+
.mds-profile-card__info-dot {
|
|
3879
|
+
width: 5px;
|
|
3880
|
+
height: 5px;
|
|
3881
|
+
border-radius: 50%;
|
|
3882
|
+
background: rgba(255, 255, 255, 0.2);
|
|
3883
|
+
transition: all 0.3s ease;
|
|
3884
|
+
}
|
|
3885
|
+
|
|
3886
|
+
.mds-profile-card__info-dot.active {
|
|
3887
|
+
background: rgba(255, 255, 255, 0.8);
|
|
3888
|
+
transform: scale(1.3);
|
|
3889
|
+
}
|
|
3890
|
+
|
|
3891
|
+
html[data-theme="light"] .mds-profile-card__info-dot {
|
|
3892
|
+
background: rgba(0, 0, 0, 0.2);
|
|
3893
|
+
}
|
|
3894
|
+
|
|
3895
|
+
html[data-theme="light"] .mds-profile-card__info-dot.active {
|
|
3896
|
+
background: rgba(0, 0, 0, 0.7);
|
|
3897
|
+
}
|
|
3898
|
+
|
|
3899
|
+
/* =============================================================================
|
|
3900
|
+
Responsive
|
|
3901
|
+
============================================================================= */
|
|
3902
|
+
|
|
3903
|
+
@media (max-width: 700px) {
|
|
3904
|
+
.mds-profile-card {
|
|
3905
|
+
grid-template-columns: 1fr;
|
|
3906
|
+
max-width: 400px;
|
|
3907
|
+
}
|
|
3908
|
+
|
|
3909
|
+
.mds-profile-card__photo {
|
|
3910
|
+
border-radius: 24px 24px 0 0;
|
|
3911
|
+
min-height: 280px;
|
|
3912
|
+
}
|
|
3913
|
+
|
|
3914
|
+
.mds-profile-card__content {
|
|
3915
|
+
border-left: none;
|
|
3916
|
+
border-top: 1px solid rgba(255, 255, 255, 0.06);
|
|
3917
|
+
padding: 20px;
|
|
3918
|
+
align-items: center;
|
|
3919
|
+
text-align: center;
|
|
3920
|
+
}
|
|
3921
|
+
|
|
3922
|
+
html[data-theme="light"] .mds-profile-card__content {
|
|
3923
|
+
border-top-color: rgba(0, 0, 0, 0.04);
|
|
3924
|
+
}
|
|
3925
|
+
|
|
3926
|
+
.mds-profile-card__identity,
|
|
3927
|
+
.mds-profile-card__details {
|
|
3928
|
+
text-align: center;
|
|
3929
|
+
}
|
|
3930
|
+
|
|
3931
|
+
.mds-profile-card__verification {
|
|
3932
|
+
justify-content: center;
|
|
3933
|
+
}
|
|
3934
|
+
|
|
3935
|
+
.mds-profile-card__dynamic-group {
|
|
3936
|
+
position: static;
|
|
3937
|
+
transform: none;
|
|
3938
|
+
justify-content: center;
|
|
3939
|
+
margin-top: 16px;
|
|
3940
|
+
}
|
|
3941
|
+
|
|
3942
|
+
.mds-profile-card__social {
|
|
3943
|
+
position: static;
|
|
3944
|
+
margin-top: 16px;
|
|
3945
|
+
}
|
|
3946
|
+
}
|
|
3947
|
+
|
|
3948
|
+
@media (max-width: 480px) {
|
|
3949
|
+
.mds-profile-card__name {
|
|
3950
|
+
font-size: 24px;
|
|
3951
|
+
}
|
|
3952
|
+
|
|
3953
|
+
.mds-profile-card__profession,
|
|
3954
|
+
.mds-profile-card__location,
|
|
3955
|
+
.mds-profile-card__username-detail {
|
|
3956
|
+
font-size: 14px;
|
|
3957
|
+
}
|
|
3958
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* ProfileCard Component
|
|
3
|
+
* Passport-style profile card with Liquid Glass aesthetic
|
|
4
|
+
* Supports light/dark themes via CSS variables
|
|
5
|
+
*
|
|
6
|
+
* @package @metropolle/design-system
|
|
7
|
+
*/
|
|
8
|
+
import React from 'react';
|
|
9
|
+
export interface ProfileCardUser {
|
|
10
|
+
identity_id: string;
|
|
11
|
+
full_name: string;
|
|
12
|
+
username: string;
|
|
13
|
+
created_at: string;
|
|
14
|
+
verified: number;
|
|
15
|
+
email?: string;
|
|
16
|
+
profession_code?: string;
|
|
17
|
+
profession_name?: string;
|
|
18
|
+
city_code?: string;
|
|
19
|
+
city_name?: string;
|
|
20
|
+
state_code?: string;
|
|
21
|
+
state_name?: string;
|
|
22
|
+
country_code?: string;
|
|
23
|
+
country_name?: string;
|
|
24
|
+
photo_url_thumbnail?: string;
|
|
25
|
+
photo_url_medium?: string;
|
|
26
|
+
photo_url_full?: string;
|
|
27
|
+
}
|
|
28
|
+
export interface ProfileCardProps {
|
|
29
|
+
/** User data to display */
|
|
30
|
+
user: ProfileCardUser;
|
|
31
|
+
/** Card variant - 'full' shows all fields, 'compact' shows minimal */
|
|
32
|
+
variant?: 'full' | 'compact';
|
|
33
|
+
/** Photo section width in pixels (default: 280 for full, 200 for compact) */
|
|
34
|
+
photoWidth?: number;
|
|
35
|
+
/** Show social links section */
|
|
36
|
+
showSocial?: boolean;
|
|
37
|
+
/** Social links (optional) */
|
|
38
|
+
socialLinks?: {
|
|
39
|
+
instagram?: string;
|
|
40
|
+
x?: string;
|
|
41
|
+
linkedin?: string;
|
|
42
|
+
website?: string;
|
|
43
|
+
};
|
|
44
|
+
/** Show rotating info text */
|
|
45
|
+
showRotatingInfo?: boolean;
|
|
46
|
+
/** Custom photo element (for photo upload) */
|
|
47
|
+
photoSlot?: React.ReactNode;
|
|
48
|
+
/** Additional CSS class */
|
|
49
|
+
className?: string;
|
|
50
|
+
/** Callback when social button is clicked */
|
|
51
|
+
onSocialClick?: () => void;
|
|
52
|
+
}
|
|
53
|
+
export declare function ProfileCard({ user, variant, photoWidth, showSocial, socialLinks, showRotatingInfo, photoSlot, className, onSocialClick, }: ProfileCardProps): import("react/jsx-runtime").JSX.Element;
|
|
54
|
+
export default ProfileCard;
|
|
55
|
+
//# sourceMappingURL=ProfileCard.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ProfileCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/ProfileCard/ProfileCard.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAO3D,MAAM,WAAW,eAAe;IAE9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IAGjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,IAAI,EAAE,eAAe,CAAC;IAEtB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE7B,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,gCAAgC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,8BAA8B;IAC9B,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IAEF,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAgGD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAgB,EAChB,UAAU,EACV,UAAkB,EAClB,WAAW,EACX,gBAAwB,EACxB,SAAS,EACT,SAAc,EACd,aAAa,GACd,EAAE,gBAAgB,2CAwOlB;AAED,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/ProfileCard/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACzF,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { GlassCard, type GlassCardProps } from './GlassCard';
|
|
2
|
+
export { ProfileCard, type ProfileCardProps, type ProfileCardUser } from './ProfileCard';
|
|
2
3
|
export { Typography, BrandLogo, type TypographyProps, type BrandLogoProps } from './Typography';
|
|
3
4
|
export { Button, type ButtonProps } from './Button';
|
|
4
5
|
export { Select, type SelectProps, type SelectOption } from './Select';
|
|
@@ -28,4 +29,5 @@ export * from './FormSection';
|
|
|
28
29
|
export * from './InfoBox';
|
|
29
30
|
export * from './FormModal';
|
|
30
31
|
export * from './DetailModal';
|
|
32
|
+
export * from './ProfileCard';
|
|
31
33
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/react/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EACL,UAAU,EACV,SAAS,EACT,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,SAAS,EACT,aAAa,EACb,WAAW,EACX,cAAc,EACd,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,WAAW,EACjB,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGnE,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAGpC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/react/index.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AACzF,OAAO,EACL,UAAU,EACV,SAAS,EACT,KAAK,eAAe,EACpB,KAAK,cAAc,EACpB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,YAAY,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EACL,SAAS,EACT,aAAa,EACb,WAAW,EACX,cAAc,EACd,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,WAAW,EACjB,MAAM,aAAa,CAAC;AAGrB,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC;AACnF,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,aAAa,CAAC;AAC7D,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGnE,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAGpC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}
|
package/dist/react/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { GlassCard, type GlassCardProps } from './components/react/GlassCard';
|
|
2
|
+
export { ProfileCard, type ProfileCardProps, type ProfileCardUser } from './components/react/ProfileCard';
|
|
2
3
|
export { Typography, BrandLogo, type TypographyProps, type BrandLogoProps } from './components/react/Typography';
|
|
3
4
|
export { Button, type ButtonProps } from './components/react/Button';
|
|
4
5
|
export { Select, type SelectProps, type SelectOption } from './components/react/Select';
|
|
@@ -28,4 +29,5 @@ export * from './components/react/FormSection';
|
|
|
28
29
|
export * from './components/react/InfoBox';
|
|
29
30
|
export * from './components/react/FormModal';
|
|
30
31
|
export * from './components/react/DetailModal';
|
|
32
|
+
export * from './components/react/ProfileCard';
|
|
31
33
|
//# sourceMappingURL=index.d.ts.map
|