react-lgpd-consent 0.1.3 → 0.1.5

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]);
@@ -200,6 +281,7 @@ function ConsentProvider({
     return {
       consented: !!state.consented,
       preferences: state.preferences,
+      isModalOpen: state.isModalOpen,
       acceptAll,
       rejectAll,
       setPreference,
@@ -208,7 +290,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 +316,7 @@ function useConsent() {
   return {
     consented: state.consented,
     preferences: state.preferences,
+    isModalOpen: state.isModalOpen,
     acceptAll: actions.acceptAll,
     rejectAll: actions.rejectAll,
     setPreference: actions.setPreference,
@@ -251,6 +334,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 +343,84 @@ 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.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      /* @__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)",
+            zIndex: 1299
+            // Abaixo do banner mas acima do conteúdo
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_Box.default,
+        {
+          sx: {
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 1300,
+            // Acima do overlay
+            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 +439,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 +514,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]);
@@ -158,6 +237,7 @@ function ConsentProvider({
     return {
       consented: !!state.consented,
       preferences: state.preferences,
+      isModalOpen: state.isModalOpen,
       acceptAll,
       rejectAll,
       setPreference,
@@ -166,7 +246,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 +272,7 @@ function useConsent() {
   return {
     consented: state.consented,
     preferences: state.preferences,
+    isModalOpen: state.isModalOpen,
     acceptAll: actions.acceptAll,
     rejectAll: actions.rejectAll,
     setPreference: actions.setPreference,
@@ -205,10 +286,12 @@ function useConsentTexts() {
 }
 
 // src/components/CookieBanner.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, 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 +299,84 @@ 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__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx2(
+        Box,
+        {
+          sx: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+            zIndex: 1299
+            // Abaixo do banner mas acima do conteúdo
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        Box,
+        {
+          sx: {
+            position: "fixed",
+            bottom: 0,
+            left: 0,
+            right: 0,
+            zIndex: 1300,
+            // Acima do overlay
+            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 +395,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,
     {
@@ -334,11 +452,11 @@ function PreferencesModal({
 }
 
 // src/utils/ConsentGate.tsx
-import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4 } from "react/jsx-runtime";
 function ConsentGate(props) {
   const { preferences } = useConsent();
   if (!preferences[props.category]) return null;
-  return /* @__PURE__ */ jsx4(Fragment, { children: props.children });
+  return /* @__PURE__ */ jsx4(Fragment2, { children: props.children });
 }
 
 // src/utils/scriptLoader.ts
@@ -352,11 +470,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.3",
+  "version": "0.1.5",
   "description": "Biblioteca de consentimento de cookies (LGPD) para React e Next.js, com contexto, banner e modal personalizáveis usando MUI.",
   "keywords": [
     "lgpd",