@ffid-br/tailor-ui 0.5.0 → 0.7.0

package/dist/style.css

@@ -18,7 +18,289 @@
   --tailor-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 }
 
-/* TailorLoader — a malha pequena se desenha a partir do ponto e some, em 2φ (3,236s). */
+/*
+ * Marca do cliente: componentes que leem estas variáveis vestem a marca de quem
+ * usa. Padrão Tailor aqui, em :where() para qualquer CSS do app sobrescrever
+ * (ou o componente TailorMarca). Tema escuro: `.dark` ou `[data-theme="dark"]`.
+ */
+:where(:root) {
+  /* Seguem os tokens do Tailwind do app: quem já troca --color-tailor-green pela
+     cor do cliente (accounts, brandTheme) leva o cabeçalho junto. */
+  --tailor-brand-primary: var(--color-tailor-green, var(--tailor-green));
+  --tailor-brand-primary-text: var(--color-tailor-ink, var(--tailor-ink));
+  --tailor-brand-text: var(--tailor-black);
+  --tailor-brand-text-muted: #666666;
+  --tailor-brand-border: #E5E5E5;
+  --tailor-brand-background: transparent;
+  --tailor-brand-heading-font: var(--tailor-font);
+  --tailor-brand-body-font: var(--tailor-font);
+  --tailor-brand-heading-weight: 500;
+  --tailor-brand-heading-case: none;
+  --tailor-brand-radius: 0;
+}
+:where(.dark, [data-theme="dark"]) {
+  --tailor-brand-primary-text: var(--color-tailor-green, var(--tailor-green));
+  --tailor-brand-text: var(--tailor-white);
+  --tailor-brand-text-muted: #A3A3A3;
+  --tailor-brand-border: rgba(255, 255, 255, 0.1);
+}
+.tailor-brand { display: contents; }
+
+/* TailorPageHeader — cada medida tem a sua variável --tailor-header-*. */
+.tailor-ph {
+  display: flex; flex-direction: column; gap: 21px;
+  padding: var(--tailor-header-padding, 0 0 21px);
+  background: var(--tailor-header-background, var(--tailor-brand-background));
+  border-bottom: var(--tailor-header-rule, 1px solid var(--tailor-brand-border));
+  color: var(--tailor-brand-text);
+  font-family: var(--tailor-brand-body-font);
+}
+.tailor-ph__row { display: flex; flex-direction: column; gap: 21px; }
+@media (min-width: 640px) {
+  .tailor-ph__row { flex-direction: row; align-items: flex-end; justify-content: space-between; }
+}
+.tailor-ph__main { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
+.tailor-ph__back {
+  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
+  font: inherit; font-size: 13px; color: var(--tailor-brand-text-muted); text-decoration: none; border-radius: var(--tailor-brand-radius);
+}
+.tailor-ph__back:hover, .tailor-ph__breadcrumb-link:hover { color: var(--tailor-brand-text); }
+.tailor-ph__breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--tailor-brand-text-muted); }
+.tailor-ph__breadcrumbs li { display: flex; align-items: center; gap: 6px; }
+.tailor-ph__breadcrumb-link { color: inherit; text-decoration: none; }
+.tailor-ph__breadcrumbs [aria-current="page"] { color: var(--tailor-brand-text); }
+.tailor-ph__back:focus-visible, .tailor-ph__breadcrumb-link:focus-visible { outline: 3px solid var(--tailor-brand-primary); outline-offset: 2px; }
+.tailor-ph__eyebrow {
+  display: flex; align-items: center; gap: 8px; margin: 5px 0 0;
+  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
+  color: var(--tailor-brand-primary-text);
+}
+.tailor-ph__dot { width: 8px; height: 8px; background: var(--tailor-brand-primary); border-radius: var(--tailor-brand-radius); }
+.tailor-ph__title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
+.tailor-ph__title {
+  margin: 0; line-height: 1.1;
+  font-family: var(--tailor-brand-heading-font); font-weight: var(--tailor-brand-heading-weight);
+  text-transform: var(--tailor-brand-heading-case);
+  font-size: var(--tailor-header-title-size, clamp(26px, 4vw, 42px));
+}
+.tailor-ph__description { margin: 0; max-width: 610px; font-size: 16px; line-height: 1.618; color: var(--tailor-brand-text-muted); }
+.tailor-ph__aside { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 13px; }
+.tailor-ph__stat { text-align: right; }
+.tailor-ph__stat-value { display: block; font-size: 26px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--tailor-brand-heading-font); }
+.tailor-ph__stat-label { display: block; margin-top: 8px; font-size: 13px; color: var(--tailor-brand-text-muted); }
+.tailor-ph__below { min-width: 0; }
+
+/* TailorTabela — relatório. Medidas em --tailor-table-*, cores da marca. */
+.tailor-table {
+  border: 1px solid var(--tailor-brand-border); background: var(--tailor-table-background, transparent);
+  color: var(--tailor-brand-text); font-family: var(--tailor-brand-body-font); border-radius: var(--tailor-brand-radius);
+}
+.tailor-table__scroll { overflow-x: auto; }
+.tailor-table table { width: 100%; border-collapse: collapse; font-size: var(--tailor-table-font, 14px); }
+.tailor-table__caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.tailor-table th {
+  padding: var(--tailor-table-header-padding, 10px 13px); white-space: nowrap;
+  font-size: 10px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
+  color: var(--tailor-brand-text-muted); background: var(--tailor-table-header, color-mix(in srgb, var(--tailor-brand-text) 3%, transparent));
+  border-bottom: 1px solid var(--tailor-brand-border);
+}
+.tailor-table__sticky th { position: sticky; top: var(--tailor-table-top, 0); z-index: 1; background: var(--tailor-table-sticky-top, var(--tailor-white)); }
+:where(.dark, [data-theme="dark"]) .tailor-table__sticky th { background: var(--tailor-table-sticky-top, var(--tailor-black)); }
+.tailor-table td { padding: var(--tailor-table-padding, 10px 13px); border-top: 1px solid var(--tailor-brand-border); }
+.tailor-table tbody tr:first-child td { border-top: 0; }
+.tailor-table tbody tr:hover td { background: color-mix(in srgb, var(--tailor-brand-primary) 6%, transparent); }
+.tailor-table--right { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
+.tailor-table--center { text-align: center; }
+.tailor-table--left { text-align: left; }
+.tailor-table__id { white-space: nowrap; font-family: ui-monospace, "Roboto Mono", Menlo, monospace; font-size: 12px; }
+.tailor-table__sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; }
+.tailor-table__sort:hover { color: var(--tailor-brand-text); }
+.tailor-table__arrow { opacity: 0.35; }
+.tailor-table__arrow--active { opacity: 1; color: var(--tailor-brand-primary-text); }
+.tailor-table__clickable { cursor: pointer; }
+.tailor-table__clickable:focus-visible, .tailor-table button:focus-visible { outline: 3px solid var(--tailor-brand-primary); outline-offset: -3px; }
+.tailor-table__state { padding: 34px 13px; text-align: center; color: var(--tailor-brand-text-muted); }
+.tailor-table tfoot td { border-top: 1px solid var(--tailor-brand-text); font-weight: 600; }
+.tailor-table__pagination {
+  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
+  padding: 8px 13px; border-top: 1px solid var(--tailor-brand-border); font-size: 13px; color: var(--tailor-brand-text-muted);
+}
+.tailor-table__pages { display: flex; gap: 8px; }
+.tailor-table__pagination button {
+  min-height: 34px; padding: 0 13px; border: 1px solid var(--tailor-brand-border); border-radius: var(--tailor-brand-radius);
+  background: transparent; color: var(--tailor-brand-text); font: inherit; cursor: pointer;
+}
+.tailor-table__pagination button:hover:not(:disabled) { border-color: var(--tailor-brand-text); }
+.tailor-table__pagination button:disabled { opacity: 0.45; cursor: not-allowed; }
+
+/* TailorLoader — o ponto corre a espiral Fibonacci (trechos 3, 5, 8, 13, 21, 34 = 84) com rastro, pulsa e volta. */
+.tailor-loader__rastro { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tailor-rastro 2.618s linear infinite; }
+@keyframes tailor-rastro {
+  0%   { stroke-dashoffset: 1; opacity: 1; }
+  80%  { stroke-dashoffset: 0; opacity: 1; }
+  100% { stroke-dashoffset: 0; opacity: 0; }
+}
+/* Cantos da espiral em fração do trecho de corrida (80%): 3, 8, 16, 29, 50, 84 de 84. */
+.tailor-loader__corredor { animation: tailor-corredor 2.618s linear infinite; }
+@keyframes tailor-corredor {
+  0%      { transform: translate(0, 0); opacity: 1; }
+  2.857%  { transform: translate(3px, 0); }
+  7.619%  { transform: translate(3px, -5px); }
+  15.238% { transform: translate(-5px, -5px); }
+  27.619% { transform: translate(-5px, 8px); }
+  47.619% { transform: translate(16px, 8px); }
+  80%     { transform: translate(16px, -26px) scale(1); opacity: 1; }
+  86%     { transform: translate(16px, -26px) scale(2.2); opacity: 1; }
+  92%     { transform: translate(16px, -26px) scale(0); opacity: 0; }
+  100%    { transform: translate(0, 0) scale(1); opacity: 0; }
+}
+/* compact: o ponto dá a volta num quadrado de 13px. */
+.tailor-loader__volta { background: var(--tailor-loader-dot, var(--tailor-brand-primary)); animation: tailor-volta 1.236s steps(1, end) infinite; }
+@keyframes tailor-volta {
+  0%   { transform: translate(0, 0); }
+  25%  { transform: translate(8px, 0); }
+  50%  { transform: translate(8px, 8px); }
+  75%  { transform: translate(0, 8px); }
+}
+/* Sucesso: a malha nasce verde do ponto, o ponto estoura e o check se desenha. Uma vez só. */
+.tailor-loader__ok-malha .tailor-malha__linha { animation: tailor-ok-malha 0.618s var(--tailor-ease-in-out) both; }
+@keyframes tailor-ok-malha { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; opacity: 0.5; } }
+.tailor-loader__ok-ponto { transform-box: fill-box; transform-origin: center; animation: tailor-ok-ponto 0.382s var(--tailor-ease-in-out) both; }
+@keyframes tailor-ok-ponto { 0% { transform: scale(1); } 50% { transform: scale(3); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
+.tailor-loader__check { stroke-dasharray: 1; stroke-dashoffset: 1; animation: tailor-check 0.382s 0.3s var(--tailor-ease-in-out) both; }
+@keyframes tailor-check { to { stroke-dashoffset: 0; } }
+
+/* TailorEsqueleto — barras retas e a linha da marca varrendo de cima a baixo. */
+.tailor-skeleton { position: relative; overflow: hidden; display: grid; gap: 13px; padding: 2px 0; }
+.tailor-skeleton__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.tailor-skeleton__bar { display: block; height: 13px; background: var(--tailor-skeleton-bar, #F2F2F2); }
+.tailor-skeleton__bar--thin { height: 8px; }
+.tailor-skeleton__bar--thick { height: 34px; }
+.tailor-skeleton__row { display: grid; gap: 21px; padding: 8px 0; border-bottom: 1px solid var(--tailor-brand-border); }
+.tailor-skeleton__row--header .tailor-skeleton__bar { height: 8px; }
+.tailor-skeleton__cards { display: grid; gap: 13px; grid-template-columns: repeat(auto-fit, minmax(144px, 1fr)); }
+.tailor-skeleton__card { display: grid; gap: 13px; padding: 21px; border: 1px solid var(--tailor-brand-border); }
+.tailor-skeleton::after {
+  content: ''; position: absolute; left: 0; top: 0; width: 8px; height: 8px;
+  background: var(--tailor-brand-primary);
+  animation: tailor-skeleton-dot 2.618s var(--tailor-ease-in-out) infinite;
+}
+/* O ponto atravessa o topo uma vez e some; o resto fica parado. */
+@keyframes tailor-skeleton-dot {
+  0%     { left: 0; opacity: 1; }
+  61.8%  { left: calc(100% - 8px); opacity: 1; }
+  70%, 100% { left: calc(100% - 8px); opacity: 0; }
+}
+:where(.dark, [data-theme="dark"]) .tailor-skeleton { --tailor-skeleton-bar: #1F1F1F; }
+
+/* TailorAvisos — caixa preta; a cor do tipo entra varrendo e recolhe na borda; barra do tempo. */
+.tailor-toaster {
+  position: fixed; z-index: 1100; right: 21px; top: 21px; display: flex; flex-direction: column; gap: 8px;
+  width: min(377px, calc(100vw - 32px)); pointer-events: none;
+}
+@media (max-width: 640px) { .tailor-toaster { right: 16px; left: 16px; top: 16px; width: auto; } }
+.tailor-toast {
+  --tailor-toast-color: var(--tailor-brand-primary);
+  position: relative; overflow: hidden; pointer-events: auto; display: flex; align-items: flex-start; gap: 13px;
+  padding: 16px 13px 18px 21px; background: #000; color: #fff; font-family: var(--tailor-font);
+  animation: tailor-toast-in 0.5s var(--tailor-ease-in-out) both;
+}
+.tailor-toast--error { --tailor-toast-color: #FF0040; }
+.tailor-toast::before {
+  content: ''; position: absolute; left: 0; top: 0; bottom: 0; background: var(--tailor-toast-color);
+  width: 3px;
+}
+.tailor-toast > * { position: relative; }
+/* O aviso abre a partir do ponto do ícone (centro do ícone de 21px: 31,5px da esquerda, 26,5px do topo). */
+@keyframes tailor-toast-in { from { clip-path: inset(22.5px calc(100% - 35.5px) calc(100% - 30.5px) 27.5px); } to { clip-path: inset(0); } }
+.tailor-toast__icon { width: 21px; height: 21px; flex-shrink: 0; overflow: visible; stroke: var(--tailor-toast-color); fill: var(--tailor-toast-color); }
+.tailor-toast .tailor-loader__check { animation-delay: 0s; }
+.tailor-toast__text { flex: 1; min-width: 0; }
+.tailor-toast__title { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.382; }
+.tailor-toast__description { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: rgb(255 255 255 / 0.7); }
+.tailor-toast__close {
+  margin: -5px -3px 0 0; width: 34px; height: 34px; flex-shrink: 0; border: 0; background: none; color: rgb(255 255 255 / 0.7);
+  font-size: 21px; line-height: 1; cursor: pointer;
+}
+.tailor-toast__close:hover { color: #fff; }
+.tailor-toast__close:focus-visible { outline: 2px solid var(--tailor-toast-color); outline-offset: -2px; }
+.tailor-toast__timer {
+  position: absolute !important; left: 0; right: 0; bottom: 0; height: 3px; background: var(--tailor-toast-color);
+  transform-origin: left; animation: tailor-toast-timer var(--tailor-toast-duration, 4s) linear both;
+}
+@keyframes tailor-toast-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
+
+/* TailorDigitando — o ponto da marca como cursor. */
+.tailor-typewriter__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+.tailor-typewriter__cursor {
+  display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.12em; vertical-align: baseline;
+  background: var(--tailor-typewriter-cursor, var(--tailor-brand-primary));
+}
+
+/* TailorConclusao — a cor varre o painel, o ícone e o título se escrevem, e tudo recolhe no ponto. */
+.tailor-result {
+  --tailor-result-color: var(--tailor-brand-primary);
+  --tailor-result-text: #000;
+  position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: 13px; padding: 34px 21px; text-align: center; font-family: var(--tailor-font);
+  background: var(--tailor-result-color); color: var(--tailor-result-text);
+  --tailor-typewriter-cursor: var(--tailor-result-text);
+  --tailor-result-x: 50%;
+  --tailor-result-y: 50%;
+  animation: tailor-result-in 0.5s var(--tailor-ease-in-out) both;
+}
+.tailor-result--error { --tailor-result-color: #FF0040; --tailor-result-text: #fff; }
+.tailor-result--leaving { animation: tailor-result-out 0.618s var(--tailor-ease-in-out) both; }
+/* O ponto: um quadrado de 8px no centro do botão de origem (ou do painel). */
+@keyframes tailor-result-in {
+  from { clip-path: inset(calc(var(--tailor-result-y) - 4px) calc(100% - var(--tailor-result-x) - 4px) calc(100% - var(--tailor-result-y) - 4px) calc(var(--tailor-result-x) - 4px)); }
+  to   { clip-path: inset(0); }
+}
+@keyframes tailor-result-out {
+  0%   { clip-path: inset(0); }
+  70%  { clip-path: inset(calc(var(--tailor-result-y) - 4px) calc(100% - var(--tailor-result-x) - 4px) calc(100% - var(--tailor-result-y) - 4px) calc(var(--tailor-result-x) - 4px)); opacity: 1; }
+  100% { clip-path: inset(calc(var(--tailor-result-y) - 4px) calc(100% - var(--tailor-result-x) - 4px) calc(100% - var(--tailor-result-y) - 4px) calc(var(--tailor-result-x) - 4px)); opacity: 0; }
+}
+.tailor-result__icon { width: 55px; height: 55px; overflow: visible; stroke: var(--tailor-result-text); }
+.tailor-result .tailor-loader__check { animation-delay: 0.45s; }
+.tailor-result__title { margin: 0; min-height: 1.1em; font-size: 26px; font-weight: 500; line-height: 1.1; }
+.tailor-result__description { font-size: 15px; line-height: 1.5; opacity: 0.8; }
+.tailor-result__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 8px; }
+
+/* TailorField — rótulo, controle e mensagem. Erro: borda e ponto vermelhos, um empurrão curto para chamar o olho. */
+.tailor-field { display: grid; gap: 8px; font-family: var(--tailor-font); color: var(--tailor-brand-text); }
+.tailor-field__label { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 500; }
+.tailor-field__required { font-size: 12px; font-weight: 400; color: var(--tailor-brand-text-muted); }
+.tailor-field__control {
+  min-height: 40px; width: 100%; padding: 0 13px; border: 1px solid var(--tailor-field-border, #999999); border-radius: var(--tailor-brand-radius, 0);
+  background: transparent; color: inherit; font: inherit; font-size: 15px;
+}
+textarea.tailor-field__control { padding: 8px 13px; min-height: 89px; }
+.tailor-field__control:focus { outline: none; border-color: var(--tailor-brand-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tailor-brand-primary) 60%, transparent); }
+.tailor-field--error .tailor-field__control {
+  border-color: #FF0040; background: color-mix(in srgb, #FF0040 5%, transparent);
+  animation: tailor-field-nudge 0.382s var(--tailor-ease-out);
+}
+.tailor-field--error .tailor-field__control:focus { box-shadow: 0 0 0 3px color-mix(in srgb, #FF0040 35%, transparent); }
+.tailor-field__error { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 13px; font-weight: 500; color: #E0003A; }
+.tailor-field__dot { flex-shrink: 0; width: 8px; height: 8px; background: #FF0040; transform: translateY(-1px); }
+.tailor-field__hint { margin: 0; font-size: 13px; color: var(--tailor-brand-text-muted); }
+:where(.dark, [data-theme="dark"]) .tailor-field__error { color: #FF7462; }
+:where(.dark, [data-theme="dark"]) .tailor-field { --tailor-field-border: #666666; }
+@keyframes tailor-field-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-2px); } }
+
+/* TailorUserMenu — o painel nasce do ponto no canto junto do avatar e recolhe nele. */
+.tailor-user-menu__panel { animation: tailor-user-menu-in 0.382s var(--tailor-ease-out) both; }
+.tailor-user-menu__panel--closing { animation: tailor-user-menu-out 0.236s var(--tailor-ease-in-out) both; }
+.tailor-user-menu__panel::before {
+  content: ''; position: absolute; left: -1px; bottom: -1px; width: 8px; height: 8px; background: var(--tailor-brand-primary);
+  animation: tailor-user-menu-dot 0.618s var(--tailor-ease-in-out) both;
+}
+@keyframes tailor-user-menu-in { from { clip-path: inset(calc(100% - 8px) calc(100% - 8px) 0 0); } to { clip-path: inset(0); } }
+@keyframes tailor-user-menu-out { from { clip-path: inset(0); } to { clip-path: inset(calc(100% - 8px) calc(100% - 8px) 0 0); } }
+@keyframes tailor-user-menu-dot { 0%, 61.8% { opacity: 1; } 100% { opacity: 0; } }
+
+/* PontoMalha e a malha da entrada: se desenham a partir do ponto e somem, em 2φ (3,236s). */
 .tailor-malha__linha {
   stroke-dasharray: 1;
   stroke-dashoffset: 1;
@@ -144,6 +426,15 @@
 /* Menos movimento: a informação continua, o movimento sai. */
 @media (prefers-reduced-motion: reduce) {
   .tailor-malha__linha { animation: none; stroke-dashoffset: 0; }
+  .tailor-loader__rastro, .tailor-loader__check, .tailor-loader__ok-malha .tailor-malha__linha { animation: none; stroke-dashoffset: 0; opacity: 1; }
+  .tailor-loader__corredor, .tailor-loader__volta { animation: none; }
+  .tailor-loader__ok-ponto { animation: none; opacity: 0; }
+  .tailor-skeleton::after { animation: none; display: none; }
+  .tailor-field--error .tailor-field__control { animation: none; }
+  .tailor-user-menu__panel, .tailor-user-menu__panel--closing, .tailor-user-menu__panel::before { animation: none; }
+  .tailor-user-menu__panel::before { display: none; }
+  .tailor-toast { animation: none; }
+  .tailor-result, .tailor-result > * { animation: none !important; }
   .tailor-loader__reticencias::after { animation: none; content: '...'; }
   .tailor-ponto-pisca { animation: none; }
   .tailor-mascote__corpo, .tailor-mascote__olho, .tailor-mascote__verde { animation: none; }

package/dist/types/components/CinematicIntro.d.ts

@@ -2,7 +2,9 @@ import { default as React } from 'react';
 export type CinematicIntroProps = {
     /** Chamado ao fim da abertura, no "Pular" ou de imediato com menos movimento. */
     onComplete: () => void;
+    /** Linha curta acima do slogan, com o ponto verde. Sem ela, não aparece. */
     overline?: string;
+    /** Frase abaixo da marca (ex.: "Sua operação em outro nível"). Sem ela, não aparece. */
     slogan?: string;
     skipLabel?: string;
     /** Nome do produto abaixo da marca (ex.: "Pilot"). Omitido: só a marca. */

package/dist/types/components/MascoteVetor.d.ts

@@ -139,7 +139,7 @@ declare const EXPRESSOES: {
 export type ExpressaoDoMascote = keyof typeof EXPRESSOES;
 /** Pose do vetor: o movimento, o olhar padrão e os enfeites de cada estado. */
 export type PoseDoMascote = 'parado' | 'cumprimentando' | 'pensando' | 'falando' | 'esperando' | 'comemorando' | 'erro' | 'dormindo';
-/** Desenhados com o topo da cabeça em (0, 0). Só em tinta: o verde é do agente. */
+/** Desenhados com o topo da cabeça em (0, 0). Só em tinta (exceto o gorro): o verde é do agente. */
 declare const ACESSORIOS: {
     gorro: React.JSX.Element;
     orelhas: React.JSX.Element;

package/dist/types/components/TailorBrand.d.ts

@@ -0,0 +1,86 @@
+import { default as React } from 'react';
+/**
+ * A marca do cliente em variáveis CSS. Os componentes que leem `--tailor-brand-*`
+ * (`TailorPageHeader`, `TailorTable`, avisos) trocam de cor, fonte e cantos sem mudar uma
+ * linha de componente. Sem tema, valem os padrões Tailor do `style.css`.
+ */
+export type TailorTheme = {
+    /** Cor de destaque: o ponto do sobretítulo, a barra de foco. */
+    primary?: string;
+    /** Destaque como texto sobre o fundo (precisa de contraste; no Tailor é o verde-ink). */
+    primaryText?: string;
+    text?: string;
+    textMuted?: string;
+    border?: string;
+    /** Fundo do cabeçalho. Padrão: transparente (o cabeçalho é o começo da página). */
+    background?: string;
+    headingFont?: string;
+    bodyFont?: string;
+    headingWeight?: string | number;
+    /** `uppercase` para marcas que pedem título em caixa alta. */
+    headingCase?: 'none' | 'uppercase';
+    /** Cantos dos elementos com caixa (etiqueta, botão voltar). Tailor: 0. */
+    radius?: string;
+};
+/** O tema como objeto de variáveis, para `style` ou para montar um CSS do cliente. */
+export declare function themeToVars(theme: TailorTheme): Record<string, string>;
+export type TailorBrandProps = {
+    theme: TailorTheme;
+    /** Ajustes do tema escuro (`.dark` ou `[data-theme="dark"]` num ancestral). */
+    dark?: TailorTheme;
+    children: React.ReactNode;
+};
+/**
+ * Aplica o tema a tudo que estiver dentro, sem mexer no layout (`display: contents`).
+ * As variáveis vão num `<style>` com seletor próprio, e não em `style`, para o
+ * tema escuro conseguir sobrescrever as do claro.
+ */
+export declare function TailorBrand({ theme, dark, children }: TailorBrandProps): React.JSX.Element;
+/**
+ * `account_info.whitelabel` do cliente (Mongo `clients`). Os campos além de
+ * `colors.primary/secondary/background/text` e `logos.*` são a proposta para
+ * completar a marca; enquanto não existirem, ficam os padrões Tailor.
+ */
+export type TailorWhitelabel = {
+    colors?: {
+        primary?: string;
+        secondary?: string;
+        background?: string;
+        text?: string;
+        text_muted?: string;
+        border?: string;
+        dark?: {
+            primary?: string;
+            background?: string;
+            text?: string;
+            text_muted?: string;
+            border?: string;
+        };
+    };
+    fonts?: {
+        heading?: string;
+        body?: string;
+        heading_weight?: number | string;
+        heading_case?: 'none' | 'uppercase';
+    };
+    shape?: {
+        radius?: string;
+    };
+    logos?: {
+        rectangular_light?: string;
+        rectangular_dark?: string;
+        square_light?: string;
+        square_dark?: string;
+    };
+};
+/** Razão de contraste WCAG entre duas cores hex. */
+export declare function contrast(a: string, b: string): number;
+/**
+ * Traduz o whitelabel do Mongo para o tema. Ignora o azul padrão do cadastro e
+ * valores que não são hex. A primária só vira cor de texto se tiver contraste
+ * AA sobre o fundo; senão o texto de destaque usa a cor de texto da marca.
+ */
+export declare function themeFromWhitelabel(wl?: TailorWhitelabel | null): {
+    theme: TailorTheme;
+    dark?: TailorTheme;
+};

package/dist/types/components/TailorField.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export type TailorFieldProps = {
+    label: React.ReactNode;
+    /** Mensagem de erro. Com ela, o campo fica vermelho e a mensagem aparece abaixo, com o ponto. */
+    error?: React.ReactNode;
+    /** Ajuda abaixo do campo, quando não há erro. */
+    hint?: React.ReactNode;
+    /** Marca o campo como obrigatório (no rótulo e no `required` do controle). */
+    required?: boolean;
+    /** Um `input`, `select` ou `textarea` (ou componente que repasse as props). Recebe id, aria e a classe do campo. */
+    children: React.ReactElement;
+    className?: string;
+};
+/**
+ * Rótulo, controle e mensagem num lugar só. O erro aparece de uma vez (precisa
+ * ser lido já): borda vermelha, fundo levemente tingido e a mensagem com o
+ * ponto vermelho, ligada ao controle por `aria-describedby`.
+ */
+export declare function TailorField({ label, error, hint, required, children, className }: TailorFieldProps): React.JSX.Element;

package/dist/types/components/TailorLoader.d.ts

@@ -1,17 +1,35 @@
 import { default as React } from 'react';
 export type TailorLoaderProps = {
-    /** Rótulo principal. Padrão: "Carregando". */
+    /** Rótulo principal. Padrão: o texto `loading` do idioma. */
     label?: string;
     /** Linha de apoio abaixo do rótulo (o que está sendo carregado, ou quanto falta). */
-    detail?: string;
+    detail?: React.ReactNode;
+    /**
+     * Arte do parceiro ou do cliente acima do loader (`inline` e `overlay`), para a
+     * espera assinar com a marca dele. Ex.: `whitelabel.logos.rectangular_light`.
+     */
+    logo?: string;
+    /** Arte para fundo escuro (tema escuro e `overlay`). Sem ela, vale `logo`. */
+    logoDark?: string;
+    /** Frases que o ponto escreve e apaga em ciclo, abaixo do rótulo ("Cruzando dados", "Quase lá"). */
+    messages?: string[];
+    /** Progresso real, 0 a 100. Mostra a barra e o número. Sem ele, só a animação. */
+    progress?: number;
+    /** Etapas da carga; só aparecem com `progress` (sem ele não há etapa atual). */
+    steps?: string[];
     /**
      * `inline`: no lugar do conteúdo. `overlay`: tela inteira, bloqueia.
      * `compact`: uma linha (ponto + rótulo), para botões e listas.
-     * `caixa`: numa caixa própria de 377px, com fundo e borda — para painéis
+     * `box`: numa caixa própria de 377px, com fundo e borda — para painéis
      * estreitos e fundos com estampa (chat), onde o inline ficaria transparente.
      */
-    variant?: 'inline' | 'overlay' | 'compact' | 'caixa';
-    /** Tira o respiro externo do `inline`/`caixa` (quem chama já tem espaçamento). */
+    /** `caixa` é o nome antigo de `box` (obsoleto). */
+    variant?: 'inline' | 'overlay' | 'compact' | 'box' | 'caixa';
+    /** Troca a corrida pelo sucesso animado (a malha nasce verde e o ponto vira check). Rótulo padrão: o texto `done` do idioma. */
+    success?: boolean;
+    /** Tira o respiro externo do `inline`/`box` (quem chama já tem espaçamento). */
+    noPadding?: boolean;
+    /** @deprecated use `noPadding`. */
     semRespiro?: boolean;
     className?: string;
 };

package/dist/types/components/TailorPageHeader.d.ts

@@ -0,0 +1,47 @@
+import { default as React } from 'react';
+export type TailorPageHeaderLink = {
+    href: string;
+    className: string;
+    children: React.ReactNode;
+    'aria-current'?: 'page';
+};
+export type TailorPageHeaderProps = {
+    /** ReactNode para permitir um acento dentro do título. */
+    title: React.ReactNode;
+    /** Uma frase: o que se faz nesta tela. */
+    description?: React.ReactNode;
+    /** Seção ou contexto, com o ponto da marca. Sem ele, não aparece. */
+    eyebrow?: string;
+    /** Trilha de navegação; o último item é a página atual. */
+    breadcrumbs?: Array<{
+        label: string;
+        href?: string;
+    }>;
+    /** Link ou ação de voltar, acima de tudo. */
+    back?: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    };
+    /** Ao lado do título: status, plano, contagem. */
+    badge?: React.ReactNode;
+    /** Números do topo, quando ajudam a decidir o que fazer aqui. */
+    stats?: Array<{
+        label: string;
+        value: React.ReactNode;
+    }>;
+    /** Botões e busca, à direita. */
+    actions?: React.ReactNode;
+    /** Abaixo, na largura toda: abas, filtros, barra de busca. */
+    children?: React.ReactNode;
+    /** Link do roteador do app (ex.: `NavLink`). Repasse todas as props. Sem ele, sai um `<a href>`. */
+    renderLink?: (props: TailorPageHeaderLink) => React.ReactNode;
+    className?: string;
+};
+/**
+ * O cabeçalho de página. Visual só por variáveis `--tailor-brand-*` e
+ * `--tailor-header-*` (ver `TailorBrand`), para vestir a marca do cliente:
+ * cor de destaque, fontes, peso e caixa do título, cantos, fundo.
+ * Padrão Tailor: sem card nem sombra, régua de 1px embaixo, título 26 → 42.
+ */
+export declare function TailorPageHeader({ title, description, eyebrow, breadcrumbs, back, badge, stats, actions, children, renderLink, className, }: TailorPageHeaderProps): React.JSX.Element;

package/dist/types/components/TailorResult.d.ts

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export type TailorResultProps = {
+    status: 'success' | 'error';
+    /** No sucesso, escrito pelo ponto letra a letra; no erro, aparece inteiro. */
+    title: string;
+    description?: React.ReactNode;
+    /**
+     * O botão que disparou a ação. O painel nasce do ponto no centro dele e
+     * recolhe de volta para lá. Sem ele, o ponto fica no centro do painel.
+     */
+    origin?: React.RefObject<HTMLElement | null>;
+    /** ms até recolher e chamar `onClose`. Padrão: 1600 no sucesso; no erro não fecha sozinho. `false` desliga. */
+    closeAfter?: number | false;
+    /** Chamado depois que o painel recolhe no ponto: feche o modal aqui. */
+    onClose?: () => void;
+    /** Botões abaixo do texto (ex.: "Tentar de novo" no erro). */
+    actions?: React.ReactNode;
+    className?: string;
+};
+/**
+ * O fim de um modal ou formulário. O ponto do botão cresce até cobrir o painel
+ * com a cor do resultado, o ícone se desenha e o título aparece (escrito no
+ * sucesso, de uma vez no erro, que precisa ser lido já). Depois tudo recolhe no
+ * mesmo ponto e `onClose` fecha o modal. Cobre o pai, que precisa de
+ * `position: relative`.
+ */
+export declare function TailorResult({ status, title, description, origin, closeAfter, onClose, actions, className }: TailorResultProps): React.JSX.Element;

package/dist/types/components/TailorSidebar.d.ts

@@ -113,11 +113,6 @@ export type TailorUserMenuProps = {
     /** Conteúdo livre no painel, antes das ações (tema, notificações push). */
     children?: ReactNode;
 };
-/**
- * Menu do usuário para o `rodape` da `TailorSidebar`. Botão que abre um painel
- * (padrão disclosure: aceita conteúdo livre, como o seletor de tema). Esc e
- * clique fora fecham; setas percorrem os itens.
- */
 export declare const TailorUserMenu: React.FC<TailorUserMenuProps>;
 export type TailorMobileBarProps = {
     /** Abre a gaveta: ligue no `aberto` da `TailorSidebar`. */

package/dist/types/components/TailorSkeleton.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export type TailorSkeletonProps = {
+    /** `text`: parágrafo. `block`: um retângulo (gráfico, imagem). `table`: linhas e colunas. `cards`: indicadores lado a lado. */
+    shape?: 'text' | 'block' | 'table' | 'cards';
+    /** Linhas do texto ou da tabela, ou quantidade de cartões. */
+    lines?: number;
+    /** Colunas da tabela. */
+    columns?: number;
+    /** Altura do `block`. Padrão: 144px. */
+    height?: string;
+    /** Lido pelo leitor de tela. Padrão: o texto `loading` do idioma. */
+    label?: string;
+    className?: string;
+};
+/**
+ * O lugar do conteúdo enquanto ele chega: barras cinza retas e a linha verde
+ * varrendo de cima a baixo. Sem gradiente nem cantos (manual da marca).
+ */
+export declare function TailorSkeleton({ shape, lines, columns, height, label, className }: TailorSkeletonProps): React.JSX.Element;

package/dist/types/components/TailorTable.d.ts

@@ -0,0 +1,58 @@
+import { default as React } from 'react';
+/** Como o valor aparece e se alinha. `percent` recebe fração (0,123 = 12,3%). */
+export type TailorColumnType = 'text' | 'number' | 'currency' | 'percent' | 'date' | 'id';
+export type TailorTableColumn<T> = {
+    key: string;
+    header: React.ReactNode;
+    type?: TailorColumnType;
+    /** Valor para ordenar e formatar. Padrão: `row[key]`. */
+    value?: (row: T) => unknown;
+    /** Célula própria (badge, link). Sem ela, o valor formatado pelo `type`. */
+    cell?: (row: T) => React.ReactNode;
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    width?: string;
+    /** Linha de total: um valor pronto ou uma conta sobre as linhas (todas, não só a página). */
+    total?: React.ReactNode | ((rows: T[]) => unknown);
+};
+export type TailorTableSort = {
+    key: string;
+    direction: 'asc' | 'desc';
+};
+export type TailorTableProps<T> = {
+    columns: Array<TailorTableColumn<T>>;
+    rows: T[];
+    rowKey: (row: T, index: number) => string | number;
+    /** Título acessível da tabela (vira `<caption>`, só para leitor de tela). */
+    caption: string;
+    loading?: boolean;
+    /** O que aparece sem linhas. Padrão: o texto `empty` do idioma. */
+    empty?: React.ReactNode;
+    /** Ordem controlada (servidor). Sem `onSortChange`, a tabela ordena sozinha. */
+    sort?: TailorTableSort;
+    onSortChange?: (sort: TailorTableSort) => void;
+    defaultSort?: TailorTableSort;
+    /** Paginação no navegador. */
+    pageSize?: number;
+    /** Paginação no servidor: a tabela só mostra as `rows` que recebeu. */
+    pagination?: {
+        page: number;
+        totalPages: number;
+        onPageChange: (page: number) => void;
+        totalRows?: number;
+    };
+    onRowClick?: (row: T) => void;
+    /** Cabeçalho preso ao rolar a página. */
+    stickyHeader?: boolean;
+    className?: string;
+};
+/** Formata pelo tipo da coluna; vazio vira traço. */
+export declare function formatValue(v: unknown, type?: TailorColumnType, locale?: string, currency?: string): React.ReactNode;
+/**
+ * Tabela de relatório: cabeçalho em overline, números tabulares à direita, IDs
+ * em mono, ordenação, paginação (navegador ou servidor) e linha de total.
+ * Visual por variáveis `--tailor-brand-*` e `--tailor-table-*`, como o cabeçalho.
+ */
+export declare function TailorTable<T>({ columns, rows, rowKey, caption, loading, empty, sort, onSortChange, defaultSort, pageSize, pagination, onRowClick, stickyHeader, className, }: TailorTableProps<T>): React.JSX.Element;
+/** Soma de uma coluna, para usar em `total`. */
+export declare const sumBy: <T>(value: (r: T) => number) => (rows: T[]) => number;