@geomak/ui 5.0.1 → 5.0.2

package/dist/index.cjs

@@ -10,7 +10,6 @@ var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var Accordion = require('@radix-ui/react-accordion');
 var ToggleGroup = require('@radix-ui/react-toggle-group');
-var Toast = require('@radix-ui/react-toast');
 var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
 var Popover = require('@radix-ui/react-popover');
 var SwitchPrimitive = require('@radix-ui/react-switch');
@@ -42,7 +41,6 @@ var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitiv
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 var Accordion__namespace = /*#__PURE__*/_interopNamespace(Accordion);
 var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
-var Toast__namespace = /*#__PURE__*/_interopNamespace(Toast);
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
 var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
@@ -816,12 +814,12 @@ var VIEWPORT_CLASSES = {
 function getInitialMotion(pos, reduced) {
   if (reduced) return { opacity: 0, y: 0, scale: 1 };
   const bottom = pos.startsWith("bottom");
-  return {
-    opacity: 0,
-    y: bottom ? 24 : -24,
-    // rise from below (bottom) or drop from above (top)
-    scale: 0.92
-  };
+  return { opacity: 0, y: bottom ? 28 : -28, scale: 0.92 };
+}
+function getExitMotion(pos, reduced) {
+  if (reduced) return { opacity: 0, y: 0, scale: 1 };
+  const bottom = pos.startsWith("bottom");
+  return { opacity: 0, y: bottom ? 18 : -18, scale: 0.94 };
 }
 function TypeIcon({ type }) {
   if (type === "success") {
@@ -853,66 +851,87 @@ function NotificationItem({
   onClose,
   reduced
 }) {
-  const [hovered, setHovered] = React8.useState(false);
-  const initial = getInitialMotion(pos, reduced);
-  const center = pos.endsWith("center");
+  const [paused, setPaused] = React8.useState(false);
   const duration = n.duration ?? 4e3;
-  const showProgress = !reduced && isFinite(duration) && duration > 0;
+  const isAutoDismissing = isFinite(duration) && duration > 0;
+  const showProgress = !reduced && isAutoDismissing;
+  const timerRef = React8.useRef(null);
+  const startTimeRef = React8.useRef(0);
+  const remainingRef = React8.useRef(duration);
+  const clearTimer = React8.useCallback(() => {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  const scheduleDismiss = React8.useCallback((ms) => {
+    clearTimer();
+    if (!isAutoDismissing) return;
+    startTimeRef.current = Date.now();
+    timerRef.current = setTimeout(() => onClose(n.id), ms);
+  }, [clearTimer, isAutoDismissing, n.id, onClose]);
+  React8.useEffect(() => {
+    if (paused || !isAutoDismissing) return;
+    scheduleDismiss(remainingRef.current);
+    return clearTimer;
+  }, [paused, isAutoDismissing, scheduleDismiss, clearTimer]);
+  const onPauseStart = () => {
+    if (!isAutoDismissing) return;
+    const elapsed = Date.now() - startTimeRef.current;
+    remainingRef.current = Math.max(0, remainingRef.current - elapsed);
+    setPaused(true);
+  };
+  const onPauseEnd = () => {
+    if (!isAutoDismissing) return;
+    setPaused(false);
+  };
   return /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
     {
+      layout: true,
       className: "pointer-events-auto",
-      initial,
+      initial: getInitialMotion(pos, reduced),
       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] }
-        }
-      },
+      exit: getExitMotion(pos, reduced),
       transition: reduced ? { duration: 0 } : {
-        // 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 finishes in 0.15 s; y/scale take 0.34 s.
+        // Card is opaque while still travelling — movement
+        // is clearly visible to the user.
         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] }
+        scale: { type: "tween", duration: 0.34, ease: [0.16, 1, 0.3, 1] },
+        layout: { duration: 0.22, ease: [0.16, 1, 0.3, 1] }
       },
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
+      onMouseEnter: onPauseStart,
+      onMouseLeave: onPauseEnd,
+      onFocus: onPauseStart,
+      onBlur: onPauseEnd,
+      role: n.type === "danger" || n.type === "warning" ? "alert" : "status",
+      "aria-live": n.type === "danger" || n.type === "warning" ? "assertive" : "polite",
       children: /* @__PURE__ */ jsxRuntime.jsxs(
-        Toast__namespace.Root,
+        "div",
         {
-          open: true,
-          duration,
-          onOpenChange: (o) => {
-            if (!o) onClose(n.id);
-          },
           className: [
-            "w-[300px] rounded-md shadow-lg overflow-hidden",
-            center ? "mx-auto" : "",
-            "focus:outline-none",
+            "w-[300px] rounded-md shadow-lg overflow-hidden focus:outline-none",
             TYPE_BG[n.type ?? "info"]
           ].join(" "),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-3 p-3 pr-2.5", children: [
               /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 flex-shrink-0 text-white/90", children: /* @__PURE__ */ jsxRuntime.jsx(TypeIcon, { type: n.type ?? "info" }) }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(Toast__namespace.Title, { className: "text-sm font-semibold text-white leading-snug", children: n.title }),
-                n.description && /* @__PURE__ */ jsxRuntime.jsx(Toast__namespace.Description, { className: "mt-0.5 text-xs text-white/75 leading-relaxed", children: n.description })
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold text-white leading-snug", children: n.title }),
+                n.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 text-xs text-white/75 leading-relaxed", children: n.description })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsx(Toast__namespace.Action, { asChild: true, altText: "Close", children: /* @__PURE__ */ jsxRuntime.jsx(
+              /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
-                  "aria-label": "Close",
+                  type: "button",
+                  "aria-label": "Close notification",
                   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__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 3L3 9M3 3l6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
                 }
-              ) })
+              )
             ] }),
             showProgress && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative h-[3px] bg-white/20 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
               "div",
