react-lgpd-consent 0.3.3 → 0.3.5

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DialogProps } from '@mui/material/Dialog';
 import * as React$1 from 'react';
-import * as _mui_material_styles from '@mui/material/styles';
+import { Theme } from '@mui/material/styles';
 import { PaperProps } from '@mui/material/Paper';
 import { SnackbarProps } from '@mui/material/Snackbar';
 import { FabProps } from '@mui/material/Fab';
@@ -567,7 +567,7 @@ interface DesignTokens {
             mobile?: string;
             desktop?: string;
         };
-        backdrop?: boolean;
+        backdrop?: boolean | string;
     };
 }
 /**
@@ -713,6 +713,22 @@ interface ConsentProviderProps {
      * - `true`: Banner bloqueia interação até decisão (compliance rigorosa)
      */
     blocking?: boolean;
+    /**
+     * Estratégia de bloqueio quando `blocking` estiver habilitado.
+     * - 'auto' (padrão):
+     *   - Se usar o banner padrão da lib, o bloqueio visual/funcional fica a cargo do próprio banner.
+     *   - Se usar `CookieBannerComponent` custom, o Provider NÃO cria overlay; o bloqueio fica a cargo do componente custom (compatibilidade atual).
+     * - 'provider': o Provider cria um overlay de bloqueio por cima da aplicação (e abaixo do banner),
+     *   garantindo que cliques sejam bloqueados, independentemente do banner custom implementar ou não esse comportamento.
+     * - 'component': nenhum overlay do Provider; espera-se que o banner (padrão ou custom) trate o bloqueio.
+     *
+     * Observações:
+     * - Visual do overlay do Provider controlado por `designTokens.layout.backdrop`:
+     *   - `false`: overlay transparente (bloqueia cliques sem escurecer — útil quando o app já possui um dark-filter visual próprio).
+     *   - `string` (ex.: 'rgba(0,0,0,0.4)'): overlay com escurecimento gerenciado pela lib.
+     * - A11y: recomenda-se que o banner use semântica de diálogo (role="dialog", aria-modal="true") e trap de foco.
+     */
+    blockingStrategy?: 'auto' | 'provider' | 'component';
     /** Oculta o branding "fornecido por LÉdipO.eti.br" dos componentes. */
     hideBranding?: boolean;
     /**
@@ -776,6 +792,12 @@ interface CustomCookieBannerProps {
     rejectAll: () => void;
     openPreferences: () => void;
     texts: ConsentTexts;
+    /**
+     * Indica se o modo bloqueante está ativo no contexto.
+     * Esta prop é apenas informativa para banners customizados ajustarem sua UI.
+     * O bloqueio funcional pode ser garantido pelo Provider quando `blockingStrategy='provider'`.
+     */
+    blocking?: boolean;
 }
 /**
  * Props esperadas por um componente customizado de PreferencesModal.
@@ -883,7 +905,7 @@ interface ConsentContextValue {
  * </ConsentProvider>
  * ```
  */
-declare function ConsentProvider({ initialState, categories, texts: textsProp, theme, designTokens, PreferencesModalComponent, preferencesModalProps, CookieBannerComponent, cookieBannerProps, FloatingPreferencesButtonComponent, floatingPreferencesButtonProps, disableFloatingPreferencesButton, hideBranding, onConsentGiven, onPreferencesSaved, cookie: cookieOpts, disableDeveloperGuidance, children, }: Readonly<ConsentProviderProps>): react_jsx_runtime.JSX.Element;
+declare function ConsentProvider({ initialState, categories, texts: textsProp, theme, designTokens, PreferencesModalComponent, preferencesModalProps, CookieBannerComponent, cookieBannerProps, FloatingPreferencesButtonComponent, floatingPreferencesButtonProps, disableFloatingPreferencesButton, blocking, blockingStrategy, hideBranding, onConsentGiven, onPreferencesSaved, cookie: cookieOpts, disableDeveloperGuidance, children, }: Readonly<ConsentProviderProps>): react_jsx_runtime.JSX.Element;
 declare const defaultTexts: ConsentTexts;
 
 /**
@@ -916,7 +938,7 @@ declare const defaultTexts: ConsentTexts;
  * - **`setPreferences(preferences)`**: Define múltiplas categorias de uma vez
  * - **`openPreferences()`**: Abre o modal de preferências
  * - **`closePreferences()`**: Fecha o modal de preferências
- * - **`resetConsent()`**: Limpa todo consentimento (volta ao estado inicial)
+ * - **`resetConsent()`**: Limpa all  consentimento (volta ao estado inicial)
  *
  * ### Performance e SSR
  * - O hook é otimizado com `useMemo` interno para evitar re-renders desnecessários
@@ -1603,7 +1625,15 @@ declare function loadScript(id: string, src: string, category?: 'analytics' | 'm
  * @remarks
  * Pode ser sobrescrito via ThemeProvider externo se necessário.
  */
