@abdellatifui/react 3.2.94 → 3.2.96

package/dist/nextgen.css

@@ -591,6 +591,8 @@
     --tracking-wide: .025em;
     --tracking-wider: .05em;
     --tracking-widest: .1em;
+    --leading-tight: 1.25;
+    --leading-normal: 1.5;
     --radius-xs: .125rem;
     --radius-sm: .25rem;
     --radius-md: .375rem;
@@ -949,10 +951,6 @@
     top: 4px;
   }
 
-  .top-\[5px\] {
-    top: 5px;
-  }
-
   .top-\[6px\] {
     top: 6px;
   }
@@ -1093,6 +1091,10 @@
     z-index: 50;
   }
 
+  .z-52 {
+    z-index: 52;
+  }
+
   .z-100 {
     z-index: 100;
   }
@@ -1113,6 +1115,10 @@
     z-index: 501 !important;
   }
 
+  .z-502 {
+    z-index: 502;
+  }
+
   .z-\[30\] {
     z-index: 30;
   }
@@ -1199,10 +1205,6 @@
     margin-inline: calc(var(--spacing) * 2.5);
   }
 
-  .mx-\[10px\] {
-    margin-inline: 10px;
-  }
-
   .mx-auto {
     margin-inline: auto;
   }
@@ -1267,6 +1269,10 @@
     margin-right: 20px;
   }
 
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -1715,8 +1721,8 @@
     width: 300px;
   }
 
-  .w-\[350px\] {
-    width: 350px;
+  .w-\[360px\] {
+    width: 360px;
   }
 
   .w-\[400px\] {
@@ -2046,10 +2052,6 @@
     justify-content: flex-start;
   }
 
-  .justify-items-center {
-    justify-items: center;
-  }
-
   .gap-0\.5 {
     gap: calc(var(--spacing) * .5);
   }
@@ -2062,6 +2064,10 @@
     gap: calc(var(--spacing) * 2);
   }
 
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -2321,6 +2327,11 @@
     border-left-width: 1px;
   }
 
+  .border-l-\[3px\] {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 3px;
+  }
+
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
@@ -2394,28 +2405,36 @@
     border-top-color: #0000;
   }
 
