@ttoss/components 1.20.0 → 1.21.0

package/dist/esm/index.js

@@ -125,7 +125,7 @@ ReactModal.defaultStyles = {
   content: {}
 };
 var Modal = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const { theme } = useTheme2();
   const padding = useResponsiveValue([
     (_a = theme.space) == null ? void 0 : _a[2],
@@ -147,7 +147,7 @@ var Modal = (props) => {
       ...(_d = props.style) == null ? void 0 : _d.overlay
     },
     content: {
-      background: ((_f = (_e = theme.rawColors) == null ? void 0 : _e.background) == null ? void 0 : _f.toString()) || "#fff",
+      backgroundColor: ((_f = (_e = theme.rawColors) == null ? void 0 : _e.background) == null ? void 0 : _f.toString()) || "#fff",
       padding,
       WebkitOverflowScrolling: "touch",
       overflow: "auto",
@@ -156,11 +156,12 @@ var Modal = (props) => {
       left: "0px",
       right: "0px",
       bottom: "0px",
-      border: "1px solid #ccc",
+      border: "2px solid",
+      borderColor: ((_h = (_g = theme.rawColors) == null ? void 0 : _g.muted) == null ? void 0 : _h.toString()) || "#fff",
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
-      ...(_g = props.style) == null ? void 0 : _g.content
+      ...(_i = props.style) == null ? void 0 : _i.content
     }
   };
   return /* @__PURE__ */ React.createElement(ReactModal, {
@@ -169,8 +170,36 @@ var Modal = (props) => {
   });
 };
 Modal.setAppElement = ReactModal.setAppElement;
+
+// src/components/Toast/Toast.tsx
+import { Box as Box2 } from "@ttoss/ui";
+import {
+  ToastContainer as ReactToastifyToastContainer,
+  ToastContainerProps,
+  toast
+} from "react-toastify";
+import "react-toastify/dist/ReactToastify.min.css";
+var ToastContainer = (props) => {
+  return /* @__PURE__ */ React.createElement(Box2, {
+    sx: ({ colors, fonts }) => ({
+      "--toastify-color-light": "#fff",
+      "--toastify-color-dark": "#121212",
+      "--toastify-color-info": (colors == null ? void 0 : colors.info) || "#3498db",
+      "--toastify-color-success": (colors == null ? void 0 : colors.success) || "#07bc0c",
+      "--toastify-color-warning": "#f1c40f",
+      "--toastify-color-error": "#e74c3c",
+      "--toastify-color-progress-light": `linear-gradient(to right, ${colors == null ? void 0 : colors.primary}, ${colors == null ? void 0 : colors.secondary})`,
+      "--toastify-font-family": fonts.body
+    })
+  }, /* @__PURE__ */ React.createElement(ReactToastifyToastContainer, {
+    ...props
+  }));
+};
 export {
   Accordion,
   InstallPwa,
-  Modal
+  Modal,
+  ToastContainer,
+  ToastContainerProps,
+  toast
 };

package/dist/index.d.ts

@@ -4,6 +4,8 @@ import * as react_accessible_accordion_dist_types_helpers_types from 'react-acce
 import * as React from 'react';
 import { BoxProps } from '@ttoss/ui';
 import ReactModal from 'react-modal';
+import { ToastContainerProps } from 'react-toastify';
+export { ToastContainerProps, toast } from 'react-toastify';
 
 declare type AccordionProps = BoxProps & {
     allowMultipleExpanded?: boolean;
@@ -291,4 +293,6 @@ declare const Modal: {
     setAppElement: typeof ReactModal.setAppElement;
 };
 
-export { Accordion, AccordionProps, InstallPwa, Modal, ModalProps };
+declare const ToastContainer: (props: ToastContainerProps) => JSX.Element;
+
+export { Accordion, AccordionProps, InstallPwa, Modal, ModalProps, ToastContainer };

package/dist/index.js

@@ -25,7 +25,10 @@ var src_exports = {};
 __export(src_exports, {
   Accordion: () => Accordion,
   InstallPwa: () => InstallPwa,
-  Modal: () => Modal
+  Modal: () => Modal,
+  ToastContainer: () => ToastContainer,
+  ToastContainerProps: () => import_react_toastify.ToastContainerProps,
+  toast: () => import_react_toastify.toast
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -148,7 +151,7 @@ import_react_modal.default.defaultStyles = {
   content: {}
 };
 var Modal = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const { theme } = (0, import_ui3.useTheme)();
   const padding = (0, import_ui3.useResponsiveValue)([
     (_a = theme.space) == null ? void 0 : _a[2],
@@ -170,7 +173,7 @@ var Modal = (props) => {
       ...(_d = props.style) == null ? void 0 : _d.overlay
     },
     content: {
-      background: ((_f = (_e = theme.rawColors) == null ? void 0 : _e.background) == null ? void 0 : _f.toString()) || "#fff",
+      backgroundColor: ((_f = (_e = theme.rawColors) == null ? void 0 : _e.background) == null ? void 0 : _f.toString()) || "#fff",
       padding,
       WebkitOverflowScrolling: "touch",
       overflow: "auto",
@@ -179,11 +182,12 @@ var Modal = (props) => {
       left: "0px",
       right: "0px",
       bottom: "0px",
-      border: "1px solid #ccc",
+      border: "2px solid",
+      borderColor: ((_h = (_g = theme.rawColors) == null ? void 0 : _g.muted) == null ? void 0 : _h.toString()) || "#fff",
       display: "flex",
       flexDirection: "column",
       alignItems: "center",
-      ...(_g = props.style) == null ? void 0 : _g.content
+      ...(_i = props.style) == null ? void 0 : _i.content
     }
   };
   return /* @__PURE__ */ React.createElement(import_react_modal.default, {
@@ -192,9 +196,33 @@ var Modal = (props) => {
   });
 };
 Modal.setAppElement = import_react_modal.default.setAppElement;
+
+// src/components/Toast/Toast.tsx
+var import_ui4 = require("@ttoss/ui");
+var import_react_toastify = require("react-toastify");
+var import_ReactToastify_min = require("react-toastify/dist/ReactToastify.min.css");
+var ToastContainer = (props) => {
+  return /* @__PURE__ */ React.createElement(import_ui4.Box, {
+    sx: ({ colors, fonts }) => ({
+      "--toastify-color-light": "#fff",
+      "--toastify-color-dark": "#121212",
+      "--toastify-color-info": (colors == null ? void 0 : colors.info) || "#3498db",
+      "--toastify-color-success": (colors == null ? void 0 : colors.success) || "#07bc0c",
+      "--toastify-color-warning": "#f1c40f",
+      "--toastify-color-error": "#e74c3c",
+      "--toastify-color-progress-light": `linear-gradient(to right, ${colors == null ? void 0 : colors.primary}, ${colors == null ? void 0 : colors.secondary})`,
+      "--toastify-font-family": fonts.body
+    })
+  }, /* @__PURE__ */ React.createElement(import_react_toastify.ToastContainer, {
+    ...props
+  }));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Accordion,
   InstallPwa,
-  Modal
+  Modal,
+  ToastContainer,
+  ToastContainerProps,
+  toast
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "description": "React components.",
   "license": "UNLICENSED",
   "publishConfig": {
@@ -35,18 +35,19 @@
     "@theme-ui/css": "^0.14.7",
     "@types/react-modal": "^3.13.1",
     "react-accessible-accordion": "^5.0.0",
-    "react-modal": "^3.15.1"
+    "react-modal": "^3.15.1",
+    "react-toastify": "^9.0.8"
   },
   "peerDependencies": {
     "@ttoss/ui": "^1.16.5",
     "react": ">=16.8.0"
   },
   "devDependencies": {
-    "@ttoss/config": "^1.15.2",
-    "@ttoss/test-utils": "^1.15.2",
-    "@ttoss/ui": "^1.18.0",
+    "@ttoss/config": "^1.17.0",
+    "@ttoss/test-utils": "^1.16.6",
+    "@ttoss/ui": "^1.19.0",
     "@types/jest": "^28.1.5",
     "jest": "^28.1.3"
   },
-  "gitHead": "c6ea722f669db5161ea4bfe585b07eaff1d94bc4"
+  "gitHead": "bea31ace95128d57607156807e402a793b0c46e4"
 }

package/src/components/Modal/Modal.tsx

@@ -36,7 +36,7 @@ export const Modal = (props: ModalProps) => {
       /**
        * Theme
        */
-      background: theme.rawColors?.background?.toString() || '#fff',
+      backgroundColor: theme.rawColors?.background?.toString() || '#fff',
       padding,
       /**
        * General
@@ -48,7 +48,8 @@ export const Modal = (props: ModalProps) => {
       left: '0px',
       right: '0px',
       bottom: '0px',
-      border: '1px solid #ccc',
+      border: '2px solid',
+      borderColor: theme.rawColors?.muted?.toString() || '#fff',
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',

package/src/components/Toast/Toast.tsx

@@ -0,0 +1,28 @@
+import { Box } from '@ttoss/ui';
+import {
+  ToastContainer as ReactToastifyToastContainer,
+  ToastContainerProps,
+  toast,
+} from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.min.css';
+
+export { toast, ToastContainerProps };
+
+export const ToastContainer = (props: ToastContainerProps) => {
+  return (
+    <Box
+      sx={({ colors, fonts }) => ({
+        '--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 as { body: string }).body,
+      })}
+    >
+      <ReactToastifyToastContainer {...props} />
+    </Box>
+  );
+};

package/src/index.spec.tsx

@@ -4,6 +4,8 @@ test.each([
   componentsModule.Accordion,
   componentsModule.InstallPwa,
   componentsModule.Modal,
+  componentsModule.ToastContainer,
+  componentsModule.toast,
 ])('should export components %#', (Component) => {
   expect(Component).toBeDefined();
 });

package/src/index.ts

@@ -1,3 +1,4 @@
 export * from './components/Accordion/Accordion';
 export * from './components/InstallPwa/InstallPwa';
 export * from './components/Modal/Modal';
+export * from './components/Toast/Toast';