react-lgpd-consent 0.4.4 → 0.5.1

package/README.md

@@ -1,162 +1,514 @@
-<div align="center">
-  <h1>react-lgpd-consent 🍪</h1>
-  <p><strong>Uma biblioteca React para gerenciamento de consentimento de cookies em conformidade com a LGPD.</strong></p>
-
-  <div>
-    <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/v/react-lgpd-consent?style=for-the-badge&logo=npm&color=cb3837&logoColor=white" alt="NPM Version"></a>
-    <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/dm/react-lgpd-consent?style=for-the-badge&logo=npm&color=ff6b35&logoColor=white" alt="Downloads"></a>
-    <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/react-lgpd-consent?style=for-the-badge&color=green&logoColor=white" alt="License"></a>
-  <a href="https://lucianoedipo.github.io/react-lgpd-consent/storybook/"><img src="https://img.shields.io/badge/Storybook-Playground-ff4785?style=for-the-badge&logo=storybook&logoColor=white" alt="Storybook"></a>
-  </div>
+<div align="center"><div align="center">
 
-  <div>
-    <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-3178c6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript Ready"></a>
-    <a href="https://reactjs.org/"><img src="https://img.shields.io/badge/React-18+-61dafb?style=for-the-badge&logo=react&logoColor=white" alt="React 18+"></a>
-    <a href="https://nextjs.org/"><img src="https://img.shields.io/badge/Next.js-Compatible-000000?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js Compatible"></a>
-  </div>
+  <h1>react-lgpd-consent 🍪</h1>  <h1>react-lgpd-consent 🍪</h1>
+
+  <p><strong>Gerenciamento de consentimento de cookies em conformidade com a LGPD</strong></p>  <p><strong>Uma biblioteca React para gerenciamento de consentimento de cookies em conformidade com a LGPD.</strong></p>
+
+
+
+  <div>  <div>
+
+    <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/v/react-lgpd-consent?style=for-the-badge&logo=npm&color=cb3837&logoColor=white" alt="NPM Version"></a>    <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/v/react-lgpd-consent?style=for-the-badge&logo=npm&color=cb3837&logoColor=white" alt="NPM Version"></a>
+
+    <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/dm/react-lgpd-consent?style=for-the-badge&logo=npm&color=ff6b35&logoColor=white" alt="Downloads"></a>    <a href="https://www.npmjs.com/package/react-lgpd-consent"><img src="https://img.shields.io/npm/dm/react-lgpd-consent?style=for-the-badge&logo=npm&color=ff6b35&logoColor=white" alt="Downloads"></a>
+
+    <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/react-lgpd-consent?style=for-the-badge&color=green&logoColor=white" alt="License"></a>    <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/react-lgpd-consent?style=for-the-badge&color=green&logoColor=white" alt="License"></a>
+
+    <a href="https://lucianoedipo.github.io/react-lgpd-consent/storybook/"><img src="https://img.shields.io/badge/Storybook-Playground-ff4785?style=for-the-badge&logo=storybook&logoColor=white" alt="Storybook"></a>  <a href="https://lucianoedipo.github.io/react-lgpd-consent/storybook/"><img src="https://img.shields.io/badge/Storybook-Playground-ff4785?style=for-the-badge&logo=storybook&logoColor=white" alt="Storybook"></a>
+
+  </div>  </div>
+
+
+
+  <div>  <div>
+
+    <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-3178c6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript Ready"></a>    <a href="https://www.typescriptlang.org/"><img src="https://img.shields.io/badge/TypeScript-Ready-3178c6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript Ready"></a>
+
+    <a href="https://reactjs.org/"><img src="https://img.shields.io/badge/React-18%2B%2019-61dafb?style=for-the-badge&logo=react&logoColor=white" alt="React 18+19"></a>    <a href="https://reactjs.org/"><img src="https://img.shields.io/badge/React-18+-61dafb?style=for-the-badge&logo=react&logoColor=white" alt="React 18+"></a>
+
+    <a href="https://nextjs.org/"><img src="https://img.shields.io/badge/Next.js-Compatible-000000?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js Compatible"></a>    <a href="https://nextjs.org/"><img src="https://img.shields.io/badge/Next.js-Compatible-000000?style=for-the-badge&logo=next.js&logoColor=white" alt="Next.js Compatible"></a>
+
+  </div>  </div>
+
+
+
+  <div>  <div>
+
+    <a href="https://codecov.io/gh/lucianoedipo/react-lgpd-consent"><img src="https://img.shields.io/codecov/c/github/lucianoedipo/react-lgpd-consent?style=for-the-badge&logo=codecov&logoColor=white" alt="Coverage"></a>    <a href="https://codecov.io/gh/lucianoedipo/react-lgpd-consent"><img src="https://img.shields.io/codecov/c/github/lucianoedipo/react-lgpd-consent?style=for-the-badge&logo=codecov&logoColor=white" alt="Coverage"></a>
+
+    <a href="https://bundlephobia.com/package/react-lgpd-consent"><img src="https://img.shields.io/bundlephobia/minzip/react-lgpd-consent?style=for-the-badge&logo=webpack&logoColor=white&label=Bundle" alt="Bundle Size"></a>    <a href="https://bundlephobia.com/package/react-lgpd-consent"><img src="https://img.shields.io/bundlephobia/minzip/react-lgpd-consent?style=for-the-badge&logo=webpack&logoColor=white" alt="Bundle Size"></a>
+
+  </div>    <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/react-lgpd-consent?style=for-the-badge&logo=node.js&logoColor=white" alt="Node Version"></a>
 