-declare const defaultConsentTheme: _mui_material_styles.Theme;
+declare function createDefaultConsentTheme(): Theme;
+/**
+ * Compatibilidade: getter para o tema padrão.
+ *
+ * @deprecated Use `createDefaultConsentTheme()` em vez de importar um tema criado no escopo do módulo.
+ * Importar um tema já instanciado pode causar side-effects em SSR e conflitos de contexto.
+ * Esta função retorna uma nova instância do tema quando chamada.
+ */
+declare const defaultConsentTheme: () => Theme;
 
 /**
  * @interface ScriptIntegration
@@ -2133,4 +2163,4 @@ declare function validateProjectPreferences(preferences: ConsentPreferences, con
  */
 declare function getAllProjectCategories(config?: ProjectCategoriesConfig): CategoryDefinition[];
 
-export { COMMON_INTEGRATIONS, type CategoriesContextValue, type Category, type CategoryDefinition, type ConsentContextValue, type ConsentCookieData, type ConsentCookieOptions, ConsentGate, type ConsentPreferences, ConsentProvider, type ConsentProviderProps, ConsentScriptLoader, type ConsentScriptLoaderProps, type ConsentState, type ConsentTexts, CookieBanner, type CookieBannerProps, type CustomCookieBannerProps, type CustomFloatingPreferencesButtonProps, type CustomPreferencesModalProps, DEFAULT_PROJECT_CATEGORIES, type DesignTokens, type DeveloperGuidance, FloatingPreferencesButton, type FloatingPreferencesButtonProps, type GoogleAnalyticsConfig, type GoogleTagManagerConfig, LogLevel, PreferencesModal, type PreferencesModalProps, type ProjectCategoriesConfig, type ScriptIntegration, type UserWayConfig, analyzeDeveloperConfiguration, createGoogleAnalyticsIntegration, createGoogleTagManagerIntegration, createProjectPreferences, createUserWayIntegration, defaultConsentTheme, defaultTexts, getAllProjectCategories, loadScript, openPreferencesModal, setDebugLogging, useCategories, useCategoryStatus, useConsent, useConsentHydration, useConsentScriptLoader, useConsentTexts, useOpenPreferencesModal, validateProjectPreferences };
+export { COMMON_INTEGRATIONS, type CategoriesContextValue, type Category, type CategoryDefinition, type ConsentContextValue, type ConsentCookieData, type ConsentCookieOptions, ConsentGate, type ConsentPreferences, ConsentProvider, type ConsentProviderProps, ConsentScriptLoader, type ConsentScriptLoaderProps, type ConsentState, type ConsentTexts, CookieBanner, type CookieBannerProps, type CustomCookieBannerProps, type CustomFloatingPreferencesButtonProps, type CustomPreferencesModalProps, DEFAULT_PROJECT_CATEGORIES, type DesignTokens, type DeveloperGuidance, FloatingPreferencesButton, type FloatingPreferencesButtonProps, type GoogleAnalyticsConfig, type GoogleTagManagerConfig, LogLevel, PreferencesModal, type PreferencesModalProps, type ProjectCategoriesConfig, type ScriptIntegration, type UserWayConfig, analyzeDeveloperConfiguration, createDefaultConsentTheme, createGoogleAnalyticsIntegration, createGoogleTagManagerIntegration, createProjectPreferences, createUserWayIntegration, defaultConsentTheme, defaultTexts, getAllProjectCategories, loadScript, openPreferencesModal, setDebugLogging, useCategories, useCategoryStatus, useConsent, useConsentHydration, useConsentScriptLoader, useConsentTexts, useOpenPreferencesModal, validateProjectPreferences };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { DialogProps } from '@mui/material/Dialog';
 import * as React$1 from 'react';
-import * as _mui_material_styles from '@mui/material/styles';
+import { Theme } from '@mui/material/styles';
 import { PaperProps } from '@mui/material/Paper';
 import { SnackbarProps } from '@mui/material/Snackbar';
 import { FabProps } from '@mui/material/Fab';
