@metropolle/design-system 1.2026.0-1.4.1905 → 1.2026.0-1.7.1843

package/dist/css/components.css

@@ -162,6 +162,31 @@
   background: var(--mds-color-background-secondary);
 }
 
+/* Subtle variant - minimal border, muted colors, perfect for navigation buttons */
+.mds-button--subtle {
+  background: transparent;
+  border: 1px solid var(--mds-liquid-border-subtle, rgba(255, 255, 255, 0.12));
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.7));
+}
+
+.mds-button--subtle:hover:not(:disabled) {
+  background: var(--mds-liquid-bg-button, rgba(255, 255, 255, 0.08));
+  border-color: var(--mds-liquid-border-bright, rgba(255, 255, 255, 0.2));
+  color: var(--mds-color-text-primary);
+}
+
+/* Light theme adjustments for subtle */
+html[data-theme="light"] .mds-button--subtle {
+  border-color: var(--mds-liquid-border-subtle, rgba(0, 0, 0, 0.12));
+  color: var(--mds-color-text-secondary, rgba(0, 0, 0, 0.6));
+}
+
+html[data-theme="light"] .mds-button--subtle:hover:not(:disabled) {
+  background: var(--mds-liquid-bg-button, rgba(0, 0, 0, 0.05));
+  border-color: var(--mds-liquid-border-bright, rgba(0, 0, 0, 0.2));
+  color: var(--mds-color-text-primary);
+}
+
 .mds-button--glass {
   background: var(--mds-color-background-glass-light);
   color: var(--mds-color-text-primary);
@@ -3330,3 +3355,604 @@ html[data-theme="light"] .mds-settings-card {
   background: var(--mds-liquid-gradient);
   color: var(--mds-color-text-primary);
 }
+/**
+ * ProfileCard Component Styles
+ * Passport-style profile card with Liquid Glass aesthetic
+ * Supports light/dark themes via data-theme attribute
+ *
+ * @package @metropolle/design-system
+ */
+
+/* =============================================================================
+   Main Card
+   ============================================================================= */
+
+.mds-profile-card {
+  --mds-profile-card-photo-width: 280px;
+
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--mds-profile-card-photo-width) 1fr;
+  gap: 0;
+  /* Liquid Glass */
+  background: rgba(255, 255, 255, 0.03);
+  backdrop-filter: blur(24px) saturate(140%);
+  -webkit-backdrop-filter: blur(24px) saturate(140%);
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  box-shadow:
+    0 12px 40px rgba(0, 0, 0, 0.3),
+    inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  overflow: visible;
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  max-width: 800px;
+  width: 100%;
+  animation: mds-profile-card-reveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+@keyframes mds-profile-card-reveal {
+  from {
+    opacity: 0;
+    transform: translateY(20px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/* Light theme */
+html[data-theme="light"] .mds-profile-card {
+  background: rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(255, 255, 255, 0.8);
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 1);
+}
+
+/* =============================================================================
+   Grain Overlay
+   ============================================================================= */
+
+.mds-profile-card__grain {
+  position: absolute;
+  inset: 0;
+  border-radius: 24px;
+  opacity: 0.12;
+  mix-blend-mode: overlay;
+  pointer-events: none;
+  z-index: 5;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E");
+}
+
+html[data-theme="light"] .mds-profile-card__grain {
+  opacity: 0.05;
+}
+
+/* =============================================================================
+   Photo Section
+   ============================================================================= */
+
+.mds-profile-card__photo {
+  position: relative;
+  overflow: hidden;
+  z-index: 2;
+  border-radius: 24px 0 0 24px;
+  min-height: 272px;
+  background-color: rgba(26, 26, 46, 0.1);
+}
+
+html[data-theme="light"] .mds-profile-card__photo {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.mds-profile-card__avatar {
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center top;
+     object-position: center top;
+  display: block;
+}
+
+.mds-profile-card__photo-slot {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 272px;
+}
+
+/* =============================================================================
+   Content Section
+   ============================================================================= */
+
+.mds-profile-card__content {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 27px;
+  border-left: 1px solid rgba(255, 255, 255, 0.06);
+  z-index: 2;
+  gap: 16px;
+}
+
+html[data-theme="light"] .mds-profile-card__content {
+  border-left-color: rgba(0, 0, 0, 0.04);
+}
+
+/* =============================================================================
+   Identity Block
+   ============================================================================= */
+
+.mds-profile-card__identity {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.mds-profile-card__name {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 32px;
+  font-weight: normal;
+  color: var(--mds-color-text-primary, #ffffff);
+  margin: 0 0 5px 0;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  line-height: 1.2;
+}
+
+.mds-profile-card__profession {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 18px;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.7));
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  margin: 5px 0 0 0;
+}
+
+.mds-profile-card__username {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 15px;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
+  letter-spacing: 0.06em;
+  margin: 0;
+}
+
+/* =============================================================================
+   Details Block
+   ============================================================================= */
+
+.mds-profile-card__details {
+  width: 100%;
+}
+
+.mds-profile-card__location {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 18px;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
+  letter-spacing: 0.06em;
+  margin: 0 0 5px 0;
+}
+
+.mds-profile-card__username-detail {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 18px;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
+  letter-spacing: 0.06em;
+}
+
+.mds-profile-card__email {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 14px;
+  color: var(--mds-color-text-secondary, rgba(255, 255, 255, 0.7));
+  letter-spacing: 0.04em;
+  margin: 0 0 4px 0;
+}
+
+.mds-profile-card__member {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 11px;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.4));
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+/* =============================================================================
+   Verification Section (Compact Variant)
+   ============================================================================= */
+
+.mds-profile-card__verification {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 8px;
+}
+
+.mds-profile-card__verified-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: rgba(0, 212, 170, 0.1);
+  border: 1px solid rgba(0, 212, 170, 0.2);
+  border-radius: 100px;
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #00d4aa;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.mds-profile-card__verified-badge:hover {
+  background: rgba(0, 212, 170, 0.15);
+  border-color: rgba(0, 212, 170, 0.3);
+}
+
+.mds-profile-card__verified-badge svg {
+  width: 14px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.mds-profile-card__dots {
+  display: flex;
+  gap: 6px;
+}
+
+.mds-profile-card__dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.15);
+  transition: all 0.3s ease;
+}
+
+.mds-profile-card__dot.active {
+  background: #00d4aa;
+  box-shadow: 0 0 8px rgba(0, 212, 170, 0.4);
+}
+
+html[data-theme="light"] .mds-profile-card__dot {
+  background: rgba(0, 0, 0, 0.15);
+}
+
+/* =============================================================================
+   Social Section (Full Variant)
+   ============================================================================= */
+
+.mds-profile-card__social {
+  position: absolute;
+  bottom: 27px;
+  right: 27px;
+  z-index: 10;
+}
+
+.mds-profile-card__social-trigger {
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0;
+}
+
+.mds-profile-card__social-trigger svg {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+  transition: transform 0.3s ease;
+}
+
+.mds-profile-card__social-trigger:hover {
+  color: var(--mds-color-text-primary, #ffffff);
+}
+
+.mds-profile-card__social-trigger:hover svg {
+  transform: rotate(90deg);
+}
+
+.mds-profile-card__social-popup {
+  position: absolute;
+  bottom: 0;
+  right: 36px;
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  /* Liquid Glass popup */
+  background: rgba(20, 20, 30, 0.75);
+  backdrop-filter: blur(16px) saturate(140%);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.25),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  z-index: 20;
+}
+
+html[data-theme="light"] .mds-profile-card__social-popup {
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 1);
+}
+
+.mds-profile-card__social-link {
+  width: 38px;
+  height: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 10px;
+  color: rgba(255, 255, 255, 0.7);
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+
+.mds-profile-card__social-link:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+
+html[data-theme="light"] .mds-profile-card__social-link {
+  background: rgba(0, 0, 0, 0.05);
+  border-color: rgba(0, 0, 0, 0.08);
+  color: rgba(0, 0, 0, 0.7);
+}
+
+html[data-theme="light"] .mds-profile-card__social-link:hover {
+  background: rgba(0, 0, 0, 0.1);
+  color: #000000;
+}
+
+.mds-profile-card__social-link svg {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+}
+
+/* =============================================================================
+   Dynamic Info Group (Full Variant)
+   ============================================================================= */
+
+.mds-profile-card__dynamic-group {
+  position: absolute;
+  right: 27px;
+  top: 50%;
+  transform: translateY(-40%);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  z-index: 10;
+}
+
+.mds-profile-card__dynamic-info {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 11px;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+/* =============================================================================
+   Verified Section (Full Variant)
+   ============================================================================= */
+
+.mds-profile-card__verified-section {
+  position: relative;
+}
+
+.mds-profile-card__verified-trigger {
+  width: 22px;
+  height: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  color: rgba(255, 255, 255, 0.7);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  padding: 0;
+}
+
+html[data-theme="light"] .mds-profile-card__verified-trigger {
+  color: rgba(0, 0, 0, 0.6);
+}
+
+.mds-profile-card__verified-trigger:hover {
+  color: var(--mds-color-text-primary, #ffffff);
+}
+
+.mds-profile-card__verified-trigger svg {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+}
+
+.mds-profile-card__verified-popup {
+  position: absolute;
+  top: calc(100% + 12px);
+  right: 0;
+  padding: 16px;
+  /* Liquid Glass popup */
+  background: rgba(20, 20, 30, 0.75);
+  backdrop-filter: blur(16px) saturate(140%);
+  -webkit-backdrop-filter: blur(16px) saturate(140%);
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.25),
+    inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  min-width: 180px;
+  z-index: 20;
+}
+
+html[data-theme="light"] .mds-profile-card__verified-popup {
+  background: rgba(255, 255, 255, 0.7);
+  border: 1px solid rgba(255, 255, 255, 0.9);
+  box-shadow:
+    0 8px 24px rgba(0, 0, 0, 0.08),
+    inset 0 1px 0 rgba(255, 255, 255, 1);
+}
+
+.mds-profile-card__verified-header {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 12px;
+  font-weight: bold;
+  color: #00d4aa;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  margin-bottom: 14px;
+  white-space: nowrap;
+}
+
+.mds-profile-card__verified-stats {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mds-profile-card__stat-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+}
+
+.mds-profile-card__stat-label {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 11px;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
+  letter-spacing: 0.06em;
+}
+
+.mds-profile-card__stat-value {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.5));
+}
+
+.mds-profile-card__stat-value--verified {
+  color: #00d4aa;
+}
+
+.mds-profile-card__verified-date {
+  font-family: 'OCR-B', 'OCR B Std', 'Courier New', monospace;
+  font-size: 10px;
+  color: var(--mds-color-text-tertiary, rgba(255, 255, 255, 0.4));
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-top: 14px;
+  padding-top: 10px;
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+html[data-theme="light"] .mds-profile-card__verified-date {
+  border-top-color: rgba(0, 0, 0, 0.06);
+}
+
+/* Info dots (for rotating info) */
+.mds-profile-card__info-dots {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mds-profile-card__info-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+.mds-profile-card__info-dot.active {
+  background: rgba(255, 255, 255, 0.8);
+  transform: scale(1.3);
+}
+
+html[data-theme="light"] .mds-profile-card__info-dot {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+html[data-theme="light"] .mds-profile-card__info-dot.active {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+/* =============================================================================
+   Responsive
+   ============================================================================= */
+
+@media (max-width: 700px) {
+  .mds-profile-card {
+    grid-template-columns: 1fr;
+    max-width: 400px;
+  }
+
+  .mds-profile-card__photo {
+    border-radius: 24px 24px 0 0;
+    min-height: 280px;
+  }
+
+  .mds-profile-card__content {
+    border-left: none;
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    padding: 20px;
+    align-items: center;
+    text-align: center;
+  }
+
+  html[data-theme="light"] .mds-profile-card__content {
+    border-top-color: rgba(0, 0, 0, 0.04);
+  }
+
+  .mds-profile-card__identity,
+  .mds-profile-card__details {
+    text-align: center;
+  }
+
+  .mds-profile-card__verification {
+    justify-content: center;
+  }
+
+  .mds-profile-card__dynamic-group {
+    position: static;
+    transform: none;
+    justify-content: center;
+    margin-top: 16px;
+  }
+
+  .mds-profile-card__social {
+    position: static;
+    margin-top: 16px;
+  }
+}
+
+@media (max-width: 480px) {
+  .mds-profile-card__name {
+    font-size: 24px;
+  }
+
+  .mds-profile-card__profession,
+  .mds-profile-card__location,
+  .mds-profile-card__username-detail {
+    font-size: 14px;
+  }
+}

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

@@ -1,7 +1,7 @@
 import React, { ButtonHTMLAttributes } from 'react';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Variante visual do botão */
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'glass' | 'danger';
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'subtle' | 'glass' | 'danger';
     /** Tamanho do botão */
     size?: 'sm' | 'md' | 'lg';
     /** Estado de loading */

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGhE,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC7E,uBAAuB;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,MAAM,uFA4DjB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../src/components/react/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAGhE,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,+BAA+B;IAC/B,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAC;IACxF,uBAAuB;IACvB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,wBAAwB;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,+BAA+B;IAC/B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,MAAM,uFA4DjB,CAAC"}

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

@@ -0,0 +1,55 @@
+/**
+ * ProfileCard Component
+ * Passport-style profile card with Liquid Glass aesthetic
+ * Supports light/dark themes via CSS variables
+ *
+ * @package @metropolle/design-system
+ */
+import React from 'react';
+export interface ProfileCardUser {
+    identity_id: string;
+    full_name: string;
+    username: string;
+    created_at: string;
+    verified: number;
+    email?: string;
+    profession_code?: string;
+    profession_name?: string;
+    city_code?: string;
+    city_name?: string;
+    state_code?: string;
+    state_name?: string;
+    country_code?: string;
+    country_name?: string;
+    photo_url_thumbnail?: string;
+    photo_url_medium?: string;
+    photo_url_full?: string;
+}
+export interface ProfileCardProps {
+    /** User data to display */
+    user: ProfileCardUser;
+    /** Card variant - 'full' shows all fields, 'compact' shows minimal */
+    variant?: 'full' | 'compact';
+    /** Photo section width in pixels (default: 280 for full, 200 for compact) */
+    photoWidth?: number;
+    /** Show social links section */
+    showSocial?: boolean;
+    /** Social links (optional) */
+    socialLinks?: {
+        instagram?: string;
+        x?: string;
+        linkedin?: string;
+        website?: string;
+    };
+    /** Show rotating info text */
+    showRotatingInfo?: boolean;
+    /** Custom photo element (for photo upload) */
+    photoSlot?: React.ReactNode;
+    /** Additional CSS class */
+    className?: string;
+    /** Callback when social button is clicked */
+    onSocialClick?: () => void;
+}
+export declare function ProfileCard({ user, variant, photoWidth, showSocial, socialLinks, showRotatingInfo, photoSlot, className, onSocialClick, }: ProfileCardProps): import("react/jsx-runtime").JSX.Element;
+export default ProfileCard;
+//# sourceMappingURL=ProfileCard.d.ts.map

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

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

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

@@ -0,0 +1,3 @@
+export { ProfileCard, type ProfileCardProps, type ProfileCardUser } from './ProfileCard';
+export { default } from './ProfileCard';
+//# sourceMappingURL=index.d.ts.map