gbs-add-block 0.0.43 → 0.0.44

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.43)
+# GBS Building Blocks 2.0 (v0.0.44)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,7 +6,7 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.43)
+## What's New 🎉 (Ver 0.0.44)
 
 - Refactored Code for Better Readability and removed dependency for Toast
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.43",
+  "version": "0.0.44",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/toast/ToastComponent.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from "react";
 import { Toast } from "./types";
 import { useToastStore } from "./toastStore";
+import ToastIcon from "./ToastIcon";
 
 interface ToastProps {
   toast: Toast;
@@ -13,11 +14,11 @@ const bgColors = {
   warning: "bg-yellow-50 hover:bg-yellow-100",
 } as const;
 
-const iconColors = {
-  default: "text-gray-800",
-  success: "text-green-600",
-  error: "text-red-600",
-  warning: "text-yellow-600",
+const toastAnimation = {
+  default: "",
+  error: "animate-shake animate-once animate-duration-200",
+  success: "animate-jump-in animate-once animate-duration-200",
+  warning: "animate-jump-in animate-once animate-duration-200",
 } as const;
 
 const CloseButton = ({ onDismiss }: { onDismiss: () => void }) => (
@@ -41,57 +42,6 @@ const CloseButton = ({ onDismiss }: { onDismiss: () => void }) => (
   </button>
 );
 
-const ToastIcon = ({ type }: { type: Toast["type"] }) => {
-  if (!type) return null;
-
-  return (
-    <div className={`h-5 w-5 ${iconColors[type]}`}>
-      {type === "success" && (
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M5 13l4 4L19 7"
-          />
-        </svg>
-      )}
-      {type === "error" && (
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M6 18L18 6M6 6l12 12"
-          />
-        </svg>
-      )}
-      {type === "warning" && (
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="2"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-          />
-        </svg>
-      )}
-    </div>
-  );
-};
-
 export function ToastComponent({ toast }: ToastProps) {
   const { dismiss } = useToastStore();
   const handleDismiss = () => dismiss(toast.id);
@@ -121,9 +71,10 @@ export function ToastComponent({ toast }: ToastProps) {
     <div
       className={`
         ${bgColors[toast.type || "default"]}
+        ${toastAnimation[toast.type || "default"]}
         transform transition-all duration-300 ease-in-out
         pointer-events-auto relative flex w-full items-center justify-between
-        overflow-hidden rounded-lg border p-4 shadow-lg
+        overflow-hidden rounded-full border px-4 py-3 shadow-lg
       `}
       role="alert"
     >

package/source/components/toast/ToastIcon.tsx

@@ -0,0 +1,61 @@
+import { Toast } from "./types";
+
+const ToastIcon = ({ type }: { type: Toast["type"] }) => {
+  if (!type) return null;
+
+  const iconColors = {
+    default: "text-gray-800",
+    success: "text-green-600",
+    error: "text-red-600",
+    warning: "text-yellow-600",
+  } as const;
+
+  return (
+    <div className={`h-5 w-5 ${iconColors[type]}`}>
+      {type === "success" && (
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M5 13l4 4L19 7"
+          />
+        </svg>
+      )}
+      {type === "error" && (
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M6 18L18 6M6 6l12 12"
+          />
+        </svg>
+      )}
+      {type === "warning" && (
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+          />
+        </svg>
+      )}
+    </div>
+  );
+};
+
+export default ToastIcon;