@react-lgpd-consent/mui 0.8.0 → 0.9.1

package/README.md

@@ -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,25 @@ 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
@@ -180,8 +202,8 @@ Para bloquear navegação até a decisão, use `blockingMode="hard"` no provider
 
 ## 🔗 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,18 +323,13 @@ function CookieBanner({
       /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: positionStyle, "data-testid": "lgpd-cookie-banner-wrapper", children: bannerContent })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Snackbar__default.default,
-    {
-      open,
-      anchorOrigin: {
-        vertical: designTokens?.layout?.position === "top" ? "top" : "bottom",
-        horizontal: "center"
-      },
-      ...SnackbarProps,
-      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: resolvedAnchorOrigin, ...SnackbarProps, sx: snackbarSx, children: bannerContent });
 }
 function useThemeWithFallbacks() {
   const theme = styles.useTheme();

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,18 +285,13 @@ function CookieBanner({
       /* @__PURE__ */ jsx(Box2, { sx: positionStyle, "data-testid": "lgpd-cookie-banner-wrapper", children: bannerContent })
     ] });
   }
-  return /* @__PURE__ */ jsx(
-    Snackbar,
-    {
-      open,
-      anchorOrigin: {
-        vertical: designTokens?.layout?.position === "top" ? "top" : "bottom",
-        horizontal: "center"
-      },
-      ...SnackbarProps,
-      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: resolvedAnchorOrigin, ...SnackbarProps, sx: snackbarSx, children: bannerContent });
 }
 function useThemeWithFallbacks() {
   const theme = useTheme();

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,18 +322,13 @@ function CookieBanner({
       /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: positionStyle, "data-testid": "lgpd-cookie-banner-wrapper", children: bannerContent })
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Snackbar__default.default,
-    {
-      open,
-      anchorOrigin: {
-        vertical: designTokens?.layout?.position === "top" ? "top" : "bottom",
-        horizontal: "center"
-      },
-      ...SnackbarProps,
-      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: resolvedAnchorOrigin, ...SnackbarProps, sx: snackbarSx, children: bannerContent });
 }
 function useThemeWithFallbacks() {
   const theme = styles.useTheme();

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,18 +281,13 @@ function CookieBanner({
       /* @__PURE__ */ jsx(Box2, { sx: positionStyle, "data-testid": "lgpd-cookie-banner-wrapper", children: bannerContent })
     ] });
   }
-  return /* @__PURE__ */ jsx(
-    Snackbar,
-    {
-      open,
-      anchorOrigin: {
-        vertical: designTokens?.layout?.position === "top" ? "top" : "bottom",
-        horizontal: "center"
-      },
-      ...SnackbarProps,
-      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: resolvedAnchorOrigin, ...SnackbarProps, sx: snackbarSx, children: bannerContent });
 }
 function useThemeWithFallbacks() {
   const theme = useTheme();

package/package.json

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