@wow-two-beta/ui 0.0.63 → 0.0.64

package/dist/{chunk-WIXKLDTN.js → chunk-NEH4ITXL.js}

@@ -1,11 +1,11 @@
 import { Spinner } from './chunk-7ZDLUNAY.js';
-import { Backdrop } from './chunk-EQNTG53H.js';
+import { Backdrop } from './chunk-NW7ULTYL.js';
 import { useReducedMotion, useControlled } from './chunk-V267IMBH.js';
 import { Icon } from './chunk-MVMDDGW7.js';
 import { tv, surfaceVariants } from './chunk-DX7FYAKY.js';
-import { Portal, Announce } from './chunk-XLYJF3HC.js';
+import { Presence, Portal, Announce } from './chunk-XLYJF3HC.js';
 import { cn } from './chunk-X2MYOHOB.js';
-import { forwardRef, createContext, useState, Children, isValidElement, useEffect, useMemo, useRef, useContext, useId, useCallback } from 'react';
+import { forwardRef, useRef, useEffect, createContext, useState, Children, isValidElement, useMemo, useContext, useId, useCallback } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { X, Check, TrendingUp, TrendingDown, Minus, ChevronDown, Bell } from 'lucide-react';
 
@@ -628,6 +628,31 @@ var POSITION_CLASSES = {
   "bottom-left": "bottom-4 left-4 items-start",
   "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center"
 };
