goey-toast 0.2.2 → 0.4.0

package/dist/index.cjs

@@ -5,7 +5,7 @@ var sonner = require('sonner');
 var framerMotion = require('framer-motion');
 var jsxRuntime = require('react/jsx-runtime');
 
-// src/components/GoeyToaster.tsx
+// src/components/GooeyToaster.tsx
 
 // src/presets.ts
 var animationPresets = {
@@ -21,71 +21,78 @@ var _dir = "ltr";
 var _spring = true;
 var _bounce = void 0;
 var _theme = "light";
-function setGoeyTheme(theme) {
+function setGooeyTheme(theme) {
   _theme = theme;
 }
-function getGoeyTheme() {
+function getGooeyTheme() {
   return _theme;
 }
-function setGoeyPosition(position) {
+function setGooeyPosition(position) {
   _position = position;
 }
-function getGoeyPosition() {
+function getGooeyPosition() {
   return _position;
 }
-function setGoeyDir(dir) {
+function setGooeyDir(dir) {
   _dir = dir;
 }
-function getGoeyDir() {
+function getGooeyDir() {
   return _dir;
 }
-function setGoeySpring(spring) {
+function setGooeySpring(spring) {
   _spring = spring;
 }
-function getGoeySpring() {
+function getGooeySpring() {
   return _spring;
 }
-function setGoeyBounce(bounce) {
+function setGooeyBounce(bounce) {
   _bounce = bounce;
 }
-function getGoeyBounce() {
+function getGooeyBounce() {
   return _bounce;
 }
 var _visibleToasts = 3;
-function setGoeyVisibleToasts(n) {
+function setGooeyVisibleToasts(n) {
   _visibleToasts = n;
 }
-function getGoeyVisibleToasts() {
+function getGooeyVisibleToasts() {
   return _visibleToasts;
 }
 var _swipeToDismiss = true;
-function setGoeySwipeToDismiss(enabled) {
+function setGooeySwipeToDismiss(enabled) {
   _swipeToDismiss = enabled;
 }
-function getGoeySwipeToDismiss() {
+function getGooeySwipeToDismiss() {
   return _swipeToDismiss;
 }
 var _maxQueue = Infinity;
-function setGoeyMaxQueue(n) {
+function setGooeyMaxQueue(n) {
   _maxQueue = n;
 }
-function getGoeyMaxQueue() {
+function getGooeyMaxQueue() {
   return _maxQueue;
 }
 var _queueOverflow = "drop-oldest";
-function setGoeyQueueOverflow(strategy) {
+function setGooeyQueueOverflow(strategy) {
   _queueOverflow = strategy;
 }
-function getGoeyQueueOverflow() {
+function getGooeyQueueOverflow() {
   return _queueOverflow;
 }
 var _showProgress = false;
-function setGoeyShowProgress(show) {
+function setGooeyShowProgress(show) {
   _showProgress = show;
 }
-function getGoeyShowProgress() {
+function getGooeyShowProgress() {
   return _showProgress;
 }
+var _closeButton = false;
+function setGooeyCloseButton(value) {
+  _closeButton = value;
+}
+function getGooeyCloseButton() {
+  return _closeButton;
+}
 var _containerHovered = false;
 var _hoverSubs = /* @__PURE__ */ new Set();
 function setContainerHovered(hovered) {
@@ -249,40 +256,42 @@ function usePrefersReducedMotion() {
   return prefersReducedMotion;
 }
 
-// src/components/goey-styles.ts
+// src/components/gooey-styles.ts
 var styles = {
-  spinnerSpin: "goey-spinnerSpin",
-  wrapper: "goey-wrapper",
-  blobSvg: "goey-blobSvg",
-  content: "goey-content",
-  contentCompact: "goey-contentCompact",
-  contentExpanded: "goey-contentExpanded",
-  header: "goey-header",
-  iconWrapper: "goey-iconWrapper",
-  title: "goey-title",
-  titleDefault: "goey-titleDefault",
-  titleSuccess: "goey-titleSuccess",
-  titleError: "goey-titleError",
-  titleWarning: "goey-titleWarning",
-  titleInfo: "goey-titleInfo",
-  titleLoading: "goey-titleLoading",
-  description: "goey-description",
-  actionWrapper: "goey-actionWrapper",
-  actionButton: "goey-actionButton",
-  actionDefault: "goey-actionDefault",
-  actionSuccess: "goey-actionSuccess",
-  actionError: "goey-actionError",
-  actionWarning: "goey-actionWarning",
-  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"
+  spinnerSpin: "gooey-spinnerSpin",
+  wrapper: "gooey-wrapper",
+  blobSvg: "gooey-blobSvg",
+  content: "gooey-content",
+  contentCompact: "gooey-contentCompact",
+  contentExpanded: "gooey-contentExpanded",
+  header: "gooey-header",
+  iconWrapper: "gooey-iconWrapper",
+  title: "gooey-title",
+  titleDefault: "gooey-titleDefault",
+  titleSuccess: "gooey-titleSuccess",
+  titleError: "gooey-titleError",
+  titleWarning: "gooey-titleWarning",
+  titleInfo: "gooey-titleInfo",
+  titleLoading: "gooey-titleLoading",
+  description: "gooey-description",
+  actionWrapper: "gooey-actionWrapper",
+  actionButton: "gooey-actionButton",
+  actionDefault: "gooey-actionDefault",
+  actionSuccess: "gooey-actionSuccess",
+  actionError: "gooey-actionError",
+  actionWarning: "gooey-actionWarning",
+  actionInfo: "gooey-actionInfo",
+  progressWrapper: "gooey-progressWrapper",
+  progressBar: "gooey-progressBar",
+  progressDefault: "gooey-progressDefault",
+  progressSuccess: "gooey-progressSuccess",
+  progressError: "gooey-progressError",
+  progressWarning: "gooey-progressWarning",
+  progressInfo: "gooey-progressInfo",
+  progressPaused: "gooey-progressPaused",
+  timestamp: "gooey-timestamp",
+  closeButton: "gooey-closeButton",
+  closeButtonRight: "gooey-closeButtonRight"
 };
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? react.useLayoutEffect : react.useEffect;
 var phaseIconMap = {
@@ -522,7 +531,7 @@ function morphPathCenterRaw(pw, bw, th, t) {
 var morphPath = memoizePath(morphPathRaw);
 var morphPathCenter = memoizePath(morphPathCenterRaw);
 var SMOOTH_EASE = [0.4, 0, 0.2, 1];
-var GoeyToast = ({
+var GooeyToast = ({
   title,
   description,
   action,
@@ -536,21 +545,24 @@ var GoeyToast = ({
   preset,
   spring: springProp,
   bounce: bounceProp,
+  showTimestamp = true,
   showProgress: showProgressProp,
   toastId
 }) => {
-  const theme = getGoeyTheme();
+  const theme = getGooeyTheme();
+  const closeButtonSetting = getGooeyCloseButton();
+  const showCloseButton = closeButtonSetting !== false;
   const fillColor = fillColorProp ?? (theme === "dark" ? "#1a1a1a" : "#ffffff");
-  const position = getGoeyPosition();
-  const dir = getGoeyDir();
+  const position = getGooeyPosition();
+  const dir = getGooeyDir();
   const posIsRight = position?.includes("right") ?? false;
   const isCenter = position?.includes("center") ?? false;
   const isRight = dir === "rtl" ? isCenter ? false : !posIsRight : posIsRight;
   const prefersReducedMotion = usePrefersReducedMotion();
   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 useSpring = springProp ?? presetConfig?.spring ?? getGooeySpring();
+  const bounceVal = bounceProp ?? presetConfig?.bounce ?? getGooeyBounce() ?? 0.4;
+  const showProgress = showProgressProp ?? getGooeyShowProgress();
   const [actionSuccess, setActionSuccess] = react.useState(null);
   const [dismissing, setDismissing] = react.useState(false);
   const [progressKey, setProgressKey] = react.useState(0);
@@ -596,8 +608,8 @@ var GoeyToast = ({
     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 d = getGoeyDir();
+    const pos = getGooeyPosition();
+    const d = getGooeyDir();
     const centerPos = pos?.includes("center") ?? false;
     const posRight = pos?.includes("right") ?? false;
     const rightSide = d === "rtl" ? centerPos ? false : !posRight : posRight;
@@ -1094,13 +1106,13 @@ var GoeyToast = ({
   const [swipeOffsetX, setSwipeOffsetX] = react.useState(0);
   const isSwipingRef = react.useRef(false);
   const handleTouchStart = react.useCallback((e) => {
-    if (!getGoeySwipeToDismiss()) return;
+    if (!getGooeySwipeToDismiss()) 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;
+    if (!swipeStartRef.current || !getGooeySwipeToDismiss()) return;
     const touch = e.touches[0];
     const dx = touch.clientX - swipeStartRef.current.x;
     const dy = touch.clientY - swipeStartRef.current.y;
@@ -1116,7 +1128,7 @@ var GoeyToast = ({
     }
   }, []);
   const handleTouchEnd = react.useCallback(() => {
-    if (!getGoeySwipeToDismiss()) {
+    if (!getGooeySwipeToDismiss()) {
       swipeStartRef.current = null;
       return;
     }
@@ -1204,6 +1216,30 @@ var GoeyToast = ({
         )
       }
     ),
+    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 +1249,9 @@ var GoeyToast = ({
         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 +1260,14 @@ var GoeyToast = ({
               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,
@@ -1274,7 +1310,7 @@ var GoeyToast = ({
                 "div",
                 {
                   className: `${styles.progressBar} ${progressColorMap[effectivePhase]}`,
-                  style: { "--goey-progress-duration": `${progressDelayRef.current || (timing?.displayDuration ?? DEFAULT_DISPLAY_DURATION)}ms` }
+                  style: { "--gooey-progress-duration": `${progressDelayRef.current || (timing?.displayDuration ?? DEFAULT_DISPLAY_DURATION)}ms` }
                 }
               )
             },
@@ -1295,7 +1331,7 @@ var ToastErrorBoundary = class extends react.Component {
   }
   componentDidCatch(error, errorInfo) {
     if (process.env.NODE_ENV !== "production") {
-      console.error("[GoeyToast] Rendering error:", error, errorInfo);
+      console.error("[GooeyToast] Rendering error:", error, errorInfo);
     }
   }
   render() {
@@ -1324,7 +1360,7 @@ function _getMostRecentActiveId() {
   return last;
 }
 function _processQueue() {
-  const max = getGoeyVisibleToasts();
+  const max = getGooeyVisibleToasts();
   while (_queue.length > 0 && _activeIds.size < max) {
     const next = _queue.shift();
     _activeIds.set(next.id, next.type);
@@ -1332,8 +1368,8 @@ function _processQueue() {
   }
 }
 function _enqueue(entry) {
-  const maxQueue = getGoeyMaxQueue();
-  const overflow = getGoeyQueueOverflow();
+  const maxQueue = getGooeyMaxQueue();
+  const overflow = getGooeyQueueOverflow();
   if (_queue.length >= maxQueue) {
     if (overflow === "drop-newest") return false;
     _queue.shift();
@@ -1366,7 +1402,7 @@ function _onToastDismissed(id) {
   _processQueue();
 }
 var _toastUpdateListeners = /* @__PURE__ */ new Map();
-function updateGoeyToast(id, options) {
+function updateGooeyToast(id, options) {
   const listener = _toastUpdateListeners.get(id);
   if (listener) {
     listener(options);
@@ -1381,7 +1417,7 @@ function updateGoeyToast(id, options) {
     }
   }
 }
-function GoeyToastWrapper({
+function GooeyToastWrapper({
   initialPhase,
   title: initialTitle,
   type: initialType,
@@ -1397,22 +1433,23 @@ function GoeyToastWrapper({
   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,24 +1460,25 @@ function GoeyToastWrapper({
       }
       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(
-    GoeyToast,
+    GooeyToast,
     {
       title,
       description,
@@ -1457,6 +1495,7 @@ function GoeyToastWrapper({
       spring,
       bounce,
       showProgress,
+      showTimestamp,
       toastId
     }
   ) });
@@ -1515,7 +1554,7 @@ function PromiseToastWrapper({
     });
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(ToastErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    GoeyToast,
+    GooeyToast,
     {
       title,
       description,
@@ -1529,11 +1568,13 @@ function PromiseToastWrapper({
       timing: data.timing,
       preset: data.preset,
       spring: data.spring,
-      bounce: data.bounce
+      bounce: data.bounce,
+      showTimestamp: data.showTimestamp ?? true,
+      toastId
     }
   ) });
 }
-function createGoeyToast(title, type, options) {
+function createGooeyToast(title, type, options) {
   const hasExpandedContent = Boolean(options?.description || options?.action);
   const baseDuration = options?.timing?.displayDuration ?? options?.duration ?? (options?.description ? DEFAULT_EXPANDED_DURATION : void 0);
   const duration = hasExpandedContent ? Infinity : baseDuration;
@@ -1541,7 +1582,7 @@ function createGoeyToast(title, type, options) {
   const create = () => {
     sonner.toast.custom(
       () => /* @__PURE__ */ jsxRuntime.jsx(
-        GoeyToastWrapper,
+        GooeyToastWrapper,
         {
           initialPhase: type,
           title,
@@ -1558,8 +1599,8 @@ function createGoeyToast(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
         }
@@ -1577,7 +1618,7 @@ function createGoeyToast(title, type, options) {
     buildAnnouncementMessage(title, options?.description),
     getAnnouncePoliteness(type)
   );
-  if (_activeIds.size < getGoeyVisibleToasts()) {
+  if (_activeIds.size < getGooeyVisibleToasts()) {
     _activeIds.set(toastId, type);
     create();
   } else {
@@ -1585,7 +1626,7 @@ function createGoeyToast(title, type, options) {
   }
   return toastId;
 }
-function dismissGoeyToast(idOrFilter) {
+function dismissGooeyToast(idOrFilter) {
   if (idOrFilter != null && typeof idOrFilter === "object") {
     const filterTypes = Array.isArray(idOrFilter.type) ? idOrFilter.type : [idOrFilter.type];
     const typesSet = new Set(filterTypes);
@@ -1617,13 +1658,13 @@ function dismissGoeyToast(idOrFilter) {
     sonner.toast.dismiss();
   }
 }
-var goeyToast = Object.assign(
-  (title, options) => createGoeyToast(title, "default", options),
+var gooeyToast = Object.assign(
+  (title, options) => createGooeyToast(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),
+    success: (title, options) => createGooeyToast(title, "success", options),
+    error: (title, options) => createGooeyToast(title, "error", options),
+    warning: (title, options) => createGooeyToast(title, "warning", options),
+    info: (title, options) => createGooeyToast(title, "info", options),
     promise: (promise, data) => {
       const id = Math.random().toString(36).slice(2);
       announce(buildAnnouncementMessage(data.loading, data.description?.loading), "polite");
@@ -1636,7 +1677,7 @@ var goeyToast = Object.assign(
           duration: data.timing?.displayDuration != null || data.description ? Infinity : void 0
         });
       };
-      if (_activeIds.size < getGoeyVisibleToasts()) {
+      if (_activeIds.size < getGooeyVisibleToasts()) {
         _activeIds.set(id, "info");
         create();
       } else {
@@ -1644,8 +1685,8 @@ var goeyToast = Object.assign(
       }
       return id;
     },
-    dismiss: dismissGoeyToast,
-    update: updateGoeyToast
+    dismiss: dismissGooeyToast,
+    update: updateGooeyToast
   }
 );
 function AriaLiveAnnouncer() {
@@ -1707,7 +1748,7 @@ function AriaLiveAnnouncer() {
     )
   ] });
 }
-function GoeyToaster({
+function GooeyToaster({
   position = "bottom-right",
   duration,
   gap = 14,
@@ -1732,22 +1773,22 @@ function GoeyToaster({
   const resolvedSpring = spring ?? presetConfig?.spring ?? true;
   const resolvedBounce = bounce ?? presetConfig?.bounce;
   react.useEffect(() => {
-    setGoeyPosition(position);
+    setGooeyPosition(position);
   }, [position]);
   react.useEffect(() => {
-    setGoeyDir(dir ?? "ltr");
+    setGooeyDir(dir ?? "ltr");
   }, [dir]);
   react.useEffect(() => {
-    setGoeyTheme(theme);
+    setGooeyTheme(theme);
   }, [theme]);
   react.useEffect(() => {
-    setGoeySpring(resolvedSpring);
+    setGooeySpring(resolvedSpring);
   }, [resolvedSpring]);
   react.useEffect(() => {
-    setGoeyBounce(resolvedBounce);
+    setGooeyBounce(resolvedBounce);
   }, [resolvedBounce]);
   react.useEffect(() => {
-    setGoeySwipeToDismiss(swipeToDismiss);
+    setGooeySwipeToDismiss(swipeToDismiss);
   }, [swipeToDismiss]);
   react.useEffect(() => {
   }, [closeOnEscape]);
@@ -1757,7 +1798,7 @@ function GoeyToaster({
       if (e.key === "Escape") {
         const recentId = _getMostRecentActiveId();
         if (recentId != null) {
-          goeyToast.dismiss(recentId);
+          gooeyToast.dismiss(recentId);
         }
       }
     };
@@ -1765,17 +1806,20 @@ function GoeyToaster({
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [closeOnEscape]);
   react.useEffect(() => {
-    setGoeyVisibleToasts(visibleToasts ?? 3);
+    setGooeyVisibleToasts(visibleToasts ?? 3);
   }, [visibleToasts]);
   react.useEffect(() => {
-    setGoeyMaxQueue(maxQueue);
+    setGooeyMaxQueue(maxQueue);
   }, [maxQueue]);
   react.useEffect(() => {
-    setGoeyQueueOverflow(queueOverflow);
+    setGooeyQueueOverflow(queueOverflow);
   }, [queueOverflow]);
   react.useEffect(() => {
-    setGoeyShowProgress(showProgress);
+    setGooeyShowProgress(showProgress);
   }, [showProgress]);
+  react.useEffect(() => {
+    setGooeyCloseButton(closeButton ?? false);
+  }, [closeButton]);
   react.useEffect(() => {
     let expandObs = null;
     let currentOl = null;
@@ -1819,18 +1863,18 @@ function GoeyToaster({
   react.useEffect(() => {
     if (process.env.NODE_ENV !== "development") return;
     const el = document.createElement("div");
-    el.setAttribute("data-goey-toast-css", "");
+    el.setAttribute("data-gooey-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");
+    const value = getComputedStyle(el).getPropertyValue("--gooey-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'
+        '[gooey-toast] Styles not found. Make sure to import the CSS:\n\n  import "goey-toast/styles.css";\n'
       );
     }
   }, []);
@@ -1845,7 +1889,7 @@ function GoeyToaster({
         theme,
         toastOptions: { unstyled: true, ...toastOptions },
         expand,
-        closeButton,
+        closeButton: false,
         richColors,
         visibleToasts: 99,
         dir
@@ -1855,8 +1899,10 @@ function GoeyToaster({
   ] });
 }
 
-exports.GoeyToaster = GoeyToaster;
+exports.GoeyToaster = GooeyToaster;
+exports.GooeyToaster = GooeyToaster;
 exports.animationPresets = animationPresets;
-exports.goeyToast = goeyToast;
+exports.goeyToast = gooeyToast;
+exports.gooeyToast = gooeyToast;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map