forlogic-core 1.12.1 → 1.12.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +106 -3
  2. package/dist/README.md +187 -83
  3. package/dist/bin/validate-lib-first.js +238 -0
  4. package/dist/index.css +1 -1
  5. package/dist/index.css.map +1 -1
  6. package/dist/index.esm.js +1 -10
  7. package/dist/index.js +1 -10
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -49,6 +49,110 @@ Isso garante que todos os componentes compartilhem a mesma instância do i18next
49
49
 
50
50
  ---
51
51
 
52
+ ## 📦 LIB-FIRST: Sempre Use Componentes da forlogic-core
53
+
54
+ > **⚠️ REGRA FUNDAMENTAL**: Antes de criar qualquer componente, serviço ou utilitário no projeto, VERIFIQUE se já existe na `forlogic-core`.
55
+
56
+ ### 🤔 Por Quê?
57
+
58
+ 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:
59
+
60
+ 1. **❌ Drift de Design** - O componente local não acompanha evoluções futuras da lib
61
+ 2. **❌ Duplicação de Código** - Aumenta tamanho do bundle e manutenção
62
+ 3. **❌ Inconsistência** - UI/UX diferente entre projetos
63
+ 4. **❌ Retrabalho** - Correções de bugs precisam ser feitas em múltiplos lugares
64
+
65
+ ### 📋 Checklist OBRIGATÓRIO Antes de Criar Componentes
66
+
67
+ ```markdown
68
+ - [ ] Pesquisei se o componente existe na forlogic-core?
69
+ - [ ] Verifiquei a documentação do Design System (/design_system)?
70
+ - [ ] Confirmei que a funcionalidade não pode ser alcançada com props/variantes existentes?
71
+ - [ ] Se não existe, solicitei a inclusão na lib para beneficiar todos os projetos?
72
+ ```
73
+
74
+ ### ✅ CORRETO: Usar da Lib
75
+
76
+ ```typescript
77
+ // ✅ Sempre importe da forlogic-core
78
+ import {
79
+ Button,
80
+ Input,
81
+ Dialog,
82
+ Combobox,
83
+ SplitButton,
84
+ RichTextEditor,
85
+ createCrudPage,
86
+ cn,
87
+ formatDatetime
88
+ } from 'forlogic-core';
89
+ ```
90
+
91
+ ### ❌ PROIBIDO: Criar Localmente (se existe na lib)
92
+
93
+ ```typescript
94
+ // ❌ NUNCA crie pastas/arquivos que já existem na lib
95
+ src/components/ui/button.tsx // Existe na lib
96
+ src/components/ui/dialog.tsx // Existe na lib
97
+ src/lib/utils.ts // cn() existe na lib
98
+ src/components/SplitButton.tsx // Existe na lib (a partir de v1.12.2)
99
+ ```
100
+
101
+ ### 🔄 Processo Quando Precisa de Customização
102
+
103
+ | Cenário | Ação Correta |
104
+ |---------|--------------|
105
+ | Componente não existe na lib | ✅ Criar localmente E solicitar inclusão na lib |
106
+ | Precisa de variante nova | ✅ Solicitar variante na lib (PR ou pedido) |
107
+ | Precisa de comportamento específico | ✅ Usar composição/wrapper ao invés de recriar |
108
+ | Bug no componente da lib | ✅ Reportar e corrigir na lib, não criar cópia local |
109
+
110
+ ### 📖 Onde Verificar Componentes Disponíveis
111
+
112
+ | Recurso | Descrição |
113
+ |---------|-----------|
114
+ | `/design_system` | Design System com todos os componentes documentados |
115
+ | `forlogic-core/lib/exports/ui.ts` | Lista de exports de UI |
116
+ | `forlogic-core/lib/index.ts` | Index principal com todos os exports |
117
+ | `npx forlogic-core-pull-docs` | Baixa documentação atualizada |
118
+ | `npx forlogic-core-validate` | **Valida regra Lib-First** |
119
+
120
+ ### 🔍 Validação Automática
121
+
122
+ Execute o script de validação para verificar se há componentes duplicados:
123
+
124
+ ```bash
125
+ npx forlogic-core-validate
126
+ ```
127
+
128
+ O script verifica:
129
+ - ✅ Componentes UI em `src/components/ui/` que já existem na lib
130
+ - ✅ Utilitários em `src/lib/` como `utils.ts` ou `cn.ts`
131
+ - ✅ Hooks duplicados em `src/hooks/`
132
+ - ✅ Configuração do shadcn que pode criar duplicados
133
+
134
+ **Adicione ao CI/CD** para garantir conformidade:
135
+
136
+ ```json
137
+ {
138
+ "scripts": {
139
+ "validate:lib-first": "forlogic-core-validate",
140
+ "prebuild": "forlogic-core-validate"
141
+ }
142
+ }
143
+ ```
144
+
145
+ ### ⚠️ Exceções (quando PODE criar localmente)
146
+
147
+ 1. **Componente específico de negócio** - Ex: `InvoiceCard`, `UserProfileWidget`
148
+ 2. **Composição de componentes da lib** - Ex: wrapper que combina Dialog + Form
149
+ 3. **Componente temporário** - Protótipo que será migrado para a lib depois
150
+ 4. **Funcionalidade não generalizável** - Algo tão específico que não faz sentido na lib
151
+
152
+ > **📝 Mesmo nas exceções, avalie se o componente poderia ser generalizado e incluído na lib para beneficiar outros projetos.**
153
+
154
+ ---
155
+
52
156
  ## 🤖 REGRAS CRÍTICAS
