goey-toast 0.3.0 → 0.4.1

package/README.md

@@ -23,7 +23,8 @@
 - Dismiss by type filter: `gooeyToast.dismiss({ type: 'error' })`
 - Dark mode and RTL layout support
 - Animation presets: smooth, bouncy, subtle, snappy
-- Timestamp display on expanded toasts
+- Timestamp display on expanded toasts with optional `showTimestamp` toggle
+- Close button with configurable position (`top-left` / `top-right`)
 - Countdown progress bar with hover-pause and re-expand
 - Keyboard dismiss (Escape) and swipe-to-dismiss on mobile
 - Toast queue with configurable overflow strategy
@@ -164,6 +165,7 @@ Options passed as the second argument to `gooeyToast()` and type-specific method
 | `timing`      | `GooeyToastTimings`   | Animation timing overrides         |
 | `spring`      | `boolean`            | Enable spring/bounce animations (default `true`) |
 | `bounce`      | `number`             | Spring intensity from `0.05` (subtle) to `0.8` (dramatic), default `0.4` |
+| `showTimestamp` | `boolean`         | Show/hide timestamp in toast header/body (default `true`) |
 | `showProgress`| `boolean`            | Show countdown progress bar                      |
 | `onDismiss`   | `(id) => void`       | Called when toast is dismissed (any reason)       |
 | `onAutoClose` | `(id) => void`       | Called only on timer-based auto-dismiss           |
@@ -216,11 +218,13 @@ Props for the `<GooeyToaster />` component.
 | `bounce`     | `number`                              | `0.4`            | Spring intensity: `0.05` (subtle) to `0.8` (dramatic) |
 | `preset`     | `AnimationPresetName`                 | --               | Animation preset for all toasts               |
 | `closeOnEscape` | `boolean`                          | `true`           | Dismiss most recent toast on Escape key       |
+| `closeButton`  | `boolean \| 'top-left' \| 'top-right'` | `false`       | Show close button on hover                    |
 | `showProgress` | `boolean`                           | `false`          | Show countdown progress bar on all toasts     |
 | `maxQueue`   | `number`                              | `Infinity`       | Maximum queued toasts                         |
 | `queueOverflow` | `'drop-oldest' \| 'drop-newest'`   | `'drop-oldest'`  | Queue overflow strategy                       |
 | `dir`        | `'ltr' \| 'rtl'`                     | `'ltr'`          | Layout direction                              |
 | `swipeToDismiss` | `boolean`                         | `true`           | Enable swipe-to-dismiss on mobile             |
+| `showTimestamp` | `boolean`                         | `true`           | Show/hide timestamp on all toasts globally     |
 
 ### `GooeyPromiseData<T>`
 
@@ -422,6 +426,28 @@ Press **Escape** to dismiss the most recent toast. Enabled by default; disable w
 
 On mobile, swipe toasts to dismiss them. Enabled by default; disable with `swipeToDismiss={false}`.
 