-  .border-l-transparent {
-    border-left-color: #0000;
+  .border-l-\[\#3b82f6\] {
+    border-left-color: #3b82f6;
   }
 
-  .\!bg-blue-500 {
-    background-color: var(--color-blue-500) !important;
+  .border-l-\[\#10b981\] {
+    border-left-color: #10b981;
   }
 
-  .bg-\[\#4caf50\] {
-    background-color: #4caf50;
+  .border-l-\[\#6366f1\] {
+    border-left-color: #6366f1;
   }
 
-  .bg-\[\#85dab74e\] {
-    background-color: #85dab74e;
+  .border-l-\[\#ef4444\] {
+    border-left-color: #ef4444;
   }
 
-  .bg-\[\#2195f30b\] {
-    background-color: #2195f30b;
+  .border-l-\[\#f59e0b\] {
+    border-left-color: #f59e0b;
   }
 
-  .bg-\[\#2195f353\] {
-    background-color: #2195f353;
+  .border-l-transparent {
+    border-left-color: #0000;
+  }
+
+  .\!bg-blue-500 {
+    background-color: var(--color-blue-500) !important;
+  }
+
+  .bg-\[\#4caf50\] {
+    background-color: #4caf50;
   }
 
   .bg-\[\#2196f3\] {
@@ -2426,10 +2445,6 @@
     background-color: #37474f;
   }
 
-  .bg-\[\#333741\] {
-    background-color: #333741;
-  }
-
   .bg-\[\#FCA311\] {
     background-color: #fca311;
   }
@@ -2438,24 +2453,32 @@
     background-color: #e4e4e7;
   }
 
-  .bg-\[\#f44336\] {
-    background-color: #f44336;
+  .bg-\[\#eef2ff\] {
+    background-color: #eef2ff;
+  }
+
+  .bg-\[\#eff6ff\] {
+    background-color: #eff6ff;
   }
 
-  .bg-\[\#f443362e\] {
-    background-color: #f443362e;
+  .bg-\[\#f0fdf4\] {
+    background-color: #f0fdf4;
+  }
+
+  .bg-\[\#f44336\] {
+    background-color: #f44336;
   }
 
   .bg-\[\#fafafa\] {
     background-color: #fafafa;
   }
 
-  .bg-\[\#fca21138\] {
-    background-color: #fca21138;
+  .bg-\[\#fef2f2\] {
+    background-color: #fef2f2;
   }
 
-  .bg-\[\#fefefe\] {
-    background-color: #fefefe;
+  .bg-\[\#fffbeb\] {
+    background-color: #fffbeb;
   }
 
   .bg-black\/40 {
@@ -2536,10 +2559,6 @@
     background-color: var(--color-gray-300);
   }
 
-  .bg-gray-400 {
-    background-color: var(--color-gray-400);
-  }
-
   .bg-green-400 {
     background-color: var(--color-green-400);
   }
@@ -2672,6 +2691,10 @@
     padding: calc(var(--spacing) * 0);
   }
 
+  .p-0\.5 {
+    padding: calc(var(--spacing) * .5);
+  }
+
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -2688,6 +2711,10 @@
     padding: calc(var(--spacing) * 3);
   }
 
+  .p-3\.5 {
+    padding: calc(var(--spacing) * 3.5);
+  }
+
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -2796,6 +2823,10 @@
     padding-top: calc(var(--spacing) * 1.5);
   }
 
+  .pt-2\.5 {
+    padding-top: calc(var(--spacing) * 2.5);
+  }
+
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
@@ -2978,6 +3009,16 @@
     line-height: 1;
   }
 
+  .leading-normal {
+    --tw-leading: var(--leading-normal);
+    line-height: var(--leading-normal);
+  }
+
+  .leading-tight {
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+  }
+
   .\!font-bold {
     --tw-font-weight: var(--font-weight-bold) !important;
     font-weight: var(--font-weight-bold) !important;
@@ -3048,28 +3089,48 @@
     color: var(--color-blue-600) !important;
   }
 
-  .\!text-gray-300 {
-    color: var(--color-gray-300) !important;
-  }
-
   .\!text-white {
     color: var(--color-white) !important;
   }
 
-  .text-\[\#85dab6\] {
-    color: #85dab6;
+  .text-\[\#1e40af\] {
+    color: #1e40af;
+  }
+
+  .text-\[\#3b82f6\] {
+    color: #3b82f6;
   }
 
-  .text-\[\#2196f3\] {
-    color: #2196f3;
+  .text-\[\#10b981\] {
+    color: #10b981;
   }
 
-  .text-\[\#FCA311\] {
-    color: #fca311;
+  .text-\[\#065f46\] {
+    color: #065f46;
   }
 
-  .text-\[\#f44336\] {
-    color: #f44336;
+  .text-\[\#991b1b\] {
+    color: #991b1b;
+  }
+
+  .text-\[\#3730a3\] {
+    color: #3730a3;
+  }
+
+  .text-\[\#6366f1\] {
+    color: #6366f1;
+  }
+
+  .text-\[\#92400e\] {
+    color: #92400e;
+  }
+
+  .text-\[\#ef4444\] {
+    color: #ef4444;
+  }
+
+  .text-\[\#f59e0b\] {
+    color: #f59e0b;
   }
 
   .text-black {
@@ -3134,6 +3195,10 @@
     color: var(--color-gray-800);
   }
 
+  .text-gray-900 {
+    color: var(--color-gray-900);
+  }
+
   .text-green-400 {
     color: var(--color-green-400);
   }
@@ -3210,6 +3275,10 @@
     text-underline-offset: 4px;
   }
 
+  .caret-transparent {
+    caret-color: #0000;
+  }
+
   .opacity-0 {
     opacity: 0;
   }
@@ -3327,14 +3396,6 @@
     outline-offset: 10px;
   }
 
-  .outline-\[\#696f7b\] {
-    outline-color: #696f7b;
-  }
-
-  .outline-\[\#4165ed\] {
-    outline-color: #4165ed;
-  }
-
   .outline-blue-200 {
     outline-color: var(--color-blue-200);
   }
@@ -3449,6 +3510,11 @@
     transition-duration: .1s;
   }
 
+  .duration-150 {
+    --tw-duration: .15s;
+    transition-duration: .15s;
+  }
+
   .duration-200 {
     --tw-duration: .2s;
     transition-duration: .2s;
@@ -3785,6 +3851,16 @@
       background-color: var(--color-gray-200) !important;
     }
 
+    .hover\:bg-gray-200\/60:hover {
+      background-color: #e5e7eb99;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-gray-200\/60:hover {
+        background-color: color-mix(in oklab, var(--color-gray-200) 60%, transparent);
+      }
+    }
+
     .hover\:bg-gray-300:hover {
       background-color: var(--color-gray-300);
     }
@@ -3819,11 +3895,6 @@
       }
     }
 
-    .hover\:font-bold:hover {
-      --tw-font-weight: var(--font-weight-bold);
-      font-weight: var(--font-weight-bold);
-    }
-
     .hover\:\!text-blue-600:hover {
       color: var(--color-blue-600) !important;
     }
@@ -3875,11 +3946,6 @@
       outline-width: 1px;
     }
 
-    .hover\:outline-\[2px\]:hover {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
-    }
-
     .hover\:before\:opacity-100:hover:before {
       content: var(--tw-content);
       opacity: 1;
@@ -3910,6 +3976,10 @@
     --tw-ring-color: var(--color-blue-600);
   }
 
+  .focus\:ring-gray-300:focus {
+    --tw-ring-color: var(--color-gray-300);
+  }
+
   .focus\:ring-offset-2:focus {
     --tw-ring-offset-width: 2px;
     --tw-ring-offset-shadow: var(--tw-ring-inset, ) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
@@ -5310,6 +5380,8 @@
     --tracking-wide: .025em;
     --tracking-wider: .05em;
     --tracking-widest: .1em;
+    --leading-tight: 1.25;
+    --leading-normal: 1.5;
     --radius-xs: .125rem;
     --radius-2xl: 1rem;
     --ease-out: cubic-bezier(0, 0, .2, 1);
@@ -5680,10 +5752,6 @@
     top: 4px;
   }
 
-  .top-\[5px\] {
-    top: 5px;
-  }
-
   .top-\[6px\] {
     top: 6px;
   }
@@ -5824,6 +5892,10 @@
     z-index: 50;
   }
 
+  .z-52 {
+    z-index: 52;
+  }
+
   .z-100 {
     z-index: 100;
   }
@@ -5844,6 +5916,10 @@
     z-index: 501 !important;
   }
 