-  <div>
-    <a href="https://codecov.io/gh/lucianoedipo/react-lgpd-consent"><img src="https://img.shields.io/codecov/c/github/lucianoedipo/react-lgpd-consent?style=for-the-badge&logo=codecov&logoColor=white" alt="Coverage"></a>
-    <a href="https://bundlephobia.com/package/react-lgpd-consent"><img src="https://img.shields.io/bundlephobia/minzip/react-lgpd-consent?style=for-the-badge&logo=webpack&logoColor=white" alt="Bundle Size"></a>
-    <a href="https://nodejs.org"><img src="https://img.shields.io/node/v/react-lgpd-consent?style=for-the-badge&logo=node.js&logoColor=white" alt="Node Version"></a>
   </div>
 
   <br />
 
+  <br />
+
   <p>
-    <a href="#-instalação"><strong>Instalação</strong></a> •
-    <a href="#-uso-básico"><strong>Uso Básico</strong></a> •
-  <a href="./QUICKSTART.md"><strong>📚 Guia de Início Rápido</strong></a> •
-  <a href="#-documentação-completa"><strong>Documentação</strong></a> •
-  <a href="./README.en.md">🇺🇸 🇬🇧 English</a> •
-    <a href="#-como-contribuir"><strong>Contribuir</strong></a>
+
+    <a href="#-instalação"><strong>Instalação</strong></a> •  <p>
+
+    <a href="#-início-rápido"><strong>Início Rápido</strong></a> •    <a href="#-instalação"><strong>Instalação</strong></a> •
+
+    <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/QUICKSTART.md"><strong>📚 Guia Completo</strong></a> •    <a href="#-uso-básico"><strong>Uso Básico</strong></a> •
+
+    <a href="#-documentação"><strong>Documentação</strong></a> •  <a href="./QUICKSTART.md"><strong>📚 Guia de Início Rápido</strong></a> •
+
+    <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/README.en.md">🇺🇸 English</a>  <a href="#-documentação-completa"><strong>Documentação</strong></a> •
+
+  </p>  <a href="./README.en.md">🇺🇸 🇬🇧 English</a> •
+
+</div>    <a href="#-como-contribuir"><strong>Contribuir</strong></a>
+
   </p>
 
+---
+
   <!-- Quickstart callout (mantido) -->
-  <p align="center">
+
+## 🎯 O que há de novo na v0.5.0  <p align="center">
+
     <a href="./QUICKSTART.md"><img src="https://img.shields.io/badge/Quickstart-Iniciar%20R%C3%A1pido-blue?style=for-the-badge&logo=book" alt="Quickstart"></a>
-  </p>
 
