@mamrp/components 1.4.6 → 1.4.7

package/dist/index.mjs

@@ -5002,6 +5002,150 @@ var DataTable = ({
   return /* @__PURE__ */ React.createElement(MaterialReactTable, { table });
 };
 var data_table_default = DataTable;
+
+// src/custom-toast/index.tsx
+import { Box as Box24, IconButton as IconButton10, useTheme as useTheme8 } from "@mui/material";
+import { IoClose as IoClose3 } from "react-icons/io5";
+import toast2 from "react-hot-toast";
+var CustomToast = ({ type, message }) => {
+  const theme2 = useTheme8();
+  const isDarkMode = theme2.palette.mode === "dark";
+  const colors = type === "success" ? { main: "#61d345", bg: "rgba(97, 211, 69, 0.2)" } : { main: "#ff4b4b", bg: "rgba(255, 75, 75, 0.2)" };
+  const iconPath = type === "success" ? "M10 3L4.5 8.5L2 6" : "M9 3L3 9M3 3L9 9";
+  const iconAnimation = type === "success" ? "@keyframes checkmarkDraw { 0% { stroke-dashoffset: -16; } 100% { stroke-dashoffset: 0; } }" : "@keyframes xDraw { 0% { stroke-dashoffset: 12; } 100% { stroke-dashoffset: 0; } }";
+  return /* @__PURE__ */ React.createElement(
+    Box24,
+    {
+      sx: {
+        background: isDarkMode ? "#1e1e1e" : "#fff",
+        color: isDarkMode ? "#e0e0e0" : "#363636",
+        lineHeight: 1.3,
+        willChange: "transform",
+        boxShadow: isDarkMode ? "0 3px 10px rgba(0, 0, 0, 0.4), 0 3px 3px rgba(0, 0, 0, 0.2)" : "0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05)",
+        maxWidth: "350px",
+        pointerEvents: "auto",
+        padding: "10px 10px",
+        borderRadius: "8px",
+        display: "flex",
+        alignItems: "center",
+        gap: "12px",
+        position: "relative",
+        overflow: "hidden",
+        transition: "opacity 0.3s ease-in-out"
+      }
+    },
+    /* @__PURE__ */ React.createElement("style", null, iconAnimation),
+    /* @__PURE__ */ React.createElement(
+      Box24,
+      {
+        sx: {
+          width: "20px",
+          height: "20px",
+          borderRadius: "50%",
+          background: colors.main,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          transform: "scale(0.95)",
+          animation: type === "success" ? "iconPop 360ms cubic-bezier(.2,.9,.3,1) forwards, iconPulse 2400ms ease-in-out 600ms infinite" : "iconPop 360ms cubic-bezier(.2,.9,.3,1) forwards, iconShake 0.5s ease-in-out 0.4s",
+          "@keyframes iconPop": {
+            "0%": { transform: "scale(0.8)", opacity: 0 },
+            "60%": { transform: "scale(1.08)", opacity: 1 },
+            "100%": { transform: "scale(1)" }
+          },
+          "@keyframes iconPulse": {
+            "0%": { transform: "scale(1)" },
+            "50%": { transform: "scale(1.06)" },
+            "100%": { transform: "scale(1)" }
+          },
+          "@keyframes iconShake": {
+            "0%, 100%": { transform: "rotate(0deg)" },
+            "25%": { transform: "rotate(-10deg)" },
+            "75%": { transform: "rotate(10deg)" }
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        "svg",
+        {
+          width: "12",
+          height: "12",
+          viewBox: "0 0 12 12",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg"
+        },
+        /* @__PURE__ */ React.createElement(
+          "path",
+          {
+            d: iconPath,
+            stroke: "#fff",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            style: {
+              strokeDasharray: 16,
+              strokeDashoffset: type === "success" ? -16 : 12,
+              animation: type === "success" ? "checkmarkDraw 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.2s forwards" : "xDraw 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.2s forwards"
+            }
+          }
+        )
+      )
+    ),
+    /* @__PURE__ */ React.createElement(Box24, { sx: { flex: 1, fontSize: "14px" } }, message),
+    /* @__PURE__ */ React.createElement(
+      IconButton10,
+      {
+        size: "small",
+        onClick: () => toast2.dismiss(),
+        sx: {
+          color: isDarkMode ? "#e0e0e0" : "#363636",
+          padding: "2px",
+          minWidth: "unset",
+          "&:hover": {
+            background: isDarkMode ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.05)"
+          }
+        }
+      },
+      /* @__PURE__ */ React.createElement(IoClose3, { size: 18 })
+    ),
+    /* @__PURE__ */ React.createElement(
+      Box24,
+      {
+        sx: {
+          position: "absolute",
+          bottom: 0,
+          left: 0,
+          height: "3px",
+          background: colors.bg,
+          width: "100%",
+          borderRadius: "0 0 8px 8px"
+        }
+      },
+      /* @__PURE__ */ React.createElement(
+        Box24,
+        {
+          sx: {
+            height: "100%",
+            background: colors.main,
+            borderRadius: "0 0 0 8px",
+            animation: "progress 4s linear forwards",
+            "@keyframes progress": {
+              from: { width: "100%" },
+              to: { width: "0%" }
+            }
+          }
+        }
+      )
+    )
+  );
+};
+var showToast = (type, message) => {
+  toast2.custom(/* @__PURE__ */ React.createElement(CustomToast, { type, message }), {
+    duration: 4e3
+  });
+};
+var custom_toast_default = { showToast };
 export {
   Page as Accordion,
   AdvancedSearchButton,
@@ -5035,6 +5179,7 @@ export {
   SonarSpinner,
   switch_button_default as SwitchButton,
   table_default as Table,
-  upload_image_default as UploadImage
+  upload_image_default as UploadImage,
+  custom_toast_default as showToast
 };
 //# sourceMappingURL=index.mjs.map