+  .z-502 {
+    z-index: 502;
+  }
+
   .z-\[30\] {
     z-index: 30;
   }
@@ -5930,10 +6006,6 @@
     margin-inline: calc(var(--spacing) * 2.5);
   }
 
-  .mx-\[10px\] {
-    margin-inline: 10px;
-  }
-
   .mx-auto {
     margin-inline: auto;
   }
@@ -5998,6 +6070,10 @@
     margin-right: 20px;
   }
 
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -6446,8 +6522,8 @@
     width: 300px;
   }
 
-  .w-\[350px\] {
-    width: 350px;
+  .w-\[360px\] {
+    width: 360px;
   }
 
   .w-\[400px\] {
@@ -6777,10 +6853,6 @@
     justify-content: flex-start;
   }
 
-  .justify-items-center {
-    justify-items: center;
-  }
-
   .gap-0\.5 {
     gap: calc(var(--spacing) * .5);
   }
@@ -6793,6 +6865,10 @@
     gap: calc(var(--spacing) * 2);
   }
 
+  .gap-3 {
+    gap: calc(var(--spacing) * 3);
+  }
+
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
@@ -7052,6 +7128,11 @@
     border-left-width: 1px;
   }
 
+  .border-l-\[3px\] {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 3px;
+  }
+
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
@@ -7155,6 +7236,26 @@
     border-top-color: #0000;
   }
 
