@ffid-br/tailor-ui 0.1.2 → 0.2.0

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.2.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",