@metropolle/design-system 1.0.0-beta.2026.1.24.924.ea29e2a → 1.0.0-beta.2026.1.25.11.9200926

package/dist/react/index.js

@@ -1470,6 +1470,34 @@ const GlassCard = require$$0.forwardRef(({ glassStyle = 'liquid', intensity = 'm
 });
 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)';
@@ -1541,14 +1569,23 @@ function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, s
         return () => observer.disconnect();
     }, []);
     // Dynamic info texts for rotating display
-    const infoTexts = [
+    // FEAT-090: Use verification_score checks when available, fallback to legacy
+    const infoTexts = user.verification_score ? [
+        `Verification Level ${user.verification_score.score}`,
+        `User #${user.registration_sequence?.toLocaleString() || '—'}`,
+        `Member since ${new Date(user.created_at).getFullYear()}`,
+        // Show passed verification checks
+        ...user.verification_score.checks
+            .filter(check => check.passed)
+            .map(check => check.description),
+    ] : [
         `Member since ${new Date(user.created_at).getFullYear()}`,
         ...(user.registration_sequence ? [`User #${user.registration_sequence.toLocaleString()}`] : []),
         ...(user.verified >= 1 ? ['Email Verified'] : []),
         ...(user.verified >= 2 ? ['Identity Verified'] : []),
         ...(user.verified >= 3 ? ['Area Verified'] : []),
         // PROC-013: Show MFA status when enabled (highlight security-conscious users)
-        ...(user.mfa_enabled === true ? ['2FA Ativado'] : []),
+        ...(user.mfa_enabled === true ? ['2FA Enabled'] : []),
     ];
     // Rotate info text
     require$$0.useEffect(() => {
@@ -1590,10 +1627,18 @@ function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, s
     // Full size photo for modal (prioritize full, then medium)
     const photoUrlFull = user.photo_url_full || user.photo_url_medium;
     const hasRealPhoto = !!(user.photo_url_medium || user.photo_url_full);
-    return (jsxRuntimeExports.jsxs("article", { className: `mds-profile-card ${className}`, style: { '--mds-profile-card-photo-width': `${computedPhotoWidth}px` }, children: [jsxRuntimeExports.jsx("div", { className: "mds-profile-card__grain" }), jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo", children: photoSlot ? (jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo-slot", children: photoSlot })) : (jsxRuntimeExports.jsx("img", { src: photoUrl, alt: displayName, className: `mds-profile-card__avatar ${hasRealPhoto ? 'mds-profile-card__avatar--clickable' : ''}`, onClick: hasRealPhoto ? () => setShowPhotoModal(true) : undefined, role: hasRealPhoto ? 'button' : undefined, tabIndex: hasRealPhoto ? 0 : undefined, onKeyDown: hasRealPhoto ? (e) => e.key === 'Enter' && setShowPhotoModal(true) : undefined })) }), showPhotoModal && photoUrlFull && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__photo-modal", onClick: () => setShowPhotoModal(false), role: "dialog", "aria-modal": "true", "aria-label": "Enlarged photo - click anywhere to close", children: [jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo-modal-backdrop" }), jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo-modal-content", children: jsxRuntimeExports.jsx("img", { src: photoUrlFull, alt: displayName, className: "mds-profile-card__photo-modal-image" }) })] })), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__content", children: [jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__identity", children: [jsxRuntimeExports.jsx("h1", { className: "mds-profile-card__name", children: displayName.toUpperCase() }), variant === 'full' && profession && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__profession", children: profession.toUpperCase() })), variant === 'compact' && (jsxRuntimeExports.jsx(UsernameLinks, { username: user.username, className: "mds-profile-card__username" }))] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__details", children: [variant === 'full' && getLocation() && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__location", children: getLocation() })), variant === 'full' && (jsxRuntimeExports.jsx(UsernameLinks, { username: user.username, className: "mds-profile-card__username-detail" })), variant === 'compact' && user.email && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__email", children: user.email })), variant === 'compact' && (jsxRuntimeExports.jsxs("span", { className: "mds-profile-card__member", children: ["Member since ", memberSince] }))] }), variant === 'compact' && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verification", children: [jsxRuntimeExports.jsxs("button", { className: "mds-profile-card__verified-badge", title: `Verification Level ${user.verified}`, onClick: (e) => {
+    return (jsxRuntimeExports.jsxs("article", { className: `mds-profile-card ${className}`, style: { '--mds-profile-card-photo-width': `${computedPhotoWidth}px` }, children: [jsxRuntimeExports.jsx("div", { className: "mds-profile-card__grain" }), jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo", children: photoSlot ? (jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo-slot", children: photoSlot })) : (jsxRuntimeExports.jsx("img", { src: photoUrl, alt: displayName, className: `mds-profile-card__avatar ${hasRealPhoto ? 'mds-profile-card__avatar--clickable' : ''}`, onClick: hasRealPhoto ? () => setShowPhotoModal(true) : undefined, role: hasRealPhoto ? 'button' : undefined, tabIndex: hasRealPhoto ? 0 : undefined, onKeyDown: hasRealPhoto ? (e) => e.key === 'Enter' && setShowPhotoModal(true) : undefined })) }), showPhotoModal && photoUrlFull && typeof document !== 'undefined' && reactDom.createPortal(jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__photo-modal", onClick: () => setShowPhotoModal(false), role: "dialog", "aria-modal": "true", "aria-label": "Enlarged photo - click anywhere to close", children: [jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo-modal-backdrop" }), jsxRuntimeExports.jsx("div", { className: "mds-profile-card__photo-modal-content", children: jsxRuntimeExports.jsx("img", { src: photoUrlFull, alt: displayName, className: "mds-profile-card__photo-modal-image" }) })] }), document.body), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__content", children: [jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__identity", children: [jsxRuntimeExports.jsx("h1", { className: "mds-profile-card__name", children: displayName.toUpperCase() }), variant === 'full' && profession && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__profession", children: profession.toUpperCase() })), variant === 'compact' && (jsxRuntimeExports.jsx(UsernameLinks, { username: user.username, className: "mds-profile-card__username" }))] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__details", children: [variant === 'full' && getLocation() && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__location", children: getLocation() })), variant === 'full' && (jsxRuntimeExports.jsx(UsernameLinks, { username: user.username, className: "mds-profile-card__username-detail" })), variant === 'compact' && user.email && (jsxRuntimeExports.jsx("p", { className: "mds-profile-card__email", children: user.email })), variant === 'compact' && (jsxRuntimeExports.jsxs("span", { className: "mds-profile-card__member", children: ["Member since ", memberSince] }))] }), variant === 'compact' && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verification", children: [jsxRuntimeExports.jsxs("button", { className: "mds-profile-card__verified-badge", title: user.verification_score
+                                    ? `Verification Score: ${user.verification_score.score}`
+                                    : `Verification Level ${user.verified}`, onClick: (e) => {
                                     e.stopPropagation();
                                     setShowVerifiedPopup(!showVerifiedPopup);
-                                }, children: [Icons.shield, jsxRuntimeExports.jsxs("span", { children: ["Level ", user.verified] })] }), jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__dots", children: [jsxRuntimeExports.jsx("span", { className: `mds-profile-card__dot ${user.verified >= 1 ? 'active' : ''}`, title: "Email Verified" }), jsxRuntimeExports.jsx("span", { className: `mds-profile-card__dot ${user.verified >= 2 ? 'active' : ''}`, title: "Identity Verified" }), jsxRuntimeExports.jsx("span", { className: `mds-profile-card__dot ${user.verified >= 3 ? 'active' : ''}`, title: "Area Verified" })] })] })), showSocial && (jsxRuntimeExports.jsxs("div", { ref: socialRef, className: "mds-profile-card__social", children: [jsxRuntimeExports.jsx("button", { className: "mds-profile-card__social-trigger", onClick: (e) => {
+                                }, children: [Icons.shield, jsxRuntimeExports.jsx("span", { children: user.verification_score
+                                            ? user.verification_score.score
+                                            : `Level ${user.verified}` })] }), jsxRuntimeExports.jsx("div", { className: "mds-profile-card__dots", children: user.verification_score ? (
+                                // FEAT-090: Show 6 dots for verification score
+                                jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: user.verification_score.checks.slice(0, 6).map((check, index) => (jsxRuntimeExports.jsx("span", { className: `mds-profile-card__dot ${check.passed ? 'active' : ''}`, title: check.description }, check.name))) })) : (
+                                // Legacy: Show 3 dots for old verification levels
+                                jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("span", { className: `mds-profile-card__dot ${user.verified >= 1 ? 'active' : ''}`, title: "Email Verified" }), jsxRuntimeExports.jsx("span", { className: `mds-profile-card__dot ${user.verified >= 2 ? 'active' : ''}`, title: "Identity Verified" }), jsxRuntimeExports.jsx("span", { className: `mds-profile-card__dot ${user.verified >= 3 ? 'active' : ''}`, title: "Area Verified" })] })) })] })), showSocial && (jsxRuntimeExports.jsxs("div", { ref: socialRef, className: "mds-profile-card__social", children: [jsxRuntimeExports.jsx("button", { className: "mds-profile-card__social-trigger", onClick: (e) => {
                                     e.stopPropagation();
                                     setShowSocialPopup(!showSocialPopup);
                                     setShowVerifiedPopup(false);
@@ -1602,7 +1647,11 @@ function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, s
                                             e.stopPropagation();
                                             setShowVerifiedPopup(!showVerifiedPopup);
                                             setShowSocialPopup(false);
-                                        }, title: "Verification Status", children: Icons.shield }), showVerifiedPopup && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__verified-popup", 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))) }))] }))] })] }));
+                                        }, title: "Verification Status", children: Icons.shield }), showVerifiedPopup && (jsxRuntimeExports.jsx("div", { className: "mds-profile-card__verified-popup", children: user.verification_score ? (
+                                        // 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))) }))] }))] })] }));
 }
 
 const variantElementMap = {
@@ -3102,6 +3151,7 @@ exports.TableHeader = TableHeader;
 exports.TableRow = TableRow;
 exports.ThemeToggle = ThemeToggle;
 exports.Typography = Typography;
+exports.VerificationScoreCard = VerificationScoreCard;
 exports.auditLogTableConfig = auditLogTableConfig;
 exports.citiesTableConfig = citiesTableConfig;
 exports.cn = cn;