fis-component 0.0.79 → 0.0.80

package/dist/cjs/index.js

@@ -61835,13 +61835,139 @@ const DivTitleWrap = styled.div `
 `;
 const ToastWrapper = styled.div `
   position: fixed;
-  ${(props) => props.$position === "bottom-center" ? "bottom: 20px;" : "top: 20px;"}
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1000;
+  z-index: 1050; /* Cao hơn bootstrap modal (1040) và các component khác */
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 12px; /* Tăng gap để toast không quá sát nhau */
+  max-width: 420px; /* Tăng một chút cho nội dung dài */
+  min-width: 320px; /* Tăng min-width cho đẹp hơn */
+  pointer-events: none; /* Tránh chặn click vào các element phía sau */
+
+  /* Cho phép click vào các toast con */
+  > * {
+    pointer-events: auto;
+  }
+
+  ${(props) => {
+    switch (props.$position) {
+        case "top-center":
+            return styled.css `
+          top: 24px;
+          left: 50%;
+          transform: translateX(-50%);
+        `;
+        case "bottom-center":
+            return styled.css `
+          bottom: 24px;
+          left: 50%;
+          transform: translateX(-50%);
+          flex-direction: column-reverse; /* Toast mới xuất hiện từ dưới lên */
+        `;
+        case "top-right":
+            return styled.css `
+          top: 24px;
+          right: 24px;
+        `;
+        case "bottom-right":
+            return styled.css `
+          bottom: 24px;
+          right: 24px;
+          flex-direction: column-reverse;
+        `;
+        case "top-left":
+            return styled.css `
+          top: 24px;
+          left: 24px;
+        `;
+        case "bottom-left":
+            return styled.css `
+          bottom: 24px;
+          left: 24px;
+          flex-direction: column-reverse;
+        `;
+        default:
+            return styled.css `
+          top: 24px;
+          left: 50%;
+          transform: translateX(-50%);
+        `;
+    }
+}}
+
+  /* Animation cho toast xuất hiện */
+  > div {
+    animation: toastSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+
+  @keyframes toastSlideIn {
+    from {
+      opacity: 0;
+      transform: translateY(-12px) scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  /* Animation cho bottom positions */
+  ${(props) => props.$position?.includes("bottom") &&
+    styled.css `
+      > div {
+        animation: toastSlideInBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      @keyframes toastSlideInBottom {
+        from {
+          opacity: 0;
+          transform: translateY(12px) scale(0.95);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0) scale(1);
+        }
+      }
+    `}
+
+  /* Responsive cho mobile */
+  @media (max-width: 768px) {
+    max-width: calc(100vw - 32px);
+    min-width: calc(100vw - 32px);
+
+    ${(props) => {
+    if (props.$position?.includes("center")) {
+        return styled.css `
+          left: 16px;
+          right: 16px;
+          transform: none;
+        `;
+    }
+    else if (props.$position?.includes("left")) {
+        return styled.css `
+          left: 16px;
+        `;
+    }
+    else if (props.$position?.includes("right")) {
+        return styled.css `
+          right: 16px;
+        `;
+    }
+}}
+
+    ${(props) => props.$position?.includes("top")
+    ? styled.css `
+            top: 16px;
+          `
+    : styled.css `
+            bottom: 16px;
+          `}
+  }
+
+  /* Tablet breakpoint */
+  @media (max-width: 1024px) and (min-width: 769px) {
+    max-width: 380px;
+    min-width: 300px;
+  }
 `;
 
 const getPadding = (size, borderPath) => {
@@ -62567,7 +62693,7 @@ const ToastProvider = ({ children, }) => {
             setToasts((prev) => prev.slice(1));
         }, duration);
     }, []);
-    return (jsxRuntime.jsxs(ToastContext.Provider, { value: { showToast }, children: [children, toasts.length > 0 && (jsxRuntime.jsx(ToastWrapper, { "$position": toasts[0].position || "top-center", children: toasts.map((toast, index) => (jsxRuntime.jsx(FISToast, { ...toast }, index))) }))] }));
+    return (jsxRuntime.jsxs(ToastContext.Provider, { value: { showToast }, children: [children, toasts.length > 0 && (jsxRuntime.jsx(ToastWrapper, { "$position": toasts[0].position || "top-right", children: toasts.map((toast, index) => (jsxRuntime.jsx(FISToast, { ...toast }, index))) }))] }));
 };
 
 const FISThemeProvider = ({ theme: theme$1 = theme, children, }) => (jsxRuntime.jsxs(styled.ThemeProvider, { theme: theme$1, children: [jsxRuntime.jsx(GlobalStyle, { theme: theme$1 }), jsxRuntime.jsx(NotificationProvider, { children: jsxRuntime.jsx(ToastProvider, { children: children }) })] }));