@react-lgpd-consent/mui 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 @lucianoedipo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,138 @@
+# @react-lgpd-consent/mui
+
+> Componentes Material-UI para react-lgpd-consent - UI pronta para usar
+
+[![NPM Version](https://img.shields.io/npm/v/@react-lgpd-consent/mui)](https://www.npmjs.com/package/@react-lgpd-consent/mui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+## 📦 Sobre
+
+O pacote `@react-lgpd-consent/mui` fornece **componentes visuais prontos para uso** baseados em Material-UI para a biblioteca `react-lgpd-consent`.
+
+### Ideal para:
+- ✅ Aplicações que já usam Material-UI
+- ✅ Desenvolvimento rápido com componentes prontos
+- ✅ Customização via theme do Material-UI
+- ✅ Experiência consistente com Material Design
+
+## 📥 Instalação
+
+```bash
+npm install @react-lgpd-consent/mui @mui/material @mui/icons-material
+# ou
+pnpm add @react-lgpd-consent/mui @mui/material @mui/icons-material
+```
+
+**Peer Dependencies:**
+- `@mui/material@^7.0.0 || ^6.0.0 || ^5.15.0`
+- `@mui/icons-material@^7.0.0 || ^6.0.0 || ^5.15.0` (opcional)
+- `react@^18.2.0 || ^19.0.0`, `react-dom@^18.2.0 || ^19.0.0`
+
+## 🚀 Uso Básico
+
+```tsx
+import { 
+  ConsentProvider, 
+  CookieBanner, 
+  FloatingPreferencesButton 
+} from '@react-lgpd-consent/mui'
+
+function App() {
+  return (
+    <ConsentProvider categories={{ enabledCategories: ['analytics', 'marketing'] }}>
+      <CookieBanner policyLinkUrl="/privacy-policy" />
+      <FloatingPreferencesButton />
+      {/* O PreferencesModal é injetado automaticamente! */}
+      <YourApp />
+    </ConsentProvider>
+  )
+}
+```
+
+> ✨ **Nota:** O `ConsentProvider` deste pacote automaticamente renderiza o `PreferencesModal`. Você não precisa incluí-lo manualmente!
+
+### Customizando o Modal de Preferências
+
+```tsx
+import { ConsentProvider, PreferencesModal } from '@react-lgpd-consent/mui'
+
+function App() {
+  return (
+    <ConsentProvider
+      categories={{ enabledCategories: ['analytics'] }}
+      PreferencesModalComponent={(props) => (
+        <PreferencesModal {...props} hideBranding={true} />
+      )}
+    >
+      <YourApp />
+    </ConsentProvider>
+  )
+}
+```
+
+### Uso Headless (Avançado)
+
+Se você quiser controle total sobre a UI:
+
+```tsx
+import { ConsentProviderHeadless, useConsent } from '@react-lgpd-consent/mui'
+
+function App() {
+  return (
+    <ConsentProviderHeadless categories={{ enabledCategories: ['analytics'] }}>
+      <CustomUI />
+    </ConsentProviderHeadless>
+  )
+}
+
+function CustomUI() {
+  const { acceptAll, rejectAll } = useConsent()
+  return (
+    <div>
+      <button onClick={acceptAll}>Aceitar</button>
+      <button onClick={rejectAll}>Rejeitar</button>
+    </div>
+  )
+}
+```
+
+## 🎯 Componentes Incluídos
+
+- **`CookieBanner`** - Banner de consentimento (modal ou snackbar)
+- **`PreferencesModal`** - Modal de preferências detalhadas
+- **`FloatingPreferencesButton`** - Botão flutuante para reabrir preferências
+- **`Branding`** - Componente de marca/logo customizável
+
+**Nota:** Este pacote **re-exporta todo o `@react-lgpd-consent/core`**, então você tem acesso a todos os hooks, contextos, utilitários e tipos.
+
+## 🎨 Customização
+
+```tsx
+<CookieBanner
+  blocking={true}
+  policyLinkUrl="/privacy"
+  SnackbarProps={{ anchorOrigin: { vertical: 'top', horizontal: 'center' } }}
+/>
+
+<FloatingPreferencesButton
+  position="bottom-right"
+  offset={24}
+  icon={<CustomIcon />}
+/>
+```
+
+## 📚 Documentação
+
+- [Documentação Principal](https://lucianoedipo.github.io/react-lgpd-consent/)
+- [Storybook (Componentes Interativos)](https://lucianoedipo.github.io/react-lgpd-consent/storybook/)
+- [Guia de Início Rápido](../../QUICKSTART.md)
+
+## 🔗 Pacotes Relacionados
+
+- [`@react-lgpd-consent/core`](../core) - Núcleo sem dependências de UI
+- [`react-lgpd-consent`](../react-lgpd-consent) - Pacote agregador (core + mui)
+
+## 📄 Licença
+
+MIT © [Luciano Édipo](https://github.com/lucianoedipo)
+