@geomak/ui 5.0.1 → 5.0.2

package/dist/index.d.cts

@@ -560,26 +560,38 @@ type NotificationPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-ri
 interface NotificationPayload {
     title: React$1.ReactNode;
     description?: React$1.ReactNode;
-    /** Auto-dismiss duration in ms (default 4000) */
+    /** Auto-dismiss duration in ms (default 4000). Pass `Infinity` to disable auto-dismiss. */
     duration?: number;
     type?: NotificationType;
 }
 /** ─────────────────── provider ─────────────────── */
 /**
- * Wrap your app in `NotificationProvider`, then call `useNotification()` anywhere inside.
+ * Wrap your app in `NotificationProvider`, then call `useNotification()`
+ * anywhere inside to show toast notifications.
  *
- * @param position  One of 6 viewport positions (default: `top-right`)
+ * @param position One of 6 viewport positions (default `'top-right'`).
  *
  * @example
  * <NotificationProvider position="bottom-right">
  *   <App />
  * </NotificationProvider>
+ *
+ * // anywhere inside:
+ * const { success, danger } = useNotification()
+ * success({ title: 'Saved', description: 'Changes were stored.' })
  */
 declare function NotificationProvider({ children, position, }: {
     children: React$1.ReactNode;
     position?: NotificationPosition;
 }): react_jsx_runtime.JSX.Element;
 /** ─────────────────── hook ─────────────────── */
+/**
+ * Returns four type-specific show functions.
+ *
+ * @example
+ * const { info, success, warning, danger } = useNotification()
+ * danger({ title: 'Save failed', description: 'Could not reach the server.' })
+ */
 declare function useNotification(): {
     info: (props: Omit<NotificationPayload, "type">) => void;
     success: (props: Omit<NotificationPayload, "type">) => void;

package/dist/index.d.ts

@@ -560,26 +560,38 @@ type NotificationPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-ri
 interface NotificationPayload {
     title: React$1.ReactNode;
     description?: React$1.ReactNode;
-    /** Auto-dismiss duration in ms (default 4000) */
+    /** Auto-dismiss duration in ms (default 4000). Pass `Infinity` to disable auto-dismiss. */
     duration?: number;
     type?: NotificationType;
 }
 /** ─────────────────── provider ─────────────────── */
 /**
- * Wrap your app in `NotificationProvider`, then call `useNotification()` anywhere inside.
+ * Wrap your app in `NotificationProvider`, then call `useNotification()`
+ * anywhere inside to show toast notifications.
  *
- * @param position  One of 6 viewport positions (default: `top-right`)
+ * @param position One of 6 viewport positions (default `'top-right'`).
  *
  * @example
  * <NotificationProvider position="bottom-right">
  *   <App />
  * </NotificationProvider>
+ *
+ * // anywhere inside:
+ * const { success, danger } = useNotification()
+ * success({ title: 'Saved', description: 'Changes were stored.' })
  */
 declare function NotificationProvider({ children, position, }: {
     children: React$1.ReactNode;
     position?: NotificationPosition;
 }): react_jsx_runtime.JSX.Element;
 /** ─────────────────── hook ─────────────────── */
+/**
+ * Returns four type-specific show functions.
+ *
+ * @example
+ * const { info, success, warning, danger } = useNotification()
+ * danger({ title: 'Save failed', description: 'Could not reach the server.' })
+ */
 declare function useNotification(): {
     info: (props: Omit<NotificationPayload, "type">) => void;
     success: (props: Omit<NotificationPayload, "type">) => void;

package/dist/index.js

@@ -1,7 +1,7 @@
 import { colors_default } from './chunk-GKXP6OJJ.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-GKXP6OJJ.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React8, { createContext, useState, useEffect, useMemo, useContext, useRef, useId, useCallback, useLayoutEffect } from 'react';
+import React8, { createContext, useState, useEffect, useMemo, useCallback, useContext, useRef, useId, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import * as Dialog from '@radix-ui/react-dialog';
 import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
@@ -9,7 +9,6 @@ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as Accordion from '@radix-ui/react-accordion';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
-import * as Toast from '@radix-ui/react-toast';
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
 import * as Popover from '@radix-ui/react-popover';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
@@ -783,12 +782,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") {
@@ -820,66 +819,87 @@ function NotificationItem({
   onClose,
   reduced
 }) {
-  const [hovered, setHovered] = useState(false);
-  const initial = getInitialMotion(pos, reduced);
-  const center = pos.endsWith("center");
+  const [paused, setPaused] = 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 = useRef(null);
+  const startTimeRef = useRef(0);
+  const remainingRef = useRef(duration);
+  const clearTimer = useCallback(() => {
+    if (timerRef.current !== null) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+  }, []);
+  const scheduleDismiss = useCallback((ms) => {
+    clearTimer();
+    if (!isAutoDismissing) return;
+    startTimeRef.current = Date.now();
+    timerRef.current = setTimeout(() => onClose(n.id), ms);
+  }, [clearTimer, isAutoDismissing, n.id, onClose]);
+  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__ */ jsx(
     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__ */ jsxs(
-        Toast.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__ */ 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("div", { className: "text-sm font-semibold text-white leading-snug", children: n.title }),
+                n.description && /* @__PURE__ */ jsx("div", { 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(
+              /* @__PURE__ */ 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__ */ 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" }) })
                 }
-              ) })
+              )
             ] }),
             showProgress && /* @__PURE__ */ jsx("div", { className: "relative h-[3px] bg-white/20 overflow-hidden", children: /* @__PURE__ */ jsx(
               "div",
@@ -887,7 +907,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"
                 }
               }
             ) })
