@metropolle/design-system 1.2026.0-1.15.1323 → 1.2026.0-1.17.117

package/README.md

@@ -81,3 +81,4 @@ npm test
 MIT License - see LICENSE file for details.
 
 
+

package/dist/css/components.css

@@ -1116,9 +1116,10 @@ html[data-theme="light"] select.mds-input {
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 8px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden; /* Changed from auto to hidden - scroll is on .mds-select-options */
   animation: mds-select-dropdown-enter 0.15s ease-out;
+  display: flex;
+  flex-direction: column;
 }
 
 @keyframes mds-select-dropdown-enter {
@@ -1134,9 +1135,7 @@ html[data-theme="light"] select.mds-input {
 
 /* Select Search */
 .mds-select-search {
-  position: sticky;
-  top: 0;
-  z-index: 1;
+  flex-shrink: 0; /* Don't shrink in flex container */
   padding: 8px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.1);
   background-color: var(--mds-dashboard-control-option-bg, #2a2a2a);
@@ -1185,7 +1184,8 @@ html[data-theme="light"] select.mds-input {
   margin: 0;
   padding: 4px;
   overflow-y: auto;
-  max-height: inherit;
+  flex: 1;
+  min-height: 0; /* Required for flex scroll */
 }
 
 /* Select Option */
@@ -3978,3 +3978,106 @@ html[data-theme="light"] .mds-profile-card__info-dot.active {
     font-size: 14px;
   }
 }
+
+/* =============================================================================
+   Clickable Avatar
+   ============================================================================= */
+
+.mds-profile-card__avatar--clickable {
+  cursor: pointer;
+  transition: transform 0.2s ease, filter 0.2s ease;
+}
+
+.mds-profile-card__avatar--clickable:hover {
+  transform: scale(1.02);
+  filter: brightness(1.05);
+}
+
+.mds-profile-card__avatar--clickable:focus {
+  outline: 2px solid var(--mds-color-accent-primary, #00d4ff);
+  outline-offset: 2px;
+}
+
+/* =============================================================================
+   Photo Modal (Liquid Glass)
+   ============================================================================= */
+
+.mds-profile-card__photo-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  cursor: pointer;
+  animation: mds-photo-modal-fade-in 0.25s ease-out;
+}
+
+@keyframes mds-photo-modal-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.mds-profile-card__photo-modal-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(10, 10, 15, 0.6);
+  backdrop-filter: blur(20px) saturate(120%);
+  -webkit-backdrop-filter: blur(20px) saturate(120%);
+}
+
+html[data-theme="light"] .mds-profile-card__photo-modal-backdrop {
+  background: rgba(255, 255, 255, 0.5);
+  backdrop-filter: blur(20px) saturate(140%);
+  -webkit-backdrop-filter: blur(20px) saturate(140%);
+}
+
+.mds-profile-card__photo-modal-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 90vw;
+  max-height: 90vh;
+  animation: mds-photo-modal-scale-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes mds-photo-modal-scale-in {
+  from {
+    opacity: 0;
+    transform: scale(0.92);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.mds-profile-card__photo-modal-image {
+  max-width: 100%;
+  max-height: 90vh;
+  -o-object-fit: contain;
+     object-fit: contain;
+  border-radius: 20px;
+  /* Liquid Glass frame */
+  background: rgba(255, 255, 255, 0.03);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow:
+    0 25px 80px rgba(0, 0, 0, 0.4),
+    0 10px 30px rgba(0, 0, 0, 0.2),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+html[data-theme="light"] .mds-profile-card__photo-modal-image {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.8);
+  box-shadow:
+    0 25px 80px rgba(0, 0, 0, 0.15),
+    0 10px 30px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 1);
+}

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;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,IAAI,EAAE,eAAe,CAAC;IAEtB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE7B,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,gCAAgC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,8BAA8B;IAC9B,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IAEF,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAwID,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAgB,EAChB,UAAU,EACV,UAAkB,EAClB,WAAW,EACX,gBAAwB,EACxB,SAAS,EACT,SAAc,EACd,aAAa,GACd,EAAE,gBAAgB,2CAwOlB;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ProfileCard.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/ProfileCard/ProfileCard.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AAEH,OAAO,KAAsC,MAAM,OAAO,CAAC;AAO3D,MAAM,WAAW,eAAe;IAE9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IAGjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,MAAM,CAAC;IAGtB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,IAAI,EAAE,eAAe,CAAC;IAEtB,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAE7B,6EAA6E;IAC7E,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB,gCAAgC;IAChC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,8BAA8B;IAC9B,WAAW,CAAC,EAAE;QACZ,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,CAAC;KAClB,CAAC;IAEF,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAwID,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAgB,EAChB,UAAU,EACV,UAAkB,EAClB,WAAW,EACX,gBAAwB,EACxB,SAAS,EACT,SAAc,EACd,aAAa,GACd,EAAE,gBAAgB,2CAqQlB;AAED,eAAe,WAAW,CAAC"}

package/dist/react/index.esm.js

@@ -1514,6 +1514,7 @@ function StatItem({ label, verified }) {
 function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, socialLinks, showRotatingInfo = false, photoSlot, className = '', onSocialClick, }) {
     const [showVerifiedPopup, setShowVerifiedPopup] = useState(false);
     const [showSocialPopup, setShowSocialPopup] = useState(false);
+    const [showPhotoModal, setShowPhotoModal] = useState(false);
     const [currentInfoIndex, setCurrentInfoIndex] = useState(0);
     const [isDarkTheme, setIsDarkTheme] = useState(true);
     const verifiedRef = useRef(null);
@@ -1542,7 +1543,7 @@ function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, s
         `Member since ${new Date(user.created_at).getFullYear()}`,
         ...(user.verified >= 1 ? ['Email Verified'] : []),
         ...(user.verified >= 2 ? ['Identity Verified'] : []),
-        ...(user.verified >= 3 ? ['Professional Verified'] : []),
+        ...(user.verified >= 3 ? ['Area Verified'] : []),
     ];
     // Rotate info text
     useEffect(() => {
@@ -1568,7 +1569,8 @@ function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, s
     }, []);
     // Get display values
     const displayName = user.full_name || user.username || 'User';
-    const profession = user.profession_name || user.profession_code || '';
+    // Always show profession_name (full name like "Developer") instead of code (like "DEV")
+    const profession = user.profession_name || '';
     const getLocation = () => {
         if (!user.city_code && !user.state_code && !user.country_code)
             return null;
@@ -1580,10 +1582,13 @@ function ProfileCard({ user, variant = 'full', photoWidth, showSocial = false, s
     };
     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(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) => {
+    // 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) => {
                                     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) => {
+                                }, 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) => {
                                     e.stopPropagation();
                                     setShowSocialPopup(!showSocialPopup);
                                     setShowVerifiedPopup(false);
@@ -1592,7 +1597,7 @@ 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: "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))) }))] }))] })] }));
+                                        }, 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-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 = {