forlogic-core 1.11.6 → 1.12.0

package/README.md

@@ -27,6 +27,12 @@ npm install forlogic-core
 
 **Nota**: O npm/yarn irá alertar automaticamente se alguma peer dependency estiver faltando ou com versão incompatível.
 
+### Baixar documentação atualizada
+
+```bash
+npx forlogic-core-pull-docs
+```
+
 ### ⚠️ IMPORTANTE: Imports de i18n
 
 **Sempre** importe hooks de internacionalização do `forlogic-core`, nunca diretamente de `react-i18next`:
@@ -830,6 +836,140 @@ Se você não fornecer um `queryClient`, o `CoreProviders` cria um com as seguin
 
 ---
 
+## 🎯 Ações Principais de Módulo (SidebarActionTrigger)
+
+O `SidebarActionTrigger` permite adicionar ações principais de módulo no sidebar, diferenciadas visualmente da navegação. São gatilhos de ação, não destinos de navegação.
+
+### Conceito
+
+| Característica | Descrição |
+|----------------|-----------|
+| **Ação de módulo** | Válida apenas dentro do contexto do módulo ao qual pertence |
+| **Não global** | Não aplicável a todo o sistema |
+| **Não contextual** | Não depende de seleção de item específico |
+| **Destaque visual** | Exibida com aparência diferenciada da navegação |
+
+### Uso Básico
+
+```tsx
+import { AppSidebar, SidebarConfig } from 'forlogic-core';
+import { Plus, FileText, Folder } from 'lucide-react';
+
+const sidebarConfig: SidebarConfig = {
+  appName: 'Meu Módulo',
+  
+  // Ações principais do módulo
+  moduleActions: {
+    triggerLabel: 'Criar',
+    triggerIcon: Plus,
+    actions: [
+      { 
+        id: 'create-item', 
+        label: 'Novo Item', 
+        icon: FileText, 
+        onClick: () => openCreateDialog() 
+      },
+      { 
+        id: 'create-folder', 
+        label: 'Nova Pasta', 
+        icon: Folder, 
+        onClick: () => openFolderDialog() 
+      },
+    ]
+  },
+  
+  // Navegação
+  navigation: [
+    { label: 'Visão Geral', path: '/', icon: Home },
+    { label: 'Configurações', path: '/settings', icon: Settings },
+  ]
+};
+
+<AppSidebar config={sidebarConfig} />
+```
+
+### Comportamento
+
+| Cenário | Comportamento |
+|---------|---------------|
+| **Uma ação** | Clique executa a ação diretamente |
+| **Múltiplas ações** | Clique exibe dropdown com opções |
+| **Modal aberto** | Gatilho fica desabilitado |
+| **Sidebar colapsada** | Exibe apenas ícone com tooltip |
+
+### Props do SidebarActionTrigger
+
+| Prop | Tipo | Obrigatório | Descrição |
+|------|------|-------------|-----------|
+| `config` | `SidebarActionsConfig` | ✅ | Configuração das ações |
+| `isCollapsed` | `boolean` | ❌ | Se a sidebar está colapsada |
+| `isDisabled` | `boolean` | ❌ | Desabilita o gatilho |
+
+### Interface SidebarModuleAction
+
+```typescript
+interface SidebarModuleAction {
+  id: string;           // Identificador único
+  label: string;        // Texto do botão/opção
+  icon?: LucideIcon;    // Ícone opcional
+  onClick: () => void;  // Callback de execução
+  disabled?: boolean;   // Estado desabilitado
+  permissionCheck?: () => Promise<boolean>;
+}
+```
+
+### Interface SidebarActionsConfig
+
+```typescript
+interface SidebarActionsConfig {
+  triggerLabel?: string;    // Rótulo do gatilho (padrão: 'Criar')
+  triggerIcon?: LucideIcon; // Ícone do gatilho (padrão: Plus)
+  actions: SidebarModuleAction[];
+}
+```
+
+### Gerenciamento de Modais (Opcional)
+
+Para desabilitar o gatilho quando há modais abertos, use o `ModalStateProvider`:
+
+```tsx
+import { CoreProviders, ModalStateProvider, useModalState } from 'forlogic-core';
+
+// No App.tsx (opcional - CoreProviders não inclui por padrão)
+<CoreProviders>
+  <ModalStateProvider>
+    <AppLayout />
+  </ModalStateProvider>
+</CoreProviders>
+
+// Em componentes com modal
+function MeuDialog({ open, onOpenChange }) {
+  const { registerModal, unregisterModal } = useModalState();
+  
+  useEffect(() => {
+    if (open) {
+      registerModal('meu-dialog');
+    } else {
+      unregisterModal('meu-dialog');
+    }
+  }, [open]);
+  
+  return <Dialog open={open} onOpenChange={onOpenChange}>...</Dialog>;
+}
+```
+
+### Diretriz para Uso via Prompt
+
+#### ✅ Prompts corretos:
+- "Adicione uma ação principal 'Criar Processo' no sidebar do módulo"
+- "Configure o módulo para ter duas ações principais: 'Novo Item' e 'Nova Pasta'"
+- "Adicione o botão de criar no topo do sidebar como ação de módulo"
+
+#### ❌ Prompts ambíguos (evitar):
+- "Coloque um botão de criar no menu" (ambíguo - qual menu?)
+- "Adicione navegação para criar" (ação ≠ navegação)
+- "Crie um link para nova entidade" (link = navegação, não ação)
+
 ## 🛠️ CLI: Sincronização de Documentação
 
 O `forlogic-core` disponibiliza um comando CLI para sincronizar a documentação centralizada do banco de dados para projetos consumidores.