+var MOTION_CLASSES = {
+  "top-right": "motion-safe:data-[state=open]:animate-(--animate-slide-in-right) motion-safe:data-[state=closed]:animate-(--animate-slide-out-right) motion-reduce:animate-none",
+  "top-left": "motion-safe:data-[state=open]:animate-(--animate-slide-in-left) motion-safe:data-[state=closed]:animate-(--animate-slide-out-left) motion-reduce:animate-none",
+  "top-center": "motion-safe:data-[state=open]:animate-(--animate-slide-in-top) motion-safe:data-[state=closed]:animate-(--animate-slide-out-top) motion-reduce:animate-none",
+  "bottom-right": "motion-safe:data-[state=open]:animate-(--animate-slide-in-right) motion-safe:data-[state=closed]:animate-(--animate-slide-out-right) motion-reduce:animate-none",
+  "bottom-left": "motion-safe:data-[state=open]:animate-(--animate-slide-in-left) motion-safe:data-[state=closed]:animate-(--animate-slide-out-left) motion-reduce:animate-none",
+  "bottom-center": "motion-safe:data-[state=open]:animate-(--animate-slide-in-bottom) motion-safe:data-[state=closed]:animate-(--animate-slide-out-bottom) motion-reduce:animate-none"
+};
+var ToastItem = forwardRef(
+  ({ motionClass, onRemoved, className, children, ...props }, ref) => {
+    const onRemovedRef = useRef(onRemoved);
+    onRemovedRef.current = onRemoved;
+    useEffect(() => () => onRemovedRef.current?.(), []);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("pointer-events-auto w-80", motionClass, className),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ToastItem.displayName = "ToastItem";
 function Toaster({
   position = "bottom-right",
   max = 5,
@@ -648,11 +673,30 @@ function Toaster({
     ...t,
     resolvedDuration: t.duration ?? defaultDuration
   }));
+  const visibleIds = useMemo(() => new Set(visible.map((v) => v.id)), [visible]);
+  const [exiting, setExiting] = useState([]);
+  const prevVisibleRef = useRef([]);
+  useEffect(() => {
+    const gone = prevVisibleRef.current.filter((p) => !visibleIds.has(p.id));
+    prevVisibleRef.current = visible;
+    setExiting((cur) => {
+      const known = new Set(cur.map((e) => e.id));
+      const merged = [...cur, ...gone.filter((g) => !known.has(g.id))].filter(
+        (e) => !visibleIds.has(e.id)
+      );
+      return merged.length === cur.length && merged.every((e, i) => e.id === cur[i]?.id) ? cur : merged;
+    });
+  }, [visibleIds]);
+  const removeExiting = (id) => setExiting((cur) => cur.filter((e) => e.id !== id));
+  const rendered = [
+    ...visible.map((v) => ({ ...v, present: true })),
+    ...exiting.map((e) => ({ ...e, present: false }))
+  ];
   const latestTitle = typeof visible[visible.length - 1]?.title === "string" ? visible[visible.length - 1].title : visible[visible.length - 1]?.description && typeof visible[visible.length - 1].description === "string" ? visible[visible.length - 1].description : "";
   useEffect(() => {
-    const visibleIds = new Set(visible.map((v) => v.id));
+    const ids = new Set(visible.map((v) => v.id));
     for (const [id, h] of timersRef.current) {
-      if (!visibleIds.has(id)) {
+      if (!ids.has(id)) {
         window.clearTimeout(h);
         timersRef.current.delete(id);
         remainingRef.current.delete(id);
@@ -695,7 +739,7 @@ function Toaster({
     if (!canPauseOnHover || !paused) return;
     setPaused(false);
   };
-  if (visible.length === 0) {
+  if (rendered.length === 0) {
     return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Announce, { politeness: "polite" }) });
   }
   return /* @__PURE__ */ jsxs(Portal, { children: [
@@ -713,15 +757,22 @@ function Toaster({
           POSITION_CLASSES[position],
           className
         ),
-        children: visible.map((t) => /* @__PURE__ */ jsx("div", { className: "pointer-events-auto w-80 animate-in fade-in-0 slide-in-from-bottom-2", children: /* @__PURE__ */ jsx(
-          Toast,
+        children: rendered.map((t) => /* @__PURE__ */ jsx(Presence, { isPresent: t.present, children: /* @__PURE__ */ jsx(
+          ToastItem,
           {
-            icon: t.icon,
-            title: t.title,
-            description: t.description,
-            severity: t.severity,
-            actions: t.action,
-            onClose: () => toaster.dismiss(t.id)
+            motionClass: MOTION_CLASSES[position],
+            onRemoved: t.present ? void 0 : () => removeExiting(t.id),
+            children: /* @__PURE__ */ jsx(
+              Toast,
+              {
+                icon: t.icon,
+                title: t.title,
+                description: t.description,
+                severity: t.severity,
+                actions: t.action,
+                onClose: () => toaster.dismiss(t.id)
+              }
+            )
           }
         ) }, t.id))
       }
@@ -741,50 +792,65 @@ var LoadingOverlay = forwardRef(
     children,
     ...rest
   }, ref) {
-    if (!isOpen) return null;
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Spinner, { size: spinnerSize, tone: spinnerTone, label: typeof label === "string" ? label : "Loading" }),
+      label && /* @__PURE__ */ jsx("div", { className: "text-sm text-foreground", children: label }),
+      children
+    ] });
     if (isInline) {
-      return /* @__PURE__ */ jsxs(
-        "div",
+      return /* @__PURE__ */ jsx(Presence, { isPresent: isOpen, children: /* @__PURE__ */ jsx(
+        LoadingScrim,
         {
           ref,
-          role: "status",
           className: cn(
-            "absolute inset-0 z-banner flex flex-col items-center justify-center gap-3 bg-background/70",
+            "absolute inset-0 z-banner bg-background/70",
             hasBlur && "backdrop-blur-sm",
             className
           ),
           ...rest,
-          children: [
-            /* @__PURE__ */ jsx(Spinner, { size: spinnerSize, tone: spinnerTone, label: typeof label === "string" ? label : "Loading" }),
-            label && /* @__PURE__ */ jsx("div", { className: "text-sm text-foreground", children: label }),
-            children
-          ]
+          children: content
         }
-      );
+      ) });
     }
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(Backdrop, { open: true, isBlurred: hasBlur, className: "bg-background/70" }),
-      /* @__PURE__ */ jsxs(
-        "div",
+      /* @__PURE__ */ jsx(Backdrop, { open: isOpen, isBlurred: hasBlur, className: "bg-background/70" }),
+      /* @__PURE__ */ jsx(Presence, { isPresent: isOpen, children: /* @__PURE__ */ jsx(
+        LoadingScrim,
         {
           ref,
-          role: "status",
           className: cn(
-            "fixed inset-0 z-modal flex flex-col items-center justify-center gap-3 pointer-events-none",
+            "fixed inset-0 z-modal pointer-events-none",
             className
           ),
           ...rest,
-          children: [
-            /* @__PURE__ */ jsx(Spinner, { size: spinnerSize, tone: spinnerTone, label: typeof label === "string" ? label : "Loading" }),
-            label && /* @__PURE__ */ jsx("div", { className: "text-sm text-foreground", children: label }),
-            children
-          ]
+          children: content
         }
-      )
+      ) })
     ] });
   }
 );
 LoadingOverlay.displayName = "LoadingOverlay";
+var LoadingScrim = forwardRef(
+  function LoadingScrim2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "status",
+        className: cn(
+          "flex flex-col items-center justify-center gap-3",
+          "motion-safe:data-[state=open]:animate-(--animate-fade-in)",
+          "motion-safe:data-[state=closed]:animate-(--animate-fade-out)",
+          "motion-reduce:animate-none",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+LoadingScrim.displayName = "LoadingScrim";
 var POSITION = {
   "top-right": "top-4 right-4",
   "top-left": "top-4 left-4",
@@ -849,48 +915,72 @@ function UndoBar({
       remainingRef.current = Math.max(0, remainingRef.current - elapsed);
     };
   }, [isOpen, duration, paused, hasCountdown, onOpenChange]);
-  if (!isOpen) return null;
-  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "status",
-      "aria-live": "polite",
-      onMouseEnter: () => canPauseOnHover && setPaused(true),
-      onMouseLeave: () => canPauseOnHover && setPaused(false),
-      onFocus: () => canPauseOnHover && setPaused(true),
-      onBlur: () => canPauseOnHover && setPaused(false),
-      className: cn(
-        "fixed z-toast flex items-center gap-3 overflow-hidden text-sm animate-in fade-in-0 slide-in-from-bottom-2",
-        surfaceVariants({ variant: "surface", radius: "md", padding: "sm", elevation: 3 }),
-        "px-4 py-2.5",
-        POSITION[position],
-        className
-      ),
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "flex-1", children: message }),
-        onUndo && /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => {
-              onUndo();
-              onOpenChange?.(false);
-            },
-            className: "font-medium text-primary transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm px-1",
-            children: undoLabel
-          }
-        ),
-        hasCountdown && duration !== Infinity && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 h-0.5 w-full bg-border", children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "h-full bg-primary transition-[width] duration-100 ease-linear",
-            style: { width: `${progress * 100}%` }
-          }
-        ) })
-      ]
-    }
-  ) });
+  return (
+    /* Static positioning wrapper holds the fixed corner + (for `*-center`) the
+       centering `-translate-x-1/2`; the inner `UndoBarPanel` carries the slide
+       keyframe, whose own `translateY` would otherwise clobber that centering
+       translate if both sat on one node. `Portal` stays mounted; `Presence`
+       owns the panel's mount so the exit (slide-out + fade) plays before
+       unmount, cloning `ref` + `data-state` onto the panel for its motion. */
+    /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx("div", { className: cn("fixed z-toast", POSITION[position]), children: /* @__PURE__ */ jsx(Presence, { isPresent: isOpen, children: /* @__PURE__ */ jsxs(
+      UndoBarPanel,
+      {
+        onMouseEnter: () => canPauseOnHover && setPaused(true),
+        onMouseLeave: () => canPauseOnHover && setPaused(false),
+        onFocus: () => canPauseOnHover && setPaused(true),
+        onBlur: () => canPauseOnHover && setPaused(false),
+        className,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: message }),
+          onUndo && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => {
+                onUndo();
+                onOpenChange?.(false);
+              },
+              className: "font-medium text-primary transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm px-1",
+              children: undoLabel
+            }
+          ),
+          hasCountdown && duration !== Infinity && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 h-0.5 w-full bg-border", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full bg-primary transition-[width] duration-100 ease-linear",
+              style: { width: `${progress * 100}%` }
+            }
+          ) })
+        ]
+      }
+    ) }) }) })
+  );
 }
