goey-toast 0.2.1 → 0.2.2

package/dist/index.cjs

@@ -2,21 +2,43 @@
 
 var react = require('react');
 var sonner = require('sonner');
-var jsxRuntime = require('react/jsx-runtime');
 var framerMotion = require('framer-motion');
+var jsxRuntime = require('react/jsx-runtime');
 
 // src/components/GoeyToaster.tsx
 
+// src/presets.ts
+var animationPresets = {
+  smooth: { bounce: 0.1, spring: true },
+  bouncy: { bounce: 0.6, spring: true },
+  subtle: { bounce: 0.05, spring: true },
+  snappy: { bounce: 0.4, spring: true }
+};
+
 // src/context.ts
 var _position = "bottom-right";
+var _dir = "ltr";
 var _spring = true;
 var _bounce = void 0;
+var _theme = "light";
+function setGoeyTheme(theme) {
+  _theme = theme;
+}
+function getGoeyTheme() {
+  return _theme;
+}
 function setGoeyPosition(position) {
   _position = position;
 }
 function getGoeyPosition() {
   return _position;
 }
+function setGoeyDir(dir) {
+  _dir = dir;
+}
+function getGoeyDir() {
+  return _dir;
+}
 function setGoeySpring(spring) {
   _spring = spring;
 }
