@geomak/ui 1.5.2 → 1.6.0

package/dist/index.js

@@ -457,11 +457,11 @@ function Tooltip({
         className: [
           // Layout + typography
           "pointer-events-none z-[500000] max-w-[220px] px-2.5 py-1.5",
-          "text-xs font-medium leading-snug text-white",
-          // Background + border — slightly translucent for depth
-          "bg-foreground/95 rounded-md border border-white/5",
-          // Shadow
-          "shadow-md",
+          // Inverted surface: dark on light, light on dark — both readable
+          "bg-foreground text-background",
+          "text-xs font-medium leading-snug",
+          // Shape + shadow
+          "rounded-md shadow-md",
           // Out animation (always the same — just fade)
           "data-[state=closed]:animate-tooltip-out",
           // In animation — direction-aware
@@ -474,7 +474,7 @@ function Tooltip({
             {
               width: 10,
               height: 5,
-              className: "fill-foreground/95"
+              className: "fill-foreground"
             }
           )
         ]
@@ -785,8 +785,11 @@ 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,
     {
@@ -801,11 +804,13 @@ function NotificationItem({
         scale: { type: "tween", duration: 0.22, ease: [0.16, 1, 0.3, 1] },
         layout: { duration: 0.18 }
       },
-      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 +820,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"
+                }
               }
             ) })
-          ] })
+          ]
         }
       )
     }