@react-lgpd-consent/mui 0.5.0

package/dist/index.js

@@ -0,0 +1,544 @@
+import { useConsentTexts, useDesignTokens, useConsent, logger, useConsentHydration, useCategories, getCookiesInfoForCategory, ConsentProvider as ConsentProvider$1 } from '@react-lgpd-consent/core';
+export * from '@react-lgpd-consent/core';
+export { ConsentProvider as ConsentProviderHeadless } from '@react-lgpd-consent/core';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import * as React3 from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useTheme, ThemeProvider } from '@mui/material/styles';
+import Box2 from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import Snackbar from '@mui/material/Snackbar';
+import Stack from '@mui/material/Stack';
+import CookieOutlined from '@mui/icons-material/CookieOutlined';
+import Fab from '@mui/material/Fab';
+import Tooltip from '@mui/material/Tooltip';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormGroup from '@mui/material/FormGroup';
+import Switch from '@mui/material/Switch';
+
+// @react-lgpd-consent/mui - proxy build
+
+var brandingStyles = {
+  banner: {
+    fontSize: "0.65rem",
+    textAlign: "right",
+    mt: 1,
+    opacity: 0.7,
+    fontStyle: "italic",
+    width: "100%"
+  },
+  modal: {
+    fontSize: "0.65rem",
+    textAlign: "right",
+    px: 3,
+    pb: 1,
+    opacity: 0.7,
+    fontStyle: "italic",
+    width: "100%"
+  }
+};
+var linkStyles = {
+  textDecoration: "none",
+  fontWeight: 500,
+  "&:hover": {
+    textDecoration: "underline"
+  }
+};
+var Branding = React3.memo(function Branding2({
+  variant,
+  hidden = false
+}) {
+  const texts = useConsentTexts();
+  const designTokens = useDesignTokens();
+  if (hidden) return null;
+  return /* @__PURE__ */ jsxs(
+    Typography,
+    {
+      variant: "caption",
+      sx: (theme) => ({
+        ...brandingStyles[variant],
+        color: designTokens?.colors?.text ?? theme.palette.text.secondary
+      }),
+      children: [
+        texts.brandingPoweredBy || "fornecido por",
+        " ",
+        /* @__PURE__ */ jsx(
+          Link,
+          {
+            href: "https://www.ledipo.eti.br",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            sx: (theme) => ({
+              ...linkStyles,
+              color: designTokens?.colors?.primary ?? theme.palette.primary.main
+            }),
+            children: "L\xC9dipO.eti.br"
+          }
+        )
+      ]
+    }
+  );
+});
+function CookieBanner({
+  policyLinkUrl,
+  termsLinkUrl,
+  debug,
+  blocking = true,
+  hideBranding = false,
+  SnackbarProps,
+  PaperProps
+}) {
+  const { consented, acceptAll, rejectAll, openPreferences } = useConsent();
+  const texts = useConsentTexts();
+  const isHydrated = useConsentHydration();
+  const designTokens = useDesignTokens();
+  const open = debug ? true : isHydrated && !consented;
+  logger.componentRender("CookieBanner", {
+    open,
+    consented,
+    isHydrated,
+    blocking,
+    hideBranding
+  });
+  if (!open) return null;
+  const bannerStyle = (theme) => ({
+    p: designTokens?.spacing?.padding?.banner ?? 2,
+    maxWidth: 720,
+    mx: "auto",
+    backgroundColor: designTokens?.colors?.background ?? theme.palette.background?.paper,
+    color: designTokens?.colors?.text ?? theme.palette.text?.primary,
+    borderRadius: designTokens?.spacing?.borderRadius?.banner,
+    fontFamily: designTokens?.typography?.fontFamily
+  });
+  const bannerContent = /* @__PURE__ */ jsx(Paper, { elevation: 3, sx: bannerStyle, ...PaperProps, children: /* @__PURE__ */ jsxs(Stack, { spacing: 1, children: [
+    /* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: { fontSize: designTokens?.typography?.fontSize?.banner }, children: [
+      texts.bannerMessage,
+      " ",
+      policyLinkUrl && /* @__PURE__ */ jsx(
+        Link,
+        {
+          href: policyLinkUrl,
+          underline: "hover",
+          target: "_blank",
+          rel: "noopener noreferrer",
+          sx: { color: designTokens?.colors?.primary },
+          children: texts.policyLink ?? "Saiba mais"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Stack, { direction: { xs: "column", sm: "row" }, spacing: 1, justifyContent: "flex-end", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "outlined",
+          onClick: () => {
+            logger.apiUsage("rejectAll", { source: "banner" });
+            rejectAll();
+          },
+          sx: { color: designTokens?.colors?.secondary },
+          children: texts.declineAll
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "contained",
+          onClick: () => {
+            logger.apiUsage("acceptAll", { source: "banner" });
+            acceptAll();
+          },
+          sx: { backgroundColor: designTokens?.colors?.primary },
+          children: texts.acceptAll
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "text",
+          onClick: () => {
+            logger.apiUsage("openPreferences", { source: "banner" });
+            openPreferences();
+          },
+          sx: { color: designTokens?.colors?.text },
+          children: texts.preferences
+        }
+      )
+    ] }),
+    !hideBranding && /* @__PURE__ */ jsx(Branding, { variant: "banner" })
+  ] }) });
+  const positionStyle = {
+    position: "fixed",
+    zIndex: 1300,
+    ...designTokens?.layout?.position === "top" ? { top: 0 } : { bottom: 0 },
+    left: 0,
+    right: 0,
+    width: designTokens?.layout?.width?.desktop ?? "100%",
+    p: 2
+  };
+  const backdropToken = designTokens?.layout?.backdrop;
+  const resolveBackdropColor = (theme) => {
+    if (backdropToken === false) return "transparent";
+    if (typeof backdropToken === "string") {
+      if (backdropToken.toLowerCase() === "auto") {
+        const isDark2 = theme?.palette?.mode === "dark";
+        return isDark2 ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.4)";
+      }
+      return backdropToken;
+    }
+    const isDark = theme?.palette?.mode === "dark";
+    return isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.4)";
+  };
+  const isSafeRoute = (() => {
+    try {
+      if (typeof window === "undefined") return false;
+      const current = new URL(window.location.href);
+      const safeUrls = [policyLinkUrl, termsLinkUrl].filter(Boolean);
+      return safeUrls.some((u) => {
+        try {
+          const target = new URL(u, current.origin);
+          return target.pathname === current.pathname;
+        } catch {
+          return false;
+        }
+      });
+    } catch {
+      return false;
+    }
+  })();
+  const effectiveBlocking = blocking && !isSafeRoute;
+  if (effectiveBlocking) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Box2,
+        {
+          sx: (theme) => ({
+            position: "fixed",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            backgroundColor: resolveBackdropColor(theme),
+            zIndex: 1299
+          })
+        }
+      ),
+      /* @__PURE__ */ jsx(Box2, { sx: positionStyle, children: bannerContent })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(
+    Snackbar,
+    {
+      open,
+      anchorOrigin: {
+        vertical: designTokens?.layout?.position === "top" ? "top" : "bottom",
+        horizontal: "center"
+      },
+      ...SnackbarProps,
+      children: bannerContent
+    }
+  );
+}
+function useThemeWithFallbacks() {
+  const theme = useTheme();
+  logger.themeCompatibility(theme);
+  return {
+    palette: {
+      primary: {
+        main: theme?.palette?.primary?.main || "#1976d2",
+        dark: theme?.palette?.primary?.dark || "#1565c0"
+      }
+    },
+    transitions: {
+      duration: {
+        shortest: theme?.transitions?.duration?.shortest || 150,
+        short: theme?.transitions?.duration?.short || 250
+      }
+    }
+  };
+}
+var FloatingPreferencesButton = React3.memo(function FloatingPreferencesButton2({
+  position = "bottom-right",
+  offset = 24,
+  icon = /* @__PURE__ */ jsx(CookieOutlined, {}),
+  tooltip,
+  FabProps,
+  hideWhenConsented = false
+}) {
+  const { openPreferences, consented } = useConsent();
+  const texts = useConsentTexts();
+  const safeTheme = useThemeWithFallbacks();
+  const designTokens = useDesignTokens();
+  const positionStyles = React3.useMemo(() => {
+    const styles = {
+      position: "fixed",
+      zIndex: 1200
+    };
+    switch (position) {
+      case "bottom-left":
+        return { ...styles, bottom: offset, left: offset };
+      case "bottom-right":
+        return { ...styles, bottom: offset, right: offset };
+      case "top-left":
+        return { ...styles, top: offset, left: offset };
+      case "top-right":
+        return { ...styles, top: offset, right: offset };
+      default:
+        return { ...styles, bottom: offset, right: offset };
+    }
+  }, [position, offset]);
+  logger.componentRender("FloatingPreferencesButton", {
+    position,
+    offset,
+    hideWhenConsented,
+    consented
+  });
+  if (hideWhenConsented && consented) {
+    logger.debug(
+      "FloatingPreferencesButton: Hidden due to hideWhenConsented=true and consented=true"
+    );
+    return null;
+  }
+  const tooltipText = tooltip ?? texts.preferencesButton ?? "Gerenciar Prefer\xEAncias de Cookies";
+  return /* @__PURE__ */ jsx(Tooltip, { title: tooltipText, placement: "top", children: /* @__PURE__ */ jsx(
+    Fab,
+    {
+      size: "medium",
+      color: "primary",
+      onClick: openPreferences,
+      sx: {
+        ...positionStyles,
+        backgroundColor: designTokens?.colors?.primary ?? safeTheme.palette.primary.main,
+        "&:hover": {
+          backgroundColor: designTokens?.colors?.primary ? designTokens?.colors?.primary : safeTheme.palette.primary.dark
+        },
+        transition: `all ${safeTheme.transitions.duration.short}ms`
+      },
+      "aria-label": tooltipText,
+      ...FabProps,
+      children: icon
+    }
+  ) });
+});
+function PreferencesModal({
+  DialogProps: DialogProps2,
+  hideBranding = false,
+  isModalOpen: isModalOpenProp,
+  preferences: preferencesProp,
+  setPreferences: setPreferencesProp,
+  closePreferences: closePreferencesProp
+}) {
+  const hookValue = useConsent();
+  const preferences = preferencesProp ?? hookValue.preferences;
+  const setPreferences = setPreferencesProp ?? hookValue.setPreferences;
+  const closePreferences = closePreferencesProp ?? hookValue.closePreferences;
+  const isModalOpen = isModalOpenProp ?? hookValue.isModalOpen;
+  const texts = useConsentTexts();
+  const designTokens = useDesignTokens();
+  const { toggleableCategories, allCategories } = useCategories();
+  const getInitialPreferences = React3.useCallback(() => {
+    const syncedPrefs = { necessary: true };
+    toggleableCategories.forEach((category) => {
+      syncedPrefs[category.id] = preferences[category.id] ?? false;
+    });
+    return syncedPrefs;
+  }, [preferences, toggleableCategories]);
+  const [tempPreferences, setTempPreferences] = React3.useState(getInitialPreferences);
+  const wasOpenRef = React3.useRef(isModalOpen);
+  React3.useEffect(() => {
+    const justOpened = isModalOpen && !wasOpenRef.current;
+    wasOpenRef.current = isModalOpen;
+    if (justOpened) {
+      queueMicrotask(() => {
+        setTempPreferences(getInitialPreferences());
+      });
+    }
+  }, [isModalOpen, getInitialPreferences]);
+  const open = DialogProps2?.open ?? isModalOpen ?? false;
+  const handleSave = () => {
+    setPreferences(tempPreferences);
+  };
+  const handleCancel = () => {
+    setTempPreferences(preferences);
+    closePreferences();
+  };
+  const modalTitleSx = (theme) => ({
+    fontSize: designTokens?.typography?.fontSize?.modal ?? void 0,
+    color: designTokens?.colors?.text ?? theme.palette.text.primary
+  });
+  const modalContentSx = (theme) => ({
+    p: designTokens?.spacing?.padding?.modal ?? void 0,
+    backgroundColor: designTokens?.colors?.background ?? theme.palette.background.paper,
+    color: designTokens?.colors?.text ?? theme.palette.text.primary
+  });
+  return /* @__PURE__ */ jsxs(Dialog, { "aria-labelledby": "cookie-pref-title", open, onClose: handleCancel, ...DialogProps2, children: [
+    /* @__PURE__ */ jsx(DialogTitle, { id: "cookie-pref-title", sx: modalTitleSx, children: texts.modalTitle }),
+    /* @__PURE__ */ jsxs(DialogContent, { dividers: true, sx: modalContentSx, children: [
+      /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "body2",
+          sx: (theme) => ({
+            mb: 2,
+            fontSize: designTokens?.typography?.fontSize?.modal ?? void 0,
+            color: designTokens?.colors?.text ?? theme.palette.text.primary
+          }),
+          children: texts.modalIntro
+        }
+      ),
+      /* @__PURE__ */ jsxs(FormGroup, { children: [
+        toggleableCategories.map((category) => {
+          const full = allCategories.find((c) => c.id === category.id);
+          const namesFromGuidance = full?.cookies ?? [];
+          const used = globalThis.__LGPD_USED_INTEGRATIONS__ || [];
+          const descriptors = getCookiesInfoForCategory(category.id, used);
+          const enrichedDescriptors = descriptors.map((desc) => {
+            if (desc.purpose && desc.duration && desc.provider) {
+              return desc;
+            }
+            return {
+              name: desc.name,
+              purpose: desc.purpose || "-",
+              duration: desc.duration || "-",
+              provider: desc.provider || "-"
+            };
+          });
+          const merged = [
+            ...enrichedDescriptors,
+            ...namesFromGuidance.filter((n) => !enrichedDescriptors.find((d) => d.name === n)).map((n) => ({ name: n, purpose: "-", duration: "-", provider: "-" }))
+          ];
+          let mergedFinal = merged;
+          try {
+            if (merged.length === 0) {
+              const gmap = globalThis.__LGPD_INTEGRATIONS_MAP__ || {};
+              const scriptRows = Object.entries(gmap).filter(([, cat]) => cat === category.id).map(([id]) => ({
+                name: `(script) ${id}`,
+                purpose: "Script de integra\xE7\xE3o ativo",
+                duration: "-",
+                provider: "-"
+              }));
+              if (scriptRows.length > 0) mergedFinal = scriptRows;
+            }
+          } catch {
+          }
+          return /* @__PURE__ */ jsxs(Box2, { sx: { mb: 1 }, children: [
+            /* @__PURE__ */ jsx(
+              FormControlLabel,
+              {
+                control: /* @__PURE__ */ jsx(
+                  Switch,
+                  {
+                    checked: tempPreferences[category.id] ?? false,
+                    onChange: (e) => setTempPreferences((prev) => ({
+                      ...prev,
+                      [category.id]: e.target.checked
+                    }))
+                  }
+                ),
+                label: `${category.name} - ${category.description}`
+              }
+            ),
+            /* @__PURE__ */ jsxs("details", { style: { marginLeft: 48 }, children: [
+              /* @__PURE__ */ jsx("summary", { children: "Ver detalhes" }),
+              /* @__PURE__ */ jsx(Box2, { sx: { mt: 1 }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+                /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: "Cookie" }),
+                  /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: "Finalidade" }),
+                  /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: "Dura\xE7\xE3o" }),
+                  /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: "Fornecedor" })
+                ] }) }),
+                /* @__PURE__ */ jsx("tbody", { children: mergedFinal.map((d, idx) => /* @__PURE__ */ jsxs("tr", { children: [
+                  /* @__PURE__ */ jsx("td", { children: d.name }),
+                  /* @__PURE__ */ jsx("td", { children: d.purpose }),
+                  /* @__PURE__ */ jsx("td", { children: d.duration }),
+                  /* @__PURE__ */ jsx("td", { children: d.provider })
+                ] }, d.name + idx)) })
+              ] }) })
+            ] })
+          ] }, category.id);
+        }),
+        /* @__PURE__ */ jsx(FormControlLabel, { control: /* @__PURE__ */ jsx(Switch, { checked: true, disabled: true }), label: texts.necessaryAlwaysOn }),
+        /* @__PURE__ */ jsxs("details", { style: { marginLeft: 48 }, children: [
+          /* @__PURE__ */ jsx("summary", { children: "Ver detalhes" }),
+          /* @__PURE__ */ jsx(Box2, { sx: { mt: 1 }, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+              /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: "Cookie" }),
+              /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: "Finalidade" }),
+              /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: "Dura\xE7\xE3o" }),
+              /* @__PURE__ */ jsx("th", { style: { textAlign: "left" }, children: "Fornecedor" })
+            ] }) }),
+            /* @__PURE__ */ jsx("tbody", { children: (() => {
+              const used = globalThis.__LGPD_USED_INTEGRATIONS__ || [];
+              const necessaryCookies = getCookiesInfoForCategory(
+                "necessary",
+                used
+              );
+              return necessaryCookies.map((d, idx) => /* @__PURE__ */ jsxs("tr", { children: [
+                /* @__PURE__ */ jsx("td", { children: d.name }),
+                /* @__PURE__ */ jsx("td", { children: d.purpose || "-" }),
+                /* @__PURE__ */ jsx("td", { children: d.duration || "-" }),
+                /* @__PURE__ */ jsx("td", { children: d.provider || "-" })
+              ] }, d.name + idx));
+            })() })
+          ] }) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogActions, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outlined", onClick: handleCancel, children: texts.close }),
+      /* @__PURE__ */ jsx(Button, { variant: "contained", onClick: handleSave, children: texts.save })
+    ] }),
+    !hideBranding && /* @__PURE__ */ jsx(Branding, { variant: "modal" })
+  ] });
+}
+function ConsentProvider({
+  disableDefaultModal = false,
+  disableDefaultBanner = false,
+  disableDefaultFloatingButton = false,
+  PreferencesModalComponent,
+  CookieBannerComponent,
+  FloatingPreferencesButtonComponent,
+  theme,
+  hideBranding,
+  cookieBannerProps,
+  preferencesModalProps,
+  floatingPreferencesButtonProps,
+  children,
+  ...coreProps
+}) {
+  const modalComponent = disableDefaultModal ? PreferencesModalComponent : PreferencesModalComponent || PreferencesModal;
+  const bannerComponent = disableDefaultBanner ? CookieBannerComponent : CookieBannerComponent || CookieBanner;
+  const floatingButtonComponent = disableDefaultFloatingButton ? FloatingPreferencesButtonComponent : FloatingPreferencesButtonComponent || FloatingPreferencesButton;
+  const mergedCookieBannerProps = {
+    ...cookieBannerProps,
+    hideBranding: cookieBannerProps?.hideBranding ?? hideBranding
+  };
+  const mergedPreferencesModalProps = {
+    ...preferencesModalProps,
+    hideBranding: preferencesModalProps?.hideBranding ?? hideBranding
+  };
+  const provider = /* @__PURE__ */ jsx(
+    ConsentProvider$1,
+    {
+      ...coreProps,
+      hideBranding,
+      cookieBannerProps: mergedCookieBannerProps,
+      preferencesModalProps: mergedPreferencesModalProps,
+      floatingPreferencesButtonProps,
+      CookieBannerComponent: bannerComponent,
+      PreferencesModalComponent: modalComponent,
+      FloatingPreferencesButtonComponent: floatingButtonComponent,
+      children
+    }
+  );
+  if (!theme) return provider;
+  return /* @__PURE__ */ jsx(ThemeProvider, { theme, children: provider });
+}
+ConsentProvider.displayName = "ConsentProvider(MUI)";
+
+export { Branding, ConsentProvider, CookieBanner, FloatingPreferencesButton, PreferencesModal };

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@react-lgpd-consent/mui",
+  "version": "0.5.0",
+  "description": "Componentes Material-UI prontos para gerenciamento de consentimento LGPD/ANPD",
+  "keywords": [
+    "lgpd",
+    "anpd",
+    "consent",
+    "cookies",
+    "react",
+    "typescript",
+    "material-ui",
+    "mui",
+    "privacy",
+    "gdpr",
+    "acessibilidade",
+    "ui-components"
+  ],
+  "author": {
+    "name": "Luciano Édipo",
+    "email": "luciano.psilva@anpd.gov.br",
+    "url": "https://github.com/lucianoedipo"
+  },
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "peerDependencies": {
+    "@mui/material": "^7.0.0 || ^6.0.0 || ^5.15.0",
+    "@mui/icons-material": "^7.0.0 || ^6.0.0 || ^5.15.0",
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@mui/icons-material": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@react-lgpd-consent/core": "^0.5.0"
+  },
+  "scripts": {
+    "clean": "rimraf dist",
+    "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 \"src/**/*.{ts,tsx}\" --cache",
+    "lint:ci": "eslint \"src/**/*.{ts,tsx}\" --cache --max-warnings=0",
+    "format": "prettier --write \"src/**/*.{ts,tsx,json,md}\"",
+    "type-check": "tsc --noEmit",
+    "test": "jest --config ../../jest.config.mjs"
+  }
+}