react-lgpd-consent 0.1.11 → 0.1.13

package/README.md

@@ -1,487 +0,0 @@
-# react-lgpd-consent 🍪
-
-[![NPM Version](https://img.shields.io/npm/v/react-lgpd-consent?style=for-the-badge&color=blue)](https://www.npmjs.com/package/react-lgpd-consent)
-[![License](https://img.shields.io/npm/l/react-lgpd-consent?style=for-the-badge)](https://github.com/lucianoedipo/react-lgpd-consent/blob/main/LICENSE)
-[![TypeScrip```
-
-## 🎛️ Botão Flutuante de Preferências
-
-Para facilitar o acesso às configurações após consentimento inicial:
-
-```tsx
-import { FloatingPreferencesButton } from 'react-lgpd-consent'
-
-function App() {
-  return (
-    <ConsentProvider>
-      <MeuApp />
-      <CookieBanner />
-
-      {/* Botão flutuante opcional */}
-      <FloatingPreferencesButton
-        position="bottom-right"
-        hideWhenConsented={false}
-        tooltip="Configurar Cookies"
-      />
-    </ConsentProvider>
-  )
-}
-```
-
-### Posições Disponíveis
-
-- `bottom-left` | `bottom-right` (padrão)
-- `top-left` | `top-right`
-
-## 🔧 API Completahttps://img.shields.io/badge/TypeScript-Ready-blue?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)
-
-[![React](https://img.shields.io/badge/React-18%2B-61DAFB?style=for-the-badge&logo=react)](https://reactjs.org/)
-[![Material-UI](https://img.shields.io/badge/MUI-Ready-007FFF?style=for-the-badge&logo=mui)](https://mui.com/)
-
-> **Biblioteca completa de consentimento de cookies para React e Next.js em conformidade com a LGPD**
-
-Solução moderna, acessível e personalizável para gerenciar consentimento de cookies em aplicações React, com suporte completo a SSR, Material-UI e TypeScript.
-
-## ✨ Características Principais
-
-- 🇧🇷 **Conformidade LGPD**: Respeita totalmente a legislação brasileira de proteção de dados
-- ⚡ **SSR/Next.js Ready**: Suporte nativo a Server-Side Rendering sem flash de conteúdo
-- 🎨 **Material-UI Integration**: Componentes prontos e customizáveis com MUI
-- ♿ **Acessibilidade**: Navegação por teclado e leitores de tela nativamente suportados
-- 🌐 **Internacionalização**: Textos totalmente customizáveis (padrão pt-BR)
-- 🚀 **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
-- 🔌 **Modal Automático**: Modal de preferências incluído automaticamente com lazy loading
-- 🎛️ **Botão Flutuante**: Componente opcional para acesso fácil às preferências
-
-## 🚀 Instalação
-
-```bash
-npm install react-lgpd-consent
-# ou
-yarn add react-lgpd-consent
-# ou
-pnpm add react-lgpd-consent
-```
-
-### Dependências
-
-```bash
-npm install @mui/material js-cookie
-```
-
-## � Exemplo Completo
-
-```tsx
-import {
-  ConsentProvider,
-  CookieBanner,
-  FloatingPreferencesButton,
-} from 'react-lgpd-consent'
-
-function App() {
-  return (
-    <ConsentProvider>
-      <div>
-        <h1>Meu Site</h1>
-        <p>Conteúdo do site...</p>
-
-        {/* Banner de cookies - Modal incluído automaticamente! */}
-        <CookieBanner policyLinkUrl="/privacy-policy" blocking={true} />
-
-        {/* Botão flutuante opcional para acesso às preferências */}
-        <FloatingPreferencesButton position="bottom-right" />
-      </div>
-    </ConsentProvider>
-  )
-}
-```
-
-## �📖 Uso Básico
-
-### 1. Setup do Provider
-
-```tsx
-import { ConsentProvider } from 'react-lgpd-consent'
-
-function App() {
-  return (
-    <ConsentProvider>
-      <YourApp />
-    </ConsentProvider>
-  )
-}
-```
-
-### 2. Banner de Consentimento
-
-```tsx
-import { CookieBanner } from 'react-lgpd-consent'
-
-function Layout() {
-  return (
-    <>
-      <YourContent />
-      <CookieBanner
-        policyLinkUrl="/politica-privacidade"
-        blocking={true} // Padrão: bloqueia até decisão
-      />
-      {/* Modal de preferências incluído automaticamente! */}
-    </>
-  )
-}
-```
-
-### 3. Uso do Hook
-
-```tsx
-import { useConsent } from 'react-lgpd-consent'
-
-function MyComponent() {
-  const { consented, preferences, acceptAll, openPreferences } = useConsent()
-
-  return (
-    <div>
-      <p>Consentimento: {consented ? 'Dado' : 'Pendente'}</p>
-      <button onClick={acceptAll}>Aceitar Todos</button>
-      <button onClick={openPreferences}>Gerenciar Preferências</button>
-    </div>
-  )
-}
-```
-
-> ✅ **O modal de preferências é incluído automaticamente pelo ConsentProvider!** Não é mais necessário renderizá-lo manualmente.
-
-````
-
-### 4. Carregamento Condicional de Scripts
-
-```tsx
-import { ConsentGate, loadScript } from 'react-lgpd-consent'
-
-function Analytics() {
-  return (
-    <ConsentGate category="analytics">
-      <GoogleAnalytics />
-    </ConsentGate>
-  )
-}
-
-// Ou carregando scripts que aguardam consentimento
-function MyComponent() {
-  const { preferences, consented } = useConsent()
-
-  useEffect(() => {
-    if (consented && preferences.analytics) {
-      loadConditionalScript(
-        'ga',
-        'https://www.googletagmanager.com/gtag/js?id=GA_ID',
-        () => preferences.analytics, // Condição que aguarda
-      )
-    }
-  }, [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
-<ConsentProvider
-  texts={{
-    bannerMessage: "Utilizamos cookies para melhorar sua experiência.",
-    acceptAll: "Aceitar Todos",
-    declineAll: "Recusar Opcionais",
-    preferences: "Configurar"
-  }}
->
-```
-
-### Configuração do Cookie
-
-```tsx
-<ConsentProvider
-  cookie={{
-    name: 'meuSiteConsent',
-    maxAgeDays: 180,
-    sameSite: 'Strict'
-  }}
->
-```
-
-### Callbacks
-
-```tsx
-<ConsentProvider
-  onConsentGiven={(state) => {
-    console.log('Consentimento dado:', state)
-    // Inicializar analytics, etc.
-  }}
-  onPreferencesSaved={(prefs) => {
-    console.log('Preferências salvas:', prefs)
-  }}
->
-```
-
-## � 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 Inteligente de Scripts
-
-### Função loadScript
-
-Scripts aguardam automaticamente o **consentimento finalizado** (banner fechado ou preferências salvas):
-
-```tsx
-import { loadScript } from 'react-lgpd-consent'
-
-// Carrega script apenas após consentimento para analytics
-await loadScript(
-  'gtag',
-  'https://www.googletagmanager.com/gtag/js?id=GA_ID',
-  'analytics', // Categoria obrigatória
-)
-
-// Script geral (sempre carrega após consentimento)
-await loadScript('custom-script', 'https://example.com/script.js')
-```
-
-### Comportamento Inteligente
-
-- **Aguarda decisão final**: Não executa durante mudanças no modal de preferências
-- **Só executa após salvar**: Scripts só rodam quando o usuário finaliza as preferências
-- **Baseado em categoria**: Respeita as permissões por categoria
-
-## 🎨 Personalização Total
-
-### Modal de Preferências Customizado
-
-Substitua completamente o modal padrão com seu próprio componente:
-
-```tsx
-import { ConsentProvider, useConsent } from 'react-lgpd-consent'
-import MeuModalCustomizado from './MeuModalCustomizado'
-
-function App() {
-  return (
-    <ConsentProvider
-      PreferencesModalComponent={MeuModalCustomizado}
-      preferencesModalProps={{ variant: 'custom' }}
-    >
-      <MeuApp />
-    </ConsentProvider>
-  )
-}
-
-// Seu componente customizado
-function MeuModalCustomizado({ variant }) {
-  const { isModalOpen, closePreferences, setPreference } = useConsent()
-
-  return (
-    <MyCustomDialog open={isModalOpen} onClose={closePreferences}>
-      {/* Seu design personalizado aqui */}
-    </MyCustomDialog>
-  )
-}
-```
-
-### Desabilitar Modal Automático
-
-Para controle total, desabilite o modal automático:
-
-```tsx
-<ConsentProvider disableAutomaticModal>
-  <MeuApp />
-  {/* Renderize seus componentes customizados onde quiser */}
-  <MeuModalTotalmenteCustomizado />
-</ConsentProvider>
-```
-
-## �🔧 API Completa
-
-### Components
-
-| Componente                  | Descrição                                        | Props Principais                                                                         |
-| --------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------------------- |
-| `ConsentProvider`           | Provider principal do contexto                   | `initialState`, `texts`, `theme`, `hideBranding`, `PreferencesModalComponent`, callbacks |
-| `CookieBanner`              | Banner de consentimento                          | `policyLinkUrl`, `blocking`, `hideBranding`, `debug`, pass-through MUI props             |
-| `PreferencesModal`          | Modal de preferências (incluído automaticamente) | `DialogProps`, `hideBranding` - **Opcional**                                             |
-| `FloatingPreferencesButton` | Botão flutuante para abrir preferências          | `position`, `hideWhenConsented`, `tooltip`, `icon`, `FabProps`                           |
-| `ConsentGate`               | Renderização condicional por categoria           | `category`, `children`                                                                   |
-
-### Hook `useConsent()`
-
-```typescript
-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
-  openPreferences(): void // abrir modal de preferências
-  closePreferences(): void // fechar modal
-  resetConsent(): void // resetar tudo
-}
-```
-
-### Hook `useConsentTexts()`
-
-```typescript
-// Acesso aos textos contextuais
-const texts = useConsentTexts()
-console.log(texts.banner.title) // "Política de Cookies"
-```
-
-### Utilitários
-
-- `loadScript(id, src, category?, attrs?)` - Carrega scripts com consentimento inteligente
-- `defaultConsentTheme` - Tema padrão do Material-UI
-- Tipos TypeScript completos exportados## 🌐 SSR / Next.js
-
-Para evitar flash de conteúdo em SSR:
-
-```tsx
-// pages/_app.tsx (Next.js)
-function MyApp({ Component, pageProps }) {
-  return (
-    <ConsentProvider
-      initialState={{
-        consented: false,
-        preferences: { analytics: false, marketing: false },
-      }}
-    >
-      <Component {...pageProps} />
-    </ConsentProvider>
-  )
-}
-```
-
-## ♿ Acessibilidade
-
-A biblioteca segue as melhores práticas de acessibilidade:
-
-- ✅ Navegação por teclado (Tab, Enter, Escape)
-- ✅ Leitores de tela (`aria-labelledby`, `aria-describedby`)
-- ✅ Foco gerenciado automaticamente
-- ✅ Contrastes adequados
-- ✅ Estrutura semântica correta
-
-## 📚 Exemplos
-
-Confira exemplos completos no repositório:
-
-- [Básico com React](./examples/basic)
-- [Next.js com SSR](./examples/nextjs)
-- [Customização avançada](./examples/advanced)
-- [Integração com analytics](./examples/analytics)
-
-## 🤝 Contribuição
-
-Contribuições são bem-vindas! Por favor:
-
-1. Faça fork do projeto
-2. Crie uma branch para sua feature (`git checkout -b feature/AmazingFeature`)
-3. Commit suas mudanças (`git commit -m 'Add some AmazingFeature'`)
-4. Push para a branch (`git push origin feature/AmazingFeature`)
-5. Abra um Pull Request
-
-## 📄 Licença
-
-Este projeto está licenciado sob a Licença MIT - veja o arquivo [LICENSE](LICENSE) para detalhes.
-
-## 🙋‍♀️ Suporte
-
-- 📖 [Documentação](./docs)
-- 🐛 [Issues](https://github.com/lucianoedipo/react-lgpd-consent/issues)
-- 💬 [Discussões](https://github.com/lucianoedipo/react-lgpd-consent/discussions)
-
----
-
-<div align="center">
-
-**Feito com ❤️ para a comunidade React brasileira**
-
-</div>

package/dist/{PreferencesModal-IHXZDNYT.js → PreferencesModal-2V2W3262.js}

@@ -1,6 +1,6 @@
 import {
   PreferencesModal
-} from "./chunk-LRMSFSP2.js";
+} from "./chunk-XIHO7M77.js";
 export {
   PreferencesModal
 };

package/dist/{chunk-LRMSFSP2.js → chunk-XIHO7M77.js}

@@ -55,12 +55,10 @@ var defaultConsentTheme = createTheme({
   palette: {
     primary: {
       main: "#1976d2",
-      // Azul institucional
       contrastText: "#ffffff"
     },
     secondary: {
       main: "#dc004e",
-      // Rosa/vermelho para ações importantes
       contrastText: "#ffffff"
     },
     background: {
@@ -84,7 +82,6 @@ var defaultConsentTheme = createTheme({
     button: {
       fontWeight: 500,
       textTransform: "none"
-      // Manter capitalização original
     }
   },
   components: {
@@ -123,7 +120,7 @@ var defaultConsentTheme = createTheme({
 // src/context/ConsentContext.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var PreferencesModal = React.lazy(
-  () => import("./PreferencesModal-IHXZDNYT.js").then((m) => ({
+  () => import("./PreferencesModal-2V2W3262.js").then((m) => ({
     default: m.PreferencesModal
   }))
 );
@@ -228,7 +225,7 @@ function ConsentProvider({
   const [state, dispatch] = React.useReducer(reducer, boot);
   const [isHydrated, setIsHydrated] = React.useState(false);
   React.useEffect(() => {
-    if (typeof window !== "undefined" && !initialState) {
+    if (!initialState) {
       const saved = readConsentCookie(cookie.name);
       if (saved?.consented) {
         console.log("\u{1F680} Immediate hydration: Cookie found", saved);
@@ -371,7 +368,7 @@ function Branding({ variant, hidden = false }) {
         /* @__PURE__ */ jsx2(
           Link,
           {
-            href: "https://ledipo.eti.br",
+            href: "https://www.ledipo.eti.br",
             target: "_blank",
             rel: "noopener noreferrer",
             sx: (theme) => ({

package/dist/index.cjs

@@ -81,12 +81,10 @@ var init_theme = __esm({
       palette: {
         primary: {
           main: "#1976d2",
-          // Azul institucional
           contrastText: "#ffffff"
         },
         secondary: {
           main: "#dc004e",
-          // Rosa/vermelho para ações importantes
           contrastText: "#ffffff"
         },
         background: {
@@ -110,7 +108,6 @@ var init_theme = __esm({
         button: {
           fontWeight: 500,
           textTransform: "none"
-          // Manter capitalização original
         }
       },
       components: {
@@ -165,7 +162,7 @@ function Branding({ variant, hidden = false }) {
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_Link.default,
           {
-            href: "https://ledipo.eti.br",
+            href: "https://www.ledipo.eti.br",
             target: "_blank",
             rel: "noopener noreferrer",
             sx: (theme) => ({
@@ -403,7 +400,7 @@ function ConsentProvider({
   const [state, dispatch] = React.useReducer(reducer, boot);
   const [isHydrated, setIsHydrated] = React.useState(false);
   React.useEffect(() => {
-    if (typeof window !== "undefined" && !initialState) {
+    if (!initialState) {
       const saved = readConsentCookie(cookie.name);
       if (saved?.consented) {
         console.log("\u{1F680} Immediate hydration: Cookie found", saved);
@@ -671,16 +668,16 @@ function CookieBanner({
 init_PreferencesModal();
 
 // src/components/FloatingPreferencesButton.tsx
+var import_CookieOutlined = __toESM(require("@mui/icons-material/CookieOutlined"), 1);
 var import_Fab = __toESM(require("@mui/material/Fab"), 1);
 var import_Tooltip = __toESM(require("@mui/material/Tooltip"), 1);
-var import_Settings = __toESM(require("@mui/icons-material/Settings"), 1);
 var import_styles3 = require("@mui/material/styles");
 init_useConsent();
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function FloatingPreferencesButton({
   position = "bottom-right",
   offset = 24,
-  icon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Settings.default, {}),
+  icon = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_CookieOutlined.default, {}),
   tooltip,
   FabProps,
   hideWhenConsented = false
@@ -695,7 +692,6 @@ function FloatingPreferencesButton({
     const styles = {
       position: "fixed",
       zIndex: 1200
-      // Abaixo do modal mas acima do conteúdo
     };
     switch (position) {
       case "bottom-left":

package/dist/index.d.cts

@@ -6,6 +6,16 @@ import { FabProps } from '@mui/material/Fab';
 import * as React$1 from 'react';
 import * as _mui_material_styles from '@mui/material/styles';
 
+/**
+ * Props para o componente CookieBanner.
+ *
+ * @property policyLinkUrl URL da política de privacidade (opcional).
+ * @property debug Força exibição do banner para QA/debug (opcional).
+ * @property blocking Se true, bloqueia interação até decisão do usuário (default: true).
+ * @property hideBranding Se true, oculta o branding "fornecido por LÉdipO.eti.br" (opcional).
+ * @property SnackbarProps Props adicionais para o componente MUI Snackbar (opcional).
+ * @property PaperProps Props adicionais para o componente MUI Paper (opcional).
+ */
 interface CookieBannerProps {
     policyLinkUrl?: string;
     debug?: boolean;
@@ -14,29 +24,79 @@ interface CookieBannerProps {
     SnackbarProps?: Partial<SnackbarProps>;
     PaperProps?: Partial<PaperProps>;
 }
+/**
+ * Banner de consentimento de cookies conforme LGPD.
+ *
+ * Exibe mensagem informativa, botões de ação e link para política de privacidade.
+ * Compatível com modo bloqueante (overlay) e não bloqueante (Snackbar).
+ *
+ * - Textos em pt-BR, customizáveis via contexto.
+ * - Acessível e responsivo.
+ * - Branding opcional.
+ *
+ * @param props Propriedades do banner de consentimento.
+ */
 declare function CookieBanner({ policyLinkUrl, debug, blocking, // Por padrão, bloqueia até decisão
 hideBranding, SnackbarProps, PaperProps, }: Readonly<CookieBannerProps>): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * Props para o componente PreferencesModal.
+ *
+ * @property DialogProps Props opcionais para customizar o Dialog do Material-UI.
+ * @property hideBranding Se true, oculta o branding "fornecido por LÉdipO.eti.br".
+ */
 interface PreferencesModalProps {
     DialogProps?: Partial<DialogProps>;
     hideBranding?: boolean;
 }
+/**
+ * Modal de preferências de cookies.
+ *
+ * Permite ao usuário ajustar suas preferências de consentimento para cookies analíticos e de marketing.
+ * Utiliza Material-UI Dialog, switches para cada categoria e textos customizáveis via contexto.
+ * Acessível, responsivo e compatível com SSR.
+ *
+ * @param props Props do modal, incluindo customização do Dialog e opção de ocultar branding.
+ */
 declare function PreferencesModal({ DialogProps, hideBranding, }: Readonly<PreferencesModalProps>): react_jsx_runtime.JSX.Element;
 
+/**
+ * Props para o componente FloatingPreferencesButton.
+ *
+ * Permite configurar posição, ícone, tooltip, e comportamento de exibição do botão flutuante
+ * para abrir o modal de preferências de cookies LGPD.
+ *
+ * Todos os campos são opcionais e possuem valores padrão.
+ */
 interface FloatingPreferencesButtonProps {
     /** Posição do botão flutuante. Padrão: 'bottom-right' */
     position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
     /** Offset da borda em pixels. Padrão: 24 */
     offset?: number;
-    /** Ícone customizado. Padrão: SettingsIcon */
+    /** Ícone customizado. Padrão: CookieOutlined */
     icon?: React.ReactNode;
-    /** Tooltip customizado */
+    /** Tooltip customizado exibido ao passar o mouse */
     tooltip?: string;
-    /** Props do Fab do MUI */
+    /** Props adicionais para o Fab do MUI */
     FabProps?: Partial<FabProps>;
     /** Se deve esconder quando consentimento já foi dado. Padrão: false */
     hideWhenConsented?: boolean;
 }
+/**
+ * Botão flutuante para abrir o modal de preferências de cookies.
+ *
+ * Permite ao usuário acessar rapidamente as configurações de consentimento LGPD.
+ * Pode ser posicionado em qualquer canto da tela e customizado via props.
+ *
+ * @param position Posição do botão na tela. Padrão: 'bottom-right'.
+ * @param offset Distância da borda em pixels. Padrão: 24.
+ * @param icon Ícone customizado para o botão. Padrão: CookieOutlined.
+ * @param tooltip Texto do tooltip exibido ao passar o mouse. Padrão: 'Gerenciar Preferências de Cookies'.
+ * @param FabProps Props adicionais para o componente Fab do MUI.
+ * @param hideWhenConsented Se verdadeiro, esconde o botão após consentimento. Padrão: false.
+ *
+ * @returns JSX.Element | null
+ */
 declare function FloatingPreferencesButton({ position, offset, icon, tooltip, FabProps, hideWhenConsented, }: Readonly<FloatingPreferencesButtonProps>): react_jsx_runtime.JSX.Element | null;
 
 /**
@@ -62,6 +122,25 @@ interface ConsentState {
 }
 /**
  * Textos utilizados na interface de consentimento.
+ *
+ * @remarks
+ * Esta interface define todos os textos exibidos na UI do banner e modal de consentimento.
+ * Os campos opcionais permitem adequação à ANPD e customização conforme necessidade do projeto.
+ *
+ * @property bannerMessage - Mensagem principal exibida no banner de consentimento.
+ * @property acceptAll - Texto do botão para aceitar todos os cookies.
+ * @property declineAll - Texto do botão para recusar todos os cookies.
+ * @property preferences - Texto do botão para abrir preferências.
+ * @property policyLink - (Opcional) Link para política de privacidade.
+ * @property modalTitle - Título do modal de preferências.
+ * @property modalIntro - Texto introdutório do modal.
+ * @property save - Texto do botão para salvar preferências.
+ * @property necessaryAlwaysOn - Texto explicativo para cookies necessários.
+ * @property controllerInfo - (Opcional) Informação sobre o controlador dos dados.
+ * @property dataTypes - (Opcional) Tipos de dados coletados.
+ * @property thirdPartySharing - (Opcional) Compartilhamento com terceiros.
+ * @property userRights - (Opcional) Direitos do titular dos dados.
+ * @property contactInfo - (Opcional) Informações de contato do DPO.
  */
 interface ConsentTexts {
     bannerMessage: string;
@@ -142,8 +221,44 @@ interface ConsentContextValue {
     resetConsent: () => void;
 }
 
+/**
+ * Provider principal do contexto de consentimento LGPD.
+ *
+ * Gerencia o estado global de consentimento de cookies, preferências do usuário,
+ * textos customizáveis e integração com SSR. Permite customização do modal de preferências,
+ * callbacks externos e opções de cookie.
+ *
+ * @param props Propriedades do ConsentProvider (ver ConsentProviderProps)
+ * @returns JSX.Element
+ *
+ * @example
+ * <ConsentProvider>
+ *   <App />
+ * </ConsentProvider>
+ */
 declare function ConsentProvider({ initialState, texts: textsProp, theme, PreferencesModalComponent, preferencesModalProps, disableAutomaticModal, hideBranding, onConsentGiven, onPreferencesSaved, cookie: cookieOpts, children, }: Readonly<ConsentProviderProps>): react_jsx_runtime.JSX.Element;
 
+/**
+ * Hook principal para acessar e manipular o estado de consentimento de cookies.
+ *
+ * Retorna o estado atual do consentimento, preferências do usuário e métodos para
+ * aceitar, recusar, modificar ou resetar consentimentos. Ideal para integração
+ * com componentes customizados ou lógica de negócio.
+ *
+ * @returns {ConsentContextValue} Estado e ações do consentimento.
+ *
+ * @example
+ * const {
+ *   consented,
+ *   preferences,
+ *   acceptAll,
+ *   rejectAll,
+ *   setPreference,
+ *   openPreferences,
+ *   closePreferences,
+ *   resetConsent,
+ * } = useConsent();
+ */
 declare function useConsent(): ConsentContextValue;
 /**
  * Hook para acessar textos customizados do ConsentProvider.
@@ -162,14 +277,27 @@ declare function ConsentGate(props: Readonly<{
 }>): react_jsx_runtime.JSX.Element | null;
 
 /**
- * Carrega um script dinamicamente após consentimento finalizado.
- * Aguarda que o usuário tome uma decisão definitiva (banner fechado ou preferências salvas).
+ * Carrega dinamicamente um script externo após o consentimento do usuário ser finalizado.
+ *
+ * Aguarda até que o usuário tome uma decisão definitiva (banner fechado ou preferências salvas)
+ * antes de inserir o script na página. Permite restringir o carregamento por categoria de consentimento.
+ *
+ * @param id - Identificador único do elemento script a ser criado.
+ * @param src - URL do script externo.
+ * @param category - Categoria de consentimento exigida para o script ('analytics', 'marketing' ou null).
+ * @param attrs - Atributos adicionais a serem aplicados ao elemento script.
+ * @returns Promise que resolve quando o script é carregado ou rejeita se o consentimento não for dado.
  */
 declare function loadScript(id: string, src: string, category?: 'analytics' | 'marketing' | null, attrs?: Record<string, string>): Promise<void>;
 
 /**
- * Tema padrão para os componentes de consentimento.
- * Baseado no design system da ANPD/governo brasileiro.
+ * Tema padrão utilizado pelos componentes de consentimento da biblioteca.
+ *
+ * Inclui configurações de cores, tipografia e estilos para componentes Material-UI,
+ * garantindo aparência consistente e acessível conforme guidelines LGPD.
+ *
+ * @remarks
+ * Pode ser sobrescrito via ThemeProvider externo se necessário.
  */
 declare const defaultConsentTheme: _mui_material_styles.Theme;
 

package/dist/index.d.ts

@@ -6,6 +6,16 @@ import { FabProps } from '@mui/material/Fab';
 import * as React$1 from 'react';
 import * as _mui_material_styles from '@mui/material/styles';
 
+/**
+ * Props para o componente CookieBanner.
+ *
+ * @property policyLinkUrl URL da política de privacidade (opcional).
+ * @property debug Força exibição do banner para QA/debug (opcional).
+ * @property blocking Se true, bloqueia interação até decisão do usuário (default: true).
+ * @property hideBranding Se true, oculta o branding "fornecido por LÉdipO.eti.br" (opcional).
+ * @property SnackbarProps Props adicionais para o componente MUI Snackbar (opcional).
+ * @property PaperProps Props adicionais para o componente MUI Paper (opcional).
+ */
 interface CookieBannerProps {
     policyLinkUrl?: string;
     debug?: boolean;
@@ -14,29 +24,79 @@ interface CookieBannerProps {
     SnackbarProps?: Partial<SnackbarProps>;
     PaperProps?: Partial<PaperProps>;
 }
+/**
+ * Banner de consentimento de cookies conforme LGPD.
+ *
+ * Exibe mensagem informativa, botões de ação e link para política de privacidade.
+ * Compatível com modo bloqueante (overlay) e não bloqueante (Snackbar).
+ *
+ * - Textos em pt-BR, customizáveis via contexto.
+ * - Acessível e responsivo.
+ * - Branding opcional.
+ *
+ * @param props Propriedades do banner de consentimento.
+ */
 declare function CookieBanner({ policyLinkUrl, debug, blocking, // Por padrão, bloqueia até decisão
 hideBranding, SnackbarProps, PaperProps, }: Readonly<CookieBannerProps>): react_jsx_runtime.JSX.Element | null;
 
+/**
+ * Props para o componente PreferencesModal.
+ *
+ * @property DialogProps Props opcionais para customizar o Dialog do Material-UI.
+ * @property hideBranding Se true, oculta o branding "fornecido por LÉdipO.eti.br".
+ */
 interface PreferencesModalProps {
     DialogProps?: Partial<DialogProps>;
     hideBranding?: boolean;
 }
+/**
+ * Modal de preferências de cookies.
+ *
+ * Permite ao usuário ajustar suas preferências de consentimento para cookies analíticos e de marketing.
+ * Utiliza Material-UI Dialog, switches para cada categoria e textos customizáveis via contexto.
+ * Acessível, responsivo e compatível com SSR.
+ *
+ * @param props Props do modal, incluindo customização do Dialog e opção de ocultar branding.
+ */
 declare function PreferencesModal({ DialogProps, hideBranding, }: Readonly<PreferencesModalProps>): react_jsx_runtime.JSX.Element;
 
+/**
+ * Props para o componente FloatingPreferencesButton.
+ *
+ * Permite configurar posição, ícone, tooltip, e comportamento de exibição do botão flutuante
+ * para abrir o modal de preferências de cookies LGPD.
+ *
+ * Todos os campos são opcionais e possuem valores padrão.
+ */
 interface FloatingPreferencesButtonProps {
     /** Posição do botão flutuante. Padrão: 'bottom-right' */
     position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
     /** Offset da borda em pixels. Padrão: 24 */
     offset?: number;
-    /** Ícone customizado. Padrão: SettingsIcon */
+    /** Ícone customizado. Padrão: CookieOutlined */
     icon?: React.ReactNode;
-    /** Tooltip customizado */
+    /** Tooltip customizado exibido ao passar o mouse */
     tooltip?: string;
-    /** Props do Fab do MUI */
+    /** Props adicionais para o Fab do MUI */
     FabProps?: Partial<FabProps>;
     /** Se deve esconder quando consentimento já foi dado. Padrão: false */
     hideWhenConsented?: boolean;
 }
+/**
+ * Botão flutuante para abrir o modal de preferências de cookies.
+ *
+ * Permite ao usuário acessar rapidamente as configurações de consentimento LGPD.
+ * Pode ser posicionado em qualquer canto da tela e customizado via props.
+ *
+ * @param position Posição do botão na tela. Padrão: 'bottom-right'.
+ * @param offset Distância da borda em pixels. Padrão: 24.
+ * @param icon Ícone customizado para o botão. Padrão: CookieOutlined.
+ * @param tooltip Texto do tooltip exibido ao passar o mouse. Padrão: 'Gerenciar Preferências de Cookies'.
+ * @param FabProps Props adicionais para o componente Fab do MUI.
+ * @param hideWhenConsented Se verdadeiro, esconde o botão após consentimento. Padrão: false.
+ *
+ * @returns JSX.Element | null
+ */
 declare function FloatingPreferencesButton({ position, offset, icon, tooltip, FabProps, hideWhenConsented, }: Readonly<FloatingPreferencesButtonProps>): react_jsx_runtime.JSX.Element | null;
 
 /**
@@ -62,6 +122,25 @@ interface ConsentState {
 }
 /**
  * Textos utilizados na interface de consentimento.
+ *
+ * @remarks
+ * Esta interface define todos os textos exibidos na UI do banner e modal de consentimento.
+ * Os campos opcionais permitem adequação à ANPD e customização conforme necessidade do projeto.
+ *
+ * @property bannerMessage - Mensagem principal exibida no banner de consentimento.
+ * @property acceptAll - Texto do botão para aceitar todos os cookies.
+ * @property declineAll - Texto do botão para recusar todos os cookies.
+ * @property preferences - Texto do botão para abrir preferências.
+ * @property policyLink - (Opcional) Link para política de privacidade.
+ * @property modalTitle - Título do modal de preferências.
+ * @property modalIntro - Texto introdutório do modal.
+ * @property save - Texto do botão para salvar preferências.
+ * @property necessaryAlwaysOn - Texto explicativo para cookies necessários.
+ * @property controllerInfo - (Opcional) Informação sobre o controlador dos dados.
+ * @property dataTypes - (Opcional) Tipos de dados coletados.
+ * @property thirdPartySharing - (Opcional) Compartilhamento com terceiros.
+ * @property userRights - (Opcional) Direitos do titular dos dados.
+ * @property contactInfo - (Opcional) Informações de contato do DPO.
  */
 interface ConsentTexts {
     bannerMessage: string;
@@ -142,8 +221,44 @@ interface ConsentContextValue {
     resetConsent: () => void;
 }
 
+/**
+ * Provider principal do contexto de consentimento LGPD.
+ *
+ * Gerencia o estado global de consentimento de cookies, preferências do usuário,
+ * textos customizáveis e integração com SSR. Permite customização do modal de preferências,
+ * callbacks externos e opções de cookie.
+ *
+ * @param props Propriedades do ConsentProvider (ver ConsentProviderProps)
+ * @returns JSX.Element
+ *
+ * @example
+ * <ConsentProvider>
+ *   <App />
+ * </ConsentProvider>
+ */
 declare function ConsentProvider({ initialState, texts: textsProp, theme, PreferencesModalComponent, preferencesModalProps, disableAutomaticModal, hideBranding, onConsentGiven, onPreferencesSaved, cookie: cookieOpts, children, }: Readonly<ConsentProviderProps>): react_jsx_runtime.JSX.Element;
 
+/**
+ * Hook principal para acessar e manipular o estado de consentimento de cookies.
+ *
+ * Retorna o estado atual do consentimento, preferências do usuário e métodos para
+ * aceitar, recusar, modificar ou resetar consentimentos. Ideal para integração
+ * com componentes customizados ou lógica de negócio.
+ *
+ * @returns {ConsentContextValue} Estado e ações do consentimento.
+ *
+ * @example
+ * const {
+ *   consented,
+ *   preferences,
+ *   acceptAll,
+ *   rejectAll,
+ *   setPreference,
+ *   openPreferences,
+ *   closePreferences,
+ *   resetConsent,
+ * } = useConsent();
+ */
 declare function useConsent(): ConsentContextValue;
 /**
  * Hook para acessar textos customizados do ConsentProvider.
@@ -162,14 +277,27 @@ declare function ConsentGate(props: Readonly<{
 }>): react_jsx_runtime.JSX.Element | null;
 
 /**
- * Carrega um script dinamicamente após consentimento finalizado.
- * Aguarda que o usuário tome uma decisão definitiva (banner fechado ou preferências salvas).
+ * Carrega dinamicamente um script externo após o consentimento do usuário ser finalizado.
+ *
+ * Aguarda até que o usuário tome uma decisão definitiva (banner fechado ou preferências salvas)
+ * antes de inserir o script na página. Permite restringir o carregamento por categoria de consentimento.
+ *
+ * @param id - Identificador único do elemento script a ser criado.
+ * @param src - URL do script externo.
+ * @param category - Categoria de consentimento exigida para o script ('analytics', 'marketing' ou null).
+ * @param attrs - Atributos adicionais a serem aplicados ao elemento script.
+ * @returns Promise que resolve quando o script é carregado ou rejeita se o consentimento não for dado.
  */
 declare function loadScript(id: string, src: string, category?: 'analytics' | 'marketing' | null, attrs?: Record<string, string>): Promise<void>;
 
 /**
- * Tema padrão para os componentes de consentimento.
- * Baseado no design system da ANPD/governo brasileiro.
+ * Tema padrão utilizado pelos componentes de consentimento da biblioteca.
+ *
+ * Inclui configurações de cores, tipografia e estilos para componentes Material-UI,
+ * garantindo aparência consistente e acessível conforme guidelines LGPD.
+ *
+ * @remarks
+ * Pode ser sobrescrito via ThemeProvider externo se necessário.
  */
 declare const defaultConsentTheme: _mui_material_styles.Theme;
 

package/dist/index.js

@@ -6,7 +6,7 @@ import {
   useConsent,
   useConsentHydration,
   useConsentTexts
-} from "./chunk-LRMSFSP2.js";
+} from "./chunk-XIHO7M77.js";
 
 // src/components/CookieBanner.tsx
 import Button from "@mui/material/Button";
@@ -115,15 +115,15 @@ function CookieBanner({
 }
 
 // src/components/FloatingPreferencesButton.tsx
+import CookieOutlined from "@mui/icons-material/CookieOutlined";
 import Fab from "@mui/material/Fab";
 import Tooltip from "@mui/material/Tooltip";
-import SettingsIcon from "@mui/icons-material/Settings";
 import { useTheme } from "@mui/material/styles";
 import { jsx as jsx2 } from "react/jsx-runtime";
 function FloatingPreferencesButton({
   position = "bottom-right",
   offset = 24,
-  icon = /* @__PURE__ */ jsx2(SettingsIcon, {}),
+  icon = /* @__PURE__ */ jsx2(CookieOutlined, {}),
   tooltip,
   FabProps,
   hideWhenConsented = false
@@ -138,7 +138,6 @@ function FloatingPreferencesButton({
     const styles = {
       position: "fixed",
       zIndex: 1200
-      // Abaixo do modal mas acima do conteúdo
     };
     switch (position) {
       case "bottom-left":

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "react-lgpd-consent",
-  "version": "0.1.11",
-  "description": "Biblioteca de consentimento de cookies (LGPD) para React e Next.js, com contexto, banner e modal personalizáveis usando MUI.",
+  "version": "0.1.13",
+  "description": "Biblioteca de consentimento de cookies (LGPD) para React client-side, com contexto, banner e modal personalizáveis usando MUI.",
   "keywords": [
     "lgpd",
     "cookie",
     "consent",
     "react",
-    "nextjs",
+    "client-side",
+    "spa",
     "material-ui",
     "mui",
     "typescript",
-    "ssr",
     "js-cookie",
     "consentimento",
     "privacidade",