analytica-frontend-lib 1.1.35 → 1.1.36

package/dist/NotificationCard/index.mjs

@@ -1,5 +1,6 @@
 // src/components/NotificationCard/NotificationCard.tsx
-import { DotsThreeVertical } from "phosphor-react";
+import { DotsThreeVertical, Bell } from "phosphor-react";
+import { useState as useState3, useEffect as useEffect4 } from "react";
 
 // src/utils/utils.ts
 import { clsx } from "clsx";
@@ -589,8 +590,327 @@ var SkeletonTable = forwardRef2(
   }
 );
 
+// src/components/IconButton/IconButton.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var IconButton = forwardRef3(
+  ({ icon, size = "md", active = false, className = "", disabled, ...props }, ref) => {
+    const baseClasses = [
+      "inline-flex",
+      "items-center",
+      "justify-center",
+      "rounded-lg",
+      "font-medium",
+      "bg-transparent",
+      "text-text-950",
+      "cursor-pointer",
+      "hover:bg-primary-600",
+      "hover:text-text",
+      "focus-visible:outline-none",
+      "focus-visible:ring-2",
+      "focus-visible:ring-offset-0",
+      "focus-visible:ring-indicator-info",
+      "disabled:opacity-50",
+      "disabled:cursor-not-allowed",
+      "disabled:pointer-events-none"
+    ];
+    const sizeClasses = {
+      sm: ["w-6", "h-6", "text-sm"],
+      md: ["w-10", "h-10", "text-base"]
+    };
+    const activeClasses = active ? ["!bg-primary-50", "!text-primary-950", "hover:!bg-primary-100"] : [];
+    const allClasses = [
+      ...baseClasses,
+      ...sizeClasses[size],
+      ...activeClasses
+    ].join(" ");
+    const ariaLabel = props["aria-label"] ?? "Bot\xE3o de a\xE7\xE3o";
+    return /* @__PURE__ */ jsx4(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(allClasses, className),
+        disabled,
+        "aria-pressed": active,
+        "aria-label": ariaLabel,
+        ...props,
+        children: /* @__PURE__ */ jsx4("span", { className: "flex items-center justify-center", children: icon })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+var IconButton_default = IconButton;
+
+// src/components/Modal/Modal.tsx
+import { useEffect as useEffect2 } from "react";
+import { X } from "phosphor-react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var SIZE_CLASSES2 = {
+  xs: "max-w-[360px]",
+  sm: "max-w-[420px]",
+  md: "max-w-[510px]",
+  lg: "max-w-[640px]",
+  xl: "max-w-[970px]"
+};
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  children,
+  size = "md",
+  className = "",
+  closeOnBackdropClick = true,
+  closeOnEscape = true,
+  footer,
+  hideCloseButton = false
+}) => {
+  useEffect2(() => {
+    if (!isOpen || !closeOnEscape) return;
+    const handleEscape = (event) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [isOpen, closeOnEscape, onClose]);
+  useEffect2(() => {
+    const originalOverflow = document.body.style.overflow;
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = originalOverflow;
+    }
+    return () => {
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [isOpen]);
+  const handleBackdropClick = (event) => {
+    if (closeOnBackdropClick && event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+  const handleBackdropKeyDown = (event) => {
+    if (closeOnBackdropClick && (event.key === "Enter" || event.key === " ")) {
+      onClose();
+    }
+  };
+  if (!isOpen) return null;
+  const sizeClasses = SIZE_CLASSES2[size];
+  const baseClasses = "bg-secondary-50 rounded-3xl shadow-hard-shadow-2 border border-border-100 w-full mx-4";
+  const dialogResetClasses = "p-0 m-0 border-none outline-none max-h-none static";
+  const modalClasses = cn(
+    baseClasses,
+    sizeClasses,
+    dialogResetClasses,
+    className
+  );
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-xs",
+      onClick: handleBackdropClick,
+      onKeyDown: handleBackdropKeyDown,
+      role: "button",
+      tabIndex: closeOnBackdropClick ? 0 : -1,
+      "aria-label": "Fechar modal clicando no fundo",
+      children: /* @__PURE__ */ jsxs4("dialog", { className: modalClasses, "aria-labelledby": "modal-title", open: true, children: [
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between px-6 py-6", children: [
+          /* @__PURE__ */ jsx5("h2", { id: "modal-title", className: "text-lg font-semibold text-text-950", children: title }),
+          !hideCloseButton && /* @__PURE__ */ jsx5(
+            "button",
+            {
+              onClick: onClose,
+              className: "p-1 text-text-500 hover:text-text-700 hover:bg-background-50 rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-indicator-info focus:ring-offset-2",
+              "aria-label": "Fechar modal",
+              children: /* @__PURE__ */ jsx5(X, { size: 18 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx5("div", { className: "px-6 pb-6", children: /* @__PURE__ */ jsx5("div", { className: "text-text-500 font-normal text-sm leading-6", children }) }),
+        footer && /* @__PURE__ */ jsx5("div", { className: "flex justify-end gap-3 px-6 pb-6", children: footer })
+      ] })
+    }
+  );
+};
+var Modal_default = Modal;
+
+// src/components/Text/Text.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Text = ({
+  children,
+  size = "md",
+  weight = "normal",
+  color = "text-text-950",
+  as,
+  className = "",
+  ...props
+}) => {
+  let sizeClasses = "";
+  let weightClasses = "";
+  const sizeClassMap = {
+    "2xs": "text-2xs",
+    xs: "text-xs",
+    sm: "text-sm",
+    md: "text-md",
+    lg: "text-lg",
+    xl: "text-xl",
+    "2xl": "text-2xl",
+    "3xl": "text-3xl",
+    "4xl": "text-4xl",
+    "5xl": "text-5xl",
+    "6xl": "text-6xl"
+  };
+  sizeClasses = sizeClassMap[size] ?? sizeClassMap.md;
+  const weightClassMap = {
+    hairline: "font-hairline",
+    light: "font-light",
+    normal: "font-normal",
+    medium: "font-medium",
+    semibold: "font-semibold",
+    bold: "font-bold",
+    extrabold: "font-extrabold",
+    black: "font-black"
+  };
+  weightClasses = weightClassMap[weight] ?? weightClassMap.normal;
+  const baseClasses = "font-primary";
+  const Component = as ?? "p";
+  return /* @__PURE__ */ jsx6(
+    Component,
+    {
+      className: cn(baseClasses, sizeClasses, weightClasses, color, className),
+      ...props,
+      children
+    }
+  );
+};
+var Text_default = Text;
+
+// src/hooks/useMobile.ts
+import { useState as useState2, useEffect as useEffect3 } from "react";
+var MOBILE_WIDTH = 500;
+var TABLET_WIDTH = 931;
+var DEFAULT_WIDTH = 1200;
+var getWindowWidth = () => {
+  if (typeof window === "undefined") {
+    return DEFAULT_WIDTH;
+  }
+  return window.innerWidth;
+};
+var getDeviceType = () => {
+  const width = getWindowWidth();
+  return width < TABLET_WIDTH ? "responsive" : "desktop";
+};
+var useMobile = () => {
+  const [isMobile, setIsMobile] = useState2(false);
+  const [isTablet, setIsTablet] = useState2(false);
+  useEffect3(() => {
+    const checkScreenSize = () => {
+      const width = getWindowWidth();
+      setIsMobile(width < MOBILE_WIDTH);
+      setIsTablet(width < TABLET_WIDTH);
+    };
+    checkScreenSize();
+    window.addEventListener("resize", checkScreenSize);
+    return () => window.removeEventListener("resize", checkScreenSize);
+  }, []);
+  const getFormContainerClasses = () => {
+    if (isMobile) {
+      return "w-full px-4";
+    }
+    if (isTablet) {
+      return "w-full px-6";
+    }
+    return "w-full max-w-[992px] mx-auto px-0";
+  };
+  const getMobileHeaderClasses = () => {
+    return "flex flex-col items-start gap-4 mb-6";
+  };
+  const getDesktopHeaderClasses = () => {
+    return "flex flex-row justify-between items-center gap-6 mb-8";
+  };
+  const getHeaderClasses = () => {
+    return isMobile ? getMobileHeaderClasses() : getDesktopHeaderClasses();
+  };
+  return {
+    isMobile,
+    isTablet,
+    getFormContainerClasses,
+    getHeaderClasses,
+    getMobileHeaderClasses,
+    getDesktopHeaderClasses,
+    getDeviceType
+  };
+};
+
+// src/store/notificationStore.ts
+import { create as create2 } from "zustand";
+import { devtools } from "zustand/middleware";
+var formatTimeAgo = (date) => {
+  const now = /* @__PURE__ */ new Date();
+  const diffInMs = now.getTime() - new Date(date).getTime();
+  const diffInHours = Math.floor(diffInMs / (1e3 * 60 * 60));
+  const diffInDays = Math.floor(diffInMs / (1e3 * 60 * 60 * 24));
+  if (diffInHours < 24) {
+    return `H\xE1 ${diffInHours}h`;
+  } else if (diffInDays < 30) {
+    const day = new Date(date).getDate();
+    const months = [
+      "Jan",
+      "Fev",
+      "Mar",
+      "Abr",
+      "Mai",
+      "Jun",
+      "Jul",
+      "Ago",
+      "Set",
+      "Out",
+      "Nov",
+      "Dez"
+    ];
+    const month = months[new Date(date).getMonth()];
+    return `${day} ${month}`;
+  }
+  return new Date(date).toLocaleDateString("pt-BR");
+};
+
 // src/components/NotificationCard/NotificationCard.tsx
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var NotificationEmpty = ({
+  emptyStateImage,
+  emptyStateTitle = "Nenhuma notifica\xE7\xE3o no momento",
+  emptyStateDescription = "Voc\xEA est\xE1 em dia com todas as novidades. Volte depois para conferir atualiza\xE7\xF5es!"
+}) => {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center justify-center gap-4 p-6 w-full", children: [
+    emptyStateImage && /* @__PURE__ */ jsx7("div", { className: "w-20 h-20 flex items-center justify-center", children: /* @__PURE__ */ jsx7(
+      "img",
+      {
+        src: emptyStateImage,
+        alt: "Sem notifica\xE7\xF5es",
+        width: 82,
+        height: 82,
+        className: "object-contain"
+      }
+    ) }),
+    /* @__PURE__ */ jsx7("h3", { className: "text-xl font-semibold text-text-950 text-center leading-[23px]", children: emptyStateTitle }),
+    /* @__PURE__ */ jsx7("p", { className: "text-sm font-normal text-text-400 text-center max-w-[316px] leading-[21px]", children: emptyStateDescription })
+  ] });
+};
+var NotificationHeader = ({
+  unreadCount,
+  variant = "modal"
+}) => {
+  return /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
+    variant === "modal" ? /* @__PURE__ */ jsx7(Text_default, { size: "sm", weight: "bold", className: "text-text-950", children: "Notifica\xE7\xF5es" }) : /* @__PURE__ */ jsx7("h3", { className: "text-sm font-semibold text-text-950", children: "Notifica\xE7\xF5es" }),
+    unreadCount > 0 && /* @__PURE__ */ jsxs5("span", { className: "px-2 py-1 bg-info-100 text-info-700 text-xs rounded-full", children: [
+      unreadCount,
+      " n\xE3o lidas"
+    ] })
+  ] });
+};
 var SingleNotificationCard = ({
   title,
   message,
@@ -620,7 +940,7 @@ var SingleNotificationCard = ({
       onNavigate();
     }
   };
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       className: cn(
@@ -629,20 +949,20 @@ var SingleNotificationCard = ({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 w-full", children: [
-          !isRead && /* @__PURE__ */ jsx4("div", { className: "w-[7px] h-[7px] bg-info-300 rounded-full flex-shrink-0" }),
-          /* @__PURE__ */ jsx4("h3", { className: "font-bold text-sm leading-4 text-text-950 flex-grow", children: title }),
-          /* @__PURE__ */ jsxs4(DropdownMenu_default, { children: [
-            /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 w-full", children: [
+          !isRead && /* @__PURE__ */ jsx7("div", { className: "w-[7px] h-[7px] bg-info-300 rounded-full flex-shrink-0" }),
+          /* @__PURE__ */ jsx7("h3", { className: "font-bold text-sm leading-4 text-text-950 flex-grow", children: title }),
+          /* @__PURE__ */ jsxs5(DropdownMenu_default, { children: [
+            /* @__PURE__ */ jsx7(
               DropdownMenuTrigger,
               {
                 className: "flex-shrink-0 inline-flex items-center justify-center font-medium bg-transparent text-text-950 cursor-pointer hover:bg-info-50 w-6 h-6 rounded-lg",
                 "aria-label": "Menu de a\xE7\xF5es",
-                children: /* @__PURE__ */ jsx4(DotsThreeVertical, { size: 24 })
+                children: /* @__PURE__ */ jsx7(DotsThreeVertical, { size: 24 })
               }
             ),
-            /* @__PURE__ */ jsxs4(DropdownMenuContent, { align: "end", className: "min-w-[160px]", children: [
-              !isRead && /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsxs5(DropdownMenuContent, { align: "end", className: "min-w-[160px]", children: [
+              !isRead && /* @__PURE__ */ jsx7(
                 DropdownMenuItem,
                 {
                   onClick: handleMarkAsRead,
@@ -650,14 +970,14 @@ var SingleNotificationCard = ({
                   children: "Marcar como lida"
                 }
               ),
-              /* @__PURE__ */ jsx4(DropdownMenuItem, { onClick: handleDelete, className: "text-error-600", children: "Deletar" })
+              /* @__PURE__ */ jsx7(DropdownMenuItem, { onClick: handleDelete, className: "text-error-600", children: "Deletar" })
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx4("p", { className: "text-sm leading-[21px] text-text-800 w-full", children: message }),
-        /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between w-full", children: [
-          /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium text-text-400", children: time }),
-          onNavigate && actionLabel && /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx7("p", { className: "text-sm leading-[21px] text-text-800 w-full", children: message }),
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between w-full", children: [
+          /* @__PURE__ */ jsx7("span", { className: "text-sm font-medium text-text-400", children: time }),
+          onNavigate && actionLabel && /* @__PURE__ */ jsx7(
             "button",
             {
               type: "button",
@@ -684,9 +1004,9 @@ var NotificationList = ({
   className
 }) => {
   if (error) {
-    return /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: [
-      /* @__PURE__ */ jsx4("p", { className: "text-sm text-error-600", children: error }),
-      onRetry && /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: [
+      /* @__PURE__ */ jsx7("p", { className: "text-sm text-error-600", children: error }),
+      onRetry && /* @__PURE__ */ jsx7(
         "button",
         {
           type: "button",
@@ -698,8 +1018,8 @@ var NotificationList = ({
     ] });
   }
   if (loading) {
-    return /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-0 w-full", children: ["skeleton-first", "skeleton-second", "skeleton-third"].map(
-      (skeletonId) => /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx7("div", { className: "flex flex-col gap-0 w-full", children: ["skeleton-first", "skeleton-second", "skeleton-third"].map(
+      (skeletonId) => /* @__PURE__ */ jsx7(
         SkeletonCard,
         {
           className: "p-4 border-b border-border-200"
@@ -709,59 +1029,303 @@ var NotificationList = ({
     ) });
   }
   if (!groupedNotifications || groupedNotifications.length === 0) {
-    return renderEmpty ? /* @__PURE__ */ jsx4("div", { className: "w-full", children: renderEmpty() }) : /* @__PURE__ */ jsx4("div", { className: "flex flex-col items-center justify-center gap-4 p-6 w-full", children: /* @__PURE__ */ jsx4("p", { className: "text-sm text-text-400", children: "Nenhuma notifica\xE7\xE3o encontrada" }) });
+    return renderEmpty ? /* @__PURE__ */ jsx7("div", { className: "w-full", children: renderEmpty() }) : /* @__PURE__ */ jsx7(NotificationEmpty, {});
   }
-  return /* @__PURE__ */ jsx4("div", { className: cn("flex flex-col gap-0 w-full", className), children: groupedNotifications.map((group, idx) => /* @__PURE__ */ jsxs4("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsx4("div", { className: "flex items-end px-4 py-6 pb-4", children: /* @__PURE__ */ jsx4("h4", { className: "text-lg font-bold text-text-500 flex-grow", children: group.label }) }),
-    group.notifications.map((notification) => /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx7("div", { className: cn("flex flex-col gap-0 w-full", className), children: groupedNotifications.map((group, idx) => /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx7("div", { className: "flex items-end px-4 py-6 pb-4", children: /* @__PURE__ */ jsx7("h4", { className: "text-lg font-bold text-text-500 flex-grow", children: group.label }) }),
+    group.notifications.map((notification) => /* @__PURE__ */ jsx7(
       SingleNotificationCard,
       {
         title: notification.title,
         message: notification.message,
-        time: notification.time,
+        time: notification.time ?? formatTimeAgo(new Date(notification.createdAt)),
         isRead: notification.isRead,
         onMarkAsRead: () => onMarkAsReadById?.(notification.id),
         onDelete: () => onDeleteById?.(notification.id),
         onNavigate: notification.entityType && notification.entityId && onNavigateById ? () => onNavigateById(
-          notification.entityType,
-          notification.entityId
+          notification.entityType ?? void 0,
+          notification.entityId ?? void 0
         ) : void 0,
-        actionLabel: getActionLabel?.(notification.entityType)
+        actionLabel: getActionLabel?.(
+          notification.entityType ?? void 0
+        )
       },
       notification.id
     ))
   ] }, `${group.label}-${idx}`)) });
 };
+var NotificationCenter = ({
+  isActive,
+  onToggleActive,
+  unreadCount = 0,
+  groupedNotifications = [],
+  loading = false,
+  error = null,
+  onRetry,
+  onMarkAsReadById,
+  onDeleteById,
+  onNavigateById,
+  getActionLabel,
+  onFetchNotifications,
+  onMarkAllAsRead,
+  emptyStateImage,
+  emptyStateTitle,
+  emptyStateDescription,
+  className
+}) => {
+  const { isMobile } = useMobile();
+  const [isModalOpen, setIsModalOpen] = useState3(false);
+  const handleMobileClick = () => {
+    setIsModalOpen(true);
+    onFetchNotifications?.();
+  };
+  const handleDesktopClick = () => {
+    onToggleActive?.();
+  };
+  useEffect4(() => {
+    if (isActive) {
+      onFetchNotifications?.();
+    }
+  }, [isActive, onFetchNotifications]);
+  const handleNavigate = (entityType, entityId, onCleanup) => {
+    onCleanup?.();
+    onNavigateById?.(entityType, entityId);
+  };
+  const renderEmptyState = () => /* @__PURE__ */ jsx7(
+    NotificationEmpty,
+    {
+      emptyStateImage,
+      emptyStateTitle,
+      emptyStateDescription
+    }
+  );
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs5(Fragment, { children: [
+      /* @__PURE__ */ jsx7(
+        IconButton_default,
+        {
+          active: isModalOpen,
+          onClick: handleMobileClick,
+          icon: /* @__PURE__ */ jsx7(Bell, { size: 24, className: "text-primary" }),
+          className
+        }
+      ),
+      /* @__PURE__ */ jsx7(
+        Modal_default,
+        {
+          isOpen: isModalOpen,
+          onClose: () => setIsModalOpen(false),
+          title: "Notifica\xE7\xF5es",
+          size: "md",
+          hideCloseButton: false,
+          closeOnBackdropClick: true,
+          closeOnEscape: true,
+          children: /* @__PURE__ */ jsxs5("div", { className: "flex flex-col h-full max-h-[80vh]", children: [
+            /* @__PURE__ */ jsx7("div", { className: "px-0 pb-3 border-b border-border-200", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsx7(NotificationHeader, { unreadCount, variant: "modal" }),
+              unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ jsx7(
+                "button",
+                {
+                  type: "button",
+                  onClick: onMarkAllAsRead,
+                  className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer",
+                  children: "Marcar todas como lidas"
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx7("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx7(
+              NotificationList,
+              {
+                groupedNotifications,
+                loading,
+                error,
+                onRetry,
+                onMarkAsReadById,
+                onDeleteById,
+                onNavigateById: (entityType, entityId) => handleNavigate(
+                  entityType,
+                  entityId,
+                  () => setIsModalOpen(false)
+                ),
+                getActionLabel,
+                renderEmpty: renderEmptyState
+              }
+            ) })
+          ] })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs5(DropdownMenu_default, { children: [
+    /* @__PURE__ */ jsx7(DropdownMenuTrigger, { className: "text-primary cursor-pointer", children: /* @__PURE__ */ jsx7(
+      IconButton_default,
+      {
+        active: isActive,
+        onClick: handleDesktopClick,
+        icon: /* @__PURE__ */ jsx7(
+          Bell,
+          {
+            size: 24,
+            className: isActive ? "text-primary-950" : "text-primary"
+          }
+        ),
+        className
+      }
+    ) }),
+    /* @__PURE__ */ jsx7(
+      DropdownMenuContent,
+      {
+        className: "min-w-[320px] max-w-[400px] max-h-[500px] overflow-hidden",
+        side: "bottom",
+        align: "end",
+        children: /* @__PURE__ */ jsxs5("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx7("div", { className: "px-4 py-3 border-b border-border-200", children: /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx7(
+              NotificationHeader,
+              {
+                unreadCount,
+                variant: "dropdown"
+              }
+            ),
+            unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                onClick: onMarkAllAsRead,
+                className: "text-sm font-medium text-info-600 hover:text-info-700 cursor-pointer",
+                children: "Marcar todas como lidas"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx7("div", { className: "max-h-[350px] overflow-y-auto", children: /* @__PURE__ */ jsx7(
+            NotificationList,
+            {
+              groupedNotifications,
+              loading,
+              error,
+              onRetry,
+              onMarkAsReadById,
+              onDeleteById,
+              onNavigateById: (entityType, entityId) => handleNavigate(entityType, entityId, onToggleActive),
+              getActionLabel,
+              renderEmpty: renderEmptyState
+            }
+          ) })
+        ] })
+      }
+    )
+  ] });
+};
 var NotificationCard = (props) => {
+  switch (props.mode) {
+    case "single":
+      return /* @__PURE__ */ jsx7(
+        SingleNotificationCard,
+        {
+          title: props.title,
+          message: props.message,
+          time: props.time,
+          isRead: props.isRead,
+          onMarkAsRead: props.onMarkAsRead,
+          onDelete: props.onDelete,
+          onNavigate: props.onNavigate,
+          actionLabel: props.actionLabel,
+          className: props.className
+        }
+      );
+    case "list":
+      return /* @__PURE__ */ jsx7(
+        NotificationList,
+        {
+          groupedNotifications: props.groupedNotifications ?? (props.notifications ? [
+            {
+              label: "Notifica\xE7\xF5es",
+              notifications: props.notifications
+            }
+          ] : []),
+          loading: props.loading,
+          error: props.error,
+          onRetry: props.onRetry,
+          onMarkAsReadById: props.onMarkAsReadById,
+          onDeleteById: props.onDeleteById,
+          onNavigateById: props.onNavigateById,
+          getActionLabel: props.getActionLabel,
+          renderEmpty: props.renderEmpty,
+          className: props.className
+        }
+      );
+    case "center":
+      return /* @__PURE__ */ jsx7(NotificationCenter, { ...props });
+    default:
+      return /* @__PURE__ */ jsx7("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ jsx7("p", { className: "text-sm text-text-600", children: "Modo de notifica\xE7\xE3o n\xE3o reconhecido" }) });
+  }
+};
+var LegacyNotificationCard = (props) => {
+  if (props.variant === "center") {
+    const centerProps = {
+      mode: "center",
+      ...props
+    };
+    return /* @__PURE__ */ jsx7(NotificationCenter, { ...centerProps });
+  }
   if (props.groupedNotifications !== void 0 || props.notifications !== void 0 || props.loading || props.error) {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx7(
       NotificationList,
       {
-        ...props,
-        groupedNotifications: props.groupedNotifications ?? (props.notifications ? [{ label: "Notifica\xE7\xF5es", notifications: props.notifications }] : [])
+        groupedNotifications: props.groupedNotifications ?? (props.notifications ? [
+          {
+            label: "Notifica\xE7\xF5es",
+            notifications: props.notifications
+          }
+        ] : []),
+        loading: props.loading,
+        error: props.error,
+        onRetry: props.onRetry,
+        onMarkAsReadById: props.onMarkAsReadById,
+        onDeleteById: props.onDeleteById,
+        onNavigateById: props.onNavigateById,
+        getActionLabel: props.getActionLabel,
+        renderEmpty: props.renderEmpty,
+        className: props.className
       }
     );
   }
   if (props.title !== void 0 && props.message !== void 0 && props.time !== void 0 && props.isRead !== void 0 && props.onMarkAsRead && props.onDelete) {
-    return /* @__PURE__ */ jsx4(
+    const singleProps = {
+      mode: "single",
+      title: props.title,
+      message: props.message,
+      time: props.time,
+      isRead: props.isRead,
+      onMarkAsRead: props.onMarkAsRead,
+      onDelete: props.onDelete,
+      onNavigate: props.onNavigate,
+      actionLabel: props.actionLabel,
+      className: props.className,
+      emptyStateImage: props.emptyStateImage,
+      emptyStateTitle: props.emptyStateTitle,
+      emptyStateDescription: props.emptyStateDescription
+    };
+    return /* @__PURE__ */ jsx7(
       SingleNotificationCard,
       {
-        title: props.title,
-        message: props.message,
-        time: props.time,
-        isRead: props.isRead,
-        onMarkAsRead: props.onMarkAsRead,
-        onDelete: props.onDelete,
-        onNavigate: props.onNavigate,
-        actionLabel: props.actionLabel,
-        className: props.className
+        title: singleProps.title,
+        message: singleProps.message,
+        time: singleProps.time,
+        isRead: singleProps.isRead,
+        onMarkAsRead: singleProps.onMarkAsRead,
+        onDelete: singleProps.onDelete,
+        onNavigate: singleProps.onNavigate,
+        actionLabel: singleProps.actionLabel,
+        className: singleProps.className
       }
     );
   }
-  return /* @__PURE__ */ jsx4("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ jsx4("p", { className: "text-sm text-text-600", children: "Nenhuma notifica\xE7\xE3o configurada" }) });
+  return /* @__PURE__ */ jsx7("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ jsx7("p", { className: "text-sm text-text-600", children: "Nenhuma notifica\xE7\xE3o configurada" }) });
 };
 var NotificationCard_default = NotificationCard;
 export {
+  LegacyNotificationCard,
   NotificationCard_default as default
 };
 //# sourceMappingURL=index.mjs.map