@@ -903,26 +923,27 @@ function NotificationProvider({
 }) {
   const [notifications, setNotifications] = useState([]);
   const reduced = useReducedMotion();
-  const open = (payload) => {
+  const open = useCallback((payload) => {
     setNotifications((prev) => [
       ...prev,
       { duration: 4e3, ...payload, id: Date.now() + Math.random() }
     ]);
-  };
-  const close = (id) => {
+  }, []);
+  const close = useCallback((id) => {
     setNotifications((prev) => prev.filter((n) => n.id !== id));
-  };
-  return /* @__PURE__ */ jsx(NotificationContext.Provider, { value: { open, close }, children: /* @__PURE__ */ jsxs(Toast.Provider, { swipeDirection: position.endsWith("right") ? "right" : position.endsWith("left") ? "left" : "up", children: [
+  }, []);
+  return /* @__PURE__ */ jsxs(NotificationContext.Provider, { value: { open, close }, children: [
     children,
     /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
-      Toast.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__ */ jsx("ul", { children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: notifications.map((n) => /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: notifications.map((n) => /* @__PURE__ */ jsx(
           NotificationItem,
           {
             n,
@@ -931,10 +952,10 @@ function NotificationProvider({
             reduced
           },
           n.id
-        )) }) })
+        )) })
       }
     ) })
-  ] }) });
+  ] });
 }
 function useNotification() {
   const { open } = useContext(NotificationContext);
@@ -1523,6 +1544,7 @@ function Wizard({
   const tooltipRef = useRef(null);
   const tooltipTitleId = useId();
   const tooltipBodyId = useId();
+  const reduced = useReducedMotion();
   const [open, setOpen] = useState(() => steps.length > 0 && !readDismissed(storageKey));
   const [activeIndex, setActiveIndex] = useState(0);
   const step = steps[activeIndex];
@@ -1566,24 +1588,36 @@ function Wizard({
   const isLast = activeIndex === steps.length - 1;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     children,
-    open && step && /* @__PURE__ */ jsxs(Portal, { children: [
+    /* @__PURE__ */ jsx(AnimatePresence, { children: open && step && /* @__PURE__ */ jsxs(Portal, { children: [
       /* @__PURE__ */ jsx(
-        "div",
+        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__ */ jsx(
-        "div",
+        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__ */ jsxs(
-        "div",
+        motion.div,
         {
           ref: tooltipRef,
           role: "dialog",
@@ -1592,6 +1626,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__ */ jsx("h3", { id: tooltipTitleId, className: "text-sm font-semibold text-foreground mb-1", children: step.title }),
             /* @__PURE__ */ jsx("div", { id: tooltipBodyId, className: "text-sm text-foreground-secondary leading-relaxed", children: step.description }),
@@ -1631,9 +1673,10 @@ function Wizard({
               ] })
             ] })
           ]
-        }
+        },
+        activeIndex
       )
-    ] })
+    ] }) })
   ] });
 }
 var SearchInput = React8.forwardRef(function SearchInput2({