toastify-all 1.0.0

package/LICENSE

@@ -0,0 +1 @@
+Copyright (c) 2026 Veeresh. All rights reserved.

package/README.md

@@ -0,0 +1,311 @@
+# Toastify-All 🔔
+
+> **The universal, modern toast notification engine for all JavaScript frameworks and platforms.**  
+> One unified API across **React**, **Next.js**, **Vue 3**, **Angular**, **React Native**, **Svelte**, and **Vanilla HTML/JS**.
+
+[![npm version](https://img.shields.io/npm/v/toastify-all.svg?style=flat-square)](https://www.npmjs.com/package/toastify-all)
+[![npm downloads](https://img.shields.io/npm/dm/toastify-all.svg?style=flat-square)](https://www.npmjs.com/package/toastify-all)
+[![bundle size](https://img.shields.io/bundlephobia/minzip/toastify-all?style=flat-square)](https://bundlephobia.com/package/toastify-all)
+
+---
+
+## 🎮 Live Interactive Demo
+
+Try Toastify-All in real-time in your browser:  
+👉 **[Open Live Interactive Playground](https://veereshmaps.github.io/toastify-all/)**  
+*(Customize positions, themes, transitions, test audio chimes, switch frameworks, and copy code snippets in 1 click)*
+
+---
+
+## 💡 Why Toastify-All? (In a world with so many toasters)
+
+Most toast libraries lock you into a single framework: `react-toastify` only works in React, `vue-toastification` only works in Vue, and `ngx-toastr` only works in Angular. If you work in a monorepo, micro-frontends, or move between different projects, you have to learn, install, and style completely different toast libraries every time.
+
+**Toastify-All eliminates framework lock-in forever.** You get the beauty of modern glassmorphism, the battle-tested power of React-Toastify, and first-class native adapters for every major framework in a single, lightweight package.
+
+| Feature | **Toastify-All** 🔔 | `react-toastify` | `sonner` | `vue-toastification` | `ngx-toastr` |
+| :--- | :---: | :---: | :---: | :---: | :---: |
+| **Multi-Framework Support** | 🌟 **React, Vue, Angular, RN, Vanilla** | ❌ React only | ❌ React only | ❌ Vue only | ❌ Angular only |
+| **Next.js App Router Ready** | ✅ **`'use client'` built-in** | ⚠️ Needs manual wrapper | ✅ Built-in | N/A | N/A |
+| **Modern Glassmorphic Design** | ✅ **Blur + Subtle Borders** | ❌ Boxy 2018 design | ✅ Minimalist | ❌ Standard | ❌ Standard |
+| **System Theme Auto-Sync** | ✅ **Auto OS dark/light sync** | ❌ | ❌ | ❌ | ❌ |
+| **Promise Toast (`toast.promise`)** | ✅ **Built-in** | ✅ Built-in | ✅ Built-in | ⚠️ Plugin | ❌ |
+| **Zero-Asset Audio Chimes** | ✅ **Built-in (Web Audio API)** | ❌ | ❌ | ❌ | ❌ |
+| **Direct CDN `<script>` tag** | ✅ **jsDelivr / unpkg** | ❌ | ❌ | ❌ | ❌ |
+| **Swipe & Drag Dismiss** | ✅ **Desktop & Touch** | ✅ | ✅ | ✅ | ❌ |
+
+---
+
+## 📦 Installation
+
+```bash
+npm install toastify-all
+# or
+yarn add toastify-all
+# or
+pnpm add toastify-all
+```
+
+---
+
+## 🚀 Quick Start by Platform
+
+### 1. React & Next.js (App Router & Pages Router)
+
+Place `<ToastContainer />` at the root of your application, then trigger `toast` from anywhere:
+
+```jsx
+import React from 'react';
+import { ToastContainer, toast } from 'toastify-all/react';
+
+export default function App() {
+  const notify = () => {
+    // Basic toast
+    toast("Welcome to Toastify-All!");
+
+    // Beautiful variants with colored or system theme
+    toast.success("Profile saved successfully!", { theme: "colored" });
+    toast.error("Failed to connect to server!");
+    toast.warning("Your session is about to expire.");
+    toast.info("A new update is available.");
+
+    // Dynamic Promise Toast (Loading -> Success / Error)
+    const uploadFile = () => new Promise((resolve) => setTimeout(resolve, 2000));
+    toast.promise(uploadFile(), {
+      pending: "Uploading asset...",
+      success: "Upload completed! 🚀",
+      error: "Upload failed! ❌"
+    });
+  };
+
+  return (
+    <div>
+      <button onClick={notify}>Show Notifications</button>
+      <ToastContainer
+        position="top-right"
+        autoClose={4000}
+        theme="system"
+        transition="bounce"
+      />
+    </div>
+  );
+}
+```
+
+---
+
+### 2. Vue 3 & Nuxt
+
+In `main.js` / `main.ts`:
+
+```javascript
+import { createApp } from 'vue';
+import { ToastifyAllPlugin } from 'toastify-all/vue';
+import App from './App.vue';
+
+const app = createApp(App);
+app.use(ToastifyAllPlugin, {
+  position: 'top-right',
+  theme: 'system'
+});
+app.mount('#app');
+```
+
+In any Vue component:
+
+```vue
+<template>
+  <button @click="showToast">Notify</button>
+</template>
+
+<script setup>
+import { useToast } from 'toastify-all/vue';
+
+const toast = useToast();
+
+const showToast = () => {
+  toast.success('Toastify-All works seamlessly in Vue 3!');
+};
+</script>
+```
+
+---
+
+### 3. Angular
+
+#### Standalone Setup (Angular 14+ / 15+ / 16+ / 17+)
+In `main.ts` or `app.config.ts`:
+
+```typescript
+import { bootstrapApplication } from '@angular/platform-browser';
+import { provideNotifications } from 'toastify-all/angular';
+import { AppComponent } from './app/app.component';
+
+bootstrapApplication(AppComponent, {
+  providers: [
+    provideNotifications({
+      position: 'top-right',
+      theme: 'system'
+    })
+  ]
+});
+```
+
+#### In your Component:
+
+```typescript
+import { Component } from '@angular/core';
+import { NotificationService } from 'toastify-all/angular';
+
+@Component({
+  selector: 'app-root',
+  template: `<button (click)="notify()">Trigger</button>`
+})
+export class AppComponent {
+  constructor(private toast: NotificationService) {}
+
+  notify() {
+    this.toast.success('Toastify-All running in Angular!');
+  }
+}
+```
+
+---
+
+### 4. React Native
+
+Native alerts on iOS and native toasts on Android without browser DOM crashes:
+
+```jsx
+import React from 'react';
+import { View, Button } from 'react-native';
+import { toast, ToastContainer } from 'toastify-all/react-native';
+
+export default function App() {
+  return (
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Button
+        title="Show Toast"
+        onPress={() => toast.success('Mobile notification works!')}
+      />
+      <ToastContainer />
+    </View>
+  );
+}
+```
+
+---
+
+### 5. Vanilla JavaScript (No Framework)
+
+```javascript
+import toast from 'toastify-all';
+
+toast.configure({
+  position: 'top-center',
+  theme: 'colored'
+});
+
+toast.success('Vanilla JS toast!');
+```
+
+---
+
+### 6. Direct CDN Browser `<script>` Tag
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Toastify-All CDN Demo</title>
+  <!-- Load Toastify-All via jsDelivr -->
+  <script src="https://cdn.jsdelivr.net/npm/toastify-all/dist/index.umd.js"></script>
+</head>
+<body>
+  <button onclick="ToastifyAll.toast.success('Hello from CDN!')">Click Me</button>
+</body>
+</html>
+```
+
+---
+
+## 🛠️ Complete API Reference
+
+### Calling `toast`
+
+| Method | Description |
+| :--- | :--- |
+| `toast(message, [options])` | Show a default toast |
+| `toast.success(message, [options])` | Show a success toast (green) |
+| `toast.error(message, [options])` | Show an error toast (red) |
+| `toast.info(message, [options])` | Show an info toast (blue) |
+| `toast.warning(message, [options])` / `toast.warn(...)` | Show a warning toast (amber) |
+| `toast.loading(message, [options])` | Show a persistent loading spinner toast |
+| `toast.promise(promise, states, [options])` | Automatically handles pending, success, and error states |
+| `toast.update(id, newState)` | Update an active toast's content or state |
+| `toast.dismiss([id])` | Dismiss a specific toast by ID, or all toasts if no ID is passed |
+| `toast.isActive(id)` | Check if a toast is currently active on screen |
+| `toast.clearWaitingQueue()` | Dismiss all toasts exceeding the queue limit |
+
+---
+
+### Configuration Options
+
+Options can be set globally via `toast.configure(options)` or per-toast:
+
+```javascript
+toast.success("File uploaded", {
+  title: "Upload Completed",
+  position: "bottom-right",
+  autoClose: 4000,
+  theme: "system", // "light" | "dark" | "colored" | "system"
+  transition: "slide", // "bounce" | "slide" | "zoom" | "flip"
+  sound: true, // Subtle harmonic Web Audio chime
+  hideProgressBar: false,
+  closeOnClick: true,
+  pauseOnHover: true,
+  pauseOnFocusLoss: true,
+  draggable: true,
+  draggablePercent: 80,
+  action: {
+    label: "Undo",
+    onClick: (id) => console.log("Undo clicked for toast", id)
+  }
+});
+```
+
+---
+
+## 🌐 CDN Quick Start (No Bundler / Plain HTML)
+
+If you are not using npm or a frontend framework, you can use Toastify-All directly from a global CDN without any build step:
+
+```html
+<!-- Include Toastify-All via jsDelivr -->
+<script src="https://cdn.jsdelivr.net/npm/toastify-all/dist/index.umd.js"></script>
+
+<script>
+  // Trigger notifications anytime
+  ToastifyAll.toast.success("Welcome to Toastify-All!");
+</script>
+```
+
+---
+
+## 🤝 Contributing
+
+Contributions, issues, and feature requests are welcome!
+
+```bash
+# 1. Clone the repository
+git clone https://github.com/VeereshMaps/toastify-all.git
+
+# 2. Install dependencies
+npm install
+
+# 3. Run test suite
+npm test
+
+# 4. Build bundles
+npm run build
+```

package/dist/angular/angular/index.d.ts

@@ -0,0 +1,29 @@
+import { alertService } from '../core/AlertService.js';
+import type { NotificationOptions, NotificationUpdateState, PromiseToastOptions } from '../types/index';
+export declare const NOTIFICATION_CONFIG = "NOTIFICATION_CONFIG";
+export declare class NotificationService {
+    private config?;
+    private service;
+    constructor(config?: NotificationOptions);
+    configure(options: NotificationOptions): void;
+    success(message: string, options?: NotificationOptions): any;
+    error(message: string, options?: NotificationOptions): any;
+    info(message: string, options?: NotificationOptions): any;
+    warn(message: string, options?: NotificationOptions): any;
+    warning(message: string, options?: NotificationOptions): any;
+    loading(message: string, options?: NotificationOptions): any;
+    custom(content: string, options?: NotificationOptions): any;
+    promise<T>(promiseOrFn: Promise<T> | (() => Promise<T>), states?: PromiseToastOptions<T>, options?: NotificationOptions): any;
+    update(id: number, newState: NotificationUpdateState): void;
+    dismiss(id: number): void;
+    clearAll(): void;
+}
+/**
+ * Standalone provider helper for Angular 14+ / 15+ / 16+ / 17+
+ */
+export declare function provideNotifications(config?: NotificationOptions): (typeof NotificationService | {
+    provide: string;
+    useValue: NotificationOptions;
+})[];
+export { alertService, alertService as toast };
+export default NotificationService;

package/dist/angular/angular/public-api.d.ts

@@ -0,0 +1 @@
+export * from './index';

package/dist/angular/core/AlertService.d.ts

@@ -0,0 +1,39 @@
+export default toast;
+export class AlertService {
+    core: NotificationCore;
+    configure(options: any): void;
+    show(type: any, message: any, options: any): any;
+    success(message: any, options: any): any;
+    error(message: any, options: any): any;
+    info(message: any, options: any): any;
+    warn(message: any, options: any): any;
+    warning(message: any, options: any): any;
+    loading(message: any, options: any): any;
+    custom(content: any, options: any): any;
+    promise(promiseOrFn: any, states: any, options: any): any;
+    update(id: any, newState: any): void;
+    dismiss(id: any): void;
+    isActive(id: any): boolean;
+    clearWaitingQueue(): void;
+    clearAll(): void;
+}
+export const alertService: AlertService;
+export function toast(content: any, options?: {}): any;
+export namespace toast {
+    function configure(options: any): any;
+    function success(content: any, options: any): any;
+    function error(content: any, options: any): any;
+    function info(content: any, options: any): any;
+    function warning(content: any, options: any): any;
+    function warn(content: any, options: any): any;
+    function loading(content: any, options: any): any;
+    function custom(content: any, options: any): any;
+    function promise(promiseOrFn: any, states: any, options: any): any;
+    function update(id: any, newState: any): any;
+    function dismiss(id: any): any;
+    function isActive(id: any): any;
+    function clearWaitingQueue(): any;
+    function clearAll(): any;
+    let core: any;
+}
+import NotificationCore from './NotificationCore.js';

package/dist/angular/core/NotificationCore.d.ts

@@ -0,0 +1,51 @@
+export default NotificationCore;
+declare class NotificationCore {
+    notifications: Map<any, any>;
+    counter: number;
+    config: {
+        position: string;
+        autoClose: number;
+        hideProgressBar: boolean;
+        closeOnClick: boolean;
+        pauseOnHover: boolean;
+        pauseOnFocusLoss: boolean;
+        draggable: boolean;
+        draggablePercent: number;
+        theme: string;
+        transition: string;
+        limit: any;
+        newestOnTop: boolean;
+        closeButton: boolean;
+        sound: boolean;
+    };
+    containers: Map<any, any>;
+    initialized: boolean;
+    isWindowFocused: boolean;
+    getEffectiveTheme(theme?: string): string;
+    refreshSystemTheme(): void;
+    configure(options?: {}): void;
+    init(): void;
+    getContainer(position?: string): any;
+    playChime(type: any): void;
+    injectStyles(): void;
+    getDefaultIcon(type: any): "<svg viewBox=\"0 0 20 20\" fill=\"#10b981\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z\" clip-rule=\"evenodd\"/></svg>" | "<svg viewBox=\"0 0 20 20\" fill=\"#ef4444\"><path fill-rule=\"evenodd\" d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z\" clip-rule=\"evenodd\"/></svg>" | "<svg viewBox=\"0 0 20 20\" fill=\"#f59e0b\"><path fill-rule=\"evenodd\" d=\"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z\" clip-rule=\"evenodd\"/></svg>" | "<svg viewBox=\"0 0 20 20\" fill=\"#3b82f6\"><path fill-rule=\"evenodd\" d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z\" clip-rule=\"evenodd\"/></svg>" | "<div class=\"Toastify__spinner\"></div>" | "";
+    getAnimationNames(transition: any, position: any): {
+        enter: string;
+        exit: string;
+    };
+    show(type: string, message: any, options?: {}): any;
+    createToast(id: any, type: any, message: any, config: any, position: any): HTMLDivElement;
+    setupAutoClose(entry: any): void;
+    setupHoverPause(toast: any, id: any): void;
+    pauseToast(id: any): void;
+    resumeToast(id: any): void;
+    pauseAll(): void;
+    resumeAll(): void;
+    makeDraggable(toast: any, id: any, config: any): void;
+    update(id: any, newState?: {}): void;
+    dismiss(id: any): void;
+    isActive(id: any): boolean;
+    clearWaitingQueue(): void;
+    clearAll(): void;
+    promise(promiseOrFn: any, states?: {}, options?: {}): any;
+}

package/dist/angular/index.d.ts

@@ -0,0 +1,30 @@
+import { NotificationOptions, NotificationUpdateState, PromiseToastOptions, AlertService } from '../types/index';
+
+export declare const NOTIFICATION_CONFIG = 'NOTIFICATION_CONFIG';
+
+export declare class NotificationService {
+    private service: AlertService;
+    private config?: NotificationOptions;
+    constructor(config?: NotificationOptions);
+    configure(options: NotificationOptions): void;
+    success(message: string, options?: NotificationOptions): number;
+    error(message: string, options?: NotificationOptions): number;
+    info(message: string, options?: NotificationOptions): number;
+    warn(message: string, options?: NotificationOptions): number;
+    warning(message: string, options?: NotificationOptions): number;
+    loading(message: string, options?: NotificationOptions): number;
+    custom(content: string, options?: NotificationOptions): number;
+    promise<T>(
+        promiseOrFn: Promise<T> | (() => Promise<T>),
+        states?: PromiseToastOptions<T>,
+        options?: NotificationOptions
+    ): Promise<T>;
+    update(id: number, newState: NotificationUpdateState): void;
+    dismiss(id: number): void;
+    clearAll(): void;
+}
+
+export declare function provideNotifications(config?: NotificationOptions): any[];
+export declare const toast: AlertService;
+export declare const alertService: AlertService;
+export default NotificationService;