-  <p align="center"><strong>Comece por aqui:</strong> siga o <a href="./QUICKSTART.md">Guia de Início Rápido (QUICKSTART.md)</a> para um tutorial passo-a-passo, exemplos TypeScript, tabela de props e integração com MUI — recomendado para usuários novos.</p>
+### 🏗️ Arquitetura Modular (BREAKING CHANGE)  </p>
+
+
+
+A v0.5.0 introduz uma **arquitetura monorepo** com 3 pacotes independentes:  <p align="center"><strong>Comece por aqui:</strong> siga o <a href="./QUICKSTART.md">Guia de Início Rápido (QUICKSTART.md)</a> para um tutorial passo-a-passo, exemplos TypeScript, tabela de props e integração com MUI — recomendado para usuários novos.</p>
+
 </div>
 
----
+| Pacote | Descrição | Bundle | Use quando... |
+
+|--------|-----------|--------|---------------|---
 
-## 🚀 Instalação
+| **`@react-lgpd-consent/core`** | Lógica headless sem UI | ~86 KB | Você vai criar sua própria UI customizada |
+
+| **`@react-lgpd-consent/mui`** | Componentes Material-UI prontos | ~104 KB | Você quer componentes UI prontos com MUI |## 🚀 Instalação
+
+| **`react-lgpd-consent`** | Agregador (re-exporta MUI) | ~104 KB | **Compatibilidade com v0.4.x** |
 
 ```bash
-npm install react-lgpd-consent @mui/material @emotion/react @emotion/styled js-cookie
+
+> **💡 Este pacote (`react-lgpd-consent`)** é o agregador que mantém compatibilidade retroativa. Ele re-exporta `@react-lgpd-consent/mui` e funciona exatamente como a v0.4.x, mas agora com a nova arquitetura.npm install react-lgpd-consent @mui/material @emotion/react @emotion/styled js-cookie
+
 ```
 
+### ✨ Novos Recursos v0.5.0
+
 **Dependências peer:** `react`, `react-dom`, `@mui/material` e `js-cookie`.
 
----
+- ✅ **Auto-injeção de Componentes**: `ConsentProvider` do MUI injeta automaticamente Banner, Modal e Floating Button
+
+- ✅ **Tema MUI Integrado**: Suporte a ThemeProvider opcional com `createDefaultConsentTheme()`---
+
+- ✅ **Controle Granular**: Props para desabilitar componentes individuais (`disableDefaultBanner`, `disableDefaultModal`, `disableDefaultFloatingButton`)
+
+- ✅ **Warnings de Desenvolvedor**: Sistema inteligente que avisa quando faltam componentes UI (apenas em DEV)## ✨ Novidades v0.4.5
+
+- ✅ **Monorepo TypeScript**: Paths configurados para melhor DX em IDEs
+
+### 📊 DataLayer Events para Google Tag Manager
+
+### 📦 Migração de v0.4.x → v0.5.0- **Eventos Padronizados**: `consent_initialized` e `consent_updated` disparados automaticamente
+
+- **Rastreamento de Origem**: Identifica se decisão veio do banner, modal, reset ou API programática
+
+**Se você usa `react-lgpd-consent` (este pacote):**- **Auditoria LGPD**: Histórico completo de mudanças com `changed_categories` e timestamps ISO 8601
+
+- **Integração GTM**: Documentação completa com exemplos de triggers e tags
 
-## ✨ Novidades v0.4.4
+✅ **Nenhuma mudança necessária!** A API é 100% retrocompatível.- **API Pública**: Funções `pushConsentInitializedEvent` e `pushConsentUpdatedEvent` exportadas
+
+
+
+```tsx### 🔧 Melhorias de CI/CD
+
+// v0.4.x - continua funcionando- **Migração para pnpm**: Workflows atualizados de npm para pnpm, resolvendo conflitos de dependências
+
+import { ConsentProvider, useConsent } from 'react-lgpd-consent'- **Build Otimizado**: Pipeline mais rápido e confiável
+
+
+
+// v0.5.0 - mesma API, mesmos componentes---
+
+import { ConsentProvider, useConsent } from 'react-lgpd-consent'
+
+```## ✨ Novidades v0.4.4
+
+
+
+**Se você quer otimizar o bundle:**### 🔧 CI/CD e Publicação
 
