forlogic-core 1.12.0 → 1.12.2

package/README.md

@@ -49,6 +49,110 @@ Isso garante que todos os componentes compartilhem a mesma instância do i18next
 
 ---
 
+## 📦 LIB-FIRST: Sempre Use Componentes da forlogic-core
+
+> **⚠️ REGRA FUNDAMENTAL**: Antes de criar qualquer componente, serviço ou utilitário no projeto, VERIFIQUE se já existe na `forlogic-core`.
+
+### 🤔 Por Quê?
+
+A `forlogic-core` é a **biblioteca central** de componentes, serviços e utilitários compartilhados entre todos os projetos. Quando você cria um componente local que já existe na lib:
+
+1. **❌ Drift de Design** - O componente local não acompanha evoluções futuras da lib
+2. **❌ Duplicação de Código** - Aumenta tamanho do bundle e manutenção
+3. **❌ Inconsistência** - UI/UX diferente entre projetos
+4. **❌ Retrabalho** - Correções de bugs precisam ser feitas em múltiplos lugares
+
+### 📋 Checklist OBRIGATÓRIO Antes de Criar Componentes
+
+```markdown
+- [ ] Pesquisei se o componente existe na forlogic-core?
+- [ ] Verifiquei a documentação do Design System (/design_system)?
+- [ ] Confirmei que a funcionalidade não pode ser alcançada com props/variantes existentes?
+- [ ] Se não existe, solicitei a inclusão na lib para beneficiar todos os projetos?
+```
+
+### ✅ CORRETO: Usar da Lib
+
+```typescript
+// ✅ Sempre importe da forlogic-core
+import { 
+  Button, 
+  Input, 
+  Dialog, 
+  Combobox,
+  SplitButton,
+  RichTextEditor,
+  createCrudPage,
+  cn,
+  formatDatetime 
+} from 'forlogic-core';
+```
+
+### ❌ PROIBIDO: Criar Localmente (se existe na lib)
+
+```typescript
+// ❌ NUNCA crie pastas/arquivos que já existem na lib
+src/components/ui/button.tsx      // Existe na lib
+src/components/ui/dialog.tsx      // Existe na lib
+src/lib/utils.ts                  // cn() existe na lib
+src/components/SplitButton.tsx    // Existe na lib (a partir de v1.12.2)
+```
+
+### 🔄 Processo Quando Precisa de Customização
+
+| Cenário | Ação Correta |
+|---------|--------------|
+| Componente não existe na lib | ✅ Criar localmente E solicitar inclusão na lib |
+| Precisa de variante nova | ✅ Solicitar variante na lib (PR ou pedido) |
+| Precisa de comportamento específico | ✅ Usar composição/wrapper ao invés de recriar |
+| Bug no componente da lib | ✅ Reportar e corrigir na lib, não criar cópia local |
+
+### 📖 Onde Verificar Componentes Disponíveis
+
+| Recurso | Descrição |
+|---------|-----------|
+| `/design_system` | Design System com todos os componentes documentados |
+| `forlogic-core/lib/exports/ui.ts` | Lista de exports de UI |
+| `forlogic-core/lib/index.ts` | Index principal com todos os exports |
+| `npx forlogic-core-pull-docs` | Baixa documentação atualizada |
+| `npx forlogic-core-validate` | **Valida regra Lib-First** |
+
+### 🔍 Validação Automática
+
+Execute o script de validação para verificar se há componentes duplicados:
+
+```bash
+npx forlogic-core-validate
+```
+
+O script verifica:
+- ✅ Componentes UI em `src/components/ui/` que já existem na lib
+- ✅ Utilitários em `src/lib/` como `utils.ts` ou `cn.ts`
+- ✅ Hooks duplicados em `src/hooks/`
+- ✅ Configuração do shadcn que pode criar duplicados
+
+**Adicione ao CI/CD** para garantir conformidade:
+
+```json
+{
+  "scripts": {
+    "validate:lib-first": "forlogic-core-validate",
+    "prebuild": "forlogic-core-validate"
+  }
+}
+```
+
+### ⚠️ Exceções (quando PODE criar localmente)
+
+1. **Componente específico de negócio** - Ex: `InvoiceCard`, `UserProfileWidget`
+2. **Composição de componentes da lib** - Ex: wrapper que combina Dialog + Form
+3. **Componente temporário** - Protótipo que será migrado para a lib depois
+4. **Funcionalidade não generalizável** - Algo tão específico que não faz sentido na lib
+
+> **📝 Mesmo nas exceções, avalie se o componente poderia ser generalizado e incluído na lib para beneficiar outros projetos.**
+
+---
+
 ## 🤖 REGRAS CRÍTICAS
 
 > **📋 Schema Padrão**: Veja no **Custom Knowledge** do projeto (Settings → Manage Knowledge) qual é o schema padrão deste projeto específico.
