goey-toast 0.1.0

package/dist/index.cjs

@@ -0,0 +1,983 @@
+'use strict';
+
+var react = require('react');
+var sonner = require('sonner');
+var jsxRuntime = require('react/jsx-runtime');
+var framerMotion = require('framer-motion');
+
+// src/components/GoeyToaster.tsx
+
+// src/context.ts
+var _position = "bottom-right";
+function setGoeyPosition(position) {
+  _position = position;
+}
+function getGoeyPosition() {
+  return _position;
+}
+function GoeyToaster({
+  position = "bottom-right",
+  duration,
+  gap = 14,
+  offset = "24px",
+  theme = "light",
+  toastOptions,
+  expand,
+  closeButton,
+  richColors,
+  visibleToasts,
+  dir
+}) {
+  react.useEffect(() => {
+    setGoeyPosition(position);
+  }, [position]);
+  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,
+      dir
+    }
+  );
+}
+var DefaultIcon = ({ size = 20, className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
+    ]
+  }
+);
+var SuccessIcon = ({ size = 20, className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 12l2 2 4-4" })
+    ]
+  }
+);
+var ErrorIcon = ({ size = 20, className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 9l-6 6" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 9l6 6" })
+    ]
+  }
+);
+var WarningIcon = ({ size = 20, className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+    ]
+  }
+);
+var InfoIcon = ({ size = 20, className }) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+    ]
+  }
+);
+var SpinnerIcon = ({ size = 20, className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className,
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+  }
+);
+var QUERY = "(prefers-reduced-motion: reduce)";
+function getInitialState() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return false;
+  }
+  return window.matchMedia(QUERY).matches;
+}
+function usePrefersReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = react.useState(getInitialState);
+  react.useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const mql = window.matchMedia(QUERY);
+    const handler = (event) => {
+      setPrefersReducedMotion(event.matches);
+    };
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+  return prefersReducedMotion;
+}
+
+// src/components/GoeyToast.module.css
+var GoeyToast_default = {};
+var phaseIconMap = {
+  default: DefaultIcon,
+  success: SuccessIcon,
+  error: ErrorIcon,
+  warning: WarningIcon,
+  info: InfoIcon
+};
+var titleColorMap = {
+  loading: GoeyToast_default.titleLoading,
+  default: GoeyToast_default.titleDefault,
+  success: GoeyToast_default.titleSuccess,
+  error: GoeyToast_default.titleError,
+  warning: GoeyToast_default.titleWarning,
+  info: GoeyToast_default.titleInfo
+};
+var actionColorMap = {
+  loading: GoeyToast_default.actionInfo,
+  default: GoeyToast_default.actionDefault,
+  success: GoeyToast_default.actionSuccess,
+  error: GoeyToast_default.actionError,
+  warning: GoeyToast_default.actionWarning,
+  info: GoeyToast_default.actionInfo
+};
+var PH = 34;
+var DEFAULT_DISPLAY_DURATION = 4e3;
+var BASE_SQUISH = { type: "spring", stiffness: 380, damping: 16, mass: 0.7 };
+var DEFAULT_EXPAND_DUR = 0.6;
+var DEFAULT_COLLAPSE_DUR = 0.9;
+function squishSpring(durationSec, defaultDur) {
+  const scale = durationSec / defaultDur;
+  return { ...BASE_SQUISH, mass: BASE_SQUISH.mass * scale };
+}
+var observerRegistry = /* @__PURE__ */ new Map();
+function registerSonnerObserver(ol, callback) {
+  let entry = observerRegistry.get(ol);
+  if (!entry) {
+    const callbacks = /* @__PURE__ */ new Set();
+    let applying = false;
+    const observer = new MutationObserver(() => {
+      if (applying) return;
+      applying = true;
+      requestAnimationFrame(() => {
+        callbacks.forEach((cb) => cb());
+        requestAnimationFrame(() => {
+          applying = false;
+        });
+      });
+    });
+    observer.observe(ol, {
+      attributes: true,
+      attributeFilter: ["style"],
+      subtree: true,
+      childList: true
+    });
+    entry = { observer, callbacks };
+    observerRegistry.set(ol, entry);
+  }
+  entry.callbacks.add(callback);
+  return () => {
+    entry.callbacks.delete(callback);
+    if (entry.callbacks.size === 0) {
+      entry.observer.disconnect();
+      observerRegistry.delete(ol);
+    }
+  };
+}
+function syncSonnerHeights(wrapperEl) {
+  if (!wrapperEl) return;
+  const li = wrapperEl.closest("[data-sonner-toast]");
+  if (!li?.parentElement) return;
+  const ol = li.parentElement;
+  const toasts = Array.from(
+    ol.querySelectorAll(":scope > [data-sonner-toast]")
+  );
+  for (const t of toasts) {
+    const content = t.firstElementChild;
+    const height = content ? content.getBoundingClientRect().height : 0;
+    if (height > 0) {
+      t.style.setProperty("--initial-height", `${height}px`);
+    }
+  }
+}
+function morphPath(pw, bw, th, t) {
+  const pr = PH / 2;
+  const pillW = Math.min(pw, bw);
+  const bodyH = PH + (th - PH) * t;
+  if (t <= 0 || bodyH - PH < 8) {
+    return [
+      `M 0,${pr}`,
+      `A ${pr},${pr} 0 0 1 ${pr},0`,
+      `H ${pillW - pr}`,
+      `A ${pr},${pr} 0 0 1 ${pillW},${pr}`,
+      `A ${pr},${pr} 0 0 1 ${pillW - pr},${PH}`,
+      `H ${pr}`,
+      `A ${pr},${pr} 0 0 1 0,${pr}`,
+      `Z`
+    ].join(" ");
+  }
+  const curve = 14 * t;
+  const cr = Math.min(16, (bodyH - PH) * 0.45);
+  const bodyW = pillW + (bw - pillW) * t;
+  const bodyTop = PH - curve;
+  const qEndX = Math.min(pillW + curve, bodyW - cr);
+  return [
+    `M 0,${pr}`,
+    `A ${pr},${pr} 0 0 1 ${pr},0`,
+    `H ${pillW - pr}`,
+    `A ${pr},${pr} 0 0 1 ${pillW},${pr}`,
+    `L ${pillW},${bodyTop}`,
+    `Q ${pillW},${bodyTop + curve} ${qEndX},${bodyTop + curve}`,
+    `H ${bodyW - cr}`,
+    `A ${cr},${cr} 0 0 1 ${bodyW},${bodyTop + curve + cr}`,
+    `L ${bodyW},${bodyH - cr}`,
+    `A ${cr},${cr} 0 0 1 ${bodyW - cr},${bodyH}`,
+    `H ${cr}`,
+    `A ${cr},${cr} 0 0 1 0,${bodyH - cr}`,
+    `Z`
+  ].join(" ");
+}
+var GoeyToast = ({
+  title,
+  description,
+  action,
+  icon,
+  phase,
+  classNames,
+  fillColor = "#ffffff",
+  borderColor,
+  borderWidth,
+  timing
+}) => {
+  const position = getGoeyPosition();
+  const isRight = position?.includes("right") ?? false;
+  const prefersReducedMotion = usePrefersReducedMotion();
+  const [actionSuccess, setActionSuccess] = react.useState(null);
+  const [dismissing, setDismissing] = react.useState(false);
+  const collapsingRef = react.useRef(false);
+  const preDismissRef = react.useRef(false);
+  const collapseEndTime = react.useRef(0);
+  const expandedDimsRef = react.useRef({ pw: 0, bw: 0, th: 0 });
+  const effectiveTitle = actionSuccess ?? title;
+  const effectivePhase = actionSuccess ? "success" : phase;
+  const effectiveDescription = actionSuccess ? void 0 : description;
+  const effectiveAction = actionSuccess ? void 0 : action;
+  const isLoading = effectivePhase === "loading";
+  const hasDescription = Boolean(effectiveDescription);
+  const hasAction = Boolean(effectiveAction);
+  const isExpanded = (hasDescription || hasAction) && !dismissing;
+  const [showBody, setShowBody] = react.useState(false);
+  const wrapperRef = react.useRef(null);
+  const pathRef = react.useRef(null);
+  const headerRef = react.useRef(null);
+  const contentRef = react.useRef(null);
+  const morphCtrl = react.useRef(null);
+  const pillResizeCtrl = react.useRef(null);
+  const headerSquishCtrl = react.useRef(null);
+  const morphTRef = react.useRef(0);
+  const aDims = react.useRef({ pw: 0, bw: 0, th: 0 });
+  const dimsRef = react.useRef({ pw: 0, bw: 0, th: 0 });
+  const [dims, setDims] = react.useState({ pw: 0, bw: 0, th: 0 });
+  react.useEffect(() => {
+    dimsRef.current = dims;
+  }, [dims]);
+  const flush = react.useCallback(() => {
+    const { pw: p, bw: b, th: h } = aDims.current;
+    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;
+    pathRef.current?.setAttribute("d", morphPath(p, b, h, t));
+    if (t >= 1) {
+      if (wrapperRef.current) {
+        wrapperRef.current.style.width = "";
+      }
+      if (contentRef.current) {
+        contentRef.current.style.width = "";
+        contentRef.current.style.overflow = "";
+        contentRef.current.style.maxHeight = "";
+        contentRef.current.style.clipPath = "";
+      }
+    } else if (t > 0) {
+      const targetBw = dimsRef.current.bw;
+      const targetTh = dimsRef.current.th;
+      const pillW = Math.min(p, b);
+      const currentW = pillW + (b - pillW) * t;
+      const currentH = PH + (targetTh - PH) * t;
+      if (wrapperRef.current) {
+        wrapperRef.current.style.width = currentW + "px";
+      }
+      if (contentRef.current) {
+        contentRef.current.style.width = targetBw + "px";
+        contentRef.current.style.overflow = "hidden";
+        contentRef.current.style.maxHeight = currentH + "px";
+        const clip = targetBw - currentW;
+        contentRef.current.style.clipPath = rightSide ? `inset(0 0 0 ${clip}px)` : `inset(0 ${clip}px 0 0)`;
+      }
+    } else {
+      const pillW = Math.min(p, b);
+      if (wrapperRef.current) {
+        wrapperRef.current.style.width = pillW + "px";
+      }
+      if (contentRef.current) {
+        contentRef.current.style.width = "";
+        contentRef.current.style.overflow = "hidden";
+        contentRef.current.style.maxHeight = PH + "px";
+        contentRef.current.style.clipPath = "";
+      }
+    }
+  }, []);
+  const measure = react.useCallback(() => {
+    if (!headerRef.current || !contentRef.current) return;
+    const wr = wrapperRef.current;
+    const savedW = wr?.style.width ?? "";
+    const savedOv = contentRef.current.style.overflow;
+    const savedMH = contentRef.current.style.maxHeight;
+    const savedCW = contentRef.current.style.width;
+    if (wr) {
+      wr.style.width = "";
+    }
+    contentRef.current.style.overflow = "";
+    contentRef.current.style.maxHeight = "";
+    contentRef.current.style.width = "";
+    const cs = getComputedStyle(contentRef.current);
+    const paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+    const pw2 = headerRef.current.offsetWidth + paddingX;
+    const bw2 = contentRef.current.offsetWidth;
+    const th2 = contentRef.current.offsetHeight;
+    if (wr) {
+      wr.style.width = savedW;
+    }
+    contentRef.current.style.overflow = savedOv;
+    contentRef.current.style.maxHeight = savedMH;
+    contentRef.current.style.width = savedCW;
+    setDims({ pw: pw2, bw: bw2, th: th2 });
+  }, []);
+  react.useLayoutEffect(() => {
+    measure();
+    const t = setTimeout(measure, 100);
+    return () => clearTimeout(t);
+  }, [effectiveTitle, effectivePhase, isExpanded, showBody, effectiveDescription, effectiveAction, measure]);
+  react.useEffect(() => {
+    if (!contentRef.current) return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(contentRef.current);
+    return () => ro.disconnect();
+  }, [measure]);
+  const { pw, bw, th } = dims;
+  const hasDims = pw > 0 && bw > 0 && th > 0;
+  const blobSquishCtrl = react.useRef(null);
+  const expandDur = timing?.expandDuration ?? DEFAULT_EXPAND_DUR;
+  const collapseDur = timing?.collapseDuration ?? DEFAULT_COLLAPSE_DUR;
+  const lastSquishTime = react.useRef(0);
+  const triggerLandingSquish = react.useCallback((phase2 = "mount") => {
+    if (!wrapperRef.current || prefersReducedMotion) return;
+    const now = Date.now();
+    if (now - lastSquishTime.current < 300) return;
+    lastSquishTime.current = now;
+    blobSquishCtrl.current?.stop();
+    const el = wrapperRef.current;
+    const spring = phase2 === "collapse" ? squishSpring(collapseDur, DEFAULT_COLLAPSE_DUR) : squishSpring(expandDur, DEFAULT_EXPAND_DUR);
+    const compressY = phase2 === "collapse" ? 0.07 : 0.12;
+    const expandX = phase2 === "collapse" ? 0.035 : 0.06;
+    blobSquishCtrl.current = framerMotion.animate(0, 1, {
+      ...spring,
+      onUpdate: (v) => {
+        const intensity = Math.sin(v * Math.PI);
+        const sy = 1 - compressY * intensity;
+        const sx = 1 + expandX * intensity;
+        const mirror = el.style.transform?.includes("scaleX(-1)") ? "scaleX(-1) " : "";
+        el.style.transformOrigin = "center bottom";
+        el.style.transform = mirror + `scaleX(${sx}) scaleY(${sy})`;
+      },
+      onComplete: () => {
+        const right = el.style.transform?.includes("scaleX(-1)");
+        el.style.transform = right ? "scaleX(-1)" : "";
+        el.style.transformOrigin = "";
+      }
+    });
+  }, [prefersReducedMotion, expandDur, collapseDur]);
+  react.useLayoutEffect(() => {
+    if (!hasDims || collapsingRef.current) return;
+    const prev = { ...aDims.current };
+    const target = { pw, bw, th };
+    if (prev.bw <= 0) {
+      aDims.current = target;
+      flush();
+      return;
+    }
+    if (morphTRef.current > 0 && morphTRef.current < 1) {
+      aDims.current = target;
+      flush();
+      return;
+    }
+    if (showBody) {
+      aDims.current = target;
+      flush();
+      return;
+    }
+    if (prev.bw === target.bw && prev.pw === target.pw && prev.th === target.th) return;
+    if (prefersReducedMotion) {
+      aDims.current = target;
+      flush();
+      return;
+    }
+    pillResizeCtrl.current?.stop();
+    if (Date.now() - collapseEndTime.current > 500 && !isExpanded) {
+      triggerLandingSquish("expand");
+    }
+    pillResizeCtrl.current = framerMotion.animate(0, 1, {
+      type: "spring",
+      duration: 0.5,
+      bounce: 0.35,
+      onUpdate: (t) => {
+        aDims.current = {
+          pw: prev.pw + (target.pw - prev.pw) * t,
+          bw: prev.bw + (target.bw - prev.bw) * t,
+          th: prev.th + (target.th - prev.th) * t
+        };
+        flush();
+      }
+    });
+  }, [pw, bw, th, hasDims, showBody, flush, prefersReducedMotion, triggerLandingSquish]);
+  const expandDelayMs = prefersReducedMotion ? 0 : timing?.expandDelay ?? 330;
+  const mountSquished = react.useRef(false);
+  react.useEffect(() => {
+    if (hasDims && !mountSquished.current && !isExpanded) {
+      mountSquished.current = true;
+      const t = setTimeout(triggerLandingSquish, expandDelayMs);
+      return () => clearTimeout(t);
+    }
+  }, [hasDims, expandDelayMs, triggerLandingSquish]);
+  const prevShowBody = react.useRef(false);
+  react.useLayoutEffect(() => {
+    if (!prevShowBody.current && showBody) {
+      triggerLandingSquish("expand");
+    }
+    prevShowBody.current = showBody;
+  }, [showBody, triggerLandingSquish]);
+  const shakeCtrl = react.useRef(null);
+  const prevPhase = react.useRef(phase);
+  react.useEffect(() => {
+    if (phase === "error" && prevPhase.current !== "error" && !dismissing && wrapperRef.current && !prefersReducedMotion) {
+      shakeCtrl.current?.stop();
+      const el = wrapperRef.current;
+      const mirror = el.style.transform?.includes("scaleX(-1)") ? "scaleX(-1) " : "";
+      shakeCtrl.current = framerMotion.animate(0, 1, {
+        duration: 0.4,
+        ease: "easeOut",
+        onUpdate: (v) => {
+          const decay = 1 - v;
+          const shake = Math.sin(v * Math.PI * 6) * decay * 3;
+          el.style.transform = mirror + `translateX(${shake}px)`;
+        },
+        onComplete: () => {
+          el.style.transform = mirror.trim() || "";
+        }
+      });
+    }
+    prevPhase.current = phase;
+    return () => {
+      shakeCtrl.current?.stop();
+    };
+  }, [phase, dismissing, prefersReducedMotion]);
+  react.useEffect(() => {
+    if (isExpanded) {
+      const delay = prefersReducedMotion ? 0 : timing?.expandDelay ?? 330;
+      const t1 = setTimeout(() => setShowBody(true), delay);
+      return () => clearTimeout(t1);
+    }
+    morphCtrl.current?.stop();
+    pillResizeCtrl.current?.stop();
+    if (morphTRef.current > 0) {
+      const csPad = contentRef.current ? getComputedStyle(contentRef.current) : null;
+      const padX = csPad ? parseFloat(csPad.paddingLeft) + parseFloat(csPad.paddingRight) : 20;
+      const targetPw = headerRef.current ? headerRef.current.offsetWidth + padX : aDims.current.pw;
+      const targetDims = { pw: targetPw, bw: targetPw, th: PH };
+      if (prefersReducedMotion) {
+        morphTRef.current = 0;
+        collapsingRef.current = false;
+        preDismissRef.current = false;
+        setShowBody(false);
+        aDims.current = { ...targetDims };
+        flush();
+        return;
+      }
+      const savedDims = expandedDimsRef.current.bw > 0 ? { ...expandedDimsRef.current } : { ...aDims.current };
+      const isPreDismiss = preDismissRef.current;
+      const collapseDur2 = timing?.collapseDuration ?? 0.9;
+      const collapseTransition = isPreDismiss ? { duration: collapseDur2, ease: [0.4, 0, 0.2, 1] } : { type: "spring", duration: collapseDur2, bounce: 0.2 };
+      triggerLandingSquish("collapse");
+      morphCtrl.current = framerMotion.animate(morphTRef.current, 0, {
+        ...collapseTransition,
+        onUpdate: (t) => {
+          morphTRef.current = t;
+          aDims.current = {
+            pw: targetDims.pw + (savedDims.pw - targetDims.pw) * t,
+            bw: targetDims.bw + (savedDims.bw - targetDims.bw) * t,
+            th: targetDims.th + (savedDims.th - targetDims.th) * t
+          };
+          flush();
+        },
+        onComplete: () => {
+          morphTRef.current = 0;
+          collapsingRef.current = false;
+          preDismissRef.current = false;
+          collapseEndTime.current = Date.now();
+          aDims.current = { ...targetDims };
+          flush();
+          setShowBody(false);
+        }
+      });
+      return () => {
+        morphCtrl.current?.stop();
+      };
+    }
+    setShowBody(false);
+    morphTRef.current = 0;
+    flush();
+  }, [isExpanded, flush, prefersReducedMotion]);
+  react.useEffect(() => {
+    if (!showBody || actionSuccess || dismissing) return;
+    const expandDelayMs2 = prefersReducedMotion ? 0 : timing?.expandDelay ?? 330;
+    const collapseMs = prefersReducedMotion ? 10 : (timing?.collapseDuration ?? 0.9) * 1e3;
+    const displayMs = timing?.displayDuration ?? DEFAULT_DISPLAY_DURATION;
+    const delay = displayMs - expandDelayMs2 - collapseMs;
+    if (delay <= 0) return;
+    const timer = setTimeout(() => {
+      expandedDimsRef.current = { ...aDims.current };
+      collapsingRef.current = true;
+      preDismissRef.current = true;
+      setDismissing(true);
+    }, delay);
+    return () => clearTimeout(timer);
+  }, [showBody, actionSuccess, dismissing, prefersReducedMotion]);
+  react.useEffect(() => {
+    if (!showBody) {
+      morphTRef.current = 0;
+      morphCtrl.current?.stop();
+      flush();
+      return;
+    }
+    if (prefersReducedMotion) {
+      pillResizeCtrl.current?.stop();
+      morphCtrl.current?.stop();
+      morphTRef.current = 1;
+      aDims.current = { ...dimsRef.current };
+      flush();
+      syncSonnerHeights(wrapperRef.current);
+      return;
+    }
+    const raf = requestAnimationFrame(() => {
+      pillResizeCtrl.current?.stop();
+      morphCtrl.current?.stop();
+      const startDims = { ...aDims.current };
+      morphCtrl.current = framerMotion.animate(0, 1, {
+        type: "spring",
+        duration: timing?.expandDuration ?? 0.9,
+        bounce: 0.2,
+        onUpdate: (t) => {
+          morphTRef.current = t;
+          const target = dimsRef.current;
+          aDims.current = {
+            pw: startDims.pw + (target.pw - startDims.pw) * t,
+            bw: startDims.bw + (target.bw - startDims.bw) * t,
+            th: startDims.th + (target.th - startDims.th) * t
+          };
+          flush();
+        },
+        onComplete: () => {
+          morphTRef.current = 1;
+          aDims.current = { ...dimsRef.current };
+          flush();
+          syncSonnerHeights(wrapperRef.current);
+        }
+      });
+    });
+    return () => {
+      cancelAnimationFrame(raf);
+      morphCtrl.current?.stop();
+    };
+  }, [showBody, flush, prefersReducedMotion]);
+  const headerSquished = react.useRef(false);
+  react.useEffect(() => {
+    if (!headerRef.current || prefersReducedMotion) return;
+    headerSquishCtrl.current?.stop();
+    const el = headerRef.current;
+    if (showBody && !dismissing && !actionSuccess) {
+      headerSquished.current = true;
+      headerSquishCtrl.current = framerMotion.animate(0, 1, {
+        ...squishSpring(expandDur, DEFAULT_EXPAND_DUR),
+        onUpdate: (v) => {
+          const scale = 1 - 0.05 * v;
+          const pushY = v * 1;
+          el.style.transform = `scale(${scale}) translateY(${pushY}px)`;
+        }
+      });
+    } else if (headerSquished.current) {
+      headerSquished.current = false;
+      const isSpringCollapse = !preDismissRef.current;
+      const transition = isSpringCollapse ? squishSpring(collapseDur, DEFAULT_COLLAPSE_DUR) : { duration: collapseDur * 0.5, ease: [0.4, 0, 0.2, 1] };
+      headerSquishCtrl.current = framerMotion.animate(1, 0, {
+        ...transition,
+        onUpdate: (v) => {
+          const scale = 1 - 0.05 * v;
+          const pushY = v * 1;
+          el.style.transform = `scale(${scale}) translateY(${pushY}px)`;
+        },
+        onComplete: () => {
+          el.style.transform = "";
+        }
+      });
+    }
+    return () => {
+      headerSquishCtrl.current?.stop();
+    };
+  }, [showBody, dismissing, actionSuccess, prefersReducedMotion, expandDur, collapseDur]);
+  react.useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+    const ol = wrapper.closest("[data-sonner-toast]")?.parentElement;
+    if (!ol) return;
+    return registerSonnerObserver(ol, () => {
+      syncSonnerHeights(wrapper);
+    });
+  }, []);
+  const handleActionClick = react.useCallback(() => {
+    if (!effectiveAction) return;
+    effectiveAction.onClick();
+    if (effectiveAction.successLabel) {
+      expandedDimsRef.current = { ...aDims.current };
+      collapsingRef.current = true;
+      setActionSuccess(effectiveAction.successLabel);
+    }
+  }, [effectiveAction]);
+  const renderIcon = () => {
+    if (!actionSuccess && icon) return icon;
+    if (isLoading) return /* @__PURE__ */ jsxRuntime.jsx(SpinnerIcon, { size: 18, className: GoeyToast_default.spinnerSpin });
+    const IconComponent = phaseIconMap[effectivePhase];
+    return /* @__PURE__ */ jsxRuntime.jsx(IconComponent, { size: 18 });
+  };
+  const iconTransition = prefersReducedMotion ? { duration: 0.01 } : { duration: 0.2 };
+  const iconEl = /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${GoeyToast_default.iconWrapper}${classNames?.icon ? ` ${classNames.icon}` : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.div,
+    {
+      initial: prefersReducedMotion ? false : { opacity: 0, scale: 0.5 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.5 },
+      transition: iconTransition,
+      children: renderIcon()
+    },
+    isLoading ? "spinner" : effectivePhase
+  ) }) });
+  const titleEl = /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${GoeyToast_default.title}${classNames?.title ? ` ${classNames.title}` : ""}`, children: effectiveTitle });
+  const iconAndTitle = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    iconEl,
+    titleEl
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: wrapperRef, className: `${GoeyToast_default.wrapper}${classNames?.wrapper ? ` ${classNames.wrapper}` : ""}`, style: isRight ? { marginLeft: "auto", transform: "scaleX(-1)" } : void 0, role: effectivePhase === "error" ? "alert" : "status", "aria-live": effectivePhase === "error" ? "assertive" : "polite", "aria-atomic": "true", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        className: GoeyToast_default.blobSvg,
+        "aria-hidden": true,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            ref: pathRef,
+            fill: fillColor,
+            stroke: borderColor || "none",
+            strokeWidth: borderColor ? borderWidth ?? 1.5 : 0
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref: contentRef,
+        className: `${GoeyToast_default.content} ${showBody ? GoeyToast_default.contentExpanded : GoeyToast_default.contentCompact}${classNames?.content ? ` ${classNames.content}` : ""}`,
+        style: isRight ? { transform: "scaleX(-1)", textAlign: "right" } : { textAlign: "left" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { ref: headerRef, className: `${GoeyToast_default.header} ${titleColorMap[effectivePhase]}${classNames?.header ? ` ${classNames.header}` : ""}`, children: iconAndTitle }),
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showBody && hasDescription && !dismissing && /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              className: `${GoeyToast_default.description}${classNames?.description ? ` ${classNames.description}` : ""}`,
+              style: { textAlign: "left" },
+              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: effectiveDescription
+            },
+            "description"
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showBody && hasAction && effectiveAction && !dismissing && /* @__PURE__ */ jsxRuntime.jsx(
+            framerMotion.motion.div,
+            {
+              className: `${GoeyToast_default.actionWrapper}${classNames?.actionWrapper ? ` ${classNames.actionWrapper}` : ""}`,
+              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], delay: 0.1 },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  className: `${GoeyToast_default.actionButton} ${actionColorMap[effectivePhase]}${classNames?.actionButton ? ` ${classNames.actionButton}` : ""}`,
+                  onClick: handleActionClick,
+                  type: "button",
+                  "aria-label": effectiveAction.label,
+                  children: effectiveAction.label
+                }
+              )
+            },
+            "action"
+          ) })
+        ]
+      }
+    )
+  ] });
+};
+var ToastErrorBoundary = class extends react.Component {
+  constructor() {
+    super(...arguments);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+  componentDidCatch(error, errorInfo) {
+    if (process.env.NODE_ENV !== "production") {
+      console.error("[GoeyToast] Rendering error:", error, errorInfo);
+    }
+  }
+  render() {
+    if (this.state.hasError) {
+      return null;
+    }
+    return this.props.children;
+  }
+};
+var DEFAULT_EXPANDED_DURATION = 4e3;
+function GoeyToastWrapper({
+  initialPhase,
+  title,
+  type,
+  description,
+  action,
+  icon,
+  classNames,
+  fillColor,
+  borderColor,
+  borderWidth,
+  timing
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(ToastErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    GoeyToast,
+    {
+      title,
+      description,
+      type,
+      action,
+      icon,
+      phase: initialPhase,
+      classNames,
+      fillColor,
+      borderColor,
+      borderWidth,
+      timing
+    }
+  ) });
+}
+function PromiseToastWrapper({
+  promise,
+  data,
+  toastId
+}) {
+  const [phase, setPhase] = react.useState("loading");
+  const [title, setTitle] = react.useState(data.loading);
+  const [description, setDescription] = react.useState(data.description?.loading);
+  const [action, setAction] = react.useState(void 0);
+  react.useEffect(() => {
+    const resetDuration = (hasExpandedContent) => {
+      const baseDuration = data.timing?.displayDuration ?? (hasExpandedContent ? DEFAULT_EXPANDED_DURATION : void 0);
+      const collapseDurMs = (data.timing?.collapseDuration ?? 0.9) * 1e3;
+      const duration = baseDuration != null && hasExpandedContent ? baseDuration + collapseDurMs : baseDuration;
+      if (duration != null) {
+        sonner.toast.custom(() => /* @__PURE__ */ jsxRuntime.jsx(PromiseToastWrapper, { promise, data, toastId }), { id: toastId, duration });
+      }
+    };
+    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
+      );
+      setDescription(desc);
+      setAction(data.action?.success);
+      setPhase("success");
+      resetDuration(Boolean(desc || data.action?.success));
+    }).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
+      );
+      setDescription(desc);
+      setAction(data.action?.error);
+      setPhase("error");
+      resetDuration(Boolean(desc || data.action?.error));
+    });
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(ToastErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    GoeyToast,
+    {
+      title,
+      description,
+      type: phase === "loading" ? "info" : phase,
+      action,
+      phase,
+      classNames: data.classNames,
+      fillColor: data.fillColor,
+      borderColor: data.borderColor,
+      borderWidth: data.borderWidth,
+      timing: data.timing
+    }
+  ) });
+}
+function createGoeyToast(title, type, options) {
+  const baseDuration = options?.timing?.displayDuration ?? options?.duration ?? (options?.description ? DEFAULT_EXPANDED_DURATION : void 0);
+  const hasExpandedContent = Boolean(options?.description || options?.action);
+  const collapseDurMs = (options?.timing?.collapseDuration ?? 0.9) * 1e3;
+  const duration = baseDuration != null && hasExpandedContent ? baseDuration + collapseDurMs : baseDuration;
+  return sonner.toast.custom(
+    () => /* @__PURE__ */ jsxRuntime.jsx(
+      GoeyToastWrapper,
+      {
+        initialPhase: type,
+        title,
+        type,
+        description: options?.description,
+        action: options?.action,
+        icon: options?.icon,
+        classNames: options?.classNames,
+        fillColor: options?.fillColor,
+        borderColor: options?.borderColor,
+        borderWidth: options?.borderWidth,
+        timing: options?.timing
+      }
+    ),
+    {
+      duration,
+      id: options?.id
+    }
+  );
+}
+var goeyToast = Object.assign(
+  (title, options) => createGoeyToast(title, "default", options),
+  {
+    success: (title, options) => createGoeyToast(title, "success", options),
+    error: (title, options) => createGoeyToast(title, "error", options),
+    warning: (title, options) => createGoeyToast(title, "warning", options),
+    info: (title, options) => createGoeyToast(title, "info", options),
+    promise: (promise, data) => {
+      const id = Math.random().toString(36).slice(2);
+      return sonner.toast.custom(() => /* @__PURE__ */ jsxRuntime.jsx(PromiseToastWrapper, { promise, data, toastId: id }), {
+        id,
+        duration: data.timing?.displayDuration != null || data.description ? Infinity : void 0
+      });
+    },
+    dismiss: sonner.toast.dismiss
+  }
+);
+
+exports.GoeyToaster = GoeyToaster;
+exports.goeyToast = goeyToast;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map