@inchurch/matcha-theme 20.0.11 → 20.277.0

package/components/matcha-file-uploader.scss

@@ -0,0 +1,462 @@
+@use "sass:map";
+
+// =============================================================================
+// matcha-file-uploader.scss — File upload component (matcha/file-uploader no Figma DSV3)
+//
+// 3 estados canon (16152:254):
+//   Estado=Dropzone  (16152:209) — área vazia com icon pill + title + hint + 2 botões
+//   Estado=Enviando  (16152:227) — thumb 64×36 + nome + progress + % + cancel
+//   Estado=Completo  (16152:242) — thumb 64×36 + nome + size + delete (trash)
+//
+// Width canon: 480px (component se adapta via max-width: 480px + width: 100%)
+// =============================================================================
+
+@mixin matcha-file-uploader-theme($theme) {
+
+  // ── Dropzone ──
+  .matcha-file-uploader-dropzone {
+    background: var(--matcha-color-surface-background, var(--matcha-color-surface-bg));
+    border-color: var(--matcha-color-surface-border);
+
+    &.matcha-file-uploader-dragover {
+      background: var(--matcha-color-accent-alpha);
+      border-color: var(--matcha-color-accent);
+    }
+
+    &.matcha-file-uploader-disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  .matcha-file-uploader-dropzone__icon-pill {
+    background: var(--matcha-color-interaction-disabled-bg, #282c34);
+    color: var(--matcha-color-text-secondary);
+  }
+
+  .matcha-file-uploader-dropzone__title {
+    color: var(--matcha-color-text-primary);
+  }
+
+  .matcha-file-uploader-dropzone__optional {
+    color: var(--matcha-color-interaction-disabled-fg, rgba(232, 234, 237, 0.38));
+  }
+
+  .matcha-file-uploader-dropzone__hint {
+    color: var(--matcha-color-text-secondary);
+  }
+
+  // ── File item ──
+  .matcha-file-uploader-file {
+    background: var(--matcha-color-surface-card);
+    border-color: var(--matcha-color-surface-border);
+  }
+
+  .matcha-file-uploader-file__thumb {
+    background: var(--matcha-color-elevation-surface-3, var(--matcha-color-surface-card));
+    color: var(--matcha-color-text-muted);
+  }
+
+  .matcha-file-uploader-file__name {
+    color: var(--matcha-color-text-primary);
+  }
+
+  .matcha-file-uploader-file__size {
+    color: var(--matcha-color-text-secondary);
+  }
+
+  .matcha-file-uploader-file__progress {
+    background: var(--matcha-color-surface-border);
+  }
+
+  .matcha-file-uploader-file__progress-fill {
+    background: var(--matcha-color-accent);
+  }
+
+  .matcha-file-uploader-file__percent {
+    color: var(--matcha-color-text-secondary);
+  }
+
+  .matcha-file-uploader-file__error-text {
+    color: var(--matcha-color-danger);
+  }
+
+  .matcha-file-uploader-file__action {
+    color: var(--matcha-color-text-secondary);
+
+    &:hover {
+      background: var(--matcha-color-surface-hover, transparent);
+      color: var(--matcha-color-text-primary);
+    }
+
+    &.matcha-file-uploader-file__action--delete:hover {
+      color: var(--matcha-color-danger);
+    }
+  }
+
+  // ── Card layout (preview preenchido) ──
+  .matcha-file-uploader-card {
+    border-color: var(--matcha-color-surface-border);
+  }
+
+  // contain (logo/transparência): fundo neutro atrás da imagem inteira
+  .matcha-file-uploader-card--contain {
+    background: var(--matcha-color-surface-card);
+  }
+
+  .matcha-file-uploader-card__action {
+    background: var(--matcha-color-surface-card-alpha, var(--matcha-color-surface-card));
+    color: var(--matcha-color-text-primary);
+
+    &:hover {
+      background: var(--matcha-color-surface-card);
+    }
+  }
+}
+
+// ──────────────────────────────────────────────────────────────────────────────
+// LAYOUT — independente de tema
+// ──────────────────────────────────────────────────────────────────────────────
+
+// Host — full-width; consumer aplica max-width externamente se quiser cap
+.matcha-file-uploader {
+  display: block;
+  width: 100%;
+}
+
+// ── Empty state wrapper (dropzone + ação secundária FORA do drop) ──────────
+.matcha-file-uploader-empty {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-150, 12px);
+  width: 100%;
+}
+
+// Ação secundária (Gabarito, Tirar foto, etc.) — centrada abaixo do box
+.matcha-file-uploader-secondary {
+  display: flex;
+  justify-content: center;
+
+  &:empty { display: none; } // sem slot projetado → não ocupa espaço
+}
+
+// ── Dropzone box (Estado=Dropzone — Figma 16152:209) — a zona INTEIRA é o alvo
+.matcha-file-uploader-dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--matcha-space-200, 16px);
+  padding: var(--matcha-space-400, 32px) var(--matcha-space-300, 24px);
+  border: var(--matcha-border-thin, 2px) dashed transparent;
+  border-radius: var(--matcha-radius-lg, 8px);
+  cursor: pointer;
+  transition: background-color var(--matcha-duration-instant, 80ms) linear,
+              border-color var(--matcha-duration-instant, 80ms) linear;
+
+  &:focus-visible {
+    outline: var(--matcha-border-thin, 2px) solid var(--matcha-color-accent, #009400);
+    outline-offset: 2px;
+  }
+}
+
+// Icon pill (bg interaction/disabled-bg + padding 40h/16v · icon 24×24)
+.matcha-file-uploader-dropzone__icon-pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--matcha-space-200, 16px) var(--matcha-space-500, 40px);
+  border-radius: var(--matcha-radius-pill, 9999px);
+  flex-shrink: 0;
+
+  matcha-icon {
+    --matcha-icon-size: 24px;
+    width: 24px;
+    height: 24px;
+  }
+}
+
+// Text block — column gap 4px, center
+.matcha-file-uploader-dropzone__text {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--matcha-space-050, 4px);
+  text-align: center;
+  width: 100%;
+}
+
+// Title row (inline: title + optional)
+.matcha-file-uploader-dropzone__title-row {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--matcha-space-050, 4px);
+  white-space: nowrap;
+}
+
+.matcha-file-uploader-dropzone__title {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-label-md, 14px);
+  font-weight: var(--matcha-weight-medium, 500);
+  line-height: var(--matcha-leading-label-md, 20px);
+}
+
+.matcha-file-uploader-dropzone__optional {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-label-md, 14px);
+  font-weight: var(--matcha-weight-medium, 500);
+  line-height: var(--matcha-leading-label-md, 20px);
+}
+
+.matcha-file-uploader-dropzone__hint {
+  margin: 0;
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-sm, 12px);
+  font-weight: var(--matcha-weight-regular, 400);
+  line-height: var(--matcha-leading-body-sm, 16px);
+  white-space: pre-line; // suporta \n pra hint multi-linha (1280×720 px... \n Clique pra selecionar...)
+}
+
+// Actions row (slot secondary + select arquivo)
+// Hidden input
+.matcha-file-uploader-input {
+  display: none;
+}
+
+// ── File Item — Estados Enviando (16152:227) e Completo (16152:242) ──────────
+.matcha-file-uploader-file {
+  display: flex;
+  align-items: center;
+  gap: var(--matcha-space-200, 16px);
+  border: var(--matcha-border-hairline, 1px) solid transparent;
+  border-radius: var(--matcha-radius-lg, 8px);
+  margin-top: var(--matcha-space-100, 8px);
+  width: 100%;
+
+  // Enviando: padding 20/24 (mais respiro vs. Figma original 16)
+  &.matcha-file-uploader-file--uploading {
+    padding: var(--matcha-space-250, 20px) var(--matcha-space-300, 24px);
+  }
+
+  // Completo/Erro: padding 20/24 (mais respiro vs. Figma original 12/16)
+  &.matcha-file-uploader-file--completed,
+  &.matcha-file-uploader-file--error {
+    padding: var(--matcha-space-250, 20px) var(--matcha-space-300, 24px);
+  }
+}
+
+// Thumbnail 64×36 (16:9 · radius lg)
+.matcha-file-uploader-file__thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 64px;
+  height: 36px;
+  border-radius: var(--matcha-radius-lg, 8px);
+  flex-shrink: 0;
+  overflow: hidden;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  matcha-icon {
+    --matcha-icon-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+}
+
+// Info column (flex-1)
+.matcha-file-uploader-file__info {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+
+  // Enviando: gap 6 (entre nome e progress bar)
+  .matcha-file-uploader-file--uploading & {
+    gap: var(--matcha-space-075, 6px);
+  }
+
+  // Completo: gap 4 (entre nome e size)
+  .matcha-file-uploader-file--completed &,
+  .matcha-file-uploader-file--error & {
+    gap: var(--matcha-space-050, 4px);
+  }
+}
+
+// File name — Manrope Medium 13/19 letter 0.2 (text/button-sm)
+.matcha-file-uploader-file__name {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-label-sm, 12px);
+  font-weight: var(--matcha-weight-medium, 500);
+  line-height: var(--matcha-leading-label-sm, 16px);
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// File size — Manrope Regular 11/14 letter 0.3 (text/caption)
+.matcha-file-uploader-file__size {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-p-tiny, 11px);
+  font-weight: var(--matcha-weight-regular, 400);
+  line-height: var(--matcha-leading-p-tiny, 14px);
+  letter-spacing: 0.3px;
+}
+
+// Error text — body-sm danger
+.matcha-file-uploader-file__error-text {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-sm, 12px);
+  font-weight: var(--matcha-weight-regular, 400);
+  line-height: var(--matcha-leading-body-sm, 16px);
+}
+
+// ── Progress bar (height 4px · radius sm) ─────────────────────────────────────
+.matcha-file-uploader-file__progress {
+  width: 100%;
+  height: 4px;
+  border-radius: var(--matcha-radius-sm, 2px);
+  overflow: hidden;
+}
+
+.matcha-file-uploader-file__progress-fill {
+  height: 100%;
+  border-radius: var(--matcha-radius-sm, 2px);
+  transition: width var(--matcha-duration-moderate, 300ms) ease;
+}
+
+// Percent label — body-sm text-secondary
+.matcha-file-uploader-file__percent {
+  font-family: var(--matcha-font-family);
+  font-size: var(--matcha-text-body-sm, 12px);
+  font-weight: var(--matcha-weight-regular, 400);
+  line-height: var(--matcha-leading-body-sm, 16px);
+  flex-shrink: 0;
+}
+
+// Cancel/Delete action button — 20×20 (icon size + bg transparent + hover)
+.matcha-file-uploader-file__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--matcha-radius-sm, 2px);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--matcha-duration-instant, 80ms) linear,
+              color var(--matcha-duration-instant, 80ms) linear;
+
+  matcha-icon {
+    --matcha-icon-size: 20px;
+    width: 20px;
+    height: 20px;
+  }
+}
+
+// ── Card layout — preview preenchido 16:9 + ações no hover (Estado=Drop filled) ──
+.matcha-file-uploader-card {
+  position: relative;
+  width: 100%;
+  margin-top: var(--matcha-space-100, 8px);
+  border: var(--matcha-border-hairline, 1px) solid transparent;
+  border-radius: var(--matcha-radius-lg, 8px);
+  overflow: hidden;
+  aspect-ratio: 16 / 9; // fallback; sobrescrito por [style.aspect-ratio]="previewRatio"
+}
+
+.matcha-file-uploader-card__img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover; // sobrescrito por [style.object-fit]="previewFit"
+}
+
+.matcha-file-uploader-card__actions {
+  position: absolute;
+  top: var(--matcha-space-100, 8px);
+  right: var(--matcha-space-100, 8px);
+  display: flex;
+  gap: var(--matcha-space-100, 8px);
+  opacity: 0;
+  transition: opacity var(--matcha-duration-instant, 80ms) linear;
+}
+
+.matcha-file-uploader-card:hover .matcha-file-uploader-card__actions,
+.matcha-file-uploader-card:focus-within .matcha-file-uploader-card__actions {
+  opacity: 1;
+}
+
+.matcha-file-uploader-card__action {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: none;
+  border-radius: var(--matcha-radius-pill, 9999px);
+  cursor: pointer;
+  backdrop-filter: blur(8px);
+  transition: background-color var(--matcha-duration-instant, 80ms) linear;
+
+  matcha-icon {
+    --matcha-icon-size: 18px;
+    width: 18px;
+    height: 18px;
+  }
+}
+
+// ── Cropper inline (modo crop: imagem única) ──────────────────────────────
+.matcha-file-uploader-cropper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--matcha-space-150, 12px);
+  margin-top: var(--matcha-space-100, 8px);
+}
+
+.matcha-file-uploader-cropper matcha-crop {
+  display: block;
+  width: 100%;
+  min-height: 280px;
+}
+
+.matcha-file-uploader-cropper__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--matcha-space-100, 8px);
+}
+
+// ── Responsive ───────────────────────────────────────────────────────────────
+@include media-breakpoint('xs') {
+  .matcha-file-uploader-dropzone {
+    padding: var(--matcha-space-300, 24px) var(--matcha-space-200, 16px);
+  }
+
+  .matcha-file-uploader-dropzone__icon-pill {
+    padding: var(--matcha-space-150, 12px) var(--matcha-space-400, 32px);
+  }
+}
+
+// ── Reduced motion ───────────────────────────────────────────────────────────
+@media (prefers-reduced-motion: reduce) {
+  .matcha-file-uploader-dropzone,
+  .matcha-file-uploader-file__progress-fill,
+  .matcha-file-uploader-file__action,
+  .matcha-file-uploader-card__actions,
+  .matcha-file-uploader-card__action {
+    transition: none;
+  }
+}