@@ -567,7 +567,7 @@ interface DesignTokens {
             mobile?: string;
             desktop?: string;
         };
-        backdrop?: boolean;
+        backdrop?: boolean | string;
     };
 }
 /**
@@ -713,6 +713,22 @@ interface ConsentProviderProps {
      * - `true`: Banner bloqueia interação até decisão (compliance rigorosa)
      */
     blocking?: boolean;
+    /**
+     * Estratégia de bloqueio quando `blocking` estiver habilitado.
+     * - 'auto' (padrão):
+     *   - Se usar o banner padrão da lib, o bloqueio visual/funcional fica a cargo do próprio banner.
+     *   - Se usar `CookieBannerComponent` custom, o Provider NÃO cria overlay; o bloqueio fica a cargo do componente custom (compatibilidade atual).
+     * - 'provider': o Provider cria um overlay de bloqueio por cima da aplicação (e abaixo do banner),
+     *   garantindo que cliques sejam bloqueados, independentemente do banner custom implementar ou não esse comportamento.
+     * - 'component': nenhum overlay do Provider; espera-se que o banner (padrão ou custom) trate o bloqueio.
+     *
+     * Observações:
+     * - Visual do overlay do Provider controlado por `designTokens.layout.backdrop`:
+     *   - `false`: overlay transparente (bloqueia cliques sem escurecer — útil quando o app já possui um dark-filter visual próprio).
+     *   - `string` (ex.: 'rgba(0,0,0,0.4)'): overlay com escurecimento gerenciado pela lib.
+     * - A11y: recomenda-se que o banner use semântica de diálogo (role="dialog", aria-modal="true") e trap de foco.
+     */
+    blockingStrategy?: 'auto' | 'provider' | 'component';
     /** Oculta o branding "fornecido por LÉdipO.eti.br" dos componentes. */
     hideBranding?: boolean;
     /**
@@ -776,6 +792,12 @@ interface CustomCookieBannerProps {
     rejectAll: () => void;
     openPreferences: () => void;
     texts: ConsentTexts;
+    /**
+     * Indica se o modo bloqueante está ativo no contexto.
+     * Esta prop é apenas informativa para banners customizados ajustarem sua UI.
+     * O bloqueio funcional pode ser garantido pelo Provider quando `blockingStrategy='provider'`.
+     */
+    blocking?: boolean;
 }
 /**
  * Props esperadas por um componente customizado de PreferencesModal.
@@ -883,7 +905,7 @@ interface ConsentContextValue {
  * </ConsentProvider>
  * ```
  */
-declare function ConsentProvider({ initialState, categories, texts: textsProp, theme, designTokens, PreferencesModalComponent, preferencesModalProps, CookieBannerComponent, cookieBannerProps, FloatingPreferencesButtonComponent, floatingPreferencesButtonProps, disableFloatingPreferencesButton, hideBranding, onConsentGiven, onPreferencesSaved, cookie: cookieOpts, disableDeveloperGuidance, children, }: Readonly<ConsentProviderProps>): react_jsx_runtime.JSX.Element;
+declare function ConsentProvider({ initialState, categories, texts: textsProp, theme, designTokens, PreferencesModalComponent, preferencesModalProps, CookieBannerComponent, cookieBannerProps, FloatingPreferencesButtonComponent, floatingPreferencesButtonProps, disableFloatingPreferencesButton, blocking, blockingStrategy, hideBranding, onConsentGiven, onPreferencesSaved, cookie: cookieOpts, disableDeveloperGuidance, children, }: Readonly<ConsentProviderProps>): react_jsx_runtime.JSX.Element;
 declare const defaultTexts: ConsentTexts;
 
 /**
@@ -916,7 +938,7 @@ declare const defaultTexts: ConsentTexts;
  * - **`setPreferences(preferences)`**: Define múltiplas categorias de uma vez
  * - **`openPreferences()`**: Abre o modal de preferências
  * - **`closePreferences()`**: Fecha o modal de preferências
- * - **`resetConsent()`**: Limpa todo consentimento (volta ao estado inicial)
+ * - **`resetConsent()`**: Limpa all  consentimento (volta ao estado inicial)
  *
  * ### Performance e SSR
  * - O hook é otimizado com `useMemo` interno para evitar re-renders desnecessários
@@ -1603,7 +1625,15 @@ declare function loadScript(id: string, src: string, category?: 'analytics' | 'm
  * @remarks
  * Pode ser sobrescrito via ThemeProvider externo se necessário.
  */
