@metropolle/design-system 1.2026.0-1.24.2030 → 1.2026.0-1.24.2242

package/dist/css/components.css

@@ -4041,6 +4041,16 @@ html[data-theme="light"] .mds-profile-card__info-dot.active {
     transform: none;
     justify-content: center;
     margin-top: 16px;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+  }
+
+  /* Info dots: horizontal on mobile */
+  .mds-profile-card__info-dots {
+    flex-direction: row;
+    gap: 8px;
+    margin-top: 8px;
   }
 
   .mds-profile-card__social {
@@ -4414,3 +4424,224 @@ html[data-theme="light"] .mds-verification-check-item--passed .mds-verification-
   background: rgba(0, 180, 140, 0.15);
   color: #00b48c;
 }
+
+/* =============================================================================
+   FEAT-090: VerificationScoreCard Component (Unified)
+   Used by ProfileCard popup, @front settings, @back UserIdentityModal
+   ============================================================================= */
+
+/* Compact Popup Variant (ProfileCard) */
+.mds-verification-popup {
+  min-width: 200px;
+}
+
+.mds-verification-popup__header {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--mds-color-text-primary, #fff);
+  padding-bottom: 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+html[data-theme="light"] .mds-verification-popup__header {
+  color: var(--mds-color-text-primary, #1f2937);
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+}
+
+.mds-verification-popup__checks {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.mds-verification-popup__footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 12px;
+  margin-top: 12px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  font-size: 0.75rem;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
+}
+
+html[data-theme="light"] .mds-verification-popup__footer {
+  border-top-color: rgba(0, 0, 0, 0.1);
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+.mds-verification-popup__sequence,
+.mds-verification-popup__date {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+}
+
+/* Compact Check Item (for popup) */
+.mds-verification-check-item--compact {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 0;
+}
+
+.mds-verification-check-icon {
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: bold;
+  color: rgba(255, 255, 255, 0.3);
+}
+
+.mds-verification-check-icon--passed {
+  color: #00d4aa;
+}
+
+html[data-theme="light"] .mds-verification-check-icon {
+  color: rgba(0, 0, 0, 0.3);
+}
+
+html[data-theme="light"] .mds-verification-check-icon--passed {
+  color: #00b48c;
+}
+
+.mds-verification-check-label {
+  font-size: 0.8125rem;
+  color: var(--mds-color-text-primary, #fff);
+}
+
+html[data-theme="light"] .mds-verification-check-label {
+  color: var(--mds-color-text-primary, #1f2937);
+}
+
+/* Full Card Variant */
+.mds-verification-card {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.mds-verification-card__header {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  padding: 20px;
+  background: rgba(0, 212, 170, 0.05);
+  border: 1px solid rgba(0, 212, 170, 0.15);
+  border-radius: 12px;
+}
+
+html[data-theme="light"] .mds-verification-card__header {
+  background: rgba(0, 180, 140, 0.05);
+  border-color: rgba(0, 180, 140, 0.15);
+}
+
+.mds-verification-card__badge {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: 16px 24px;
+  background: rgba(0, 212, 170, 0.1);
+  border-radius: 10px;
+}
+
+html[data-theme="light"] .mds-verification-card__badge {
+  background: rgba(0, 180, 140, 0.1);
+}
+
+.mds-verification-card__badge-label {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
+}
+
+.mds-verification-card__badge-score {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 2.5rem;
+  font-weight: bold;
+  line-height: 1;
+  color: #00d4aa;
+}
+
+html[data-theme="light"] .mds-verification-card__badge-score {
+  color: #00b48c;
+}
+
+.mds-verification-card__title {
+  flex: 1;
+}
+
+.mds-verification-card__heading {
+  margin: 0 0 4px 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--mds-color-text-primary, #fff);
+}
+
+html[data-theme="light"] .mds-verification-card__heading {
+  color: var(--mds-color-text-primary, #1f2937);
+}
+
+.mds-verification-card__subtitle {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
+}
+
+html[data-theme="light"] .mds-verification-card__subtitle {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+.mds-verification-card__error {
+  padding: 12px 16px;
+  background: rgba(220, 38, 38, 0.1);
+  border: 1px solid rgba(220, 38, 38, 0.2);
+  border-radius: 8px;
+  color: #ef4444;
+  font-size: 0.875rem;
+}
+
+.mds-verification-card__checks {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mds-verification-check-description {
+  display: block;
+  font-size: 0.9375rem;
+  color: var(--mds-color-text-primary, #fff);
+}
+
+html[data-theme="light"] .mds-verification-check-description {
+  color: var(--mds-color-text-primary, #1f2937);
+}
+
+.mds-verification-check-points {
+  display: block;
+  font-size: 0.8125rem;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
+  margin-top: 2px;
+}
+
+html[data-theme="light"] .mds-verification-check-points {
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+.mds-verification-card__info {
+  margin: 0;
+  padding: 16px;
+  background: rgba(255, 255, 255, 0.03);
+  border-radius: 8px;
+  font-size: 0.875rem;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.6));
+}
+
+html[data-theme="light"] .mds-verification-card__info {
+  background: rgba(0, 0, 0, 0.02);
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
+}

package/dist/react/components/react/ProfileCard/ProfileCard.d.ts

@@ -6,6 +6,7 @@
  * @package @metropolle/design-system
  */
 import React from 'react';
+import { VerificationCheck } from '../VerificationScore';
 export interface ProfileCardUser {
     identity_id: string;
     full_name: string;
@@ -28,11 +29,7 @@ export interface ProfileCardUser {
     mfa_enabled?: boolean;
     verification_score?: VerificationScore;
 }
-export interface VerificationCheck {
-    name: string;
-    description: string;
-    passed: boolean;
-}
+export type { VerificationCheck } from '../VerificationScore';
 export interface VerificationScore {
     score: number;
     max_score: number;

package/dist/react/components/react/ProfileCard/ProfileCard.d.ts.map

@@ -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;IAGxB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAG/B,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,kBAAkB,CAAC,EAAE,iBAAiB,CAAC;CACxC;AAGD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;CACjB;AAED,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;AAyJD,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAgB,EAChB,UAAU,EACV,UAAkB,EAClB,WAAW,EACX,gBAAwB,EACxB,SAAS,EACT,SAAc,EACd,aAAa,GACd,EAAE,gBAAgB,2CAuUlB;AAED,eAAe,WAAW,CAAC"}
+{"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"}

package/dist/react/components/react/VerificationScore/VerificationScore.d.ts

@@ -0,0 +1,43 @@
+export interface VerificationCheck {
+    name: string;
+    description: string;
+    passed: boolean;
+}
+export interface VerificationScoreData {
+    score: number;
+    max_score: number;
+    breakdown: Record<string, boolean>;
+    checks: VerificationCheck[];
+}
+export interface VerificationCheckAction {
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+}
+export interface VerificationScoreCardProps {
+    /** Verification score data */
+    score: number;
+    /** Max possible score */
+    maxScore?: number;
+    /** List of verification checks */
+    checks: VerificationCheck[];
+    /** Loading state */
+    loading?: boolean;
+    /** Error message */
+    error?: string | null;
+    /** Variant - 'card' shows full card, 'compact' for popup use */
+    variant?: 'card' | 'compact';
+    /** Optional function to get action for a check */
+    getCheckAction?: (check: VerificationCheck) => VerificationCheckAction | null;
+    /** Show info text at bottom */
+    showInfoText?: boolean;
+    /** Additional CSS class */
+    className?: string;
+    /** User sequence number (for compact popup footer) */
+    registrationSequence?: number;
+    /** Member since year (for compact popup footer) */
+    memberSince?: string;
+}
+export declare function VerificationScoreCard({ score, maxScore, checks, loading, error, variant, getCheckAction, showInfoText, className, registrationSequence, memberSince, }: VerificationScoreCardProps): import("react/jsx-runtime").JSX.Element;
+export default VerificationScoreCard;
+//# sourceMappingURL=VerificationScore.d.ts.map

package/dist/react/components/react/VerificationScore/VerificationScore.d.ts.map

@@ -0,0 +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"}

package/dist/react/components/react/VerificationScore/index.d.ts

@@ -0,0 +1,3 @@
+export { VerificationScoreCard, type VerificationScoreCardProps, type VerificationScoreData, type VerificationCheck, type VerificationCheckAction, } from './VerificationScore';
+export { default } from './VerificationScore';
+//# sourceMappingURL=index.d.ts.map

package/dist/react/components/react/VerificationScore/index.d.ts.map

@@ -0,0 +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"}

package/dist/react/components/react/index.d.ts

@@ -11,6 +11,7 @@ export { FormSection, type FormSectionProps } from './FormSection';
 export { InfoBox, InfoRow, type InfoBoxProps, type InfoRowProps } from './InfoBox';
 export { FormModal, type FormModalProps } from './FormModal';
 export { DetailModal, type DetailModalProps } from './DetailModal';
+export { VerificationScoreCard, type VerificationScoreCardProps, type VerificationScoreData, type VerificationCheck, type VerificationCheckAction, } from './VerificationScore';
 export { cn } from '../../utils/cn';
 export * from './GlassCard';
 export * from './Typography';
@@ -30,4 +31,5 @@ export * from './InfoBox';
 export * from './FormModal';
 export * from './DetailModal';
 export * from './ProfileCard';
+export * from './VerificationScore';
 //# sourceMappingURL=index.d.ts.map

package/dist/react/components/react/index.d.ts.map

@@ -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"}
+{"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

@@ -11,6 +11,7 @@ export { FormSection, type FormSectionProps } from './components/react/FormSecti
 export { InfoBox, InfoRow, type InfoBoxProps, type InfoRowProps } from './components/react/InfoBox';
 export { FormModal, type FormModalProps } from './components/react/FormModal';
 export { DetailModal, type DetailModalProps } from './components/react/DetailModal';
+export { VerificationScoreCard, type VerificationScoreCardProps, type VerificationScoreData, type VerificationCheck, type VerificationCheckAction, } from './components/react/VerificationScore';
 export { cn } from './components/utils/cn';
 export * from './components/react/GlassCard';
 export * from './components/react/Typography';
@@ -30,4 +31,5 @@ export * from './components/react/InfoBox';
 export * from './components/react/FormModal';
 export * from './components/react/DetailModal';
 export * from './components/react/ProfileCard';
+export * from './components/react/VerificationScore';
 //# sourceMappingURL=index.d.ts.map

package/dist/react/index.esm.js

@@ -1468,6 +1468,34 @@ const GlassCard = forwardRef(({ glassStyle = 'liquid', intensity = 'md', theme,
 });
 GlassCard.displayName = 'GlassCard';
 
+// =============================================================================
+// Icons
+// =============================================================================
+const Icons$1 = {
+    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" }) })),
+    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" })] })),
+    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" }) })),
+};
+function VerificationCheckItem({ check, action, variant }) {
+    if (variant === 'compact') {
+        // Compact version for popup - just icon + text
+        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 })] }));
+    }
+    // Card version - with points and optional action
+    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 }))] }));
+}
+// =============================================================================
+// Main Component
+// =============================================================================
+function VerificationScoreCard({ score, maxScore = 5, checks, loading = false, error = null, variant = 'card', getCheckAction, showInfoText = true, className = '', registrationSequence, memberSince, }) {
+    if (variant === 'compact') {
+        // Compact popup version (used in ProfileCard)
+        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] }))] }))] }));
+    }
+    // Full card version (used in settings pages)
+    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." }))] }));
+}
+
 // Default placeholder avatar - adapts to theme with high transparency
 const getPlaceholderAvatar = (isDark) => {
     const bgColor = isDark ? 'rgba(26, 26, 46, 0.15)' : 'rgba(255, 255, 255, 0.1)';
@@ -1508,9 +1536,6 @@ function UsernameLinks({ username, className }) {
 function StatItem({ label, verified }) {
     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' })] }));
 }
-function VerificationCheckItem({ description, passed }) {
-    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 })] }));
-}
 // =============================================================================
 // Main Component
 // =============================================================================
@@ -1621,8 +1646,8 @@ function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, s
                                             setShowVerifiedPopup(!showVerifiedPopup);
                                             setShowSocialPopup(false);
                                         }, title: "Verification Status", children: Icons.shield }), showVerifiedPopup && (jsxRuntimeExports.jsx("div", { className: "mds-profile-card__verified-popup", children: user.verification_score ? (
-                                        // FEAT-090: New 5-point verification score
-                                        jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verified-header", children: ["Verification Level ", user.verification_score.score] }), jsxRuntimeExports.jsx("div", { className: "mds-profile-card__verified-checks", children: user.verification_score.checks.map((check) => (jsxRuntimeExports.jsx(VerificationCheckItem, { description: check.description, passed: check.passed }, check.name))) }), 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] })] })] })) : (
+                                        // FEAT-090: Use VerificationScoreCard component
+                                        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 })) : (
                                         // Legacy: Old verification levels
                                         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))) }))] }))] })] }));
 }
@@ -3100,5 +3125,5 @@ function ConfirmDialog({ open, onClose, title, description, confirmText = 'Confi
     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 })] })] }) }));
 }
 
-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 };
+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 };
 //# sourceMappingURL=index.esm.js.map