@@ -1016,25 +1120,27 @@ O comando usa credenciais públicas do Supabase do forlogic-core e não requer c
 
 ### 📚 Estatísticas da Documentação
 
-**47 Componentes UI** | **6 Tokens** | **6 Ferramentas CRUD**
+**50 Componentes UI** | **6 Tokens** | **4 Ferramentas CRUD**
 
 ---
 
 ### 🎨 Fundamentos (Tokens)
 
 - [Colors Foundation](./docs/DESIGN_SYSTEM.md#colorsfoundation) - Sistema de cores completo com escalas neutras, de marca e funcionais.
+- [Í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.
 - [Radius](./docs/DESIGN_SYSTEM.md#radius) - Sistema de arredondamento de bordas para consistência visual.
 - [Shadows](./docs/DESIGN_SYSTEM.md#shadows) - Sistema de sombras e elevação para criar profundidade e hierarquia.
 - [Spacing](./docs/DESIGN_SYSTEM.md#spacing) - Escala de espaçamento consistente baseada em uma unidade base de 4px.
-- [Typography](./docs/DESIGN_SYSTEM.md#typographycomponent) - Componentes de tipografia para estilos de texto consistentes em toda a sua aplicação.
 - [Typography Foundation](./docs/DESIGN_SYSTEM.md#typographyfoundation) - Sistema tipográfico completo com Display, Headings, Body e mais.
 
 ### 🧩 Componentes UI
 
-- [Accordion](./docs/DESIGN_SYSTEM.md#accordion) - Um conjunto de cabeçalhos interativos empilhados verticalmente, onde cada um revela uma seção de conteúdo.
+- [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.
-- [Alert](./docs/DESIGN_SYSTEM.md#alert) - Exibe uma mensagem de destaque para chamar a atenção do usuário.
-- [Aspect Ratio](./docs/DESIGN_SYSTEM.md#aspectratio) - Exibe conteúdo dentro de uma proporção desejada.
+- [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 menu colapsável, permissões, redimensionamento e navegação hierárquica.
 - [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.
 - [Breadcrumb](./docs/DESIGN_SYSTEM.md#breadcrumb) - Exibe o caminho até o recurso atual usando uma hierarquia de links.
@@ -1042,47 +1148,47 @@ O comando usa credenciais públicas do Supabase do forlogic-core e não requer c
 - [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é.
-- [Carousel](./docs/DESIGN_SYSTEM.md#carousel) - Um componente de carrossel para alternar entre elementos. Nota: Este componente requer a biblioteca Embla Carousel que não está incluída no forlogic-core por padrão.
+- [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.
-- [Collapsible](./docs/DESIGN_SYSTEM.md#collapsible) - Um componente interativo que expande/colapsa um painel.
 - [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.
+- [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.
 - [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](./docs/DESIGN_SYSTEM.md#grid) - Sistema de grid responsivo com configuração simplificada de colunas e espaçamento.
+- [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) - Exibe um campo de entrada de texto.
-- [Input Group](./docs/DESIGN_SYSTEM.md#inputgroup) - Agrupe inputs com addons de prefixo, sufixo, ícones, botões, tooltips e dropdowns. Segue a API oficial do shadcn/ui.
-- [Label](./docs/DESIGN_SYSTEM.md#label) - Renderiza uma label acessível associada a controles.
-- [Loading State](./docs/DESIGN_SYSTEM.md#loadingstate) - Componente para gerenciar estados de loading de forma declarativa com dois tipos: spinner e overlay.
+- [Input](./docs/DESIGN_SYSTEM.md#input) - Campo de entrada de texto. Inclui 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.
+- [Navigation Menu](./docs/DESIGN_SYSTEM.md#navigationmenu) - Uma coleção de links para navegação em websites.
 - [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.
-- [Resizable](./docs/DESIGN_SYSTEM.md#resizable) - Grupos de painéis redimensionáveis e layouts acessíveis com suporte a teclado. Construído sobre react-resizable-panels.
-- [Scroll Area](./docs/DESIGN_SYSTEM.md#scrollarea) - Aprimora a funcionalidade de rolagem nativa para estilização personalizada e cross-browser.
-- [Searchbar](./docs/DESIGN_SYSTEM.md#searchbar) - Campo de busca com ícone de pesquisa integrado e botão de limpar opcional. Otimizado para experiências de busca em toda a aplicação.
+- [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.
 - [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.
-- [Sheet](./docs/DESIGN_SYSTEM.md#sheet) - Estende o componente Dialog para exibir conteúdo que complementa o conteúdo principal da tela.
-- [Skeleton](./docs/DESIGN_SYSTEM.md#skeleton) - Componente de placeholder para estados de carregamento. Inclui variantes pré-configuradas para tabelas, cards, formulários e mais.
 - [Slider](./docs/DESIGN_SYSTEM.md#slider) - Um input onde o usuário seleciona um valor dentro de um intervalo determinado.
-- [Spinner](./docs/DESIGN_SYSTEM.md#spinner) - Um componente de spinner de carregamento para indicar estado de carregamento.
-- [Stack](./docs/DESIGN_SYSTEM.md#stack) - Layout de pilha flexível com controle de direção, espaçamento, alinhamento e justificação.
+- [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.
 - [Switch](./docs/DESIGN_SYSTEM.md#switch) - Um controle que permite ao usuário alternar entre marcado e desmarcado.
-- [Tab Page Layout](./docs/DESIGN_SYSTEM.md#tabpagelayout) - Layout padronizado para páginas dentro de tabs com header, descrição, ações e conteúdo scrollável.
-- [Table](./docs/DESIGN_SYSTEM.md#table) - Uma tabela semântica para exibir dados tabulares.
-- [Tabs](./docs/DESIGN_SYSTEM.md#tabs) - Um conjunto de seções de conteúdo em camadas—conhecidas como painéis de abas—que são exibidas uma de cada vez.
+- [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.
 
 ### 🚀 Sistema CRUD
 
-- [CRUD Avançado](./docs/DESIGN_SYSTEM.md#crudadvanced) - Padrão de tabela CRUD com recursos avançados como avatar de produto, indicadores visuais de estoque, sistema de avaliação com estrelas, métricas de vendas e formatação de moeda. Inclui dialogs para todas as operações CRUD, exportação/importação e ações em massa.
-- [CRUD Básico](./docs/DESIGN_SYSTEM.md#crudbasic) - Padrão de tabela CRUD simples com busca, filtros, ações por linha e paginação. Inclui dialogs interativos para visualização, criação, edição, duplicação, alteração de status e exclusão de itens.
 - [CRUD com Alternância de Visualização](./docs/DESIGN_SYSTEM.md#crudviewtoggle) - Padrão de CRUD que permite alternar entre visualização em lista (cards horizontais) e grade (cards em grid). Inclui todas as operações CRUD com dialogs, exportação/importação e ações em massa.
 - [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 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.

package/dist/README.md

@@ -49,6 +49,110 @@ Isso garante que todos os componentes compartilhem a mesma instância do i18next
 
 ---
 
+## 📦 LIB-FIRST: Sempre Use Componentes da forlogic-core
+
+> **⚠️ REGRA FUNDAMENTAL**: Antes de criar qualquer componente, serviço ou utilitário no projeto, VERIFIQUE se já existe na `forlogic-core`.
+
+### 🤔 Por Quê?
+
+A `forlogic-core` é a **biblioteca central** de componentes, serviços e utilitários compartilhados entre todos os projetos. Quando você cria um componente local que já existe na lib:
+
+1. **❌ Drift de Design** - O componente local não acompanha evoluções futuras da lib
+2. **❌ Duplicação de Código** - Aumenta tamanho do bundle e manutenção
+3. **❌ Inconsistência** - UI/UX diferente entre projetos
+4. **❌ Retrabalho** - Correções de bugs precisam ser feitas em múltiplos lugares
+
+### 📋 Checklist OBRIGATÓRIO Antes de Criar Componentes
+
+```markdown
+- [ ] Pesquisei se o componente existe na forlogic-core?
+- [ ] Verifiquei a documentação do Design System (/design_system)?
+- [ ] Confirmei que a funcionalidade não pode ser alcançada com props/variantes existentes?
+- [ ] Se não existe, solicitei a inclusão na lib para beneficiar todos os projetos?
+```
+
+### ✅ CORRETO: Usar da Lib
+
+```typescript
+// ✅ Sempre importe da forlogic-core
+import { 
+  Button, 
+  Input, 
+  Dialog, 
+  Combobox,
+  SplitButton,
+  RichTextEditor,
+  createCrudPage,
+  cn,
+  formatDatetime 
+} from 'forlogic-core';
+```
+
+### ❌ PROIBIDO: Criar Localmente (se existe na lib)
+
+```typescript
+// ❌ NUNCA crie pastas/arquivos que já existem na lib
+src/components/ui/button.tsx      // Existe na lib
+src/components/ui/dialog.tsx      // Existe na lib
+src/lib/utils.ts                  // cn() existe na lib
+src/components/SplitButton.tsx    // Existe na lib (a partir de v1.12.2)
+```
+
+### 🔄 Processo Quando Precisa de Customização
+
+| Cenário | Ação Correta |
+|---------|--------------|
+| Componente não existe na lib | ✅ Criar localmente E solicitar inclusão na lib |
+| Precisa de variante nova | ✅ Solicitar variante na lib (PR ou pedido) |
+| Precisa de comportamento específico | ✅ Usar composição/wrapper ao invés de recriar |
+| Bug no componente da lib | ✅ Reportar e corrigir na lib, não criar cópia local |
+
+### 📖 Onde Verificar Componentes Disponíveis
+
+| Recurso | Descrição |
+|---------|-----------|
+| `/design_system` | Design System com todos os componentes documentados |
+| `forlogic-core/lib/exports/ui.ts` | Lista de exports de UI |
+| `forlogic-core/lib/index.ts` | Index principal com todos os exports |
+| `npx forlogic-core-pull-docs` | Baixa documentação atualizada |
+| `npx forlogic-core-validate` | **Valida regra Lib-First** |
+
+### 🔍 Validação Automática
+
+Execute o script de validação para verificar se há componentes duplicados:
+
+```bash
+npx forlogic-core-validate
+```
+
+O script verifica:
+- ✅ Componentes UI em `src/components/ui/` que já existem na lib
+- ✅ Utilitários em `src/lib/` como `utils.ts` ou `cn.ts`
+- ✅ Hooks duplicados em `src/hooks/`
+- ✅ Configuração do shadcn que pode criar duplicados
+
+**Adicione ao CI/CD** para garantir conformidade:
+
+```json
+{
+  "scripts": {
+    "validate:lib-first": "forlogic-core-validate",
+    "prebuild": "forlogic-core-validate"
+  }
+}
+```
+
+### ⚠️ Exceções (quando PODE criar localmente)
+
+1. **Componente específico de negócio** - Ex: `InvoiceCard`, `UserProfileWidget`
+2. **Composição de componentes da lib** - Ex: wrapper que combina Dialog + Form
+3. **Componente temporário** - Protótipo que será migrado para a lib depois
+4. **Funcionalidade não generalizável** - Algo tão específico que não faz sentido na lib
+
+> **📝 Mesmo nas exceções, avalie se o componente poderia ser generalizado e incluído na lib para beneficiar outros projetos.**
+
+---
+
 ## 🤖 REGRAS CRÍTICAS
 
 > **📋 Schema Padrão**: Veja no **Custom Knowledge** do projeto (Settings → Manage Knowledge) qual é o schema padrão deste projeto específico.
@@ -1016,25 +1120,27 @@ O comando usa credenciais públicas do Supabase do forlogic-core e não requer c
 
 ### 📚 Estatísticas da Documentação
 
-**49 Componentes UI** | **6 Tokens** | **2 Ferramentas CRUD**
+**50 Componentes UI** | **6 Tokens** | **5 Ferramentas CRUD**
 
 ---
 
 ### 🎨 Fundamentos (Tokens)
 
 - [Colors Foundation](./docs/DESIGN_SYSTEM.md#colorsfoundation) - Sistema de cores completo com escalas neutras, de marca e funcionais.
+- [Í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.
 - [Radius](./docs/DESIGN_SYSTEM.md#radius) - Sistema de arredondamento de bordas para consistência visual.
 - [Shadows](./docs/DESIGN_SYSTEM.md#shadows) - Sistema de sombras e elevação para criar profundidade e hierarquia.
 - [Spacing](./docs/DESIGN_SYSTEM.md#spacing) - Escala de espaçamento consistente baseada em uma unidade base de 4px.
-- [Typography](./docs/DESIGN_SYSTEM.md#typographycomponent) - Componentes de tipografia para estilos de texto consistentes em toda a sua aplicação.
 - [Typography Foundation](./docs/DESIGN_SYSTEM.md#typographyfoundation) - Sistema tipográfico completo com Display, Headings, Body e mais.
 
 ### 🧩 Componentes UI
 
-- [Accordion](./docs/DESIGN_SYSTEM.md#accordion) - Um conjunto de cabeçalhos interativos empilhados verticalmente, onde cada um revela uma seção de conteúdo.
+- [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.
 - [Alert](./docs/DESIGN_SYSTEM.md#alert) - Exibe uma mensagem de destaque para chamar a atenção do usuário.
-- [Aspect Ratio](./docs/DESIGN_SYSTEM.md#aspectratio) - Exibe conteúdo dentro de uma proporção desejada.
+- [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 menu colapsável, permissões, redimensionamento e navegação hierárquica.
 - [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.
 - [Breadcrumb](./docs/DESIGN_SYSTEM.md#breadcrumb) - Exibe o caminho até o recurso atual usando uma hierarquia de links.
@@ -1042,47 +1148,50 @@ O comando usa credenciais públicas do Supabase do forlogic-core e não requer c
 - [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é.
-- [Carousel](./docs/DESIGN_SYSTEM.md#carousel) - Um componente de carrossel para alternar entre elementos. Nota: Este componente requer a biblioteca Embla Carousel que não está incluída no forlogic-core por padrão.
+- [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.
-- [Collapsible](./docs/DESIGN_SYSTEM.md#collapsible) - Um componente interativo que expande/colapsa um painel.
 - [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.
+- [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.
 - [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](./docs/DESIGN_SYSTEM.md#grid) - Sistema de grid responsivo com configuração simplificada de colunas e espaçamento.
+- [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) - Exibe um campo de entrada de texto.
-- [Input Group](./docs/DESIGN_SYSTEM.md#inputgroup) - Agrupe inputs com addons de prefixo, sufixo, ícones, botões, tooltips e dropdowns. Segue a API oficial do shadcn/ui.
-- [Input OTP](./docs/DESIGN_SYSTEM.md#inputotp) - Accessible one-time password component with customizable number of inputs. Available in the UI library but not exported from forlogic-core.
-- [Label](./docs/DESIGN_SYSTEM.md#label) - Renderiza uma label acessível associada a controles.
-- [Loading State](./docs/DESIGN_SYSTEM.md#loadingstate) - Componente para gerenciar estados de loading de forma declarativa com dois tipos: spinner e overlay.
-- [Native Select](./docs/DESIGN_SYSTEM.md#nativeselect) - Elemento select nativo do HTML com estilização.
+- [Input](./docs/DESIGN_SYSTEM.md#input) - Campo de entrada de texto. Inclui 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.
+- [Navigation Menu](./docs/DESIGN_SYSTEM.md#navigationmenu) - Uma coleção de links para navegação em websites.
 - [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.
-- [Resizable](./docs/DESIGN_SYSTEM.md#resizable) - Grupos de painéis redimensionáveis e layouts acessíveis com suporte a teclado. Construído sobre react-resizable-panels.
-- [Scroll Area](./docs/DESIGN_SYSTEM.md#scrollarea) - Aprimora a funcionalidade de rolagem nativa para estilização personalizada e cross-browser.
-- [Searchbar](./docs/DESIGN_SYSTEM.md#searchbar) - Campo de busca com ícone de pesquisa integrado e botão de limpar opcional. Otimizado para experiências de busca em toda a aplicação.
+- [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.
 - [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.
-- [Sheet](./docs/DESIGN_SYSTEM.md#sheet) - Estende o componente Dialog para exibir conteúdo que complementa o conteúdo principal da tela.
-- [Skeleton](./docs/DESIGN_SYSTEM.md#skeleton) - Componente de placeholder para estados de carregamento. Inclui variantes pré-configuradas para tabelas, cards, formulários e mais.
 - [Slider](./docs/DESIGN_SYSTEM.md#slider) - Um input onde o usuário seleciona um valor dentro de um intervalo determinado.
-- [Spinner](./docs/DESIGN_SYSTEM.md#spinner) - Um componente de spinner de carregamento para indicar estado de carregamento.
-- [Stack](./docs/DESIGN_SYSTEM.md#stack) - Layout de pilha flexível com controle de direção, espaçamento, alinhamento e justificação.
+- [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.
 - [Switch](./docs/DESIGN_SYSTEM.md#switch) - Um controle que permite ao usuário alternar entre marcado e desmarcado.
-- [Tab Page Layout](./docs/DESIGN_SYSTEM.md#tabpagelayout) - Layout padronizado para páginas dentro de tabs com header, descrição, ações e conteúdo scrollável.
-- [Table](./docs/DESIGN_SYSTEM.md#table) - Uma tabela semântica para exibir dados tabulares.
-- [Tabs](./docs/DESIGN_SYSTEM.md#tabs) - Um conjunto de seções de conteúdo em camadas—conhecidas como painéis de abas—que são exibidas uma de cada vez.
+- [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. Exibe mensagens temporárias para feedback de ações do usuário.
+- [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.
 
 ### 🚀 Sistema CRUD
 
+- [CRUD Básico](./docs/DESIGN_SYSTEM.md#crudbasic) - Padrão de tabela CRUD simples com busca, filtros, ações por linha e paginação. Inclui dialogs interativos para visualização, criação, edição, duplicação, alteração de status e exclusão de itens.
+- [CRUD com Alternância de Visualização](./docs/DESIGN_SYSTEM.md#crudviewtoggle) - Padrão de CRUD que permite alternar entre visualização em lista (cards horizontais) e grade (cards em grid). Inclui todas as operações CRUD com dialogs, exportação/importação e ações em massa.
+- [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 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.
 - [Wizard Form](./docs/DESIGN_SYSTEM.md#wizardform) - Formulário multi-etapas com validação, navegação entre seções e indicadores de progresso.