-declare const defaultConsentTheme: _mui_material_styles.Theme;
+declare function createDefaultConsentTheme(): Theme;
+/**
+ * Compatibilidade: getter para o tema padrão.
+ *
+ * @deprecated Use `createDefaultConsentTheme()` em vez de importar um tema criado no escopo do módulo.
+ * Importar um tema já instanciado pode causar side-effects em SSR e conflitos de contexto.
+ * Esta função retorna uma nova instância do tema quando chamada.
+ */
+declare const defaultConsentTheme: () => Theme;
 
 /**
  * @interface ScriptIntegration
@@ -2133,4 +2163,4 @@ declare function validateProjectPreferences(preferences: ConsentPreferences, con
  */
 declare function getAllProjectCategories(config?: ProjectCategoriesConfig): CategoryDefinition[];
 
-export { COMMON_INTEGRATIONS, type CategoriesContextValue, type Category, type CategoryDefinition, type ConsentContextValue, type ConsentCookieData, type ConsentCookieOptions, ConsentGate, type ConsentPreferences, ConsentProvider, type ConsentProviderProps, ConsentScriptLoader, type ConsentScriptLoaderProps, type ConsentState, type ConsentTexts, CookieBanner, type CookieBannerProps, type CustomCookieBannerProps, type CustomFloatingPreferencesButtonProps, type CustomPreferencesModalProps, DEFAULT_PROJECT_CATEGORIES, type DesignTokens, type DeveloperGuidance, FloatingPreferencesButton, type FloatingPreferencesButtonProps, type GoogleAnalyticsConfig, type GoogleTagManagerConfig, LogLevel, PreferencesModal, type PreferencesModalProps, type ProjectCategoriesConfig, type ScriptIntegration, type UserWayConfig, analyzeDeveloperConfiguration, createGoogleAnalyticsIntegration, createGoogleTagManagerIntegration, createProjectPreferences, createUserWayIntegration, defaultConsentTheme, defaultTexts, getAllProjectCategories, loadScript, openPreferencesModal, setDebugLogging, useCategories, useCategoryStatus, useConsent, useConsentHydration, useConsentScriptLoader, useConsentTexts, useOpenPreferencesModal, validateProjectPreferences };
+export { COMMON_INTEGRATIONS, type CategoriesContextValue, type Category, type CategoryDefinition, type ConsentContextValue, type ConsentCookieData, type ConsentCookieOptions, ConsentGate, type ConsentPreferences, ConsentProvider, type ConsentProviderProps, ConsentScriptLoader, type ConsentScriptLoaderProps, type ConsentState, type ConsentTexts, CookieBanner, type CookieBannerProps, type CustomCookieBannerProps, type CustomFloatingPreferencesButtonProps, type CustomPreferencesModalProps, DEFAULT_PROJECT_CATEGORIES, type DesignTokens, type DeveloperGuidance, FloatingPreferencesButton, type FloatingPreferencesButtonProps, type GoogleAnalyticsConfig, type GoogleTagManagerConfig, LogLevel, PreferencesModal, type PreferencesModalProps, type ProjectCategoriesConfig, type ScriptIntegration, type UserWayConfig, analyzeDeveloperConfiguration, createDefaultConsentTheme, createGoogleAnalyticsIntegration, createGoogleTagManagerIntegration, createProjectPreferences, createUserWayIntegration, defaultConsentTheme, defaultTexts, getAllProjectCategories, loadScript, openPreferencesModal, setDebugLogging, useCategories, useCategoryStatus, useConsent, useConsentHydration, useConsentScriptLoader, useConsentTexts, useOpenPreferencesModal, validateProjectPreferences };

package/dist/index.js

@@ -7,7 +7,6 @@ import {
   PreferencesModal,
   analyzeDeveloperConfiguration,
   createProjectPreferences,
-  defaultConsentTheme,
   defaultTexts,
   getAllProjectCategories,
   logger,
@@ -20,7 +19,7 @@ import {
   useConsentTexts,
   useOpenPreferencesModal,
   validateProjectPreferences
-} from "./chunk-GPLNN3FD.js";
+} from "./chunk-MHCQFGRJ.js";
 
 // src/utils/ConsentGate.tsx
 import { Fragment, jsx } from "react/jsx-runtime";
@@ -67,6 +66,77 @@ function loadScript(id, src, category = null, attrs = {}) {
   });
 }
 