@@ -876,7 +1016,7 @@ 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**
+**47 Componentes UI** | **6 Tokens** | **6 Ferramentas CRUD**
 
 ---
 
@@ -916,10 +1056,8 @@ O comando usa credenciais públicas do Supabase do forlogic-core e não requer c
 - [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.
 - [Pagination](./docs/DESIGN_SYSTEM.md#pagination) - Barra de paginação completa com seletor de itens por página e controles de navegaçã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.
 - [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.
@@ -938,11 +1076,15 @@ O comando usa credenciais públicas do Supabase do forlogic-core e não requer c
 - [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.
 - [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.
 
 ### 🚀 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.
 - [Wizard Form](./docs/DESIGN_SYSTEM.md#wizardform) - Formulário multi-etapas com validação, navegação entre seções e indicadores de progresso.
 

package/dist/README.md

@@ -27,6 +27,12 @@ npm install forlogic-core
 
 **Nota**: O npm/yarn irá alertar automaticamente se alguma peer dependency estiver faltando ou com versão incompatível.
 
+### Baixar documentação atualizada
+
+```bash
+npx forlogic-core-pull-docs
+```
+
 ### ⚠️ IMPORTANTE: Imports de i18n
 
 **Sempre** importe hooks de internacionalização do `forlogic-core`, nunca diretamente de `react-i18next`:
@@ -830,6 +836,140 @@ Se você não fornecer um `queryClient`, o `CoreProviders` cria um com as seguin
 
 ---
 
+## 🎯 Ações Principais de Módulo (SidebarActionTrigger)
+
+O `SidebarActionTrigger` permite adicionar ações principais de módulo no sidebar, diferenciadas visualmente da navegação. São gatilhos de ação, não destinos de navegação.
+
+### Conceito
+
+| Característica | Descrição |
+|----------------|-----------|
+| **Ação de módulo** | Válida apenas dentro do contexto do módulo ao qual pertence |
+| **Não global** | Não aplicável a todo o sistema |
+| **Não contextual** | Não depende de seleção de item específico |
+| **Destaque visual** | Exibida com aparência diferenciada da navegação |
+
+### Uso Básico
+
+```tsx
+import { AppSidebar, SidebarConfig } from 'forlogic-core';
+import { Plus, FileText, Folder } from 'lucide-react';
+
+const sidebarConfig: SidebarConfig = {
+  appName: 'Meu Módulo',
+  
+  // Ações principais do módulo
+  moduleActions: {
+    triggerLabel: 'Criar',
+    triggerIcon: Plus,
+    actions: [
+      { 
+        id: 'create-item', 
+        label: 'Novo Item', 
+        icon: FileText, 
+        onClick: () => openCreateDialog() 
+      },
+      { 
+        id: 'create-folder', 
+        label: 'Nova Pasta', 
+        icon: Folder, 
+        onClick: () => openFolderDialog() 
+      },
+    ]
+  },
+  
+  // Navegação
+  navigation: [
+    { label: 'Visão Geral', path: '/', icon: Home },
+    { label: 'Configurações', path: '/settings', icon: Settings },
+  ]
+};
+
+<AppSidebar config={sidebarConfig} />
+```
+
+### Comportamento
+
+| Cenário | Comportamento |
+|---------|---------------|
+| **Uma ação** | Clique executa a ação diretamente |
+| **Múltiplas ações** | Clique exibe dropdown com opções |
+| **Modal aberto** | Gatilho fica desabilitado |
+| **Sidebar colapsada** | Exibe apenas ícone com tooltip |
+
+### Props do SidebarActionTrigger
+
+| Prop | Tipo | Obrigatório | Descrição |
+|------|------|-------------|-----------|
+| `config` | `SidebarActionsConfig` | ✅ | Configuração das ações |
+| `isCollapsed` | `boolean` | ❌ | Se a sidebar está colapsada |
+| `isDisabled` | `boolean` | ❌ | Desabilita o gatilho |
+
+### Interface SidebarModuleAction
+
+```typescript
+interface SidebarModuleAction {
+  id: string;           // Identificador único
+  label: string;        // Texto do botão/opção
+  icon?: LucideIcon;    // Ícone opcional
+  onClick: () => void;  // Callback de execução
+  disabled?: boolean;   // Estado desabilitado
+  permissionCheck?: () => Promise<boolean>;
+}
+```
+
+### Interface SidebarActionsConfig
+
+```typescript
+interface SidebarActionsConfig {
+  triggerLabel?: string;    // Rótulo do gatilho (padrão: 'Criar')
+  triggerIcon?: LucideIcon; // Ícone do gatilho (padrão: Plus)
+  actions: SidebarModuleAction[];
+}
+```
+
+### Gerenciamento de Modais (Opcional)
+
+Para desabilitar o gatilho quando há modais abertos, use o `ModalStateProvider`:
+
+```tsx
+import { CoreProviders, ModalStateProvider, useModalState } from 'forlogic-core';
+
+// No App.tsx (opcional - CoreProviders não inclui por padrão)
+<CoreProviders>
+  <ModalStateProvider>
+    <AppLayout />
+  </ModalStateProvider>
+</CoreProviders>
+
+// Em componentes com modal
+function MeuDialog({ open, onOpenChange }) {
+  const { registerModal, unregisterModal } = useModalState();
+  
+  useEffect(() => {
+    if (open) {
+      registerModal('meu-dialog');
+    } else {
+      unregisterModal('meu-dialog');
+    }
+  }, [open]);
+  
+  return <Dialog open={open} onOpenChange={onOpenChange}>...</Dialog>;
+}
+```
+
+### Diretriz para Uso via Prompt
+
+#### ✅ Prompts corretos:
+- "Adicione uma ação principal 'Criar Processo' no sidebar do módulo"
+- "Configure o módulo para ter duas ações principais: 'Novo Item' e 'Nova Pasta'"
+- "Adicione o botão de criar no topo do sidebar como ação de módulo"
+
+#### ❌ Prompts ambíguos (evitar):
+- "Coloque um botão de criar no menu" (ambíguo - qual menu?)
+- "Adicione navegação para criar" (ação ≠ navegação)
+- "Crie um link para nova entidade" (link = navegação, não ação)
+
 ## 🛠️ CLI: Sincronização de Documentação
 
 O `forlogic-core` disponibiliza um comando CLI para sincronizar a documentação centralizada do banco de dados para projetos consumidores.
@@ -872,82 +1012,82 @@ O comando usa credenciais públicas do Supabase do forlogic-core e não requer c
 
 ---
 
-<!-- AUTO_GENERATED_START -->
-
-### 📚 Estatísticas da Documentação
-
-**49 Componentes UI** | **6 Tokens** | **2 Ferramentas CRUD**
-
----
-
-### 🎨 Fundamentos (Tokens)
-
-- [Colors Foundation](./docs/DESIGN_SYSTEM.md#colorsfoundation) - Sistema de cores completo com escalas neutras, de marca e funcionais.
-- [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.
-- [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.
-- [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.
-- [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é.
-- [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.
-- [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.
-- [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.
-- [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.
-- [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.
-- [Pagination](./docs/DESIGN_SYSTEM.md#pagination) - Barra de paginação completa com seletor de itens por página e controles de navegaçã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.
-- [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.
-- [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.
-- [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.
-- [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.
-- [Toggle](./docs/DESIGN_SYSTEM.md#toggle) - Botões de dois estados que podem estar ligados ou desligados, individualmente ou em grupo.
-
-### 🚀 Sistema CRUD
-
-- [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.
-
----
-
-> 📘 **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
+
+**49 Componentes UI** | **6 Tokens** | **2 Ferramentas CRUD**
+
+---
+
+### 🎨 Fundamentos (Tokens)
+
+- [Colors Foundation](./docs/DESIGN_SYSTEM.md#colorsfoundation) - Sistema de cores completo com escalas neutras, de marca e funcionais.
+- [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.
+- [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.
+- [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.
+- [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é.
+- [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.
+- [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.
+- [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.
+- [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.
+- [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.
+- [Pagination](./docs/DESIGN_SYSTEM.md#pagination) - Barra de paginação completa com seletor de itens por página e controles de navegaçã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.
+- [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.
+- [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.
+- [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.
+- [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.
+- [Toggle](./docs/DESIGN_SYSTEM.md#toggle) - Botões de dois estados que podem estar ligados ou desligados, individualmente ou em grupo.
+
+### 🚀 Sistema CRUD
+
+- [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.
+
+---
+
+> 📘 **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/dist/bin/pull-docs.js

@@ -1,22 +1,45 @@
 #!/usr/bin/env node
-#!/usr/bin/env node
 import * as fs from 'fs';
 import * as path from 'path';
 import { createClient } from '@supabase/supabase-js';
 
-const FORLOGIC_CORE_SUPABASE_URL = "https://ccjfvpnndclajkleyqkc.supabase.co";
-const FORLOGIC_CORE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImNjamZ2cG5uZGNsYWprbGV5cWtjIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTA5NTQ1OTksImV4cCI6MjA2NjUzMDU5OX0.j7ASp7OYaR5oXfnVmK77VGNH-5hDa9JpzbAYJBUpfa8";
-const supabase = createClient(
-  FORLOGIC_CORE_SUPABASE_URL,
-  FORLOGIC_CORE_ANON_KEY
-);
+function loadEnvFile() {
+  const envPath = path.join(process.cwd(), ".env");
+  if (fs.existsSync(envPath)) {
+    const envContent = fs.readFileSync(envPath, "utf-8");
+    envContent.split("\n").forEach((line) => {
+      const trimmed = line.trim();
+      if (trimmed && !trimmed.startsWith("#")) {
+        const [key, ...valueParts] = trimmed.split("=");
+        const value = valueParts.join("=").replace(/^["']|["']$/g, "");
+        if (key && value && !process.env[key]) {
+          process.env[key] = value;
+        }
+      }
+    });
+  }
+}
+loadEnvFile();
+const SUPABASE_URL = process.env.VITE_SUPABASE_URL;
+const SUPABASE_ANON_KEY = process.env.VITE_SUPABASE_PUBLISHABLE_KEY;
+if (!SUPABASE_URL || !SUPABASE_ANON_KEY) {
+  console.error("\u274C Erro: Vari\xE1veis de ambiente n\xE3o configuradas.\n");
+  console.error("Configure no arquivo .env do seu projeto:");
+  console.error("  VITE_SUPABASE_URL=https://seu-projeto.supabase.co");
+  console.error("  VITE_SUPABASE_PUBLISHABLE_KEY=sua-chave-anon\n");
+  console.error("Ou defina como vari\xE1veis de ambiente do sistema.");
+  process.exit(1);
+}
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
 const DOCS_TO_SYNC = [
-  { type: "readme", outputFile: "docs/FORLOGIC_CORE_README.md" },
+  { type: "readme", outputFile: "README.md" },
   { type: "design_system", outputFile: "docs/DESIGN_SYSTEM.md" },
   { type: "knowledge", outputFile: "docs/KNOWLEDGE.md" }
 ];
 async function pullDocs() {
   console.log("\u{1F4E5} Puxando documenta\xE7\xE3o do forlogic-core...\n");
+  console.log(`\u{1F4E1} Conectando a: ${SUPABASE_URL}
+`);
   let successCount = 0;
   let errorCount = 0;
   for (const doc of DOCS_TO_SYNC) {