@ffid-br/tailor-ui 0.5.0 → 0.6.0

package/dist/style.css

@@ -18,6 +18,78 @@
   --tailor-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
 }
 
+/*
+ * 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-marca-primaria: var(--color-tailor-green, var(--tailor-green));
+  --tailor-marca-primaria-texto: var(--color-tailor-ink, var(--tailor-ink));
+  --tailor-marca-texto: var(--tailor-black);
+  --tailor-marca-texto-suave: #666666;
+  --tailor-marca-borda: #E5E5E5;
+  --tailor-marca-fundo: transparent;
+  --tailor-marca-fonte-titulo: var(--tailor-font);
+  --tailor-marca-fonte-texto: var(--tailor-font);
+  --tailor-marca-peso-titulo: 500;
+  --tailor-marca-caixa-titulo: none;
+  --tailor-marca-raio: 0;
+}
+:where(.dark, [data-theme="dark"]) {
+  --tailor-marca-primaria-texto: var(--color-tailor-green, var(--tailor-green));
+  --tailor-marca-texto: var(--tailor-white);
+  --tailor-marca-texto-suave: #A3A3A3;
+  --tailor-marca-borda: rgba(255, 255, 255, 0.1);
+}
+.tailor-marca { display: contents; }
+
+/* TailorPageHeader — cada medida tem a sua variável --tailor-cabecalho-*. */
+.tailor-ph {
+  display: flex; flex-direction: column; gap: 21px;
+  padding: var(--tailor-cabecalho-padding, 0 0 21px);
+  background: var(--tailor-cabecalho-fundo, var(--tailor-marca-fundo));
+  border-bottom: var(--tailor-cabecalho-regua, 1px solid var(--tailor-marca-borda));
+  color: var(--tailor-marca-texto);
+  font-family: var(--tailor-marca-fonte-texto);
+}
+.tailor-ph__linha { display: flex; flex-direction: column; gap: 21px; }
+@media (min-width: 640px) {
+  .tailor-ph__linha { flex-direction: row; align-items: flex-end; justify-content: space-between; }
+}
+.tailor-ph__principal { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
+.tailor-ph__voltar {
+  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer;
+  font: inherit; font-size: 13px; color: var(--tailor-marca-texto-suave); text-decoration: none; border-radius: var(--tailor-marca-raio);
+}
+.tailor-ph__voltar:hover, .tailor-ph__trilha-link:hover { color: var(--tailor-marca-texto); }
+.tailor-ph__trilha ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--tailor-marca-texto-suave); }
+.tailor-ph__trilha li { display: flex; align-items: center; gap: 6px; }
+.tailor-ph__trilha-link { color: inherit; text-decoration: none; }
+.tailor-ph__trilha [aria-current="page"] { color: var(--tailor-marca-texto); }
+.tailor-ph__voltar:focus-visible, .tailor-ph__trilha-link:focus-visible { outline: 3px solid var(--tailor-marca-primaria); outline-offset: 2px; }
+.tailor-ph__sobretitulo {
+  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-marca-primaria-texto);
+}
+.tailor-ph__ponto { width: 8px; height: 8px; background: var(--tailor-marca-primaria); border-radius: var(--tailor-marca-raio); }
+.tailor-ph__titulo-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; }
+.tailor-ph__titulo {
+  margin: 0; line-height: 1.1;
+  font-family: var(--tailor-marca-fonte-titulo); font-weight: var(--tailor-marca-peso-titulo);
+  text-transform: var(--tailor-marca-caixa-titulo);
+  font-size: var(--tailor-cabecalho-tamanho-titulo, clamp(26px, 4vw, 42px));
+}
+.tailor-ph__descricao { margin: 0; max-width: 610px; font-size: 16px; line-height: 1.618; color: var(--tailor-marca-texto-suave); }
+.tailor-ph__lateral { display: flex; flex-shrink: 0; flex-wrap: wrap; align-items: center; gap: 13px; }
+.tailor-ph__indicador { text-align: right; }
+.tailor-ph__indicador-valor { display: block; font-size: 26px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--tailor-marca-fonte-titulo); }
+.tailor-ph__indicador-rotulo { display: block; margin-top: 8px; font-size: 13px; color: var(--tailor-marca-texto-suave); }
+.tailor-ph__extra { min-width: 0; }
+
 /* TailorLoader — a malha pequena se desenha a partir do ponto e some, em 2φ (3,236s). */
 .tailor-malha__linha {
   stroke-dasharray: 1;

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/TailorMarca.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-marca-*`
+ * (por enquanto o `TailorPageHeader`) trocam de cor, fonte e cantos sem mudar uma
+ * linha de componente. Sem tema, valem os padrões Tailor do `style.css`.
+ */
+export type TailorTema = {
+    /** Cor de destaque: o ponto do sobretítulo, a barra de foco. */
+    primaria?: string;
+    /** Destaque como texto sobre o fundo (precisa de contraste; no Tailor é o verde-ink). */
+    primariaTexto?: string;
+    texto?: string;
+    textoSuave?: string;
+    borda?: string;
+    /** Fundo do cabeçalho. Padrão: transparente (o cabeçalho é o começo da página). */
+    fundo?: string;
+    fonteTitulo?: string;
+    fonteTexto?: string;
+    pesoTitulo?: string | number;
+    /** `uppercase` para marcas que pedem título em caixa alta. */
+    caixaTitulo?: 'none' | 'uppercase';
+    /** Cantos dos elementos com caixa (etiqueta, botão voltar). Tailor: 0. */
+    raio?: string;
+};
+/** O tema como objeto de variáveis, para `style` ou para montar um CSS do cliente. */
+export declare function temaParaVariaveis(tema: TailorTema): Record<string, string>;
+export type TailorMarcaProps = {
+    tema: TailorTema;
+    /** Ajustes do tema escuro (`.dark` ou `[data-theme="dark"]` num ancestral). */
+    escuro?: TailorTema;
+    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 TailorMarca({ tema, escuro, children }: TailorMarcaProps): 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 WhitelabelDoCliente = {
+    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 contraste(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 temaDoWhitelabel(wl?: WhitelabelDoCliente | null): {
+    tema: TailorTema;
+    escuro?: TailorTema;
+};

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. */
+    titulo: React.ReactNode;
+    /** Uma frase: o que se faz nesta tela. */
+    descricao?: React.ReactNode;
+    /** Seção ou contexto, com o ponto da marca. Sem ele, não aparece. */
+    sobretitulo?: string;
+    /** Trilha de navegação; o último item é a página atual. */
+    trilha?: Array<{
+        rotulo: string;
+        href?: string;
+    }>;
+    /** Link ou ação de voltar, acima de tudo. */
+    voltar?: {
+        rotulo: string;
+        href?: string;
+        onClick?: () => void;
+    };
+    /** Ao lado do título: status, plano, contagem. */
+    etiqueta?: React.ReactNode;
+    /** Números do topo, quando ajudam a decidir o que fazer aqui. */
+    indicadores?: Array<{
+        rotulo: string;
+        valor: React.ReactNode;
+    }>;
+    /** Botões e busca, à direita. */
+    acoes?: 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-marca-*` e
+ * `--tailor-cabecalho-*` (ver `TailorMarca`), 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({ titulo, descricao, sobretitulo, trilha, voltar, etiqueta, indicadores, acoes, children, renderLink, className, }: TailorPageHeaderProps): React.JSX.Element;

package/dist/types/index.d.ts

@@ -16,3 +16,7 @@ export type { AgenteMascoteProps, ChaveDoMascote, ChaveDoAgente, EstadoDoMascote
 export type { ExpressaoDoMascote, TemaDoMascote, AcessorioDoMascote, ObjetoDoMascote, } from './components/MascoteVetor';
 export { EquipeDock } from './components/EquipeDock';
 export type { EquipeDockProps, AgenteDaEquipe } from './components/EquipeDock';
+export { TailorPageHeader } from './components/TailorPageHeader';
+export type { TailorPageHeaderProps, TailorPageHeaderLink } from './components/TailorPageHeader';
+export { TailorMarca, temaParaVariaveis, temaDoWhitelabel, contraste } from './components/TailorMarca';
+export type { TailorMarcaProps, TailorTema, WhitelabelDoCliente } from './components/TailorMarca';

package/package.json

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