@react-lgpd-consent/mui 0.7.2 → 0.9.0

package/README.md

@@ -97,9 +97,9 @@ import { ConsentProvider } from '@react-lgpd-consent/mui'
 ### Presets ANPD
 
 ```tsx
-import { createAnpdCategories } from '@react-lgpd-consent/mui'
+import { createAnpdCategoriesConfig } from '@react-lgpd-consent/mui'
 
-const categories = createAnpdCategories({
+const categories = createAnpdCategoriesConfig({
   include: ['analytics', 'marketing']
 })
 
@@ -151,7 +151,10 @@ function CustomUI() {
 <CookieBanner
   blocking={true}
   policyLinkUrl="/privacy"
-  SnackbarProps={{ anchorOrigin: { vertical: 'top', horizontal: 'center' } }}
+  position="bottom"
+  anchor="center"
+  offset={64}
+  SnackbarProps={{ autoHideDuration: null }}
 />
 
 <FloatingPreferencesButton
@@ -161,6 +164,36 @@ function CustomUI() {
 />
 ```
 
+### Posicionamento Configurável
+
+Use as props `position`, `anchor` e `offset` para evitar colisões com footers fixos, chat widgets e outros elementos flutuantes:
+
+```tsx
+<ConsentProvider
+  categories={{ enabledCategories: ['analytics'] }}
+  cookieBannerProps={{
+    position: 'bottom',
+    anchor: 'center',
+    offset: 72 // ajuste conforme necessário
+  }}
+  floatingPreferencesButtonProps={{
+    position: 'bottom-right',
+    offset: 96
+  }}
+/>
+```
+
+Para bloquear navegação até a decisão, use `blockingMode="hard"` no provider:
+
+```tsx
+<ConsentProvider
+  categories={{ enabledCategories: ['analytics'] }}
+  blocking
+  blockingMode="hard"
+  blockingStrategy="provider"
+/>
+```
+
 ## 📚 Documentação
 
 - [Documentação Principal](https://lucianoedipo.github.io/react-lgpd-consent/)
@@ -169,8 +202,8 @@ function CustomUI() {
 
 ## 🔗 Pacotes Relacionados
 
-- [`@react-lgpd-consent/core`](../core) - Núcleo sem dependências de UI
-- [`react-lgpd-consent`](../react-lgpd-consent) - Pacote agregador (core + mui)
+- [`@react-lgpd-consent/core`](../core/README.md) - Núcleo sem dependências de UI
+- [`react-lgpd-consent`](../react-lgpd-consent/README.md) - Pacote agregador (core + mui)
 
 ## 📄 Licença
 

package/dist/index.cjs

@@ -146,7 +146,10 @@ function CookieBanner({
   PaperProps,
   texts: textsProp,
   language,
-  textVariant
+  textVariant,
+  position,
+  anchor,
+  offset
 }) {
   const { consented, acceptAll, rejectAll, openPreferences } = core.useConsent();
   const baseTexts = core.useConsentTexts();
@@ -243,13 +246,30 @@ function CookieBanner({
     )
   ] }) });
   const resolveBannerZIndex = (theme) => designTokens?.layout?.zIndex?.banner ?? theme?.zIndex?.snackbar ?? 1400;
+  const resolvedPosition = position ?? (designTokens?.layout?.position === "top" ? "top" : "bottom");
+  const resolvedAnchor = anchor ?? "center";
+  const resolvedOffset = offset ?? 0;
+  const resolvedWidth = designTokens?.layout?.width?.desktop ?? "100%";
+  const resolveHorizontalPosition = (width) => {
+    const isFullWidth = width === "100%" || width === "100vw" || width === "100dvw";
+    if (isFullWidth) {
+      return { left: 0, right: 0 };
+    }
+    switch (resolvedAnchor) {
+      case "left":
+        return { left: 0 };
+      case "right":
+        return { right: 0 };
+      default:
+        return { left: "50%", transform: "translateX(-50%)" };
+    }
+  };
   const positionStyle = (theme) => ({
     position: "fixed",
     zIndex: resolveBannerZIndex(theme),
-    ...designTokens?.layout?.position === "top" ? { top: 0 } : { bottom: 0 },
-    left: 0,
-    right: 0,
-    width: designTokens?.layout?.width?.desktop ?? "100%",
+    ...resolvedPosition === "top" ? { top: resolvedOffset } : { bottom: resolvedOffset },
+    ...resolveHorizontalPosition(resolvedWidth),
+    width: resolvedWidth,
     p: 2
   });
   const backdropToken = designTokens?.layout?.backdrop;
