@ffid-br/tailor-ui 0.2.0 → 0.3.0

package/dist/style.css

@@ -18,17 +18,19 @@
   --tailor-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 }
 
-/* TailorLoader — a fita métrica. Ciclo de φ (1,618s): o verde mede a fita e recolhe. */
-.tailor-fita__medida {
-  width: 0;
-  animation: tailor-medir 1.618s var(--tailor-ease-in-out) infinite;
+/* TailorLoader — a malha pequena se desenha a partir do ponto e some, em 2φ (3,236s). */
+.tailor-malha__linha {
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+  animation: tailor-malha 3.236s var(--tailor-ease-in-out) infinite;
 }
-@keyframes tailor-medir {
-  0%    { width: 0;    left: 0; }
-  61.8% { width: 100%; left: 0; }
-  100%  { width: 0;    left: 100%; }
+@keyframes tailor-malha {
+  0%    { stroke-dashoffset: 1; opacity: 1; }
+  38.2% { stroke-dashoffset: 0; opacity: 1; }
+  80%   { stroke-dashoffset: 0; opacity: 1; }
+  100%  { stroke-dashoffset: 0; opacity: 0; }
 }
-.tailor-fita__reticencias::after {
+.tailor-loader__reticencias::after {
   content: '';
   animation: tailor-reticencias 1.618s steps(4, end) infinite;
 }
@@ -71,7 +73,7 @@
 
 /* Menos movimento: a informação continua, o movimento sai. */
 @media (prefers-reduced-motion: reduce) {
-  .tailor-fita__medida { animation: none; width: 61.8%; }
-  .tailor-fita__reticencias::after { animation: none; content: '...'; }
+  .tailor-malha__linha { animation: none; stroke-dashoffset: 0; }
+  .tailor-loader__reticencias::after { animation: none; content: '...'; }
   .tailor-ponto-pisca { animation: none; }
 }

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

@@ -1,13 +1,13 @@
 import { default as React } from 'react';
 export type TailorLoaderProps = {
-    /** Rótulo principal. Padrão: "Tirando as medidas". */
+    /** Rótulo principal. Padrão: "Carregando". */
     label?: string;
     /** Linha de apoio abaixo do rótulo (o que está sendo carregado, ou quanto falta). */
     detail?: string;
     /**
      * `inline`: no lugar do conteúdo. `overlay`: tela inteira, bloqueia.
-     * `compact`: uma linha (fio curto + rótulo), para botões e listas.
-     * `caixa`: a régua numa caixa própria de 377px, com fundo e borda — para painéis
+     * `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
      * estreitos e fundos com estampa (chat), onde o inline ficaria transparente.
      */
     variant?: 'inline' | 'overlay' | 'compact' | 'caixa';
@@ -15,5 +15,5 @@ export type TailorLoaderProps = {
     semRespiro?: boolean;
     className?: string;
 };
-/** Loader da marca (fita métrica). Sempre expõe `role="status"` com o rótulo. */
+/** Loader da marca (ponto verde e malha Fibonacci). Sempre expõe `role="status"` com o rótulo. */
 export declare const TailorLoader: React.FC<TailorLoaderProps>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ffid-br/tailor-ui",
   "private": false,
-  "version": "0.2.0",
+  "version": "0.3.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",