@ttoss/components 2.14.31 → 2.15.0

package/dist/index.d.mts

@@ -791,11 +791,30 @@ declare const NavList: {
   displayName: string;
 };
 //#endregion
+//#region src/components/NotificationCard/NotificationButton.d.ts
+type NotificationType$1 = 'success' | 'error' | 'warning' | 'info' | 'neutral';
+/** Props for NotificationButton */
+type NotificationButtonProps = Omit<ButtonProps, 'type'> & {
+  /** Notification type — controls background and border colors to match the card. */type: NotificationType$1;
+};
+/**
+ * A button styled to match the NotificationCard of a given type.
+ * Use this for action buttons rendered inside or alongside notification cards.
+ */
+declare const NotificationButton: ({
+  type,
+  ...props
+}: NotificationButtonProps) => import("react/jsx-runtime").JSX.Element;
+//#endregion
 //#region src/components/NotificationCard/NotificationCard.d.ts
 type NotificationType = 'success' | 'error' | 'warning' | 'info' | 'neutral';
 type NotificationAction = {
-  action?: 'open_url';
-  url?: string;
+  action: 'open_url';
+  url: string;
+  label?: string;
+} | {
+  action: 'callback';
+  onClick: () => void;
   label?: string;
 };
 type NotificationCardProps = {
@@ -907,4 +926,4 @@ declare const Tabs: {
 declare const ToastContainer: (props: ToastContainerProps) => import("react/jsx-runtime").JSX.Element;
 declare const toast: typeof toast$1;
 //#endregion
-export { Accordion, AccordionItem, AccordionProps, AccordionRenderItemProps, BaseMetric, DateMetric, DatePicker, DateRange, Drawer, DrawerProps, EnhancedTitle, EnhancedTitleBadge, EnhancedTitleProps, EnhancedTitleVariant, FileUploadState, FileUploader, FileUploaderProps, InstallPwa, InstallPwaUi, InstallPwaUiProps, JsonEditor, JsonView, type LinkComponentProps, List, ListItem, ListItemProps, ListProps, LockedOverlay, Markdown, MarkdownProps, Menu, MenuProps, Metric, MetricCard, MetricCardProps, Modal, ModalProps, NavList, type NavListGroup, type NavListItem, type NavListProps, Notification, NotificationAction, NotificationCard, NotificationCardProps, NotificationsMenu, NumberMetric, OnFilesChange, OnRemove, OnUpload, OnUploadComplete, OnUploadError, OnUploadProgress, OnUploadStart, PercentageMetric, Search, SearchProps, SpotlightCard, SpotlightCardProps, type TabListProps, type TabPanelProps, type TabProps, Table, Tabs, type TabsProps, ToastContainer, type ToastContainerProps, type ToastOptions, UploadResult, UploadedFile, createCell, createColumnHelper, flexRender, getCoreRowModel, toast, useReactTable };
+export { Accordion, AccordionItem, AccordionProps, AccordionRenderItemProps, BaseMetric, DateMetric, DatePicker, DateRange, Drawer, DrawerProps, EnhancedTitle, EnhancedTitleBadge, EnhancedTitleProps, EnhancedTitleVariant, FileUploadState, FileUploader, FileUploaderProps, InstallPwa, InstallPwaUi, InstallPwaUiProps, JsonEditor, JsonView, type LinkComponentProps, List, ListItem, ListItemProps, ListProps, LockedOverlay, Markdown, MarkdownProps, Menu, MenuProps, Metric, MetricCard, MetricCardProps, Modal, ModalProps, NavList, type NavListGroup, type NavListItem, type NavListProps, Notification, NotificationAction, NotificationButton, NotificationButtonProps, NotificationCard, NotificationCardProps, NotificationsMenu, NumberMetric, OnFilesChange, OnRemove, OnUpload, OnUploadComplete, OnUploadError, OnUploadProgress, OnUploadStart, PercentageMetric, Search, SearchProps, SpotlightCard, SpotlightCardProps, type TabListProps, type TabPanelProps, type TabProps, Table, Tabs, type TabsProps, ToastContainer, type ToastContainerProps, type ToastOptions, UploadResult, UploadedFile, createCell, createColumnHelper, flexRender, getCoreRowModel, toast, useReactTable };

package/dist/index.mjs

@@ -2510,168 +2510,265 @@ var NavList = ({
 };
 NavList.displayName = "NavList";
 
+//#endregion
+//#region src/components/NotificationCard/NotificationButton.tsx
+var sxMap$1 = {
+  success: {
+    backgroundColor: "feedback.background.positive.active",
+    borderColor: "feedback.border.positive.active"
+  },
+  error: {
+    backgroundColor: "feedback.background.negative.active",
+    borderColor: "feedback.border.negative.active"
+  },
+  warning: {
+    backgroundColor: "feedback.background.caution.active",
+    borderColor: "feedback.border.caution.active"
+  },
+  info: {
+    backgroundColor: "feedback.background.primary.active",
+    borderColor: "feedback.border.primary.active"
+  },
+  neutral: {
+    backgroundColor: "feedback.background.primary.active",
+    borderColor: "feedback.border.primary.active"
+  }
+};
+/**
+* A button styled to match the NotificationCard of a given type.
+* Use this for action buttons rendered inside or alongside notification cards.
+*/
+var NotificationButton = ({
+  type,
+  ...props
+}) => {
+  return /* @__PURE__ */jsx(Button, {
+    type: "button",
+    ...props,
+    sx: {
+      ...sxMap$1[type],
+      color: "display.text.primary.default",
+      borderRadius: "lg",
+      borderWidth: "sm",
+      borderStyle: "solid"
+    }
+  });
+};
+
 //#endregion
 //#region src/components/NotificationCard/NotificationCard.tsx
-var NotificationCard = props => {
-  const sxMap = {
-    success: {
-      card: {
-        backgroundColor: "feedback.background.positive.default",
-        borderColor: "feedback.border.positive.default"
-      }
-    },
-    error: {
-      card: {
-        backgroundColor: "feedback.background.negative.default",
-        borderColor: "feedback.border.negative.default"
-      }
-    },
-    warning: {
-      card: {
-        backgroundColor: "feedback.background.caution.default",
-        borderColor: "feedback.border.caution.default"
-      }
-    },
-    info: {
-      card: {
-        backgroundColor: "feedback.background.primary.default",
-        borderColor: "feedback.border.primary.default"
-      }
-    },
-    neutral: {
-      card: {
-        backgroundColor: "feedback.background.primary.default",
-        borderColor: "feedback.border.primary.default"
-      }
+var sxMap = {
+  success: {
+    card: {
+      backgroundColor: "feedback.background.positive.default",
+      borderColor: "feedback.border.positive.default"
     }
-  };
-  const icon = {
-    success: "success-circle",
-    error: "error",
-    warning: "warning-alt",
-    info: "info",
-    neutral: "info"
-  };
-  const hasCaption = Boolean(props.caption);
-  const hasActions = Boolean(props.actions && props.actions.length > 0);
-  const hasTitle = Boolean(props.title);
-  const shouldCenterVerticallyWithoutTitle = !hasCaption && !hasActions && !hasTitle;
-  const shouldCenterVerticallyWithTitle = !hasCaption && !hasActions && hasTitle;
-  const shouldAddMinHeight = !hasCaption && !hasActions;
-  return /* @__PURE__ */jsxs(Card, {
+  },
+  error: {
+    card: {
+      backgroundColor: "feedback.background.negative.default",
+      borderColor: "feedback.border.negative.default"
+    }
+  },
+  warning: {
+    card: {
+      backgroundColor: "feedback.background.caution.default",
+      borderColor: "feedback.border.caution.default"
+    }
+  },
+  info: {
+    card: {
+      backgroundColor: "feedback.background.primary.default",
+      borderColor: "feedback.border.primary.default"
+    }
+  },
+  neutral: {
+    card: {
+      backgroundColor: "feedback.background.primary.default",
+      borderColor: "feedback.border.primary.default"
+    }
+  }
+};
+var iconMap = {
+  success: "success-circle",
+  error: "error",
+  warning: "warning-alt",
+  info: "info",
+  neutral: "info"
+};
+var NotificationCardTags = ({
+  tags
+}) => {
+  if (!tags) return null;
+  if (Array.isArray(tags)) {
+    if (tags.length === 0) return null;
+    return /* @__PURE__ */jsx(Fragment, {
+      children: tags.map((tag, index) => {
+        return /* @__PURE__ */jsx(Tag, {
+          children: tag
+        }, index);
+      })
+    });
+  }
+  return /* @__PURE__ */jsx(Tag, {
+    children: tags
+  });
+};
+var NotificationCardTitle = ({
+  type,
+  title,
+  tags,
+  onClose
+}) => {
+  return /* @__PURE__ */jsxs(Card.Title, {
     sx: {
-      ...sxMap[props.type].card,
-      width: "full"
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "center",
+      fontSize: ["md", "xl"],
+      paddingY: ["1", "2", "4"],
+      paddingX: ["2", "4", "8"]
     },
-    children: [props.title && /* @__PURE__ */jsxs(Card.Title, {
+    children: [/* @__PURE__ */jsxs(Text, {
       sx: {
-        display: "flex",
-        justifyContent: "space-between",
-        alignItems: "center",
-        fontSize: ["md", "xl"],
-        paddingY: ["1", "2", "4"],
-        paddingX: ["2", "4", "8"]
+        display: "inline-flex",
+        alignItems: "flex-start",
+        gap: "2",
+        flexDirection: "row",
+        flexWrap: "wrap"
       },
-      children: [/* @__PURE__ */jsxs(Text, {
-        sx: {
-          display: "inline-flex",
-          alignItems: "flex-start",
-          gap: "2",
-          flexDirection: "row",
-          flexWrap: "wrap"
-        },
-        children: [/* @__PURE__ */jsxs(Box, {
-          sx: {
-            display: "flex",
-            alignItems: "center",
-            gap: "2"
-          },
-          children: [/* @__PURE__ */jsx(Icon, {
-            icon: icon[props.type]
-          }), props.title]
-        }), props.tags && (Array.isArray(props.tags) ? props.tags.length > 0 : true) && (Array.isArray(props.tags) ? props.tags.map((tag, index) => {
-          return /* @__PURE__ */jsx(Tag, {
-            children: tag
-          }, index);
-        }) : /* @__PURE__ */jsx(Tag, {
-          children: props.tags
-        }))]
-      }), props.onClose && /* @__PURE__ */jsx(Box, {
+      children: [/* @__PURE__ */jsxs(Box, {
         sx: {
-          marginLeft: "auto"
+          display: "flex",
+          alignItems: "center",
+          gap: "2"
         },
-        children: /* @__PURE__ */jsx(CloseButton, {
-          onClick: props.onClose
-        })
+        children: [/* @__PURE__ */jsx(Icon, {
+          icon: iconMap[type]
+        }), title]
+      }), /* @__PURE__ */jsx(NotificationCardTags, {
+        tags
       })]
-    }), /* @__PURE__ */jsxs(Card.Body, {
+    }), onClose && /* @__PURE__ */jsx(Box, {
+      sx: {
+        marginLeft: "auto"
+      },
+      children: /* @__PURE__ */jsx(CloseButton, {
+        onClick: onClose
+      })
+    })]
+  });
+};
+var NotificationCardActions = ({
+  type,
+  actions
+}) => {
+  if (actions.length === 0) return null;
+  return /* @__PURE__ */jsx(Box, {
+    sx: {
+      display: "flex",
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: 2,
+      mt: 2
+    },
+    children: actions.map((action, index) => {
+      return /* @__PURE__ */jsx(NotificationButton, {
+        type,
+        onClick: action.action === "open_url" ? () => {
+          return window.open(action.url, "_blank");
+        } : action.onClick,
+        children: action.label || "Acessar"
+      }, index);
+    })
+  });
+};
+var NotificationCardBody = ({
+  type,
+  message,
+  actions,
+  caption,
+  onClose,
+  hasTitle
+}) => {
+  const hasCaption = Boolean(caption);
+  const hasActions = Boolean(actions?.length);
+  const shouldCenter = !hasCaption && !hasActions;
+  const bodyAlign = shouldCenter ? "center" : "flex-start";
+  const bodyMinHeight = shouldCenter && !hasTitle ? "40px" : "auto";
+  return /* @__PURE__ */jsxs(Card.Body, {
+    sx: {
+      ...sxMap[type].card,
+      display: "flex",
+      flexDirection: "column",
+      gap: "2",
+      paddingY: ["1", "2", "4"],
+      paddingX: ["2", "4", "8"]
+    },
+    children: [/* @__PURE__ */jsx(Box, {
       sx: {
-        ...sxMap[props.type].card,
         display: "flex",
-        flexDirection: "column",
-        gap: "2",
-        paddingY: ["1", "2", "4"],
-        paddingX: ["2", "4", "8"]
+        justifyContent: "space-between",
+        minHeight: bodyMinHeight,
+        alignItems: bodyAlign,
+        width: "100%",
+        gap: "4"
       },
-      children: [/* @__PURE__ */jsx(Box, {
-        sx: {
-          display: "flex",
-          justifyContent: "space-between",
-          minHeight: shouldAddMinHeight ? "40px" : "auto",
-          alignItems: shouldCenterVerticallyWithoutTitle ? "center" : shouldCenterVerticallyWithTitle ? "center" : "flex-start",
-          width: "100%",
-          gap: "4"
-        },
-        children: /* @__PURE__ */jsx(Box, {
-          sx: {
-            flex: 1
-          },
-          children: /* @__PURE__ */jsx(Text, {
-            sx: {
-              fontSize: ["sm", "md"]
-            },
-            children: props.message
-          })
-        })
-      }), props.actions && props.actions.length > 0 && /* @__PURE__ */jsx(Box, {
-        sx: {
-          display: "flex",
-          flexDirection: "column",
-          gap: 2,
-          mt: 2
-        },
-        children: props.actions.map((action, index) => {
-          return action.action === "open_url" ? /* @__PURE__ */jsx(Link, {
-            href: action.url,
-            target: "_blank",
-            rel: "noopener noreferrer",
-            sx: {
-              color: "action.text.accent.default",
-              cursor: "pointer"
-            },
-            children: action.label || "Acessar"
-          }, index) : null;
-        })
-      }), props.caption && /* @__PURE__ */jsx(Box, {
+      children: /* @__PURE__ */jsx(Box, {
         sx: {
-          whiteSpace: "nowrap",
-          mt: 6
+          flex: 1
         },
         children: /* @__PURE__ */jsx(Text, {
           sx: {
-            fontSize: "xs",
-            color: "text.secondary"
+            fontSize: ["sm", "md"]
           },
-          children: props.caption
+          children: message
         })
-      }), !props.title && props.onClose && /* @__PURE__ */jsx(Box, {
+      })
+    }), actions && /* @__PURE__ */jsx(NotificationCardActions, {
+      type,
+      actions
+    }), caption && /* @__PURE__ */jsx(Box, {
+      sx: {
+        whiteSpace: "nowrap",
+        mt: 6
+      },
+      children: /* @__PURE__ */jsx(Text, {
         sx: {
-          alignSelf: "flex-end"
+          fontSize: "xs",
+          color: "text.secondary"
         },
-        children: /* @__PURE__ */jsx(CloseButton, {
-          onClick: props.onClose
-        })
-      })]
+        children: caption
+      })
+    }), !hasTitle && onClose && /* @__PURE__ */jsx(Box, {
+      sx: {
+        alignSelf: "flex-end"
+      },
+      children: /* @__PURE__ */jsx(CloseButton, {
+        onClick: onClose
+      })
+    })]
+  });
+};
+var NotificationCard = props => {
+  const hasTitle = Boolean(props.title);
+  return /* @__PURE__ */jsxs(Card, {
+    sx: {
+      ...sxMap[props.type].card,
+      width: "full"
+    },
+    children: [props.title && /* @__PURE__ */jsx(NotificationCardTitle, {
+      type: props.type,
+      title: props.title,
+      tags: props.tags,
+      onClose: props.onClose
+    }), /* @__PURE__ */jsx(NotificationCardBody, {
+      type: props.type,
+      message: props.message,
+      actions: props.actions,
+      caption: props.caption,
+      onClose: props.onClose,
+      hasTitle
     })]
   });
 };
@@ -3081,4 +3178,4 @@ var ToastContainer = props => {
 var toast = toast$1;
 
 //#endregion
-export { Accordion, DatePicker, Drawer, EnhancedTitle, FileUploader, InstallPwa, InstallPwaUi, JsonEditor, JsonView, List, ListItem, LockedOverlay, Markdown, Menu, MetricCard, Modal, NavList, NotificationCard, NotificationsMenu, Search, SpotlightCard, Table, Tabs, ToastContainer, createCell, createColumnHelper, flexRender, getCoreRowModel, toast, useReactTable };
+export { Accordion, DatePicker, Drawer, EnhancedTitle, FileUploader, InstallPwa, InstallPwaUi, JsonEditor, JsonView, List, ListItem, LockedOverlay, Markdown, Menu, MetricCard, Modal, NavList, NotificationButton, NotificationCard, NotificationsMenu, Search, SpotlightCard, Table, Tabs, ToastContainer, createCell, createColumnHelper, flexRender, getCoreRowModel, toast, useReactTable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.14.31",
+  "version": "2.15.0",
   "description": "React components for ttoss ecosystem.",
   "keywords": [
     "React",
@@ -55,18 +55,18 @@
     "tsx": "^4.21.0",
     "@ttoss/config": "^1.37.17",
     "@ttoss/i18n-cli": "^0.8.17",
-    "@ttoss/react-i18n": "^2.2.21",
     "@ttoss/react-hooks": "^2.3.20",
+    "@ttoss/react-i18n": "^2.3.0",
     "@ttoss/react-icons": "^0.7.21",
-    "@ttoss/ui": "^6.9.27",
+    "@ttoss/ui": "^6.9.28",
     "@ttoss/test-utils": "^4.2.18"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
     "@ttoss/react-hooks": "^2.3.20",
+    "@ttoss/react-i18n": "^2.3.0",
     "@ttoss/react-icons": "^0.7.21",
-    "@ttoss/react-i18n": "^2.2.21",
-    "@ttoss/ui": "^6.9.27"
+    "@ttoss/ui": "^6.9.28"
   },
   "publishConfig": {
     "access": "public",