@geomak/ui 1.5.3 → 1.6.1

package/dist/index.js

@@ -743,16 +743,13 @@ var VIEWPORT_CLASSES = {
   "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 ? 10 : -10,
+    // drop in from above (top) or rise from below (bottom)
+    scale: 0.94
   };
 }
 function TypeIcon({ type }) {
@@ -785,27 +782,31 @@ function NotificationItem({
   onClose,
   reduced
 }) {
+  const [hovered, setHovered] = useState(false);
   const initial = getInitialMotion(pos, reduced);
   const center = pos.endsWith("center");
+  const duration = n.duration ?? 4e3;
+  const showProgress = !reduced && isFinite(duration) && duration > 0;
   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: initial,
       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: { duration: 0.18 },
+        y: { type: "tween", duration: 0.24, ease: [0.16, 1, 0.3, 1] },
+        scale: { type: "tween", duration: 0.24, ease: [0.16, 1, 0.3, 1] },
+        layout: { duration: 0.2, ease: [0.16, 1, 0.3, 1] }
       },
-      children: /* @__PURE__ */ jsx(
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      children: /* @__PURE__ */ jsxs(
         Toast.Root,
         {
           open: true,
-          duration: n.duration,
+          duration,
           onOpenChange: (o) => {
             if (!o) onClose(n.id);
           },
@@ -815,22 +816,34 @@ function NotificationItem({
             "focus:outline-none",
             TYPE_BG[n.type ?? "info"]
           ].join(" "),
-          children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-3 pr-2.5", children: [
-            /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex-shrink-0 text-white/90", children: /* @__PURE__ */ jsx(TypeIcon, { type: n.type ?? "info" }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsx(Toast.Title, { className: "text-sm font-semibold text-white leading-snug", children: n.title }),
-              n.description && /* @__PURE__ */ jsx(Toast.Description, { className: "mt-0.5 text-xs text-white/75 leading-relaxed", children: n.description })
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 p-3 pr-2.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex-shrink-0 text-white/90", children: /* @__PURE__ */ jsx(TypeIcon, { type: n.type ?? "info" }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                /* @__PURE__ */ jsx(Toast.Title, { className: "text-sm font-semibold text-white leading-snug", children: n.title }),
+                n.description && /* @__PURE__ */ jsx(Toast.Description, { className: "mt-0.5 text-xs text-white/75 leading-relaxed", children: n.description })
+              ] }),
+              /* @__PURE__ */ jsx(Toast.Action, { asChild: true, altText: "Close", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": "Close",
+                  onClick: () => onClose(n.id),
+                  className: "flex-shrink-0 mt-0.5 rounded p-1 text-white/60 hover:text-white hover:bg-white/15 transition-colors duration-100 focus:outline-none focus-visible:ring-1 focus-visible:ring-white/50",
+                  children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                }
+              ) })
             ] }),
-            /* @__PURE__ */ jsx(Toast.Action, { asChild: true, altText: "Close", children: /* @__PURE__ */ jsx(
-              "button",
+            showProgress && /* @__PURE__ */ jsx("div", { className: "relative h-[3px] bg-white/20 overflow-hidden", children: /* @__PURE__ */ jsx(
+              "div",
               {
-                "aria-label": "Close",
-                onClick: () => onClose(n.id),
-                className: "flex-shrink-0 mt-0.5 rounded p-1 text-white/60 hover:text-white hover:bg-white/15 transition-colors duration-100 focus:outline-none focus-visible:ring-1 focus-visible:ring-white/50",
-                children: /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                className: "absolute inset-0 bg-white/60 [transform-origin:left]",
+                style: {
+                  animation: `notification-progress ${duration}ms linear forwards`,
+                  animationPlayState: hovered ? "paused" : "running"
+                }
               }
             ) })
-          ] })
+          ]
         }
       )
     }