+  .border-l-\[\#3b82f6\] {
+    border-left-color: #3b82f6;
+  }
+
+  .border-l-\[\#10b981\] {
+    border-left-color: #10b981;
+  }
+
+  .border-l-\[\#6366f1\] {
+    border-left-color: #6366f1;
+  }
+
+  .border-l-\[\#ef4444\] {
+    border-left-color: #ef4444;
+  }
+
+  .border-l-\[\#f59e0b\] {
+    border-left-color: #f59e0b;
+  }
+
   .border-l-transparent {
     border-left-color: #0000;
   }
@@ -7171,18 +7272,6 @@
     background-color: #4caf50;
   }
 
-  .bg-\[\#85dab74e\] {
-    background-color: #85dab74e;
-  }
-
-  .bg-\[\#2195f30b\] {
-    background-color: #2195f30b;
-  }
-
-  .bg-\[\#2195f353\] {
-    background-color: #2195f353;
-  }
-
   .bg-\[\#2196f3\] {
     background-color: #2196f3;
   }
@@ -7191,10 +7280,6 @@
     background-color: #37474f;
   }
 
-  .bg-\[\#333741\] {
-    background-color: #333741;
-  }
-
   .bg-\[\#FCA311\] {
     background-color: #fca311;
   }
@@ -7203,24 +7288,32 @@
     background-color: #e4e4e7;
   }
 
-  .bg-\[\#f44336\] {
-    background-color: #f44336;
+  .bg-\[\#eef2ff\] {
+    background-color: #eef2ff;
+  }
+
+  .bg-\[\#eff6ff\] {
+    background-color: #eff6ff;
   }
 
-  .bg-\[\#f443362e\] {
-    background-color: #f443362e;
+  .bg-\[\#f0fdf4\] {
+    background-color: #f0fdf4;
+  }
+
+  .bg-\[\#f44336\] {
+    background-color: #f44336;
   }
 
   .bg-\[\#fafafa\] {
     background-color: #fafafa;
   }
 
-  .bg-\[\#fca21138\] {
-    background-color: #fca21138;
+  .bg-\[\#fef2f2\] {
+    background-color: #fef2f2;
   }
 
-  .bg-\[\#fefefe\] {
-    background-color: #fefefe;
+  .bg-\[\#fffbeb\] {
+    background-color: #fffbeb;
   }
 
   .bg-accent, .bg-accent\/50 {
@@ -7327,10 +7420,6 @@
     background-color: var(--color-gray-300);
   }
 
-  .bg-gray-400 {
-    background-color: var(--color-gray-400);
-  }
-
   .bg-green-400 {
     background-color: var(--color-green-400);
   }
@@ -7495,6 +7584,10 @@
     padding: calc(var(--spacing) * 0);
   }
 
+  .p-0\.5 {
+    padding: calc(var(--spacing) * .5);
+  }
+
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -7511,6 +7604,10 @@
     padding: calc(var(--spacing) * 3);
   }
 
+  .p-3\.5 {
+    padding: calc(var(--spacing) * 3.5);
+  }
+
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -7619,6 +7716,10 @@
     padding-top: calc(var(--spacing) * 1.5);
   }
 
+  .pt-2\.5 {
+    padding-top: calc(var(--spacing) * 2.5);
+  }
+
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
@@ -7801,6 +7902,16 @@
     line-height: 1;
   }
 
+  .leading-normal {
+    --tw-leading: var(--leading-normal);
+    line-height: var(--leading-normal);
+  }
+
+  .leading-tight {
+    --tw-leading: var(--leading-tight);
+    line-height: var(--leading-tight);
+  }
+
   .\!font-bold {
     --tw-font-weight: var(--font-weight-bold) !important;
     font-weight: var(--font-weight-bold) !important;
@@ -7871,28 +7982,48 @@
     color: var(--color-blue-600) !important;
   }
 
-  .\!text-gray-300 {
-    color: var(--color-gray-300) !important;
-  }
-
   .\!text-white {
     color: var(--color-white) !important;
   }
 
