@ffid-br/tailor-ui 0.3.0 → 0.5.0

package/dist/style.css

@@ -71,9 +71,81 @@
   to   { opacity: 1; transform: none; }
 }
 
+/* AgenteMascote — personagem 8x8 (QD-0426). Movimento em degraus, como pixel. */
+.tailor-mascote { --tailor-mascote-tinta: var(--tailor-black); }
+.tailor-mascote__corpo { grid-auto-rows: var(--tailor-celula, 4px); }
+.tailor-mascote__pixel { width: var(--tailor-celula, 4px); height: var(--tailor-celula, 4px); }
+.tailor-mascote__tinta { background: var(--tailor-mascote-tinta); }
+.tailor-mascote__verde { background: var(--tailor-green); }
+.tailor-mascote__selo {
+  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--tailor-black); color: var(--tailor-white); font-size: 10px; line-height: 1;
+}
+.tailor-mascote--desligado { --tailor-mascote-tinta: #999999; }
+.tailor-mascote--desligado .tailor-mascote__verde { background: #999999; }
+.tailor-mascote__corpo { animation: tailor-mascote-bob 1.6s steps(2, end) infinite; }
+.tailor-mascote--analisando .tailor-mascote__corpo,
+.tailor-mascote--subiu .tailor-mascote__corpo { animation-duration: 0.6s; }
+.tailor-mascote--desligado .tailor-mascote__corpo { animation: none; }
+.tailor-mascote__olho { animation: tailor-mascote-piscar 4s infinite; }
+.tailor-mascote__verde { animation: tailor-mascote-pulso 2.4s steps(1, end) infinite; }
+.tailor-mascote--analisando .tailor-mascote__verde { animation-duration: 1s; }
+@keyframes tailor-mascote-bob { 0%, 100% { transform: none; } 50% { transform: translateY(calc(var(--tailor-celula, 4px) * -0.5)); } }
+@keyframes tailor-mascote-piscar { 0%, 90%, 100% { transform: none; } 94% { transform: scaleY(0.15); } }
+@keyframes tailor-mascote-pulso { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.25; } }
+
+/* Ponto do estado: quadrado, sempre ao lado do texto. */
+.tailor-estado__ponto { display: inline-block; width: 8px; height: 8px; }
+.tailor-estado__ponto--analisando { background: var(--tailor-green); }
+.tailor-estado__ponto--esperando  { background: #FF9033; }
+.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) {
   .tailor-malha__linha { animation: none; stroke-dashoffset: 0; }
   .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

@@ -0,0 +1,58 @@
+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
+ * https://claude.ai/artifact/HoWCZX7aFiKPEqwhXyzm5k
+ */
+declare const MAPAS: {
+    readonly desk: readonly ["...gg...", "...kk...", ".kkkkkk.", ".ke..ek.", "kk....kk", ".k.kk.k.", ".kkkkkk.", "........"];
+    readonly pergunte: readonly [".......g", "kkkkkkk.", "k.....k.", "k.e.e.k.", "k.....k.", "kkkkkkk.", ".kk.....", ".k......"];
+    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 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: 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). 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, 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, estilo, tamanho, expressao, tema, acessorio, objeto, fala, superficie, className, }: AgenteMascoteProps): import("react").JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { ChaveDoAgente, EstadoDoMascote } from './AgenteMascote';
+export type AgenteDaEquipe = {
+    chave: ChaveDoAgente;
+    nome: string;
+    estado?: EstadoDoMascote;
+    selo?: number;
+    /** O que a aba mostra (feed, pergunta...). Sem conteúdo, a aba diz "Em breve". */
+    conteudo?: React.ReactNode;
+};
+export type EquipeDockProps = {
+    /** O primeiro é o que aparece no botão flutuante. */
+    agentes: AgenteDaEquipe[];
+    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, 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

@@ -11,3 +11,8 @@ export type { EntrarOverlayProps } from './components/entrada';
 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, 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.3.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",