@cookified/toastify 1.0.0

package/dist/index.js

@@ -0,0 +1,742 @@
+// src/toastify/Toaster.tsx
+import { AnimatePresence, motion as motion4 } from "motion/react";
+import { useEffect, useRef, useState } from "react";
+
+// src/toastify/Toast.tsx
+import { Check, Loader2, X } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function DefaultToastIcon({ type }) {
+  const badgeClasses = "flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-neutral-900 text-white shadow-xs dark:bg-white dark:text-neutral-950";
+  switch (type) {
+    case "loading":
+      return /* @__PURE__ */ jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsx(Loader2, { size: 12, strokeWidth: 2.5, className: "animate-spin" }) });
+    case "success":
+      return /* @__PURE__ */ jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsx(Check, { size: 12, strokeWidth: 2.5 }) });
+    case "error":
+      return /* @__PURE__ */ jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsx(X, { size: 12, strokeWidth: 2.5 }) });
+    case "warning":
+      return /* @__PURE__ */ jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "12",
+          height: "12",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2.5,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+            /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+          ]
+        }
+      ) });
+    case "info":
+    case "neutral":
+    default:
+      return /* @__PURE__ */ jsx("span", { className: badgeClasses, children: /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          width: "12",
+          height: "12",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2.5,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+            /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+          ]
+        }
+      ) });
+  }
+}
+function Toast({
+  toast: toast2,
+  onDismiss,
+  closeOnClick = false,
+  globalIcons,
+  globalOptions
+}) {
+  if (toast2.customRenderer) {
+    return /* @__PURE__ */ jsx(Fragment, { children: toast2.customRenderer(toast2.id) });
+  }
+  const icon = toast2.icon ?? globalIcons?.[toast2.type] ?? /* @__PURE__ */ jsx(DefaultToastIcon, { type: toast2.type });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      onClick: () => closeOnClick && onDismiss(),
+      className: `toastify-toast flex h-14 w-full select-none items-center justify-between gap-3 rounded-md border border-neutral-200/90 bg-white px-3.5 shadow-md shadow-neutral-950/5 dark:border-neutral-800/90 dark:bg-neutral-900 dark:shadow-neutral-950/40 ${globalOptions?.className ?? ""} ${toast2.className ?? ""}`,
+      style: { ...globalOptions?.style, ...toast2.style },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
+          icon,
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col justify-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "truncate text-[13px] font-medium leading-4 text-neutral-900 dark:text-neutral-100", children: toast2.title }),
+            toast2.description && /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-[12px] leading-4 text-neutral-500 dark:text-neutral-400", children: toast2.description })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+          toast2.cancel && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (event) => {
+                event.stopPropagation();
+                try {
+                  toast2.cancel?.onClick(event);
+                } catch (err) {
+                  console.error("Toast cancel handler failed:", err);
+                }
+                onDismiss();
+              },
+              className: "cursor-pointer rounded px-2 py-1 text-xs font-medium text-neutral-600 transition-colors hover:bg-neutral-100 hover:text-neutral-900 dark:text-neutral-400 dark:hover:bg-neutral-800 dark:hover:text-neutral-100",
+              children: toast2.cancel.label
+            }
+          ),
+          toast2.action && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: (event) => {
+                event.stopPropagation();
+                try {
+                  toast2.action?.onClick(event);
+                } catch (err) {
+                  console.error("Toast action handler failed:", err);
+                }
+                onDismiss();
+              },
+              className: "cursor-pointer rounded px-2.5 py-1 text-xs font-medium bg-neutral-900 text-white transition-all hover:bg-neutral-800 shadow-[inset_0_-2px_4px_rgba(0,0,0,0.5),0_1px_2px_rgba(0,0,0,0.08)] active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)] dark:bg-neutral-100 dark:text-neutral-900 dark:hover:bg-neutral-200 dark:shadow-[inset_0_-2px_4px_rgba(0,0,0,0.22),0_1px_2px_rgba(0,0,0,0.15)] dark:active:shadow-[inset_0_2px_4px_rgba(0,0,0,0.25)]",
+              children: toast2.action.label
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/toastify/animations/FadeAnimation.tsx
+import { motion } from "motion/react";
+
+// src/toastify/animations/constants.ts
+var defaultSpring = {
+  stiffness: 220,
+  damping: 26,
+  mass: 1
+};
+
+// src/toastify/animations/FadeAnimation.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function FadeAnimation({
+  index,
+  position,
+  isDismissing,
+  onDismiss,
+  springConfig = defaultSpring,
+  children
+}) {
+  const isTop = position.startsWith("top");
+  const stackStep = 66;
+  const targetY = isTop ? index * stackStep : -index * stackStep;
+  return /* @__PURE__ */ jsx2(
+    motion.article,
+    {
+      role: "status",
+      "aria-live": "polite",
+      initial: {
+        opacity: 0,
+        scale: 0.9,
+        y: targetY,
+        filter: "blur(4px)"
+      },
+      animate: {
+        opacity: isDismissing ? 0 : 1,
+        scale: isDismissing ? 0.9 : 1,
+        y: targetY,
+        filter: isDismissing ? "blur(4px)" : "blur(0px)",
+        zIndex: 50 - index,
+        pointerEvents: !isDismissing ? "auto" : "none"
+      },
+      exit: {
+        opacity: 0,
+        scale: 0.9,
+        filter: "blur(4px)",
+        transition: {
+          duration: 0.22,
+          ease: "easeOut"
+        }
+      },
+      transition: {
+        type: "spring",
+        ...springConfig
+      },
+      drag: "x",
+      dragConstraints: { left: 0, right: 0 },
+      dragElastic: 0.6,
+      onDragEnd: (_, info) => {
+        if (Math.abs(info.offset.x) > 60 || Math.abs(info.velocity.x) > 500) {
+          onDismiss();
+        }
+      },
+      className: "absolute h-14 w-full select-none cursor-grab active:cursor-grabbing",
+      style: {
+        [isTop ? "top" : "bottom"]: 0,
+        left: 0,
+        right: 0
+      },
+      children
+    }
+  );
+}
+
+// src/toastify/animations/FolderStackAnimation.tsx
+import { motion as motion2 } from "motion/react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function FolderStackAnimation({
+  index,
+  isHovered,
+  position,
+  isDismissing,
+  onDismiss,
+  springConfig = defaultSpring,
+  children
+}) {
+  const isTop = position.startsWith("top");
+  const isCenter = position.endsWith("center");
+  const isLeft = position.endsWith("left");
+  const collapsed = !isHovered;
+  const isVisible = !collapsed || index < 3;
+  const stackStep = 66;
+  const offset = collapsed ? index * 10 : index * stackStep;
+  const targetY = isTop ? offset : -offset;
+  const targetScale = collapsed ? Math.max(0.88, 1 - index * 0.05) : 1;
+  const targetOpacity = !isVisible ? 0 : collapsed ? index === 0 ? 1 : index === 1 ? 0.94 : 0.84 : 1;
+  const exitX = isCenter ? 0 : isLeft ? -36 : 36;
+  return /* @__PURE__ */ jsx3(
+    motion2.article,
+    {
+      role: "status",
+      "aria-live": "polite",
+      initial: {
+        opacity: 0,
+        x: 0,
+        y: isTop ? targetY - 14 : targetY + 14,
+        scale: 0.94
+      },
+      animate: {
+        opacity: isDismissing ? 0 : targetOpacity,
+        x: isDismissing ? exitX : 0,
+        y: targetY,
+        scale: isDismissing ? 0.94 : targetScale,
+        zIndex: 50 - index,
+        pointerEvents: !isDismissing && isVisible ? "auto" : "none"
+      },
+      exit: {
+        opacity: 0,
+        x: exitX,
+        scale: 0.94,
+        transition: {
+          duration: 0.24,
+          ease: [0.16, 1, 0.3, 1]
+        }
+      },
+      transition: {
+        type: "spring",
+        ...springConfig
+      },
+      drag: index === 0 || isHovered ? "x" : false,
+      dragConstraints: { left: 0, right: 0 },
+      dragElastic: 0.6,
+      onDragEnd: (_, info) => {
+        if (Math.abs(info.offset.x) > 60 || Math.abs(info.velocity.x) > 500) {
+          onDismiss();
+        }
+      },
+      className: "absolute h-14 w-full select-none cursor-grab active:cursor-grabbing",
+      style: {
+        [isTop ? "top" : "bottom"]: 0,
+        left: 0,
+        right: 0,
+        transformOrigin: isTop ? "top center" : "bottom center"
+      },
+      children
+    }
+  );
+}
+
+// src/toastify/animations/SlideAnimation.tsx
+import { motion as motion3 } from "motion/react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function SlideAnimation({
+  index,
+  position,
+  isDismissing,
+  onDismiss,
+  springConfig = defaultSpring,
+  children
+}) {
+  const isTop = position.startsWith("top");
+  const isCenter = position.endsWith("center");
+  const isLeft = position.endsWith("left");
+  const stackStep = 66;
+  const targetY = isTop ? index * stackStep : -index * stackStep;
+  const entryX = isCenter ? 0 : isLeft ? -120 : 120;
+  const exitX = isCenter ? 0 : isLeft ? -140 : 140;
+  const initialY = isCenter ? isTop ? targetY - 30 : targetY + 30 : targetY;
+  return /* @__PURE__ */ jsx4(
+    motion3.article,
+    {
+      role: "status",
+      "aria-live": "polite",
+      initial: {
+        opacity: 0,
+        x: entryX,
+        y: initialY,
+        scale: 0.95
+      },
+      animate: {
+        opacity: isDismissing ? 0 : 1,
+        x: isDismissing ? exitX : 0,
+        y: targetY,
+        scale: 1,
+        zIndex: 50 - index,
+        pointerEvents: !isDismissing ? "auto" : "none"
+      },
+      exit: {
+        opacity: 0,
+        x: exitX,
+        scale: 0.95,
+        transition: {
+          duration: 0.22,
+          ease: [0.16, 1, 0.3, 1]
+        }
+      },
+      transition: {
+        type: "spring",
+        ...springConfig
+      },
+      drag: "x",
+      dragConstraints: { left: 0, right: 0 },
+      dragElastic: 0.6,
+      onDragEnd: (_, info) => {
+        if (Math.abs(info.offset.x) > 60 || Math.abs(info.velocity.x) > 500) {
+          onDismiss();
+        }
+      },
+      className: "absolute h-14 w-full select-none cursor-grab active:cursor-grabbing",
+      style: {
+        [isTop ? "top" : "bottom"]: 0,
+        left: 0,
+        right: 0
+      },
+      children
+    }
+  );
+}
+
+// src/toastify/animations/index.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function ToastAnimation({
+  animation = "stack",
+  ...props
+}) {
+  if (typeof animation === "function") {
+    const CustomAnimation = animation;
+    return /* @__PURE__ */ jsx5(CustomAnimation, { ...props });
+  }
+  if (animation === "slide") {
+    return /* @__PURE__ */ jsx5(SlideAnimation, { ...props });
+  }
+  if (animation === "fade") {
+    return /* @__PURE__ */ jsx5(FadeAnimation, { ...props });
+  }
+  return /* @__PURE__ */ jsx5(FolderStackAnimation, { ...props });
+}
+
+// src/toastify/store.ts
+var MAX_TOASTS = 30;
+var toasts = [];
+var listeners = /* @__PURE__ */ new Set();
+function generateId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+function sanitizeDuration(duration) {
+  if (duration === false) return false;
+  if (typeof duration === "number") {
+    return Number.isFinite(duration) && duration >= 0 ? duration : 3500;
+  }
+  return void 0;
+}
+function emit() {
+  const snapshot = [...toasts];
+  listeners.forEach((listener) => {
+    try {
+      listener(snapshot);
+    } catch (err) {
+      console.error("Toast listener threw an error:", err);
+    }
+  });
+}
+function subscribe(listener) {
+  listeners.add(listener);
+  try {
+    listener([...toasts]);
+  } catch (err) {
+    console.error("Initial toast listener threw an error:", err);
+  }
+  return () => {
+    listeners.delete(listener);
+  };
+}
+function remove(id) {
+  if (id) {
+    toasts = toasts.filter((toast2) => toast2.id !== id);
+  } else {
+    toasts = [];
+  }
+  emit();
+}
+function update(id, updates) {
+  toasts = toasts.map(
+    (toast2) => toast2.id === id ? { ...toast2, ...updates } : toast2
+  );
+  emit();
+}
+function create(type, title, options = {}) {
+  const id = options.id ?? generateId();
+  const duration = sanitizeDuration(options.autoClose ?? options.duration);
+  const existing = toasts.find((t) => t.id === id);
+  if (existing) {
+    update(id, {
+      type,
+      title,
+      description: options.description,
+      action: options.action,
+      cancel: options.cancel,
+      icon: options.icon,
+      className: options.className,
+      style: options.style,
+      duration
+    });
+    return id;
+  }
+  const toastItem = {
+    id,
+    type,
+    title,
+    description: options.description,
+    action: options.action,
+    cancel: options.cancel,
+    icon: options.icon,
+    className: options.className,
+    style: options.style,
+    duration,
+    createdAt: Date.now()
+  };
+  toasts = [toastItem, ...toasts].slice(0, MAX_TOASTS);
+  emit();
+  return id;
+}
+function promise(promiseOrFn, options) {
+  const id = create("loading", options.loading, {
+    duration: false
+  });
+  const p = typeof promiseOrFn === "function" ? promiseOrFn() : promiseOrFn;
+  const promiseChain = p.then((data) => {
+    let successTitle;
+    try {
+      successTitle = typeof options.success === "function" ? options.success(data) : options.success;
+    } catch {
+      successTitle = "Completed successfully";
+    }
+    let description;
+    if (options.description) {
+      try {
+        description = typeof options.description === "function" ? options.description(data) : options.description;
+      } catch {
+        description = void 0;
+      }
+    }
+    update(id, {
+      type: "success",
+      title: successTitle,
+      description,
+      action: options.action,
+      cancel: options.cancel,
+      duration: 3500
+    });
+    return data;
+  }).catch((err) => {
+    let errorTitle;
+    try {
+      errorTitle = typeof options.error === "function" ? options.error(err) : options.error;
+    } catch {
+      errorTitle = "An error occurred";
+    }
+    update(id, {
+      type: "error",
+      title: errorTitle,
+      action: options.action,
+      cancel: options.cancel,
+      duration: 4e3
+    });
+    return Promise.reject(err);
+  });
+  promiseChain.catch(() => {
+  });
+  return promiseChain;
+}
+var toastStore = {
+  subscribe,
+  remove,
+  update,
+  getToasts: () => [...toasts]
+};
+function toastFn(title, options) {
+  return create("neutral", title, options);
+}
+var toast = Object.assign(toastFn, {
+  show(title, options) {
+    return create("neutral", title, options);
+  },
+  success(title, options) {
+    return create("success", title, options);
+  },
+  error(title, options) {
+    return create("error", title, options);
+  },
+  warning(title, options) {
+    return create("warning", title, options);
+  },
+  info(title, options) {
+    return create("info", title, options);
+  },
+  loading(title, options) {
+    return create("loading", title, { ...options, duration: false });
+  },
+  custom(renderer, options = {}) {
+    const id = options.id ?? generateId();
+    const duration = sanitizeDuration(options.autoClose ?? options.duration);
+    const toastItem = {
+      id,
+      type: "custom",
+      title: "",
+      customRenderer: renderer,
+      duration,
+      className: options.className,
+      style: options.style,
+      createdAt: Date.now()
+    };
+    toasts = [toastItem, ...toasts].slice(0, MAX_TOASTS);
+    emit();
+    return id;
+  },
+  promise,
+  dismiss(id) {
+    remove(id);
+  },
+  update(id, options) {
+    update(id, options);
+  }
+});
+
+// src/toastify/Toaster.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var positionClasses = {
+  "top-left": "top-6 left-6",
+  "top-center": "top-6 left-0 right-0 mx-auto",
+  "top-right": "top-6 right-6",
+  "bottom-left": "bottom-6 left-6",
+  "bottom-center": "bottom-6 left-0 right-0 mx-auto",
+  "bottom-right": "bottom-6 right-6"
+};
+function ToasterItem({
+  toast: toast2,
+  index,
+  totalToasts,
+  isHovered,
+  position,
+  duration = 3500,
+  autoClose,
+  closeOnClick = false,
+  animation = "stack",
+  springConfig,
+  icons,
+  toastOptions,
+  onDismiss
+}) {
+  const itemDuration = toast2.type === "loading" ? false : toast2.duration !== void 0 ? toast2.duration : toastOptions?.duration !== void 0 ? toastOptions.duration : autoClose ?? duration;
+  const onDismissRef = useRef(onDismiss);
+  useEffect(() => {
+    onDismissRef.current = onDismiss;
+  }, [onDismiss]);
+  const [isDismissing, setIsDismissing] = useState(false);
+  const handleDismiss = () => {
+    setIsDismissing(true);
+    onDismissRef.current();
+  };
+  const remainingTimeRef = useRef(itemDuration);
+  useEffect(() => {
+    remainingTimeRef.current = itemDuration;
+  }, [itemDuration]);
+  useEffect(() => {
+    if (itemDuration === false || isHovered) {
+      return;
+    }
+    const startTime = Date.now();
+    const currentRemaining = remainingTimeRef.current === false ? itemDuration : remainingTimeRef.current;
+    const timer = window.setTimeout(() => {
+      handleDismiss();
+    }, currentRemaining);
+    return () => {
+      window.clearTimeout(timer);
+      if (remainingTimeRef.current !== false) {
+        const elapsed = Date.now() - startTime;
+        remainingTimeRef.current = Math.max(0, remainingTimeRef.current - elapsed);
+      }
+    };
+  }, [isHovered, itemDuration]);
+  return /* @__PURE__ */ jsx6(
+    ToastAnimation,
+    {
+      animation,
+      toast: toast2,
+      index,
+      totalToasts,
+      isHovered,
+      position,
+      isDismissing,
+      onDismiss: handleDismiss,
+      springConfig,
+      children: /* @__PURE__ */ jsx6(
+        Toast,
+        {
+          toast: toast2,
+          onDismiss: handleDismiss,
+          closeOnClick,
+          globalIcons: icons,
+          globalOptions: toastOptions
+        }
+      )
+    }
+  );
+}
+function Toaster({
+  position = "bottom-right",
+  duration = 3500,
+  autoClose,
+  theme = "light",
+  className,
+  style,
+  visibleToasts = 5,
+  closeOnClick = false,
+  animation = "stack",
+  springConfig,
+  icons,
+  toastOptions
+}) {
+  const [toasts2, setToasts] = useState([]);
+  const [isHovered, setIsHovered] = useState(false);
+  const [hoverExpandedCount, setHoverExpandedCount] = useState(null);
+  const leaveTimeoutRef = useRef(null);
+  useEffect(() => toastStore.subscribe(setToasts), []);
+  const isTop = position.startsWith("top");
+  const hasToasts = toasts2.length > 0;
+  const activeCount = Math.min(toasts2.length, visibleToasts);
+  const effectiveCount = isHovered && hoverExpandedCount !== null ? Math.max(activeCount, hoverExpandedCount) : activeCount;
+  const containerHeight = hasToasts && isHovered && effectiveCount > 0 ? (effectiveCount - 1) * 66 + 56 : 56;
+  const handleMouseEnter = () => {
+    if (leaveTimeoutRef.current) {
+      window.clearTimeout(leaveTimeoutRef.current);
+      leaveTimeoutRef.current = null;
+    }
+    setHoverExpandedCount((prev) => Math.max(prev ?? 0, activeCount));
+    setIsHovered(true);
+  };
+  const handleMouseLeave = () => {
+    leaveTimeoutRef.current = window.setTimeout(() => {
+      setIsHovered(false);
+      setHoverExpandedCount(null);
+    }, 140);
+  };
+  useEffect(() => {
+    return () => {
+      if (leaveTimeoutRef.current) {
+        window.clearTimeout(leaveTimeoutRef.current);
+      }
+    };
+  }, []);
+  return /* @__PURE__ */ jsx6(
+    motion4.div,
+    {
+      "data-toastify-toaster": "true",
+      role: "region",
+      "aria-label": "Notifications",
+      "aria-live": "polite",
+      tabIndex: -1,
+      className: `toastify-toaster fixed z-50 w-[356px] max-w-[calc(100vw-32px)] ${hasToasts ? "pointer-events-auto" : "pointer-events-none"} ${positionClasses[position]} ${theme === "dark" ? "dark" : ""} ${className ?? ""}`,
+      style,
+      animate: {
+        height: containerHeight
+      },
+      transition: {
+        type: "spring",
+        stiffness: 220,
+        damping: 26,
+        mass: 1,
+        ...springConfig
+      },
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      children: /* @__PURE__ */ jsx6(
+        "div",
+        {
+          className: `relative w-full h-full flex ${isTop ? "flex-col" : "flex-col-reverse"}`,
+          children: /* @__PURE__ */ jsx6(AnimatePresence, { children: toasts2.slice(0, visibleToasts).map((toastItem, index) => /* @__PURE__ */ jsx6(
+            ToasterItem,
+            {
+              toast: toastItem,
+              index,
+              totalToasts: toasts2.length,
+              isHovered,
+              position,
+              duration,
+              autoClose,
+              closeOnClick,
+              animation,
+              springConfig,
+              icons,
+              toastOptions,
+              onDismiss: () => toastStore.remove(toastItem.id)
+            },
+            toastItem.id
+          )) })
+        }
+      )
+    }
+  );
+}
+var ToastContainer = Toaster;
+export {
+  DefaultToastIcon,
+  FadeAnimation,
+  FolderStackAnimation,
+  SlideAnimation,
+  Toast,
+  ToastAnimation,
+  ToastContainer,
+  Toaster,
+  defaultSpring,
+  toast,
+  toastStore
+};