-  .text-\[\#85dab6\] {
-    color: #85dab6;
+  .text-\[\#1e40af\] {
+    color: #1e40af;
+  }
+
+  .text-\[\#3b82f6\] {
+    color: #3b82f6;
   }
 
-  .text-\[\#2196f3\] {
-    color: #2196f3;
+  .text-\[\#10b981\] {
+    color: #10b981;
   }
 
-  .text-\[\#FCA311\] {
-    color: #fca311;
+  .text-\[\#065f46\] {
+    color: #065f46;
   }
 
-  .text-\[\#f44336\] {
-    color: #f44336;
+  .text-\[\#991b1b\] {
+    color: #991b1b;
+  }
+
+  .text-\[\#3730a3\] {
+    color: #3730a3;
+  }
+
+  .text-\[\#6366f1\] {
+    color: #6366f1;
+  }
+
+  .text-\[\#92400e\] {
+    color: #92400e;
+  }
+
+  .text-\[\#ef4444\] {
+    color: #ef4444;
+  }
+
+  .text-\[\#f59e0b\] {
+    color: #f59e0b;
   }
 
   .text-accent {
@@ -7977,6 +8108,10 @@
     color: var(--color-gray-800);
   }
 
+  .text-gray-900 {
+    color: var(--color-gray-900);
+  }
+
   .text-green-400 {
     color: var(--color-green-400);
   }
@@ -8073,6 +8208,10 @@
     text-underline-offset: 4px;
   }
 
+  .caret-transparent {
+    caret-color: #0000;
+  }
+
   .opacity-0 {
     opacity: 0;
   }
@@ -8194,14 +8333,6 @@
     outline-offset: 10px;
   }
 
-  .outline-\[\#696f7b\] {
-    outline-color: #696f7b;
-  }
-
-  .outline-\[\#4165ed\] {
-    outline-color: #4165ed;
-  }
-
   .outline-blue-200 {
     outline-color: var(--color-blue-200);
   }
@@ -8316,6 +8447,11 @@
     transition-duration: .1s;
   }
 
+  .duration-150 {
+    --tw-duration: .15s;
+    transition-duration: .15s;
+  }
+
   .duration-200 {
     --tw-duration: .2s;
     transition-duration: .2s;
@@ -8690,6 +8826,16 @@
       background-color: var(--color-gray-200) !important;
     }
 
+    .hover\:bg-gray-200\/60:hover {
+      background-color: #e5e7eb99;
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-gray-200\/60:hover {
+        background-color: color-mix(in oklab, var(--color-gray-200) 60%, transparent);
+      }
+    }
+
     .hover\:bg-gray-300:hover {
       background-color: var(--color-gray-300);
     }
@@ -8764,11 +8910,6 @@
       }
     }
 
-    .hover\:font-bold:hover {
-      --tw-font-weight: var(--font-weight-bold);
-      font-weight: var(--font-weight-bold);
-    }
-
     .hover\:\!text-blue-600:hover {
       color: var(--color-blue-600) !important;
     }
@@ -8828,11 +8969,6 @@
       outline-width: 1px;
     }
 
-    .hover\:outline-\[2px\]:hover {
-      outline-style: var(--tw-outline-style);
-      outline-width: 2px;
-    }
-
     .hover\:before\:opacity-100:hover:before {
       content: var(--tw-content);
       opacity: 1;
@@ -8871,6 +9007,10 @@
     --tw-ring-color: var(--color-blue-600);
   }
 
+  .focus\:ring-gray-300:focus {
+    --tw-ring-color: var(--color-gray-300);
+  }
+
   .focus\:ring-ring:focus {
     --tw-ring-color: var(--ring);
   }

package/dist/nextgen.d.ts

