@ffid-br/tailor-ui 0.4.0 → 0.5.0

package/dist/style.css

@@ -102,6 +102,44 @@
 .tailor-estado__ponto--feito      { background: #008548; }
 .tailor-estado__ponto--subiu      { background: #0040FF; }
 .tailor-estado__ponto--desligado  { background: #999999; }
+.tailor-estado__ponto--parado     { background: #666666; }
+.tailor-estado__ponto--cumprimentando { background: var(--tailor-green); }
+.tailor-estado__ponto--falando    { background: #008548; }
+.tailor-estado__ponto--erro       { background: #FF0040; }
+
+/* AgenteMascote estilo vetor: o movimento diz o estado; o olhar segue o cursor. */
+.tailor-mv { line-height: 0; }
+.tailor-mv__corpo { transform-box: fill-box; transform-origin: 50% 100%; animation: tailor-mv-respira 3.2s ease-in-out infinite; }
+.tailor-mv--esperando .tailor-mv__corpo { animation: tailor-mv-espera 1.8s ease-in-out infinite; }
+.tailor-mv--pensando .tailor-mv__corpo { animation: tailor-mv-inclina 2.6s ease-in-out infinite; }
+.tailor-mv--comemorando .tailor-mv__corpo { animation: tailor-mv-pulo 0.9s cubic-bezier(.16,1,.3,1) infinite; }
+.tailor-mv--erro .tailor-mv__corpo { animation: tailor-mv-treme 1.6s ease-in-out infinite; }
+.tailor-mv--dormindo .tailor-mv__corpo { animation-duration: 5s; opacity: 0.55; }
+.tailor-mv__olhos { transform-box: fill-box; transform-origin: center; animation: tailor-mv-piscar 4.2s infinite; }
+.tailor-mv__pupila { transform: translate(var(--tailor-mv-x, 0), var(--tailor-mv-y, 0)); transition: transform 0.12s ease-out; }
+.tailor-mv--pensando .tailor-mv__pupila { transform: translate(-4px, -5px); }
+.tailor-mv__verde { animation: tailor-mv-pulso 2.4s ease-in-out infinite; }
+.tailor-mv__balao {
+  position: absolute; left: 58%; bottom: 88%; z-index: 1; width: max-content; max-width: 180px;
+  background: var(--tailor-black); color: var(--tailor-white); padding: 8px 10px;
+  font: 500 12px/1.35 var(--font-tailor, "Raleway", system-ui, sans-serif); text-align: left;
+}
+.tailor-mv__balao::after { content: ""; position: absolute; left: 10px; bottom: -5px; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }
+.tailor-mv__pontos > span { display: inline-block; width: 6px; height: 6px; margin: 0 2px; background: var(--tailor-green); animation: tailor-mv-ponto 1.4s infinite; }
+.tailor-mv__pontos > span:nth-child(2) { animation-delay: 0.2s; }
+.tailor-mv__pontos > span:nth-child(3) { animation-delay: 0.4s; }
+.tailor-mv__confete rect { animation: tailor-mv-cai 1.8s linear infinite; }
+.tailor-mv__zzz text { animation: tailor-mv-sobe 3s linear infinite; font: 600 18px sans-serif; }
+@keyframes tailor-mv-respira { 0%, 100% { transform: none; } 50% { transform: scale(1.015, 0.985); } }
+@keyframes tailor-mv-espera { 0%, 100% { transform: none; } 50% { transform: translateY(-4px); } }
+@keyframes tailor-mv-inclina { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(-2deg); } }
+@keyframes tailor-mv-pulo { 0%, 100% { transform: scale(1.03, 0.97); } 40% { transform: translateY(-18px) scale(0.98, 1.02); } }
+@keyframes tailor-mv-treme { 0%, 60%, 100% { transform: none; } 66% { transform: translateX(-5px); } 72% { transform: translateX(5px); } 78% { transform: translateX(-3px); } 84% { transform: translateX(3px); } }
+@keyframes tailor-mv-piscar { 0%, 94%, 100% { transform: none; } 97% { transform: scaleY(0.1); } }
+@keyframes tailor-mv-pulso { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
+@keyframes tailor-mv-ponto { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }
+@keyframes tailor-mv-cai { 0% { transform: translateY(-20px); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(70px); opacity: 0; } }
+@keyframes tailor-mv-sobe { 0% { transform: none; opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(14px, -40px); opacity: 0; } }
 
 /* Menos movimento: a informação continua, o movimento sai. */
 @media (prefers-reduced-motion: reduce) {
@@ -109,4 +147,5 @@
   .tailor-loader__reticencias::after { animation: none; content: '...'; }
   .tailor-ponto-pisca { animation: none; }
   .tailor-mascote__corpo, .tailor-mascote__olho, .tailor-mascote__verde { animation: none; }
+  .tailor-mv *, .tailor-mv *::after { animation: none !important; transition: none !important; }
 }

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

@@ -1,3 +1,4 @@
+import { AcessorioDoMascote, ChaveDoAgenteVetor, ExpressaoDoMascote, ObjetoDoMascote, TemaDoMascote } from './MascoteVetor';
 /**
  * Mapas 8x8 dos agentes (QD-0426, estilo Dots). `k` tinta, `e` olho (pisca),
  * `g` o único verde do personagem (pulsa), `.` vazio. Desenho aprovado em
@@ -9,26 +10,49 @@ declare const MAPAS: {
     readonly pm: readonly ["..gggg..", "kkkkkkkk", "k......k", "k.e..e.k", "k......k", "k.kkkk.k", "k......k", "kkkkkkkk"];
     readonly diretor: readonly [".kkkkkk.", ".k....k.", "kkkkkkkk", ".kk..kk.", ".k....k.", ".k.kk.k.", ".kkkkkk.", "...gg..."];
 };
+/** Agentes com desenho em pixel. Os demais só existem em vetor. */
 export type ChaveDoMascote = keyof typeof MAPAS;
-export type EstadoDoMascote = 'analisando' | 'esperando' | 'feito' | 'subiu' | 'desligado';
+export type ChaveDoAgente = ChaveDoAgenteVetor;
+export type EstadoDoMascote = 'analisando' | 'esperando' | 'feito' | 'subiu' | 'desligado' | 'parado' | 'cumprimentando' | 'falando' | 'erro';
 /** Texto do estado: a cor nunca fala sozinha. */
 export declare const ROTULO_DO_ESTADO: Record<EstadoDoMascote, string>;
+/** O vetor pinta por variável; `auto` segue o `dark:` do app. */
+declare const SUPERFICIE: {
+    auto: string;
+    clara: string;
+    escura: string;
+};
 export type AgenteMascoteProps = {
-    agente: ChaveDoMascote;
+    agente: ChaveDoAgente;
     /** Nome exibido (a conta pode renomear). Vai no rótulo acessível. */
     nome: string;
     estado?: EstadoDoMascote;
     /** Quantas coisas esperam a pessoa. Só aparece acima de zero. */
     selo?: number;
-    /** Lado de cada quadradinho, em px. Padrão: 4 (32px no total). */
+    /** Lado de cada quadradinho, em px. Padrão: 4 (32px no total). No vetor, a largura padrão é `celula * 8`. */
     celula?: number;
     /** Mostra o ponto e o texto do estado ao lado. */
     mostrarEstado?: boolean;
+    /** `pixel` (padrão) é a grade 8x8; `vetor` é o companheiro animado. Agentes sem mapa 8x8 saem sempre em vetor. */
+    estilo?: 'pixel' | 'vetor';
+    /** Vetor: largura em px. */
+    tamanho?: number;
+    /** Vetor: olhar no lugar do padrão do estado. */
+    expressao?: ExpressaoDoMascote;
+    /** Vetor: acessório + objeto de uma data (`natal`, `pascoa`...). */
+    tema?: TemaDoMascote;
+    acessorio?: AcessorioDoMascote;
+    objeto?: ObjetoDoMascote;
+    /** Vetor: frase no balão. Também entra no rótulo acessível. */
+    fala?: string;
+    /** Vetor: `auto` segue o tema do app; `clara`/`escura` travam (ex.: painel sempre branco). */
+    superficie?: keyof typeof SUPERFICIE;
     className?: string;
 };
 /**
- * O personagem do agente na grade 8x8 da marca, com o estado em ponto + texto.
- * Animação em degraus (bob, piscar, pulso do verde); com menos movimento, para.
+ * O personagem do agente, com o estado em ponto + texto. Em pixel, anima em
+ * degraus; em vetor, olha o cursor e muda de olhar e movimento por estado.
+ * Com menos movimento, para.
  */
-export declare function AgenteMascote({ agente, nome, estado, selo, celula, mostrarEstado, className, }: AgenteMascoteProps): import("react").JSX.Element;
+export declare function AgenteMascote({ agente, nome, estado, selo, celula, mostrarEstado, estilo, tamanho, expressao, tema, acessorio, objeto, fala, superficie, className, }: AgenteMascoteProps): import("react").JSX.Element;
 export {};

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

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
-import { ChaveDoMascote, EstadoDoMascote } from './AgenteMascote';
+import { ChaveDoAgente, EstadoDoMascote } from './AgenteMascote';
 export type AgenteDaEquipe = {
-    chave: ChaveDoMascote;
+    chave: ChaveDoAgente;
     nome: string;
     estado?: EstadoDoMascote;
     selo?: number;
@@ -14,10 +14,12 @@ export type EquipeDockProps = {
     abertoInicial?: boolean;
     /** Título do painel. Padrão: "Equipe". */
     titulo?: string;
+    /** `pixel` (padrão) ou `vetor`, para todos os mascotes do dock. */
+    estilo?: 'pixel' | 'vetor';
     className?: string;
 };
 /**
  * A equipe de agentes num canto da tela: botão com o mascote principal e o selo
  * de pendências somado; abre um painel com uma aba por agente.
  */
-export declare function EquipeDock({ agentes, abertoInicial, titulo, className }: EquipeDockProps): React.JSX.Element | null;
+export declare function EquipeDock({ agentes, abertoInicial, titulo, estilo, className }: EquipeDockProps): React.JSX.Element | null;

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

@@ -0,0 +1,188 @@
+import { default as React } from 'react';
+declare const AGENTES: {
+    desk: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    pergunte: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    pm: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    diretor: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        lente: true;
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    sdr: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    cred: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    score: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    pilot: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    flow: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    bi: {
+        topo: number;
+        apoio: [number, number];
+        olhos: {
+            l: number;
+            r: number;
+            y: number;
+        };
+        corpo: React.JSX.Element;
+        verde: React.JSX.Element;
+    };
+    rh: {
+        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. */
+declare const EXPRESSOES: {
+    neutro: ["aberto", "aberto"];
+    feliz: ["feliz", "feliz"];
+    piscando: ["aberto", "feliz"];
+    surpreso: ["grande", "grande"];
+    bravo: ["bravo", "bravo"];
+    triste: ["triste", "triste"];
+    desconfiado: ["meio", "meio"];
+    sonolento: ["fechado", "fechado"];
+    tonto: ["x", "x"];
+};
+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. */
+declare const ACESSORIOS: {
+    gorro: React.JSX.Element;
+    orelhas: React.JSX.Element;
+    festa: React.JSX.Element;
+    bruxa: React.JSX.Element;
+    bone: React.JSX.Element;
+    capacete: React.JSX.Element;
+    coroa: React.JSX.Element;
+};
+export type AcessorioDoMascote = keyof typeof ACESSORIOS;
+/** Desenhados com o canto de apoio em (0, 0), encostados no lado direito do corpo. */
+declare const OBJETOS: {
+    presente: React.JSX.Element;
+    ovo: React.JSX.Element;
+    bolo: React.JSX.Element;
+    abobora: React.JSX.Element;
+    bola: React.JSX.Element;
+    sabre: React.JSX.Element;
+    trofeu: React.JSX.Element;
+};
+export type ObjetoDoMascote = keyof typeof OBJETOS;
+/** Tema = acessório + objeto num nome só. */
+declare const TEMAS: {
+    natal: ["gorro", "presente"];
+    pascoa: ["orelhas", "ovo"];
+    aniversario: ["festa", "bolo"];
+    halloween: ["bruxa", "abobora"];
+    copa: ["bone", "bola"];
+    galaxia: ["capacete", "sabre"];
+    premiacao: ["coroa", "trofeu"];
+};
+export type TemaDoMascote = keyof typeof TEMAS;
+export type MascoteVetorProps = {
+    agente: ChaveDoAgenteVetor;
+    pose: PoseDoMascote;
+    expressao?: ExpressaoDoMascote;
+    tema?: TemaDoMascote;
+    acessorio?: AcessorioDoMascote;
+    objeto?: ObjetoDoMascote;
+    fala?: string;
+    /** Abaixo de 48px o balão some (no dock, por exemplo); a fala segue no rótulo acessível. */
+    tamanho: number;
+};
+/** Só o desenho; rótulo acessível, selo e estado ficam no `AgenteMascote`. */
+export declare function MascoteVetor({ agente, pose, expressao, tema, acessorio, objeto, fala, tamanho }: MascoteVetorProps): React.JSX.Element;
+export {};

package/dist/types/index.d.ts

@@ -12,6 +12,7 @@ export { logoTailor, logoTailorBranco } from './logos';
 export { TailorSidebar, SidebarGroup, SidebarItem, TailorUserMenu, TailorMobileBar } from './components/TailorSidebar';
 export type { TailorSidebarProps, TailorSidebarItem, TailorSidebarGrupo, TailorSidebarLinkProps, TailorSidebarRenderLink, SuperficieSidebar, BreakpointSidebar, SidebarGroupProps, SidebarItemProps, TailorUserMenuProps, TailorUserMenuAcao, TailorMobileBarProps, } from './components/TailorSidebar';
 export { AgenteMascote, ROTULO_DO_ESTADO } from './components/AgenteMascote';
-export type { AgenteMascoteProps, ChaveDoMascote, EstadoDoMascote } from './components/AgenteMascote';
+export type { AgenteMascoteProps, ChaveDoMascote, ChaveDoAgente, EstadoDoMascote } from './components/AgenteMascote';
+export type { ExpressaoDoMascote, TemaDoMascote, AcessorioDoMascote, ObjetoDoMascote, } from './components/MascoteVetor';
 export { EquipeDock } from './components/EquipeDock';
 export type { EquipeDockProps, AgenteDaEquipe } from './components/EquipeDock';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ffid-br/tailor-ui",
   "private": false,
-  "version": "0.4.0",
+  "version": "0.5.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",
@@ -32,7 +32,8 @@
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "exemplos": "vite exemplos --config exemplos/vite.config.ts"
   },
   "peerDependencies": {
     "framer-motion": "^10.0.0 || ^11.0.0 || ^12.0.0",
@@ -40,6 +41,7 @@
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.3.3",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^18.3.5",
@@ -49,6 +51,7 @@
     "jsdom": "^29.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "tailwindcss": "^4.3.3",
     "typescript": "^5.5.3",
     "vite": "^5.4.2",
     "vite-plugin-dts": "^4.5.3",