+// src/utils/theme.ts
+import { createTheme } from "@mui/material/styles";
+function createDefaultConsentTheme() {
+  return createTheme({
+    palette: {
+      primary: {
+        main: "#1976d2",
+        contrastText: "#ffffff"
+      },
+      secondary: {
+        main: "#dc004e",
+        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"
+      }
+    },
+    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
+          }
+        }
+      }
+    }
+  });
+}
+var defaultConsentTheme = () => createDefaultConsentTheme();
+
 // src/utils/ConsentScriptLoader.tsx
 import * as React from "react";
 function ConsentScriptLoader({
@@ -205,6 +275,7 @@ export {
   LogLevel,
   PreferencesModal,
   analyzeDeveloperConfiguration,
+  createDefaultConsentTheme,
   createGoogleAnalyticsIntegration,
   createGoogleTagManagerIntegration,
   createProjectPreferences,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-lgpd-consent",
-  "version": "0.3.3",
-  "description": "Biblioteca completa de consentimento LGPD com 6 categorias ANPD, integrações nativas e sistema extensível para React.",
+  "version": "0.3.5",
+  "description": "Biblioteca de consentimento LGPD, integrações nativas e sistema extensível para React.",
   "keywords": [
     "lgpd",
     "anpd",
@@ -47,23 +47,30 @@
   "files": [
     "dist",
     "README.md",
+    "README.en.md",
+    "QUICKSTART.md",
+    "QUICKSTART.en.md",
     "LICENSE",
     "CHANGELOG.md"
   ],
   "engines": {
     "node": ">=18.18"
   },
-  "packageManager": "npm@10.0.0",
+  "packageManager": "npm@10.9.3",
   "scripts": {
-    "clean": "rimraf node_modules package-lock.json dist",
+    "clean": "rimraf node_modules package-lock.json dist docs storybook-static .cache .stryker-tmp",
     "build": "cross-env NODE_ENV=production tsup src/index.ts --format esm,cjs --dts --clean",
     "dev": "cross-env NODE_ENV=development tsup src/index.ts --format esm,cjs --dts --watch",
     "lint": "eslint . --ext .ts,.tsx",
     "format": "prettier --write \"src/**/*.{ts,tsx,json,md}\" \"eslint.config.js\"",
     "type-check": "tsc --noEmit",
     "test": "jest --config jest.config.ts",
+    "mutation": "npx stryker run",
+    "mutation:tests": "npx stryker run ./stryker.tests.conf.json",
     "prepublishOnly": "npm run build",
-    "docs:generate": "typedoc --out docs"
+    "docs:generate": "typedoc --out docs",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "repository": {
     "type": "git",
@@ -88,38 +95,47 @@
     "js-cookie": "^3.0.5"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^4.1.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@eslint/compat": "^1.3.2",
     "@mui/icons-material": "^7.3.1",
     "@mui/material": "^7.3.1",
+    "@storybook/addon-a11y": "^9.1.3",
+    "@storybook/addon-docs": "^9.1.3",
+    "@storybook/addon-vitest": "^9.1.3",
+    "@storybook/react-vite": "^9.1.3",
+    "@stryker-mutator/core": "^9.0.1",
+    "@stryker-mutator/jest-runner": "^9.0.1",
     "@testing-library/dom": "^10.4.1",
-    "@testing-library/jest-dom": "^6.7.0",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/jest": "^29.5.14",
+    "@types/jest": "^30.0.0",
     "@types/js-cookie": "^3.0.6",
-    "@types/node": "^24.2.1",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
-    "@typescript-eslint/eslint-plugin": "^8.39.1",
-    "@typescript-eslint/parser": "^8.39.1",
+    "@types/node": "^24.3.0",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "@typescript-eslint/eslint-plugin": "^8.41.0",
+    "@typescript-eslint/parser": "^8.41.0",
     "cross-env": "^10.0.0",
-    "eslint": "^9.33.0",
+    "eslint": "^9.34.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jest": "^29.0.1",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "eslint-plugin-storybook": "^9.1.3",
+    "jest": "^30.1.1",
+    "jest-environment-jsdom": "^30.1.1",
     "prettier": "^3.6.2",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "rimraf": "^6.0.1",
+    "storybook": "^9.1.3",
     "ts-jest": "^29.4.1",
     "ts-node": "^10.9.2",
     "tsup": "^8.5.0",
-    "typedoc": "^0.28.10",
+    "typedoc": "^0.28.11",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.39.1"
+    "typescript-eslint": "^8.41.0"
   }
 }