flashpop 1.0.0

package/dist/index.esm.js

@@ -0,0 +1,795 @@
+import React, { useState, useRef, useCallback, useEffect, createContext, useMemo, useContext } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const SuccessIcon = ({
+  size = 20,
+  className = '',
+  ...props
+}) => /*#__PURE__*/jsxs("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  className: `easy-toast-icon easy-toast-icon--success ${className}`,
+  "aria-hidden": "true",
+  ...props,
+  children: [/*#__PURE__*/jsx("path", {
+    d: "M22 11.08V12a10 10 0 1 1-5.93-9.14"
+  }), /*#__PURE__*/jsx("polyline", {
+    points: "22 4 12 14.01 9 11.01"
+  })]
+});
+
+/**
+ * Error Icon SVG
+ */
+const ErrorIcon = ({
+  size = 20,
+  className = '',
+  ...props
+}) => /*#__PURE__*/jsxs("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  className: `easy-toast-icon easy-toast-icon--error ${className}`,
+  "aria-hidden": "true",
+  ...props,
+  children: [/*#__PURE__*/jsx("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/jsx("line", {
+    x1: "15",
+    y1: "9",
+    x2: "9",
+    y2: "15"
+  }), /*#__PURE__*/jsx("line", {
+    x1: "9",
+    y1: "9",
+    x2: "15",
+    y2: "15"
+  })]
+});
+
+/**
+ * Warning Icon SVG
+ */
+const WarningIcon = ({
+  size = 20,
+  className = '',
+  ...props
+}) => /*#__PURE__*/jsxs("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  className: `easy-toast-icon easy-toast-icon--warning ${className}`,
+  "aria-hidden": "true",
+  ...props,
+  children: [/*#__PURE__*/jsx("path", {
+    d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
+  }), /*#__PURE__*/jsx("line", {
+    x1: "12",
+    y1: "9",
+    x2: "12",
+    y2: "13"
+  }), /*#__PURE__*/jsx("line", {
+    x1: "12",
+    y1: "17",
+    x2: "12.01",
+    y2: "17"
+  })]
+});
+
+/**
+ * Info Icon SVG
+ */
+const InfoIcon = ({
+  size = 20,
+  className = '',
+  ...props
+}) => /*#__PURE__*/jsxs("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  className: `easy-toast-icon easy-toast-icon--info ${className}`,
+  "aria-hidden": "true",
+  ...props,
+  children: [/*#__PURE__*/jsx("circle", {
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }), /*#__PURE__*/jsx("line", {
+    x1: "12",
+    y1: "16",
+    x2: "12",
+    y2: "12"
+  }), /*#__PURE__*/jsx("line", {
+    x1: "12",
+    y1: "8",
+    x2: "12.01",
+    y2: "8"
+  })]
+});
+
+/**
+ * Loading Spinner SVG
+ */
+const LoadingIcon = ({
+  size = 20,
+  className = '',
+  ...props
+}) => /*#__PURE__*/jsx("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  className: `easy-toast-icon easy-toast-icon--loading ${className}`,
+  "aria-hidden": "true",
+  ...props,
+  children: /*#__PURE__*/jsx("path", {
+    d: "M21 12a9 9 0 1 1-6.219-8.56"
+  })
+});
+
+/**
+ * Close (Dismiss) Button Icon SVG
+ */
+const CloseIcon = ({
+  size = 16,
+  className = '',
+  ...props
+}) => /*#__PURE__*/jsxs("svg", {
+  width: size,
+  height: size,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  className: `easy-toast-close-icon ${className}`,
+  "aria-hidden": "true",
+  ...props,
+  children: [/*#__PURE__*/jsx("line", {
+    x1: "18",
+    y1: "6",
+    x2: "6",
+    y2: "18"
+  }), /*#__PURE__*/jsx("line", {
+    x1: "6",
+    y1: "6",
+    x2: "18",
+    y2: "18"
+  })]
+});
+
+const ToastItem = ({
+  id,
+  type = 'default',
+  title,
+  message,
+  duration = 3000,
+  showProgressBar = true,
+  pauseOnHover = true,
+  closeButton = true,
+  icon,
+  action,
+  onClose,
+  onAccept,
+  onCancel,
+  acceptLabel,
+  cancelLabel = 'Dismiss',
+  swipeable = true,
+  swipeThreshold = 70,
+  theme = 'light',
+  className = '',
+  style = {},
+  onDismiss
+}) => {
+  const [isExiting, setIsExiting] = useState(false);
+  const [exitDirection, setExitDirection] = useState(null); // 'left' | 'right' | null
+  const [isPaused, setIsPaused] = useState(false);
+
+  // Swipe state
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragOffset, setDragOffset] = useState(0);
+  const startXRef = useRef(0);
+  const isPointerDownRef = useRef(false);
+
+  // Ref to track remaining duration when paused
+  const remainingTimeRef = useRef(duration);
+  const startTimeRef = useRef(null);
+  const timerRef = useRef(null);
+
+  // Check if this toast supports an "accept" action
+  const hasAcceptAction = Boolean(onAccept || action && action.onClick);
+  const resolvedAcceptLabel = acceptLabel || action && action.label || 'Accept';
+
+  // Trigger graceful exit animation before removal
+  const handleDismiss = useCallback((direction = null) => {
+    if (isExiting) return;
+    setIsExiting(true);
+    if (direction) {
+      setExitDirection(direction);
+    }
+    if (onClose) {
+      onClose(id);
+    }
+    // Match the CSS exit animation duration
+    setTimeout(() => {
+      onDismiss(id);
+    }, 280);
+  }, [id, isExiting, onClose, onDismiss]);
+
+  // Trigger accept action
+  const handleAccept = useCallback(() => {
+    if (isExiting) return;
+    if (onAccept) {
+      onAccept(id);
+    } else if (action && action.onClick) {
+      action.onClick(id);
+    }
+    handleDismiss('right');
+  }, [action, handleDismiss, id, isExiting, onAccept]);
+
+  // Handle auto-dismiss timer
+  useEffect(() => {
+    if (duration === false || duration === Infinity || duration <= 0) {
+      return;
+    }
+    const startTimer = time => {
+      startTimeRef.current = Date.now();
+      timerRef.current = setTimeout(() => {
+        handleDismiss();
+      }, time);
+    };
+    if (!isPaused && !isDragging) {
+      startTimer(remainingTimeRef.current);
+    }
+    return () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+      }
+    };
+  }, [duration, isPaused, isDragging, handleDismiss]);
+
+  // Pause on mouse enter
+  const handleMouseEnter = () => {
+    if (!pauseOnHover || duration === false || duration === Infinity || duration <= 0) {
+      return;
+    }
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      const elapsed = Date.now() - startTimeRef.current;
+      remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
+    }
+    setIsPaused(true);
+  };
+
+  // Resume on mouse leave
+  const handleMouseLeave = () => {
+    if (!pauseOnHover || duration === false || duration === Infinity || duration <= 0 || isDragging) {
+      return;
+    }
+    setIsPaused(false);
+  };
+
+  // --- Pointer Swipe Handlers ---
+  const handlePointerDown = e => {
+    if (!swipeable || isExiting) return;
+    // Don't drag if clicking buttons or interactive elements
+    if (e.target.closest('button') || e.target.closest('a')) return;
+    if (e.button !== undefined && e.button !== 0) return; // Only primary mouse button
+
+    isPointerDownRef.current = true;
+    startXRef.current = e.clientX;
+    setIsDragging(true);
+
+    // Pause timer while swiping
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      const elapsed = Date.now() - (startTimeRef.current || Date.now());
+      remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
+    }
+    try {
+      e.currentTarget.setPointerCapture(e.pointerId);
+    } catch (err) {
+      // Ignore if setPointerCapture not supported
+    }
+  };
+  const handlePointerMove = e => {
+    if (!isPointerDownRef.current || !isDragging) return;
+    const currentX = e.clientX;
+    const diff = currentX - startXRef.current;
+    setDragOffset(diff);
+  };
+  const handlePointerUp = e => {
+    if (!isPointerDownRef.current) return;
+    isPointerDownRef.current = false;
+    setIsDragging(false);
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId);
+    } catch (err) {
+      // Ignore
+    }
+
+    // Check if swipe distance exceeded threshold
+    if (dragOffset >= swipeThreshold) {
+      // Swiped Right
+      if (hasAcceptAction) {
+        handleAccept();
+      } else {
+        if (onCancel) onCancel(id);
+        handleDismiss('right');
+      }
+    } else if (dragOffset <= -swipeThreshold) {
+      // Swiped Left
+      if (onCancel) onCancel(id);
+      handleDismiss('left');
+    } else {
+      // Reset back to center
+      setDragOffset(0);
+      setIsPaused(false);
+    }
+  };
+  const handlePointerCancel = () => {
+    isPointerDownRef.current = false;
+    setIsDragging(false);
+    setDragOffset(0);
+    setIsPaused(false);
+  };
+
+  // Resolve appropriate icon
+  const renderIcon = () => {
+    if (icon === false) return null;
+    if (icon && /*#__PURE__*/React.isValidElement(icon)) {
+      return /*#__PURE__*/jsx("span", {
+        className: "easy-toast-custom-icon",
+        children: icon
+      });
+    }
+    switch (type) {
+      case 'success':
+        return /*#__PURE__*/jsx(SuccessIcon, {});
+      case 'error':
+        return /*#__PURE__*/jsx(ErrorIcon, {});
+      case 'warning':
+        return /*#__PURE__*/jsx(WarningIcon, {});
+      case 'info':
+        return /*#__PURE__*/jsx(InfoIcon, {});
+      case 'loading':
+        return /*#__PURE__*/jsx(LoadingIcon, {});
+      default:
+        return null;
+    }
+  };
+  const hasIcon = icon !== false && (icon || type !== 'default');
+  const hasProgressBar = showProgressBar && duration && duration !== Infinity && duration > 0;
+
+  // Compute inline drag transform
+  const getDragStyle = () => {
+    if (isDragging) {
+      return {
+        transform: `translateX(${dragOffset}px)`,
+        transition: 'none',
+        opacity: Math.max(0.45, 1 - Math.abs(dragOffset) / 280)
+      };
+    }
+    if (exitDirection === 'left') {
+      return {
+        transform: 'translateX(-115%) scale(0.9)',
+        opacity: 0,
+        transition: 'transform 0.28s cubic-bezier(0.4, 0, 1, 1), opacity 0.28s ease'
+      };
+    }
+    if (exitDirection === 'right') {
+      return {
+        transform: 'translateX(115%) scale(0.9)',
+        opacity: 0,
+        transition: 'transform 0.28s cubic-bezier(0.4, 0, 1, 1), opacity 0.28s ease'
+      };
+    }
+    return {
+      transition: 'transform 0.24s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease'
+    };
+  };
+
+  // Visual cues during swipe
+  const isSwipingAccept = dragOffset > 25 && hasAcceptAction;
+  const isSwipingDismissRight = dragOffset > 25 && !hasAcceptAction;
+  const isSwipingCancel = dragOffset < -25;
+  return /*#__PURE__*/jsxs("div", {
+    role: type === 'error' ? 'alert' : 'status',
+    "aria-live": type === 'error' ? 'assertive' : 'polite',
+    className: `easy-toast-item easy-toast--${type} easy-toast--theme-${theme} ${isExiting ? 'easy-toast--exit' : 'easy-toast--enter'} ${swipeable ? 'easy-toast--swipeable' : ''} ${isDragging ? 'easy-toast--dragging' : ''} ${isSwipingAccept ? 'easy-toast--swipe-accept' : ''} ${isSwipingCancel || isSwipingDismissRight ? 'easy-toast--swipe-cancel' : ''} ${className}`,
+    style: {
+      ...style,
+      ...getDragStyle()
+    },
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerCancel,
+    children: [isSwipingAccept && /*#__PURE__*/jsxs("div", {
+      className: "easy-toast-swipe-badge easy-toast-swipe-badge--accept",
+      children: ["\u2713 ", resolvedAcceptLabel]
+    }), (isSwipingCancel || isSwipingDismissRight) && /*#__PURE__*/jsxs("div", {
+      className: "easy-toast-swipe-badge easy-toast-swipe-badge--cancel",
+      children: ["\u2715 ", cancelLabel]
+    }), /*#__PURE__*/jsxs("div", {
+      className: "easy-toast-content-wrapper",
+      children: [hasIcon && /*#__PURE__*/jsx("div", {
+        className: "easy-toast-icon-container",
+        children: renderIcon()
+      }), /*#__PURE__*/jsxs("div", {
+        className: "easy-toast-text-container",
+        children: [title && /*#__PURE__*/jsx("div", {
+          className: "easy-toast-title",
+          children: title
+        }), /*#__PURE__*/jsx("div", {
+          className: "easy-toast-message",
+          children: message
+        })]
+      }), action && /*#__PURE__*/jsx("div", {
+        className: "easy-toast-action-container",
+        children: /*#__PURE__*/jsx("button", {
+          type: "button",
+          className: "easy-toast-action-button",
+          onClick: () => {
+            action.onClick?.(id);
+            if (action.dismissOnClick !== false) {
+              handleDismiss('right');
+            }
+          },
+          children: action.label
+        })
+      }), closeButton && /*#__PURE__*/jsx("button", {
+        type: "button",
+        className: "easy-toast-close-button",
+        "aria-label": "Close notification",
+        onClick: () => handleDismiss(),
+        children: /*#__PURE__*/jsx(CloseIcon, {})
+      })]
+    }), hasProgressBar && /*#__PURE__*/jsx("div", {
+      className: "easy-toast-progress-bar-track",
+      children: /*#__PURE__*/jsx("div", {
+        className: "easy-toast-progress-bar",
+        style: {
+          animationDuration: `${duration}ms`,
+          animationPlayState: isPaused || isDragging ? 'paused' : 'running'
+        }
+      })
+    })]
+  });
+};
+
+const VALID_POSITIONS = ['top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'];
+
+/**
+ * ToastContainer Component
+ * Renders toast groups in their respective screen positions via a React Portal.
+ */
+const ToastContainer = ({
+  toasts = [],
+  onDismiss,
+  position: defaultPosition = 'top-right',
+  theme: defaultTheme = 'light',
+  newestOnTop = false,
+  pauseOnHover = true,
+  showProgressBar = true,
+  swipeable = true,
+  swipeThreshold = 70,
+  limit,
+  className = '',
+  style = {}
+}) => {
+  // Guard for SSR (Next.js, Gatsby, Remix)
+  const isMounted = typeof window !== 'undefined' && typeof document !== 'undefined';
+  if (!isMounted) {
+    return null;
+  }
+
+  // Filter toasts if limit is set
+  const visibleToasts = limit && limit > 0 ? toasts.slice(-limit) : toasts;
+
+  // Group toasts by position
+  const groupedToasts = visibleToasts.reduce((acc, toast) => {
+    const pos = toast.position || defaultPosition;
+    const validPos = VALID_POSITIONS.includes(pos) ? pos : 'top-right';
+    if (!acc[validPos]) {
+      acc[validPos] = [];
+    }
+    acc[validPos].push(toast);
+    return acc;
+  }, {});
+  const portalContent = /*#__PURE__*/jsx("div", {
+    className: `easy-toast-portal ${className}`,
+    style: style,
+    children: Object.entries(groupedToasts).map(([pos, items]) => {
+      const sortedItems = newestOnTop ? [...items].reverse() : items;
+      return /*#__PURE__*/jsx("div", {
+        className: `easy-toast-container easy-toast-container--${pos}`,
+        "aria-live": "polite",
+        children: sortedItems.map(toast => /*#__PURE__*/jsx(ToastItem, {
+          ...toast,
+          pauseOnHover: toast.pauseOnHover ?? pauseOnHover,
+          showProgressBar: toast.showProgressBar ?? showProgressBar,
+          swipeable: toast.swipeable ?? swipeable,
+          swipeThreshold: toast.swipeThreshold ?? swipeThreshold,
+          theme: toast.theme || defaultTheme,
+          onDismiss: onDismiss
+        }, toast.id))
+      }, pos);
+    })
+  });
+  return /*#__PURE__*/createPortal(portalContent, document.body);
+};
+
+const ToastContext = /*#__PURE__*/createContext(null);
+let toastCount = 0;
+const generateId = () => {
+  toastCount += 1;
+  return `easy-toast-${Date.now()}-${toastCount}`;
+};
+
+/**
+ * ToastProvider Component
+ * Wraps your application to provide toast functionality anywhere in the component tree.
+ */
+const ToastProvider = ({
+  children,
+  position = 'top-right',
+  autoClose = 3000,
+  pauseOnHover = true,
+  showProgressBar = true,
+  swipeable = true,
+  swipeThreshold = 70,
+  theme = 'light',
+  limit,
+  newestOnTop = false,
+  containerClassName = '',
+  containerStyle = {}
+}) => {
+  const [toasts, setToasts] = useState([]);
+  const toastsRef = useRef(toasts);
+  toastsRef.current = toasts;
+
+  // Add a new toast
+  const addToast = useCallback((messageOrOptions, maybeOptions = {}) => {
+    let options = {};
+    if (typeof messageOrOptions === 'object' && ! /*#__PURE__*/React.isValidElement(messageOrOptions)) {
+      options = {
+        ...messageOrOptions
+      };
+    } else {
+      options = {
+        ...maybeOptions,
+        message: messageOrOptions
+      };
+    }
+    const id = options.id || generateId();
+    const newToast = {
+      id,
+      type: options.type || 'default',
+      message: options.message,
+      title: options.title,
+      duration: options.duration !== undefined ? options.duration : autoClose,
+      showProgressBar: options.showProgressBar !== undefined ? options.showProgressBar : showProgressBar,
+      pauseOnHover: options.pauseOnHover !== undefined ? options.pauseOnHover : pauseOnHover,
+      swipeable: options.swipeable !== undefined ? options.swipeable : swipeable,
+      swipeThreshold: options.swipeThreshold !== undefined ? options.swipeThreshold : swipeThreshold,
+      closeButton: options.closeButton !== undefined ? options.closeButton : true,
+      icon: options.icon,
+      action: options.action,
+      onClose: options.onClose,
+      onAccept: options.onAccept,
+      onCancel: options.onCancel,
+      acceptLabel: options.acceptLabel,
+      cancelLabel: options.cancelLabel,
+      position: options.position || position,
+      theme: options.theme || theme,
+      className: options.className || '',
+      style: options.style || {}
+    };
+    setToasts(prev => {
+      // If updating an existing toast with same id
+      const existingIndex = prev.findIndex(t => t.id === id);
+      if (existingIndex > -1) {
+        const updated = [...prev];
+        updated[existingIndex] = {
+          ...updated[existingIndex],
+          ...newToast
+        };
+        return updated;
+      }
+
+      // Apply limit if specified
+      if (limit && limit > 0 && prev.length >= limit) {
+        return [...prev.slice(prev.length - limit + 1), newToast];
+      }
+      return [...prev, newToast];
+    });
+    return id;
+  }, [autoClose, showProgressBar, pauseOnHover, position, theme, limit]);
+
+  // Update an existing toast (e.g. for promises)
+  const updateToast = useCallback((id, updatedOptions) => {
+    setToasts(prev => prev.map(t => {
+      if (t.id === id) {
+        return {
+          ...t,
+          ...updatedOptions,
+          id // preserve id
+        };
+      }
+      return t;
+    }));
+  }, []);
+
+  // Dismiss a specific toast
+  const dismissToast = useCallback(id => {
+    setToasts(prev => prev.filter(t => t.id !== id));
+  }, []);
+
+  // Dismiss all toasts
+  const dismissAll = useCallback(() => {
+    setToasts([]);
+  }, []);
+
+  // Context value with core functions
+  const contextValue = useMemo(() => ({
+    addToast,
+    updateToast,
+    dismissToast,
+    dismissAll,
+    toasts
+  }), [addToast, updateToast, dismissToast, dismissAll, toasts]);
+  return /*#__PURE__*/jsxs(ToastContext.Provider, {
+    value: contextValue,
+    children: [children, /*#__PURE__*/jsx(ToastContainer, {
+      toasts: toasts,
+      onDismiss: dismissToast,
+      position: position,
+      theme: theme,
+      limit: limit,
+      newestOnTop: newestOnTop,
+      pauseOnHover: pauseOnHover,
+      showProgressBar: showProgressBar,
+      swipeable: swipeable,
+      swipeThreshold: swipeThreshold,
+      className: containerClassName,
+      style: containerStyle
+    })]
+  });
+};
+
+/**
+ * Custom Hook: useToast
+ * Exposes an intuitive API to trigger and manage toast notifications.
+ *
+ * Example:
+ * const toast = useToast();
+ * toast.success('Profile updated!');
+ * toast.error('Something went wrong');
+ */
+const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a <ToastProvider>. Please wrap your root component in <ToastProvider>.');
+  }
+  const {
+    addToast,
+    updateToast,
+    dismissToast,
+    dismissAll
+  } = context;
+
+  // Base callable toast function
+  const toast = useCallback((message, options) => {
+    return addToast(message, options);
+  }, [addToast]);
+
+  // Helper: toast.success
+  toast.success = useCallback((message, options = {}) => {
+    return addToast(message, {
+      ...options,
+      type: 'success'
+    });
+  }, [addToast]);
+
+  // Helper: toast.error
+  toast.error = useCallback((message, options = {}) => {
+    return addToast(message, {
+      ...options,
+      type: 'error'
+    });
+  }, [addToast]);
+
+  // Helper: toast.warning
+  toast.warning = useCallback((message, options = {}) => {
+    return addToast(message, {
+      ...options,
+      type: 'warning'
+    });
+  }, [addToast]);
+
+  // Helper: toast.info
+  toast.info = useCallback((message, options = {}) => {
+    return addToast(message, {
+      ...options,
+      type: 'info'
+    });
+  }, [addToast]);
+
+  // Helper: toast.loading
+  toast.loading = useCallback((message, options = {}) => {
+    return addToast(message, {
+      ...options,
+      type: 'loading',
+      duration: false,
+      // does not auto-dismiss
+      showProgressBar: false
+    });
+  }, [addToast]);
+
+  // Helper: toast.promise
+  toast.promise = useCallback((promise, messages, options = {}) => {
+    const id = toast.loading(messages.loading || 'Loading...', options);
+    const p = promise instanceof Promise ? promise : Promise.resolve(promise);
+    p.then(result => {
+      const successMsg = typeof messages.success === 'function' ? messages.success(result) : messages.success || 'Success!';
+      updateToast(id, {
+        type: 'success',
+        message: successMsg,
+        duration: options.duration !== undefined ? options.duration : 3000,
+        showProgressBar: options.showProgressBar !== undefined ? options.showProgressBar : true,
+        ...options.successOptions
+      });
+    }).catch(err => {
+      const errorMsg = typeof messages.error === 'function' ? messages.error(err) : messages.error || 'Something went wrong';
+      updateToast(id, {
+        type: 'error',
+        message: errorMsg,
+        duration: options.duration !== undefined ? options.duration : 4000,
+        showProgressBar: options.showProgressBar !== undefined ? options.showProgressBar : true,
+        ...options.errorOptions
+      });
+    });
+    return p;
+  }, [toast, updateToast]);
+
+  // Programmatic dismiss
+  toast.dismiss = dismissToast;
+  toast.dismissAll = dismissAll;
+  toast.update = updateToast;
+  return toast;
+};
+
+export { CloseIcon, ErrorIcon, InfoIcon, LoadingIcon, SuccessIcon, ToastContainer, ToastContext, ToastItem, ToastProvider, WarningIcon, useToast };
+//# sourceMappingURL=index.esm.js.map