@ffid-br/tailor-ui 0.8.0 → 0.10.0

package/dist/style.css

@@ -86,9 +86,20 @@
 }
 .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); }
+/* Faixa de números: cada um com o fio à esquerda (a cor do tom), rótulo em cima e o número grande embaixo. */
+.tailor-ph__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(144px, 1fr)); gap: 21px 34px; margin: 0; }
+.tailor-ph__stat { --tailor-stat-color: var(--tailor-brand-border); min-width: 0; padding: 2px 0 2px 13px; border-left: 3px solid var(--tailor-stat-color); }
+.tailor-ph__stat--danger { --tailor-stat-color: #FF0040; }
+.tailor-ph__stat--warning { --tailor-stat-color: #FF9033; }
+.tailor-ph__stat--success { --tailor-stat-color: #008548; }
+.tailor-ph__stat-label { margin: 0; font-size: 13px; line-height: 1.382; color: var(--tailor-brand-text-muted); }
+.tailor-ph__stat-value {
+  margin: 5px 0 0; font-size: 34px; font-weight: 500; line-height: 1; font-variant-numeric: lining-nums tabular-nums;
+  font-family: var(--tailor-brand-heading-font); color: var(--tailor-brand-text);
+}
+.tailor-ph__stat--danger .tailor-ph__stat-value { color: #D10035; }
+.tailor-ph__stat--warning .tailor-ph__stat-value { color: #B35A00; }
+@media (max-width: 639px) { .tailor-ph__stat-value { font-size: 26px; } }
 .tailor-ph__below { min-width: 0; }
 
 /* TailorTabela — relatório. Medidas em --tailor-table-*, cores da marca. */

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

@@ -122,6 +122,17 @@ declare const AGENTES: {
         corpo: React.JSX.Element;
         verde: React.JSX.Element;
     };
+    cs: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
 };
 export type ChaveDoAgenteVetor = keyof typeof AGENTES;
 /** Expressão só nos olhos: formato, pálpebra e pupila, por lado. */

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

@@ -25,10 +25,16 @@ export type TailorPageHeaderProps = {
     };
     /** Ao lado do título: status, plano, contagem. */
     badge?: React.ReactNode;
-    /** Números do topo, quando ajudam a decidir o que fazer aqui. */
+    /**
+     * Números do topo, quando ajudam a decidir o que fazer aqui. Ficam numa faixa própria,
+     * abaixo do título. `tone` pinta o fio e o número: `danger` (crítico), `warning` (atenção),
+     * `success` (em dia). Sem tone, neutro.
+     */
     stats?: Array<{
         label: string;
         value: React.ReactNode;
+        tone?: 'danger' | 'warning' | 'success';
+        hint?: string;
     }>;
     /** Botões e busca, à direita. */
     actions?: React.ReactNode;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ffid-br/tailor-ui",
   "private": false,
-  "version": "0.8.0",
+  "version": "0.10.0",
   "description": "Primitivos de marca Tailor.ia em React: loader, intro, transição de login, lockup e barra lateral.",
   "type": "module",
   "main": "dist/index.umd.js",