-### 🔧 CI/CD e Publicação
 - **Workflow de Publicação**: Corrigido bug que impedia publicação automática no npm quando tags eram criadas após merge para `main`
-- **Codecov Integration**: Adicionado upload automático de coverage reports para melhor visualização de cobertura de testes
-- **Badge de Coverage**: Agora atualizado em tempo real via Codecov
+
+```tsx- **Codecov Integration**: Adicionado upload automático de coverage reports para melhor visualização de cobertura de testes
+
+// Opção 1: Core (headless) + sua própria UI (~86 KB)- **Badge de Coverage**: Agora atualizado em tempo real via Codecov
+
+import { ConsentProvider } from '@react-lgpd-consent/core'
 
 ### 📊 Qualidade e Confiabilidade
-- **Publicação Confiável**: Tags agora são publicadas corretamente quando commit está no histórico da `main`
-- **Visibilidade de Cobertura**: Integração completa com Codecov para tracking de qualidade
 
----
+// Opção 2: MUI com componentes prontos (~104 KB)- **Publicação Confiável**: Tags agora são publicadas corretamente quando commit está no histórico da `main`
+
+import { ConsentProvider } from '@react-lgpd-consent/mui'- **Visibilidade de Cobertura**: Integração completa com Codecov para tracking de qualidade
+
+
+
+// Opção 3: Agregador (compatibilidade) (~104 KB)---
+
+import { ConsentProvider } from 'react-lgpd-consent' // Este pacote
+
+```## ✨ Novidades v0.4.1
+
 
-## ✨ Novidades v0.4.1
 
-### 🎨 Design Tokens Expandidos
+---### 🎨 Design Tokens Expandidos
+
 - **200+ pontos de customização** (cores, tipografia, espaçamento, layout)
-- **Sistema responsivo** com breakpoints e variações
+
+## 🚀 Instalação- **Sistema responsivo** com breakpoints e variações
+
 - **Acessibilidade nativa** com contrast ratios e focus states
-- **Temas light/dark/auto** com transições suaves
 
-### 📝 Sistema Avançado de Textos
+```bash- **Temas light/dark/auto** com transições suaves
+
+npm install react-lgpd-consent
+
+```### 📝 Sistema Avançado de Textos
+
 - **Templates pré-configurados** para ecommerce, SaaS e governo
-- **Internacionalização completa** (pt, en, es)
+
+### Dependências Peer (instaladas automaticamente se não existirem)- **Internacionalização completa** (pt, en, es)
+
 - **Variações de tom** (formal, casual, técnico)
-- **Resolução automática** baseada em contexto
 
-### 🔍 Descoberta de Cookies (Experimental)
+```bash- **Resolução automática** baseada em contexto
+
+npm install react react-dom @mui/material @emotion/react @emotion/styled
+
+```### 🔍 Descoberta de Cookies (Experimental)
+
 - **Detecção automática** de cookies em runtime
-- **Categorização inteligente** usando padrões LGPD
+
+---- **Categorização inteligente** usando padrões LGPD
+
 - **Integração nativa** com sistema de override
 
+## ⚡ Início Rápido
+
 ### ⚠️ Breaking Changes
-- **Suporte a categorias customizadas**: `setPreference` e `ScriptIntegration.category` agora usam `string` ao invés de `Category`  
-- **Impacto mínimo**: Código usando strings literais continua funcionando sem alterações
-- **Consulte**: [CHANGELOG.md](./CHANGELOG.md) para guia de migração completo
 
----
+### Setup Básico (3 linhas de código)- **Suporte a categorias customizadas**: `setPreference` e `ScriptIntegration.category` agora usam `string` ao invés de `Category`  
 
-## 📖 Uso Básico
+- **Impacto mínimo**: Código usando strings literais continua funcionando sem alterações
 
-Envolva sua aplicação com o `ConsentProvider` (exemplo mínimo):
+```tsx- **Consulte**: [CHANGELOG.md](./CHANGELOG.md) para guia de migração completo
 
-```tsx
 import { ConsentProvider } from 'react-lgpd-consent'
 
