@cookified/toastify 1.0.0 → 1.0.2

package/lib/index.css

@@ -0,0 +1,312 @@
+/* Toastify Standalone CSS */
+@keyframes toastify-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.toastify-spin {
+  animation: toastify-spin 1s linear infinite;
+}
+
+.toastify-toaster {
+  position: fixed;
+  z-index: 9999;
+  width: 356px;
+  max-width: calc(100vw - 32px);
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+.toastify-toaster *,
+.toastify-toaster *::before,
+.toastify-toaster *::after {
+  box-sizing: border-box;
+}
+
+/* Positions */
+.toastify-pos-top-left {
+  top: 24px;
+  left: 24px;
+}
+.toastify-pos-top-center {
+  top: 24px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+.toastify-pos-top-right {
+  top: 24px;
+  right: 24px;
+}
+.toastify-pos-bottom-left {
+  bottom: 24px;
+  left: 24px;
+}
+.toastify-pos-bottom-center {
+  bottom: 24px;
+  left: 0;
+  right: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+.toastify-pos-bottom-right {
+  bottom: 24px;
+  right: 24px;
+}
+
+.toastify-pointer-auto {
+  pointer-events: auto;
+}
+.toastify-pointer-none {
+  pointer-events: none;
+}
+
+/* Toast List Container */
+.toastify-list {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.toastify-list-col {
+  flex-direction: column;
+}
+.toastify-list-col-reverse {
+  flex-direction: column-reverse;
+}
+
+/* Individual Toast Item wrapper */
+.toastify-item {
+  position: absolute;
+  height: 56px;
+  width: 100%;
+  user-select: none;
+  cursor: grab;
+}
+.toastify-item:active {
+  cursor: grabbing;
+}
+
+/* Toast Card with Tactile Micro-bevels */
+.toastify-toast {
+  display: flex;
+  height: 56px;
+  width: 100%;
+  user-select: none;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  border-radius: 8px;
+  padding: 0 14px;
+  box-sizing: border-box;
+  transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+              color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  
+  /* Light theme default */
+  background-color: #ffffff;
+  border: 1px solid rgba(229, 231, 235, 0.9);
+  color: #111827;
+  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
+}
+
+/* Dark theme overrides */
+.toastify-toaster.dark .toastify-toast,
+[data-theme="dark"] .toastify-toast,
+.dark .toastify-toast {
+  background-color: #171717;
+  border: 1px solid rgba(38, 38, 38, 0.9);
+  color: #f5f5f5;
+  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.25);
+}
+
+/* System dark theme preference when theme="system" */
+@media (prefers-color-scheme: dark) {
+  .toastify-toaster.system .toastify-toast {
+    background-color: #171717;
+    border: 1px solid rgba(38, 38, 38, 0.9);
+    color: #f5f5f5;
+    box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.25);
+  }
+  .toastify-toaster.system .toastify-badge {
+    background-color: #ffffff;
+    color: #0a0a0a;
+  }
+  .toastify-toaster.system .toastify-title {
+    color: #f5f5f5;
+  }
+  .toastify-toaster.system .toastify-description {
+    color: #a3a3a3;
+  }
+  .toastify-toaster.system .toastify-btn-cancel {
+    color: #a3a3a3;
+  }
+  .toastify-toaster.system .toastify-btn-cancel:hover {
+    background-color: #262626;
+    color: #f5f5f5;
+  }
+  .toastify-toaster.system .toastify-btn-action {
+    background-color: #f5f5f5;
+    color: #171717;
+    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.15);
+  }
+  .toastify-toaster.system .toastify-btn-action:hover {
+    background-color: #e5e5e5;
+  }
+}
+
+/* Badge Icon Wrapper */
+.toastify-badge {
+  display: flex;
+  height: 20px;
+  width: 20px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  background-color: #171717;
+  color: #ffffff;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+}
+
+.toastify-toaster.dark .toastify-badge,
+[data-theme="dark"] .toastify-badge,
+.dark .toastify-badge {
+  background-color: #ffffff;
+  color: #0a0a0a;
+}
+
+/* Content Area */
+.toastify-content {
+  display: flex;
+  min-width: 0;
+  flex: 1 1 0%;
+  align-items: center;
+  gap: 12px;
+}
+
+.toastify-text-group {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.toastify-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 16px;
+  color: #171717;
+}
+
+.toastify-toaster.dark .toastify-title,
+[data-theme="dark"] .toastify-title,
+.dark .toastify-title {
+  color: #f5f5f5;
+}
+
+.toastify-description {
+  margin-top: 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+  line-height: 16px;
+  color: #737373;
+}
+
+.toastify-toaster.dark .toastify-description,
+[data-theme="dark"] .toastify-description,
+.dark .toastify-description {
+  color: #a3a3a3;
+}
+
+/* Action Area */
+.toastify-actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 8px;
+}
+
+.toastify-btn-cancel {
+  cursor: pointer;
+  border: none;
+  background: transparent;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #525252;
+  transition: background-color 0.15s, color 0.15s;
+}
+
+.toastify-btn-cancel:hover {
+  background-color: #f5f5f5;
+  color: #171717;
+}
+
+.toastify-toaster.dark .toastify-btn-cancel,
+[data-theme="dark"] .toastify-btn-cancel,
+.dark .toastify-btn-cancel {
+  color: #a3a3a3;
+}
+
+.toastify-toaster.dark .toastify-btn-cancel:hover,
+[data-theme="dark"] .toastify-btn-cancel:hover,
+.dark .toastify-btn-cancel:hover {
+  background-color: #262626;
+  color: #f5f5f5;
+}
+
+.toastify-btn-action {
+  cursor: pointer;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  background-color: #171717;
+  color: #ffffff;
+  transition: background-color 0.15s, box-shadow 0.15s;
+  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.08);
+}
+
+.toastify-btn-action:hover {
+  background-color: #262626;
+}
+
+.toastify-btn-action:active {
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);
+}
+
+.toastify-toaster.dark .toastify-btn-action,
+[data-theme="dark"] .toastify-btn-action,
+.dark .toastify-btn-action {
+  background-color: #f5f5f5;
+  color: #171717;
+  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+
+.toastify-toaster.dark .toastify-btn-action:hover,
+[data-theme="dark"] .toastify-btn-action:hover,
+.dark .toastify-btn-action:hover {
+  background-color: #e5e5e5;
+}
+
+.toastify-toaster.dark .toastify-btn-action:active,
+[data-theme="dark"] .toastify-btn-action:active,
+.dark .toastify-btn-action:active {
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
+}

package/lib/index.d.cts

@@ -0,0 +1,158 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+type ToastType = "neutral" | "success" | "error" | "warning" | "info" | "loading" | "custom";
+type ToastAction = {
+    label: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+type ToastOptions = {
+    id?: string;
+    description?: ReactNode;
+    action?: ToastAction;
+    cancel?: ToastAction;
+    icon?: ReactNode;
+    duration?: number | false;
+    autoClose?: number | false;
+    className?: string;
+    style?: CSSProperties;
+};
+type ToastPromiseOptions<T = unknown> = {
+    loading: string;
+    success: string | ((data: T) => string);
+    error: string | ((err: unknown) => string);
+    description?: ReactNode | ((data: T) => ReactNode);
+    action?: ToastAction;
+    cancel?: ToastAction;
+};
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type ToastTheme = "light" | "dark" | "system";
+type SpringConfig = {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+};
+type ToastAnimationProps = {
+    toast: ToastData;
+    index: number;
+    totalToasts: number;
+    isHovered: boolean;
+    position: ToastPosition;
+    isDismissing: boolean;
+    onDismiss: () => void;
+    springConfig?: SpringConfig;
+    children: ReactNode;
+};
+type ToastAnimationComponent = React.ComponentType<ToastAnimationProps>;
+type AnimationPreset = "stack" | "slide" | "fade";
+type ToasterProps = {
+    position?: ToastPosition;
+    duration?: number | false;
+    autoClose?: number | false;
+    theme?: ToastTheme;
+    className?: string;
+    style?: CSSProperties;
+    visibleToasts?: number;
+    closeOnClick?: boolean;
+    animation?: AnimationPreset | ToastAnimationComponent;
+    springConfig?: SpringConfig;
+    icons?: Partial<Record<ToastType, ReactNode>>;
+    unstyled?: boolean;
+    toastOptions?: {
+        className?: string;
+        style?: CSSProperties;
+        duration?: number;
+    };
+};
+type ToastData = {
+    id: string;
+    type: ToastType;
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ToastAction;
+    cancel?: ToastAction;
+    icon?: ReactNode;
+    duration?: number | false;
+    className?: string;
+    style?: CSSProperties;
+    customRenderer?: (id: string) => ReactNode;
+    createdAt: number;
+};
+
+declare function Toaster({ position, duration, autoClose, theme, className, style, visibleToasts, closeOnClick, animation, springConfig, icons, unstyled, toastOptions, }: ToasterProps): react.JSX.Element;
+declare const ToastContainer: typeof Toaster;
+
+type ToastProps = {
+    toast: ToastData;
+    onDismiss: () => void;
+    closeOnClick?: boolean;
+    globalIcons?: Partial<Record<ToastType, ReactNode>>;
+    globalOptions?: {
+        className?: string;
+        style?: CSSProperties;
+    };
+};
+declare function DefaultToastIcon({ type }: {
+    type: ToastType;
+}): react.JSX.Element;
+declare function Toast({ toast, onDismiss, closeOnClick, globalIcons, globalOptions, }: ToastProps): react.JSX.Element;
+
+/**
+ * FadeAnimation
+ * Minimalist in-place fade & scale animation.
+ */
+declare function FadeAnimation({ index, position, isDismissing, onDismiss, springConfig, children, }: ToastAnimationProps): react.JSX.Element;
+
+/**
+ * FolderStackAnimation (Default)
+ * Elegant card-stacking animation with smooth hover expansion and lateral exit.
+ */
+declare function FolderStackAnimation({ index, isHovered, position, isDismissing, onDismiss, springConfig, children, }: ToastAnimationProps): react.JSX.Element;
+
+/**
+ * SlideAnimation
+ * Classic horizontal edge-sliding animation.
+ */
+declare function SlideAnimation({ index, position, isDismissing, onDismiss, springConfig, children, }: ToastAnimationProps): react.JSX.Element;
+
+/**
+ * ToastAnimation Component
+ * Dispatches to preset animation or custom animation component.
+ */
+declare function ToastAnimation({ animation, ...props }: ToastAnimationProps & {
+    animation?: AnimationPreset | ToastAnimationComponent;
+}): react.JSX.Element;
+
+declare const defaultSpring: SpringConfig;
+
+type Listener = (toasts: ToastData[]) => void;
+declare function subscribe(listener: Listener): () => void;
+declare function remove(id?: string): void;
+declare function update(id: string, updates: Partial<Omit<ToastData, "id" | "createdAt">>): void;
+declare function promise<T>(promiseOrFn: Promise<T> | (() => Promise<T>), options: ToastPromiseOptions<T>): Promise<T>;
+declare const toastStore: {
+    subscribe: typeof subscribe;
+    remove: typeof remove;
+    update: typeof update;
+    getToasts: () => ToastData[];
+};
+declare function toastFn(title: ReactNode, options?: ToastOptions): string;
+declare const toast: typeof toastFn & {
+    show(title: ReactNode, options?: ToastOptions): string;
+    success(title: ReactNode, options?: ToastOptions): string;
+    error(title: ReactNode, options?: ToastOptions): string;
+    warning(title: ReactNode, options?: ToastOptions): string;
+    info(title: ReactNode, options?: ToastOptions): string;
+    loading(title: ReactNode, options?: ToastOptions): string;
+    custom(renderer: (id: string) => ReactNode, options?: ToastOptions): string;
+    promise: typeof promise;
+    dismiss(id?: string): void;
+    update(id: string, options: Partial<ToastOptions> & {
+        title?: ReactNode;
+        type?: ToastType;
+    }): void;
+};
+
+declare const toastifyStyles = "\n/* Toastify Standalone CSS */\n@keyframes toastify-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.toastify-spin {\n  animation: toastify-spin 1s linear infinite;\n}\n\n.toastify-toaster {\n  position: fixed;\n  z-index: 9999;\n  width: 356px;\n  max-width: calc(100vw - 32px);\n  box-sizing: border-box;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n  margin: 0;\n  padding: 0;\n}\n\n.toastify-toaster *,\n.toastify-toaster *::before,\n.toastify-toaster *::after {\n  box-sizing: border-box;\n}\n\n/* Positions */\n.toastify-pos-top-left {\n  top: 24px;\n  left: 24px;\n}\n.toastify-pos-top-center {\n  top: 24px;\n  left: 0;\n  right: 0;\n  margin-left: auto;\n  margin-right: auto;\n}\n.toastify-pos-top-right {\n  top: 24px;\n  right: 24px;\n}\n.toastify-pos-bottom-left {\n  bottom: 24px;\n  left: 24px;\n}\n.toastify-pos-bottom-center {\n  bottom: 24px;\n  left: 0;\n  right: 0;\n  margin-left: auto;\n  margin-right: auto;\n}\n.toastify-pos-bottom-right {\n  bottom: 24px;\n  right: 24px;\n}\n\n.toastify-pointer-auto {\n  pointer-events: auto;\n}\n.toastify-pointer-none {\n  pointer-events: none;\n}\n\n/* Toast List Container */\n.toastify-list {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n.toastify-list-col {\n  flex-direction: column;\n}\n.toastify-list-col-reverse {\n  flex-direction: column-reverse;\n}\n\n/* Individual Toast Item wrapper */\n.toastify-item {\n  position: absolute;\n  height: 56px;\n  width: 100%;\n  user-select: none;\n  cursor: grab;\n}\n.toastify-item:active {\n  cursor: grabbing;\n}\n\n/* Toast Card with Tactile Micro-bevels */\n.toastify-toast {\n  display: flex;\n  height: 56px;\n  width: 100%;\n  user-select: none;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border-radius: 8px;\n  padding: 0 14px;\n  box-sizing: border-box;\n  transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),\n              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),\n              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),\n              color 0.2s cubic-bezier(0.16, 1, 0.3, 1);\n  \n  /* Light theme default */\n  background-color: #ffffff;\n  border: 1px solid rgba(229, 231, 235, 0.9);\n  color: #111827;\n  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);\n}\n\n/* Dark theme overrides */\n.toastify-toaster.dark .toastify-toast,\n[data-theme=\"dark\"] .toastify-toast,\n.dark .toastify-toast {\n  background-color: #171717;\n  border: 1px solid rgba(38, 38, 38, 0.9);\n  color: #f5f5f5;\n  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.25);\n}\n\n/* System dark theme preference when theme=\"system\" */\n@media (prefers-color-scheme: dark) {\n  .toastify-toaster.system .toastify-toast {\n    background-color: #171717;\n    border: 1px solid rgba(38, 38, 38, 0.9);\n    color: #f5f5f5;\n    box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.25);\n  }\n  .toastify-toaster.system .toastify-badge {\n    background-color: #ffffff;\n    color: #0a0a0a;\n  }\n  .toastify-toaster.system .toastify-title {\n    color: #f5f5f5;\n  }\n  .toastify-toaster.system .toastify-description {\n    color: #a3a3a3;\n  }\n  .toastify-toaster.system .toastify-btn-cancel {\n    color: #a3a3a3;\n  }\n  .toastify-toaster.system .toastify-btn-cancel:hover {\n    background-color: #262626;\n    color: #f5f5f5;\n  }\n  .toastify-toaster.system .toastify-btn-action {\n    background-color: #f5f5f5;\n    color: #171717;\n    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.15);\n  }\n  .toastify-toaster.system .toastify-btn-action:hover {\n    background-color: #e5e5e5;\n  }\n}\n\n/* Badge Icon Wrapper */\n.toastify-badge {\n  display: flex;\n  height: 20px;\n  width: 20px;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  background-color: #171717;\n  color: #ffffff;\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n\n.toastify-toaster.dark .toastify-badge,\n[data-theme=\"dark\"] .toastify-badge,\n.dark .toastify-badge {\n  background-color: #ffffff;\n  color: #0a0a0a;\n}\n\n/* Content Area */\n.toastify-content {\n  display: flex;\n  min-width: 0;\n  flex: 1 1 0%;\n  align-items: center;\n  gap: 12px;\n}\n\n.toastify-text-group {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.toastify-title {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 16px;\n  color: #171717;\n}\n\n.toastify-toaster.dark .toastify-title,\n[data-theme=\"dark\"] .toastify-title,\n.dark .toastify-title {\n  color: #f5f5f5;\n}\n\n.toastify-description {\n  margin-top: 2px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 12px;\n  line-height: 16px;\n  color: #737373;\n}\n\n.toastify-toaster.dark .toastify-description,\n[data-theme=\"dark\"] .toastify-description,\n.dark .toastify-description {\n  color: #a3a3a3;\n}\n\n/* Action Area */\n.toastify-actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 8px;\n}\n\n.toastify-btn-cancel {\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  padding: 4px 8px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #525252;\n  transition: background-color 0.15s, color 0.15s;\n}\n\n.toastify-btn-cancel:hover {\n  background-color: #f5f5f5;\n  color: #171717;\n}\n\n.toastify-toaster.dark .toastify-btn-cancel,\n[data-theme=\"dark\"] .toastify-btn-cancel,\n.dark .toastify-btn-cancel {\n  color: #a3a3a3;\n}\n\n.toastify-toaster.dark .toastify-btn-cancel:hover,\n[data-theme=\"dark\"] .toastify-btn-cancel:hover,\n.dark .toastify-btn-cancel:hover {\n  background-color: #262626;\n  color: #f5f5f5;\n}\n\n.toastify-btn-action {\n  cursor: pointer;\n  border: none;\n  border-radius: 4px;\n  padding: 4px 10px;\n  font-size: 12px;\n  font-weight: 500;\n  background-color: #171717;\n  color: #ffffff;\n  transition: background-color 0.15s, box-shadow 0.15s;\n  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n.toastify-btn-action:hover {\n  background-color: #262626;\n}\n\n.toastify-btn-action:active {\n  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);\n}\n\n.toastify-toaster.dark .toastify-btn-action,\n[data-theme=\"dark\"] .toastify-btn-action,\n.dark .toastify-btn-action {\n  background-color: #f5f5f5;\n  color: #171717;\n  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.15);\n}\n\n.toastify-toaster.dark .toastify-btn-action:hover,\n[data-theme=\"dark\"] .toastify-btn-action:hover,\n.dark .toastify-btn-action:hover {\n  background-color: #e5e5e5;\n}\n\n.toastify-toaster.dark .toastify-btn-action:active,\n[data-theme=\"dark\"] .toastify-btn-action:active,\n.dark .toastify-btn-action:active {\n  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);\n}\n";
+
+export { type AnimationPreset, DefaultToastIcon, FadeAnimation, FolderStackAnimation, SlideAnimation, type SpringConfig, Toast, type ToastAction, ToastAnimation, type ToastAnimationComponent, type ToastAnimationProps, ToastContainer, type ToastData, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastTheme, type ToastType, Toaster, type ToasterProps, defaultSpring, toast, toastStore, toastifyStyles };

package/lib/index.d.ts

@@ -0,0 +1,158 @@
+import * as react from 'react';
+import { ReactNode, CSSProperties } from 'react';
+
+type ToastType = "neutral" | "success" | "error" | "warning" | "info" | "loading" | "custom";
+type ToastAction = {
+    label: string;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+type ToastOptions = {
+    id?: string;
+    description?: ReactNode;
+    action?: ToastAction;
+    cancel?: ToastAction;
+    icon?: ReactNode;
+    duration?: number | false;
+    autoClose?: number | false;
+    className?: string;
+    style?: CSSProperties;
+};
+type ToastPromiseOptions<T = unknown> = {
+    loading: string;
+    success: string | ((data: T) => string);
+    error: string | ((err: unknown) => string);
+    description?: ReactNode | ((data: T) => ReactNode);
+    action?: ToastAction;
+    cancel?: ToastAction;
+};
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type ToastTheme = "light" | "dark" | "system";
+type SpringConfig = {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+};
+type ToastAnimationProps = {
+    toast: ToastData;
+    index: number;
+    totalToasts: number;
+    isHovered: boolean;
+    position: ToastPosition;
+    isDismissing: boolean;
+    onDismiss: () => void;
+    springConfig?: SpringConfig;
+    children: ReactNode;
+};
+type ToastAnimationComponent = React.ComponentType<ToastAnimationProps>;
+type AnimationPreset = "stack" | "slide" | "fade";
+type ToasterProps = {
+    position?: ToastPosition;
+    duration?: number | false;
+    autoClose?: number | false;
+    theme?: ToastTheme;
+    className?: string;
+    style?: CSSProperties;
+    visibleToasts?: number;
+    closeOnClick?: boolean;
+    animation?: AnimationPreset | ToastAnimationComponent;
+    springConfig?: SpringConfig;
+    icons?: Partial<Record<ToastType, ReactNode>>;
+    unstyled?: boolean;
+    toastOptions?: {
+        className?: string;
+        style?: CSSProperties;
+        duration?: number;
+    };
+};
+type ToastData = {
+    id: string;
+    type: ToastType;
+    title: ReactNode;
+    description?: ReactNode;
+    action?: ToastAction;
+    cancel?: ToastAction;
+    icon?: ReactNode;
+    duration?: number | false;
+    className?: string;
+    style?: CSSProperties;
+    customRenderer?: (id: string) => ReactNode;
+    createdAt: number;
+};
+
+declare function Toaster({ position, duration, autoClose, theme, className, style, visibleToasts, closeOnClick, animation, springConfig, icons, unstyled, toastOptions, }: ToasterProps): react.JSX.Element;
+declare const ToastContainer: typeof Toaster;
+
+type ToastProps = {
+    toast: ToastData;
+    onDismiss: () => void;
+    closeOnClick?: boolean;
+    globalIcons?: Partial<Record<ToastType, ReactNode>>;
+    globalOptions?: {
+        className?: string;
+        style?: CSSProperties;
+    };
+};
+declare function DefaultToastIcon({ type }: {
+    type: ToastType;
+}): react.JSX.Element;
+declare function Toast({ toast, onDismiss, closeOnClick, globalIcons, globalOptions, }: ToastProps): react.JSX.Element;
+
+/**
+ * FadeAnimation
+ * Minimalist in-place fade & scale animation.
+ */
+declare function FadeAnimation({ index, position, isDismissing, onDismiss, springConfig, children, }: ToastAnimationProps): react.JSX.Element;
+
+/**
+ * FolderStackAnimation (Default)
+ * Elegant card-stacking animation with smooth hover expansion and lateral exit.
+ */
+declare function FolderStackAnimation({ index, isHovered, position, isDismissing, onDismiss, springConfig, children, }: ToastAnimationProps): react.JSX.Element;
+
+/**
+ * SlideAnimation
+ * Classic horizontal edge-sliding animation.
+ */
+declare function SlideAnimation({ index, position, isDismissing, onDismiss, springConfig, children, }: ToastAnimationProps): react.JSX.Element;
+
+/**
+ * ToastAnimation Component
+ * Dispatches to preset animation or custom animation component.
+ */
+declare function ToastAnimation({ animation, ...props }: ToastAnimationProps & {
+    animation?: AnimationPreset | ToastAnimationComponent;
+}): react.JSX.Element;
+
+declare const defaultSpring: SpringConfig;
+
+type Listener = (toasts: ToastData[]) => void;
+declare function subscribe(listener: Listener): () => void;
+declare function remove(id?: string): void;
+declare function update(id: string, updates: Partial<Omit<ToastData, "id" | "createdAt">>): void;
+declare function promise<T>(promiseOrFn: Promise<T> | (() => Promise<T>), options: ToastPromiseOptions<T>): Promise<T>;
+declare const toastStore: {
+    subscribe: typeof subscribe;
+    remove: typeof remove;
+    update: typeof update;
+    getToasts: () => ToastData[];
+};
+declare function toastFn(title: ReactNode, options?: ToastOptions): string;
+declare const toast: typeof toastFn & {
+    show(title: ReactNode, options?: ToastOptions): string;
+    success(title: ReactNode, options?: ToastOptions): string;
+    error(title: ReactNode, options?: ToastOptions): string;
+    warning(title: ReactNode, options?: ToastOptions): string;
+    info(title: ReactNode, options?: ToastOptions): string;
+    loading(title: ReactNode, options?: ToastOptions): string;
+    custom(renderer: (id: string) => ReactNode, options?: ToastOptions): string;
+    promise: typeof promise;
+    dismiss(id?: string): void;
+    update(id: string, options: Partial<ToastOptions> & {
+        title?: ReactNode;
+        type?: ToastType;
+    }): void;
+};
+
+declare const toastifyStyles = "\n/* Toastify Standalone CSS */\n@keyframes toastify-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.toastify-spin {\n  animation: toastify-spin 1s linear infinite;\n}\n\n.toastify-toaster {\n  position: fixed;\n  z-index: 9999;\n  width: 356px;\n  max-width: calc(100vw - 32px);\n  box-sizing: border-box;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen, Ubuntu, Cantarell, \"Open Sans\", \"Helvetica Neue\", sans-serif;\n  margin: 0;\n  padding: 0;\n}\n\n.toastify-toaster *,\n.toastify-toaster *::before,\n.toastify-toaster *::after {\n  box-sizing: border-box;\n}\n\n/* Positions */\n.toastify-pos-top-left {\n  top: 24px;\n  left: 24px;\n}\n.toastify-pos-top-center {\n  top: 24px;\n  left: 0;\n  right: 0;\n  margin-left: auto;\n  margin-right: auto;\n}\n.toastify-pos-top-right {\n  top: 24px;\n  right: 24px;\n}\n.toastify-pos-bottom-left {\n  bottom: 24px;\n  left: 24px;\n}\n.toastify-pos-bottom-center {\n  bottom: 24px;\n  left: 0;\n  right: 0;\n  margin-left: auto;\n  margin-right: auto;\n}\n.toastify-pos-bottom-right {\n  bottom: 24px;\n  right: 24px;\n}\n\n.toastify-pointer-auto {\n  pointer-events: auto;\n}\n.toastify-pointer-none {\n  pointer-events: none;\n}\n\n/* Toast List Container */\n.toastify-list {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  display: flex;\n}\n.toastify-list-col {\n  flex-direction: column;\n}\n.toastify-list-col-reverse {\n  flex-direction: column-reverse;\n}\n\n/* Individual Toast Item wrapper */\n.toastify-item {\n  position: absolute;\n  height: 56px;\n  width: 100%;\n  user-select: none;\n  cursor: grab;\n}\n.toastify-item:active {\n  cursor: grabbing;\n}\n\n/* Toast Card with Tactile Micro-bevels */\n.toastify-toast {\n  display: flex;\n  height: 56px;\n  width: 100%;\n  user-select: none;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  border-radius: 8px;\n  padding: 0 14px;\n  box-sizing: border-box;\n  transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),\n              border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),\n              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),\n              color 0.2s cubic-bezier(0.16, 1, 0.3, 1);\n  \n  /* Light theme default */\n  background-color: #ffffff;\n  border: 1px solid rgba(229, 231, 235, 0.9);\n  color: #111827;\n  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);\n}\n\n/* Dark theme overrides */\n.toastify-toaster.dark .toastify-toast,\n[data-theme=\"dark\"] .toastify-toast,\n.dark .toastify-toast {\n  background-color: #171717;\n  border: 1px solid rgba(38, 38, 38, 0.9);\n  color: #f5f5f5;\n  box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.25);\n}\n\n/* System dark theme preference when theme=\"system\" */\n@media (prefers-color-scheme: dark) {\n  .toastify-toaster.system .toastify-toast {\n    background-color: #171717;\n    border: 1px solid rgba(38, 38, 38, 0.9);\n    color: #f5f5f5;\n    box-shadow: 0 4px 14px -2px rgba(0, 0, 0, 0.4), 0 2px 6px -1px rgba(0, 0, 0, 0.25);\n  }\n  .toastify-toaster.system .toastify-badge {\n    background-color: #ffffff;\n    color: #0a0a0a;\n  }\n  .toastify-toaster.system .toastify-title {\n    color: #f5f5f5;\n  }\n  .toastify-toaster.system .toastify-description {\n    color: #a3a3a3;\n  }\n  .toastify-toaster.system .toastify-btn-cancel {\n    color: #a3a3a3;\n  }\n  .toastify-toaster.system .toastify-btn-cancel:hover {\n    background-color: #262626;\n    color: #f5f5f5;\n  }\n  .toastify-toaster.system .toastify-btn-action {\n    background-color: #f5f5f5;\n    color: #171717;\n    box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.15);\n  }\n  .toastify-toaster.system .toastify-btn-action:hover {\n    background-color: #e5e5e5;\n  }\n}\n\n/* Badge Icon Wrapper */\n.toastify-badge {\n  display: flex;\n  height: 20px;\n  width: 20px;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  border-radius: 9999px;\n  background-color: #171717;\n  color: #ffffff;\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n}\n\n.toastify-toaster.dark .toastify-badge,\n[data-theme=\"dark\"] .toastify-badge,\n.dark .toastify-badge {\n  background-color: #ffffff;\n  color: #0a0a0a;\n}\n\n/* Content Area */\n.toastify-content {\n  display: flex;\n  min-width: 0;\n  flex: 1 1 0%;\n  align-items: center;\n  gap: 12px;\n}\n\n.toastify-text-group {\n  display: flex;\n  min-width: 0;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.toastify-title {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 16px;\n  color: #171717;\n}\n\n.toastify-toaster.dark .toastify-title,\n[data-theme=\"dark\"] .toastify-title,\n.dark .toastify-title {\n  color: #f5f5f5;\n}\n\n.toastify-description {\n  margin-top: 2px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  font-size: 12px;\n  line-height: 16px;\n  color: #737373;\n}\n\n.toastify-toaster.dark .toastify-description,\n[data-theme=\"dark\"] .toastify-description,\n.dark .toastify-description {\n  color: #a3a3a3;\n}\n\n/* Action Area */\n.toastify-actions {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  gap: 8px;\n}\n\n.toastify-btn-cancel {\n  cursor: pointer;\n  border: none;\n  background: transparent;\n  border-radius: 4px;\n  padding: 4px 8px;\n  font-size: 12px;\n  font-weight: 500;\n  color: #525252;\n  transition: background-color 0.15s, color 0.15s;\n}\n\n.toastify-btn-cancel:hover {\n  background-color: #f5f5f5;\n  color: #171717;\n}\n\n.toastify-toaster.dark .toastify-btn-cancel,\n[data-theme=\"dark\"] .toastify-btn-cancel,\n.dark .toastify-btn-cancel {\n  color: #a3a3a3;\n}\n\n.toastify-toaster.dark .toastify-btn-cancel:hover,\n[data-theme=\"dark\"] .toastify-btn-cancel:hover,\n.dark .toastify-btn-cancel:hover {\n  background-color: #262626;\n  color: #f5f5f5;\n}\n\n.toastify-btn-action {\n  cursor: pointer;\n  border: none;\n  border-radius: 4px;\n  padding: 4px 10px;\n  font-size: 12px;\n  font-weight: 500;\n  background-color: #171717;\n  color: #ffffff;\n  transition: background-color 0.15s, box-shadow 0.15s;\n  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n.toastify-btn-action:hover {\n  background-color: #262626;\n}\n\n.toastify-btn-action:active {\n  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.4);\n}\n\n.toastify-toaster.dark .toastify-btn-action,\n[data-theme=\"dark\"] .toastify-btn-action,\n.dark .toastify-btn-action {\n  background-color: #f5f5f5;\n  color: #171717;\n  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.15);\n}\n\n.toastify-toaster.dark .toastify-btn-action:hover,\n[data-theme=\"dark\"] .toastify-btn-action:hover,\n.dark .toastify-btn-action:hover {\n  background-color: #e5e5e5;\n}\n\n.toastify-toaster.dark .toastify-btn-action:active,\n[data-theme=\"dark\"] .toastify-btn-action:active,\n.dark .toastify-btn-action:active {\n  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);\n}\n";
+
+export { type AnimationPreset, DefaultToastIcon, FadeAnimation, FolderStackAnimation, SlideAnimation, type SpringConfig, Toast, type ToastAction, ToastAnimation, type ToastAnimationComponent, type ToastAnimationProps, ToastContainer, type ToastData, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastTheme, type ToastType, Toaster, type ToasterProps, defaultSpring, toast, toastStore, toastifyStyles };