@ttoss/components 2.2.26 → 2.2.27

package/dist/NotificationsMenu/index.d.ts

@@ -14,7 +14,8 @@ type Props = {
     onLoadMore?: () => void;
     onOpenChange?: (isOpen: boolean) => void;
     onClose?: () => void;
+    onClearAll?: () => void;
 };
-declare const NotificationsMenu: ({ notifications, defaultOpen, hasMore, onLoadMore, onOpenChange, count, onClose, }: Props) => react_jsx_runtime.JSX.Element;
+declare const NotificationsMenu: ({ notifications, defaultOpen, hasMore, onLoadMore, onOpenChange, count, onClose, onClearAll, }: Props) => react_jsx_runtime.JSX.Element;
 
 export { type Notification, NotificationsMenu };

package/dist/esm/NotificationsMenu/index.js

@@ -2,7 +2,7 @@
 import { Icon, NotificationCard } from "../chunk-QIWMC6WC.js";
 
 // src/components/NotificationsMenu/NotificationsMenu.tsx
-import { Box, Card, Flex, IconButton, Text } from "@ttoss/ui";
+import { Box, Button, Card, Flex, IconButton, Text } from "@ttoss/ui";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 var NotificationsMenu = ({
@@ -12,7 +12,8 @@ var NotificationsMenu = ({
   onLoadMore,
   onOpenChange,
   count,
-  onClose
+  onClose,
+  onClearAll
 }) => {
   const [isOpen, setIsOpen] = React.useState(defaultOpen);
   const [openToLeft, setOpenToLeft] = React.useState(false);
@@ -118,52 +119,93 @@ var NotificationsMenu = ({
           },
           children: count > 99 ? "99+" : count
         })]
-      }), isOpen && /* @__PURE__ */jsx(Card, {
-        sx: {
-          position: "absolute",
-          top: "calc(100% + 8px)",
-          left: openToLeft ? "auto" : 0,
-          right: openToLeft ? 0 : "auto",
-          width: ["90vw", "500px"],
-          maxHeight: "400px",
-          overflowY: "auto",
-          zIndex: 10,
-          padding: 0,
-          boxShadow: "xl",
-          borderRadius: "2xl",
-          backgroundColor: "display.background.secondary.default"
-        },
-        children: /* @__PURE__ */jsx(Box, {
-          ref: containerRef,
+      }), isOpen && /* @__PURE__ */jsx("div", {
+        ref: containerRef,
+        children: /* @__PURE__ */jsx(Card, {
           sx: {
-            width: "100%"
+            position: "absolute",
+            top: "calc(100% + 8px)",
+            left: openToLeft ? "auto" : 0,
+            right: openToLeft ? 0 : "auto",
+            width: ["90vw", "550px"],
+            maxHeight: "400px",
+            overflowY: "auto",
+            zIndex: 10,
+            padding: 0,
+            boxShadow: "xl",
+            borderRadius: "2xl",
+            backgroundColor: "display.background.secondary.default"
           },
-          children: /* @__PURE__ */jsxs(Flex, {
+          children: /* @__PURE__ */jsx(Box, {
             sx: {
-              flexDirection: "column",
-              gap: 2
+              width: "100%"
             },
-            children: [notifications.length === 0 ? /* @__PURE__ */jsx(Text, {
+            children: /* @__PURE__ */jsxs(Flex, {
               sx: {
-                color: "display.text.muted.default",
-                textAlign: "center",
-                p: 4
+                flexDirection: "column",
+                gap: 4
               },
-              children: "Nenhuma notifica\xE7\xE3o"
-            }) : notifications.map(notification => {
-              return /* @__PURE__ */jsx(NotificationCard, {
-                ...notification,
-                onClose: () => {
-                  notification.onClose?.();
-                  onClose?.();
+              children: [notifications.length > 0 && onClearAll && /* @__PURE__ */jsx(Flex, {
+                sx: {
+                  justifyContent: "flex-end",
+                  p: 2,
+                  marginBottom: -2
+                },
+                children: /* @__PURE__ */jsxs(Button, {
+                  variant: "ghost",
+                  sx: {
+                    borderRadius: "md",
+                    padding: 1,
+                    paddingLeft: 10,
+                    paddingRight: 10,
+                    fontSize: "md",
+                    color: "display.text.muted.default",
+                    border: "1px solid",
+                    borderColor: "display.border.default",
+                    transition: "all 0.2s ease",
+                    display: "flex",
+                    alignItems: "center",
+                    "&:hover": {
+                      backgroundColor: "action.background.muted.default",
+                      color: "display.text.default",
+                      borderColor: "action.border.default"
+                    }
+                  },
+                  onClick: onClearAll,
+                  children: [/* @__PURE__ */jsx(Icon, {
+                    icon: "delete",
+                    width: 18,
+                    height: 18
+                  }), /* @__PURE__ */jsx(Text, {
+                    sx: {
+                      ml: -1,
+                      marginTop: -0.4
+                    },
+                    children: "Limpar Tudo"
+                  })]
+                })
+              }), notifications.length === 0 ? /* @__PURE__ */jsx(Text, {
+                sx: {
+                  color: "display.text.muted.default",
+                  textAlign: "center",
+                  p: 4
+                },
+                children: "Nenhuma notifica\xE7\xE3o"
+              }) : notifications.map(notification => {
+                return /* @__PURE__ */jsx(NotificationCard, {
+                  ...notification,
+                  onClose: () => {
+                    notification.onClose?.();
+                    onClose?.();
+                  }
+                }, notification.id);
+              }), hasMore && /* @__PURE__ */jsx("div", {
+                ref: loadMoreRef,
+                style: {
+                  height: 1
                 }
-              }, notification.id);
-            }), hasMore && /* @__PURE__ */jsx("div", {
-              ref: loadMoreRef,
-              style: {
-                height: 1
-              }
-            })]
+              })]
+            })
           })
         })
       })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.2.26",
+  "version": "2.2.27",
   "description": "React components for ttoss ecosystem.",
   "license": "MIT",
   "author": "ttoss",
@@ -107,11 +107,11 @@
     "react": "^19.1.0",
     "tsup": "^8.5.0",
     "tsx": "^4.19.2",
-    "@ttoss/react-hooks": "^2.1.2",
     "@ttoss/config": "^1.35.6",
+    "@ttoss/react-icons": "^0.4.15",
+    "@ttoss/react-hooks": "^2.1.2",
     "@ttoss/test-utils": "^2.1.26",
-    "@ttoss/ui": "^5.9.2",
-    "@ttoss/react-icons": "^0.4.15"
+    "@ttoss/ui": "^5.9.2"
   },
   "keywords": [
     "React",