package/components/matcha-flag.scss

@@ -1,62 +1,103 @@
-@use "sass:map";
-
 // =============================================================================
-// matcha-flag.scss — Country flags & payment brand flags
-// Aligned with Figma matcha/flag/país + matcha/flag/pagamento:
-//   País: 4 variants (Brasil, EUA, Portugal, Espanha) — 22×16px (2:3)
-//   Pagamento: 20 variants (Mastercard, Visa, PIX...) — 32×24px
-//   Used in: phone DDI selector, payment forms, transaction lists
-// Angular: matcha-flag
+// matcha-flag.scss — Bandeiras (country) + Pagamento (payment)
+//
+// 1:1 Figma DSV3 (i04CyWczuVctwRjE5VbJh7):
+//   - matcha/flag/country  (3969:15347)  — 24x24 frame, 22x16 flag (2:3)
+//   - matcha/flag/payment  (3205:13569)  — 32x24 SVG card (4:3)
+//
+// API host attrs (set pelo MatchaFlagComponent):
+//   data-set   — country | payment
+//   data-name  — slug (brasil, visa, pix, etc.)
+//   data-size  — sm | md | lg
+//
+// Componentes:
+//   .matcha-flag                — host (inline-flex, alinha + tamanho)
+//   .matcha-flag__emoji         — span unicode (country)
+//   .matcha-flag__svg           — wrapper innerHTML SVG (payment)
+//
+// Usado em: matcha-phone (DDI), forms de pagamento, transaction lists, hero CTA.
 // =============================================================================
 
