@ttoss/components 2.0.24 → 2.1.0

package/dist/NotificationCard/index.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type NotificationType = 'success' | 'error' | 'warning' | 'info';
+declare const NotificationCard: (props: {
+    type: NotificationType;
+    title?: string;
+    message: string;
+    onClose?: () => void;
+}) => react_jsx_runtime.JSX.Element;
+
+export { NotificationCard };

package/dist/Toast/index.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ToastContainerProps } from 'react-toastify';
-export { ToastContainerProps, toast } from 'react-toastify';
+import { ToastContainerProps, toast as toast$1 } from 'react-toastify';
+export { ToastContainerProps, ToastOptions } from 'react-toastify';
 
 declare const ToastContainer: (props: ToastContainerProps) => react_jsx_runtime.JSX.Element;
+declare const toast: typeof toast$1;
 
-export { ToastContainer };
+export { ToastContainer, toast };

package/dist/esm/Markdown/index.js

@@ -1,5 +1,4 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import "../chunk-ESDEGKXL.js";
 
 // src/components/Markdown/Markdown.tsx
 import { BaseStyles } from "@ttoss/ui";

package/dist/esm/Menu/index.js

@@ -1,5 +1,4 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import "../chunk-ESDEGKXL.js";
 
 // ../react-icons/src/Icon.tsx
 import * as React2 from "react";

package/dist/esm/Modal/index.js

@@ -1,5 +1,4 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import "../chunk-ESDEGKXL.js";
 
 // src/components/Modal/Modal.tsx
 import { css as transformStyleObject } from "@theme-ui/css";

package/dist/esm/NotificationCard/index.js

@@ -0,0 +1,57 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+
+// src/components/NotificationCard/NotificationCard.tsx
+import { Box, Card, CloseButton } from "@ttoss/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NotificationCard = props => {
+  const sxMap = {
+    success: {
+      card: {
+        borderColor: "feedback.border.positive.default"
+      }
+    },
+    error: {
+      card: {
+        borderColor: "feedback.border.negative.default"
+      }
+    },
+    warning: {
+      card: {
+        borderColor: "feedback.border.caution.default"
+      }
+    },
+    info: {
+      card: {
+        borderColor: "feedback.border.primary.default"
+      }
+    }
+  };
+  return /* @__PURE__ */jsxs(Card, {
+    sx: {
+      ...sxMap[props.type].card,
+      width: "full"
+    },
+    children: [props.title && /* @__PURE__ */jsxs(Card.Title, {
+      sx: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        fontSize: "xl"
+      },
+      children: [props.title, props.onClose && /* @__PURE__ */jsx(CloseButton, {
+        onClick: props.onClose
+      })]
+    }), /* @__PURE__ */jsxs(Card.Body, {
+      sx: {
+        display: "flex",
+        gap: "4"
+      },
+      children: [props.message, !props.title && props.onClose && /* @__PURE__ */jsx(Box, {
+        children: /* @__PURE__ */jsx(CloseButton, {
+          onClick: props.onClose
+        })
+      })]
+    })]
+  });
+};
+export { NotificationCard };

package/dist/esm/Toast/index.js

@@ -2,29 +2,39 @@
 import "../chunk-ESDEGKXL.js";
 
 // src/components/Toast/Toast.tsx
-import { Box } from "@ttoss/ui";
-import { toast, ToastContainer as ReactToastifyToastContainer } from "react-toastify";
+import { css as createClassName } from "@emotion/css";
+import { css as transformStyleObject } from "@theme-ui/css";
+import { Box, useTheme } from "@ttoss/ui";
+import * as React from "react";
+import { toast as toastReactToastify, ToastContainer as ReactToastifyToastContainer } from "react-toastify";
 import { jsx } from "react/jsx-runtime";
 var ToastContainer = props => {
+  const {
+    theme
+  } = useTheme();
+  const className = React.useMemo(() => {
+    const styles = transformStyleObject({
+      ".Toastify__toast-container": {}
+    })(theme);
+    return createClassName(styles);
+  }, [theme]);
   return /* @__PURE__ */jsx(Box, {
+    className,
     sx: ({
       colors,
       fonts
     }) => {
+      const themeColors = colors;
       return {
-        "--toastify-color-light": "#fff",
-        "--toastify-color-dark": "#121212",
-        "--toastify-color-info": colors?.info || "#3498db",
-        "--toastify-color-success": colors?.success || "#07bc0c",
-        "--toastify-color-warning": "#f1c40f",
-        "--toastify-color-error": "#e74c3c",
-        "--toastify-color-progress-light": `linear-gradient(to right, ${colors?.primary}, ${colors?.secondary})`,
-        "--toastify-font-family": fonts.body
+        "--toastify-font-family": fonts?.body,
+        "--toastify-color-light": themeColors?.feedback?.background?.primary?.default
       };
     },
     children: /* @__PURE__ */jsx(ReactToastifyToastContainer, {
+      className,
       ...props
     })
   });
 };
+var toast = toastReactToastify;
 export { ToastContainer, toast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.0.24",
+  "version": "2.1.0",
   "description": "React components for ttoss ecosystem.",
   "license": "MIT",
   "author": "ttoss",
@@ -50,6 +50,10 @@
       "types": "./dist/Modal/index.d.ts",
       "import": "./dist/esm/Modal/index.js"
     },
+    "./NotificationCard": {
+      "types": "./dist/NotificationCard/index.d.ts",
+      "import": "./dist/esm/NotificationCard/index.js"
+    },
     "./Search": {
       "types": "./dist/Search/index.d.ts",
       "import": "./dist/esm/Search/index.js"
@@ -85,7 +89,7 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "@ttoss/react-hooks": "^2.0.10",
-    "@ttoss/ui": "^5.1.6"
+    "@ttoss/ui": "^5.2.0"
   },
   "devDependencies": {
     "@types/jest": "^29.5.14",
@@ -96,9 +100,9 @@
     "tsx": "^4.19.2",
     "@ttoss/config": "^1.35.2",
     "@ttoss/react-icons": "^0.4.9",
-    "@ttoss/react-hooks": "^2.0.10",
     "@ttoss/test-utils": "^2.1.22",
-    "@ttoss/ui": "^5.1.6"
+    "@ttoss/react-hooks": "^2.0.10",
+    "@ttoss/ui": "^5.2.0"
   },
   "keywords": [
     "React",