@ffid-br/tailor-ui 0.1.2 → 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/dist/types/components/TailorSidebar.d.ts

@@ -0,0 +1,140 @@
+import { default as React, ReactNode } from 'react';
+export type SuperficieSidebar = 'auto' | 'clara' | 'escura';
+export type BreakpointSidebar = 'md' | 'lg';
+export type TailorSidebarItem = {
+    id: string;
+    rotulo: string;
+    /** Ícone de linha (lucide, heroicons outline). Recebe só `className`. */
+    icone: React.ComponentType<{
+        className?: string;
+    }>;
+    href?: string;
+    ativo?: boolean;
+    /** Contagem ou marcador curto. `0` e `''` não aparecem. */
+    badge?: number | string;
+    /** `alerta` pinta o chip de vermelho. Padrão: neutro (preto/branco). */
+    badgeTom?: 'neutro' | 'alerta';
+    /** Subitens. O item pai vira um botão que abre e fecha a lista. */
+    filhos?: TailorSidebarItem[];
+    /** Chamado no clique. Sem `href`, o item vira um botão de ação. */
+    onSelect?: () => void;
+    /** Item visível mas inativo (ex.: "Em breve"). */
+    desabilitado?: boolean;
+};
+export type TailorSidebarGrupo = {
+    rotulo?: string;
+    itens: TailorSidebarItem[];
+};
+export type TailorSidebarLinkProps = {
+    href?: string;
+    className: string;
+    children: ReactNode;
+    'aria-current'?: 'page';
+    'aria-label'?: string;
+    title?: string;
+    onClick: () => void;
+};
+/** Troca o `<a>` padrão pelo link do roteador (NavLink/Link do React Router). */
+export type TailorSidebarRenderLink = (item: TailorSidebarItem, props: TailorSidebarLinkProps) => ReactNode;
+export type SidebarItemProps = {
+    item: TailorSidebarItem;
+    nivel?: number;
+};
+/** Um item da nav. Exportado para quem monta grupos à mão (ex.: sub-nav do Orchestrator). */
+export declare const SidebarItem: React.FC<SidebarItemProps>;
+export type SidebarGroupProps = {
+    rotulo?: string;
+    itens?: TailorSidebarItem[];
+    /** `<SidebarItem>`s ou `<li>` próprios, depois dos `itens`. */
+    children?: ReactNode;
+};
+/** Grupo com rótulo de 11px. No trilho o rótulo sai e o espaço entre grupos fica. */
+export declare const SidebarGroup: React.FC<SidebarGroupProps>;
+export type TailorSidebarProps = {
+    /** Nome do produto no lockup ("Conta", "Studio", "BI", "Pilot"). */
+    produto: string;
+    /** Logo do cliente (whitelabel) no lugar do wordmark. */
+    logoClaro?: string;
+    logoEscuro?: string;
+    /** Substitui o lockup inteiro (ex.: logo do cliente com link para o início). */
+    marca?: ReactNode;
+    /** Marca no trilho recolhido, acima do botão de expandir. Padrão: nenhuma. */
+    marcaRecolhida?: ReactNode;
+    grupos: TailorSidebarGrupo[];
+    /** Seletor de contas. Ocupa a linha; some no trilho. */
+    accountSelector?: ReactNode;
+    /** Seletor de apps, à direita do seletor de contas (centralizado no trilho). */
+    apps?: ReactNode;
+    /** Conteúdo extra no fim da nav (grupos montados à mão, aviso de status). */
+    children?: ReactNode;
+    /** Rodapé fixo: em geral o `TailorUserMenu`. */
+    rodape?: ReactNode;
+    /** "Powered by Tailor.ia". Ligue só quando a logo do cliente substitui o wordmark. */
+    poweredBy?: boolean;
+    superficie?: SuperficieSidebar;
+    /** Trilho de 80px, só ícones. Controlado pelo app (ele guarda a preferência). */
+    recolhido?: boolean;
+    /** Sem isto, o botão de recolher não aparece. */
+    onRecolher?: (recolhido: boolean) => void;
+    /** Gaveta do celular aberta. Abaixo do breakpoint a barra fixa some. */
+    aberto?: boolean;
+    onFechar?: () => void;
+    /** Onde a barra fixa vira gaveta. Padrão `lg` (1024px). */
+    breakpoint?: BreakpointSidebar;
+    renderLink?: TailorSidebarRenderLink;
+    /** Nome da navegação para leitores de tela. */
+    ariaLabel?: string;
+    /** Classes extras no `<aside>` (ex.: `fixed inset-y-0` em vez de `sticky`). */
+    className?: string;
+};
+/**
+ * Barra lateral padrão: marca + recolher, seletor de contas + apps, grupos de
+ * itens, rodapé. O mesmo `grupos` desenha a barra fixa e a gaveta do celular.
+ */
+export declare const TailorSidebar: React.FC<TailorSidebarProps>;
+export type TailorUserMenuAcao = {
+    rotulo: string;
+    icone?: React.ComponentType<{
+        className?: string;
+    }>;
+    href?: string;
+    onSelect?: () => void;
+    /** `perigo` para "Sair". */
+    tom?: 'perigo';
+};
+export type TailorUserMenuProps = {
+    nome: string;
+    /** Linha de baixo: e-mail. */
+    detalhe?: string;
+    /** Papel na conta ("Administrador"), mostrado no painel. */
+    papel?: string;
+    avatarUrl?: string;
+    acoes?: TailorUserMenuAcao[];
+    /** Conteúdo livre no painel, antes das ações (tema, notificações push). */
+    children?: ReactNode;
+};
+/**
+ * Menu do usuário para o `rodape` da `TailorSidebar`. Botão que abre um painel
+ * (padrão disclosure: aceita conteúdo livre, como o seletor de tema). Esc e
+ * clique fora fecham; setas percorrem os itens.
+ */
+export declare const TailorUserMenu: React.FC<TailorUserMenuProps>;
+export type TailorMobileBarProps = {
+    /** Abre a gaveta: ligue no `aberto` da `TailorSidebar`. */
+    onAbrirMenu: () => void;
+    /** Gaveta aberta, para o `aria-expanded` do hambúrguer. */
+    menuAberto?: boolean;
+    produto: string;
+    logoClaro?: string;
+    logoEscuro?: string;
+    marca?: ReactNode;
+    apps?: ReactNode;
+    /** À direita dos apps (sino, avatar). */
+    direita?: ReactNode;
+    superficie?: SuperficieSidebar;
+    /** Mesmo breakpoint da `TailorSidebar`. A barra some a partir dele. */
+    breakpoint?: BreakpointSidebar;
+    className?: string;
+};
+/** Barra do topo no celular: hambúrguer, marca, apps. A nav fica toda na gaveta. */
+export declare const TailorMobileBar: React.FC<TailorMobileBarProps>;

package/dist/types/index.d.ts

@@ -9,3 +9,5 @@ export type { TailorBrandMarkProps } from './components/TailorBrandMark';
 export { EntrarOverlay, EntradaApp, marcarEntradaPendente, limparEntradaPendente, ENTRADA_PENDENTE, } from './components/entrada';
 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';

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@ffid-br/tailor-ui",
   "private": false,
-  "version": "0.1.2",
-  "description": "Primitivos de marca Tailor.ia em React: loader, intro, transição de login e lockup.",
+  "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",
   "module": "dist/index.es.js",