+---
+
 export default function App() {
-  return (
-    <ConsentProvider categories={{ enabledCategories: ['analytics'] }}>
-      <YourApp />
+
+  return (## 📖 Uso Básico
+
+    <ConsentProvider categories={{ enabledCategories: ['analytics', 'marketing'] }}>
+
+      <YourApp />Envolva sua aplicação com o `ConsentProvider` (exemplo mínimo):
+
     </ConsentProvider>
-  )
-}
+
+  )```tsx
+
+}import { ConsentProvider } from 'react-lgpd-consent'
+
 ```
 
+export default function App() {
+
+**Isso já inclui:**  return (
+
+- ✅ Banner de cookies    <ConsentProvider categories={{ enabledCategories: ['analytics'] }}>
+
+- ✅ Modal de preferências      <YourApp />
+
+- ✅ Botão flutuante para reabrir preferências    </ConsentProvider>
+
+- ✅ Persistência em cookies  )
+
+- ✅ SSR-safe (Next.js, Remix)}
+
+```
+
+### Acessar Estado de Consentimento
+
 ## Nota sobre ThemeProvider e tema padrão
 
-A biblioteca não cria um `ThemeProvider` global automaticamente. Ela tenta herdar o tema do seu app quando você já possui um `ThemeProvider` do MUI. Se você quiser aplicar explicitamente um tema de fallback para os componentes de consentimento, use a fábrica exportada `createDefaultConsentTheme()` e passe via prop `theme`:
+```tsx
+
+import { useConsent } from 'react-lgpd-consent'A biblioteca não cria um `ThemeProvider` global automaticamente. Ela tenta herdar o tema do seu app quando você já possui um `ThemeProvider` do MUI. Se você quiser aplicar explicitamente um tema de fallback para os componentes de consentimento, use a fábrica exportada `createDefaultConsentTheme()` e passe via prop `theme`:
+
+
+
+function MyComponent() {```tsx
+
+  const { preferences, acceptCategory, rejectCategory } = useConsent()import { ConsentProvider, createDefaultConsentTheme } from 'react-lgpd-consent'
+
+
+
+  if (preferences.analytics) {// Aplica um tema de fallback somente para os componentes da lib
+
+    // Analytics está permitido, carregue scripts;<ConsentProvider
+
+  }  theme={createDefaultConsentTheme()}
+
+  categories={{ enabledCategories: ['analytics'] }}
+
+  return (>
+
+    <button onClick={() => acceptCategory('marketing')}>  <App />
+
+      Aceitar Marketing</ConsentProvider>
+
+    </button>```
+
+  )
+
+}Evite depender de criação de tema no import (isso evita side-effects e problemas em SSR). Se você precisar de compatibilidade retroativa com quem importava `defaultConsentTheme`, entre em contato para adicionarmos um export compatível com deprecação documentada.
+
+```
+
+## 📚 Documentação Completa
+
+### Carregar Scripts Condicionados ao Consentimento
+
+Para mais detalhes sobre customização, hooks e funcionalidades, consulte os seguintes guias:
 
 ```tsx