+### Close Button
+
+Show a close button on hover. Position it `top-left` (default) or `top-right`:
+
+```tsx
+<GooeyToaster closeButton />
+<GooeyToaster closeButton="top-left" />
+<GooeyToaster closeButton="top-right" />
+```
+
+The close button inherits the toast's border and fill color styling. Hidden during the loading phase of promise toasts.
+
+### Hiding Timestamps
+
+```tsx
+// Per-toast: hide timestamp for this toast only
+gooeyToast.success('Saved', { showTimestamp: false })
+
+// Globally: hide timestamp for all toasts
+<GooeyToaster showTimestamp={false} />
+```
+
 ## Exports
 
 ```ts
@@ -458,6 +484,10 @@ goey-toast works in all modern browsers that support:
 - ResizeObserver
 - `framer-motion` (Chrome, Firefox, Safari, Edge)
 
+## See Also
+
+- **[gooey-search-tabs](https://github.com/anl331/gooey-search-tabs)** — A morphing search bar with animated tab navigation for React. [Live Demo](https://gooey-search-tabs.vercel.app)
+
 ## License
 
 [MIT](./LICENSE)

package/dist/index.cjs

@@ -86,6 +86,20 @@ function setGooeyShowProgress(show) {
 function getGooeyShowProgress() {
   return _showProgress;
 }
+var _showTimestamp = true;
+function setGooeyShowTimestamp(show) {
+  _showTimestamp = show;
+}
+function getGooeyShowTimestamp() {
+  return _showTimestamp;
+}
+var _closeButton = false;
+function setGooeyCloseButton(value) {
+  _closeButton = value;
+}
+function getGooeyCloseButton() {
+  return _closeButton;
+}
 var _containerHovered = false;
 var _hoverSubs = /* @__PURE__ */ new Set();
 function setContainerHovered(hovered) {
@@ -282,7 +296,9 @@ var styles = {
   progressWarning: "gooey-progressWarning",
   progressInfo: "gooey-progressInfo",
   progressPaused: "gooey-progressPaused",
-  timestamp: "gooey-timestamp"
+  timestamp: "gooey-timestamp",
+  closeButton: "gooey-closeButton",
+  closeButtonRight: "gooey-closeButtonRight"
 };
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 var phaseIconMap = {
@@ -332,23 +348,23 @@ 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, {
+    const observeOptions = {
       attributes: true,
       attributeFilter: ["style", "data-visible"],
       subtree: true,
       childList: true
+    };
+    const observer = new MutationObserver(() => {
+      observer.disconnect();
+      try {
+        for (const cb of callbacks) {
+          cb();
+        }
+      } finally {
+        observer.observe(ol, observeOptions);
+      }
     });
+    observer.observe(ol, observeOptions);
     entry = { observer, callbacks };
     observerRegistry.set(ol, entry);
   }
@@ -376,17 +392,10 @@ function syncSonnerHeights(wrapperEl, includeOffsets = false) {
     const h = content ? content.getBoundingClientRect().height : 0;
     return h > 0 ? h : PH;
   });
-  const isExpanded = includeOffsets && toasts[0]?.getAttribute("data-expanded") === "true";
-  if (isExpanded) {
-    for (const t of toasts) t.style.setProperty("transition", "none", "important");
-  }
   for (let i = 0; i < toasts.length; i++) {
     toasts[i].style.setProperty("--initial-height", `${heights[i]}px`);
   }
   if (!includeOffsets) {
-    if (isExpanded) {
-      for (const t of toasts) t.style.removeProperty("transition");
-    }
     return;
   }
   const gapStr = getComputedStyle(ol).getPropertyValue("--gap").trim();
@@ -402,10 +411,6 @@ function syncSonnerHeights(wrapperEl, includeOffsets = false) {
       runningOffset += heights[i] + gap;
     }
   }
-  if (isExpanded) {
-    void ol.offsetHeight;
-    for (const t of toasts) t.style.removeProperty("transition");
-  }
 }
 function memoizePath(fn) {
   let lastArgs = null;
@@ -536,10 +541,13 @@ var GooeyToast = ({
   preset,
   spring: springProp,
   bounce: bounceProp,
+  showTimestamp: showTimestampProp,
   showProgress: showProgressProp,
   toastId
 }) => {
   const theme = getGooeyTheme();
+  const closeButtonSetting = getGooeyCloseButton();
+  const showCloseButton = closeButtonSetting !== false;
   const fillColor = fillColorProp ?? (theme === "dark" ? "#1a1a1a" : "#ffffff");
   const position = getGooeyPosition();
   const dir = getGooeyDir();
@@ -551,6 +559,7 @@ var GooeyToast = ({
   const useSpring = springProp ?? presetConfig?.spring ?? getGooeySpring();
   const bounceVal = bounceProp ?? presetConfig?.bounce ?? getGooeyBounce() ?? 0.4;
   const showProgress = showProgressProp ?? getGooeyShowProgress();
+  const showTimestamp = showTimestampProp ?? getGooeyShowTimestamp();
   const [actionSuccess, setActionSuccess] = react.useState(null);
   const [dismissing, setDismissing] = react.useState(false);
   const [progressKey, setProgressKey] = react.useState(0);
@@ -1204,6 +1213,30 @@ var GooeyToast = ({
         )
       }
     ),
+    showCloseButton && effectivePhase !== "loading" && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        className: `${styles.closeButton}${(isRight ? closeButtonSetting !== "top-right" : closeButtonSetting === "top-right") ? ` ${styles.closeButtonRight}` : ""}`,
+        "aria-label": "Close toast",
+        type: "button",
+        style: {
+          background: fillColor,
+          borderColor: borderColor || "transparent",
+          borderWidth: borderColor ? borderWidth ?? 1.5 : 0,
+          boxShadow: borderColor ? "none" : "0 1px 4px rgba(0, 0, 0, 0.2)",
+          ...isCenter && closeButtonSetting !== "top-right" ? { top: 6, left: -1 } : {}
+        },
+        onClick: (e) => {
+          e.stopPropagation();
+          const id = toastId;
+          if (id != null) sonner.toast.dismiss(id);
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+          /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+        ] })
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -1213,9 +1246,9 @@ var GooeyToast = ({
         children: [
           /* @__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 })
+            !hasDescription && !hasAction && !actionSuccess && showTimestamp && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.timestamp, children: timestampStr })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showBody && hasDescription && !dismissing && /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showBody && hasDescription && !dismissing && /* @__PURE__ */ jsxRuntime.jsx(
             framerMotion.motion.div,
             {
               className: `${styles.description}${classNames?.description ? ` ${classNames.description}` : ""}`,
@@ -1224,14 +1257,14 @@ var GooeyToast = ({
               animate: { opacity: 1 },
               exit: { opacity: 0 },
               transition: prefersReducedMotion ? { duration: 0.01 } : { duration: 0.35, ease: [0.4, 0, 0.2, 1] },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.timestamp, style: { float: "right", marginLeft: 10, marginTop: 3, paddingLeft: 0 }, children: timestampStr }),
-                effectiveDescription
-              ]
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: "10px" }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, minWidth: 0 }, children: effectiveDescription }),
+                showTimestamp && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.timestamp, children: timestampStr })
+              ] })
             },
             "description"
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showBody && !hasDescription && hasAction && !dismissing && /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: showBody && !hasDescription && hasAction && !dismissing && showTimestamp && /* @__PURE__ */ jsxRuntime.jsx(
             framerMotion.motion.div,
             {
               className: styles.timestamp,
@@ -1397,22 +1430,23 @@ function GooeyToastWrapper({
   spring,
   bounce,
   showProgress,
+  showTimestamp: initialShowTimestamp,
   toastId,
-  activeId,
   onDismiss,
   onAutoClose
 }) {
   react.useEffect(() => {
     if (onDismiss || onAutoClose) {
-      _toastCallbacks.set(activeId, { onDismiss, onAutoClose });
+      _toastCallbacks.set(toastId, { onDismiss, onAutoClose });
     }
-  }, [activeId, onDismiss, onAutoClose]);
+  }, [toastId, 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);
+  const [showTimestamp, setShowTimestamp] = react.useState(initialShowTimestamp ?? true);
   react.useEffect(() => {
     const handleUpdate = (opts) => {
       if (opts.title !== void 0) setTitle(opts.title);
@@ -1423,22 +1457,23 @@ function GooeyToastWrapper({
       }
       if (opts.action !== void 0) setAction(opts.action);
       if ("icon" in opts) setCurrentIcon(opts.icon ?? void 0);
+      if (opts.showTimestamp !== void 0) setShowTimestamp(opts.showTimestamp);
     };
-    _toastUpdateListeners.set(activeId, handleUpdate);
+    _toastUpdateListeners.set(toastId, handleUpdate);
     return () => {
-      _toastUpdateListeners.delete(activeId);
+      _toastUpdateListeners.delete(toastId);
     };
-  }, [activeId]);
+  }, [toastId]);
   const mountedRef = react.useRef(true);
   react.useEffect(() => {
     mountedRef.current = true;
     return () => {
       mountedRef.current = false;
       setTimeout(() => {
-        if (!mountedRef.current) _onToastDismissed(activeId);
+        if (!mountedRef.current) _onToastDismissed(toastId);
       }, 100);
     };
-  }, [activeId]);
+  }, [toastId]);
   return /* @__PURE__ */ jsxRuntime.jsx(ToastErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(
     GooeyToast,
     {
@@ -1457,6 +1492,7 @@ function GooeyToastWrapper({
       spring,
       bounce,
       showProgress,
+      showTimestamp,
       toastId
     }
   ) });
@@ -1529,7 +1565,9 @@ function PromiseToastWrapper({
       timing: data.timing,
       preset: data.preset,
       spring: data.spring,
-      bounce: data.bounce
+      bounce: data.bounce,
+      showTimestamp: data.showTimestamp ?? true,
+      toastId
     }
   ) });
 }
@@ -1558,8 +1596,8 @@ function createGooeyToast(title, type, options) {
           spring: options?.spring,
           bounce: options?.bounce,
           showProgress: options?.showProgress,
-          toastId: hasExpandedContent ? toastId : void 0,
-          activeId: toastId,
+          showTimestamp: options?.showTimestamp,
+          toastId,
           onDismiss: options?.onDismiss,
           onAutoClose: options?.onAutoClose
         }
@@ -1726,7 +1764,8 @@ function GooeyToaster({
   closeOnEscape = true,
   maxQueue = Infinity,
   queueOverflow = "drop-oldest",
-  showProgress = false
+  showProgress = false,
+  showTimestamp = true
 }) {
   const presetConfig = preset ? animationPresets[preset] : void 0;
   const resolvedSpring = spring ?? presetConfig?.spring ?? true;
@@ -1776,6 +1815,12 @@ function GooeyToaster({
   react.useEffect(() => {
     setGooeyShowProgress(showProgress);
   }, [showProgress]);
+  react.useEffect(() => {
+    setGooeyCloseButton(closeButton ?? false);
+  }, [closeButton]);
+  react.useEffect(() => {
+    setGooeyShowTimestamp(showTimestamp);
+  }, [showTimestamp]);
   react.useEffect(() => {
     let expandObs = null;
     let currentOl = null;
@@ -1845,7 +1890,7 @@ function GooeyToaster({
         theme,
         toastOptions: { unstyled: true, ...toastOptions },
         expand,
-        closeButton,
+        closeButton: false,
         richColors,
         visibleToasts: 99,
         dir
@@ -1855,8 +1900,10 @@ function GooeyToaster({
   ] });
 }
 
+exports.GoeyToaster = GooeyToaster;
 exports.GooeyToaster = GooeyToaster;
 exports.animationPresets = animationPresets;
+exports.goeyToast = gooeyToast;
 exports.gooeyToast = gooeyToast;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map