@@ -303,15 +323,19 @@ function CookieBanner({
       /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: positionStyle, "data-testid": "lgpd-cookie-banner-wrapper", children: bannerContent })
     ] });
   }
+  const resolvedAnchorOrigin = {
+    vertical: SnackbarProps?.anchorOrigin?.vertical ?? resolvedPosition,
+    horizontal: SnackbarProps?.anchorOrigin?.horizontal ?? resolvedAnchor
+  };
+  const offsetSx = resolvedOffset > 0 ? resolvedAnchorOrigin.vertical === "top" ? { top: resolvedOffset } : { bottom: resolvedOffset } : void 0;
+  const snackbarSx = offsetSx && SnackbarProps?.sx ? Array.isArray(SnackbarProps.sx) ? [offsetSx, ...SnackbarProps.sx] : [offsetSx, SnackbarProps.sx] : offsetSx ?? SnackbarProps?.sx;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Snackbar__default.default,
     {
       open,
-      anchorOrigin: {
-        vertical: designTokens?.layout?.position === "top" ? "top" : "bottom",
-        horizontal: "center"
-      },
+      anchorOrigin: resolvedAnchorOrigin,
       ...SnackbarProps,
+      sx: snackbarSx,
       children: bannerContent
     }
   );
@@ -464,6 +488,7 @@ function PreferencesModal({
     setTempPreferences(preferences);
     closePreferences();
   };
+  const descriptionId = "cookie-pref-description";
   const modalTitleSx = (theme) => ({
     fontSize: designTokens?.typography?.fontSize?.modal ?? void 0,
     color: designTokens?.colors?.text ?? theme.palette.text.primary
@@ -488,11 +513,13 @@ function PreferencesModal({
     ...modalZIndexToken ? { style: { zIndex: modalZIndexToken } } : {},
     "data-testid": dialogRest?.slotProps?.root?.["data-testid"] ?? "lgpd-preferences-modal-root"
   };
+  const ariaDescribedBy = dialogRest["aria-describedby"] ?? descriptionId;
   const mergedDialogProps = {
     open,
     fullWidth: true,
     maxWidth: "sm",
     ...dialogRest,
+    "aria-describedby": ariaDescribedBy,
     slotProps: {
       ...dialogRest?.slotProps,
       root: rootSlotProps
@@ -504,6 +531,7 @@ function PreferencesModal({
       /* @__PURE__ */ jsxRuntime.jsx(
         Typography__default.default,
         {
+          id: descriptionId,
           variant: "body2",
           sx: (theme) => ({
             mb: 2,

package/dist/index.d.cts

@@ -637,6 +637,21 @@ interface CookieBannerProps {
      * Variação de tom local para resolver `texts.variants`.
      */
     textVariant?: 'formal' | 'casual' | 'concise' | 'detailed';
+    /**
+     * Posição vertical do banner (top/bottom).
+     * Sobrescreve `designTokens.layout.position` quando definido.
+     */
+    position?: 'top' | 'bottom';
+    /**
+     * Âncora horizontal do banner (left/center/right).
+     * Útil para alinhar o snackbar ou banners com largura menor que 100%.
+     */
+    anchor?: 'left' | 'center' | 'right';
+    /**
+     * Offset em px para afastar o banner das bordas da viewport.
+     * Exemplo: `offset={64}` empurra o banner 64px para cima quando `position="bottom"`.
+     */
+    offset?: number;
 }
 /**
  * Banner principal de consentimento LGPD que solicita decisão do usuário sobre cookies.
@@ -729,7 +744,7 @@ interface CookieBannerProps {
  * @public
  * @since 0.1.0
  */
-declare function CookieBanner({ policyLinkUrl, termsLinkUrl, debug, blocking, hideBranding, SnackbarProps, PaperProps, texts: textsProp, language, textVariant, }: Readonly<CookieBannerProps>): react_jsx_runtime.JSX.Element | null;
+declare function CookieBanner({ policyLinkUrl, termsLinkUrl, debug, blocking, hideBranding, SnackbarProps, PaperProps, texts: textsProp, language, textVariant, position, anchor, offset, }: Readonly<CookieBannerProps>): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Propriedades para customizar o comportamento e aparência do FloatingPreferencesButton.

package/dist/index.d.ts

@@ -637,6 +637,21 @@ interface CookieBannerProps {
      * Variação de tom local para resolver `texts.variants`.
      */
     textVariant?: 'formal' | 'casual' | 'concise' | 'detailed';
+    /**
+     * Posição vertical do banner (top/bottom).
+     * Sobrescreve `designTokens.layout.position` quando definido.
+     */
+    position?: 'top' | 'bottom';
+    /**
+     * Âncora horizontal do banner (left/center/right).
+     * Útil para alinhar o snackbar ou banners com largura menor que 100%.
+     */
+    anchor?: 'left' | 'center' | 'right';
+    /**
+     * Offset em px para afastar o banner das bordas da viewport.
+     * Exemplo: `offset={64}` empurra o banner 64px para cima quando `position="bottom"`.
+     */
+    offset?: number;
 }
 /**
  * Banner principal de consentimento LGPD que solicita decisão do usuário sobre cookies.
@@ -729,7 +744,7 @@ interface CookieBannerProps {
  * @public
  * @since 0.1.0
  */
-declare function CookieBanner({ policyLinkUrl, termsLinkUrl, debug, blocking, hideBranding, SnackbarProps, PaperProps, texts: textsProp, language, textVariant, }: Readonly<CookieBannerProps>): react_jsx_runtime.JSX.Element | null;
+declare function CookieBanner({ policyLinkUrl, termsLinkUrl, debug, blocking, hideBranding, SnackbarProps, PaperProps, texts: textsProp, language, textVariant, position, anchor, offset, }: Readonly<CookieBannerProps>): react_jsx_runtime.JSX.Element | null;
 
 /**
  * Propriedades para customizar o comportamento e aparência do FloatingPreferencesButton.

package/dist/index.js

@@ -108,7 +108,10 @@ function CookieBanner({
   PaperProps,
   texts: textsProp,
   language,
-  textVariant
+  textVariant,
+  position,
+  anchor,
+  offset
 }) {
   const { consented, acceptAll, rejectAll, openPreferences } = useConsent();
   const baseTexts = useConsentTexts();
@@ -205,13 +208,30 @@ function CookieBanner({
     )
   ] }) });
   const resolveBannerZIndex = (theme) => designTokens?.layout?.zIndex?.banner ?? theme?.zIndex?.snackbar ?? 1400;
+  const resolvedPosition = position ?? (designTokens?.layout?.position === "top" ? "top" : "bottom");
+  const resolvedAnchor = anchor ?? "center";
+  const resolvedOffset = offset ?? 0;
+  const resolvedWidth = designTokens?.layout?.width?.desktop ?? "100%";
+  const resolveHorizontalPosition = (width) => {
+    const isFullWidth = width === "100%" || width === "100vw" || width === "100dvw";
+    if (isFullWidth) {
+      return { left: 0, right: 0 };
+    }
+    switch (resolvedAnchor) {
+      case "left":
+        return { left: 0 };
+      case "right":
+        return { right: 0 };
+      default:
+        return { left: "50%", transform: "translateX(-50%)" };
+    }
+  };
   const positionStyle = (theme) => ({
     position: "fixed",
     zIndex: resolveBannerZIndex(theme),
-    ...designTokens?.layout?.position === "top" ? { top: 0 } : { bottom: 0 },
-    left: 0,
-    right: 0,
-    width: designTokens?.layout?.width?.desktop ?? "100%",
+    ...resolvedPosition === "top" ? { top: resolvedOffset } : { bottom: resolvedOffset },
+    ...resolveHorizontalPosition(resolvedWidth),
+    width: resolvedWidth,
     p: 2
   });
   const backdropToken = designTokens?.layout?.backdrop;
@@ -265,15 +285,19 @@ function CookieBanner({
       /* @__PURE__ */ jsx(Box2, { sx: positionStyle, "data-testid": "lgpd-cookie-banner-wrapper", children: bannerContent })
     ] });
   }
+  const resolvedAnchorOrigin = {
+    vertical: SnackbarProps?.anchorOrigin?.vertical ?? resolvedPosition,
+    horizontal: SnackbarProps?.anchorOrigin?.horizontal ?? resolvedAnchor
+  };
+  const offsetSx = resolvedOffset > 0 ? resolvedAnchorOrigin.vertical === "top" ? { top: resolvedOffset } : { bottom: resolvedOffset } : void 0;
+  const snackbarSx = offsetSx && SnackbarProps?.sx ? Array.isArray(SnackbarProps.sx) ? [offsetSx, ...SnackbarProps.sx] : [offsetSx, SnackbarProps.sx] : offsetSx ?? SnackbarProps?.sx;
   return /* @__PURE__ */ jsx(
     Snackbar,
     {
       open,
-      anchorOrigin: {
-        vertical: designTokens?.layout?.position === "top" ? "top" : "bottom",
-        horizontal: "center"
-      },
+      anchorOrigin: resolvedAnchorOrigin,
       ...SnackbarProps,
+      sx: snackbarSx,
       children: bannerContent
     }
   );
@@ -426,6 +450,7 @@ function PreferencesModal({
     setTempPreferences(preferences);
     closePreferences();
   };
+  const descriptionId = "cookie-pref-description";
   const modalTitleSx = (theme) => ({
     fontSize: designTokens?.typography?.fontSize?.modal ?? void 0,
     color: designTokens?.colors?.text ?? theme.palette.text.primary
@@ -450,11 +475,13 @@ function PreferencesModal({
     ...modalZIndexToken ? { style: { zIndex: modalZIndexToken } } : {},
     "data-testid": dialogRest?.slotProps?.root?.["data-testid"] ?? "lgpd-preferences-modal-root"
   };
+  const ariaDescribedBy = dialogRest["aria-describedby"] ?? descriptionId;
   const mergedDialogProps = {
     open,
     fullWidth: true,
     maxWidth: "sm",
     ...dialogRest,
+    "aria-describedby": ariaDescribedBy,
     slotProps: {
       ...dialogRest?.slotProps,
       root: rootSlotProps
@@ -466,6 +493,7 @@ function PreferencesModal({
       /* @__PURE__ */ jsx(
         Typography,
         {
+          id: descriptionId,
           variant: "body2",
           sx: (theme) => ({
             mb: 2,

package/dist/ui.cjs

@@ -145,7 +145,10 @@ function CookieBanner({
   PaperProps,
   texts: textsProp,
   language,
-  textVariant
+  textVariant,
+  position,
+  anchor,
+  offset
 }) {
   const { consented, acceptAll, rejectAll, openPreferences } = core.useConsent();
   const baseTexts = core.useConsentTexts();
@@ -242,13 +245,30 @@ function CookieBanner({
     )
   ] }) });
   const resolveBannerZIndex = (theme) => designTokens?.layout?.zIndex?.banner ?? theme?.zIndex?.snackbar ?? 1400;
+  const resolvedPosition = position ?? (designTokens?.layout?.position === "top" ? "top" : "bottom");
+  const resolvedAnchor = anchor ?? "center";
+  const resolvedOffset = offset ?? 0;
+  const resolvedWidth = designTokens?.layout?.width?.desktop ?? "100%";
+  const resolveHorizontalPosition = (width) => {
+    const isFullWidth = width === "100%" || width === "100vw" || width === "100dvw";
+    if (isFullWidth) {
+      return { left: 0, right: 0 };
+    }
+    switch (resolvedAnchor) {
+      case "left":
+        return { left: 0 };
+      case "right":
+        return { right: 0 };
+      default:
+        return { left: "50%", transform: "translateX(-50%)" };
+    }
+  };
   const positionStyle = (theme) => ({
     position: "fixed",
     zIndex: resolveBannerZIndex(theme),
-    ...designTokens?.layout?.position === "top" ? { top: 0 } : { bottom: 0 },
-    left: 0,
-    right: 0,
-    width: designTokens?.layout?.width?.desktop ?? "100%",
+    ...resolvedPosition === "top" ? { top: resolvedOffset } : { bottom: resolvedOffset },
+    ...resolveHorizontalPosition(resolvedWidth),
+    width: resolvedWidth,
     p: 2
   });
   const backdropToken = designTokens?.layout?.backdrop;
@@ -302,15 +322,19 @@ function CookieBanner({
       /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: positionStyle, "data-testid": "lgpd-cookie-banner-wrapper", children: bannerContent })
     ] });
   }
+  const resolvedAnchorOrigin = {
+    vertical: SnackbarProps?.anchorOrigin?.vertical ?? resolvedPosition,
+    horizontal: SnackbarProps?.anchorOrigin?.horizontal ?? resolvedAnchor
+  };
+  const offsetSx = resolvedOffset > 0 ? resolvedAnchorOrigin.vertical === "top" ? { top: resolvedOffset } : { bottom: resolvedOffset } : void 0;
+  const snackbarSx = offsetSx && SnackbarProps?.sx ? Array.isArray(SnackbarProps.sx) ? [offsetSx, ...SnackbarProps.sx] : [offsetSx, SnackbarProps.sx] : offsetSx ?? SnackbarProps?.sx;
   return /* @__PURE__ */ jsxRuntime.jsx(
     Snackbar__default.default,
     {
       open,
-      anchorOrigin: {
-        vertical: designTokens?.layout?.position === "top" ? "top" : "bottom",
-        horizontal: "center"
-      },
+      anchorOrigin: resolvedAnchorOrigin,
       ...SnackbarProps,
+      sx: snackbarSx,
       children: bannerContent
     }
   );
@@ -463,6 +487,7 @@ function PreferencesModal({
     setTempPreferences(preferences);
     closePreferences();
   };
+  const descriptionId = "cookie-pref-description";
   const modalTitleSx = (theme) => ({
     fontSize: designTokens?.typography?.fontSize?.modal ?? void 0,
     color: designTokens?.colors?.text ?? theme.palette.text.primary
@@ -487,11 +512,13 @@ function PreferencesModal({
     ...modalZIndexToken ? { style: { zIndex: modalZIndexToken } } : {},
     "data-testid": dialogRest?.slotProps?.root?.["data-testid"] ?? "lgpd-preferences-modal-root"
   };
+  const ariaDescribedBy = dialogRest["aria-describedby"] ?? descriptionId;
   const mergedDialogProps = {
     open,
     fullWidth: true,
     maxWidth: "sm",
     ...dialogRest,
+    "aria-describedby": ariaDescribedBy,
     slotProps: {
       ...dialogRest?.slotProps,
       root: rootSlotProps
@@ -503,6 +530,7 @@ function PreferencesModal({
       /* @__PURE__ */ jsxRuntime.jsx(
         Typography__default.default,
         {
+          id: descriptionId,
           variant: "body2",
           sx: (theme) => ({
             mb: 2,

package/dist/ui.js

@@ -104,7 +104,10 @@ function CookieBanner({
   PaperProps,
   texts: textsProp,
   language,
-  textVariant
+  textVariant,
+  position,
+  anchor,
+  offset
 }) {
   const { consented, acceptAll, rejectAll, openPreferences } = useConsent();
   const baseTexts = useConsentTexts();
@@ -201,13 +204,30 @@ function CookieBanner({
     )
   ] }) });
   const resolveBannerZIndex = (theme) => designTokens?.layout?.zIndex?.banner ?? theme?.zIndex?.snackbar ?? 1400;
+  const resolvedPosition = position ?? (designTokens?.layout?.position === "top" ? "top" : "bottom");
+  const resolvedAnchor = anchor ?? "center";
+  const resolvedOffset = offset ?? 0;
+  const resolvedWidth = designTokens?.layout?.width?.desktop ?? "100%";
+  const resolveHorizontalPosition = (width) => {
+    const isFullWidth = width === "100%" || width === "100vw" || width === "100dvw";
+    if (isFullWidth) {
+      return { left: 0, right: 0 };
+    }
+    switch (resolvedAnchor) {
+      case "left":
+        return { left: 0 };
+      case "right":
+        return { right: 0 };
+      default:
+        return { left: "50%", transform: "translateX(-50%)" };
+    }
+  };
   const positionStyle = (theme) => ({
     position: "fixed",
     zIndex: resolveBannerZIndex(theme),
-    ...designTokens?.layout?.position === "top" ? { top: 0 } : { bottom: 0 },
-    left: 0,
-    right: 0,
-    width: designTokens?.layout?.width?.desktop ?? "100%",
+    ...resolvedPosition === "top" ? { top: resolvedOffset } : { bottom: resolvedOffset },
+    ...resolveHorizontalPosition(resolvedWidth),
+    width: resolvedWidth,
     p: 2
   });
   const backdropToken = designTokens?.layout?.backdrop;
@@ -261,15 +281,19 @@ function CookieBanner({
       /* @__PURE__ */ jsx(Box2, { sx: positionStyle, "data-testid": "lgpd-cookie-banner-wrapper", children: bannerContent })
     ] });
   }
+  const resolvedAnchorOrigin = {
+    vertical: SnackbarProps?.anchorOrigin?.vertical ?? resolvedPosition,
+    horizontal: SnackbarProps?.anchorOrigin?.horizontal ?? resolvedAnchor
+  };
+  const offsetSx = resolvedOffset > 0 ? resolvedAnchorOrigin.vertical === "top" ? { top: resolvedOffset } : { bottom: resolvedOffset } : void 0;
+  const snackbarSx = offsetSx && SnackbarProps?.sx ? Array.isArray(SnackbarProps.sx) ? [offsetSx, ...SnackbarProps.sx] : [offsetSx, SnackbarProps.sx] : offsetSx ?? SnackbarProps?.sx;
   return /* @__PURE__ */ jsx(
     Snackbar,
     {
       open,
-      anchorOrigin: {
-        vertical: designTokens?.layout?.position === "top" ? "top" : "bottom",
-        horizontal: "center"
-      },
+      anchorOrigin: resolvedAnchorOrigin,
       ...SnackbarProps,
+      sx: snackbarSx,
       children: bannerContent
     }
   );
@@ -422,6 +446,7 @@ function PreferencesModal({
     setTempPreferences(preferences);
     closePreferences();
   };
+  const descriptionId = "cookie-pref-description";
   const modalTitleSx = (theme) => ({
     fontSize: designTokens?.typography?.fontSize?.modal ?? void 0,
     color: designTokens?.colors?.text ?? theme.palette.text.primary
@@ -446,11 +471,13 @@ function PreferencesModal({
     ...modalZIndexToken ? { style: { zIndex: modalZIndexToken } } : {},
     "data-testid": dialogRest?.slotProps?.root?.["data-testid"] ?? "lgpd-preferences-modal-root"
   };
+  const ariaDescribedBy = dialogRest["aria-describedby"] ?? descriptionId;
   const mergedDialogProps = {
     open,
     fullWidth: true,
     maxWidth: "sm",
     ...dialogRest,
+    "aria-describedby": ariaDescribedBy,
     slotProps: {
       ...dialogRest?.slotProps,
       root: rootSlotProps
@@ -462,6 +489,7 @@ function PreferencesModal({
       /* @__PURE__ */ jsx(
         Typography,
         {
+          id: descriptionId,
           variant: "body2",
           sx: (theme) => ({
             mb: 2,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-lgpd-consent/mui",
-  "version": "0.7.2",
+  "version": "0.9.0",
   "description": "Componentes Material-UI prontos para gerenciamento de consentimento LGPD",
   "keywords": [
     "lgpd",
@@ -63,7 +63,7 @@
     }
   },
   "dependencies": {
-    "@react-lgpd-consent/core": "^0.7.2"
+    "@react-lgpd-consent/core": "^0.9.0"
   },
   "scripts": {
     "clean": "rimraf dist",