-// ── Layout ──────────────────────────────────────────────────────────────────
-
-.matcha-flag {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  overflow: hidden;
-
-  img, svg {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-// ── Country flags (2:3 ratio) ───────────────────────────────────────────────
+@mixin matcha-flag($theme) {
 
-.matcha-flag--country {
-  width: 22px;
-  height: 16px;
-  border-radius: var(--matcha-radius-sm, 2px);
-}
+    // ── Host ─────────────────────────────────────────────────────────────────
+    .matcha-flag {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+        overflow: hidden;
+        line-height: 1;
+        // Default size = md (sobrescrito por data-size abaixo)
+        width: var(--matcha-flag-w, 32px);
+        height: var(--matcha-flag-h, 24px);
+        border-radius: var(--matcha-radius-sm, 2px);
+    }
 
-.matcha-flag--country-lg {
-  width: 32px;
-  height: 24px;
-  border-radius: var(--matcha-radius-sm, 2px);
-}
+    // ── Emoji (country) ─────────────────────────────────────────────────────
+    // Emoji ocupa o box todo; font-size ditando o tamanho do glyph.
+    .matcha-flag__emoji {
+        font-size: calc(var(--matcha-flag-h, 24px) * 0.95);
+        line-height: 1;
+        // Emoji-style render — força o emoji color (algumas fonts renderizam
+        // o codepoint como texto B&W; emoji color preserva as cores nacionais)
+        font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
+        font-variant-emoji: emoji;
+    }
 
-// ── Payment flags (4:3 ratio) ───────────────────────────────────────────────
+    // ── SVG (payment) ───────────────────────────────────────────────────────
+    .matcha-flag__svg {
+        display: inline-flex;
+        width: 100%;
+        height: 100%;
 
-.matcha-flag--payment {
-  width: 32px;
-  height: 24px;
-  border-radius: var(--matcha-radius-sm, 2px);
-}
-
-.matcha-flag--payment-lg {
-  width: 48px;
-  height: 36px;
-  border-radius: var(--matcha-radius-md, 4px);
-}
+        svg {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+    }
 
-// ── Theme (border for visibility on dark/light) ────────────────────────────
+    // ── Set: country — 2:3 aspect ratio ─────────────────────────────────────
+    .matcha-flag[data-set="country"] {
+        --matcha-flag-w: 22px;
+        --matcha-flag-h: 16px;
+    }
+    .matcha-flag[data-set="country"][data-size="small"],
+    .matcha-flag[data-set="country"][data-size="sm"] {
+        --matcha-flag-w: 16px;
+        --matcha-flag-h: 12px;
+    }
+    .matcha-flag[data-set="country"][data-size="medium"],
+    .matcha-flag[data-set="country"][data-size="md"] {
+        --matcha-flag-w: 22px;
+        --matcha-flag-h: 16px;
+    }
+    .matcha-flag[data-set="country"][data-size="large"],
+    .matcha-flag[data-set="country"][data-size="lg"] {
+        --matcha-flag-w: 32px;
+        --matcha-flag-h: 24px;
+    }
 
-@mixin matcha-flag-theme($theme) {
-  .matcha-flag {
-    border: var(--matcha-border-hairline, 1px) solid var(--matcha-color-border, #{getGrey($theme)});
-  }
+    // ── Set: payment — 4:3 aspect ratio ─────────────────────────────────────
+    .matcha-flag[data-set="payment"] {
+        --matcha-flag-w: 32px;
+        --matcha-flag-h: 24px;
+    }
+    .matcha-flag[data-set="payment"][data-size="small"],
+    .matcha-flag[data-set="payment"][data-size="sm"] {
+        --matcha-flag-w: 24px;
+        --matcha-flag-h: 18px;
+    }
+    .matcha-flag[data-set="payment"][data-size="medium"],
+    .matcha-flag[data-set="payment"][data-size="md"] {
+        --matcha-flag-w: 32px;
+        --matcha-flag-h: 24px;
+    }
+    .matcha-flag[data-set="payment"][data-size="large"],
+    .matcha-flag[data-set="payment"][data-size="lg"] {
+        --matcha-flag-w: 48px;
+        --matcha-flag-h: 36px;
+        border-radius: var(--matcha-radius-md, 4px);
+    }
 }