@geomak/ui 1.6.0 → 1.6.2

package/dist/index.js

@@ -735,24 +735,21 @@ var TYPE_BG = {
   danger: "bg-status-error"
 };
 var VIEWPORT_CLASSES = {
-  "top-right": "fixed top-14 right-0     flex flex-col       items-end",
-  "top-left": "fixed top-14 left-0      flex flex-col       items-start",
+  "top-right": "fixed top-14 right-4     flex flex-col       items-end",
+  "top-left": "fixed top-14 left-4      flex flex-col       items-start",
   "top-center": "fixed top-14 left-1/2    flex flex-col       items-center -translate-x-1/2",
-  "bottom-right": "fixed bottom-4 right-0   flex flex-col-reverse items-end",
-  "bottom-left": "fixed bottom-4 left-0    flex flex-col-reverse items-start",
+  "bottom-right": "fixed bottom-4 right-4   flex flex-col-reverse items-end",
+  "bottom-left": "fixed bottom-4 left-4    flex flex-col-reverse items-start",
   "bottom-center": "fixed bottom-4 left-1/2  flex flex-col-reverse items-center -translate-x-1/2"
 };
 function getInitialMotion(pos, reduced) {
-  if (reduced) return { opacity: 0, x: 0, y: 0, scale: 1 };
-  const right = pos.endsWith("right");
-  const left = pos.endsWith("left");
-  const center = pos.endsWith("center");
+  if (reduced) return { opacity: 0, y: 0, scale: 1 };
   const bottom = pos.startsWith("bottom");
   return {
     opacity: 0,
-    x: right ? 40 : left ? -40 : 0,
-    y: center ? bottom ? 12 : -12 : 0,
-    scale: center ? 0.96 : 1
+    y: bottom ? 24 : -24,
+    // rise from below (bottom) or drop from above (top)
+    scale: 0.92
   };
 }
 function TypeIcon({ type }) {
@@ -793,16 +790,24 @@ function NotificationItem({
   return /* @__PURE__ */ jsx(
     motion.div,
     {
-      layout: true,
       initial,
-      animate: { opacity: 1, x: 0, y: 0, scale: 1 },
-      exit: { ...initial, opacity: 0 },
+      animate: { opacity: 1, y: 0, scale: 1 },
+      exit: {
+        opacity: 0,
+        y: pos.startsWith("bottom") ? 16 : -16,
+        scale: 0.94,
+        transition: reduced ? { duration: 0 } : {
+          opacity: { duration: 0.14, delay: 0.06 },
+          y: { type: "tween", duration: 0.22, ease: [0.4, 0, 1, 1] },
+          scale: { type: "tween", duration: 0.22, ease: [0.4, 0, 1, 1] }
+        }
+      },
       transition: reduced ? { duration: 0 } : {
-        opacity: { duration: 0.14 },
-        x: { type: "tween", duration: 0.22, ease: [0.16, 1, 0.3, 1] },
-        y: { type: "tween", duration: 0.22, ease: [0.16, 1, 0.3, 1] },
-        scale: { type: "tween", duration: 0.22, ease: [0.16, 1, 0.3, 1] },
-        layout: { duration: 0.18 }
+        // Opacity finishes in 0.15 s — card is fully opaque while y/scale
+        // still have ~55 % of their travel left → movement is clearly visible.
+        opacity: { duration: 0.15 },
+        y: { type: "tween", duration: 0.34, ease: [0.16, 1, 0.3, 1] },
+        scale: { type: "tween", duration: 0.34, ease: [0.16, 1, 0.3, 1] }
       },
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
@@ -876,7 +881,7 @@ function NotificationProvider({
         asChild: true,
         className: [
           VIEWPORT_CLASSES[position],
-          "z-[500000] gap-2 w-[332px] p-4 outline-none"
+          "z-[500000] gap-2 w-[340px] p-4 outline-none overflow-hidden"
         ].join(" "),
         children: /* @__PURE__ */ jsx("ul", { children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: notifications.map((n) => /* @__PURE__ */ jsx(
           NotificationItem,