@@ -589,6 +589,7 @@ declare interface MainframeProps_2 {
         id: string;
         header: string;
         body: string;
+        message: string;
         type: string | null;
         duration?: number;
         buttons: [];

package/dist/nextgen.js

@@ -12,7 +12,7 @@ import { PathLayer } from "@deck.gl/layers";
 import { LayerExtension, _mergeShaders } from "@deck.gl/core";
 import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { InfoCircledIcon, QuestionMarkCircledIcon, Cross2Icon, MagnifyingGlassIcon, ChevronDownIcon, ArrowLeftIcon, ArrowRightIcon, CheckIcon as CheckIcon$2 } from "@radix-ui/react-icons";
-import { AlertTriangle, Check, GripHorizontal, CircleCheckBig, CircleAlert, TriangleAlert, CheckIcon as CheckIcon$1, MapPin, Settings, Copy, CheckCheck, Maximize2, Minimize2, Info, ChevronUp, ChevronDown, X, ChevronRight, ChevronLeft, EllipsisVertical, Eye, EyeOff, Search, Filter, Rows4, FoldHorizontal, Grid2x2CheckIcon, Download, FilterX, RotateCw, Fullscreen, Brackets, LucideEllipsisVertical, Columns3, CircleHelp } from "lucide-react";
+import { AlertTriangle, Check, GripHorizontal, TriangleAlert, Info, CircleAlert, CircleCheckBig, X, CheckIcon as CheckIcon$1, MapPin, Settings, Copy, CheckCheck, Maximize2, Minimize2, ChevronUp, ChevronDown, ChevronRight, ChevronLeft, EllipsisVertical, Eye, EyeOff, Search, Filter, Rows4, FoldHorizontal, Grid2x2CheckIcon, Download, FilterX, RotateCw, Fullscreen, Brackets, LucideEllipsisVertical, Columns3, CircleHelp } from "lucide-react";
 export * from "lucide-react";
 import copy from "copy-to-clipboard";
 import emStyled from "@emotion/styled";
@@ -18793,12 +18793,6 @@ const Alert2 = forwardRef((props, ref) => {
   const [queue] = useQueue(dialog);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(AlertsContext.Provider, { value: { queue }, children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, children: /* @__PURE__ */ jsxRuntimeExports.jsx(AlertRouter, {}) }) });
 });
-const ToasterSideColor = (props) => {
-  const {
-    type = "success"
-  } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "relative" });
-};
 function getCircularProgressUtilityClass(slot) {
   return generateUtilityClass$1("MuiCircularProgress", slot);
 }
@@ -19124,34 +19118,63 @@ process.env.NODE_ENV !== "production" ? CircularProgress2.propTypes = {
    */
   variant: PropTypes.oneOfType([PropTypes.oneOf(["outlined", "plain", "soft", "solid"]), PropTypes.string])
 } : void 0;