+
+import { ConsentScriptLoader } from 'react-lgpd-consent'### 📋 Documentação Principal
+
+
+
+function Analytics() {- **[📚 Guia de Início Rápido (`QUICKSTART.md`)](./QUICKSTART.md)**: Tutorial passo a passo com exemplos práticos, tabela completa de props, debugging e integrações.
+
+  return (  - Seção recomendada: “SSR/Next.js (App Router) — Padrões seguros” com boas práticas de `'use client'`, `dynamic({ ssr: false })` e ordem dos provedores/estilos (MUI/Emotion) para evitar hydration mismatch.
+
+    <ConsentScriptLoader  - Novo na v0.4.0: suporte a `customCategories` — veja a seção “Categorias customizadas (customCategories)” no Quickstart.
+
+      category="analytics"  - Novo na v0.4.1: integrações nativas para Facebook Pixel, Hotjar, Mixpanel, Clarity, Intercom e Zendesk — veja o guia [INTEGRACOES.md](./INTEGRACOES.md).
+
+      src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"  - Dica: use `designTokens.layout.backdrop: 'auto'` para backdrop sensível ao tema no banner bloqueante.
+
+      strategy="afterInteractive"  - Auto-config de categorias: a biblioteca detecta categorias requeridas pelas integrações e exibe os toggles mesmo se você esquecer de habilitar (valor inicial sempre rejeitado). Recomendamos explicitar em `categories.enabledCategories` para clareza.
+
+    >  - Páginas de Política/Termos não bloqueadas: se `policyLinkUrl` e/ou `termsLinkUrl` apontarem para a página atual, o overlay bloqueante não é aplicado — garantindo legibilidade destas páginas.
+
+      {`- **[Guia da API (`API.md`)](./API.md)**: Referência completa de todos os componentes, hooks e tipos.
+
+        window.dataLayer = window.dataLayer || [];- **[Guia de Conformidade (`CONFORMIDADE.md`)](./CONFORMIDADE.md)**: Detalhes sobre as funcionalidades de conformidade com a LGPD.
+
+        function gtag(){dataLayer.push(arguments);}- **[Guia de Integrações (`INTEGRACOES.md`)](./INTEGRACOES.md)**: Como usar as integrações nativas e criar as suas.
+
+        gtag('js', new Date());
+
+        gtag('config', 'GA_MEASUREMENT_ID');### 🎨 Documentação Interativa (GitHub Pages)
+
+      `}
+
+    </ConsentScriptLoader>- **[📖 Storybook - Playground Interativo](https://lucianoedipo.github.io/react-lgpd-consent/storybook/)**: Explore e teste todos os componentes em tempo real com controles interativos.
+
+  )- **[⚙️ TypeDoc - Referência de API](https://lucianoedipo.github.io/react-lgpd-consent/docs/)**: Documentação completa da API gerada automaticamente.
+
+}- **[🏠 Portal de Documentação](https://lucianoedipo.github.io/react-lgpd-consent/)**: Página inicial com navegação entre todas as documentações.
+
+```
+
+---
+
+---
+
+## 🤝 Como Contribuir
+
+## 🎨 Customização
+
+1. Abra uma [Issue](https://github.com/lucianoedipo/react-lgpd-consent/issues) para bugs ou melhorias.
+
+### Tema Material-UI2. Siga o Guia de Desenvolvimento em `DEVELOPMENT.md` para enviar um PR.
+
+
+
+```tsx---
+
 import { ConsentProvider, createDefaultConsentTheme } from 'react-lgpd-consent'
 
-// Aplica um tema de fallback somente para os componentes da lib
-;<ConsentProvider
-  theme={createDefaultConsentTheme()}
+## 📄 Licença
+
+<ConsentProvider
+
+  theme={createDefaultConsentTheme({MIT — veja o arquivo `LICENSE`.
+
+    palette: {
+      primary: { main: '#your-brand-color' }
+    }
+  })}
   categories={{ enabledCategories: ['analytics'] }}
 >
   <App />
 </ConsentProvider>
 ```
 
-Evite depender de criação de tema no import (isso evita side-effects e problemas em SSR). Se você precisar de compatibilidade retroativa com quem importava `defaultConsentTheme`, entre em contato para adicionarmos um export compatível com deprecação documentada.
+### Desabilitar Componentes Padrão
 
-## 📚 Documentação Completa
+```tsx
+import { ConsentProvider, CookieBanner, PreferencesModal } from 'react-lgpd-consent'
 
-Para mais detalhes sobre customização, hooks e funcionalidades, consulte os seguintes guias:
+<ConsentProvider
+  categories={{ enabledCategories: ['analytics'] }}
+  disableDefaultBanner
+  disableDefaultModal
+>
+  {/* Use seus próprios componentes */}
+  <CookieBanner position="bottom-left" />
+  <PreferencesModal showBranding={false} />
+  <App />
+</ConsentProvider>
+```
 
-### 📋 Documentação Principal
+### Design Tokens Avançados
 
-- **[📚 Guia de Início Rápido (`QUICKSTART.md`)](./QUICKSTART.md)**: Tutorial passo a passo com exemplos práticos, tabela completa de props, debugging e integrações.
-  - Seção recomendada: “SSR/Next.js (App Router) — Padrões seguros” com boas práticas de `'use client'`, `dynamic({ ssr: false })` e ordem dos provedores/estilos (MUI/Emotion) para evitar hydration mismatch.
-  - Novo na v0.4.0: suporte a `customCategories` — veja a seção “Categorias customizadas (customCategories)” no Quickstart.
-  - Novo na v0.4.1: integrações nativas para Facebook Pixel, Hotjar, Mixpanel, Clarity, Intercom e Zendesk — veja o guia [INTEGRACOES.md](./INTEGRACOES.md).
-  - Dica: use `designTokens.layout.backdrop: 'auto'` para backdrop sensível ao tema no banner bloqueante.
-  - Auto-config de categorias: a biblioteca detecta categorias requeridas pelas integrações e exibe os toggles mesmo se você esquecer de habilitar (valor inicial sempre rejeitado). Recomendamos explicitar em `categories.enabledCategories` para clareza.
-  - Páginas de Política/Termos não bloqueadas: se `policyLinkUrl` e/ou `termsLinkUrl` apontarem para a página atual, o overlay bloqueante não é aplicado — garantindo legibilidade destas páginas.
-- **[Guia da API (`API.md`)](./API.md)**: Referência completa de todos os componentes, hooks e tipos.
-- **[Guia de Conformidade (`CONFORMIDADE.md`)](./CONFORMIDADE.md)**: Detalhes sobre as funcionalidades de conformidade com a LGPD.
-- **[Guia de Integrações (`INTEGRACOES.md`)](./INTEGRACOES.md)**: Como usar as integrações nativas e criar as suas.
+```tsx
+<ConsentProvider
+  categories={{ enabledCategories: ['analytics'] }}
+  designTokens={{
+    colors: {
+      primary: '#1976d2',
+      secondary: '#dc004e',
+      background: '#ffffff',
+    },
+    layout: {
+      backdropColor: 'rgba(0, 0, 0, 0.8)',
+      bannerPosition: 'bottom-center',
+    },
+    typography: {
+      fontFamily: 'Inter, sans-serif',
+    }
+  }}
+>
+  <App />
+</ConsentProvider>
+```
+
+---
+
+## 📚 Documentação
+
+### 📖 Guias Completos (GitHub)
+
+- **[📚 Quickstart](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/QUICKSTART.md)**: Tutorial passo-a-passo com exemplos TypeScript
+- **[🏗️ API Reference](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/API.md)**: Referência completa de componentes, hooks e tipos
+- **[⚖️ Conformidade LGPD](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CONFORMIDADE.md)**: Detalhes sobre compliance e auditoria
+- **[🔌 Integrações](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md)**: Google Analytics, GTM, Facebook Pixel, Hotjar, etc.
+- **[🏛️ Arquitetura](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/ARCHITECTURE.md)**: Detalhes da arquitetura monorepo v0.5.0
+- **[📝 Changelog](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CHANGELOG.md)**: Histórico completo de versões
 
 ### 🎨 Documentação Interativa (GitHub Pages)
 
-- **[📖 Storybook - Playground Interativo](https://lucianoedipo.github.io/react-lgpd-consent/storybook/)**: Explore e teste todos os componentes em tempo real com controles interativos.
-- **[⚙️ TypeDoc - Referência de API](https://lucianoedipo.github.io/react-lgpd-consent/docs/)**: Documentação completa da API gerada automaticamente.
-- **[🏠 Portal de Documentação](https://lucianoedipo.github.io/react-lgpd-consent/)**: Página inicial com navegação entre todas as documentações.
+- **[🎭 Storybook - Playground Interativo](https://lucianoedipo.github.io/react-lgpd-consent/storybook/)**: Explore e teste todos os componentes em tempo real
+- **[⚙️ TypeDoc - API Docs](https://lucianoedipo.github.io/react-lgpd-consent/docs/)**: Documentação da API gerada automaticamente
+- **[🏠 Portal de Documentação](https://lucianoedipo.github.io/react-lgpd-consent/)**: Navegação central entre todas as docs
 
 ---
 
-## 🤝 Como Contribuir
+## 🔌 Integrações Nativas
 
-1. Abra uma [Issue](https://github.com/lucianoedipo/react-lgpd-consent/issues) para bugs ou melhorias.
-2. Siga o Guia de Desenvolvimento em `DEVELOPMENT.md` para enviar um PR.
+A biblioteca possui integrações prontas para:
+
+- ✅ **Google Analytics 4** (GA4)
+- ✅ **Google Tag Manager** (GTM)
+- ✅ **Facebook Pixel**
+- ✅ **Hotjar**
+- ✅ **Microsoft Clarity**
+- ✅ **Mixpanel**
+- ✅ **Intercom**
+- ✅ **Zendesk**
+- ✅ **UserWay** (Acessibilidade)
+
+```tsx
+import { ConsentScriptLoader, createGoogleAnalyticsIntegration } from 'react-lgpd-consent'
+
+<ConsentScriptLoader integration={createGoogleAnalyticsIntegration('GA_ID')} />
+```
+
+**[Ver guia completo de integrações →](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md)**
+
+---
+
+## 🧩 Ecossistema de Pacotes
+
+```
+react-lgpd-consent (este pacote - agregador)
+├── @react-lgpd-consent/core      # Headless (86 KB)
+└── @react-lgpd-consent/mui       # MUI Components (104 KB)
+```
+
+### Quando usar cada pacote?
+
+| Cenário | Pacote Recomendado |
+|---------|-------------------|
+| **Migração de v0.4.x** | `react-lgpd-consent` (este) |
+| **UI customizada completa** | `@react-lgpd-consent/core` |
+| **Componentes MUI prontos** | `@react-lgpd-consent/mui` |
+| **Novo projeto com MUI** | `@react-lgpd-consent/mui` |
+| **Bundle otimizado** | `@react-lgpd-consent/core` |
+
+---
+
+## 🌟 Características
+
+- ✅ **TypeScript First**: Tipos completos e inferência automática
+- ✅ **SSR-Safe**: Compatível com Next.js (App Router + Pages Router), Remix
+- ✅ **Zero Config**: Funciona out-of-the-box com defaults sensatos
+- ✅ **Acessível**: WCAG 2.1 AA compliance, keyboard navigation, screen readers
+- ✅ **Responsivo**: Mobile-first design com breakpoints adaptativos
+- ✅ **Tree-shakeable**: Import apenas o que você usa
+- ✅ **Temas**: Light/Dark/Auto com transições suaves
+- ✅ **i18n**: Suporte a múltiplos idiomas (pt-BR, en, es)
+- ✅ **Auditável**: Logs de desenvolvedor e eventos DataLayer para GTM
+
+---
+
+## 🤝 Contribuindo
+
+Contribuições são bem-vindas! Veja o [Guia de Desenvolvimento](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/DEVELOPMENT.md).
+
+1. Fork o repositório
+2. Crie uma branch: `git checkout -b feature/minha-feature`
+3. Commit: `git commit -m 'feat: minha nova feature'`
+4. Push: `git push origin feature/minha-feature`
+5. Abra um Pull Request
 
 ---
 
 ## 📄 Licença
 
-MIT — veja o arquivo `LICENSE`.
+MIT © [Luciano Edipo](https://github.com/lucianoedipo)
+
+---
+
+## 🔗 Links Úteis
+
+- **[GitHub Repository](https://github.com/lucianoedipo/react-lgpd-consent)**
+- **[NPM Package](https://www.npmjs.com/package/react-lgpd-consent)**
+- **[Issues & Bugs](https://github.com/lucianoedipo/react-lgpd-consent/issues)**
+- **[Changelog](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CHANGELOG.md)**
+
+---
+
+<div align="center">
+  <sub>Feito com ❤️ para a comunidade React brasileira</sub>
+</div>

package/dist/core.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var core = require('@react-lgpd-consent/core');
+
+
+
+Object.keys(core).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return core[k]; }
+	});
+});

package/dist/core.d.cts

@@ -0,0 +1,2 @@
+export * from '@react-lgpd-consent/core';
+import '@react-lgpd-consent/mui';

package/dist/core.d.ts

@@ -0,0 +1,2 @@
+export * from '@react-lgpd-consent/core';
+import '@react-lgpd-consent/mui';

package/dist/core.js

@@ -0,0 +1 @@
+export * from '@react-lgpd-consent/core';