react-lgpd-consent 0.1.2 → 0.1.4

package/COMPLIANCE.md

@@ -0,0 +1,177 @@
+# COMPLIANCE.md - react-lgpd-consent
+
+## 📜 Objetivo
+
+Este documento descreve as medidas de conformidade da biblioteca **react-lgpd-consent** com a Lei Geral de Proteção de Dados (LGPD) e o Guia Orientativo da ANPD sobre Cookies e Proteção de Dados Pessoais.
+
+## ✅ Conformidade Atual (MVP v0.1.x)
+
+### Implementado e Funcional
+
+- ✅ **Consentimento granular**: categorias `analytics` e `marketing` independentes
+- ✅ **Sem pre-check**: cookies não essenciais desativados por padrão
+- ✅ **Revogação e reconfiguração**: funções `resetConsent()` e `openPreferences()`
+- ✅ **Banner não intrusivo**: não bloqueia navegação do usuário
+- ✅ **Suporte SSR**: via prop `initialState` (evita flash)
+- ✅ **Acessibilidade**: foco gerenciado, navegação por teclado, ARIA adequado
+- ✅ **API estável**: identificadores em inglês, textos em pt-BR customizáveis
+- ✅ **Segurança básica**: `SameSite=Lax`, `secure=true`, validação de cookies
+
+## 🚀 Roadmap de Desenvolvimento
+
+### v0.2.0 - Adequação ANPD (Próxima Release)
+
+**Foco**: Baixo atrito, 100% backward-compatible, adequação básica ANPD
+
+#### ✅ Implementar (Pronto para MVP)
+
+- [ ] **Textos ANPD expandidos**: Campos opcionais em `ConsentTexts`
+
+  ```typescript
+  interface ConsentTexts {
+    // Existentes (manter)
+    bannerMessage: string
+    acceptAll: string
+    declineAll: string
+
+    // NOVOS - opcionais
+    controllerInfo?: string // "Controlado por [Empresa/CNPJ]"
+    dataTypes?: string // "Coletamos dados de navegação..."
+    thirdPartySharing?: string // "Compartilhamos com terceiros..."
+    userRights?: string // "Seus direitos: acesso, correção..."
+    contactInfo?: string // "Contato: dpo@empresa.com"
+  }
+  ```
+
+- [ ] **Link de política visível**: Garantir `policyLinkUrl` destacado
+- [ ] **Validação robusta de cookies**: Sanitização e versioning
+- [ ] **Defaults de segurança**: Documentar configurações recomendadas
+- [ ] **Testes de acessibilidade**: Validação com axe/Lighthouse
+
+#### 📋 Critérios de Aceite v0.2.0
+
+- [ ] Textos opcionais exibidos condicionalmente
+- [ ] Cookie com `version` para migrações futuras
+- [ ] Validação que ignora cookies malformados
+- [ ] Documentação de segurança atualizada
+- [ ] 100% backward compatible (sem breaking changes)
+
+### v0.3.0 - Compliance Operacional
+
+**Foco**: Estruturas avançadas, transparência total
+
+#### 🏗️ Funcionalidades Principais
+
+- [ ] **Modal detalhado de cookies**: Catálogo completo
+
+  ```typescript
+  interface CookieDetails {
+    name: string
+    purpose: string
+    duration: string
+    thirdParty?: string
+    transferCountries?: string[]
+  }
+
+  interface CookieRegistry {
+    [K in Category]: {
+      description: string
+      cookies: CookieDetails[]
+      required: boolean
+    }
+  }
+  ```
+
+- [ ] **Logs de consentimento**: Registro client-side
+
+  ```typescript
+  interface ConsentLog {
+    timestamp: Date
+    action: 'given' | 'revoked' | 'modified'
+    categories: ConsentPreferences
+    userAgent: string
+  }
+  ```
+
+- [ ] **Base legal por categoria**: `consent` | `legitimate_interest`
+- [ ] **Callbacks expandidos**: Eventos de auditoria
+
+### v0.4.0 - Auditoria e Relatórios
+
+**Foco**: Ferramentas de compliance para DPO
+
+#### 📊 Funcionalidades Avançadas
+
+- [ ] **Relatórios de compliance**: `generateComplianceReport()`
+- [ ] **Templates por setor**: E-commerce, mídia, educação, etc.
+- [ ] **Exportação para DPO**: Dados estruturados para auditoria
+- [ ] **Categorias dinâmicas**: Configurável via props (opcional)
+- [ ] **Assinatura de cookies**: Integridade opcional
+
+## 🎯 Controle de Progresso
+
+### Marcos de Entrega
+
+#### v0.2.0 - MVP Completo ⏳
+
+- **Target**: 2 semanas
+- **Status**: Em desenvolvimento
+- **Bloqueadores**: -
+- **Próximos passos**: Expandir `ConsentTexts`
+
+#### v0.3.0 - Compliance Avançado 📋
+
+- **Target**: 6-8 semanas
+- **Status**: Planejamento
+- **Dependências**: v0.2.0 completa
+- **Próximos passos**: Design do `CookieRegistry`
+
+#### v0.4.0 - Ferramentas DPO 📊
+
+- **Target**: 12 semanas
+- **Status**: Roadmap
+- **Dependências**: v0.3.0 + feedback de usuários
+- **Próximos passos**: Pesquisa com DPOs
+
+## 🔒 Segurança e Privacidade
+
+### Implementado
+
+- ✅ Armazenamento client-side via `js-cookie`
+- ✅ `SameSite=Lax`, `secure=true` em HTTPS
+- ✅ Sem coleta antes do consentimento
+- ✅ Validação básica de entrada
+
+### Planejado
+
+- 🔄 **v0.2**: Sanitização robusta + versioning
+- 🔄 **v0.3**: Logs estruturados
+- 🔄 **v0.4**: Assinatura opcional de cookies
+
+## 📈 Métricas de Sucesso
+
+### MVP (v0.2.0)
+
+- [ ] 0 breaking changes
+- [ ] Cobertura de testes > 90%
+- [ ] Lighthouse Accessibility = 100
+- [ ] Bundle size < 50KB
+
+### Adoção (v0.3.0)
+
+- [ ] 5+ projetos usando em produção
+- [ ] Feedback de DPO/compliance
+- [ ] Documentação de casos de uso
+
+### Maturidade (v0.4.0)
+
+- [ ] Template de compliance por setor
+- [ ] Integração com ferramentas de auditoria
+- [ ] Casos de sucesso documentados
+
+## 📚 Referências e Padrões
+
+- [Lei 13.709/2018 - LGPD](https://www.planalto.gov.br/ccivil_03/_ato2015-2018/2018/lei/l13709.htm)
+- [Guia ANPD - Cookies e Proteção de Dados](https://www.gov.br/anpd/pt-br/documentos-e-publicacoes/guia-orientativo-cookies-e-protecao-de-dados-pessoais.pdf)
+- [GDPR Recital 32](https://gdpr-info.eu/recitals/no-32/) - Consentimento
+- [ePrivacy Directive](https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX%3A32002L0058) - Cookies

package/README.md

@@ -20,6 +20,9 @@ Solução moderna, acessível e personalizável para gerenciar consentimento de
 - 🚀 **TypeScript**: API completamente tipada para melhor DX
 - 📦 **Zero Config**: Funciona out-of-the-box com configurações sensatas
 - 🎯 **Granular Control**: Controle individual de categorias (analytics, marketing, etc.)
+- 🚫 **Banner Bloqueante**: Modo opcional para exigir interação antes de continuar
+- 🎨 **Sistema de Temas**: Temas customizáveis para integração visual perfeita
+- ⚡ **Carregamento Condicional**: Scripts só executam após consentimento explícito
 
 ## 🚀 Instalação
 
@@ -62,7 +65,10 @@ function Layout() {
   return (
     <>
       <YourContent />
-      <CookieBanner policyLinkUrl="/politica-privacidade" />
+      <CookieBanner
+        policyLinkUrl="/politica-privacidade"
+        blocking={true} // Padrão: bloqueia até decisão
+      />
     </>
   )
 }
@@ -89,7 +95,7 @@ function MyComponent() {
 ### 4. Carregamento Condicional de Scripts
 
 ```tsx
-import { ConsentGate, loadScript } from 'react-lgpd-consent'
+import { ConsentGate, loadConditionalScript } from 'react-lgpd-consent'
 
 function Analytics() {
   return (
@@ -99,20 +105,55 @@ function Analytics() {
   )
 }
 
-// Ou carregando scripts dinamicamente
+// Ou carregando scripts que aguardam consentimento
 function MyComponent() {
-  const { preferences } = useConsent()
+  const { preferences, consented } = useConsent()
 
   useEffect(() => {
-    if (preferences.analytics) {
-      loadScript('ga', 'https://www.googletagmanager.com/gtag/js?id=GA_ID')
+    if (consented && preferences.analytics) {
+      loadConditionalScript(
+        'ga',
+        'https://www.googletagmanager.com/gtag/js?id=GA_ID',
+        () => preferences.analytics, // Condição que aguarda
+      )
     }
-  }, [preferences.analytics])
+  }, [preferences, consented])
 }
 ```
 
 ## 🎨 Customização
 
+### Banner Bloqueante vs Não-bloqueante
+
+```tsx
+// Banner bloqueante (padrão) - impede interação até decisão
+<CookieBanner blocking={true} />
+
+// Banner não-intrusivo - permite navegação
+<CookieBanner blocking={false} />
+```
+
+### Tema Personalizado
+
+```tsx
+import { ConsentProvider, defaultConsentTheme } from 'react-lgpd-consent'
+import { createTheme } from '@mui/material/styles'
+
+const meuTema = createTheme({
+  ...defaultConsentTheme,
+  palette: {
+    ...defaultConsentTheme.palette,
+    primary: {
+      main: '#1976d2', // Sua cor principal
+    },
+  },
+})
+
+<ConsentProvider theme={meuTema}>
+  <App />
+</ConsentProvider>
+```
+
 ### Textos Personalizados
 
 ```tsx
@@ -152,16 +193,90 @@ function MyComponent() {
 >
 ```
 
-## 🔧 API Completa
+## � Banner Bloqueante
+
+Para cenários onde é necessário bloquear o acesso até obter consentimento explícito:
+
+```tsx
+<CookieBanner blocking />
+```
+
+Com `blocking={true}`, o banner:
+
+- Cria um overlay escuro sobre todo o conteúdo
+- Impede interação com o resto da página
+- É útil para casos críticos onde consentimento é obrigatório
+
+## 🎨 Sistema de Temas
+
+### Tema Personalizado
+
+```tsx
+import { createTheme } from '@mui/material/styles'
+
+const meuTema = createTheme({
+  palette: {
+    primary: { main: '#2196f3' },
+    secondary: { main: '#f50057' },
+  },
+})
+
+<ConsentProvider theme={meuTema}>
+  <App />
+</ConsentProvider>
+```
+
+### Tema Padrão
+
+O tema padrão do react-lgpd-consent está disponível para customização:
+
+```tsx
+import { defaultConsentTheme } from 'react-lgpd-consent'
+
+const temaCustomizado = createTheme({
+  ...defaultConsentTheme,
+  palette: {
+    ...defaultConsentTheme.palette,
+    primary: { main: '#your-color' },
+  },
+})
+```
+
+## ⚡ Carregamento Condicional
+
+### Função loadConditionalScript
+
+Para scripts que devem aguardar consentimento específico:
+
+```tsx
+import { loadConditionalScript } from 'react-lgpd-consent'
+
+// Carrega script apenas quando analytics for aceito
+await loadConditionalScript(
+  'gtag',
+  'https://www.googletagmanager.com/gtag/js?id=GA_ID',
+  () => preferences.analytics,
+  { timeout: 10000 }, // timeout opcional
+)
+```
+
+### Parâmetros
+
+- `id`: Identificador único para o script
+- `src`: URL do script a ser carregado
+- `condition`: Função que retorna boolean indicando se deve carregar
+- `options`: Configurações opcionais (timeout, etc.)
+
+## �🔧 API Completa
 
 ### Components
 
-| Componente         | Descrição                              | Props Principais                                 |
-| ------------------ | -------------------------------------- | ------------------------------------------------ |
-| `ConsentProvider`  | Provider principal do contexto         | `initialState`, `texts`, `cookie`, callbacks     |
-| `CookieBanner`     | Banner de consentimento                | `policyLinkUrl`, `debug`, pass-through MUI props |
-| `PreferencesModal` | Modal de preferências detalhadas       | `DialogProps` (MUI pass-through)                 |
-| `ConsentGate`      | Renderização condicional por categoria | `category`, `children`                           |
+| Componente         | Descrição                              | Props Principais                                             |
+| ------------------ | -------------------------------------- | ------------------------------------------------------------ |
+| `ConsentProvider`  | Provider principal do contexto         | `initialState`, `texts`, `theme`, `cookie`, callbacks        |
+| `CookieBanner`     | Banner de consentimento                | `policyLinkUrl`, `blocking`, `debug`, pass-through MUI props |
+| `PreferencesModal` | Modal de preferências detalhadas       | `DialogProps` (MUI pass-through)                             |
+| `ConsentGate`      | Renderização condicional por categoria | `category`, `children`                                       |
 
 ### Hook `useConsent()`
 
@@ -169,6 +284,7 @@ function MyComponent() {
 interface ConsentContextValue {
   consented: boolean // usuário já consentiu?
   preferences: ConsentPreferences // preferências atuais
+  isModalOpen: boolean // estado do modal de preferências
   acceptAll(): void // aceitar todas as categorias
   rejectAll(): void // recusar opcionais
   setPreference(cat: Category, value: boolean): void // definir categoria específica
@@ -178,9 +294,19 @@ interface ConsentContextValue {
 }
 ```
 
+### Hook `useConsentTexts()`
+
+```typescript
+// Acesso aos textos contextuais
+const texts = useConsentTexts()
+console.log(texts.banner.title) // "Política de Cookies"
+```
+
 ### Utilitários
 
 - `loadScript(id, src, attrs?)` - Carrega scripts dinamicamente
+- `loadConditionalScript(id, src, condition, options?)` - Carrega scripts condicionalmente
+- `defaultConsentTheme` - Tema padrão do Material-UI
 - Tipos TypeScript completos exportados
 
 ## 🌐 SSR / Next.js

package/dist/index.cjs

@@ -34,6 +34,8 @@ __export(index_exports, {
   ConsentProvider: () => ConsentProvider,
   CookieBanner: () => CookieBanner,
   PreferencesModal: () => PreferencesModal,
+  defaultConsentTheme: () => defaultConsentTheme,
+  loadConditionalScript: () => loadConditionalScript,
   loadScript: () => loadScript,
   useConsent: () => useConsent,
   useConsentTexts: () => useConsentTexts
@@ -42,6 +44,7 @@ module.exports = __toCommonJS(index_exports);
 
 // src/components/CookieBanner.tsx
 var import_Button = __toESM(require("@mui/material/Button"), 1);
+var import_Box = __toESM(require("@mui/material/Box"), 1);
 var import_Link = __toESM(require("@mui/material/Link"), 1);
 var import_Paper = __toESM(require("@mui/material/Paper"), 1);
 var import_Snackbar = __toESM(require("@mui/material/Snackbar"), 1);
@@ -50,6 +53,7 @@ var import_Typography = __toESM(require("@mui/material/Typography"), 1);
 
 // src/context/ConsentContext.tsx
 var React = __toESM(require("react"), 1);
+var import_styles2 = require("@mui/material/styles");
 
 // src/utils/cookieUtils.ts
 var import_js_cookie = __toESM(require("js-cookie"), 1);
@@ -86,6 +90,77 @@ function removeConsentCookie(opts) {
   import_js_cookie.default.remove(o.name, { path: o.path });
 }
 
+// src/utils/theme.ts
+var import_styles = require("@mui/material/styles");
+var defaultConsentTheme = (0, import_styles.createTheme)({
+  palette: {
+    primary: {
+      main: "#1976d2",
+      // Azul institucional
+      contrastText: "#ffffff"
+    },
+    secondary: {
+      main: "#dc004e",
+      // Rosa/vermelho para ações importantes
+      contrastText: "#ffffff"
+    },
+    background: {
+      default: "#fafafa",
+      paper: "#ffffff"
+    },
+    text: {
+      primary: "#333333",
+      secondary: "#666666"
+    },
+    action: {
+      hover: "rgba(25, 118, 210, 0.04)"
+    }
+  },
+  typography: {
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    body2: {
+      fontSize: "0.875rem",
+      lineHeight: 1.43
+    },
+    button: {
+      fontWeight: 500,
+      textTransform: "none"
+      // Manter capitalização original
+    }
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          paddingX: 16,
+          paddingY: 8
+        },
+        contained: {
+          boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+          "&:hover": {
+            boxShadow: "0 4px 8px rgba(0,0,0,0.15)"
+          }
+        }
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          borderRadius: 12
+        }
+      }
+    },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          borderRadius: 16
+        }
+      }
+    }
+  }
+});
+
 // src/context/ConsentContext.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var DEFAULT_PREFERENCES = {
@@ -148,6 +223,7 @@ var TextsCtx = React.createContext(DEFAULT_TEXTS);
 function ConsentProvider({
   initialState,
   texts: textsProp,
+  theme,
   onConsentGiven,
   onPreferencesSaved,
   cookie: cookieOpts,
@@ -161,6 +237,10 @@ function ConsentProvider({
     () => ({ ...DEFAULT_COOKIE_OPTS, ...cookieOpts ?? {} }),
     [cookieOpts]
   );
+  const appliedTheme = React.useMemo(
+    () => theme || defaultConsentTheme,
+    [theme]
+  );
   const boot = React.useMemo(() => {
     if (initialState) return { ...initialState, isModalOpen: false };
     const saved = readConsentCookie(cookie.name);
@@ -176,14 +256,15 @@ function ConsentProvider({
   }, [state, cookie]);
   const prevConsented = React.useRef(state.consented);
   React.useEffect(() => {
-    if (!prevConsented.current && state.consented && onConsentGiven)
-      onConsentGiven(state);
+    if (!prevConsented.current && state.consented && onConsentGiven) {
+      setTimeout(() => onConsentGiven(state), 150);
+    }
     prevConsented.current = state.consented;
   }, [state, onConsentGiven]);
   const prevPrefs = React.useRef(state.preferences);
   React.useEffect(() => {
     if (state.consented && onPreferencesSaved && prevPrefs.current !== state.preferences) {
-      onPreferencesSaved(state.preferences);
+      setTimeout(() => onPreferencesSaved(state.preferences), 150);
       prevPrefs.current = state.preferences;
     }
   }, [state, onPreferencesSaved]);
@@ -208,7 +289,7 @@ function ConsentProvider({
       resetConsent
     };
   }, [state, cookie]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StateCtx.Provider, { value: state, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsCtx.Provider, { value: api, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextsCtx.Provider, { value: texts, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles2.ThemeProvider, { theme: appliedTheme, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StateCtx.Provider, { value: state, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionsCtx.Provider, { value: api, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextsCtx.Provider, { value: texts, children }) }) }) });
 }
 function useConsentStateInternal() {
   const ctx = React.useContext(StateCtx);
@@ -234,6 +315,7 @@ function useConsent() {
   return {
     consented: state.consented,
     preferences: state.preferences,
+    isModalOpen: state.isModalOpen,
     acceptAll: actions.acceptAll,
     rejectAll: actions.rejectAll,
     setPreference: actions.setPreference,
@@ -251,6 +333,8 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 function CookieBanner({
   policyLinkUrl,
   debug,
+  blocking = true,
+  // Por padrão, bloqueia até decisão
   SnackbarProps,
   PaperProps
 }) {
@@ -258,49 +342,72 @@ function CookieBanner({
   const texts = useConsentTexts();
   const open = debug ? true : !consented;
   if (!open) return null;
+  const bannerContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_Paper.default,
+    {
+      elevation: 3,
+      sx: { p: 2, maxWidth: 720, mx: "auto" },
+      ...PaperProps,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_Stack.default, { spacing: 1, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_Typography.default, { variant: "body2", children: [
+          texts.bannerMessage,
+          " ",
+          policyLinkUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_Link.default,
+            {
+              href: policyLinkUrl,
+              underline: "hover",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: texts.policyLink ?? "Saiba mais"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+          import_Stack.default,
+          {
+            direction: { xs: "column", sm: "row" },
+            spacing: 1,
+            justifyContent: "flex-end",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Button.default, { variant: "outlined", onClick: rejectAll, children: texts.declineAll }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Button.default, { variant: "contained", onClick: acceptAll, children: texts.acceptAll }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Button.default, { variant: "text", onClick: openPreferences, children: texts.preferences })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+  if (blocking) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      import_Box.default,
+      {
+        sx: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 1300,
+          // Above MUI Modal
+          p: 2
+        },
+        children: bannerContent
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_Snackbar.default,
     {
       open,
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       ...SnackbarProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_Paper.default,
-        {
-          elevation: 3,
-          sx: { p: 2, maxWidth: 720, mx: "auto" },
-          ...PaperProps,
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_Stack.default, { spacing: 1, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_Typography.default, { variant: "body2", children: [
-              texts.bannerMessage,
-              " ",
-              policyLinkUrl && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-                import_Link.default,
-                {
-                  href: policyLinkUrl,
-                  underline: "hover",
-                  target: "_blank",
-                  rel: "noopener noreferrer",
-                  children: texts.policyLink ?? "Saiba mais"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-              import_Stack.default,
-              {
-                direction: { xs: "column", sm: "row" },
-                spacing: 1,
-                justifyContent: "flex-end",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Button.default, { variant: "outlined", onClick: rejectAll, children: texts.declineAll }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Button.default, { variant: "contained", onClick: acceptAll, children: texts.acceptAll }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_Button.default, { variant: "text", onClick: openPreferences, children: texts.preferences })
-                ]
-              }
-            )
-          ] })
-        }
-      )
+      children: bannerContent
     }
   );
 }
@@ -319,9 +426,9 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 function PreferencesModal({
   DialogProps: DialogProps2
 }) {
-  const { preferences, setPreference, closePreferences } = useConsent();
+  const { preferences, setPreference, closePreferences, isModalOpen } = useConsent();
   const texts = useConsentTexts();
-  const open = (DialogProps2 && "open" in DialogProps2 ? DialogProps2.open : void 0) ?? true;
+  const open = DialogProps2?.open ?? isModalOpen ?? false;
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     import_Dialog.default,
     {
@@ -394,12 +501,34 @@ function loadScript(id, src, attrs = {}) {
   for (const [k, v] of Object.entries(attrs)) s.setAttribute(k, v);
   document.body.appendChild(s);
 }
+function loadConditionalScript(id, src, condition, attrs = {}, maxWaitMs = 5e3) {
+  if (typeof document === "undefined") return Promise.resolve();
+  if (document.getElementById(id)) return Promise.resolve();
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+    const checkCondition = () => {
+      if (condition()) {
+        loadScript(id, src, attrs);
+        resolve();
+      } else if (Date.now() - startTime > maxWaitMs) {
+        reject(
+          new Error(`Timeout waiting for consent condition for script ${id}`)
+        );
+      } else {
+        setTimeout(checkCondition, 100);
+      }
+    };
+    checkCondition();
+  });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ConsentGate,
   ConsentProvider,
   CookieBanner,
   PreferencesModal,
+  defaultConsentTheme,
+  loadConditionalScript,
   loadScript,
   useConsent,
   useConsentTexts

package/dist/index.d.cts

@@ -3,14 +3,17 @@ import { PaperProps } from '@mui/material/Paper';
 import { SnackbarProps } from '@mui/material/Snackbar';
 import { DialogProps } from '@mui/material/Dialog';
 import * as React$1 from 'react';
+import * as _mui_material_styles from '@mui/material/styles';
 
 interface CookieBannerProps {
     policyLinkUrl?: string;
     debug?: boolean;
+    blocking?: boolean;
     SnackbarProps?: Partial<SnackbarProps>;
     PaperProps?: Partial<PaperProps>;
 }
-declare function CookieBanner({ policyLinkUrl, debug, SnackbarProps, PaperProps, }: Readonly<CookieBannerProps>): react_jsx_runtime.JSX.Element | null;
+declare function CookieBanner({ policyLinkUrl, debug, blocking, // Por padrão, bloqueia até decisão
+SnackbarProps, PaperProps, }: Readonly<CookieBannerProps>): react_jsx_runtime.JSX.Element | null;
 
 interface PreferencesModalProps {
     DialogProps?: Partial<DialogProps>;
@@ -75,6 +78,8 @@ interface ConsentProviderProps {
     initialState?: ConsentState;
     /** Textos customizados para a interface. */
     texts?: Partial<ConsentTexts>;
+    /** Tema customizado para os componentes MUI. */
+    theme?: any;
     /** Callback chamado quando o consentimento é dado. */
     onConsentGiven?: (state: ConsentState) => void;
     /** Callback chamado ao salvar preferências. */
@@ -92,6 +97,8 @@ interface ConsentContextValue {
     consented: boolean;
     /** Preferências atuais do usuário. */
     preferences: ConsentPreferences;
+    /** Indica se o modal de preferências está aberto. */
+    isModalOpen?: boolean;
     /** Aceita todas as categorias de consentimento. */
     acceptAll: () => void;
     /** Rejeita todas as categorias de consentimento. */
@@ -106,7 +113,7 @@ interface ConsentContextValue {
     resetConsent: () => void;
 }
 
-declare function ConsentProvider({ initialState, texts: textsProp, onConsentGiven, onPreferencesSaved, cookie: cookieOpts, children, }: Readonly<ConsentProviderProps>): react_jsx_runtime.JSX.Element;
+declare function ConsentProvider({ initialState, texts: textsProp, theme, onConsentGiven, onPreferencesSaved, cookie: cookieOpts, children, }: Readonly<ConsentProviderProps>): react_jsx_runtime.JSX.Element;
 
 declare function useConsent(): ConsentContextValue;
 /**
@@ -120,6 +127,21 @@ declare function ConsentGate(props: Readonly<{
     children: React$1.ReactNode;
 }>): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * Carrega um script dinamicamente após verificação de consentimento.
+ * Recomenda-se usar com ConsentGate para melhor controle.
+ */
 declare function loadScript(id: string, src: string, attrs?: Record<string, string>): void;
+/**
+ * Carrega script condicionalmente baseado no consentimento.
+ * Aguarda o consentimento ser dado antes de executar.
+ */
+declare function loadConditionalScript(id: string, src: string, condition: () => boolean, attrs?: Record<string, string>, maxWaitMs?: number): Promise<void>;
+
+/**
+ * Tema padrão para os componentes de consentimento.
+ * Baseado no design system da ANPD/governo brasileiro.
+ */
+declare const defaultConsentTheme: _mui_material_styles.Theme;
 
-export { type Category, type ConsentCookieOptions, ConsentGate, type ConsentPreferences, ConsentProvider, type ConsentState, type ConsentTexts, CookieBanner, PreferencesModal, loadScript, useConsent, useConsentTexts };
+export { type Category, type ConsentCookieOptions, ConsentGate, type ConsentPreferences, ConsentProvider, type ConsentState, type ConsentTexts, CookieBanner, PreferencesModal, defaultConsentTheme, loadConditionalScript, loadScript, useConsent, useConsentTexts };

package/dist/index.d.ts

@@ -3,14 +3,17 @@ import { PaperProps } from '@mui/material/Paper';
 import { SnackbarProps } from '@mui/material/Snackbar';
 import { DialogProps } from '@mui/material/Dialog';
 import * as React$1 from 'react';
+import * as _mui_material_styles from '@mui/material/styles';
 
 interface CookieBannerProps {
     policyLinkUrl?: string;
     debug?: boolean;
+    blocking?: boolean;
     SnackbarProps?: Partial<SnackbarProps>;
     PaperProps?: Partial<PaperProps>;
 }
-declare function CookieBanner({ policyLinkUrl, debug, SnackbarProps, PaperProps, }: Readonly<CookieBannerProps>): react_jsx_runtime.JSX.Element | null;
+declare function CookieBanner({ policyLinkUrl, debug, blocking, // Por padrão, bloqueia até decisão
+SnackbarProps, PaperProps, }: Readonly<CookieBannerProps>): react_jsx_runtime.JSX.Element | null;
 
 interface PreferencesModalProps {
     DialogProps?: Partial<DialogProps>;
@@ -75,6 +78,8 @@ interface ConsentProviderProps {
     initialState?: ConsentState;
     /** Textos customizados para a interface. */
     texts?: Partial<ConsentTexts>;
+    /** Tema customizado para os componentes MUI. */
+    theme?: any;
     /** Callback chamado quando o consentimento é dado. */
     onConsentGiven?: (state: ConsentState) => void;
     /** Callback chamado ao salvar preferências. */
@@ -92,6 +97,8 @@ interface ConsentContextValue {
     consented: boolean;
     /** Preferências atuais do usuário. */
     preferences: ConsentPreferences;
+    /** Indica se o modal de preferências está aberto. */
+    isModalOpen?: boolean;
     /** Aceita todas as categorias de consentimento. */
     acceptAll: () => void;
     /** Rejeita todas as categorias de consentimento. */
@@ -106,7 +113,7 @@ interface ConsentContextValue {
     resetConsent: () => void;
 }
 
-declare function ConsentProvider({ initialState, texts: textsProp, onConsentGiven, onPreferencesSaved, cookie: cookieOpts, children, }: Readonly<ConsentProviderProps>): react_jsx_runtime.JSX.Element;
+declare function ConsentProvider({ initialState, texts: textsProp, theme, onConsentGiven, onPreferencesSaved, cookie: cookieOpts, children, }: Readonly<ConsentProviderProps>): react_jsx_runtime.JSX.Element;
 
 declare function useConsent(): ConsentContextValue;
 /**
@@ -120,6 +127,21 @@ declare function ConsentGate(props: Readonly<{
     children: React$1.ReactNode;
 }>): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * Carrega um script dinamicamente após verificação de consentimento.
+ * Recomenda-se usar com ConsentGate para melhor controle.
+ */
 declare function loadScript(id: string, src: string, attrs?: Record<string, string>): void;
+/**
+ * Carrega script condicionalmente baseado no consentimento.
+ * Aguarda o consentimento ser dado antes de executar.
+ */
+declare function loadConditionalScript(id: string, src: string, condition: () => boolean, attrs?: Record<string, string>, maxWaitMs?: number): Promise<void>;
+
+/**
+ * Tema padrão para os componentes de consentimento.
+ * Baseado no design system da ANPD/governo brasileiro.
+ */
+declare const defaultConsentTheme: _mui_material_styles.Theme;
 
-export { type Category, type ConsentCookieOptions, ConsentGate, type ConsentPreferences, ConsentProvider, type ConsentState, type ConsentTexts, CookieBanner, PreferencesModal, loadScript, useConsent, useConsentTexts };
+export { type Category, type ConsentCookieOptions, ConsentGate, type ConsentPreferences, ConsentProvider, type ConsentState, type ConsentTexts, CookieBanner, PreferencesModal, defaultConsentTheme, loadConditionalScript, loadScript, useConsent, useConsentTexts };

package/dist/index.js

@@ -1,5 +1,6 @@
 // src/components/CookieBanner.tsx
 import Button from "@mui/material/Button";
+import Box from "@mui/material/Box";
 import Link from "@mui/material/Link";
 import Paper from "@mui/material/Paper";
 import Snackbar from "@mui/material/Snackbar";
@@ -8,6 +9,7 @@ import Typography from "@mui/material/Typography";
 
 // src/context/ConsentContext.tsx
 import * as React from "react";
+import { ThemeProvider } from "@mui/material/styles";
 
 // src/utils/cookieUtils.ts
 import Cookies from "js-cookie";
@@ -44,6 +46,77 @@ function removeConsentCookie(opts) {
   Cookies.remove(o.name, { path: o.path });
 }
 
+// src/utils/theme.ts
+import { createTheme } from "@mui/material/styles";
+var defaultConsentTheme = createTheme({
+  palette: {
+    primary: {
+      main: "#1976d2",
+      // Azul institucional
+      contrastText: "#ffffff"
+    },
+    secondary: {
+      main: "#dc004e",
+      // Rosa/vermelho para ações importantes
+      contrastText: "#ffffff"
+    },
+    background: {
+      default: "#fafafa",
+      paper: "#ffffff"
+    },
+    text: {
+      primary: "#333333",
+      secondary: "#666666"
+    },
+    action: {
+      hover: "rgba(25, 118, 210, 0.04)"
+    }
+  },
+  typography: {
+    fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
+    body2: {
+      fontSize: "0.875rem",
+      lineHeight: 1.43
+    },
+    button: {
+      fontWeight: 500,
+      textTransform: "none"
+      // Manter capitalização original
+    }
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          borderRadius: 8,
+          paddingX: 16,
+          paddingY: 8
+        },
+        contained: {
+          boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+          "&:hover": {
+            boxShadow: "0 4px 8px rgba(0,0,0,0.15)"
+          }
+        }
+      }
+    },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          borderRadius: 12
+        }
+      }
+    },
+    MuiDialog: {
+      styleOverrides: {
+        paper: {
+          borderRadius: 16
+        }
+      }
+    }
+  }
+});
+
 // src/context/ConsentContext.tsx
 import { jsx } from "react/jsx-runtime";
 var DEFAULT_PREFERENCES = {
@@ -106,6 +179,7 @@ var TextsCtx = React.createContext(DEFAULT_TEXTS);
 function ConsentProvider({
   initialState,
   texts: textsProp,
+  theme,
   onConsentGiven,
   onPreferencesSaved,
   cookie: cookieOpts,
@@ -119,6 +193,10 @@ function ConsentProvider({
     () => ({ ...DEFAULT_COOKIE_OPTS, ...cookieOpts ?? {} }),
     [cookieOpts]
   );
+  const appliedTheme = React.useMemo(
+    () => theme || defaultConsentTheme,
+    [theme]
+  );
   const boot = React.useMemo(() => {
     if (initialState) return { ...initialState, isModalOpen: false };
     const saved = readConsentCookie(cookie.name);
@@ -134,14 +212,15 @@ function ConsentProvider({
   }, [state, cookie]);
   const prevConsented = React.useRef(state.consented);
   React.useEffect(() => {
-    if (!prevConsented.current && state.consented && onConsentGiven)
-      onConsentGiven(state);
+    if (!prevConsented.current && state.consented && onConsentGiven) {
+      setTimeout(() => onConsentGiven(state), 150);
+    }
     prevConsented.current = state.consented;
   }, [state, onConsentGiven]);
   const prevPrefs = React.useRef(state.preferences);
   React.useEffect(() => {
     if (state.consented && onPreferencesSaved && prevPrefs.current !== state.preferences) {
-      onPreferencesSaved(state.preferences);
+      setTimeout(() => onPreferencesSaved(state.preferences), 150);
       prevPrefs.current = state.preferences;
     }
   }, [state, onPreferencesSaved]);
@@ -166,7 +245,7 @@ function ConsentProvider({
       resetConsent
     };
   }, [state, cookie]);
-  return /* @__PURE__ */ jsx(StateCtx.Provider, { value: state, children: /* @__PURE__ */ jsx(ActionsCtx.Provider, { value: api, children: /* @__PURE__ */ jsx(TextsCtx.Provider, { value: texts, children }) }) });
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme: appliedTheme, children: /* @__PURE__ */ jsx(StateCtx.Provider, { value: state, children: /* @__PURE__ */ jsx(ActionsCtx.Provider, { value: api, children: /* @__PURE__ */ jsx(TextsCtx.Provider, { value: texts, children }) }) }) });
 }
 function useConsentStateInternal() {
   const ctx = React.useContext(StateCtx);
@@ -192,6 +271,7 @@ function useConsent() {
   return {
     consented: state.consented,
     preferences: state.preferences,
+    isModalOpen: state.isModalOpen,
     acceptAll: actions.acceptAll,
     rejectAll: actions.rejectAll,
     setPreference: actions.setPreference,
@@ -209,6 +289,8 @@ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function CookieBanner({
   policyLinkUrl,
   debug,
+  blocking = true,
+  // Por padrão, bloqueia até decisão
   SnackbarProps,
   PaperProps
 }) {
@@ -216,49 +298,72 @@ function CookieBanner({
   const texts = useConsentTexts();
   const open = debug ? true : !consented;
   if (!open) return null;
+  const bannerContent = /* @__PURE__ */ jsx2(
+    Paper,
+    {
+      elevation: 3,
+      sx: { p: 2, maxWidth: 720, mx: "auto" },
+      ...PaperProps,
+      children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+        /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+          texts.bannerMessage,
+          " ",
+          policyLinkUrl && /* @__PURE__ */ jsx2(
+            Link,
+            {
+              href: policyLinkUrl,
+              underline: "hover",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              children: texts.policyLink ?? "Saiba mais"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Stack,
+          {
+            direction: { xs: "column", sm: "row" },
+            spacing: 1,
+            justifyContent: "flex-end",
+            children: [
+              /* @__PURE__ */ jsx2(Button, { variant: "outlined", onClick: rejectAll, children: texts.declineAll }),
+              /* @__PURE__ */ jsx2(Button, { variant: "contained", onClick: acceptAll, children: texts.acceptAll }),
+              /* @__PURE__ */ jsx2(Button, { variant: "text", onClick: openPreferences, children: texts.preferences })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+  if (blocking) {
+    return /* @__PURE__ */ jsx2(
+      Box,
+      {
+        sx: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: 1300,
+          // Above MUI Modal
+          p: 2
+        },
+        children: bannerContent
+      }
+    );
+  }
   return /* @__PURE__ */ jsx2(
     Snackbar,
     {
       open,
       anchorOrigin: { vertical: "bottom", horizontal: "center" },
       ...SnackbarProps,
-      children: /* @__PURE__ */ jsx2(
-        Paper,
-        {
-          elevation: 3,
-          sx: { p: 2, maxWidth: 720, mx: "auto" },
-          ...PaperProps,
-          children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
-            /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
-              texts.bannerMessage,
-              " ",
-              policyLinkUrl && /* @__PURE__ */ jsx2(
-                Link,
-                {
-                  href: policyLinkUrl,
-                  underline: "hover",
-                  target: "_blank",
-                  rel: "noopener noreferrer",
-                  children: texts.policyLink ?? "Saiba mais"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxs(
-              Stack,
-              {
-                direction: { xs: "column", sm: "row" },
-                spacing: 1,
-                justifyContent: "flex-end",
-                children: [
-                  /* @__PURE__ */ jsx2(Button, { variant: "outlined", onClick: rejectAll, children: texts.declineAll }),
-                  /* @__PURE__ */ jsx2(Button, { variant: "contained", onClick: acceptAll, children: texts.acceptAll }),
-                  /* @__PURE__ */ jsx2(Button, { variant: "text", onClick: openPreferences, children: texts.preferences })
-                ]
-              }
-            )
-          ] })
-        }
-      )
+      children: bannerContent
     }
   );
 }
@@ -277,9 +382,9 @@ import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function PreferencesModal({
   DialogProps: DialogProps2
 }) {
-  const { preferences, setPreference, closePreferences } = useConsent();
+  const { preferences, setPreference, closePreferences, isModalOpen } = useConsent();
   const texts = useConsentTexts();
-  const open = (DialogProps2 && "open" in DialogProps2 ? DialogProps2.open : void 0) ?? true;
+  const open = DialogProps2?.open ?? isModalOpen ?? false;
   return /* @__PURE__ */ jsxs2(
     Dialog,
     {
@@ -352,11 +457,33 @@ function loadScript(id, src, attrs = {}) {
   for (const [k, v] of Object.entries(attrs)) s.setAttribute(k, v);
   document.body.appendChild(s);
 }
+function loadConditionalScript(id, src, condition, attrs = {}, maxWaitMs = 5e3) {
+  if (typeof document === "undefined") return Promise.resolve();
+  if (document.getElementById(id)) return Promise.resolve();
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+    const checkCondition = () => {
+      if (condition()) {
+        loadScript(id, src, attrs);
+        resolve();
+      } else if (Date.now() - startTime > maxWaitMs) {
+        reject(
+          new Error(`Timeout waiting for consent condition for script ${id}`)
+        );
+      } else {
+        setTimeout(checkCondition, 100);
+      }
+    };
+    checkCondition();
+  });
+}
 export {
   ConsentGate,
   ConsentProvider,
   CookieBanner,
   PreferencesModal,
+  defaultConsentTheme,
+  loadConditionalScript,
   loadScript,
   useConsent,
   useConsentTexts

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-lgpd-consent",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Biblioteca de consentimento de cookies (LGPD) para React e Next.js, com contexto, banner e modal personalizáveis usando MUI.",
   "keywords": [
     "lgpd",
@@ -33,7 +33,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
+      "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
     "./package.json": "./package.json"
@@ -42,7 +42,8 @@
   "files": [
     "dist",
     "README.md",
-    "LICENSE"
+    "LICENSE",
+    "COMPLIANCE.md"
   ],
   "engines": {
     "node": ">=18.18"