@@ -920,7 +939,7 @@ function NotificationItem({
                 className: "absolute inset-0 bg-white/60 [transform-origin:left]",
                 style: {
                   animation: `notification-progress ${duration}ms linear forwards`,
-                  animationPlayState: hovered ? "paused" : "running"
+                  animationPlayState: paused ? "paused" : "running"
                 }
               }
             ) })
@@ -936,26 +955,27 @@ function NotificationProvider({
 }) {
   const [notifications, setNotifications] = React8.useState([]);
   const reduced = framerMotion.useReducedMotion();
-  const open = (payload) => {
+  const open = React8.useCallback((payload) => {
     setNotifications((prev) => [
       ...prev,
       { duration: 4e3, ...payload, id: Date.now() + Math.random() }
     ]);
-  };
-  const close = (id) => {
+  }, []);
+  const close = React8.useCallback((id) => {
     setNotifications((prev) => prev.filter((n) => n.id !== id));
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(NotificationContext.Provider, { value: { open, close }, children: /* @__PURE__ */ jsxRuntime.jsxs(Toast__namespace.Provider, { swipeDirection: position.endsWith("right") ? "right" : position.endsWith("left") ? "left" : "up", children: [
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(NotificationContext.Provider, { value: { open, close }, children: [
     children,
     /* @__PURE__ */ jsxRuntime.jsx(Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-      Toast__namespace.Viewport,
+      "ul",
       {
-        asChild: true,
+        role: "region",
+        "aria-label": "Notifications",
         className: [
           VIEWPORT_CLASSES[position],
-          "z-[500000] gap-2 w-[332px] outline-none pointer-events-none"
+          "z-[500000] gap-2 w-[316px] outline-none pointer-events-none m-0 p-0 list-none"
         ].join(" "),
-        children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: notifications.map((n) => /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: notifications.map((n) => /* @__PURE__ */ jsxRuntime.jsx(
           NotificationItem,
           {
             n,
@@ -964,10 +984,10 @@ function NotificationProvider({
             reduced
           },
           n.id
-        )) }) })
+        )) })
       }
     ) })
-  ] }) });
+  ] });
 }
 function useNotification() {
   const { open } = React8.useContext(NotificationContext);
@@ -1556,6 +1576,7 @@ function Wizard({
   const tooltipRef = React8.useRef(null);
   const tooltipTitleId = React8.useId();
   const tooltipBodyId = React8.useId();
+  const reduced = framerMotion.useReducedMotion();
   const [open, setOpen] = React8.useState(() => steps.length > 0 && !readDismissed(storageKey));
   const [activeIndex, setActiveIndex] = React8.useState(0);
   const step = steps[activeIndex];
@@ -1599,24 +1620,36 @@ function Wizard({
   const isLast = activeIndex === steps.length - 1;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     children,
-    open && step && /* @__PURE__ */ jsxRuntime.jsxs(Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: open && step && /* @__PURE__ */ jsxRuntime.jsxs(Portal, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+        framerMotion.motion.div,
         {
           className: "fixed inset-0 z-[7000000] bg-foreground/40 backdrop-blur-[1px] pointer-events-auto",
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          transition: { duration: reduced ? 0 : 0.18, ease: "easeOut" },
           "aria-hidden": "true"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
+        framerMotion.motion.div,
         {
-          className: "fixed z-[7000001] pointer-events-none rounded-md ring-2 ring-accent ring-offset-2 ring-offset-background transition-all duration-200",
+          className: "fixed z-[7000001] pointer-events-none rounded-md ring-2 ring-accent ring-offset-2 ring-offset-background",
           style: highlightStyle,
+          initial: { opacity: 0, scale: 1.08 },
+          animate: { opacity: 1, scale: 1 },
+          exit: { opacity: 0, scale: 1.08 },
+          transition: {
+            duration: reduced ? 0 : 0.32,
+            ease: [0.16, 1, 0.3, 1]
+            // ease-out-expo — settles softly
+          },
           "aria-hidden": "true"
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
+        framerMotion.motion.div,
         {
           ref: tooltipRef,
           role: "dialog",
@@ -1625,6 +1658,14 @@ function Wizard({
           "aria-describedby": tooltipBodyId,
           className: "fixed z-[7000002] rounded-lg bg-surface text-foreground border border-border shadow-xl p-4 pointer-events-auto",
           style: tooltipStyle,
+          initial: { opacity: 0, scale: 0.96, y: 6 },
+          animate: { opacity: 1, scale: 1, y: 0 },
+          exit: { opacity: 0, scale: 0.97, y: 4 },
+          transition: reduced ? { duration: 0 } : {
+            opacity: { duration: 0.18 },
+            scale: { type: "tween", duration: 0.26, ease: [0.16, 1, 0.3, 1] },
+            y: { type: "tween", duration: 0.26, ease: [0.16, 1, 0.3, 1] }
+          },
           children: [
             step.title && /* @__PURE__ */ jsxRuntime.jsx("h3", { id: tooltipTitleId, className: "text-sm font-semibold text-foreground mb-1", children: step.title }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { id: tooltipBodyId, className: "text-sm text-foreground-secondary leading-relaxed", children: step.description }),
@@ -1664,9 +1705,10 @@ function Wizard({
               ] })
             ] })
           ]
-        }
+        },
+        activeIndex
       )
-    ] })
+    ] }) })
   ] });
 }
 var SearchInput = React8__default.default.forwardRef(function SearchInput2({