-const vrs2$1 = cva("rounded relative", {
-  variants: {
-    mode: {
-      dark: "bg-[#333741] outline-[#696f7b]",
-      light: "bg-[#fefefe] outline-[#4165ed] hover:outline-[2px]"
-    },
-    text: {
-      dark: "!text-gray-300",
-      light: "text-gray-600"
-    },
-    header: {
-      dark: "text-accent",
-      light: "text-black"
-    }
+const iconConfig = {
+  success: {
+    icon: CircleCheckBig,
+    iconColor: "text-[#10b981]",
+    // borderColor: 'border-l-[#10b981]',
+    bgColor: "bg-[#f0fdf4]",
+    textColor: "text-[#065f46]"
+  },
+  error: {
+    icon: CircleAlert,
+    iconColor: "text-[#ef4444]",
+    // borderColor: 'border-l-[#ef4444]',
+    bgColor: "bg-[#fef2f2]",
+    textColor: "text-[#991b1b]"
+  },
+  info: {
+    icon: Info,
+    iconColor: "text-[#3b82f6]",
+    // borderColor: 'border-l-[#3b82f6]',
+    bgColor: "bg-[#eff6ff]",
+    textColor: "text-[#1e40af]"
+  },
+  warning: {
+    icon: TriangleAlert,
+    iconColor: "text-[#f59e0b]",
+    // borderColor: 'border-l-[#f59e0b]',   
+    bgColor: "bg-[#fffbeb]",
+    textColor: "text-[#92400e]"
+  },
+  progress: {
+    icon: null,
+    iconColor: "text-[#6366f1]",
+    // borderColor: 'border-l-[#6366f1]',
+    bgColor: "bg-[#eef2ff]",
+    textColor: "text-[#3730a3]"
   }
-});
+};
 const Sideicon = (props) => {
   const {
     type = "success",
     icons = true
   } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center mx-[10px]", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "", children: [
-    type == "success" && icons ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-[#85dab74e]  p-1 rounded-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheckBig, { className: "text-[#85dab6] w-[15px] h-[15px]" }) }) : null,
-    type == "error" && icons ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-[#f443362e] p-1 rounded-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "text-[#f44336] w-[15px] h-[15px]" }) }) : null,
-    type == "info" && icons ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-[#2195f353] p-1 rounded-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "text-[#2196f3] w-[15px] h-[15px]" }) }) : null,
-    type == "progress" && icons ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-[#2195f30b] p-1 rounded-full flex justify-items-center", children: /* @__PURE__ */ jsxRuntimeExports.jsx(CircularProgress2, { size: "sm", className: " w-[15px] h-[15px]" }) }) : null,
-    type == "warning" && icons ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-[#fca21138] p-1 rounded-full", children: /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "text-[#FCA311] w-[15px] h-[15px]" }) }) : null
-  ] }) });
+  if (!icons) return null;
+  const config = iconConfig[type] || iconConfig.success;
+  const Icon = config.icon;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center shrink-0", children: type === "progress" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    CircularProgress2,
+    {
+      size: "sm",
+      className: "w-5 h-5",
+      sx: {
+        "--CircularProgress-size": "20px",
+        "--CircularProgress-trackColor": "#e5e7eb",
+        "--CircularProgress-progressColor": "#6366f1"
+      }
+    }
+  ) : Icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { className: cn("w-5 h-5", config.iconColor), strokeWidth: 2 }) : null });
 };
 const ToasterBody = (props) => {
   const { item } = props;
@@ -19164,16 +19187,26 @@ const ToasterBody = (props) => {
     toast.dismiss(params.id);
     toast.remove(params.id);
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-[200px] h-auto mt-1 w-full ", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn(vrs2$1({ header: mode }), "flex items-center w-full "), children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Sideicon, { ...props }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-geist text-[13px]", children: props.header }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: handleDismiss, className: "absolute right-2 select-none text-blue-500 font-Roboto text-[10px] top-[5px] hover:underline hover:font-bold", children: "DISMISS" })
+  iconConfig[item?.type] || iconConfig.success;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-3 mb-1", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("h4", { className: "font-semibold text-[13px] text-gray-900 leading-tight", children: props.header }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "button",
+        {
+          onClick: handleDismiss,
+          className: cn(
+            "shrink-0 p-0.5 rounded transition-colors duration-150",
+            "hover:bg-gray-200/60",
+            "focus:outline-none focus:ring-2 focus:ring-gray-300"
+          ),
+          "aria-label": "Dismiss notification",
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "w-3.5 h-3.5 text-gray-500", strokeWidth: 2 })
+        }
+      )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(vrs2$1({ text: mode }), "text-[12px] select-none ml-2 h-fit mt-1"), children: props.body }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex my-1 space-x-1", children: buttons.map((button, index) => {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: button(item, params) }, index);
-    }) })
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-[12px] text-gray-600 leading-normal", children: props.body }),
+    buttons.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex gap-2 mt-3 pt-2.5 border-t border-gray-200", children: buttons.map((button, index) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: button(item, params) }, index)) })
   ] }, "_tb_" + params.id);
 };
 const Mainframe = (props) => {
@@ -19192,22 +19225,20 @@ const Mainframe = (props) => {
         toast.remove(params.id);
       };
       item.toast = toast;
-      console.log("New Notification : ", item);
     }
     return () => {
-      toast.remove(params.id);
-      item?.onAfterLoad?.({ ...item, ref });
       if (item?.toastId) {
         delete context.notifyArray.current[item.toastId];
       }
     };
-  }, [item]);
+  }, []);
   const enterAnimation = {
-    initial: { opacity: 0, scale: 0 },
-    animate: { opacity: 1, scale: 1 },
+    initial: { opacity: 0, y: -10 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, scale: 0.95 },
     transition: {
-      duration: 0.4,
-      scale: { type: "", visualDuration: 0.4, bounce: 0.5 }
+      duration: 0.2,
+      ease: "easeOut"
     }
   };
   useEffect(() => {
@@ -19216,15 +19247,20 @@ const Mainframe = (props) => {
     }
     item?.onLoad?.({ ...item, ref });
   }, []);