53
157
 
54
158
  > **📋 Schema Padrão**: Veja no **Custom Knowledge** do projeto (Settings → Manage Knowledge) qual é o schema padrão deste projeto específico.
@@ -1016,7 +1120,7 @@ O comando usa credenciais públicas do Supabase do forlogic-core e não requer c
1016
1120
 
1017
1121
  ### 📚 Estatísticas da Documentação
1018
1122
 
1019
- **50 Componentes UI** | **6 Tokens** | **5 Ferramentas CRUD**
1123
+ **50 Componentes UI** | **6 Tokens** | **4 Ferramentas CRUD**
1020
1124
 
1021
1125
  ---
1022
1126
 
@@ -1034,7 +1138,7 @@ O comando usa credenciais públicas do Supabase do forlogic-core e não requer c
1034
1138
 
1035
1139
  - [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.
1036
1140
  - [Action Button](./docs/DESIGN_SYSTEM.md#actionbutton) - Botão compacto otimizado para ações em linhas de tabela e menus dropdown.
1037
- - [Alert](./docs/DESIGN_SYSTEM.md#alert) - Exibe uma mensagem de destaque para chamar a atenção do usuário.
1141
+ - [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.
1038
1142
  - [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).
1039
1143
  - [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.
1040
1144
  - [Avatar](./docs/DESIGN_SYSTEM.md#avatar) - Um elemento de imagem com fallback para representar o usuário.
@@ -1085,7 +1189,6 @@ O comando usa credenciais públicas do Supabase do forlogic-core e não requer c
1085
1189
 
1086
1190
  ### 🚀 Sistema CRUD
1087
1191
 
1088
- - [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.
1089
1192
  - [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.
1090
1193
  - [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.
1091
1194
  - [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 CHANGED
@@ -49,6 +49,110 @@ Isso garante que todos os componentes compartilhem a mesma instância do i18next
49
49
 
50
50
  ---
51
51
 
52
+ ## 📦 LIB-FIRST: Sempre Use Componentes da forlogic-core
53
+
54
+ > **⚠️ REGRA FUNDAMENTAL**: Antes de criar qualquer componente, serviço ou utilitário no projeto, VERIFIQUE se já existe na `forlogic-core`.
55
+
56
+ ### 🤔 Por Quê?
57
+
58
+ 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:
59
+
60
+ 1. **❌ Drift de Design** - O componente local não acompanha evoluções futuras da lib
61
+ 2. **❌ Duplicação de Código** - Aumenta tamanho do bundle e manutenção
62
+ 3. **❌ Inconsistência** - UI/UX diferente entre projetos
63
+ 4. **❌ Retrabalho** - Correções de bugs precisam ser feitas em múltiplos lugares
64
+
65
+ ### 📋 Checklist OBRIGATÓRIO Antes de Criar Componentes
66
+
67
+ ```markdown
68
+ - [ ] Pesquisei se o componente existe na forlogic-core?
69
+ - [ ] Verifiquei a documentação do Design System (/design_system)?
70
+ - [ ] Confirmei que a funcionalidade não pode ser alcançada com props/variantes existentes?
71
+ - [ ] Se não existe, solicitei a inclusão na lib para beneficiar todos os projetos?
72
+ ```
73
+
74
+ ### ✅ CORRETO: Usar da Lib
75
+
76
+ ```typescript
77
+ // ✅ Sempre importe da forlogic-core
78
+ import {
79
+ Button,
80
+ Input,
81
+ Dialog,
82
+ Combobox,
83
+ SplitButton,
84
+ RichTextEditor,
85
+ createCrudPage,
86
+ cn,
87
+ formatDatetime
88
+ } from 'forlogic-core';
89
+ ```
90
+
91
+ ### ❌ PROIBIDO: Criar Localmente (se existe na lib)
92
+
93
+ ```typescript
94
+ // ❌ NUNCA crie pastas/arquivos que já existem na lib
95
+ src/components/ui/button.tsx // Existe na lib
96
+ src/components/ui/dialog.tsx // Existe na lib
97
+ src/lib/utils.ts // cn() existe na lib
98
+ src/components/SplitButton.tsx // Existe na lib (a partir de v1.12.2)
99
+ ```
100
+
101
+ ### 🔄 Processo Quando Precisa de Customização
102
+
103
+ | Cenário | Ação Correta |
104
+ |---------|--------------|
105
+ | Componente não existe na lib | ✅ Criar localmente E solicitar inclusão na lib |
106
+ | Precisa de variante nova | ✅ Solicitar variante na lib (PR ou pedido) |
107
+ | Precisa de comportamento específico | ✅ Usar composição/wrapper ao invés de recriar |
108
+ | Bug no componente da lib | ✅ Reportar e corrigir na lib, não criar cópia local |
109
+
110
+ ### 📖 Onde Verificar Componentes Disponíveis
111
+
112
+ | Recurso | Descrição |
113
+ |---------|-----------|
114
+ | `/design_system` | Design System com todos os componentes documentados |
115
+ | `forlogic-core/lib/exports/ui.ts` | Lista de exports de UI |
116
+ | `forlogic-core/lib/index.ts` | Index principal com todos os exports |
117
+ | `npx forlogic-core-pull-docs` | Baixa documentação atualizada |
118
+ | `npx forlogic-core-validate` | **Valida regra Lib-First** |
119
+
120
+ ### 🔍 Validação Automática
121
+
122
+ Execute o script de validação para verificar se há componentes duplicados:
123
+
124
+ ```bash
125
+ npx forlogic-core-validate
126
+ ```
127
+
128
+ O script verifica:
129
+ - ✅ Componentes UI em `src/components/ui/` que já existem na lib
130
+ - ✅ Utilitários em `src/lib/` como `utils.ts` ou `cn.ts`
131
+ - ✅ Hooks duplicados em `src/hooks/`
132
+ - ✅ Configuração do shadcn que pode criar duplicados
133
+
134
+ **Adicione ao CI/CD** para garantir conformidade:
135
+
136
+ ```json
137
+ {
138
+ "scripts": {
139
+ "validate:lib-first": "forlogic-core-validate",
140
+ "prebuild": "forlogic-core-validate"
141
+ }
142
+ }
143
+ ```
144
+
145
+ ### ⚠️ Exceções (quando PODE criar localmente)
146
+
147
+ 1. **Componente específico de negócio** - Ex: `InvoiceCard`, `UserProfileWidget`
148
+ 2. **Composição de componentes da lib** - Ex: wrapper que combina Dialog + Form
149
+ 3. **Componente temporário** - Protótipo que será migrado para a lib depois
150
+ 4. **Funcionalidade não generalizável** - Algo tão específico que não faz sentido na lib
151
+
152
+ > **📝 Mesmo nas exceções, avalie se o componente poderia ser generalizado e incluído na lib para beneficiar outros projetos.**
153
+
154
+ ---
155
+
52
156
  ## 🤖 REGRAS CRÍTICAS
53
157
 
54
158
  > **📋 Schema Padrão**: Veja no **Custom Knowledge** do projeto (Settings → Manage Knowledge) qual é o schema padrão deste projeto específico.
@@ -1012,87 +1116,87 @@ O comando usa credenciais públicas do Supabase do forlogic-core e não requer c
1012
1116
 
1013
1117
  ---
1014
1118
 
1015
- <!-- AUTO_GENERATED_START -->
1016
-
1017
- ### 📚 Estatísticas da Documentação
1018
-
1019
- **50 Componentes UI** | **6 Tokens** | **5 Ferramentas CRUD**
1020
-
1021
- ---
1022
-
1023
- ### 🎨 Fundamentos (Tokens)
1024
-
1025
- - [Colors Foundation](./docs/DESIGN_SYSTEM.md#colorsfoundation) - Sistema de cores completo com escalas neutras, de marca e funcionais.
1026
- - [Ícones](./docs/DESIGN_SYSTEM.md#iconsfoundation) - Biblioteca completa de ícones usando Lucide React - uma biblioteca de ícones
1027
- open-source com mais de 1400 ícones em SVG.
1028
- - [Radius](./docs/DESIGN_SYSTEM.md#radius) - Sistema de arredondamento de bordas para consistência visual.
1029
- - [Shadows](./docs/DESIGN_SYSTEM.md#shadows) - Sistema de sombras e elevação para criar profundidade e hierarquia.
1030
- - [Spacing](./docs/DESIGN_SYSTEM.md#spacing) - Escala de espaçamento consistente baseada em uma unidade base de 4px.
1031
- - [Typography Foundation](./docs/DESIGN_SYSTEM.md#typographyfoundation) - Sistema tipográfico completo com Display, Headings, Body e mais.
1032
-
1033
- ### 🧩 Componentes UI
1034
-
1035
- - [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.
1036
- - [Action Button](./docs/DESIGN_SYSTEM.md#actionbutton) - Botão compacto otimizado para ações em linhas de tabela e menus dropdown.
1037
- - [Alert](./docs/DESIGN_SYSTEM.md#alert) - Exibe uma mensagem de destaque para chamar a atenção do usuário.
1038
- - [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).
1039
- - [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.
1040
- - [Avatar](./docs/DESIGN_SYSTEM.md#avatar) - Um elemento de imagem com fallback para representar o usuário.
1041
- - [Badge](./docs/DESIGN_SYSTEM.md#badge) - Exibe um badge ou um componente que se parece com um badge.
1042
- - [Breadcrumb](./docs/DESIGN_SYSTEM.md#breadcrumb) - Exibe o caminho até o recurso atual usando uma hierarquia de links.
1043
- - [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.
1044
- - [Button Group](./docs/DESIGN_SYSTEM.md#buttongroup) - Agrupa botões relacionados com espaçamento e bordas apropriados.
1045
- - [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.
1046
- - [Card](./docs/DESIGN_SYSTEM.md#card) - Exibe um card com cabeçalho, conteúdo e rodapé.
1047
- - [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.
1048
- - [Checkbox](./docs/DESIGN_SYSTEM.md#checkbox) - Um controle que permite ao usuário alternar entre marcado e desmarcado.
1049
- - [Color Picker](./docs/DESIGN_SYSTEM.md#colorpicker) - Seletor de cores com paleta predefinida e seletor customizado.
1050
- - [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.
1051
- - [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.
1052
- - [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.
1053
- - [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.
1054
- - [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.
1055
- - [Empty State](./docs/DESIGN_SYSTEM.md#emptystate) - Componente para exibir estados vazios com ícone, mensagem e ação opcional.
1056
- - [Form](./docs/DESIGN_SYSTEM.md#form) - Construindo formulários com React Hook Form e Zod.
1057
- - [Grid & Stack](./docs/DESIGN_SYSTEM.md#grid) - Sistema de layout com Grid responsivo e Stack flexível para organização de conteúdo.
1058
- - [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.
1059
- - [Icon Picker](./docs/DESIGN_SYSTEM.md#iconpicker) - Seletor de ícones da biblioteca Lucide React com busca integrada.
1060
- - [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.
1061
- - [Label](./docs/DESIGN_SYSTEM.md#label) - Renderiza uma label acessível associada a controles de formulário.
1062
- - [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.
1063
- - [Loading](./docs/DESIGN_SYSTEM.md#skeleton) - Componentes para estados de carregamento: Skeleton (placeholders), Spinner (indicador de loading), e LoadingState (gerenciamento declarativo).
1064
- - [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.
1065
- - [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.
1066
- - [Navigation Menu](./docs/DESIGN_SYSTEM.md#navigationmenu) - Uma coleção de links para navegação em websites.
1067
- - [Pagination](./docs/DESIGN_SYSTEM.md#pagination) - Barra de paginação completa com seletor de itens por página e controles de navegação.
1068
- - [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.
1069
- - [Popover](./docs/DESIGN_SYSTEM.md#popover) - Exibe conteúdo rico em um portal, acionado por um botão.
1070
- - [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.
1071
- - [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.
1072
- - [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.
1073
- - [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.
1074
- - [Select](./docs/DESIGN_SYSTEM.md#select) - Exibe uma lista de opções para o usuário escolher—acionada por um botão.
1075
- - [Separator](./docs/DESIGN_SYSTEM.md#separator) - Separa visual ou semanticamente o conteúdo.
1076
- - [Slider](./docs/DESIGN_SYSTEM.md#slider) - Um input onde o usuário seleciona um valor dentro de um intervalo determinado.
1077
- - [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.
1078
- - [Switch](./docs/DESIGN_SYSTEM.md#switch) - Um controle que permite ao usuário alternar entre marcado e desmarcado.
1079
- - [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.
1080
- - [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.
1081
- - [Textarea](./docs/DESIGN_SYSTEM.md#textarea) - Exibe um textarea de formulário ou um componente que se parece com um textarea.
1082
- - [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.
1083
- - [Toggle](./docs/DESIGN_SYSTEM.md#toggle) - Botões de dois estados que podem estar ligados ou desligados, individualmente ou em grupo.
1084
- - [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.
1085
-
1086
- ### 🚀 Sistema CRUD
1087
-
1088
- - [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.
1089
- - [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.
1090
- - [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.
1091
- - [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.
1092
- - [Wizard Form](./docs/DESIGN_SYSTEM.md#wizardform) - Formulário multi-etapas com validação, navegação entre seções e indicadores de progresso.
1093
-
1094
- ---
1095
-
1096
- > 📘 **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).
1097
-
1119
+ <!-- AUTO_GENERATED_START -->
1120
+
1121
+ ### 📚 Estatísticas da Documentação
1122
+
1123
+ **50 Componentes UI** | **6 Tokens** | **5 Ferramentas CRUD**
1124
+
1125
+ ---
1126
+
1127
+ ### 🎨 Fundamentos (Tokens)
1128
+
1129
+ - [Colors Foundation](./docs/DESIGN_SYSTEM.md#colorsfoundation) - Sistema de cores completo com escalas neutras, de marca e funcionais.
1130
+ - [Ícones](./docs/DESIGN_SYSTEM.md#iconsfoundation) - Biblioteca completa de ícones usando Lucide React - uma biblioteca de ícones
1131
+ open-source com mais de 1400 ícones em SVG.
1132
+ - [Radius](./docs/DESIGN_SYSTEM.md#radius) - Sistema de arredondamento de bordas para consistência visual.
1133
+ - [Shadows](./docs/DESIGN_SYSTEM.md#shadows) - Sistema de sombras e elevação para criar profundidade e hierarquia.
1134
+ - [Spacing](./docs/DESIGN_SYSTEM.md#spacing) - Escala de espaçamento consistente baseada em uma unidade base de 4px.
1135
+ - [Typography Foundation](./docs/DESIGN_SYSTEM.md#typographyfoundation) - Sistema tipográfico completo com Display, Headings, Body e mais.
1136
+
1137
+ ### 🧩 Componentes UI
1138
+
1139
+ - [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.
1140
+ - [Action Button](./docs/DESIGN_SYSTEM.md#actionbutton) - Botão compacto otimizado para ações em linhas de tabela e menus dropdown.
1141
+ - [Alert](./docs/DESIGN_SYSTEM.md#alert) - Exibe uma mensagem de destaque para chamar a atenção do usuário.
1142
+ - [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).
1143
+ - [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.
1144
+ - [Avatar](./docs/DESIGN_SYSTEM.md#avatar) - Um elemento de imagem com fallback para representar o usuário.
1145
+ - [Badge](./docs/DESIGN_SYSTEM.md#badge) - Exibe um badge ou um componente que se parece com um badge.
1146
+ - [Breadcrumb](./docs/DESIGN_SYSTEM.md#breadcrumb) - Exibe o caminho até o recurso atual usando uma hierarquia de links.
1147
+ - [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.
1148
+ - [Button Group](./docs/DESIGN_SYSTEM.md#buttongroup) - Agrupa botões relacionados com espaçamento e bordas apropriados.
1149
+ - [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.
1150
+ - [Card](./docs/DESIGN_SYSTEM.md#card) - Exibe um card com cabeçalho, conteúdo e rodapé.
1151
+ - [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.
1152
+ - [Checkbox](./docs/DESIGN_SYSTEM.md#checkbox) - Um controle que permite ao usuário alternar entre marcado e desmarcado.
1153
+ - [Color Picker](./docs/DESIGN_SYSTEM.md#colorpicker) - Seletor de cores com paleta predefinida e seletor customizado.
1154
+ - [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.
1155
+ - [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.
1156
+ - [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.
1157
+ - [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.
1158
+ - [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.
1159
+ - [Empty State](./docs/DESIGN_SYSTEM.md#emptystate) - Componente para exibir estados vazios com ícone, mensagem e ação opcional.
1160
+ - [Form](./docs/DESIGN_SYSTEM.md#form) - Construindo formulários com React Hook Form e Zod.
1161
+ - [Grid & Stack](./docs/DESIGN_SYSTEM.md#grid) - Sistema de layout com Grid responsivo e Stack flexível para organização de conteúdo.
1162
+ - [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.
1163
+ - [Icon Picker](./docs/DESIGN_SYSTEM.md#iconpicker) - Seletor de ícones da biblioteca Lucide React com busca integrada.
1164
+ - [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.
1165
+ - [Label](./docs/DESIGN_SYSTEM.md#label) - Renderiza uma label acessível associada a controles de formulário.
1166
+ - [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.
1167
+ - [Loading](./docs/DESIGN_SYSTEM.md#skeleton) - Componentes para estados de carregamento: Skeleton (placeholders), Spinner (indicador de loading), e LoadingState (gerenciamento declarativo).
1168
+ - [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.
1169
+ - [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.
1170
+ - [Navigation Menu](./docs/DESIGN_SYSTEM.md#navigationmenu) - Uma coleção de links para navegação em websites.
1171
+ - [Pagination](./docs/DESIGN_SYSTEM.md#pagination) - Barra de paginação completa com seletor de itens por página e controles de navegação.
1172
+ - [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.
1173
+ - [Popover](./docs/DESIGN_SYSTEM.md#popover) - Exibe conteúdo rico em um portal, acionado por um botão.
1174
+ - [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.
1175
+ - [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.
1176
+ - [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.
1177
+ - [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.
1178
+ - [Select](./docs/DESIGN_SYSTEM.md#select) - Exibe uma lista de opções para o usuário escolher—acionada por um botão.
1179
+ - [Separator](./docs/DESIGN_SYSTEM.md#separator) - Separa visual ou semanticamente o conteúdo.
1180
+ - [Slider](./docs/DESIGN_SYSTEM.md#slider) - Um input onde o usuário seleciona um valor dentro de um intervalo determinado.
1181
+ - [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.
1182
+ - [Switch](./docs/DESIGN_SYSTEM.md#switch) - Um controle que permite ao usuário alternar entre marcado e desmarcado.
1183
+ - [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.
1184
+ - [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.
1185
+ - [Textarea](./docs/DESIGN_SYSTEM.md#textarea) - Exibe um textarea de formulário ou um componente que se parece com um textarea.
1186
+ - [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.
1187
+ - [Toggle](./docs/DESIGN_SYSTEM.md#toggle) - Botões de dois estados que podem estar ligados ou desligados, individualmente ou em grupo.
1188
+ - [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.
1189
+
1190
+ ### 🚀 Sistema CRUD
1191
+
1192
+ - [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.
1193
+ - [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.
1194
+ - [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.
1195
+ - [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.
1196
+ - [Wizard Form](./docs/DESIGN_SYSTEM.md#wizardform) - Formulário multi-etapas com validação, navegação entre seções e indicadores de progresso.
1197
+
1198
+ ---
1199
+
1200
+ > 📘 **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).
1201
+
1098
1202
  <!-- AUTO_GENERATED_END -->