react-lgpd-consent 0.5.1 → 0.5.3

package/README.en.md

@@ -1,127 +1,464 @@
-<div align="center">
-  <h1>react-lgpd-consent 🍪</h1>
-  <p><strong>A React library for cookie consent management compliant with Brazil's 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">
+
+  <h1>react-lgpd-consent 🍪</h1>  <h1>react-lgpd-consent 🍪</h1>
+
+  <p><strong>LGPD-compliant cookie consent management for React</strong></p>  <p><strong>A React library for cookie consent management compliant with Brazil's 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>
-    <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>
 
-  <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>  <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>
 
   <br />
 
+  <br />
+
   <p>
-    <a href="#installation"><strong>Installation</strong></a> •
-    <a href="#basic-usage"><strong>Basic Usage</strong></a> •
-    <a href="./QUICKSTART.md"><strong>📚 Quickstart</strong></a> •
-    <a href="#documentation"><strong>Documentation</strong></a> •
-    <a href="#contributing"><strong>Contributing</strong></a>
-  </p>
-
-  <p align="center">
+
+    <a href="#-installation"><strong>Installation</strong></a> •  <p>
+
+    <a href="#-quick-start"><strong>Quick Start</strong></a> •    <a href="#installation"><strong>Installation</strong></a> •
+
+    <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/QUICKSTART.en.md"><strong>📚 Complete Guide</strong></a> •    <a href="#basic-usage"><strong>Basic Usage</strong></a> •
+
+    <a href="#-documentation"><strong>Documentation</strong></a> •    <a href="./QUICKSTART.md"><strong>📚 Quickstart</strong></a> •
+
+    <a href="https://github.com/lucianoedipo/react-lgpd-consent/blob/main/packages/react-lgpd-consent/README.md">🇧🇷 Português</a>    <a href="#documentation"><strong>Documentation</strong></a> •
+
+  </p>    <a href="#contributing"><strong>Contributing</strong></a>
+
+</div>  </p>
+
+
+
+---  <p align="center">
+
   <a href="./QUICKSTART.en.md"><img src="https://img.shields.io/badge/Quickstart-Get%20Started-blue?style=for-the-badge&logo=book" alt="Quickstart"></a>
-  </p>
 
-  <p align="center"><strong>Start here:</strong> follow the <a href="./QUICKSTART.en.md">Quickstart guide (QUICKSTART.en.md)</a> for step-by-step setup, TypeScript examples, props summary and MUI integration — recommended for new users.</p>
+## 🎯 What's New in v0.5.0  </p>
+
+
+
+### 🏗️ Modular Architecture (BREAKING CHANGE)  <p align="center"><strong>Start here:</strong> follow the <a href="./QUICKSTART.en.md">Quickstart guide (QUICKSTART.en.md)</a> for step-by-step setup, TypeScript examples, props summary and MUI integration — recommended for new users.</p>
+
 </div>
 
+v0.5.0 introduces a **monorepo architecture** with 3 independent packages:
+
 ---
 