+  const config = iconConfig[item?.type] || iconConfig.success;
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     motion.div,
     {
       ...enterAnimation,
       ref,
       "data-toastid": item?.toastId || "",
-      className: "z-501",
-      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(vrs2$1({ mode }), "shadow border border-accent hover:outline outline-gray-200 outline-offset-2 z-501"), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-[350px] flex p-1", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ToasterSideColor, { ...props }),
+      className: "z-502",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn(
+        "bg-white rounded-sm border border-gray-200 shadow-sm",
+        "border-l-[3px]",
+        config.borderColor
+      ), children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-[360px] flex items-start gap-3 p-3.5", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Sideicon, { ...props }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(ToasterBody, { ...props, item })
       ] }) })
     }
@@ -19237,7 +19273,7 @@ const Toast = (props) => {
     duration: duration2 = 6e3,
     ref
   } = props;
-  const id = useGeneratedId();
+  const id = useRandomId();
   useEffect(() => {
     if (item.type && id) {
       if (!item.header) {
@@ -19251,12 +19287,27 @@ const Toast = (props) => {
           item.header = "Information";
         } else if (item.type == "progress") {
           item.header = "In-Progress";
+        } else if (item.type == "inprogress") {
+          item.header = "In-Progress";
+        } else if (item.type == "in-progress") {
+          item.header = "In-Progress";
         } else if (item.type == "success") {
           item.header = "Success";
         }
       }
       toast.custom(
-        (t) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: t.visible ? "custom-toast show" : "custom-toast hide", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Mainframe, { params: t, ...item, item }, t.id) }),
+        (t) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            ref,
+            id,
+            className: cn(
+              "custom-toast z-52",
+              t.visible ? "show" : "hide"
+            ),
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(Mainframe, { params: t, ...item, item }, t.id)
+          }
+        ),
         {
           position: "bottom-right",
           duration: item?.duration || duration2
@@ -19636,7 +19687,18 @@ const Element$1 = (props) => {
         type: type ? "auto-complete" : "select",
         tmpdescription,
         loading: spinLoading.toString(),
-        className: cn("w-full", className)
+        className: cn("w-full caret-transparent", className),
+        inputProps: {
+          onKeyDown: (e) => {
+            if (e.key == "ArrowDown") {
+              const nextOption = options2[options2.findIndex((item) => item == unControlledValue) + 1];
+              onChangeEvent(e, nextOption);
+            } else if (e.key == "ArrowUp") {
+              const nextOption = options2[options2.findIndex((item) => item == unControlledValue) - 1];
+              onChangeEvent(e, nextOption);
+            }
+          }
+        }
       }
     ) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -25780,7 +25842,9 @@ const AllInputComponent = (props) => {
               type: ttype,
               invalid: _invalid.toString(),
               onChange: handleChange2,
+              ...inputProps,
               onKeyDown: (event) => {
+                inputProps?.onKeyDown?.(event);
                 if (event.key === "Enter") {
                   const e = {
                     ref2,
@@ -25800,8 +25864,7 @@ const AllInputComponent = (props) => {
                   };
                   onEnterKey(e, debouncedText);
                 }
-              },
-              ...inputProps
+              }
             }
           ) : /* @__PURE__ */ jsxRuntimeExports.jsx(
             Textarea,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@abdellatifui/react",
   "private": false,
-  "version": "3.2.94",
+  "version": "3.2.96",
   "type": "module",
   "types": "dist/nextgen.d.ts",
   "files": [
@@ -11,8 +11,7 @@
   "module": "dist/nextgen.js",
   "scripts": {
     "dev": "vite --host",
-    "push": "git add . && git commit -m 'update' && npm version patch && npm run build && npm publish --access=public",
-    "build": "tsc -b && vite build",
+    "build": "git add . && git commit -m 'update' && npm version patch && tsc -b && vite build && npm publish --access=public",
     "lint": "eslint .",
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",