@metropolle/design-system 1.2026.0-1.7.15 → 1.2026.0-1.7.2346

package/dist/react/index.js

@@ -1470,6 +1470,125 @@ const GlassCard = require$$0.forwardRef(({ glassStyle = 'liquid', intensity = 'm
 });
 GlassCard.displayName = 'GlassCard';
 
+// 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)';
+    const fgColor = isDark ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.06)';
+    return 'data:image/svg+xml,' + encodeURIComponent(`
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" fill="none">
+  <rect width="200" height="200" fill="${bgColor}"/>
+  <circle cx="100" cy="80" r="40" fill="${fgColor}"/>
+  <ellipse cx="100" cy="180" rx="60" ry="50" fill="${fgColor}"/>
+</svg>
+`);
+};
+// =============================================================================
+// Icons
+// =============================================================================
+const Icons = {
+    shield: (jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", children: jsxRuntimeExports.jsx("path", { d: "M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z", fill: "currentColor" }) })),
+    plus: (jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", children: jsxRuntimeExports.jsx("path", { d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z", fill: "currentColor" }) })),
+    instagram: jsxRuntimeExports.jsx("path", { d: "M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z" }),
+    x: jsxRuntimeExports.jsx("path", { d: "M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" }),
+    linkedin: jsxRuntimeExports.jsx("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" }),
+    website: jsxRuntimeExports.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" }),
+};
+function SocialLink({ href, title, icon }) {
+    const iconPath = Icons[icon];
+    if (!iconPath || typeof iconPath === 'object')
+        return null;
+    return (jsxRuntimeExports.jsx("a", { href: href, className: "mds-profile-card__social-link", title: title, target: "_blank", rel: "noopener noreferrer", children: jsxRuntimeExports.jsx("svg", { viewBox: "0 0 24 24", children: iconPath }) }));
+}
+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' })] }));
+}
+// =============================================================================
+// Main Component
+// =============================================================================
+function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, socialLinks, showRotatingInfo = false, photoSlot, className = '', onSocialClick, }) {
+    const [showVerifiedPopup, setShowVerifiedPopup] = require$$0.useState(false);
+    const [showSocialPopup, setShowSocialPopup] = require$$0.useState(false);
+    const [currentInfoIndex, setCurrentInfoIndex] = require$$0.useState(0);
+    const [isDarkTheme, setIsDarkTheme] = require$$0.useState(true);
+    const verifiedRef = require$$0.useRef(null);
+    const socialRef = require$$0.useRef(null);
+    // Calculate photo width based on variant
+    const computedPhotoWidth = photoWidth ?? (variant === 'full' ? 280 : 200);
+    // Detect theme
+    require$$0.useEffect(() => {
+        const checkTheme = () => {
+            const theme = document.documentElement.getAttribute('data-theme');
+            setIsDarkTheme(theme !== 'light');
+        };
+        checkTheme();
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.attributeName === 'data-theme') {
+                    checkTheme();
+                }
+            });
+        });
+        observer.observe(document.documentElement, { attributes: true, attributeFilter: ['data-theme'] });
+        return () => observer.disconnect();
+    }, []);
+    // Dynamic info texts for rotating display
+    const infoTexts = [
+        `Member since ${new Date(user.created_at).getFullYear()}`,
+        ...(user.verified >= 1 ? ['Email Verified'] : []),
+        ...(user.verified >= 2 ? ['Identity Verified'] : []),
+        ...(user.verified >= 3 ? ['Professional Verified'] : []),
+    ];
+    // Rotate info text
+    require$$0.useEffect(() => {
+        if (!showRotatingInfo)
+            return;
+        const interval = setInterval(() => {
+            setCurrentInfoIndex((prev) => (prev + 1) % infoTexts.length);
+        }, 10000);
+        return () => clearInterval(interval);
+    }, [infoTexts.length, showRotatingInfo]);
+    // Close popups on click outside
+    require$$0.useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (verifiedRef.current && !verifiedRef.current.contains(e.target)) {
+                setShowVerifiedPopup(false);
+            }
+            if (socialRef.current && !socialRef.current.contains(e.target)) {
+                setShowSocialPopup(false);
+            }
+        };
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, []);
+    // Get display values
+    const displayName = user.full_name || user.username || 'User';
+    const profession = user.profession_name || user.profession_code || '';
+    const getLocation = () => {
+        if (!user.city_code && !user.state_code && !user.country_code)
+            return null;
+        const city = user.city_name || user.city_code?.toUpperCase() || '';
+        const state = user.state_code?.toUpperCase() || '';
+        const country = user.country_name || user.country_code?.toUpperCase() || '';
+        const parts = [city, state, country].filter(Boolean);
+        return parts.join(', ');
+    };
+    const memberSince = new Date(user.created_at).getFullYear().toString();
+    const photoUrl = user.photo_url_medium || user.photo_url_full || getPlaceholderAvatar(isDarkTheme);
+    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" })) }), 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("p", { className: "mds-profile-card__username", children: user.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("span", { className: "mds-profile-card__username-detail", children: user.username })), 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) => {
+                                    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: "Professional 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);
+                                    onSocialClick?.();
+                                }, "aria-label": "Show social links", children: Icons.plus }), showSocialPopup && socialLinks && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__social-popup", children: [socialLinks.instagram && jsxRuntimeExports.jsx(SocialLink, { href: socialLinks.instagram, title: "Instagram", icon: "instagram" }), socialLinks.x && jsxRuntimeExports.jsx(SocialLink, { href: socialLinks.x, title: "X", icon: "x" }), socialLinks.linkedin && jsxRuntimeExports.jsx(SocialLink, { href: socialLinks.linkedin, title: "LinkedIn", icon: "linkedin" }), socialLinks.website && jsxRuntimeExports.jsx(SocialLink, { href: socialLinks.website, title: "Website", icon: "website" })] }))] })), variant === 'full' && (jsxRuntimeExports.jsxs("div", { className: "mds-profile-card__dynamic-group", children: [showRotatingInfo && (jsxRuntimeExports.jsx("span", { className: "mds-profile-card__dynamic-info", children: infoTexts[currentInfoIndex] })), jsxRuntimeExports.jsxs("div", { ref: verifiedRef, className: "mds-profile-card__verified-section", children: [jsxRuntimeExports.jsx("button", { className: "mds-profile-card__verified-trigger", onClick: (e) => {
+                                            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: "Professional", verified: user.verified >= 3 })] }), jsxRuntimeExports.jsxs("div", { 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 = {
     h1: 'h1',
     h2: 'h2',
@@ -2961,6 +3080,7 @@ exports.Modal = Modal;
 exports.ModalBody = ModalBody;
 exports.ModalFooter = ModalFooter;
 exports.ModalHeader = ModalHeader;
+exports.ProfileCard = ProfileCard;
 exports.Select = Select;
 exports.TableHeader = TableHeader;
 exports.TableRow = TableRow;