@@ -36,6 +58,34 @@ function setGoeyVisibleToasts(n) {
 function getGoeyVisibleToasts() {
   return _visibleToasts;
 }
+var _swipeToDismiss = true;
+function setGoeySwipeToDismiss(enabled) {
+  _swipeToDismiss = enabled;
+}
+function getGoeySwipeToDismiss() {
+  return _swipeToDismiss;
+}
+var _maxQueue = Infinity;
+function setGoeyMaxQueue(n) {
+  _maxQueue = n;
+}
+function getGoeyMaxQueue() {
+  return _maxQueue;
+}
+var _queueOverflow = "drop-oldest";
+function setGoeyQueueOverflow(strategy) {
+  _queueOverflow = strategy;
+}
+function getGoeyQueueOverflow() {
+  return _queueOverflow;
+}
+var _showProgress = false;
+function setGoeyShowProgress(show) {
+  _showProgress = show;
+}
+function getGoeyShowProgress() {
+  return _showProgress;
+}
 var _containerHovered = false;
 var _hoverSubs = /* @__PURE__ */ new Set();
 function setContainerHovered(hovered) {
@@ -52,101 +102,15 @@ function subscribeContainerHovered(cb) {
     _hoverSubs.delete(cb);
   };
 }
-function GoeyToaster({
-  position = "bottom-right",
-  duration,
-  gap = 14,
-  offset = "24px",
-  theme = "light",
-  toastOptions,
-  expand,
-  closeButton,
-  richColors,
-  visibleToasts,
-  dir,
-  spring = true,
-  bounce
-}) {
-  react.useEffect(() => {
-    setGoeyPosition(position);
-  }, [position]);
-  react.useEffect(() => {
-    setGoeySpring(spring);
-  }, [spring]);
-  react.useEffect(() => {
-    setGoeyBounce(bounce);
-  }, [bounce]);
-  react.useEffect(() => {
-    setGoeyVisibleToasts(visibleToasts ?? 3);
-  }, [visibleToasts]);
-  react.useEffect(() => {
-    let expandObs = null;
-    let currentOl = null;
-    const syncFromExpanded = (ol) => {
-      const anyExpanded = ol.querySelector('[data-sonner-toast][data-expanded="true"]') !== null;
-      setContainerHovered(anyExpanded);
-    };
-    const attach = (ol) => {
-      if (ol === currentOl) return;
-      expandObs?.disconnect();
-      currentOl = ol;
-      expandObs = new MutationObserver(() => syncFromExpanded(ol));
-      expandObs.observe(ol, { attributes: true, attributeFilter: ["data-expanded"], subtree: true });
-      syncFromExpanded(ol);
-    };
-    const el = document.querySelector("[data-sonner-toaster]");
-    if (el) attach(el);
-    const bodyObs = new MutationObserver(() => {
-      const found = document.querySelector("[data-sonner-toaster]");
-      if (found) {
-        attach(found);
-      } else if (currentOl) {
-        expandObs?.disconnect();
-        currentOl = null;
-        setContainerHovered(false);
-      }
-    });
-    bodyObs.observe(document.body, { childList: true, subtree: true });
-    return () => {
-      bodyObs.disconnect();
-      expandObs?.disconnect();
-      setContainerHovered(false);
-    };
-  }, []);
-  react.useEffect(() => {
-    if (process.env.NODE_ENV !== "development") return;
-    const el = document.createElement("div");
-    el.setAttribute("data-goey-toast-css", "");
-    el.style.position = "absolute";
-    el.style.width = "0";
-    el.style.height = "0";
-    el.style.overflow = "hidden";
-    el.style.pointerEvents = "none";
-    document.body.appendChild(el);
-    const value = getComputedStyle(el).getPropertyValue("--goey-toast");
-    document.body.removeChild(el);
-    if (!value) {
-      console.warn(
-        '[goey-toast] Styles not found. Make sure to import the CSS:\n\n  import "goey-toast/styles.css";\n'
-      );
-    }
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    sonner.Toaster,
-    {
-      position,
-      duration,
-      gap,
-      offset,
-      theme,
-      toastOptions: { unstyled: true, ...toastOptions },
-      expand,
-      closeButton,
-      richColors,
-      visibleToasts: 99,
-      dir
-    }
-  );
+var _announceSubs = /* @__PURE__ */ new Set();
+function announce(message, politeness = "polite") {
+  _announceSubs.forEach((cb) => cb({ message, politeness }));
+}
+function subscribeAnnouncements(cb) {
+  _announceSubs.add(cb);
+  return () => {
+    _announceSubs.delete(cb);
+  };
 }
 var DefaultIcon = ({ size = 20, className }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
@@ -309,8 +273,18 @@ var styles = {
   actionSuccess: "goey-actionSuccess",
   actionError: "goey-actionError",
   actionWarning: "goey-actionWarning",
-  actionInfo: "goey-actionInfo"
+  actionInfo: "goey-actionInfo",
+  progressWrapper: "goey-progressWrapper",
+  progressBar: "goey-progressBar",
+  progressDefault: "goey-progressDefault",
+  progressSuccess: "goey-progressSuccess",
+  progressError: "goey-progressError",
+  progressWarning: "goey-progressWarning",
+  progressInfo: "goey-progressInfo",
+  progressPaused: "goey-progressPaused",
+  timestamp: "goey-timestamp"
 };
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 var phaseIconMap = {
   default: DefaultIcon,
   success: SuccessIcon,
@@ -334,6 +308,14 @@ var actionColorMap = {
   warning: styles.actionWarning,
   info: styles.actionInfo
 };
+var progressColorMap = {
+  loading: styles.progressInfo,
+  default: styles.progressDefault,
+  success: styles.progressSuccess,
+  error: styles.progressError,
+  warning: styles.progressWarning,
+  info: styles.progressInfo
+};
 var PH = 34;
 var DEFAULT_DISPLAY_DURATION = 4e3;
 var DEFAULT_EXPAND_DUR = 0.6;
@@ -425,7 +407,19 @@ function syncSonnerHeights(wrapperEl, includeOffsets = false) {
     for (const t of toasts) t.style.removeProperty("transition");
   }
 }
-function morphPath(pw, bw, th, t) {
+function memoizePath(fn) {
+  let lastArgs = null;
+  let lastResult = "";
+  return (pw, bw, th, t) => {
+    if (lastArgs && lastArgs[0] === pw && lastArgs[1] === bw && lastArgs[2] === th && lastArgs[3] === t) {
+      return lastResult;
+    }
+    lastResult = fn(pw, bw, th, t);
+    lastArgs = [pw, bw, th, t];
+    return lastResult;
+  };
+}
+function morphPathRaw(pw, bw, th, t) {
   const pr = PH / 2;
   const pillW = Math.min(pw, bw);
   const bodyH = PH + (th - PH) * t;
@@ -462,7 +456,7 @@ function morphPath(pw, bw, th, t) {
     `Z`
   ].join(" ");
 }
-function morphPathCenter(pw, bw, th, t) {
+function morphPathCenterRaw(pw, bw, th, t) {
   const pr = PH / 2;
   const pillW = Math.min(pw, bw);
   const pillOffset = (bw - pillW) / 2;
@@ -525,6 +519,8 @@ function morphPathCenter(pw, bw, th, t) {
     `Z`
   ].join(" ");
 }
+var morphPath = memoizePath(morphPathRaw);
+var morphPathCenter = memoizePath(morphPathCenterRaw);
 var SMOOTH_EASE = [0.4, 0, 0.2, 1];
 var GoeyToast = ({
   title,
@@ -533,22 +529,31 @@ var GoeyToast = ({
   icon,
   phase,
   classNames,
-  fillColor = "#ffffff",
+  fillColor: fillColorProp,
   borderColor,
   borderWidth,
   timing,
+  preset,
   spring: springProp,
   bounce: bounceProp,
+  showProgress: showProgressProp,
   toastId
 }) => {
+  const theme = getGoeyTheme();
+  const fillColor = fillColorProp ?? (theme === "dark" ? "#1a1a1a" : "#ffffff");
   const position = getGoeyPosition();
-  const isRight = position?.includes("right") ?? false;
+  const dir = getGoeyDir();
+  const posIsRight = position?.includes("right") ?? false;
   const isCenter = position?.includes("center") ?? false;
+  const isRight = dir === "rtl" ? isCenter ? false : !posIsRight : posIsRight;
   const prefersReducedMotion = usePrefersReducedMotion();
-  const useSpring = springProp ?? getGoeySpring();
-  const bounceVal = bounceProp ?? getGoeyBounce() ?? 0.4;
+  const presetConfig = preset ? animationPresets[preset] : void 0;
+  const useSpring = springProp ?? presetConfig?.spring ?? getGoeySpring();
+  const bounceVal = bounceProp ?? presetConfig?.bounce ?? getGoeyBounce() ?? 0.4;
+  const showProgress = showProgressProp ?? getGoeyShowProgress();
   const [actionSuccess, setActionSuccess] = react.useState(null);
   const [dismissing, setDismissing] = react.useState(false);
+  const [progressKey, setProgressKey] = react.useState(0);
   const [hovered, setHovered] = react.useState(false);
   const hoveredRef = react.useRef(false);
   const containerHoveredRef = react.useRef(getContainerHovered());
@@ -592,8 +597,10 @@ var GoeyToast = ({
     if (p <= 0 || b <= 0 || h <= 0) return;
     const t = Math.max(0, Math.min(1, morphTRef.current));
     const pos = getGoeyPosition();
-    const rightSide = pos?.includes("right") ?? false;
+    const d = getGoeyDir();
     const centerPos = pos?.includes("center") ?? false;
+    const posRight = pos?.includes("right") ?? false;
+    const rightSide = d === "rtl" ? centerPos ? false : !posRight : posRight;
     if (centerPos) {
       const centerBw = Math.max(dimsRef.current.bw, expandedDimsRef.current.bw, p);
       pathRef.current?.setAttribute("d", morphPathCenter(p, centerBw, h, t));
@@ -680,7 +687,7 @@ var GoeyToast = ({
     dimsRef.current = { pw: pw2, bw: bw2, th: th2 };
     setDims({ pw: pw2, bw: bw2, th: th2 });
   }, []);
-  react.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     measure();
     const t = setTimeout(measure, 100);
     return () => clearTimeout(t);
@@ -707,8 +714,8 @@ var GoeyToast = ({
     const el = wrapperRef.current;
     const springConfig = phase2 === "collapse" ? squishSpring(collapseDur, DEFAULT_COLLAPSE_DUR, bounceVal) : squishSpring(expandDur, DEFAULT_EXPAND_DUR, bounceVal);
     const bScale = bounceVal / 0.4;
-    const compressY = (phase2 === "collapse" ? 0.07 : 0.12) * bScale;
-    const expandX = (phase2 === "collapse" ? 0.035 : 0.06) * bScale;
+    const compressY = (phase2 === "collapse" ? 0.035 : 0.12) * bScale;
+    const expandX = (phase2 === "collapse" ? 0.018 : 0.06) * bScale;
     blobSquishCtrl.current = framerMotion.animate(0, 1, {
       ...springConfig,
       onUpdate: (v) => {
@@ -726,7 +733,7 @@ var GoeyToast = ({
       }
     });
   }, [prefersReducedMotion, expandDur, collapseDur, useSpring, bounceVal]);
-  react.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!hasDims || collapsingRef.current) return;
     const prev = { ...aDims.current };
     const target = { pw, bw, th };
@@ -778,7 +785,7 @@ var GoeyToast = ({
     }
   }, [hasDims, squishDelayMs, triggerLandingSquish]);
   const prevShowBody = react.useRef(false);
-  react.useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!prevShowBody.current && showBody && !hoveredRef.current) {
       const t = setTimeout(() => triggerLandingSquish("expand"), 80);
       return () => clearTimeout(t);
@@ -870,12 +877,14 @@ var GoeyToast = ({
   }, [isExpanded, flush, prefersReducedMotion, useSpring, triggerLandingSquish]);
   const remainingRef = react.useRef(null);
   const timerStartRef = react.useRef(0);
+  const progressDelayRef = react.useRef(0);
   react.useEffect(() => {
     if (!showBody || actionSuccess || dismissing) return;
     const expandDelayMs = prefersReducedMotion ? 0 : 330;
     const collapseMs = prefersReducedMotion ? 10 : 0.9 * 1e3;
     const displayMs = timing?.displayDuration ?? DEFAULT_DISPLAY_DURATION;
     const fullDelay = displayMs - expandDelayMs - collapseMs;
+    progressDelayRef.current = Math.max(fullDelay, 0);
     if (fullDelay <= 0) return;
     if (hoveredRef.current || containerHoveredRef.current) return;
     const delay = remainingRef.current ?? fullDelay;
@@ -913,6 +922,7 @@ var GoeyToast = ({
     reExpandingRef.current = true;
     setDismissing(false);
     setShowBody(true);
+    if (showProgress) setProgressKey((k) => k + 1);
     const currentT = morphTRef.current;
     const startDims = { ...aDims.current };
     const morphExpandTransition = useSpring ? { type: "spring", duration: 0.9, bounce: bounceVal } : { duration: 0.6, ease: SMOOTH_EASE };
@@ -1079,13 +1089,56 @@ var GoeyToast = ({
     } catch {
     }
   }, [effectiveAction]);
+  const SWIPE_THRESHOLD = 100;
+  const swipeStartRef = react.useRef(null);
+  const [swipeOffsetX, setSwipeOffsetX] = react.useState(0);
+  const isSwipingRef = react.useRef(false);
+  const handleTouchStart = react.useCallback((e) => {
+    if (!getGoeySwipeToDismiss()) return;
+    const touch = e.touches[0];
+    swipeStartRef.current = { x: touch.clientX, y: touch.clientY };
+    isSwipingRef.current = false;
+  }, []);
+  const handleTouchMove = react.useCallback((e) => {
+    if (!swipeStartRef.current || !getGoeySwipeToDismiss()) return;
+    const touch = e.touches[0];
+    const dx = touch.clientX - swipeStartRef.current.x;
+    const dy = touch.clientY - swipeStartRef.current.y;
+    if (!isSwipingRef.current && Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > 10) {
+      swipeStartRef.current = null;
+      return;
+    }
+    if (!isSwipingRef.current && Math.abs(dx) > 10) {
+      isSwipingRef.current = true;
+    }
+    if (isSwipingRef.current) {
+      setSwipeOffsetX(dx);
+    }
+  }, []);
+  const handleTouchEnd = react.useCallback(() => {
+    if (!getGoeySwipeToDismiss()) {
+      swipeStartRef.current = null;
+      return;
+    }
+    if (isSwipingRef.current && Math.abs(swipeOffsetX) >= SWIPE_THRESHOLD && toastId) {
+      sonner.toast.dismiss(toastId);
+    }
+    swipeStartRef.current = null;
+    isSwipingRef.current = false;
+    setSwipeOffsetX(0);
+  }, [swipeOffsetX, toastId]);
+  const swipeOpacity = swipeOffsetX !== 0 ? Math.max(0, 1 - Math.abs(swipeOffsetX) / (SWIPE_THRESHOLD * 1.5)) : 1;
+  const swipeTranslate = swipeOffsetX !== 0 ? `translateX(${swipeOffsetX}px)` : "";
   const renderIcon = () => {
     if (!actionSuccess && icon) return icon;
     if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { size: 18, className: styles.spinnerSpin });
     const IconComponent = phaseIconMap[effectivePhase];
     return /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 18 });
   };
-  const iconTransition = prefersReducedMotion ? { duration: 0.01 } : { duration: 0.2 };
+  const iconTransition = react.useMemo(
+    () => prefersReducedMotion ? { duration: 0.01 } : { duration: 0.2 },
+    [prefersReducedMotion]
+  );
   const iconEl = /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles.iconWrapper}${classNames?.icon ? ` ${classNames.icon}` : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
     framerMotion.motion.div,
     {
@@ -1098,17 +1151,43 @@ var GoeyToast = ({
     isLoading ? "spinner" : effectivePhase
   ) }) });
   const titleEl = /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles.title}${classNames?.title ? ` ${classNames.title}` : ""}`, children: effectiveTitle });
+  const createdAtRef = react.useRef(/* @__PURE__ */ new Date());
+  const timestampStr = react.useMemo(
+    () => createdAtRef.current.toLocaleTimeString(void 0, { hour: "numeric", minute: "2-digit", second: "2-digit" }),
+    []
+  );
   const iconAndTitle = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     iconEl,
     titleEl
   ] });
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: `${styles.wrapper}${classNames?.wrapper ? ` ${classNames.wrapper}` : ""}`, style: isCenter ? { margin: "0 auto" } : isRight ? { marginLeft: "auto", transform: "scaleX(-1)" } : void 0, role: effectivePhase === "error" ? "alert" : "status", "aria-live": effectivePhase === "error" ? "assertive" : "polite", "aria-atomic": "true", onMouseEnter: () => {
+  const basePositionStyle = react.useMemo(
+    () => isCenter ? { margin: "0 auto" } : isRight ? { marginLeft: "auto", transform: "scaleX(-1)" } : {},
+    [isCenter, isRight]
+  );
+  const wrapperStyle = react.useMemo(() => {
+    if (swipeTranslate) {
+      return {
+        ...basePositionStyle,
+        transform: (basePositionStyle.transform ? basePositionStyle.transform + " " : "") + swipeTranslate,
+        opacity: swipeOpacity,
+        transition: "none"
+      };
+    }
+    return Object.keys(basePositionStyle).length > 0 ? basePositionStyle : void 0;
+  }, [basePositionStyle, swipeTranslate, swipeOpacity]);
+  const contentStyle = react.useMemo(
+    () => isCenter ? { textAlign: "center" } : isRight ? { transform: "scaleX(-1)", textAlign: "right" } : { textAlign: "left" },
+    [isCenter, isRight]
+  );
+  const handleMouseEnter = react.useCallback(() => {
     hoveredRef.current = true;
     setHovered(true);
-  }, onMouseLeave: () => {
+  }, []);
+  const handleMouseLeave = react.useCallback(() => {
     hoveredRef.current = false;
     setHovered(false);
-  }, "data-center": isCenter || void 0, children: [
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: `${styles.wrapper}${classNames?.wrapper ? ` ${classNames.wrapper}` : ""}`, style: wrapperStyle, role: effectivePhase === "error" || effectivePhase === "warning" ? "alert" : "status", "aria-live": effectivePhase === "error" || effectivePhase === "warning" ? "assertive" : "polite", "aria-atomic": "true", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, "data-center": isCenter || void 0, "data-theme": theme, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
       {
@@ -1130,10 +1209,13 @@ var GoeyToast = ({
       {
         ref: contentRef,
         className: `${styles.content} ${showBody ? styles.contentExpanded : styles.contentCompact}${classNames?.content ? ` ${classNames.content}` : ""}`,
-        style: isCenter ? { textAlign: "center" } : isRight ? { transform: "scaleX(-1)", textAlign: "right" } : { textAlign: "left" },
+        style: contentStyle,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: headerRef, className: `${styles.header} ${titleColorMap[effectivePhase]}${classNames?.header ? ` ${classNames.header}` : ""}`, children: iconAndTitle }),
-          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showBody && hasDescription && !dismissing && /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: headerRef, className: `${styles.header} ${titleColorMap[effectivePhase]}${classNames?.header ? ` ${classNames.header}` : ""}`, children: [
+            iconAndTitle,
+            !hasDescription && !hasAction && !actionSuccess && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.timestamp, children: timestampStr })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showBody && hasDescription && !dismissing && /* @__PURE__ */ jsxRuntime.jsxs(
             framerMotion.motion.div,
             {
               className: `${styles.description}${classNames?.description ? ` ${classNames.description}` : ""}`,
@@ -1142,10 +1224,26 @@ var GoeyToast = ({
               animate: { opacity: 1 },
               exit: { opacity: 0 },
               transition: prefersReducedMotion ? { duration: 0.01 } : { duration: 0.35, ease: [0.4, 0, 0.2, 1] },
-              children: effectiveDescription
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.timestamp, style: { float: "right", marginLeft: 10, marginTop: 3, paddingLeft: 0 }, children: timestampStr }),
+                effectiveDescription
+              ]
             },
             "description"
           ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showBody && !hasDescription && hasAction && !dismissing && /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              className: styles.timestamp,
+              style: { textAlign: "right", marginTop: 8, paddingLeft: 0 },
+              initial: prefersReducedMotion ? false : { opacity: 0 },
+              animate: { opacity: 1 },
+              exit: { opacity: 0 },
+              transition: prefersReducedMotion ? { duration: 0.01 } : { duration: 0.35, ease: [0.4, 0, 0.2, 1] },
+              children: timestampStr
+            },
+            "timestamp-body"
+          ) }),
           /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showBody && hasAction && effectiveAction && !dismissing && /* @__PURE__ */ jsxRuntime.jsx(
             framerMotion.motion.div,
             {
@@ -1166,7 +1264,22 @@ var GoeyToast = ({
               )
             },
             "action"
-          ) })
+          ) }),
+          showProgress && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `${styles.progressWrapper}${hovered || containerHovered ? ` ${styles.progressPaused}` : ""}`,
+              style: { opacity: showBody && !actionSuccess ? 1 : 0 },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: `${styles.progressBar} ${progressColorMap[effectivePhase]}`,
+                  style: { "--goey-progress-duration": `${progressDelayRef.current || (timing?.displayDuration ?? DEFAULT_DISPLAY_DURATION)}ms` }
+                }
+              )
+            },
+            progressKey
+          )
         ]
       }
     )
@@ -1193,37 +1306,129 @@ var ToastErrorBoundary = class extends react.Component {
   }
 };
 var DEFAULT_EXPANDED_DURATION = 4e3;
-var _activeIds = /* @__PURE__ */ new Set();
+function getAnnouncePoliteness(type) {
+  return type === "error" || type === "warning" ? "assertive" : "polite";
+}
+function buildAnnouncementMessage(title, description) {
+  if (!description || typeof description !== "string") return title;
+  return `${title}: ${description}`;
+}
+var _activeIds = /* @__PURE__ */ new Map();
 var _queue = [];
+var _toastCallbacks = /* @__PURE__ */ new Map();
+var _autoCloseFlags = /* @__PURE__ */ new Set();
+var _manualDismissFlags = /* @__PURE__ */ new Set();
+function _getMostRecentActiveId() {
+  let last;
+  for (const id of _activeIds.keys()) last = id;
+  return last;
+}
 function _processQueue() {
   const max = getGoeyVisibleToasts();
   while (_queue.length > 0 && _activeIds.size < max) {
     const next = _queue.shift();
-    _activeIds.add(next.id);
+    _activeIds.set(next.id, next.type);
     next.create();
   }
 }
+function _enqueue(entry) {
+  const maxQueue = getGoeyMaxQueue();
+  const overflow = getGoeyQueueOverflow();
+  if (_queue.length >= maxQueue) {
+    if (overflow === "drop-newest") return false;
+    _queue.shift();
+  }
+  _queue.push(entry);
+  return true;
+}
 function _onToastDismissed(id) {
   if (!_activeIds.delete(id)) return;
+  _toastUpdateListeners.delete(id);
+  const cbs = _toastCallbacks.get(id);
+  if (cbs) {
+    const isAutoClose = _autoCloseFlags.has(id) || !_manualDismissFlags.has(id);
+    if (isAutoClose && cbs.onAutoClose) {
+      try {
+        cbs.onAutoClose(id);
+      } catch {
+      }
+    }
+    if (cbs.onDismiss) {
+      try {
+        cbs.onDismiss(id);
+      } catch {
+      }
+    }
+    _toastCallbacks.delete(id);
+  }
+  _autoCloseFlags.delete(id);
+  _manualDismissFlags.delete(id);
   _processQueue();
 }
+var _toastUpdateListeners = /* @__PURE__ */ new Map();
+function updateGoeyToast(id, options) {
+  const listener = _toastUpdateListeners.get(id);
+  if (listener) {
+    listener(options);
+    if (options.type !== void 0 && _activeIds.has(id)) {
+      _activeIds.set(id, options.type);
+    }
+    if (options.title !== void 0) {
+      announce(
+        buildAnnouncementMessage(options.title, options.description),
+        options.type ? getAnnouncePoliteness(options.type) : "polite"
+      );
+    }
+  }
+}
 function GoeyToastWrapper({
   initialPhase,
-  title,
-  type,
-  description,
-  action,
+  title: initialTitle,
+  type: initialType,
+  description: initialDescription,
+  action: initialAction,
   icon,
   classNames,
   fillColor,
   borderColor,
   borderWidth,
   timing,
+  preset,
   spring,
   bounce,
+  showProgress,
   toastId,
-  activeId
+  activeId,
+  onDismiss,
+  onAutoClose
 }) {
+  react.useEffect(() => {
+    if (onDismiss || onAutoClose) {
+      _toastCallbacks.set(activeId, { onDismiss, onAutoClose });
+    }
+  }, [activeId, onDismiss, onAutoClose]);
+  const [title, setTitle] = react.useState(initialTitle);
+  const [type, setType] = react.useState(initialType);
+  const [phase, setPhase] = react.useState(initialPhase);
+  const [description, setDescription] = react.useState(initialDescription);
+  const [action, setAction] = react.useState(initialAction);
+  const [currentIcon, setCurrentIcon] = react.useState(icon);
+  react.useEffect(() => {
+    const handleUpdate = (opts) => {
+      if (opts.title !== void 0) setTitle(opts.title);
+      if (opts.description !== void 0) setDescription(opts.description);
+      if (opts.type !== void 0) {
+        setType(opts.type);
+        setPhase(opts.type);
+      }
+      if (opts.action !== void 0) setAction(opts.action);
+      if ("icon" in opts) setCurrentIcon(opts.icon ?? void 0);
+    };
+    _toastUpdateListeners.set(activeId, handleUpdate);
+    return () => {
+      _toastUpdateListeners.delete(activeId);
+    };
+  }, [activeId]);
   const mountedRef = react.useRef(true);
   react.useEffect(() => {
     mountedRef.current = true;
@@ -1241,15 +1446,17 @@ function GoeyToastWrapper({
       description,
       type,
       action,
-      icon,
-      phase: initialPhase,
+      icon: currentIcon,
+      phase,
       classNames,
       fillColor,
       borderColor,
       borderWidth,
       timing,
+      preset,
       spring,
       bounce,
+      showProgress,
       toastId
     }
   ) });
@@ -1263,6 +1470,11 @@ function PromiseToastWrapper({
   const [title, setTitle] = react.useState(data.loading);
   const [description, setDescription] = react.useState(data.description?.loading);
   const [action, setAction] = react.useState(void 0);
+  react.useEffect(() => {
+    if (data.onDismiss || data.onAutoClose) {
+      _toastCallbacks.set(toastId, { onDismiss: data.onDismiss, onAutoClose: data.onAutoClose });
+    }
+  }, [toastId, data.onDismiss, data.onAutoClose]);
   const mountedRef = react.useRef(true);
   react.useEffect(() => {
     mountedRef.current = true;
@@ -1284,22 +1496,22 @@ function PromiseToastWrapper({
     };
     promise.then((result) => {
       const desc = typeof data.description?.success === "function" ? data.description.success(result) : data.description?.success;
-      setTitle(
-        typeof data.success === "function" ? data.success(result) : data.success
-      );
+      const resolvedTitle = typeof data.success === "function" ? data.success(result) : data.success;
+      setTitle(resolvedTitle);
       setDescription(desc);
       setAction(data.action?.success);
       setPhase("success");
       resetDuration(Boolean(desc || data.action?.success));
+      announce(buildAnnouncementMessage(resolvedTitle, desc), "polite");
     }).catch((err) => {
       const desc = typeof data.description?.error === "function" ? data.description.error(err) : data.description?.error;
-      setTitle(
-        typeof data.error === "function" ? data.error(err) : data.error
-      );
+      const resolvedTitle = typeof data.error === "function" ? data.error(err) : data.error;
+      setTitle(resolvedTitle);
       setDescription(desc);
       setAction(data.action?.error);
       setPhase("error");
       resetDuration(Boolean(desc || data.action?.error));
+      announce(buildAnnouncementMessage(resolvedTitle, desc), "assertive");
     });
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(ToastErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1315,6 +1527,7 @@ function PromiseToastWrapper({
       borderColor: data.borderColor,
       borderWidth: data.borderWidth,
       timing: data.timing,
+      preset: data.preset,
       spring: data.spring,
       bounce: data.bounce
     }
@@ -1341,10 +1554,14 @@ function createGoeyToast(title, type, options) {
           borderColor: options?.borderColor,
           borderWidth: options?.borderWidth,
           timing: options?.timing,
+          preset: options?.preset,
           spring: options?.spring,
           bounce: options?.bounce,
+          showProgress: options?.showProgress,
           toastId: hasExpandedContent ? toastId : void 0,
-          activeId: toastId
+          activeId: toastId,
+          onDismiss: options?.onDismiss,
+          onAutoClose: options?.onAutoClose
         }
       ),
       {
@@ -1353,23 +1570,48 @@ function createGoeyToast(title, type, options) {
       }
     );
   };
+  if (options?.onDismiss || options?.onAutoClose) {
+    _toastCallbacks.set(toastId, { onDismiss: options.onDismiss, onAutoClose: options.onAutoClose });
+  }
+  announce(
+    buildAnnouncementMessage(title, options?.description),
+    getAnnouncePoliteness(type)
+  );
   if (_activeIds.size < getGoeyVisibleToasts()) {
-    _activeIds.add(toastId);
+    _activeIds.set(toastId, type);
     create();
   } else {
-    _queue.push({ id: toastId, create });
+    _enqueue({ id: toastId, type, create });
   }
   return toastId;
 }
-function dismissGoeyToast(id) {
-  if (id != null) {
-    const idx = _queue.findIndex((q) => q.id === id);
+function dismissGoeyToast(idOrFilter) {
+  if (idOrFilter != null && typeof idOrFilter === "object") {
+    const filterTypes = Array.isArray(idOrFilter.type) ? idOrFilter.type : [idOrFilter.type];
+    const typesSet = new Set(filterTypes);
+    for (let i = _queue.length - 1; i >= 0; i--) {
+      if (typesSet.has(_queue[i].type)) {
+        _queue.splice(i, 1);
+      }
+    }
+    for (const [id, toastType] of _activeIds) {
+      if (typesSet.has(toastType)) {
+        _manualDismissFlags.add(id);
+        sonner.toast.dismiss(id);
+      }
+    }
+  } else if (idOrFilter != null) {
+    const idx = _queue.findIndex((q) => q.id === idOrFilter);
     if (idx !== -1) {
       _queue.splice(idx, 1);
       return;
     }
-    sonner.toast.dismiss(id);
+    _manualDismissFlags.add(idOrFilter);
+    sonner.toast.dismiss(idOrFilter);
   } else {
+    for (const id of _activeIds.keys()) {
+      _manualDismissFlags.add(id);
+    }
     _queue.length = 0;
     _activeIds.clear();
     sonner.toast.dismiss();
@@ -1384,6 +1626,10 @@ var goeyToast = Object.assign(
     info: (title, options) => createGoeyToast(title, "info", options),
     promise: (promise, data) => {
       const id = Math.random().toString(36).slice(2);
+      announce(buildAnnouncementMessage(data.loading, data.description?.loading), "polite");
+      if (data.onDismiss || data.onAutoClose) {
+        _toastCallbacks.set(id, { onDismiss: data.onDismiss, onAutoClose: data.onAutoClose });
+      }
       const create = () => {
         sonner.toast.custom(() => /* @__PURE__ */ jsxRuntime.jsx(PromiseToastWrapper, { promise, data, toastId: id }), {
           id,
@@ -1391,18 +1637,226 @@ var goeyToast = Object.assign(
         });
       };
       if (_activeIds.size < getGoeyVisibleToasts()) {
-        _activeIds.add(id);
+        _activeIds.set(id, "info");
         create();
       } else {
-        _queue.push({ id, create });
+        _enqueue({ id, type: "info", create });
       }
       return id;
     },
-    dismiss: dismissGoeyToast
+    dismiss: dismissGoeyToast,
+    update: updateGoeyToast
   }
 );
+function AriaLiveAnnouncer() {
+  const [politeMessage, setPoliteMessage] = react.useState("");
+  const [assertiveMessage, setAssertiveMessage] = react.useState("");
+  const handleAnnouncement = react.useCallback(({ message, politeness }) => {
+    if (politeness === "assertive") {
+      setAssertiveMessage("");
+      requestAnimationFrame(() => setAssertiveMessage(message));
+    } else {
+      setPoliteMessage("");
+      requestAnimationFrame(() => setPoliteMessage(message));
+    }
+  }, []);
+  react.useEffect(() => {
+    return subscribeAnnouncements(handleAnnouncement);
+  }, [handleAnnouncement]);
+  react.useEffect(() => {
+    if (!politeMessage) return;
+    const t = setTimeout(() => setPoliteMessage(""), 7e3);
+    return () => clearTimeout(t);
+  }, [politeMessage]);
+  react.useEffect(() => {
+    if (!assertiveMessage) return;
+    const t = setTimeout(() => setAssertiveMessage(""), 7e3);
+    return () => clearTimeout(t);
+  }, [assertiveMessage]);
+  const visuallyHidden = {
+    position: "absolute",
+    width: "1px",
+    height: "1px",
+    padding: 0,
+    margin: "-1px",
+    overflow: "hidden",
+    clip: "rect(0, 0, 0, 0)",
+    whiteSpace: "nowrap",
+    border: 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "status",
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        style: visuallyHidden,
+        children: politeMessage
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "alert",
+        "aria-live": "assertive",
+        "aria-atomic": "true",
+        style: visuallyHidden,
+        children: assertiveMessage
+      }
+    )
+  ] });
+}
+function GoeyToaster({
+  position = "bottom-right",
+  duration,
+  gap = 14,
+  offset = "24px",
+  theme = "light",
+  toastOptions,
+  expand,
+  closeButton,
+  richColors,
+  visibleToasts,
+  dir,
+  preset,
+  spring,
+  bounce,
+  swipeToDismiss = true,
+  closeOnEscape = true,
+  maxQueue = Infinity,
+  queueOverflow = "drop-oldest",
+  showProgress = false
+}) {
+  const presetConfig = preset ? animationPresets[preset] : void 0;
+  const resolvedSpring = spring ?? presetConfig?.spring ?? true;
+  const resolvedBounce = bounce ?? presetConfig?.bounce;
+  react.useEffect(() => {
+    setGoeyPosition(position);
+  }, [position]);
+  react.useEffect(() => {
+    setGoeyDir(dir ?? "ltr");
+  }, [dir]);
+  react.useEffect(() => {
+    setGoeyTheme(theme);
+  }, [theme]);
+  react.useEffect(() => {
+    setGoeySpring(resolvedSpring);
+  }, [resolvedSpring]);
+  react.useEffect(() => {
+    setGoeyBounce(resolvedBounce);
+  }, [resolvedBounce]);
+  react.useEffect(() => {
+    setGoeySwipeToDismiss(swipeToDismiss);
+  }, [swipeToDismiss]);
+  react.useEffect(() => {
+  }, [closeOnEscape]);
+  react.useEffect(() => {
+    if (!closeOnEscape) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        const recentId = _getMostRecentActiveId();
+        if (recentId != null) {
+          goeyToast.dismiss(recentId);
+        }
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [closeOnEscape]);
+  react.useEffect(() => {
+    setGoeyVisibleToasts(visibleToasts ?? 3);
+  }, [visibleToasts]);
+  react.useEffect(() => {
+    setGoeyMaxQueue(maxQueue);
+  }, [maxQueue]);
+  react.useEffect(() => {
+    setGoeyQueueOverflow(queueOverflow);
+  }, [queueOverflow]);
+  react.useEffect(() => {
+    setGoeyShowProgress(showProgress);
+  }, [showProgress]);
+  react.useEffect(() => {
+    let expandObs = null;
+    let currentOl = null;
+    const syncFromExpanded = (ol) => {
+      const anyExpanded = ol.querySelector('[data-sonner-toast][data-expanded="true"]') !== null;
+      setContainerHovered(anyExpanded);
+    };
+    const attach = (ol) => {
+      if (ol === currentOl) return;
+      expandObs?.disconnect();
+      currentOl = ol;
+      expandObs = new MutationObserver(() => syncFromExpanded(ol));
+      expandObs.observe(ol, { attributes: true, attributeFilter: ["data-expanded"], subtree: true });
+      syncFromExpanded(ol);
+    };
+    const el = document.querySelector("[data-sonner-toaster]");
+    if (el) attach(el);
+    let bodyRafId = 0;
+    const bodyObs = new MutationObserver(() => {
+      if (bodyRafId) return;
+      bodyRafId = requestAnimationFrame(() => {
+        bodyRafId = 0;
+        const found = document.querySelector("[data-sonner-toaster]");
+        if (found) {
+          attach(found);
+        } else if (currentOl) {
+          expandObs?.disconnect();
+          currentOl = null;
+          setContainerHovered(false);
+        }
+      });
+    });
+    bodyObs.observe(document.body, { childList: true, subtree: true });
+    return () => {
+      if (bodyRafId) cancelAnimationFrame(bodyRafId);
+      bodyObs.disconnect();
+      expandObs?.disconnect();
+      setContainerHovered(false);
+    };
+  }, []);
+  react.useEffect(() => {
+    if (process.env.NODE_ENV !== "development") return;
+    const el = document.createElement("div");
+    el.setAttribute("data-goey-toast-css", "");
+    el.style.position = "absolute";
+    el.style.width = "0";
+    el.style.height = "0";
+    el.style.overflow = "hidden";
+    el.style.pointerEvents = "none";
+    document.body.appendChild(el);
+    const value = getComputedStyle(el).getPropertyValue("--goey-toast");
+    document.body.removeChild(el);
+    if (!value) {
+      console.warn(
+        '[goey-toast] Styles not found. Make sure to import the CSS:\n\n  import "goey-toast/styles.css";\n'
+      );
+    }
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      sonner.Toaster,
+      {
+        position,
+        duration,
+        gap,
+        offset,
+        theme,
+        toastOptions: { unstyled: true, ...toastOptions },
+        expand,
+        closeButton,
+        richColors,
+        visibleToasts: 99,
+        dir
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(AriaLiveAnnouncer, {})
+  ] });
+}
 
 exports.GoeyToaster = GoeyToaster;
+exports.animationPresets = animationPresets;
 exports.goeyToast = goeyToast;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map