forlogic-core 1.16.4 → 1.16.5

package/dist/README.md

@@ -1094,120 +1094,120 @@ O comando usa credenciais públicas do Supabase do forlogic-core e não requer c
 
 ---
 
-<!-- AUTO_GENERATED_START -->
-
-### 📚 Estatísticas da Documentação
-
-**61 Componentes UI** | **6 Tokens** | **9 Ferramentas CRUD** | **10 Core/Utilitários**
-
----
-
-### 🎨 Fundamentos (Tokens)
-
-- [Ícones](./docs/DESIGN_SYSTEM.md#iconsfoundation) - Biblioteca completa de ícones usando Lucide React - uma biblioteca de ícones
-  open-source com mais de 1400 ícones em SVG.
-- [Sistema de Cores](./docs/DESIGN_SYSTEM.md#colorsfoundation) - Sistema de cores profissional completo com escala neutra (0-1000), escala de marca (50-900),
-  e cores funcionais (sucesso, aviso, perigo, sharp). Todas as cores garantem conformidade de contraste WCAG AA.
-- [Sistema de Espaçamento](./docs/DESIGN_SYSTEM.md#spacing) - Escala de espaçamento consistente baseada em uma unidade base de 4px (0.25rem),
-  garantindo ritmo visual e alinhamento em todos os componentes.
-- [Sistema de Raio de Borda](./docs/DESIGN_SYSTEM.md#radius) - Arredondamento de cantos consistente que cria harmonia visual e
-  define a personalidade da interface.
-- [Sistema de Sombras e Elevação](./docs/DESIGN_SYSTEM.md#shadows) - Sombras criam profundidade e hierarquia, ajudando usuários a entender as relações
-  espaciais entre elementos e seus estados interativos.
-- [Sistema Tipográfico](./docs/DESIGN_SYSTEM.md#typographyfoundation) - Sistema tipográfico profissional com Display (2 níveis), Headings (6 níveis), Subtitle (2 níveis),
-  Body (2 níveis), Label (2 níveis) e Monospace (Code). Todos os níveis incluem escalamento responsivo e conformidade de acessibilidade.
-
-### 🧩 Componentes UI
-
-- [Accordion & Collapsible](./docs/DESIGN_SYSTEM.md#accordion) - Componentes de expansão/colapso para revelar conteúdo. Accordion para múltiplos itens, Collapsible para item único.
-- [Action Button](./docs/DESIGN_SYSTEM.md#actionbutton) - Botão compacto otimizado para ações em linhas de tabela e menus dropdown. OBRIGATÓRIO para todas as ações em tabelas CRUD.
-- [Alert](./docs/DESIGN_SYSTEM.md#alert) - Exibe uma mensagem de destaque para chamar a atenção do usuário. O componente inclui ícone automático baseado na variante.
-- [AppHeader](./docs/DESIGN_SYSTEM.md#appheader) - Header principal da aplicação com título dinâmico, busca global integrada ao CRUD, ações customizáveis e informações do usuário. Altura fixa de 56px (h-14).
-- [AppSidebar](./docs/DESIGN_SYSTEM.md#appsidebar) - Sidebar de navegação principal da aplicação com suporte a pin/unpin, permissões assíncronas, ações de módulo (SidebarActionTrigger), redimensionamento e navegação hierárquica.
-- [Assinatura Digital (Sign)](./docs/DESIGN_SYSTEM.md#sign) - Componente único multi-provider de assinatura digital com fluxo em 3 fases: Upload → Assinatura → Download. Suporta Clicksign (widget JavaScript embedded v2.1.0, API v3) e D4Sign (iframe embedded, API v1). O provedor é resolvido automaticamente pela configuração da unidade na tabela sign_configs.
-- [Avatar](./docs/DESIGN_SYSTEM.md#avatar) - Um elemento de imagem com fallback para representar o usuário.
-- [Badge](./docs/DESIGN_SYSTEM.md#badge) - Exibe um badge ou um componente que se parece com um badge.
-- [BodyContent](./docs/DESIGN_SYSTEM.md#bodycontent) - Container principal de página com breadcrumb, background neutro e suporte a múltiplos containers de conteúdo.
-- [Breadcrumb](./docs/DESIGN_SYSTEM.md#breadcrumb) - Exibe o caminho até o recurso atual usando uma hierarquia de links.
-- [Button](./docs/DESIGN_SYSTEM.md#button) - Componente de botão com variantes semânticas, tamanhos e estados. Use para ações primárias, secundárias e destrutivas.
-- [Button Group](./docs/DESIGN_SYSTEM.md#buttongroup) - Agrupa botões relacionados com espaçamento e bordas apropriados.
-- [Calendar & Date Picker](./docs/DESIGN_SYSTEM.md#calendar) - Componentes para seleção de datas. O Calendar exibe um calendário interativo, enquanto o Date Picker combina um campo de input com o calendário em um popover.
-- [Card](./docs/DESIGN_SYSTEM.md#card) - Exibe um card com cabeçalho, conteúdo e rodapé.
-- [Chart](./docs/DESIGN_SYSTEM.md#chart) - Sistema de gráficos baseado em Recharts com suporte a temas e tooltips customizados. Inclui barras, linhas, áreas, pizza, radar e mais.
-- [Checkbox](./docs/DESIGN_SYSTEM.md#checkbox) - Um controle que permite ao usuário alternar entre marcado e desmarcado.
-- [Color Picker](./docs/DESIGN_SYSTEM.md#colorpicker) - Seletor de cores com paleta predefinida e seletor customizado.
-- [Combobox](./docs/DESIGN_SYSTEM.md#combobox) - Componente versátil para seleção única ou múltipla com busca inteligente. Combina Popover e Command para autocomplete. O componente Command é usado internamente para fornecer funcionalidades de busca e navegação por teclado.
-- [ComboTree](./docs/DESIGN_SYSTEM.md#combotree) - Componente de seleção hierárquica (tree view) com busca recursiva, expansão por chevron e seleção por label.
-- [Context Menu](./docs/DESIGN_SYSTEM.md#contextmenu) - Exibe um menu ao usuário — como um conjunto de ações ou funções — acionado por um clique com o botão direito do mouse.
-- [DataList](./docs/DESIGN_SYSTEM.md#datalist) - Sistema de lista de dados com composição de componentes. Ideal para exibir informações estruturadas em formato de cards.
-- [Dialog](./docs/DESIGN_SYSTEM.md#dialog) - Uma janela sobreposta à janela principal ou a outra janela de diálogo, tornando o conteúdo abaixo inerte. Inclui variações para seleção, tabelas e formulários.
-- [Dropdown Menu](./docs/DESIGN_SYSTEM.md#dropdownmenu) - Exibe um menu ao usuário — como um conjunto de ações ou funções — acionado por um botão ou elemento interativo.
-- [Empty State](./docs/DESIGN_SYSTEM.md#emptystate) - Componente para exibir estados vazios com ícone, mensagem e ação opcional.
-- [Form](./docs/DESIGN_SYSTEM.md#form) - Construindo formulários com React Hook Form e Zod.
-- [Grid & Stack](./docs/DESIGN_SYSTEM.md#grid) - Sistema de layout com Grid responsivo e Stack flexível para organização de conteúdo.
-- [Hover Card](./docs/DESIGN_SYSTEM.md#hovercard) - Para usuários com visão visualizarem conteúdo disponível por trás de um link. Exibe informações adicionais ao passar o mouse.
-- [Icon Picker](./docs/DESIGN_SYSTEM.md#iconpicker) - Seletor de ícones da biblioteca Lucide React com busca integrada.
-- [Input](./docs/DESIGN_SYSTEM.md#input) - Campo de entrada de texto com suporte a todos os tipos HTML. Inclui Label para rótulos acessíveis e InputGroup para agrupar inputs com addons de prefixo, sufixo, ícones e botões.
-- [Label](./docs/DESIGN_SYSTEM.md#label) - Renderiza uma label acessível associada a controles de formulário.
-- [Leadership](./docs/DESIGN_SYSTEM.md#leadership) - Módulo hierárquico de liderança para gerenciar relações de liderança entre usuários do Qualiex. Inclui componentes visuais, hooks de API e utilitários para construção de árvores hierárquicas.
-- [Loading](./docs/DESIGN_SYSTEM.md#skeleton) - Componentes para estados de carregamento: Skeleton (placeholders), Spinner (indicador de loading), e LoadingState (gerenciamento declarativo).
-- [Media](./docs/DESIGN_SYSTEM.md#media) - Módulo completo para upload, edição e renderização de imagens e vídeos. Inclui editores interativos, renderizadores otimizados e hook genérico de upload.
-- [Menubar](./docs/DESIGN_SYSTEM.md#menubar) - Barra de menu horizontal com submenus, checkboxes e radio items. Ideal para barras de navegação de aplicações desktop-like, seguindo padrões de aplicações nativas.
-- [ModulesDialog](./docs/DESIGN_SYSTEM.md#modulesdialog) - Dialog para navegação entre módulos do sistema, organizado em abas (Qualiex, Clássicos) com separação entre módulos contratados e disponíveis, OnboardingDialog para descoberta e cards informativos no rodapé.
-- [Navigation Menu](./docs/DESIGN_SYSTEM.md#navigationmenu) - Uma coleção de links para navegação em websites.
-- [Onboarding Dialog](./docs/DESIGN_SYSTEM.md#onboardingdialog) - Componente para fluxos de onboarding em múltiplos passos. Suporta imagens estáticas, GIFs, navegação entre steps e indicador de progresso com dropdown.
-- [Pagination](./docs/DESIGN_SYSTEM.md#pagination) - Componente de paginação padronizado com layout de 3 colunas, seletor de itens por página e navegação completa.
-- [Pagination](./docs/DESIGN_SYSTEM.md#pagination) - Barra de paginação completa com seletor de itens por página e controles de navegação.
-- [Places](./docs/DESIGN_SYSTEM.md#places) - Módulo para gerenciar estruturas hierárquicas de locais integrado com a API Qualiex. Inclui visualização em árvore, gestão de acessos e componentes reutilizáveis.
-- [Popover](./docs/DESIGN_SYSTEM.md#popover) - Exibe conteúdo rico em um portal, acionado por um botão.
-- [Progress](./docs/DESIGN_SYSTEM.md#progress) - Exibe um indicador mostrando o progresso de conclusão de uma tarefa, tipicamente exibido como uma barra de progresso.
-- [QualiexUserField](./docs/DESIGN_SYSTEM.md#qualiexuserfield) - Campo de seleção de usuários integrado com a API Qualiex. Suporta seleção única ou múltipla, display customizado, filtros e funciona perfeitamente dentro de Dialogs.
-- [Radio Group](./docs/DESIGN_SYSTEM.md#radiogroup) - Um conjunto de botões marcáveis—conhecidos como botões de rádio—onde apenas um pode ser marcado por vez.
-- [RequiredFieldsCounter](./docs/DESIGN_SYSTEM.md#requiredfieldscounter) - Indica o progresso de preenchimento de campos obrigatórios em formulários com feedback visual e tooltips informativos.
-- [Resizable](./docs/DESIGN_SYSTEM.md#resizable) - Painéis redimensionáveis para criar layouts flexíveis e adaptáveis. Baseado em react-resizable-panels.
-- [Rich Text Editor](./docs/DESIGN_SYSTEM.md#richtexteditor) - Editor de texto rico construído com Tiptap, suportando formatação visual, edição de código HTML e preview. Ideal para formulários que precisam de conteúdo formatado.
-- [ScrollArea](./docs/DESIGN_SYSTEM.md#scrollarea) - Área de rolagem customizada com scrollbars estilizadas, baseada no Radix UI ScrollArea.
-- [Select](./docs/DESIGN_SYSTEM.md#select) - Exibe uma lista de opções para o usuário escolher—acionada por um botão.
-- [Separator](./docs/DESIGN_SYSTEM.md#separator) - Separa visual ou semanticamente o conteúdo.
-- [Slider](./docs/DESIGN_SYSTEM.md#slider) - Um input onde o usuário seleciona um valor dentro de um intervalo determinado.
-- [Split Button](./docs/DESIGN_SYSTEM.md#splitbutton) - Combina uma ação principal com ações secundárias em um menu dropdown. Ideal para destacar a ação prioritária enquanto mantém alternativas acessíveis.
-- [Step Selector](./docs/DESIGN_SYSTEM.md#stepselector) - Componente de navegação para Wizards multi-etapas. Combina um DropdownMenu para seleção de etapas com uma barra de Progress para indicação visual do progresso.
-- [Switch](./docs/DESIGN_SYSTEM.md#switch) - Um controle que permite ao usuário alternar entre marcado e desmarcado.
-- [Table](./docs/DESIGN_SYSTEM.md#table) - Uma tabela semântica para exibir dados tabulares. Inclui TableResizeHandle para redimensionamento de colunas e TruncatedCell para texto truncado com tooltip automático.
-- [Tabs & TabPageLayout](./docs/DESIGN_SYSTEM.md#tabs) - Componentes de navegação em abas. Tabs para conteúdo simples e TabPageLayout para páginas completas com header fixo e scroll.
-- [Textarea](./docs/DESIGN_SYSTEM.md#textarea) - Exibe um textarea de formulário ou um componente que se parece com um textarea.
-- [Toast](./docs/DESIGN_SYSTEM.md#toast) - Componente de notificação toast usando Sonner. Feedback temporário e não bloqueante que informa rapidamente o usuário sem competir visualmente com outros Toasts.
-- [Toggle](./docs/DESIGN_SYSTEM.md#toggle) - Botões de dois estados que podem estar ligados ou desligados, individualmente ou em grupo.
-- [Tooltip](./docs/DESIGN_SYSTEM.md#tooltip) - Um popup que exibe informações relacionadas a um elemento quando o elemento recebe foco do teclado ou o mouse passa sobre ele.
-- [Truncated Cell](./docs/DESIGN_SYSTEM.md#truncatedcell) - Componente utilitário que trunca texto longo e exibe tooltip automático quando o conteúdo está cortado.
-
-### 🚀 Sistema CRUD
-
-- [BaseForm](./docs/DESIGN_SYSTEM.md#baseform) - Formulário dinâmico baseado em configuração de seções e campos, suportando múltiplos tipos de campo, validação e layouts flexíveis.
-- [createCrudPage](./docs/DESIGN_SYSTEM.md#createcrudpage) - Factory de alto nível que gera uma página CRUD completa com ~15 linhas de configuração declarativa.
-- [CRUD de Fornecedores](./docs/DESIGN_SYSTEM.md#crudusers) - Padrão completo de CRUD para gestão de fornecedores com 16 campos, incluindo ordenação, filtros avançados, exportação/importação e ações em massa.
-- [CRUD Primitives](./docs/DESIGN_SYSTEM.md#crudprimitives) - Componentes de baixo nível para interfaces CRUD totalmente customizadas com controle total sobre layout e comportamento.
-- [CRUD System](./docs/DESIGN_SYSTEM.md#crudsystem) - Sistema completo para criação rápida de interfaces CRUD com validação, busca, paginação e muito mais.
-- [CrudActionBar](./docs/DESIGN_SYSTEM.md#crudactionbar) - Barra de ações unificada usada por todos os componentes CRUD (CrudTable, CrudGrid, createCrudPage) para garantir UX consistente.
-- [CrudGrid](./docs/DESIGN_SYSTEM.md#crudgrid) - Componente para exibir dados em formato de grade (cards) com todas as funcionalidades CRUD. Alternativa visual ao CrudTable para listagens com layout mais visual.
-- [CrudTable](./docs/DESIGN_SYSTEM.md#crudtable) - Componente de tabela CRUD completo com ordenação, seleção, resize de colunas, ações em massa e paginação integrada com useCrud.
-- [Sistema CRUD](./docs/DESIGN_SYSTEM.md#crudoverview) - Componentes padronizados para operações Create, Read, Update e Delete com arquitetura em 3 níveis de abstração.
-
-### 🔧 Core & Utilitários
-
-- [Autenticação (Auth)](./docs/DESIGN_SYSTEM.md#auth) - Sistema completo de autenticação OAuth integrado com Qualiex. Inclui gerenciamento de tokens, rotas protegidas, suporte multi-tenant e troca de unidades.
-- [Contexts](./docs/DESIGN_SYSTEM.md#contexts) - Contexts globais da biblioteca forlogic-core para gerenciamento de estado da aplicação. Incluem LocaleContext para i18n, NavigationContext para navegação, PageMetadataContext para metadados de página e ModalStateContext para rastreamento de modais.
-- [Environments (Configuração por Project ID)](./docs/DESIGN_SYSTEM.md#environments) - Configurações de ambiente são extraídas automaticamente do arquivo auto-gerado pelo Lovable (src/integrations/supabase/client.ts) e injetadas pelo vite.config.ts. Não é necessário configurar variáveis Supabase no .env.
-- [ErrorBoundary](./docs/DESIGN_SYSTEM.md#errorboundary) - Componente de classe React que captura erros de renderização em componentes filhos, evitando que a aplicação inteira quebre.
-- [Hooks](./docs/DESIGN_SYSTEM.md#hooks) - Hooks utilitários da biblioteca forlogic-core para otimização, dados, formatação e UI. Todos os hooks seguem padrões React e são compatíveis com React Query quando aplicável.
-- [Internacionalização (i18n)](./docs/DESIGN_SYSTEM.md#i18n) - Sistema de internacionalização usando react-i18next com traduções carregadas de um arquivo JSON estático local (lib/i18n/translations.json). Suporta pt-BR, en-US e es-ES com gerenciamento de preferências do usuário.
-- [Controle de Acesso a Módulos](./docs/DESIGN_SYSTEM.md#moduleaccess) - Sistema para verificar e bloquear automaticamente o acesso do usuário a módulos da plataforma Qualiex. Inclui proteção automática de rotas via CoreProviders e hook para verificações programáticas.
-- [Segurança (Vite Config)](./docs/DESIGN_SYSTEM.md#security) - Plugin de segurança para Vite que aplica headers OWASP, CSP configurável, CORS seguro e proteções contra ataques comuns. Configuração centralizada para todos os projetos Forlogic.
-- [Services](./docs/DESIGN_SYSTEM.md#services) - Serviços utilitários da biblioteca forlogic-core para operações CRUD, envio de emails, tratamento de erros e gerenciamento de traduções. Todos os serviços são singletons prontos para uso.
-- [Utilities](./docs/DESIGN_SYSTEM.md#utilities) - Funções utilitárias essenciais exportadas pela biblioteca para manipulação de classes CSS, formatação de datas e valores monetários.
-
----
-
-> 📘 **Documentação Completa**: Para ver detalhes de props, exemplos de uso e acessibilidade de cada componente, consulte o [Design System Completo](./docs/DESIGN_SYSTEM.md).
-
+<!-- AUTO_GENERATED_START -->
+
+### 📚 Estatísticas da Documentação
+
+**61 Componentes UI** | **6 Tokens** | **9 Ferramentas CRUD** | **10 Core/Utilitários**
+
+---
+
+### 🎨 Fundamentos (Tokens)
+
+- [Ícones](./docs/DESIGN_SYSTEM.md#iconsfoundation) - Biblioteca completa de ícones usando Lucide React - uma biblioteca de ícones
+          open-source com mais de 1400 ícones em SVG.
+- [Sistema de Cores](./docs/DESIGN_SYSTEM.md#colorsfoundation) - Sistema de cores profissional completo com escala neutra (0-1000), escala de marca (50-900),
+          e cores funcionais (sucesso, aviso, perigo, sharp). Todas as cores garantem conformidade de contraste WCAG AA.
+- [Sistema de Espaçamento](./docs/DESIGN_SYSTEM.md#spacing) - Escala de espaçamento consistente baseada em uma unidade base de 4px (0.25rem),
+          garantindo ritmo visual e alinhamento em todos os componentes.
+- [Sistema de Raio de Borda](./docs/DESIGN_SYSTEM.md#radius) - Arredondamento de cantos consistente que cria harmonia visual e
+          define a personalidade da interface.
+- [Sistema de Sombras e Elevação](./docs/DESIGN_SYSTEM.md#shadows) - Sombras criam profundidade e hierarquia, ajudando usuários a entender as relações
+          espaciais entre elementos e seus estados interativos.
+- [Sistema Tipográfico](./docs/DESIGN_SYSTEM.md#typographyfoundation) - Sistema tipográfico profissional com Display (2 níveis), Headings (6 níveis), Subtitle (2 níveis),
+          Body (2 níveis), Label (2 níveis) e Monospace (Code). Todos os níveis incluem escalamento responsivo e conformidade de acessibilidade.
+
+### 🧩 Componentes UI
+
+- [Accordion & Collapsible](./docs/DESIGN_SYSTEM.md#accordion) - Componentes de expansão/colapso para revelar conteúdo. Accordion para múltiplos itens, Collapsible para item único.
+- [Action Button](./docs/DESIGN_SYSTEM.md#actionbutton) - Botão compacto otimizado para ações em linhas de tabela e menus dropdown. OBRIGATÓRIO para todas as ações em tabelas CRUD.
+- [Alert](./docs/DESIGN_SYSTEM.md#alert) - Exibe uma mensagem de destaque para chamar a atenção do usuário. O componente inclui ícone automático baseado na variante.
+- [AppHeader](./docs/DESIGN_SYSTEM.md#appheader) - Header principal da aplicação com título dinâmico, busca global integrada ao CRUD, ações customizáveis e informações do usuário. Altura fixa de 56px (h-14).
+- [AppSidebar](./docs/DESIGN_SYSTEM.md#appsidebar) - Sidebar de navegação principal da aplicação com suporte a pin/unpin, permissões assíncronas, ações de módulo (SidebarActionTrigger), redimensionamento e navegação hierárquica.
+- [Assinatura Digital (Sign)](./docs/DESIGN_SYSTEM.md#sign) - Componente único multi-provider de assinatura digital com fluxo em 3 fases: Upload → Assinatura → Download. Suporta Clicksign (widget JavaScript embedded v2.1.0, API v3) e D4Sign (iframe embedded, API v1). O provedor é resolvido automaticamente pela configuração da unidade na tabela sign_configs.
+- [Avatar](./docs/DESIGN_SYSTEM.md#avatar) - Um elemento de imagem com fallback para representar o usuário.
+- [Badge](./docs/DESIGN_SYSTEM.md#badge) - Exibe um badge ou um componente que se parece com um badge.
+- [BodyContent](./docs/DESIGN_SYSTEM.md#bodycontent) - Container principal de página com breadcrumb, background neutro e suporte a múltiplos containers de conteúdo.
+- [Breadcrumb](./docs/DESIGN_SYSTEM.md#breadcrumb) - Exibe o caminho até o recurso atual usando uma hierarquia de links.
+- [Button](./docs/DESIGN_SYSTEM.md#button) - Componente de botão com variantes semânticas, tamanhos e estados. Use para ações primárias, secundárias e destrutivas.
+- [Button Group](./docs/DESIGN_SYSTEM.md#buttongroup) - Agrupa botões relacionados com espaçamento e bordas apropriados.
+- [Calendar & Date Picker](./docs/DESIGN_SYSTEM.md#calendar) - Componentes para seleção de datas. O Calendar exibe um calendário interativo, enquanto o Date Picker combina um campo de input com o calendário em um popover.
+- [Card](./docs/DESIGN_SYSTEM.md#card) - Exibe um card com cabeçalho, conteúdo e rodapé.
+- [Chart](./docs/DESIGN_SYSTEM.md#chart) - Sistema de gráficos baseado em Recharts com suporte a temas e tooltips customizados. Inclui barras, linhas, áreas, pizza, radar e mais.
+- [Checkbox](./docs/DESIGN_SYSTEM.md#checkbox) - Um controle que permite ao usuário alternar entre marcado e desmarcado.
+- [Color Picker](./docs/DESIGN_SYSTEM.md#colorpicker) - Seletor de cores com paleta predefinida e seletor customizado.
+- [Combobox](./docs/DESIGN_SYSTEM.md#combobox) - Componente versátil para seleção única ou múltipla com busca inteligente. Combina Popover e Command para autocomplete. O componente Command é usado internamente para fornecer funcionalidades de busca e navegação por teclado.
+- [ComboTree](./docs/DESIGN_SYSTEM.md#combotree) - Componente de seleção hierárquica (tree view) com busca recursiva, expansão por chevron e seleção por label.
+- [Context Menu](./docs/DESIGN_SYSTEM.md#contextmenu) - Exibe um menu ao usuário — como um conjunto de ações ou funções — acionado por um clique com o botão direito do mouse.
+- [DataList](./docs/DESIGN_SYSTEM.md#datalist) - Sistema de lista de dados com composição de componentes. Ideal para exibir informações estruturadas em formato de cards.
+- [Dialog](./docs/DESIGN_SYSTEM.md#dialog) - Uma janela sobreposta à janela principal ou a outra janela de diálogo, tornando o conteúdo abaixo inerte. Inclui variações para seleção, tabelas e formulários.
+- [Dropdown Menu](./docs/DESIGN_SYSTEM.md#dropdownmenu) - Exibe um menu ao usuário — como um conjunto de ações ou funções — acionado por um botão ou elemento interativo.
+- [Empty State](./docs/DESIGN_SYSTEM.md#emptystate) - Componente para exibir estados vazios com ícone, mensagem e ação opcional.
+- [Form](./docs/DESIGN_SYSTEM.md#form) - Construindo formulários com React Hook Form e Zod.
+- [Grid & Stack](./docs/DESIGN_SYSTEM.md#grid) - Sistema de layout com Grid responsivo e Stack flexível para organização de conteúdo.
+- [Hover Card](./docs/DESIGN_SYSTEM.md#hovercard) - Para usuários com visão visualizarem conteúdo disponível por trás de um link. Exibe informações adicionais ao passar o mouse.
+- [Icon Picker](./docs/DESIGN_SYSTEM.md#iconpicker) - Seletor de ícones da biblioteca Lucide React com busca integrada.
+- [Input](./docs/DESIGN_SYSTEM.md#input) - Campo de entrada de texto com suporte a todos os tipos HTML. Inclui Label para rótulos acessíveis e InputGroup para agrupar inputs com addons de prefixo, sufixo, ícones e botões.
+- [Label](./docs/DESIGN_SYSTEM.md#label) - Renderiza uma label acessível associada a controles de formulário.
+- [Leadership](./docs/DESIGN_SYSTEM.md#leadership) - Módulo hierárquico de liderança para gerenciar relações de liderança entre usuários do Qualiex. Inclui componentes visuais, hooks de API e utilitários para construção de árvores hierárquicas.
+- [Loading](./docs/DESIGN_SYSTEM.md#skeleton) - Componentes para estados de carregamento: Skeleton (placeholders), Spinner (indicador de loading), e LoadingState (gerenciamento declarativo).
+- [Media](./docs/DESIGN_SYSTEM.md#media) - Módulo completo para upload, edição e renderização de imagens e vídeos. Inclui editores interativos, renderizadores otimizados e hook genérico de upload.
+- [Menubar](./docs/DESIGN_SYSTEM.md#menubar) - Barra de menu horizontal com submenus, checkboxes e radio items. Ideal para barras de navegação de aplicações desktop-like, seguindo padrões de aplicações nativas.
+- [ModulesDialog](./docs/DESIGN_SYSTEM.md#modulesdialog) - Dialog para navegação entre módulos do sistema.
+- [Navigation Menu](./docs/DESIGN_SYSTEM.md#navigationmenu) - Uma coleção de links para navegação em websites.
+- [Onboarding Dialog](./docs/DESIGN_SYSTEM.md#onboardingdialog) - Componente para fluxos de onboarding em múltiplos passos. Suporta imagens estáticas, GIFs, navegação entre steps e indicador de progresso com dropdown.
+- [Pagination](./docs/DESIGN_SYSTEM.md#pagination) - Componente de paginação padronizado com layout de 3 colunas, seletor de itens por página e navegação completa.
+- [Pagination](./docs/DESIGN_SYSTEM.md#pagination) - Barra de paginação completa com seletor de itens por página e controles de navegação.
+- [Places](./docs/DESIGN_SYSTEM.md#places) - Módulo para gerenciar estruturas hierárquicas de locais integrado com a API Qualiex. Inclui visualização em árvore, gestão de acessos e componentes reutilizáveis.
+- [Popover](./docs/DESIGN_SYSTEM.md#popover) - Exibe conteúdo rico em um portal, acionado por um botão.
+- [Progress](./docs/DESIGN_SYSTEM.md#progress) - Exibe um indicador mostrando o progresso de conclusão de uma tarefa, tipicamente exibido como uma barra de progresso.
+- [QualiexUserField](./docs/DESIGN_SYSTEM.md#qualiexuserfield) - Campo de seleção de usuários integrado com a API Qualiex. Suporta seleção única ou múltipla, display customizado, filtros e funciona perfeitamente dentro de Dialogs.
+- [Radio Group](./docs/DESIGN_SYSTEM.md#radiogroup) - Um conjunto de botões marcáveis—conhecidos como botões de rádio—onde apenas um pode ser marcado por vez.
+- [RequiredFieldsCounter](./docs/DESIGN_SYSTEM.md#requiredfieldscounter) - Indica o progresso de preenchimento de campos obrigatórios em formulários com feedback visual e tooltips informativos.
+- [Resizable](./docs/DESIGN_SYSTEM.md#resizable) - Painéis redimensionáveis para criar layouts flexíveis e adaptáveis. Baseado em react-resizable-panels.
+- [Rich Text Editor](./docs/DESIGN_SYSTEM.md#richtexteditor) - Editor de texto rico construído com Tiptap, suportando formatação visual, edição de código HTML e preview. Ideal para formulários que precisam de conteúdo formatado.
+- [ScrollArea](./docs/DESIGN_SYSTEM.md#scrollarea) - Área de rolagem customizada com scrollbars estilizadas, baseada no Radix UI ScrollArea.
+- [Select](./docs/DESIGN_SYSTEM.md#select) - Exibe uma lista de opções para o usuário escolher—acionada por um botão.
+- [Separator](./docs/DESIGN_SYSTEM.md#separator) - Separa visual ou semanticamente o conteúdo.
+- [Slider](./docs/DESIGN_SYSTEM.md#slider) - Um input onde o usuário seleciona um valor dentro de um intervalo determinado.
+- [Split Button](./docs/DESIGN_SYSTEM.md#splitbutton) - Combina uma ação principal com ações secundárias em um menu dropdown. Ideal para destacar a ação prioritária enquanto mantém alternativas acessíveis.
+- [Step Selector](./docs/DESIGN_SYSTEM.md#stepselector) - Componente de navegação para Wizards multi-etapas. Combina um DropdownMenu para seleção de etapas com uma barra de Progress para indicação visual do progresso.
+- [Switch](./docs/DESIGN_SYSTEM.md#switch) - Um controle que permite ao usuário alternar entre marcado e desmarcado.
+- [Table](./docs/DESIGN_SYSTEM.md#table) - Uma tabela semântica para exibir dados tabulares. Inclui TableResizeHandle para redimensionamento de colunas e TruncatedCell para texto truncado com tooltip automático.
+- [Tabs & TabPageLayout](./docs/DESIGN_SYSTEM.md#tabs) - Componentes de navegação em abas. Tabs para conteúdo simples e TabPageLayout para páginas completas com header fixo e scroll.
+- [Textarea](./docs/DESIGN_SYSTEM.md#textarea) - Exibe um textarea de formulário ou um componente que se parece com um textarea.
+- [Toast](./docs/DESIGN_SYSTEM.md#toast) - Componente de notificação toast usando Sonner. Feedback temporário e não bloqueante que informa rapidamente o usuário sem competir visualmente com outros Toasts.
+- [Toggle](./docs/DESIGN_SYSTEM.md#toggle) - Botões de dois estados que podem estar ligados ou desligados, individualmente ou em grupo.
+- [Tooltip](./docs/DESIGN_SYSTEM.md#tooltip) - Um popup que exibe informações relacionadas a um elemento quando o elemento recebe foco do teclado ou o mouse passa sobre ele.
+- [Truncated Cell](./docs/DESIGN_SYSTEM.md#truncatedcell) - Componente utilitário que trunca texto longo e exibe tooltip automático quando o conteúdo está cortado.
+
+### 🚀 Sistema CRUD
+
+- [BaseForm](./docs/DESIGN_SYSTEM.md#baseform) - Formulário dinâmico baseado em configuração de seções e campos, suportando múltiplos tipos de campo, validação e layouts flexíveis.
+- [createCrudPage](./docs/DESIGN_SYSTEM.md#createcrudpage) - Factory de alto nível que gera uma página CRUD completa com ~15 linhas de configuração declarativa.
+- [CRUD de Fornecedores](./docs/DESIGN_SYSTEM.md#crudusers) - Padrão completo de CRUD para gestão de fornecedores com 16 campos, incluindo ordenação, filtros avançados, exportação/importação e ações em massa.
+- [CRUD Primitives](./docs/DESIGN_SYSTEM.md#crudprimitives) - Componentes de baixo nível para interfaces CRUD totalmente customizadas com controle total sobre layout e comportamento.
+- [CRUD System](./docs/DESIGN_SYSTEM.md#crudsystem) - Sistema completo para criação rápida de interfaces CRUD com validação, busca, paginação e muito mais.
+- [CrudActionBar](./docs/DESIGN_SYSTEM.md#crudactionbar) - Barra de ações unificada usada por todos os componentes CRUD (CrudTable, CrudGrid, createCrudPage) para garantir UX consistente.
+- [CrudGrid](./docs/DESIGN_SYSTEM.md#crudgrid) - Componente para exibir dados em formato de grade (cards) com todas as funcionalidades CRUD. Alternativa visual ao CrudTable para listagens com layout mais visual.
+- [CrudTable](./docs/DESIGN_SYSTEM.md#crudtable) - Componente de tabela CRUD completo com ordenação, seleção, resize de colunas, ações em massa e paginação integrada com useCrud.
+- [Sistema CRUD](./docs/DESIGN_SYSTEM.md#crudoverview) - Componentes padronizados para operações Create, Read, Update e Delete com arquitetura em 3 níveis de abstração.
+
+### 🔧 Core & Utilitários
+
+- [Autenticação (Auth)](./docs/DESIGN_SYSTEM.md#auth) - Sistema completo de autenticação OAuth integrado com Qualiex. Inclui gerenciamento de tokens, rotas protegidas, suporte multi-tenant e troca de unidades.
+- [Contexts](./docs/DESIGN_SYSTEM.md#contexts) - Contexts globais da biblioteca forlogic-core para gerenciamento de estado da aplicação. Incluem LocaleContext para i18n, NavigationContext para navegação, PageMetadataContext para metadados de página e ModalStateContext para rastreamento de modais.
+- [Environments (Configuração por Project ID)](./docs/DESIGN_SYSTEM.md#environments) - Configurações de ambiente são extraídas automaticamente do arquivo auto-gerado pelo Lovable (src/integrations/supabase/client.ts) e injetadas pelo vite.config.ts. Não é necessário configurar variáveis Supabase no .env.
+- [ErrorBoundary](./docs/DESIGN_SYSTEM.md#errorboundary) - Componente de classe React que captura erros de renderização em componentes filhos, evitando que a aplicação inteira quebre.
+- [Hooks](./docs/DESIGN_SYSTEM.md#hooks) - Hooks utilitários da biblioteca forlogic-core para otimização, dados, formatação e UI. Todos os hooks seguem padrões React e são compatíveis com React Query quando aplicável.
+- [Internacionalização (i18n)](./docs/DESIGN_SYSTEM.md#i18n) - Sistema de internacionalização usando react-i18next com traduções carregadas de um arquivo JSON estático local (lib/i18n/translations.json). Suporta pt-BR, en-US e es-ES com gerenciamento de preferências do usuário.
+- [Acesso Módulo (ModuleAccess)](./docs/DESIGN_SYSTEM.md#moduleaccess) - Sistema de autorização para verificar e bloquear acesso a módulos da plataforma Qualiex. Proteção automática de rotas via CoreProviders e hook para verificações programáticas.
+- [Segurança (Vite Config)](./docs/DESIGN_SYSTEM.md#security) - Plugin de segurança para Vite que aplica headers OWASP, CSP configurável, CORS seguro e proteções contra ataques comuns. Configuração centralizada para todos os projetos Forlogic.
+- [Services](./docs/DESIGN_SYSTEM.md#services) - Serviços utilitários da biblioteca forlogic-core para operações CRUD, envio de emails, tratamento de erros e gerenciamento de traduções. Todos os serviços são singletons prontos para uso.
+- [Utilities](./docs/DESIGN_SYSTEM.md#utilities) - Funções utilitárias essenciais exportadas pela biblioteca para manipulação de classes CSS, formatação de datas e valores monetários.
+
+---
+
+> 📘 **Documentação Completa**: Para ver detalhes de props, exemplos de uso e acessibilidade de cada componente, consulte o [Design System Completo](./docs/DESIGN_SYSTEM.md).
+
 <!-- AUTO_GENERATED_END -->

package/docs/DESIGN_SYSTEM.md

@@ -11548,6 +11548,18 @@ console.log(format?.description); // "Padrão Brasileiro"
 
 Sistema de autorização para verificar e bloquear acesso a módulos da plataforma Qualiex. Proteção automática de rotas via CoreProviders e hook para verificações programáticas.
 
+**Uso:**
+```tsx
+// Proteção automática via CoreProviders
+<CoreProviders moduleAlias="occurrences">
+  <App />
+</CoreProviders>
+
+// Verificação programática via hook
+const { hasAccess, hasAccessTo, role } = useModuleAccess();
+if (hasAccessTo('audit')) { /* ... */ }
+```
+
 **Acessibilidade:**
 - Documentação de acessibilidade presente em HTML estruturado
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "forlogic-core",
-  "version": "1.16.4",
+  "version": "1.16.5",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
@@ -40,7 +40,9 @@
     "build:dev": "vite build --mode development",
     "build:lib": "rollup -c",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "version": "npm run docs:ds && git add docs/DESIGN_SYSTEM.md README.md",
+    "prepublishOnly": "npm whoami || npm login"
   },
   "bin": {
     "lib-update": "dist/bin/pull-docs.js"

package/dist/assets/AccordionDoc-BnfxyOi9.js

@@ -1,31 +0,0 @@
-import{W as l,j as e,X as re,Y,Z as ne,_ as ae,$,a0 as se,a1 as ie,a2 as ce,a3 as le,a4 as de,a5 as q,a6 as pe,r as j,l as S,a7 as me,a8 as ue,a9 as xe,f as fe,aa as Ce,ab as Ae}from"./index-BtX5DZqb.js";import{C as he}from"./ComponentDocTemplate-BtOCnlM2.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";var d="Accordion",ve=["Home","End","ArrowDown","ArrowUp","ArrowLeft","ArrowRight"],[D,be,ge]=re(d),[I]=pe(d,[ge,q]),k=q(),K=l.forwardRef((o,n)=>{const{type:t,...a}=o,s=a,r=a;return e.jsx(D.Provider,{scope:o.__scopeAccordion,children:t==="multiple"?e.jsx(we,{...r,ref:n}):e.jsx(ye,{...s,ref:n})})});K.displayName=d;var[z,je]=I(d),[G,Ie]=I(d,{collapsible:!1}),ye=l.forwardRef((o,n)=>{const{value:t,defaultValue:a,onValueChange:s=()=>{},collapsible:r=!1,...c}=o,[i,p]=Y({prop:t,defaultProp:a??"",onChange:s,caller:d});return e.jsx(z,{scope:o.__scopeAccordion,value:l.useMemo(()=>i?[i]:[],[i]),onItemOpen:p,onItemClose:l.useCallback(()=>r&&p(""),[r,p]),children:e.jsx(G,{scope:o.__scopeAccordion,collapsible:r,children:e.jsx(L,{...c,ref:n})})})}),we=l.forwardRef((o,n)=>{const{value:t,defaultValue:a,onValueChange:s=()=>{},...r}=o,[c,i]=Y({prop:t,defaultProp:a??[],onChange:s,caller:d}),p=l.useCallback(f=>i((u=[])=>[...u,f]),[i]),x=l.useCallback(f=>i((u=[])=>u.filter(w=>w!==f)),[i]);return e.jsx(z,{scope:o.__scopeAccordion,value:c,onItemOpen:p,onItemClose:x,children:e.jsx(G,{scope:o.__scopeAccordion,collapsible:!0,children:e.jsx(L,{...r,ref:n})})})}),[Ne,y]=I(d),L=l.forwardRef((o,n)=>{const{__scopeAccordion:t,disabled:a,dir:s,orientation:r="vertical",...c}=o,i=l.useRef(null),p=ce(i,n),x=be(t),u=le(s)==="ltr",w=de(o.onKeyDown,v=>{if(!ve.includes(v.key))return;const oe=v.target,N=x().filter(O=>!O.ref.current?.disabled),b=N.findIndex(O=>O.ref.current===oe),V=N.length;if(b===-1)return;v.preventDefault();let m=b;const R=0,_=V-1,P=()=>{m=b+1,m>_&&(m=R)},T=()=>{m=b-1,m<R&&(m=_)};switch(v.key){case"Home":m=R;break;case"End":m=_;break;case"ArrowRight":r==="horizontal"&&(u?P():T());break;case"ArrowDown":r==="vertical"&&P();break;case"ArrowLeft":r==="horizontal"&&(u?T():P());break;case"ArrowUp":r==="vertical"&&T();break}const te=m%V;N[te].ref.current?.focus()});return e.jsx(Ne,{scope:t,disabled:a,direction:s,orientation:r,children:e.jsx(D.Slot,{scope:t,children:e.jsx($.div,{...c,"data-orientation":r,ref:p,onKeyDown:a?void 0:w})})})}),g="AccordionItem",[Re,M]=I(g),U=l.forwardRef((o,n)=>{const{__scopeAccordion:t,value:a,...s}=o,r=y(g,t),c=je(g,t),i=k(t),p=ne(),x=a&&c.value.includes(a)||!1,f=r.disabled||o.disabled;return e.jsx(Re,{scope:t,open:x,disabled:f,triggerId:p,children:e.jsx(ae,{"data-orientation":r.orientation,"data-state":Z(x),...i,...s,ref:n,disabled:f,open:x,onOpenChange:u=>{u?c.onItemOpen(a):c.onItemClose(a)}})})});U.displayName=g;var W="AccordionHeader",Q=l.forwardRef((o,n)=>{const{__scopeAccordion:t,...a}=o,s=y(d,t),r=M(W,t);return e.jsx($.h3,{"data-orientation":s.orientation,"data-state":Z(r.open),"data-disabled":r.disabled?"":void 0,...a,ref:n})});Q.displayName=W;var E="AccordionTrigger",B=l.forwardRef((o,n)=>{const{__scopeAccordion:t,...a}=o,s=y(d,t),r=M(E,t),c=Ie(E,t),i=k(t);return e.jsx(D.ItemSlot,{scope:t,children:e.jsx(se,{"aria-disabled":r.open&&!c.collapsible||void 0,"data-orientation":s.orientation,id:r.triggerId,...i,...a,ref:n})})});B.displayName=E;var F="AccordionContent",X=l.forwardRef((o,n)=>{const{__scopeAccordion:t,...a}=o,s=y(d,t),r=M(F,t),c=k(t);return e.jsx(ie,{role:"region","aria-labelledby":r.triggerId,"data-orientation":s.orientation,...c,...a,ref:n,style:{"--radix-accordion-content-height":"var(--radix-collapsible-content-height)","--radix-accordion-content-width":"var(--radix-collapsible-content-width)",...o.style}})});X.displayName=F;function Z(o){return o?"open":"closed"}var _e=K,Pe=U,Te=Q,J=B,ee=X;const H=_e,C=j.forwardRef(({className:o,...n},t)=>e.jsx(Pe,{ref:t,className:S("border-b",o),...n}));C.displayName="AccordionItem";const A=j.forwardRef(({className:o,children:n,...t},a)=>e.jsx(Te,{className:"flex",children:e.jsxs(J,{ref:a,className:S("flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",o),...t,children:[n,e.jsx(me,{className:"h-4 w-4 shrink-0 transition-transform duration-200"})]})}));A.displayName=J.displayName;const h=j.forwardRef(({className:o,children:n,...t},a)=>e.jsx(ee,{ref:a,className:"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",...t,children:e.jsx("div",{className:S("pb-4 pt-0",o),children:n})}));h.displayName=ee.displayName;function Oe(){const[o,n]=j.useState(!1);return e.jsxs(ue,{open:o,onOpenChange:n,className:"w-[350px] space-y-2",children:[e.jsxs("div",{className:"flex items-center justify-between space-x-4 px-4",children:[e.jsx("h4",{className:"text-sm font-semibold",children:"@peduarte starred 3 repositories"}),e.jsx(xe,{asChild:!0,children:e.jsx(fe,{variant:"ghost",size:"sm",children:e.jsx(Ce,{className:"h-4 w-4"})})})]}),e.jsxs(Ae,{className:"space-y-2",children:[e.jsx("div",{className:"rounded-md border px-4 py-2 text-sm",children:"@radix-ui/primitives"}),e.jsx("div",{className:"rounded-md border px-4 py-2 text-sm",children:"@radix-ui/colors"}),e.jsx("div",{className:"rounded-md border px-4 py-2 text-sm",children:"@stitches/react"})]})]})}function Me(){return e.jsx(he,{title:"Accordion & Collapsible",description:"Componentes de expansão/colapso para revelar conteúdo. Accordion para múltiplos itens, Collapsible para item único.",component:e.jsxs(H,{type:"single",collapsible:!0,className:"w-full max-w-md",children:[e.jsxs(C,{value:"item-1",children:[e.jsx(A,{children:"Is it accessible?"}),e.jsx(h,{children:"Yes. It adheres to the WAI-ARIA design pattern."})]}),e.jsxs(C,{value:"item-2",children:[e.jsx(A,{children:"Is it styled?"}),e.jsx(h,{children:"Yes. It comes with default styles that matches the other components aesthetic."})]}),e.jsxs(C,{value:"item-3",children:[e.jsx(A,{children:"Is it animated?"}),e.jsx(h,{children:"Yes. It's animated by default, but you can disable it if you prefer."})]})]}),usage:`import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "forlogic-core"
-
-<Accordion type="single" collapsible>
-  <AccordionItem value="item-1">
-    <AccordionTrigger>Is it accessible?</AccordionTrigger>
-    <AccordionContent>
-      Yes. It adheres to the WAI-ARIA design pattern.
-    </AccordionContent>
-  </AccordionItem>
-</Accordion>`,examples:[{title:"Multiple Items Open",description:"Permite que múltiplos itens sejam abertos ao mesmo tempo",preview:e.jsxs(H,{type:"multiple",className:"w-full max-w-md",children:[e.jsxs(C,{value:"item-1",children:[e.jsx(A,{children:"Section 1"}),e.jsx(h,{children:"Content for section 1"})]}),e.jsxs(C,{value:"item-2",children:[e.jsx(A,{children:"Section 2"}),e.jsx(h,{children:"Content for section 2"})]})]}),code:`<Accordion type="multiple">
-  <AccordionItem value="item-1">
-    <AccordionTrigger>Section 1</AccordionTrigger>
-    <AccordionContent>Content for section 1</AccordionContent>
-  </AccordionItem>
-</Accordion>`},{title:"Collapsible",description:"Componente simples para expandir/colapsar um único item",preview:e.jsx(Oe,{}),code:`import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "forlogic-core"
-
-<Collapsible>
-  <CollapsibleTrigger>Toggle</CollapsibleTrigger>
-  <CollapsibleContent>
-    Content goes here
-  </CollapsibleContent>
-</Collapsible>`}],props:[{name:"type",type:'"single" | "multiple"',default:"-",description:"Accordion: Determina se um ou múltiplos itens podem ser abertos."},{name:"collapsible",type:"boolean",default:"false",description:'Accordion: Quando type é "single", permite fechar o item aberto.'},{name:"defaultValue",type:"string | string[]",default:"-",description:"O(s) valor(es) ativo(s) padrão."},{name:"value",type:"string | string[]",default:"-",description:"O(s) valor(es) ativo(s) controlado(s)."},{name:"open",type:"boolean",default:"-",description:"Collapsible: O estado aberto controlado."},{name:"defaultOpen",type:"boolean",default:"false",description:"Collapsible: O estado aberto padrão."},{name:"onOpenChange",type:"(open: boolean) => void",default:"-",description:"Collapsible: Manipulador quando o estado muda."}],accessibility:["Acessível por teclado - Espaço ou Enter para alternar","Teclas de seta para navegar entre itens do accordion","Suporte ARIA completo com roles e estados adequados","Gerenciamento de foco e indicadores de foco visíveis"],notes:["**Accordion** é ideal para FAQs e listas de perguntas frequentes","**Collapsible** é melhor para um único elemento expansível","Ambos suportam animações suaves de abertura/fechamento"]})}export{Me as AccordionDoc};

package/dist/assets/ActionButtonDoc-b4F_J8gn.js

@@ -1,47 +0,0 @@
-import{j as e,f as s,m as n,n as a,o as i,A as t,p as r,q as o,s as c,t as d}from"./index-BtX5DZqb.js";import{C as l}from"./ComponentDocTemplate-BtOCnlM2.js";import{T as m}from"./trash-CeK-mWnM.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function j(){return e.jsx(l,{title:"Action Button",description:"Botão compacto otimizado para ações em linhas de tabela e menus dropdown. OBRIGATÓRIO para todas as ações em tabelas CRUD.",component:e.jsxs("div",{className:"w-full space-y-6",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"text-sm font-medium mb-2",children:"✅ Uso Correto - ActionButton"}),e.jsxs(a,{children:[e.jsx(i,{asChild:!0,children:e.jsx(t,{})}),e.jsxs(r,{align:"end",children:[e.jsxs(o,{onClick:()=>alert("Editar"),children:[e.jsx(c,{className:"mr-2 h-4 w-4"}),"Editar"]}),e.jsxs(o,{onClick:()=>alert("Visualizar"),children:[e.jsx(d,{className:"mr-2 h-4 w-4"}),"Visualizar"]}),e.jsxs(o,{onClick:()=>alert("Excluir"),className:"text-destructive",children:[e.jsx(m,{className:"mr-2 h-4 w-4"}),"Excluir"]})]})]})]}),e.jsxs("div",{children:[e.jsx("h3",{className:"text-sm font-medium mb-2",children:"ActionButton com ícone customizado"}),e.jsx(t,{children:e.jsx(c,{size:12})})]}),e.jsxs("div",{className:"border-t pt-4",children:[e.jsx("h3",{className:"text-sm font-medium mb-2 text-destructive",children:"❌ Errado - Não use Button genérico"}),e.jsxs("div",{className:"flex gap-2 opacity-50",children:[e.jsx(s,{variant:"ghost",size:"icon",className:"h-8 w-8",disabled:!0,children:e.jsx(n,{className:"h-4 w-4"})}),e.jsx("span",{className:"text-sm text-muted-foreground self-center",children:"← Nunca use isto em tabelas"})]})]})]}),usage:`import { 
-  ActionButton, 
-  DropdownMenu, 
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem 
-} from "forlogic-core"
-import { Edit, Trash } from 'lucide-react'
-
-// ✅ CORRETO: Uso padrão em tabelas CRUD
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <ActionButton />
-  </DropdownMenuTrigger>
-  <DropdownMenuContent align="end">
-    <DropdownMenuItem onClick={() => handleEdit(item)}>
-      <Edit className="mr-2 h-4 w-4" />
-      Editar
-    </DropdownMenuItem>
-    <DropdownMenuItem onClick={() => handleDelete(item)}>
-      <Trash className="mr-2 h-4 w-4" />
-      Excluir
-    </DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>
-
-// ✅ CORRETO: Com ícone customizado
-<ActionButton>
-  <Edit size={12} />
-</ActionButton>`,examples:[{title:"❌ Errado - Não use Button genérico",preview:e.jsxs("div",{className:"flex gap-2 opacity-50",children:[e.jsx(s,{variant:"ghost",size:"icon",className:"h-8 w-8",disabled:!0,children:e.jsx(n,{className:"h-4 w-4"})}),e.jsx("span",{className:"text-sm text-muted-foreground self-center",children:"← Nunca use isto"})]}),code:`// ❌ NUNCA faça isso em tabelas CRUD
-<Button variant="ghost" size="icon" className="h-8 w-8">
-  <MoreHorizontal className="h-4 w-4" />
-</Button>
-
-// ❌ NUNCA faça isso
-<Button variant="outline" size="sm">
-  <EllipsisVertical size={12} />
-</Button>`},{title:"✅ Correto - Sempre use ActionButton",preview:e.jsxs(a,{children:[e.jsx(i,{asChild:!0,children:e.jsx(t,{})}),e.jsxs(r,{align:"end",children:[e.jsx(o,{children:"Editar"}),e.jsx(o,{children:"Excluir"})]})]}),code:`// ✅ SEMPRE use ActionButton em tabelas
-<DropdownMenu>
-  <DropdownMenuTrigger asChild>
-    <ActionButton />
-  </DropdownMenuTrigger>
-  <DropdownMenuContent align="end">
-    <DropdownMenuItem>Editar</DropdownMenuItem>
-    <DropdownMenuItem>Excluir</DropdownMenuItem>
-  </DropdownMenuContent>
-</DropdownMenu>`}],props:[{name:"children",type:"ReactNode",default:"<EllipsisVertical />",description:"Conteúdo customizado (ícone padrão: três pontos verticais)."},{name:"className",type:"string",default:"-",description:"Classes CSS adicionais."},{name:"onClick",type:"() => void",default:"-",description:"Handler de clique."}],accessibility:["Tamanho compacto (height: 28px, padding: 8px)","Ícone padrão: EllipsisVertical (três pontos verticais)",'variant="action" com estilo consistente do tema',"Perfeito para menus de ação em linhas de tabela"],notes:["⚠️ OBRIGATÓRIO: Use ActionButton para TODAS as ações em linhas de tabela CRUD",'❌ PROIBIDO: Usar Button variant="ghost" ou variant="icon" para ações de tabela',"O ActionButton garante consistência visual e acessibilidade em todo o sistema","Para ações padrão (editar/excluir), considere usar TableRowActions que já encapsula tudo","O ícone padrão é EllipsisVertical (não MoreHorizontal) para manter consistência"]})}export{j as ActionButtonDoc};

package/dist/assets/AlertDoc-PkiHguSJ.js

@@ -1,37 +0,0 @@
-import{j as e,aA as a,aB as i,aC as r}from"./index-BtX5DZqb.js";import{C as s}from"./ComponentDocTemplate-BtOCnlM2.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function c(){return e.jsx(s,{title:"Alert",description:"Exibe uma mensagem de destaque para chamar a atenção do usuário. O componente inclui ícone automático baseado na variante.",component:e.jsxs(a,{variant:"info",className:"max-w-md",children:[e.jsx(i,{children:"Informação"}),e.jsx(r,{children:"Esta é uma mensagem informativa para o usuário."})]}),usage:`import { Alert, AlertDescription, AlertTitle } from "forlogic-core"
-
-<Alert variant="info">
-  <AlertTitle>Informação</AlertTitle>
-  <AlertDescription>
-    Esta é uma mensagem informativa para o usuário.
-  </AlertDescription>
-</Alert>`,examples:[{title:"Informativo (info)",description:"Alerta neutro para informações gerais. Ícone: Info.",preview:e.jsxs(a,{variant:"info",className:"max-w-md",children:[e.jsx(i,{children:"Informação"}),e.jsx(r,{children:"Você pode adicionar componentes e dependências ao seu app usando o CLI."})]}),code:`<Alert variant="info">
-  <AlertTitle>Informação</AlertTitle>
-  <AlertDescription>
-    Você pode adicionar componentes e dependências ao seu app usando o CLI.
-  </AlertDescription>
-</Alert>`},{title:"Alerta (warning)",description:"Alerta de atenção para avisos. Ícone: Info.",preview:e.jsxs(a,{variant:"warning",className:"max-w-md",children:[e.jsx(i,{children:"Atenção"}),e.jsx(r,{children:"Sua sessão expira em 5 minutos. Salve suas alterações."})]}),code:`<Alert variant="warning">
-  <AlertTitle>Atenção</AlertTitle>
-  <AlertDescription>
-    Sua sessão expira em 5 minutos. Salve suas alterações.
-  </AlertDescription>
-</Alert>`},{title:"Perigo (danger)",description:"Alerta de erro ou perigo. Ícone: AlertTriangle.",preview:e.jsxs(a,{variant:"danger",className:"max-w-md",children:[e.jsx(i,{children:"Erro"}),e.jsxs(r,{children:[e.jsx("p",{children:"Não foi possível processar seu pagamento."}),e.jsxs("ul",{className:"mt-2 list-disc list-inside text-sm",children:[e.jsx("li",{children:"Verifique os dados do cartão"}),e.jsx("li",{children:"Confirme se há saldo suficiente"})]})]})]}),code:`<Alert variant="danger">
-  <AlertTitle>Erro</AlertTitle>
-  <AlertDescription>
-    <p>Não foi possível processar seu pagamento.</p>
-    <ul className="mt-2 list-disc list-inside text-sm">
-      <li>Verifique os dados do cartão</li>
-      <li>Confirme se há saldo suficiente</li>
-    </ul>
-  </AlertDescription>
-</Alert>`},{title:"Sucesso (success)",description:"Alerta de sucesso para confirmações. Ícone: CheckCircle.",preview:e.jsxs(a,{variant:"success",className:"max-w-md",children:[e.jsx(i,{children:"Sucesso"}),e.jsx(r,{children:"Suas alterações foram salvas com sucesso."})]}),code:`<Alert variant="success">
-  <AlertTitle>Sucesso</AlertTitle>
-  <AlertDescription>
-    Suas alterações foram salvas com sucesso.
-  </AlertDescription>
-</Alert>`},{title:"Sem ícone",description:"Use showIcon={false} para ocultar o ícone automático.",preview:e.jsxs(a,{variant:"info",showIcon:!1,className:"max-w-md",children:[e.jsx(i,{children:"Alerta sem ícone"}),e.jsx(r,{children:"Este alerta não exibe o ícone padrão da variante."})]}),code:`<Alert variant="info" showIcon={false}>
-  <AlertTitle>Alerta sem ícone</AlertTitle>
-  <AlertDescription>
-    Este alerta não exibe o ícone padrão da variante.
-  </AlertDescription>
-</Alert>`}],props:[{name:"variant",type:'"info" | "warning" | "danger" | "success"',default:'"info"',description:"O estilo visual e ícone do alerta."},{name:"showIcon",type:"boolean",default:"true",description:"Se deve exibir o ícone padrão da variante."},{name:"className",type:"string",default:"-",description:"Classes CSS adicionais."}],accessibility:['Usa role="alert" para anunciar automaticamente aos leitores de tela',"A cor não é o único meio de transmitir informações - ícones fornecem contexto adicional","Estrutura HTML semântica com título e descrição claramente definidos","Contraste de cores adequado para acessibilidade visual"]})}export{c as AlertDoc};

package/dist/assets/AppHeaderDoc-CsFMZGV0.js

@@ -1,67 +0,0 @@
-import{j as e,bW as o,I as i,f as s,bT as a,x as u,P as n,aN as d,a7 as l,c9 as c,r as x,B as p}from"./index-BtX5DZqb.js";import{C as h}from"./ComponentDocTemplate-BtOCnlM2.js";import"./ExampleCard-DfuMYM6E.js";import"./TableOfContents-DBMJMbI4.js";function f(){const[t,r]=x.useState("");return e.jsx("div",{className:"w-full bg-background border rounded-lg",children:e.jsx("header",{className:"px-4 py-2",children:e.jsxs("div",{className:"flex items-center gap-4",children:[e.jsxs("div",{className:"flex-shrink-0",children:[e.jsxs("div",{className:"flex items-center gap-2 mb-1",children:[e.jsx("h1",{className:"text-lg font-semibold",children:"Usuários"}),e.jsx(p,{className:"bg-primary text-primary-foreground text-xs px-2 py-0.5",children:"Módulo"})]}),e.jsx("p",{className:"text-sm text-muted-foreground",children:"Gerenciamento de usuários"})]}),e.jsxs("div",{className:"flex items-center gap-2 flex-1 max-w-md",children:[e.jsxs("div",{className:"relative flex-1",children:[e.jsx(o,{className:"absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4"}),e.jsx(i,{placeholder:"Buscar...",value:t,onChange:m=>r(m.target.value),className:"w-full pl-10 pr-8"}),t&&e.jsx(s,{variant:"ghost",size:"sm",className:"absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0",onClick:()=>r(""),children:e.jsx(c,{className:"h-3.5 w-3.5"})})]}),e.jsx(s,{variant:"outline",size:"icon",className:"h-10 w-10",children:e.jsx(a,{className:"h-4 w-4"})})]}),e.jsxs("div",{className:"flex-shrink-0 ml-auto flex items-center gap-3",children:[e.jsxs(s,{size:"sm",children:[e.jsx(n,{className:"h-4 w-4 mr-1"}),"Novo"]}),e.jsx(s,{variant:"ghost",className:"h-auto p-2",children:e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsxs("div",{className:"text-left",children:[e.jsx("p",{className:"text-sm font-medium",children:"João Silva"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Empresa XYZ"})]}),e.jsx("div",{className:"w-8 h-8 bg-primary rounded-full flex items-center justify-center",children:e.jsx(d,{className:"h-4 w-4 text-primary-foreground"})}),e.jsx(l,{className:"h-4 w-4"})]})})]})]})})})}function g(){return e.jsxs("div",{className:"w-full",children:[e.jsxs("div",{className:"flex items-center justify-between h-14 px-4 border rounded-lg bg-background",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("div",{className:"bg-primary/10 text-primary px-2 py-1 rounded text-xs font-medium",children:"TÍTULO"}),e.jsx("span",{className:"text-xs text-muted-foreground",children:"←"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-xs text-muted-foreground",children:"→"}),e.jsx("div",{className:"bg-secondary/50 text-secondary-foreground px-2 py-1 rounded text-xs font-medium",children:"BUSCA"}),e.jsx("span",{className:"text-xs text-muted-foreground",children:"←"})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-xs text-muted-foreground",children:"→"}),e.jsx("div",{className:"bg-accent/50 text-accent-foreground px-2 py-1 rounded text-xs font-medium",children:"AÇÕES"}),e.jsx("div",{className:"bg-muted text-muted-foreground px-2 py-1 rounded text-xs font-medium",children:"PERFIL"})]})]}),e.jsx("p",{className:"text-xs text-muted-foreground text-center mt-2",children:"Diagrama das áreas internas do AppHeader (altura fixa: 56px)"})]})}function v(){return e.jsxs("div",{className:"flex gap-8 items-start",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-sm font-medium",children:'variant="dropdown"'}),e.jsx("div",{className:"border rounded-lg p-2 bg-background",children:e.jsx(s,{variant:"ghost",className:"h-auto p-2",children:e.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsxs("div",{className:"text-left",children:[e.jsx("p",{className:"text-sm font-medium",children:"João Silva"}),e.jsx("p",{className:"text-xs text-muted-foreground",children:"Empresa XYZ"})]}),e.jsx("div",{className:"w-8 h-8 bg-primary rounded-full flex items-center justify-center",children:e.jsx(d,{className:"h-4 w-4 text-primary-foreground"})}),e.jsx(l,{className:"h-4 w-4"})]})})})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("p",{className:"text-sm font-medium",children:"Menu aberto"}),e.jsxs("div",{className:"border rounded-lg p-2 w-48 bg-background shadow-lg",children:[e.jsxs("div",{className:"py-1.5 px-2 hover:bg-muted rounded flex items-center gap-2 cursor-pointer",children:[e.jsx(a,{className:"h-4 w-4"}),e.jsx("span",{className:"text-sm",children:"Alterar Unidade"})]}),e.jsx("div",{className:"h-px bg-border my-1"}),e.jsxs("div",{className:"py-1.5 px-2 hover:bg-muted rounded flex items-center gap-2 cursor-pointer text-destructive",children:[e.jsx(c,{className:"h-4 w-4"}),e.jsx("span",{className:"text-sm",children:"Sair"})]})]})]})]})}function y(){return e.jsx(h,{title:"AppHeader",description:"Header principal da aplicação com título dinâmico, busca global integrada ao CRUD, ações customizáveis e informações do usuário. Altura fixa de 56px (h-14).",component:e.jsx(f,{}),usage:`import { AppLayout } from 'forlogic-core';
-import { usePageMetadataContext } from 'forlogic-core';
-
-// O AppHeader é renderizado automaticamente pelo AppLayout
-<AppLayout sidebarConfig={sidebarConfig}>
-  <Routes>...</Routes>
-</AppLayout>
-
-// Para configurar título e ações, use o PageMetadataContext
-function UsersPage() {
-  const { setHeaderActions, setMetadata } = usePageMetadataContext();
-  
-  useEffect(() => {
-    setMetadata({ title: 'Usuários', subtitle: 'Gerenciamento' });
-    setHeaderActions(
-      <Button size="sm" onClick={() => setIsAddDialogOpen(true)}>
-        <Plus className="h-4 w-4 mr-1" />
-        Novo Usuário
-      </Button>
-    );
-    
-    return () => {
-      setMetadata({});
-      setHeaderActions(null);
-    };
-  }, []);
-}`,examples:[{title:"Estrutura do Componente",description:"O AppHeader possui 4 áreas internas: Título (esquerda), Busca (centro), Ações (direita) e Perfil (extrema direita).",preview:e.jsx(g,{}),code:`// Áreas do AppHeader
-// 1. Título: Título da página + Subtítulo + Badge do módulo
-// 2. Busca: Input de busca global (visível quando habilitado)
-// 3. Ações: Botões customizáveis via PageMetadataContext
-// 4. Perfil: UserInfo com dropdown de usuário
-
-// Altura fixa: 56px (h-14 no Tailwind)`},{title:"UserInfo Integrado",description:"Dropdown com informações do usuário, troca de unidade e logout.",preview:e.jsx(v,{}),code:`// UserInfo com variantes
-<UserInfo variant="dropdown" />  // No header
-<UserInfo variant="card" />      // Em páginas
-
-// Menu do usuário inclui:
-// - Alterar Unidade (submenu com todas unidades disponíveis)
-// - Sair (Logout)`},{title:"Busca Global",description:"Campo de busca com debounce sincronizado com URL (?search=termo).",preview:e.jsxs("div",{className:"flex items-center gap-2 max-w-md",children:[e.jsxs("div",{className:"relative flex-1",children:[e.jsx(o,{className:"absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4"}),e.jsx(i,{placeholder:"Buscar...",className:"w-full pl-10 pr-8"})]}),e.jsx(s,{variant:"outline",size:"icon",className:"h-10 w-10",children:e.jsx(a,{className:"h-4 w-4"})})]}),code:`// Configurar campos pesquisáveis no service
-const userService = createSimpleService({
-  tableName: 'users',
-  schema: 'common',
-  searchFields: ['name', 'email', 'department'],
-});
-
-// A busca é exibida quando isSearchVisible = true no AuthContext`},{title:"Ações Customizáveis",description:"Botões de ação configurados via PageMetadataContext.",preview:e.jsxs("div",{className:"flex gap-2",children:[e.jsxs(s,{variant:"outline",size:"sm",children:[e.jsx(u,{className:"h-4 w-4 mr-1"}),"Exportar"]}),e.jsxs(s,{size:"sm",children:[e.jsx(n,{className:"h-4 w-4 mr-1"}),"Novo"]})]}),code:`// ✅ CORRETO: Apenas botões de ação
-setHeaderActions(
-  <>
-    <Button variant="outline" size="sm">
-      <Download className="h-4 w-4 mr-1" />
-      Exportar
-    </Button>
-    <Button size="sm">
-      <Plus className="h-4 w-4 mr-1" />
-      Novo
-    </Button>
-  </>
-);
-
-// ❌ INCORRETO: Formulário no header
-setHeaderActions(
-  <form onSubmit={...}>
-    <Input />
-    <Select />
-    <Button type="submit">Salvar</Button>
-  </form>
-);`}],props:[{name:"actions",type:"ReactNode",description:"Botões de ação à direita do header (via PageMetadataContext)"},{name:"variant (UserInfo)",type:'"card" | "dropdown"',default:'"card"',description:"Estilo de exibição do UserInfo"},{name:"selectedUnit (UserInfo)",type:"Company | null",description:"Unidade selecionada"},{name:"onUnitChange (UserInfo)",type:"(unit: Company) => void",description:"Callback ao trocar unidade"}],accessibility:["Busca acessível via teclado (Tab para navegar, Escape para limpar)","UserInfo dropdown acessível via teclado","Botões de ação com foco visível (focus-visible)",'Título da página anunciado por leitores de tela (role="heading")',"Atalho de teclado para busca (/ ou Ctrl+K pode ser implementado)"],notes:["✅ Use PageMetadataContext para ações dinâmicas","✅ Mantenha título curto e descritivo (máx. 3 palavras)","✅ Use um único header por página","✅ Limpe ações no useEffect cleanup","✅ Use ícones do Lucide nos botões de ação","❌ Não adicione múltiplos headers na mesma página","❌ Não modifique a altura do header (fixo em 56px)","❌ Não coloque formulários complexos no header","❌ Não use mais de 3 botões de ação","❌ Não esconda o UserInfo em páginas autenticadas"]})}export{y as AppHeaderDoc};