react-lgpd-consent 0.1.8 → 0.1.12

package/README.md

@@ -2,7 +2,39 @@
 
 [![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)
-[![TypeScript](https://img.shields.io/badge/TypeScript-Ready-blue?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/)
+[![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/)
 
@@ -24,6 +56,7 @@ Solução moderna, acessível e personalizável para gerenciar consentimento de
 - 🎨 **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
 
@@ -44,7 +77,11 @@ npm install @mui/material js-cookie
 ## � Exemplo Completo
 
 ```tsx
-import { ConsentProvider, CookieBanner } from 'react-lgpd-consent'
+import {
+  ConsentProvider,
+  CookieBanner,
+  FloatingPreferencesButton,
+} from 'react-lgpd-consent'
 
 function App() {
   return (
@@ -53,8 +90,11 @@ function App() {
         <h1>Meu Site</h1>
         <p>Conteúdo do site...</p>
 
-        {/* Banner de cookies */}
+        {/* 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>
   )
@@ -343,12 +383,13 @@ Para controle total, desabilite o modal automático:
 
 ### Components
 
-| Componente         | Descrição                                        | Props Principais                                                                                  |
-| ------------------ | ------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
-| `ConsentProvider`  | Provider principal do contexto                   | `initialState`, `texts`, `theme`, `PreferencesModalComponent`, `disableAutomaticModal`, callbacks |
-| `CookieBanner`     | Banner de consentimento                          | `policyLinkUrl`, `blocking`, `debug`, pass-through MUI props                                      |
-| `PreferencesModal` | Modal de preferências (incluído automaticamente) | `DialogProps` (MUI pass-through) - **Opcional**                                                   |
-| `ConsentGate`      | Renderização condicional por categoria           | `category`, `children`                                                                            |
+| 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()`
 

package/dist/{PreferencesModal-4FDYT7VE.js → PreferencesModal-IFKCHTF2.js}

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

package/dist/{chunk-Y4XEAQXV.js → chunk-V54LZT2Q.js}

@@ -7,8 +7,8 @@ import DialogTitle from "@mui/material/DialogTitle";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import FormGroup from "@mui/material/FormGroup";
 import Switch from "@mui/material/Switch";
-import Typography from "@mui/material/Typography";
-import { useState, useEffect as useEffect2 } from "react";
+import Typography2 from "@mui/material/Typography";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 
 // src/context/ConsentContext.tsx
 import * as React from "react";
@@ -20,7 +20,7 @@ var DEFAULT_COOKIE_OPTS = {
   name: "cookieConsent",
   maxAgeDays: 365,
   sameSite: "Lax",
-  secure: true,
+  secure: typeof window !== "undefined" ? window.location.protocol === "https:" : false,
   path: "/"
 };
 function readConsentCookie(name = DEFAULT_COOKIE_OPTS.name) {
@@ -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-4FDYT7VE.js").then((m) => ({
+  () => import("./PreferencesModal-IFKCHTF2.js").then((m) => ({
     default: m.PreferencesModal
   }))
 );
@@ -191,6 +188,7 @@ function reducer(state, action) {
 var StateCtx = React.createContext(null);
 var ActionsCtx = React.createContext(null);
 var TextsCtx = React.createContext(DEFAULT_TEXTS);
+var HydrationCtx = React.createContext(false);
 function ConsentProvider({
   initialState,
   texts: textsProp,
@@ -198,6 +196,7 @@ function ConsentProvider({
   PreferencesModalComponent,
   preferencesModalProps = {},
   disableAutomaticModal = false,
+  hideBranding = false,
   onConsentGiven,
   onPreferencesSaved,
   cookie: cookieOpts,
@@ -217,14 +216,24 @@ function ConsentProvider({
   );
   const boot = React.useMemo(() => {
     if (initialState) return { ...initialState, isModalOpen: false };
-    const saved = readConsentCookie(cookie.name);
-    return saved ?? {
+    return {
       consented: false,
       preferences: { ...DEFAULT_PREFERENCES },
       isModalOpen: false
     };
-  }, [initialState, cookie.name]);
+  }, [initialState]);
   const [state, dispatch] = React.useReducer(reducer, boot);
+  const [isHydrated, setIsHydrated] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window !== "undefined" && !initialState) {
+      const saved = readConsentCookie(cookie.name);
+      if (saved?.consented) {
+        console.log("\u{1F680} Immediate hydration: Cookie found", saved);
+        dispatch({ type: "HYDRATE", state: saved });
+      }
+    }
+    setIsHydrated(true);
+  }, [cookie.name, initialState]);
   React.useEffect(() => {
     if (state.consented) writeConsentCookie(state, cookie);
   }, [state, cookie]);
@@ -266,10 +275,10 @@ function ConsentProvider({
       resetConsent
     };
   }, [state, cookie]);
-  return /* @__PURE__ */ jsx(ThemeProvider, { theme: appliedTheme, children: /* @__PURE__ */ jsx(StateCtx.Provider, { value: state, children: /* @__PURE__ */ jsx(ActionsCtx.Provider, { value: api, children: /* @__PURE__ */ jsxs(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: /* @__PURE__ */ jsxs(HydrationCtx.Provider, { value: isHydrated, children: [
     children,
-    !disableAutomaticModal && /* @__PURE__ */ jsx(React.Suspense, { fallback: null, children: PreferencesModalComponent ? /* @__PURE__ */ jsx(PreferencesModalComponent, { ...preferencesModalProps }) : /* @__PURE__ */ jsx(PreferencesModal, {}) })
-  ] }) }) }) });
+    !disableAutomaticModal && /* @__PURE__ */ jsx(React.Suspense, { fallback: null, children: PreferencesModalComponent ? /* @__PURE__ */ jsx(PreferencesModalComponent, { ...preferencesModalProps }) : /* @__PURE__ */ jsx(PreferencesModal, { hideBranding }) })
+  ] }) }) }) }) });
 }
 function useConsentStateInternal() {
   const ctx = React.useContext(StateCtx);
@@ -287,6 +296,9 @@ function useConsentTextsInternal() {
   const ctx = React.useContext(TextsCtx);
   return ctx;
 }
+function useConsentHydrationInternal() {
+  return React.useContext(HydrationCtx);
+}
 
 // src/hooks/useConsent.ts
 function useConsent() {
@@ -308,15 +320,78 @@ function useConsent() {
 function useConsentTexts() {
   return useConsentTextsInternal();
 }
+function useConsentHydration() {
+  return useConsentHydrationInternal();
+}
 
-// src/components/PreferencesModal.tsx
+// src/components/Branding.tsx
+import Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var brandingStyles = {
+  banner: {
+    fontSize: "0.65rem",
+    textAlign: "center",
+    mt: 1,
+    opacity: 0.7,
+    fontStyle: "italic"
+  },
+  modal: {
+    fontSize: "0.65rem",
+    textAlign: "center",
+    px: 3,
+    pb: 1,
+    opacity: 0.7,
+    fontStyle: "italic"
+  }
+};
+var linkStyles = {
+  textDecoration: "none",
+  fontWeight: 500,
+  "&:hover": {
+    textDecoration: "underline"
+  }
+};
+function Branding({ variant, hidden = false }) {
+  if (hidden) return null;
+  return /* @__PURE__ */ jsxs2(
+    Typography,
+    {
+      variant: "caption",
+      sx: (theme) => ({
+        ...brandingStyles[variant],
+        color: theme.palette.text.secondary
+      }),
+      children: [
+        "fornecido por",
+        " ",
+        /* @__PURE__ */ jsx2(
+          Link,
+          {
+            href: "https://www.ledipo.eti.br",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            sx: (theme) => ({
+              ...linkStyles,
+              color: theme.palette.primary.main
+            }),
+            children: "L\xC9dipO.eti.br"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/PreferencesModal.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function PreferencesModal2({
-  DialogProps: DialogProps2
+  DialogProps: DialogProps2,
+  hideBranding = false
 }) {
   const { preferences, setPreferences, closePreferences, isModalOpen } = useConsent();
   const texts = useConsentTexts();
-  const [tempPreferences, setTempPreferences] = useState(preferences);
+  const [tempPreferences, setTempPreferences] = useState2(preferences);
   useEffect2(() => {
     if (isModalOpen) {
       setTempPreferences(preferences);
@@ -330,7 +405,7 @@ function PreferencesModal2({
     setTempPreferences(preferences);
     closePreferences();
   };
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     Dialog,
     {
       "aria-labelledby": "cookie-pref-title",
@@ -338,14 +413,14 @@ function PreferencesModal2({
       onClose: handleCancel,
       ...DialogProps2,
       children: [
-        /* @__PURE__ */ jsx2(DialogTitle, { id: "cookie-pref-title", children: texts.modalTitle }),
-        /* @__PURE__ */ jsxs2(DialogContent, { dividers: true, children: [
-          /* @__PURE__ */ jsx2(Typography, { variant: "body2", sx: { mb: 2 }, children: texts.modalIntro }),
-          /* @__PURE__ */ jsxs2(FormGroup, { children: [
-            /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(DialogTitle, { id: "cookie-pref-title", children: texts.modalTitle }),
+        /* @__PURE__ */ jsxs3(DialogContent, { dividers: true, children: [
+          /* @__PURE__ */ jsx3(Typography2, { variant: "body2", sx: { mb: 2 }, children: texts.modalIntro }),
+          /* @__PURE__ */ jsxs3(FormGroup, { children: [
+            /* @__PURE__ */ jsx3(
               FormControlLabel,
               {
-                control: /* @__PURE__ */ jsx2(
+                control: /* @__PURE__ */ jsx3(
                   Switch,
                   {
                     checked: tempPreferences.analytics,
@@ -358,10 +433,10 @@ function PreferencesModal2({
                 label: "Cookies Anal\xEDticos (medem uso do site)"
               }
             ),
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx3(
               FormControlLabel,
               {
-                control: /* @__PURE__ */ jsx2(
+                control: /* @__PURE__ */ jsx3(
                   Switch,
                   {
                     checked: tempPreferences.marketing,
@@ -374,18 +449,19 @@ function PreferencesModal2({
                 label: "Cookies de Marketing/Publicidade"
               }
             ),
-            /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx3(
               FormControlLabel,
               {
-                control: /* @__PURE__ */ jsx2(Switch, { checked: true, disabled: true }),
+                control: /* @__PURE__ */ jsx3(Switch, { checked: true, disabled: true }),
                 label: texts.necessaryAlwaysOn
               }
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsxs2(DialogActions, { children: [
-          /* @__PURE__ */ jsx2(Button, { variant: "outlined", onClick: handleCancel, children: "Cancelar" }),
-          /* @__PURE__ */ jsx2(Button, { variant: "contained", onClick: handleSave, children: texts.save })
+        !hideBranding && /* @__PURE__ */ jsx3(Branding, { variant: "modal" }),
+        /* @__PURE__ */ jsxs3(DialogActions, { children: [
+          /* @__PURE__ */ jsx3(Button, { variant: "outlined", onClick: handleCancel, children: "Cancelar" }),
+          /* @__PURE__ */ jsx3(Button, { variant: "contained", onClick: handleSave, children: texts.save })
         ] })
       ]
     }
@@ -394,8 +470,10 @@ function PreferencesModal2({
 
 export {
   defaultConsentTheme,
+  Branding,
   PreferencesModal2 as PreferencesModal,
   ConsentProvider,
   useConsent,
-  useConsentTexts
+  useConsentTexts,
+  useConsentHydration
 };