-## 🚀 Installation
+| Package | Description | Bundle Size | Use when... |
+
+|---------|-------------|-------------|-------------|## 🚀 Installation
+
+| [`@react-lgpd-consent/core`](https://www.npmjs.com/package/@react-lgpd-consent/core) | Headless logic, no UI | ~86 KB | You want to build custom UI |
+
+| [`@react-lgpd-consent/mui`](https://www.npmjs.com/package/@react-lgpd-consent/mui) | Ready-to-use Material-UI components | ~104 KB | You want pre-built MUI components |```bash
+
+| `react-lgpd-consent` | Aggregator (re-exports MUI) | ~104 KB | **v0.4.x compatibility** |npm install react-lgpd-consent @mui/material @emotion/react @emotion/styled js-cookie
 
-```bash
-npm install react-lgpd-consent @mui/material @emotion/react @emotion/styled js-cookie
 ```
 
+> **💡 This package (`react-lgpd-consent`)** is the aggregator that maintains backward compatibility. It re-exports `@react-lgpd-consent/mui` and works exactly like v0.4.x, but with the new architecture.
+
 **Peer dependencies:** `react`, `react-dom`, `@mui/material` and `js-cookie`.
 
+### ✨ New Features in v0.5.0
+
 ---
 
-## ✨ What's New in v0.4.5
+- ✅ **Auto-injection of Components**: MUI's `ConsentProvider` automatically injects Banner, Modal, and Floating Button
+
+- ✅ **Integrated MUI Theme**: Optional ThemeProvider support with `createDefaultConsentTheme()`## ✨ What's New in v0.4.5
+
+- ✅ **Granular Control**: Props to disable individual components (`disableDefaultBanner`, `disableDefaultModal`, `disableDefaultFloatingButton`)
+
+- ✅ **Developer Warnings**: Intelligent system that warns when UI components are missing (DEV only)### 📊 DataLayer Events for Google Tag Manager
+
+- ✅ **TypeScript Monorepo**: Configured paths for better IDE DX- **Standardized Events**: `consent_initialized` and `consent_updated` automatically dispatched
 
-### 📊 DataLayer Events for Google Tag Manager
-- **Standardized Events**: `consent_initialized` and `consent_updated` automatically dispatched
 - **Origin Tracking**: Identifies whether decision came from banner, modal, reset, or programmatic API
-- **LGPD Audit**: Complete change history with `changed_categories` and ISO 8601 timestamps
+
+### 📦 Migration from v0.4.x → v0.5.0- **LGPD Audit**: Complete change history with `changed_categories` and ISO 8601 timestamps
+
 - **GTM Integration**: Full documentation with trigger and tag examples
-- **Public API**: Exported `pushConsentInitializedEvent` and `pushConsentUpdatedEvent` functions
 
-### 🔧 CI/CD Improvements
+**If you use `react-lgpd-consent` (this package):**- **Public API**: Exported `pushConsentInitializedEvent` and `pushConsentUpdatedEvent` functions
+
+
+
+✅ **No changes needed!** The API is 100% backward compatible.### 🔧 CI/CD Improvements
+
 - **Migration to pnpm**: Workflows updated from npm to pnpm, resolving dependency conflicts
-- **Optimized Build**: Faster and more reliable pipeline
 
----
+```tsx- **Optimized Build**: Faster and more reliable pipeline
 
-## 📖 Basic Usage
+// v0.4.x - still works
 
-Wrap your app with `ConsentProvider` (minimal example):
+import { ConsentProvider, useConsent } from 'react-lgpd-consent'---
+
+
+
+// v0.5.0 - same API, same components## 📖 Basic Usage
+
+import { ConsentProvider, useConsent } from 'react-lgpd-consent'
+
+```Wrap your app with `ConsentProvider` (minimal example):
+
+
+
+**If you want to optimize bundle size:**```tsx
 
-```tsx
 import { ConsentProvider } from 'react-lgpd-consent'
 
-export default function App() {
-  return (
+```tsx
+
+// Option 1: Core (headless) + your own UI (~86 KB)export default function App() {
+
+import { ConsentProvider } from '@react-lgpd-consent/core'  return (
+
     <ConsentProvider categories={{ enabledCategories: ['analytics'] }}>
-      <YourApp />
-    </ConsentProvider>
+
+// Option 2: MUI with ready components (~104 KB)      <YourApp />
+
+import { ConsentProvider } from '@react-lgpd-consent/mui'    </ConsentProvider>
+
   )
-}
+
+// Option 3: Aggregator (compatibility) (~104 KB)}
+
+import { ConsentProvider } from 'react-lgpd-consent' // This package```
+
 ```
 
 - For full guides, TypeScript examples, props table and integrations see:
--
+
+----
+
 - **[QUICKSTART.en.md](./QUICKSTART.en.md)** (recommended)
-  - New in v0.4.0: `customCategories` support — see the “Custom categories (customCategories)” section in the Quickstart.
+
+## 🚀 Installation  - New in v0.4.0: `customCategories` support — see the “Custom categories (customCategories)” section in the Quickstart.
+
   - New in v0.4.1: native integrations for Facebook Pixel, Hotjar, Mixpanel, Clarity, Intercom, and Zendesk — see [INTEGRACOES.md](./INTEGRACOES.md).
-  - Tip: set `designTokens.layout.backdrop: 'auto'` for a theme-aware blocking banner backdrop.
-  - Auto-config of categories: the library detects required categories from integrations and surfaces toggles even if you forgot to enable them (initial value is always rejected). We still recommend explicitly listing them in `categories.enabledCategories` for clarity.
-  - Non-blocked Policy/Terms pages: if `policyLinkUrl` and/or `termsLinkUrl` point to the current page, the blocking overlay is not applied — ensuring readability of these pages.
+
+```bash  - Tip: set `designTokens.layout.backdrop: 'auto'` for a theme-aware blocking banner backdrop.
+
+npm install react-lgpd-consent  - Auto-config of categories: the library detects required categories from integrations and surfaces toggles even if you forgot to enable them (initial value is always rejected). We still recommend explicitly listing them in `categories.enabledCategories` for clarity.
+
+```  - Non-blocked Policy/Terms pages: if `policyLinkUrl` and/or `termsLinkUrl` point to the current page, the blocking overlay is not applied — ensuring readability of these pages.
+
 - **[Docs / API](./API.md)**
-- **[LGPD Compliance](./CONFORMIDADE.md)**
+
+### Peer Dependencies (auto-installed if not present)- **[LGPD Compliance](./CONFORMIDADE.md)**
+
 - **[Integrations](./INTEGRACOES.md)**
 
-### 🎨 Interactive Documentation (GitHub Pages)
-- **[📖 Storybook - Interactive Playground](https://lucianoedipo.github.io/react-lgpd-consent/storybook/)**: Explore and test all components live with interactive controls.
+```bash
+
+npm install react react-dom @mui/material @emotion/react @emotion/styled### 🎨 Interactive Documentation (GitHub Pages)
+
+```- **[📖 Storybook - Interactive Playground](https://lucianoedipo.github.io/react-lgpd-consent/storybook/)**: Explore and test all components live with interactive controls.
+
 - **[⚙️ TypeDoc - API Reference](https://lucianoedipo.github.io/react-lgpd-consent/docs/)**: Automatically generated complete API documentation.
-- **[🏠 Documentation Portal](https://lucianoedipo.github.io/react-lgpd-consent/)**: Home page that navigates between all docs sites.
 
-### 🧑‍🏫 Developer Guidance (dev-only)
+---- **[🏠 Documentation Portal](https://lucianoedipo.github.io/react-lgpd-consent/)**: Home page that navigates between all docs sites.
+
+
+
+## ⚡ Quick Start### 🧑‍🏫 Developer Guidance (dev-only)
+
+
+
+### Basic Setup (3 lines of code)In development, the library prints a guidance panel in the console to help you configure correctly:
 
-In development, the library prints a guidance panel in the console to help you configure correctly:
 - Warns when using default categories; suggests making them explicit
-- Lists active categories and which ones require a UI toggle
-- Detects integrations that require categories and suggests enabling them
+
+```tsx- Lists active categories and which ones require a UI toggle
+
+import { ConsentProvider } from 'react-lgpd-consent'- Detects integrations that require categories and suggests enabling them
+
 - Flags excessive number of categories (UX)
-- Highlights Brazilian LGPD best practices: opt-out by default, clear policy, consent logging, retention
-- Silenced in production; SSR-safe
 
-### ⚠️ Breaking Changes v0.4.1
-- **Custom categories support**: `setPreference` and `ScriptIntegration.category` now use `string` instead of `Category`
-- **Minimal impact**: Code using literal strings continues working without changes
-- **Migration guide**: See [CHANGELOG.md](./CHANGELOG.md) for complete details
+export default function App() {- Highlights Brazilian LGPD best practices: opt-out by default, clear policy, consent logging, retention
+
+  return (- Silenced in production; SSR-safe
+
+    <ConsentProvider categories={{ enabledCategories: ['analytics', 'marketing'] }}>
+
+      <YourApp />### ⚠️ Breaking Changes v0.4.1
+
+    </ConsentProvider>- **Custom categories support**: `setPreference` and `ScriptIntegration.category` now use `string` instead of `Category`
+
+  )- **Minimal impact**: Code using literal strings continues working without changes
+
+}- **Migration guide**: See [CHANGELOG.md](./CHANGELOG.md) for complete details
+
+```
+
+---
+
+**This already includes:**
+
+- ✅ Cookie banner## 🤝 Contributing
+
+- ✅ Preferences modal
+
+- ✅ Floating button to reopen preferences1. Open an Issue for bugs or feature requests.
+
+- ✅ Cookie persistence2. Follow `DEVELOPMENT.md` to submit a PR.
+
+- ✅ SSR-safe (Next.js, Remix)
+
+---
+
+### Access Consent State
+
+## 📄 License
+
+```tsx
+
+import { useConsent } from 'react-lgpd-consent'MIT — see the `LICENSE` file.
+
+
+function MyComponent() {
+  const { preferences, acceptCategory, rejectCategory } = useConsent()
+
+  if (preferences.analytics) {
+    // Analytics is allowed, load scripts
+  }
+
+  return (
+    <button onClick={() => acceptCategory('marketing')}>
+      Accept Marketing
+    </button>
+  )
+}
+```
+
+### Load Scripts Based on Consent
+
+```tsx
+import { ConsentScriptLoader } from 'react-lgpd-consent'
+
+function Analytics() {
+  return (
+    <ConsentScriptLoader
+      category="analytics"
+      src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
+      strategy="afterInteractive"
+    >
+      {`
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', 'GA_MEASUREMENT_ID');
+      `}
+    </ConsentScriptLoader>
+  )
+}
+```
+
+---
+
+## 🎨 Customization
+
+### Material-UI Theme
+
+```tsx
+import { ConsentProvider, createDefaultConsentTheme } from 'react-lgpd-consent'
+
+<ConsentProvider
+  theme={createDefaultConsentTheme({
+    palette: {
+      primary: { main: '#your-brand-color' }
+    }
+  })}
+  categories={{ enabledCategories: ['analytics'] }}
+>
+  <App />
+</ConsentProvider>
+```
+
+### Disable Default Components
+
+```tsx
+import { ConsentProvider, CookieBanner, PreferencesModal } from 'react-lgpd-consent'
+
+<ConsentProvider
+  categories={{ enabledCategories: ['analytics'] }}
+  disableDefaultBanner
+  disableDefaultModal
+>
+  {/* Use your own components */}
+  <CookieBanner position="bottom-left" />
+  <PreferencesModal showBranding={false} />
+  <App />
+</ConsentProvider>
+```
+
+### Advanced Design Tokens
+
+```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>
+```
+
+---
+
+## 📚 Documentation
+
+### 📖 Complete Guides (GitHub)
+
+- [**📚 Quickstart**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/QUICKSTART.en.md): Step-by-step tutorial with TypeScript examples
+- [**🏗️ API Reference**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/API.md): Complete reference for components, hooks, and types
+- [**⚖️ LGPD Compliance**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CONFORMIDADE.md): Details about compliance and auditing
+- [**🔌 Integrations**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md): Google Analytics, GTM, Facebook Pixel, Hotjar, etc.
+- [**🏛️ Architecture**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/ARCHITECTURE.md): Monorepo architecture details for v0.5.0
+- [**📝 Changelog**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/CHANGELOG.md): Complete version history
+
+### 🎨 Interactive Documentation (GitHub Pages)
+
+- [**🎭 Storybook - Interactive Playground**](https://lucianoedipo.github.io/react-lgpd-consent/storybook/): Explore and test all components in real-time
+- [**⚙️ TypeDoc - API Docs**](https://lucianoedipo.github.io/react-lgpd-consent/docs/): Auto-generated API documentation
+- [**🏠 Documentation Portal**](https://lucianoedipo.github.io/react-lgpd-consent/): Central navigation for all docs
+
+---
+
+## 🔌 Native Integrations
+
+The library includes ready-to-use integrations for:
+
+- ✅ **Google Analytics 4** (GA4)
+- ✅ **Google Tag Manager** (GTM)
+- ✅ **Facebook Pixel**
+- ✅ **Hotjar**
+- ✅ **Microsoft Clarity**
+- ✅ **Mixpanel**
+- ✅ **Intercom**
+- ✅ **Zendesk**
+- ✅ **UserWay** (Accessibility)
+
+```tsx
+import { ConsentScriptLoader, createGoogleAnalyticsIntegration } from 'react-lgpd-consent'
+
+<ConsentScriptLoader integration={createGoogleAnalyticsIntegration('GA_ID')} />
+```
+
+[**See complete integrations guide →**](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/INTEGRACOES.md)
+
+---
+
+## 🧩 Package Ecosystem
+
+```
+react-lgpd-consent (this package - aggregator)
+├── @react-lgpd-consent/core      # Headless (86 KB)
+└── @react-lgpd-consent/mui       # MUI Components (104 KB)
+```
+
+### When to use each package?
+
+| Scenario | Recommended Package |
+|----------|---------------------|
+| **Migration from v0.4.x** | `react-lgpd-consent` (this) |
+| **Complete custom UI** | `@react-lgpd-consent/core` |
+| **Ready MUI components** | `@react-lgpd-consent/mui` |
+| **New project with MUI** | `@react-lgpd-consent/mui` |
+| **Optimized bundle** | `@react-lgpd-consent/core` |
+
+---
+
+## 🌟 Features
+
+- ✅ **TypeScript First**: Complete types and automatic inference
+- ✅ **SSR-Safe**: Compatible with Next.js (App Router + Pages Router), Remix
+- ✅ **Zero Config**: Works out-of-the-box with sensible defaults
+- ✅ **Accessible**: WCAG 2.1 AA compliance, keyboard navigation, screen readers
+- ✅ **Responsive**: Mobile-first design with adaptive breakpoints
+- ✅ **Tree-shakeable**: Import only what you use
+- ✅ **Themes**: Light/Dark/Auto with smooth transitions
+- ✅ **i18n**: Multi-language support (pt-BR, en, es)
+- ✅ **Auditable**: Developer logs and DataLayer events for GTM
 
 ---
 
 ## 🤝 Contributing
 
-1. Open an Issue for bugs or feature requests.
-2. Follow `DEVELOPMENT.md` to submit a PR.
+Contributions are welcome! See the [Development Guide](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/DEVELOPMENT.md).
+
+1. Fork the repository
+2. Create a branch: `git checkout -b feature/my-feature`
+3. Commit: `git commit -m 'feat: my new feature'`
+4. Push: `git push origin feature/my-feature`
+5. Open a Pull Request
 
 ---
 
 ## 📄 License
 
-MIT — see the `LICENSE` file.
+MIT © [Luciano Edipo](https://github.com/lucianoedipo)
+
+---
+
+## 🔗 Useful Links
+
+- [**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>Made with ❤️ for the React community</sub>
+</div>