@metropolle/design-system 1.2026.0-1.24.1854 → 1.2026.0-1.24.2224
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 +221 -0
- package/dist/react/components/react/ProfileCard/ProfileCard.d.ts +2 -5
- package/dist/react/components/react/ProfileCard/ProfileCard.d.ts.map +1 -1
- package/dist/react/components/react/VerificationScore/VerificationScore.d.ts +43 -0
- package/dist/react/components/react/VerificationScore/VerificationScore.d.ts.map +1 -0
- package/dist/react/components/react/VerificationScore/index.d.ts +3 -0
- package/dist/react/components/react/VerificationScore/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 +45 -11
- package/dist/react/index.esm.js.map +1 -1
- package/dist/react/index.js +45 -10
- package/dist/react/index.js.map +1 -1
- package/package.json +1 -1
package/dist/css/components.css
CHANGED
|
@@ -4414,3 +4414,224 @@ html[data-theme="light"] .mds-verification-check-item--passed .mds-verification-
|
|
|
4414
4414
|
background: rgba(0, 180, 140, 0.15);
|
|
4415
4415
|
color: #00b48c;
|
|
4416
4416
|
}
|
|
4417
|
+
|
|
4418
|
+
/* =============================================================================
|
|
4419
|
+
FEAT-090: VerificationScoreCard Component (Unified)
|
|
4420
|
+
Used by ProfileCard popup, @front settings, @back UserIdentityModal
|
|
4421
|
+
============================================================================= */
|
|
4422
|
+
|
|
4423
|
+
/* Compact Popup Variant (ProfileCard) */
|
|
4424
|
+
.mds-verification-popup {
|
|
4425
|
+
min-width: 200px;
|
|
4426
|
+
}
|
|
4427
|
+
|
|
4428
|
+
.mds-verification-popup__header {
|
|
4429
|
+
font-size: 0.875rem;
|
|
4430
|
+
font-weight: 600;
|
|
4431
|
+
color: var(--mds-color-text-primary, #fff);
|
|
4432
|
+
padding-bottom: 12px;
|
|
4433
|
+
margin-bottom: 12px;
|
|
4434
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
4435
|
+
}
|
|
4436
|
+
|
|
4437
|
+
html[data-theme="light"] .mds-verification-popup__header {
|
|
4438
|
+
color: var(--mds-color-text-primary, #1f2937);
|
|
4439
|
+
border-bottom-color: rgba(0, 0, 0, 0.1);
|
|
4440
|
+
}
|
|
4441
|
+
|
|
4442
|
+
.mds-verification-popup__checks {
|
|
4443
|
+
display: flex;
|
|
4444
|
+
flex-direction: column;
|
|
4445
|
+
gap: 8px;
|
|
4446
|
+
}
|
|
4447
|
+
|
|
4448
|
+
.mds-verification-popup__footer {
|
|
4449
|
+
display: flex;
|
|
4450
|
+
justify-content: space-between;
|
|
4451
|
+
align-items: center;
|
|
4452
|
+
padding-top: 12px;
|
|
4453
|
+
margin-top: 12px;
|
|
4454
|
+
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
|
4455
|
+
font-size: 0.75rem;
|
|
4456
|
+
color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
|
|
4457
|
+
}
|
|
4458
|
+
|
|
4459
|
+
html[data-theme="light"] .mds-verification-popup__footer {
|
|
4460
|
+
border-top-color: rgba(0, 0, 0, 0.1);
|
|
4461
|
+
color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
|
|
4462
|
+
}
|
|
4463
|
+
|
|
4464
|
+
.mds-verification-popup__sequence,
|
|
4465
|
+
.mds-verification-popup__date {
|
|
4466
|
+
font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
|
|
4467
|
+
}
|
|
4468
|
+
|
|
4469
|
+
/* Compact Check Item (for popup) */
|
|
4470
|
+
.mds-verification-check-item--compact {
|
|
4471
|
+
display: flex;
|
|
4472
|
+
align-items: center;
|
|
4473
|
+
gap: 8px;
|
|
4474
|
+
padding: 4px 0;
|
|
4475
|
+
}
|
|
4476
|
+
|
|
4477
|
+
.mds-verification-check-icon {
|
|
4478
|
+
width: 18px;
|
|
4479
|
+
height: 18px;
|
|
4480
|
+
display: flex;
|
|
4481
|
+
align-items: center;
|
|
4482
|
+
justify-content: center;
|
|
4483
|
+
font-size: 12px;
|
|
4484
|
+
font-weight: bold;
|
|
4485
|
+
color: rgba(255, 255, 255, 0.3);
|
|
4486
|
+
}
|
|
4487
|
+
|
|
4488
|
+
.mds-verification-check-icon--passed {
|
|
4489
|
+
color: #00d4aa;
|
|
4490
|
+
}
|
|
4491
|
+
|
|
4492
|
+
html[data-theme="light"] .mds-verification-check-icon {
|
|
4493
|
+
color: rgba(0, 0, 0, 0.3);
|
|
4494
|
+
}
|
|
4495
|
+
|
|
4496
|
+
html[data-theme="light"] .mds-verification-check-icon--passed {
|
|
4497
|
+
color: #00b48c;
|
|
4498
|
+
}
|
|
4499
|
+
|
|
4500
|
+
.mds-verification-check-label {
|
|
4501
|
+
font-size: 0.8125rem;
|
|
4502
|
+
color: var(--mds-color-text-primary, #fff);
|
|
4503
|
+
}
|
|
4504
|
+
|
|
4505
|
+
html[data-theme="light"] .mds-verification-check-label {
|
|
4506
|
+
color: var(--mds-color-text-primary, #1f2937);
|
|
4507
|
+
}
|
|
4508
|
+
|
|
4509
|
+
/* Full Card Variant */
|
|
4510
|
+
.mds-verification-card {
|
|
4511
|
+
display: flex;
|
|
4512
|
+
flex-direction: column;
|
|
4513
|
+
gap: 20px;
|
|
4514
|
+
}
|
|
4515
|
+
|
|
4516
|
+
.mds-verification-card__header {
|
|
4517
|
+
display: flex;
|
|
4518
|
+
align-items: center;
|
|
4519
|
+
gap: 20px;
|
|
4520
|
+
padding: 20px;
|
|
4521
|
+
background: rgba(0, 212, 170, 0.05);
|
|
4522
|
+
border: 1px solid rgba(0, 212, 170, 0.15);
|
|
4523
|
+
border-radius: 12px;
|
|
4524
|
+
}
|
|
4525
|
+
|
|
4526
|
+
html[data-theme="light"] .mds-verification-card__header {
|
|
4527
|
+
background: rgba(0, 180, 140, 0.05);
|
|
4528
|
+
border-color: rgba(0, 180, 140, 0.15);
|
|
4529
|
+
}
|
|
4530
|
+
|
|
4531
|
+
.mds-verification-card__badge {
|
|
4532
|
+
display: flex;
|
|
4533
|
+
flex-direction: column;
|
|
4534
|
+
align-items: center;
|
|
4535
|
+
gap: 4px;
|
|
4536
|
+
padding: 16px 24px;
|
|
4537
|
+
background: rgba(0, 212, 170, 0.1);
|
|
4538
|
+
border-radius: 10px;
|
|
4539
|
+
}
|
|
4540
|
+
|
|
4541
|
+
html[data-theme="light"] .mds-verification-card__badge {
|
|
4542
|
+
background: rgba(0, 180, 140, 0.1);
|
|
4543
|
+
}
|
|
4544
|
+
|
|
4545
|
+
.mds-verification-card__badge-label {
|
|
4546
|
+
font-size: 0.75rem;
|
|
4547
|
+
text-transform: uppercase;
|
|
4548
|
+
letter-spacing: 0.1em;
|
|
4549
|
+
color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
|
|
4550
|
+
}
|
|
4551
|
+
|
|
4552
|
+
.mds-verification-card__badge-score {
|
|
4553
|
+
font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
|
|
4554
|
+
font-size: 2.5rem;
|
|
4555
|
+
font-weight: bold;
|
|
4556
|
+
line-height: 1;
|
|
4557
|
+
color: #00d4aa;
|
|
4558
|
+
}
|
|
4559
|
+
|
|
4560
|
+
html[data-theme="light"] .mds-verification-card__badge-score {
|
|
4561
|
+
color: #00b48c;
|
|
4562
|
+
}
|
|
4563
|
+
|
|
4564
|
+
.mds-verification-card__title {
|
|
4565
|
+
flex: 1;
|
|
4566
|
+
}
|
|
4567
|
+
|
|
4568
|
+
.mds-verification-card__heading {
|
|
4569
|
+
margin: 0 0 4px 0;
|
|
4570
|
+
font-size: 1.125rem;
|
|
4571
|
+
font-weight: 600;
|
|
4572
|
+
color: var(--mds-color-text-primary, #fff);
|
|
4573
|
+
}
|
|
4574
|
+
|
|
4575
|
+
html[data-theme="light"] .mds-verification-card__heading {
|
|
4576
|
+
color: var(--mds-color-text-primary, #1f2937);
|
|
4577
|
+
}
|
|
4578
|
+
|
|
4579
|
+
.mds-verification-card__subtitle {
|
|
4580
|
+
margin: 0;
|
|
4581
|
+
font-size: 0.875rem;
|
|
4582
|
+
color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
|
|
4583
|
+
}
|
|
4584
|
+
|
|
4585
|
+
html[data-theme="light"] .mds-verification-card__subtitle {
|
|
4586
|
+
color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
|
|
4587
|
+
}
|
|
4588
|
+
|
|
4589
|
+
.mds-verification-card__error {
|
|
4590
|
+
padding: 12px 16px;
|
|
4591
|
+
background: rgba(220, 38, 38, 0.1);
|
|
4592
|
+
border: 1px solid rgba(220, 38, 38, 0.2);
|
|
4593
|
+
border-radius: 8px;
|
|
4594
|
+
color: #ef4444;
|
|
4595
|
+
font-size: 0.875rem;
|
|
4596
|
+
}
|
|
4597
|
+
|
|
4598
|
+
.mds-verification-card__checks {
|
|
4599
|
+
display: flex;
|
|
4600
|
+
flex-direction: column;
|
|
4601
|
+
gap: 10px;
|
|
4602
|
+
}
|
|
4603
|
+
|
|
4604
|
+
.mds-verification-check-description {
|
|
4605
|
+
display: block;
|
|
4606
|
+
font-size: 0.9375rem;
|
|
4607
|
+
color: var(--mds-color-text-primary, #fff);
|
|
4608
|
+
}
|
|
4609
|
+
|
|
4610
|
+
html[data-theme="light"] .mds-verification-check-description {
|
|
4611
|
+
color: var(--mds-color-text-primary, #1f2937);
|
|
4612
|
+
}
|
|
4613
|
+
|
|
4614
|
+
.mds-verification-check-points {
|
|
4615
|
+
display: block;
|
|
4616
|
+
font-size: 0.8125rem;
|
|
4617
|
+
color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
|
|
4618
|
+
margin-top: 2px;
|
|
4619
|
+
}
|
|
4620
|
+
|
|
4621
|
+
html[data-theme="light"] .mds-verification-check-points {
|
|
4622
|
+
color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
|
|
4623
|
+
}
|
|
4624
|
+
|
|
4625
|
+
.mds-verification-card__info {
|
|
4626
|
+
margin: 0;
|
|
4627
|
+
padding: 16px;
|
|
4628
|
+
background: rgba(255, 255, 255, 0.03);
|
|
4629
|
+
border-radius: 8px;
|
|
4630
|
+
font-size: 0.875rem;
|
|
4631
|
+
color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
|
|
4632
|
+
}
|
|
4633
|
+
|
|
4634
|
+
html[data-theme="light"] .mds-verification-card__info {
|
|
4635
|
+
background: rgba(0, 0, 0, 0.02);
|
|
4636
|
+
color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
|
|
4637
|
+
}
|
|
@@ -6,6 +6,7 @@
|
|
|
6
6
|
* @package @metropolle/design-system
|
|
7
7
|
*/
|
|
8
8
|
import React from 'react';
|
|
9
|
+
import { VerificationCheck } from '../VerificationScore';
|
|
9
10
|
export interface ProfileCardUser {
|
|
10
11
|
identity_id: string;
|
|
11
12
|
full_name: string;
|
|
@@ -28,11 +29,7 @@ export interface ProfileCardUser {
|
|
|
28
29
|
mfa_enabled?: boolean;
|
|
29
30
|
verification_score?: VerificationScore;
|
|
30
31
|
}
|
|
31
|
-
export
|
|
32
|
-
name: string;
|
|
33
|
-
description: string;
|
|
34
|
-
passed: boolean;
|
|
35
|
-
}
|
|
32
|
+
export type { VerificationCheck } from '../VerificationScore';
|
|
36
33
|
export interface VerificationScore {
|
|
37
34
|
score: number;
|
|
38
35
|
max_score: number;
|
|
@@ -1 +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;
|
|
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;AAC3D,OAAO,EAAyB,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAOhF,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;IAGxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAG/B,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,kBAAkB,CAAC,EAAE,iBAAiB,CAAC;CACxC;AAGD,YAAY,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,MAAM,EAAE,iBAAiB,EAAE,CAAC;CAC7B;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;AAyID,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAgB,EAChB,UAAU,EACV,UAAkB,EAClB,WAAW,EACX,gBAAwB,EACxB,SAAS,EACT,SAAc,EACd,aAAa,GACd,EAAE,gBAAgB,2CA2TlB;AAED,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
export interface VerificationCheck {
|
|
2
|
+
name: string;
|
|
3
|
+
description: string;
|
|
4
|
+
passed: boolean;
|
|
5
|
+
}
|
|
6
|
+
export interface VerificationScoreData {
|
|
7
|
+
score: number;
|
|
8
|
+
max_score: number;
|
|
9
|
+
breakdown: Record<string, boolean>;
|
|
10
|
+
checks: VerificationCheck[];
|
|
11
|
+
}
|
|
12
|
+
export interface VerificationCheckAction {
|
|
13
|
+
label: string;
|
|
14
|
+
onClick: () => void;
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
}
|
|
17
|
+
export interface VerificationScoreCardProps {
|
|
18
|
+
/** Verification score data */
|
|
19
|
+
score: number;
|
|
20
|
+
/** Max possible score */
|
|
21
|
+
maxScore?: number;
|
|
22
|
+
/** List of verification checks */
|
|
23
|
+
checks: VerificationCheck[];
|
|
24
|
+
/** Loading state */
|
|
25
|
+
loading?: boolean;
|
|
26
|
+
/** Error message */
|
|
27
|
+
error?: string | null;
|
|
28
|
+
/** Variant - 'card' shows full card, 'compact' for popup use */
|
|
29
|
+
variant?: 'card' | 'compact';
|
|
30
|
+
/** Optional function to get action for a check */
|
|
31
|
+
getCheckAction?: (check: VerificationCheck) => VerificationCheckAction | null;
|
|
32
|
+
/** Show info text at bottom */
|
|
33
|
+
showInfoText?: boolean;
|
|
34
|
+
/** Additional CSS class */
|
|
35
|
+
className?: string;
|
|
36
|
+
/** User sequence number (for compact popup footer) */
|
|
37
|
+
registrationSequence?: number;
|
|
38
|
+
/** Member since year (for compact popup footer) */
|
|
39
|
+
memberSince?: string;
|
|
40
|
+
}
|
|
41
|
+
export declare function VerificationScoreCard({ score, maxScore, checks, loading, error, variant, getCheckAction, showInfoText, className, registrationSequence, memberSince, }: VerificationScoreCardProps): import("react/jsx-runtime").JSX.Element;
|
|
42
|
+
export default VerificationScoreCard;
|
|
43
|
+
//# sourceMappingURL=VerificationScore.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VerificationScore.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/VerificationScore/VerificationScore.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,MAAM,EAAE,iBAAiB,EAAE,CAAC;CAC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,0BAA0B;IACzC,8BAA8B;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,yBAAyB;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,MAAM,EAAE,iBAAiB,EAAE,CAAC;IAC5B,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACtB,gEAAgE;IAChE,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC7B,kDAAkD;IAClD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,uBAAuB,GAAG,IAAI,CAAC;IAC9E,+BAA+B;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sDAAsD;IACtD,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AA8ED,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,QAAY,EACZ,MAAM,EACN,OAAe,EACf,KAAY,EACZ,OAAgB,EAChB,cAAc,EACd,YAAmB,EACnB,SAAc,EACd,oBAAoB,EACpB,WAAW,GACZ,EAAE,0BAA0B,2CAkF5B;AAED,eAAe,qBAAqB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/VerificationScore/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,GAC7B,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -11,6 +11,7 @@ export { FormSection, type FormSectionProps } from './FormSection';
|
|
|
11
11
|
export { InfoBox, InfoRow, type InfoBoxProps, type InfoRowProps } from './InfoBox';
|
|
12
12
|
export { FormModal, type FormModalProps } from './FormModal';
|
|
13
13
|
export { DetailModal, type DetailModalProps } from './DetailModal';
|
|
14
|
+
export { VerificationScoreCard, type VerificationScoreCardProps, type VerificationScoreData, type VerificationCheck, type VerificationCheckAction, } from './VerificationScore';
|
|
14
15
|
export { cn } from '../../utils/cn';
|
|
15
16
|
export * from './GlassCard';
|
|
16
17
|
export * from './Typography';
|
|
@@ -30,4 +31,5 @@ export * from './InfoBox';
|
|
|
30
31
|
export * from './FormModal';
|
|
31
32
|
export * from './DetailModal';
|
|
32
33
|
export * from './ProfileCard';
|
|
34
|
+
export * from './VerificationScore';
|
|
33
35
|
//# 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,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"}
|
|
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,EACL,qBAAqB,EACrB,KAAK,0BAA0B,EAC/B,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,EACtB,KAAK,uBAAuB,GAC7B,MAAM,qBAAqB,CAAC;AAG7B,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;AAC9B,cAAc,qBAAqB,CAAC"}
|
package/dist/react/index.d.ts
CHANGED
|
@@ -11,6 +11,7 @@ export { FormSection, type FormSectionProps } from './components/react/FormSecti
|
|
|
11
11
|
export { InfoBox, InfoRow, type InfoBoxProps, type InfoRowProps } from './components/react/InfoBox';
|
|
12
12
|
export { FormModal, type FormModalProps } from './components/react/FormModal';
|
|
13
13
|
export { DetailModal, type DetailModalProps } from './components/react/DetailModal';
|
|
14
|
+
export { VerificationScoreCard, type VerificationScoreCardProps, type VerificationScoreData, type VerificationCheck, type VerificationCheckAction, } from './components/react/VerificationScore';
|
|
14
15
|
export { cn } from './components/utils/cn';
|
|
15
16
|
export * from './components/react/GlassCard';
|
|
16
17
|
export * from './components/react/Typography';
|
|
@@ -30,4 +31,5 @@ export * from './components/react/InfoBox';
|
|
|
30
31
|
export * from './components/react/FormModal';
|
|
31
32
|
export * from './components/react/DetailModal';
|
|
32
33
|
export * from './components/react/ProfileCard';
|
|
34
|
+
export * from './components/react/VerificationScore';
|
|
33
35
|
//# sourceMappingURL=index.d.ts.map
|
package/dist/react/index.esm.js
CHANGED
|
@@ -1468,6 +1468,34 @@ const GlassCard = forwardRef(({ glassStyle = 'liquid', intensity = 'md', theme,
|
|
|
1468
1468
|
});
|
|
1469
1469
|
GlassCard.displayName = 'GlassCard';
|
|
1470
1470
|
|
|
1471
|
+
// =============================================================================
|
|
1472
|
+
// Icons
|
|
1473
|
+
// =============================================================================
|
|
1474
|
+
const Icons$1 = {
|
|
1475
|
+
shield: (jsxRuntimeExports.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: jsxRuntimeExports.jsx("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }) })),
|
|
1476
|
+
checkCircle: (jsxRuntimeExports.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [jsxRuntimeExports.jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }), jsxRuntimeExports.jsx("polyline", { points: "22 4 12 14.01 9 11.01" })] })),
|
|
1477
|
+
circle: (jsxRuntimeExports.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "10" }) })),
|
|
1478
|
+
};
|
|
1479
|
+
function VerificationCheckItem({ check, action, variant }) {
|
|
1480
|
+
if (variant === 'compact') {
|
|
1481
|
+
// Compact version for popup - just icon + text
|
|
1482
|
+
return (jsxRuntimeExports.jsxs("div", { className: "mds-verification-check-item mds-verification-check-item--compact", children: [jsxRuntimeExports.jsx("span", { className: `mds-verification-check-icon ${check.passed ? 'mds-verification-check-icon--passed' : ''}`, children: check.passed ? '\u2713' : '\u2717' }), jsxRuntimeExports.jsx("span", { className: "mds-verification-check-label", children: check.description })] }));
|
|
1483
|
+
}
|
|
1484
|
+
// Card version - with points and optional action
|
|
1485
|
+
return (jsxRuntimeExports.jsxs("div", { className: `mds-verification-check-item ${check.passed ? 'mds-verification-check-item--passed' : ''}`, children: [jsxRuntimeExports.jsx("div", { className: "mds-verification-check-status", children: check.passed ? Icons$1.checkCircle : Icons$1.circle }), jsxRuntimeExports.jsxs("div", { className: "mds-verification-check-content", children: [jsxRuntimeExports.jsx("span", { className: "mds-verification-check-description", children: check.description }), jsxRuntimeExports.jsx("span", { className: "mds-verification-check-points", children: check.passed ? '1 point' : '0 points' })] }), action && !check.passed && (jsxRuntimeExports.jsx("button", { type: "button", className: "mds-btn mds-btn--secondary mds-btn--sm", onClick: action.onClick, disabled: action.disabled, children: action.label }))] }));
|
|
1486
|
+
}
|
|
1487
|
+
// =============================================================================
|
|
1488
|
+
// Main Component
|
|
1489
|
+
// =============================================================================
|
|
1490
|
+
function VerificationScoreCard({ score, maxScore = 5, checks, loading = false, error = null, variant = 'card', getCheckAction, showInfoText = true, className = '', registrationSequence, memberSince, }) {
|
|
1491
|
+
if (variant === 'compact') {
|
|
1492
|
+
// Compact popup version (used in ProfileCard)
|
|
1493
|
+
return (jsxRuntimeExports.jsxs("div", { className: `mds-verification-popup ${className}`, children: [jsxRuntimeExports.jsxs("div", { className: "mds-verification-popup__header", children: ["Verification Level ", loading ? '...' : score] }), jsxRuntimeExports.jsx("div", { className: "mds-verification-popup__checks", children: checks.map((check) => (jsxRuntimeExports.jsx(VerificationCheckItem, { check: check, variant: "compact" }, check.name))) }), (registrationSequence || memberSince) && (jsxRuntimeExports.jsxs("div", { className: "mds-verification-popup__footer", children: [registrationSequence && (jsxRuntimeExports.jsxs("span", { className: "mds-verification-popup__sequence", children: ["User #", registrationSequence.toLocaleString()] })), memberSince && (jsxRuntimeExports.jsxs("span", { className: "mds-verification-popup__date", children: ["since ", memberSince] }))] }))] }));
|
|
1494
|
+
}
|
|
1495
|
+
// Full card version (used in settings pages)
|
|
1496
|
+
return (jsxRuntimeExports.jsxs("div", { className: `mds-verification-card ${className}`, children: [jsxRuntimeExports.jsxs("div", { className: "mds-verification-card__header", children: [jsxRuntimeExports.jsxs("div", { className: "mds-verification-card__badge", children: [jsxRuntimeExports.jsx("span", { className: "mds-verification-card__badge-label", children: "Verification Level" }), jsxRuntimeExports.jsx("span", { className: "mds-verification-card__badge-score", children: loading ? '...' : score })] }), jsxRuntimeExports.jsxs("div", { className: "mds-verification-card__title", children: [jsxRuntimeExports.jsx("h4", { className: "mds-verification-card__heading", children: "Verification Score" }), jsxRuntimeExports.jsx("p", { className: "mds-verification-card__subtitle", children: "Each completed criterion adds 1 point to your verification score." })] })] }), error && (jsxRuntimeExports.jsx("div", { className: "mds-verification-card__error", children: error })), jsxRuntimeExports.jsx("div", { className: "mds-verification-card__checks", children: checks.map((check) => (jsxRuntimeExports.jsx(VerificationCheckItem, { check: check, action: getCheckAction?.(check), variant: "card" }, check.name))) }), showInfoText && (jsxRuntimeExports.jsx("p", { className: "mds-verification-card__info", children: "The Verification Score indicates your account's trustworthiness. Users with higher scores have more credibility on the platform." }))] }));
|
|
1497
|
+
}
|
|
1498
|
+
|
|
1471
1499
|
// Default placeholder avatar - adapts to theme with high transparency
|
|
1472
1500
|
const getPlaceholderAvatar = (isDark) => {
|
|
1473
1501
|
const bgColor = isDark ? 'rgba(26, 26, 46, 0.15)' : 'rgba(255, 255, 255, 0.1)';
|
|
@@ -1508,9 +1536,6 @@ function UsernameLinks({ username, className }) {
|
|
|
1508
1536
|
function StatItem({ label, verified }) {
|
|
1509
1537
|
return (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__stat-item", children: [jsxRuntimeExports.jsx("span", { className: "mds-profile-card__stat-label", children: label }), jsxRuntimeExports.jsx("span", { className: `mds-profile-card__stat-value ${verified ? 'mds-profile-card__stat-value--verified' : ''}`, children: verified ? 'Verified' : 'Not Verified' })] }));
|
|
1510
1538
|
}
|
|
1511
|
-
function VerificationCheckItem({ description, passed }) {
|
|
1512
|
-
return (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__check-item", children: [jsxRuntimeExports.jsx("span", { className: `mds-profile-card__check-icon ${passed ? 'mds-profile-card__check-icon--passed' : ''}`, children: passed ? '\u2713' : '\u2717' }), jsxRuntimeExports.jsx("span", { className: "mds-profile-card__check-label", children: description })] }));
|
|
1513
|
-
}
|
|
1514
1539
|
// =============================================================================
|
|
1515
1540
|
// Main Component
|
|
1516
1541
|
// =============================================================================
|
|
@@ -1542,14 +1567,23 @@ function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, s
|
|
|
1542
1567
|
return () => observer.disconnect();
|
|
1543
1568
|
}, []);
|
|
1544
1569
|
// Dynamic info texts for rotating display
|
|
1545
|
-
|
|
1570
|
+
// FEAT-090: Use verification_score checks when available, fallback to legacy
|
|
1571
|
+
const infoTexts = user.verification_score ? [
|
|
1572
|
+
`Verification Level ${user.verification_score.score}`,
|
|
1573
|
+
`User #${user.registration_sequence?.toLocaleString() || '—'}`,
|
|
1574
|
+
`Member since ${new Date(user.created_at).getFullYear()}`,
|
|
1575
|
+
// Show passed verification checks
|
|
1576
|
+
...user.verification_score.checks
|
|
1577
|
+
.filter(check => check.passed)
|
|
1578
|
+
.map(check => check.description),
|
|
1579
|
+
] : [
|
|
1546
1580
|
`Member since ${new Date(user.created_at).getFullYear()}`,
|
|
1547
1581
|
...(user.registration_sequence ? [`User #${user.registration_sequence.toLocaleString()}`] : []),
|
|
1548
1582
|
...(user.verified >= 1 ? ['Email Verified'] : []),
|
|
1549
1583
|
...(user.verified >= 2 ? ['Identity Verified'] : []),
|
|
1550
1584
|
...(user.verified >= 3 ? ['Area Verified'] : []),
|
|
1551
1585
|
// PROC-013: Show MFA status when enabled (highlight security-conscious users)
|
|
1552
|
-
...(user.mfa_enabled === true ? ['2FA
|
|
1586
|
+
...(user.mfa_enabled === true ? ['2FA Enabled'] : []),
|
|
1553
1587
|
];
|
|
1554
1588
|
// Rotate info text
|
|
1555
1589
|
useEffect(() => {
|
|
@@ -1611,11 +1645,11 @@ function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, s
|
|
|
1611
1645
|
e.stopPropagation();
|
|
1612
1646
|
setShowVerifiedPopup(!showVerifiedPopup);
|
|
1613
1647
|
setShowSocialPopup(false);
|
|
1614
|
-
}, title: "Verification Status", children: Icons.shield }), showVerifiedPopup && (jsxRuntimeExports.
|
|
1615
|
-
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1648
|
+
}, title: "Verification Status", children: Icons.shield }), showVerifiedPopup && (jsxRuntimeExports.jsx("div", { className: "mds-profile-card__verified-popup", children: user.verification_score ? (
|
|
1649
|
+
// FEAT-090: Use VerificationScoreCard component
|
|
1650
|
+
jsxRuntimeExports.jsx(VerificationScoreCard, { score: user.verification_score.score, maxScore: user.verification_score.max_score, checks: user.verification_score.checks, variant: "compact", registrationSequence: user.registration_sequence, memberSince: memberSince })) : (
|
|
1651
|
+
// Legacy: Old verification levels
|
|
1652
|
+
jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verified-header", children: ["Verification Level ", user.verified] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verified-stats", children: [jsxRuntimeExports.jsx(StatItem, { label: "Email", verified: user.verified >= 1 }), jsxRuntimeExports.jsx(StatItem, { label: "Identity", verified: user.verified >= 2 }), jsxRuntimeExports.jsx(StatItem, { label: "Area", verified: user.verified >= 3 })] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verified-footer", children: [user.registration_sequence && (jsxRuntimeExports.jsxs("span", { className: "mds-profile-card__verified-sequence", children: ["User #", user.registration_sequence.toLocaleString()] })), jsxRuntimeExports.jsxs("span", { className: "mds-profile-card__verified-date", children: ["since ", memberSince] })] })] })) }))] }), showRotatingInfo && (jsxRuntimeExports.jsx("div", { className: "mds-profile-card__info-dots", children: infoTexts.map((_, index) => (jsxRuntimeExports.jsx("span", { className: `mds-profile-card__info-dot ${index === currentInfoIndex ? 'active' : ''}` }, index))) }))] }))] })] }));
|
|
1619
1653
|
}
|
|
1620
1654
|
|
|
1621
1655
|
const variantElementMap = {
|
|
@@ -3091,5 +3125,5 @@ function ConfirmDialog({ open, onClose, title, description, confirmText = 'Confi
|
|
|
3091
3125
|
return (jsxRuntimeExports.jsx(Modal, { open: open, onClose: onClose, closeOnOverlay: !disableOverlayClose, children: jsxRuntimeExports.jsxs("div", { className: "mds-modal-card", style: { maxWidth: 480, width: '100%' }, children: [jsxRuntimeExports.jsx(ModalHeader, { title: title, icon: icon ?? toneIcon[tone], onClose: onClose, align: "center" }), description && (jsxRuntimeExports.jsx("div", { style: { padding: '0 24px 16px 24px' }, children: description })), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: 12, justifyContent: 'flex-end', borderTop: '1px solid var(--border-color)', padding: '16px 24px', marginTop: 8 }, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: onClose, className: "mds-button mds-button--secondary", children: cancelText }), jsxRuntimeExports.jsx("button", { type: "button", onClick: onConfirm, disabled: loading, className: "mds-button mds-button--primary", children: loading ? 'Processando...' : confirmText })] })] }) }));
|
|
3092
3126
|
}
|
|
3093
3127
|
|
|
3094
|
-
export { ActionIcons, BrandLogo, Button, CellRenderers, ConfirmDialog, DataTable, DetailModal, FormField, FormGrid, FormModal, FormSection, GlassCard, InfoBox, InfoRow, Modal, ModalBody, ModalFooter, ModalHeader, ProfileCard, Select, TableHeader, TableRow, ThemeToggle, Typography, auditLogTableConfig, citiesTableConfig, cn, countriesTableConfig, getTableConfig, parametersTableConfig, regionsTableConfig, statesTableConfig };
|
|
3128
|
+
export { ActionIcons, BrandLogo, Button, CellRenderers, ConfirmDialog, DataTable, DetailModal, FormField, FormGrid, FormModal, FormSection, GlassCard, InfoBox, InfoRow, Modal, ModalBody, ModalFooter, ModalHeader, ProfileCard, Select, TableHeader, TableRow, ThemeToggle, Typography, VerificationScoreCard, auditLogTableConfig, citiesTableConfig, cn, countriesTableConfig, getTableConfig, parametersTableConfig, regionsTableConfig, statesTableConfig };
|
|
3095
3129
|
//# sourceMappingURL=index.esm.js.map
|