+var UndoBarPanel = forwardRef(
+  function UndoBarPanel2({ className, children, ...props }, ref) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-live": "polite",
+        className: cn(
+          "relative flex items-center gap-3 overflow-hidden text-sm",
+          surfaceVariants({ variant: "surface", radius: "md", padding: "sm", elevation: 3 }),
+          "px-4 py-2.5",
+          /* slide-in-bottom/out-bottom carry their own fade; gated on data-state +
+             motion-safe so reduced-motion users get no movement. */
+          "motion-safe:data-[state=open]:animate-(--animate-slide-in-bottom)",
+          "motion-safe:data-[state=closed]:animate-(--animate-slide-out-bottom)",
+          "motion-reduce:animate-none",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
 var OnboardingContext = createContext(null);
 var OnboardingChecklist = forwardRef(
   function OnboardingChecklist2({
@@ -1064,7 +1154,18 @@ function Tour({
   const titleId = useId();
   const descId = useId();
   const maskId = useId();
+  const reducedMotion = useReducedMotion();
   const step = steps[currentStep];
+  const [mounted, setMounted] = useState(open);
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      return;
+    }
+    if (!reducedMotion) return;
+    const raf = requestAnimationFrame(() => setMounted(false));
+    return () => cancelAnimationFrame(raf);
+  }, [open, reducedMotion]);
   useEffect(() => {
     if (!open || !step) return;
     const update = () => {
@@ -1107,12 +1208,12 @@ function Tour({
     setOpen(false);
     onSkip?.();
   }, [setOpen, onSkip]);
-  if (!open || !step) return null;
+  if (!mounted || !step) return null;
   const placement = step.placement ?? "bottom";
   const tooltipCoords = rect ? placementCoords(rect, placement) : null;
   const cutoutPadding = padding;
   return /* @__PURE__ */ jsxs(Portal, { children: [
-    rect && /* @__PURE__ */ jsxs(
+    open && rect && /* @__PURE__ */ jsxs(
       "svg",
       {
         "aria-hidden": "true",
@@ -1145,8 +1246,8 @@ function Tour({
         ]
       }
     ),
-    tooltipCoords && /* @__PURE__ */ jsxs(
-      "div",
+    tooltipCoords && /* @__PURE__ */ jsx(Presence, { isPresent: open, children: /* @__PURE__ */ jsxs(
+      TourTooltip,
       {
         role: "dialog",
         "aria-modal": "false",
@@ -1158,9 +1259,9 @@ function Tour({
           left: tooltipCoords.left,
           transform: tooltipCoords.transform
         },
-        className: cn(
-          "z-popover w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-none animate-in fade-in-0 zoom-in-95"
-        ),
+        onAnimationEnd: () => {
+          if (!open) setMounted(false);
+        },
         children: [
           step.title && /* @__PURE__ */ jsx("div", { id: titleId, className: "text-sm font-semibold", children: step.title }),
           step.body && /* @__PURE__ */ jsx("div", { id: descId, className: cn("text-sm text-muted-foreground", step.title && "mt-1.5"), children: step.body }),
@@ -1202,10 +1303,27 @@ function Tour({
           ] })
         ]
       }
-    ),
+    ) }),
     /* @__PURE__ */ jsx(Announce, { politeness: "polite", children: step.title ? `Step ${currentStep + 1} of ${steps.length}: ${typeof step.title === "string" ? step.title : ""}` : "" })
   ] });
 }
+var TourTooltip = forwardRef(function TourTooltip2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "z-popover w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-lg outline-none",
+        "motion-safe:data-[state=open]:animate-(--animate-pop-in)",
+        "motion-safe:data-[state=closed]:animate-(--animate-pop-out)",
+        "motion-reduce:animate-none",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+});
 var SIZE2 = {
   sm: "h-1 w-1",
   md: "h-1.5 w-1.5",
@@ -1507,5 +1625,5 @@ var NotificationCenter = NotificationCenterInner;
 NotificationCenter.Item = NotificationItem;
 
 export { Alert, AlertSimple, Banner, BannerSimple, Callout, InlineSpinner, LiveCursor, LoadingOverlay, LoadingState, MeterBar, NotificationCenter, NotificationItem, OnboardingChecklist, OnboardingChecklistTask, PresenceIndicator, ProgressBar, ProgressCircle, ProgressSteps, Skeleton, StatusIndicator, Toast, ToastSimple, Toaster, Tour, TrendIndicator, TypingIndicator, UndoBar, alertSimpleVariants, bannerSimpleVariants, progressFillVariants, progressTrackVariants, skeletonVariants, toastSimpleVariants, toaster, useOnboardingChecklist, useToaster };
-//# sourceMappingURL=chunk-WIXKLDTN.js.map
-//# sourceMappingURL=chunk-WIXKLDTN.js.map
+//# sourceMappingURL=chunk-NEH4ITXL.js.map
+//# sourceMappingURL=chunk-NEH4ITXL.js.map