npm - crisp-toast - Versions diffs - 1.0.0 - Mend

crisp-toast 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +147 -0
package/dist/core/toast-manager.d.ts +10 -0
package/dist/core/toast.d.ts +15 -0
package/dist/crisp-toast.js +163 -0
package/dist/crisp-toast.umd.cjs +1 -0
package/dist/index.d.ts +12 -0
package/dist/style.css +1 -0
package/dist/types/index.d.ts +34 -0
package/dist/utils/icons.d.ts +10 -0
package/package.json +70 -0

package/README.md ADDED Viewed

@@ -0,0 +1,147 @@
+# Crisp Toast 🍞
+A lightweight, beautiful, and highly customizable vanilla JavaScript toast notification library. Designed for modern web applications with premium aesthetics.
+![NPM Version](https://img.shields.io/npm/v/crisp-toast)
+![License](https://img.shields.io/npm/l/crisp-toast)
+## Table of Contents
+- [Features](#features)
+- [Installation](#installation)
+- [Quick Start](#quick-start)
+- [Usage](#usage)
+  - [Toast Types](#toast-types)
+  - [Variants](#variants)
+  - [Colors](#colors)
+  - [Placements](#placements)
+  - [Promises](#promises)
+- [API Reference](#api-reference)
+- [License](#license)
+## Features
+- 🚀 **Vanilla JS**: No dependencies, works anywhere.
+- 🎨 **Beautiful Designs**: Support for Solid, Bordered, and Flat variants.
+- 🌈 **Modern Colors**: Built-in palettes (Primary, Success, Danger, etc.) with dark mode support.
+- 🧭 **Precise Placement**: 6 different anchor positions.
+- ⏳ **Progress Bar**: Visual countdown for auto-dismissal.
+- 📦 **Promise Support**: Easy handling of loading states.
+- 🛠️ **Fully Customizable**: Override styles, icons, and behavior.
+## Installation
+```bash
+npm install crisp-toast
+```
+Or via yarn:
+```bash
+yarn add crisp-toast
+```
+## Quick Start
+Import the library and its styles:
+```javascript
+import { toast } from 'crisp-toast';
+import 'crisp-toast/style.css';
+// Simple toast
+toast('Hello World!');
+// Success toast
+toast.success('Settings saved!');
+```
+## Usage
+### Toast Types
+Crisp Toast provides specialized methods for common states:
+```javascript
+toast('Normal toast');
+toast.success('Task completed!');
+toast.error('Something went wrong.');
+toast.warning('Check your input.');
+toast.info('New update available.');
+toast.loading('Processing...');
+```
+### Variants
+Choose between three premium variants:
+```javascript
+toast.success({
+  title: 'Success!',
+  variant: 'bordered' // 'solid' | 'bordered' | 'flat' (default: 'bordered')
+});
+```
+### Colors
+Map toasts to your brand or state:
+```javascript
+toast({
+  title: 'Custom Color',
+  color: 'secondary' // 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
+});
+```
+### Placements
+Control exactly where the toast appears:
+```javascript
+toast({
+  title: 'Top Center Toast',
+  placement: 'top-center'
+  // Options: 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right'
+});
+```
+### Promises
+Handle asynchronous operations with ease:
+```javascript
+const savePromise = saveData();
+toast.promise(savePromise, {
+  loading: 'Saving your changes...',
+  success: (data) => `Saved successfully: ${data.name}`,
+  error: (err) => `Failed to save: ${err.message}`
+});
+```
+## API Reference
+### `toast(options | string)`
+The main function. You can pass a string for a simple message or an options object.
+#### Options Object
+| Property | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `title` | `string` | `undefined` | The main message of the toast. |
+| `description`| `string` | `undefined` | Secondary text below the title. |
+| `variant` | `'solid' \| 'bordered' \| 'flat'` | `'bordered'` | The visual style of the toast. |
+| `color` | `ToastColor` | `'default'` | The color theme. |
+| `placement` | `ToastPlacement` | `'bottom-right'` | Position on the screen. |
+| `duration` | `number` | `3000` | Auto-dismissal time in ms. `0` or `Infinity` to keep forever. |
+| `progressBar`| `boolean` | `true` | Whether to show the progress bar. |
+| `radius` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'full'` | `'md'` | Corner rounding. |
+| `icon` | `string \| HTMLElement \| boolean` | `true` | Pass HTML string, element, or `false` to hide. |
+| `endContent` | `HTMLElement \| function` | `undefined` | Custom content at the end of the toast. |
+| `action` | `{ label: string, onClick: function }`| `undefined` | Add a call-to-action button. |
+| `onClose` | `function` | `undefined` | Callback when toast is dismissed. |
+| `customStyle`| `CSSStyleDeclaration` | `{}` | Custom CSS overrides. |
+## License
+MIT © [Ahmad](https://github.com/scriptwithahmad)

package/dist/core/toast-manager.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import { ToastPlacement } from '../types/index';
+export declare class ToastManager {
+    private static containers;
+    static getContainer(placement: ToastPlacement): HTMLElement;
+    static removeContainer(placement: ToastPlacement): void;
+    static addToast(placement: ToastPlacement, element: HTMLElement): void;
+    static removeToast(placement: ToastPlacement, element: HTMLElement): void;
+    private static updatePositions;
+}

package/dist/core/toast.d.ts ADDED Viewed

@@ -0,0 +1,15 @@
+import { ToastOptions, ToastState } from '../types/index';
+export declare class Toast {
+    private state;
+    private element;
+    private timer;
+    constructor(options: ToastOptions, type?: ToastState['type']);
+    private render;
+    private handlePromise;
+    update(options: Partial<ToastOptions> & {
+        type?: ToastState['type'];
+    }): void;
+    private buildClasses;
+    dismiss(): void;
+}

package/dist/crisp-toast.js ADDED Viewed

@@ -0,0 +1,163 @@
+var f = Object.defineProperty;
+var v = (s, t, e) => t in s ? f(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var d = (s, t, e) => v(s, typeof t != "symbol" ? t + "" : t, e);
+class m {
+  static getContainer(t) {
+    if (this.containers.has(t))
+      return this.containers.get(t);
+    if (typeof document > "u")
+      return {};
+    const e = document.createElement("div");
+    return e.classList.add("ct-container"), e.classList.add(`ct-${t}`), document.body.appendChild(e), this.containers.set(t, e), e;
+  }
+  static removeContainer(t) {
+    const e = this.containers.get(t);
+    e && e.childNodes.length === 0 && (e.remove(), this.containers.delete(t));
+  }
+  static addToast(t, e) {
+    this.getContainer(t).prepend(e), setTimeout(() => this.updatePositions(t), 0);
+  }
+  static removeToast(t, e) {
+    e.parentNode && e.parentNode.removeChild(e), this.updatePositions(t), this.removeContainer(t);
+  }
+  static updatePositions(t) {
+    const e = this.containers.get(t);
+    if (!e) return;
+    const a = Array.from(e.children).filter(
+      (o) => o.classList.contains("ct-toast") && !o.classList.contains("ct-leave")
+    ), n = t.includes("bottom"), i = 16, h = 0.05;
+    a.forEach((o, c) => {
+      const p = n ? -(c * i) : c * i, u = 1 - c * h;
+      o.style.setProperty("--ct-y", `${p}px`), o.style.setProperty("--ct-scale", `${u}`), o.style.zIndex = `${9999 - c}`, c > 3 ? (o.style.opacity = "0", o.style.pointerEvents = "none") : (o.style.opacity = "1", o.style.pointerEvents = "auto");
+    }), Array.from(e.children).filter((o) => o.classList.contains("ct-leave")).forEach((o) => {
+      const c = parseFloat(o.style.getPropertyValue("--ct-y") || "0");
+      o.style.setProperty("--ct-y", `${c + (n ? 20 : -20)}px`), o.style.opacity = "0";
+    });
+  }
+}
+d(m, "containers", /* @__PURE__ */ new Map());
+const r = {
+  default: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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>',
+  primary: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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>',
+  secondary: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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>',
+  success: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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>',
+  warning: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" /></svg>',
+  danger: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><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>',
+  loading: '<svg class="ct-spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>',
+  close: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" /></svg>'
+};
+let g = 0;
+class w {
+  constructor(t, e = "normal") {
+    d(this, "state");
+    d(this, "element", null);
+    d(this, "timer", null);
+    this.state = {
+      ...t,
+      type: e,
+      id: t.id || `ct-${++g}`,
+      createdAt: Date.now(),
+      placement: t.placement || "bottom-right",
+      duration: t.duration ?? (e === "loading" ? 1 / 0 : 3e3),
+      variant: t.variant || "bordered",
+      color: t.color || (e === "normal" ? "default" : e === "loading" ? "primary" : e),
+      radius: t.radius || "md",
+      progressBar: t.progressBar !== !1
+      // default to true if they want it
+    }, typeof document < "u" && this.render();
+  }
+  render() {
+    this.element = document.createElement("div"), this.element.id = this.state.id, this.element.className = this.buildClasses(), this.state.customStyle && Object.assign(this.element.style, this.state.customStyle);
+    const t = document.createElement("div");
+    t.className = "ct-icon", this.state.icon !== !1 && (this.state.icon instanceof HTMLElement ? t.appendChild(this.state.icon) : typeof this.state.icon == "string" ? t.innerHTML = this.state.icon : r[this.state.type] || r[this.state.color] ? t.innerHTML = this.state.type === "loading" ? r.loading : r[this.state.color] || r.default : t.innerHTML = r.default, this.element.appendChild(t));
+    const e = document.createElement("div");
+    if (e.className = "ct-content", this.state.title) {
+      const i = document.createElement("div");
+      i.className = "ct-title", i.textContent = this.state.title, e.appendChild(i);
+    }
+    if (this.state.description) {
+      const i = document.createElement("div");
+      i.className = "ct-description", i.textContent = this.state.description, e.appendChild(i);
+    }
+    if ((this.state.title || this.state.description) && this.element.appendChild(e), this.state.endContent) {
+      const i = document.createElement("div");
+      i.className = "ct-end-content", typeof this.state.endContent == "function" ? this.state.endContent(i) : this.state.endContent instanceof HTMLElement ? i.appendChild(this.state.endContent) : typeof this.state.endContent == "string" ? i.innerHTML = this.state.endContent : this.state.endContent, this.element.appendChild(i);
+    }
+    const a = document.createElement("div");
+    if (a.className = "ct-actions", this.state.action) {
+      const i = document.createElement("button");
+      i.className = "ct-action-btn", i.textContent = this.state.action.label, i.onclick = () => {
+        var h;
+        (h = this.state.action) == null || h.onClick(), this.dismiss();
+      }, a.appendChild(i);
+    }
+    const n = document.createElement("button");
+    if (n.className = "ct-close", n.innerHTML = r.close, n.onclick = () => this.dismiss(), a.appendChild(n), this.element.appendChild(a), this.state.progressBar && this.state.duration > 0 && this.state.duration !== 1 / 0) {
+      const i = document.createElement("div");
+      i.className = "ct-progress-bar", i.style.animation = `ct-progress ${this.state.duration}ms linear forwards`, this.element.appendChild(i);
+    }
+    m.addToast(this.state.placement, this.element), this.state.duration > 0 && this.state.duration !== 1 / 0 && (this.timer = window.setTimeout(() => this.dismiss(), this.state.duration)), this.state.promise && this.handlePromise(this.state.promise);
+  }
+  handlePromise(t) {
+    t.then((e) => {
+      var n;
+      const a = (n = this.state.promiseMessages) != null && n.success ? typeof this.state.promiseMessages.success == "function" ? this.state.promiseMessages.success(e) : this.state.promiseMessages.success : "Success";
+      this.update({ type: "success", title: a, color: "success", duration: 3e3 });
+    }).catch((e) => {
+      var n;
+      const a = (n = this.state.promiseMessages) != null && n.error ? typeof this.state.promiseMessages.error == "function" ? this.state.promiseMessages.error(e) : this.state.promiseMessages.error : "Error";
+      this.update({ type: "error", title: a, color: "danger", duration: 3e3 });
+    });
+  }
+  update(t) {
+    if (!this.element) return;
+    this.state = { ...this.state, ...t }, this.element.className = this.buildClasses();
+    const e = this.element.querySelector(".ct-icon");
+    e && (this.state.icon !== !1 ? this.state.icon instanceof HTMLElement ? (e.innerHTML = "", e.appendChild(this.state.icon)) : typeof this.state.icon == "string" ? e.innerHTML = this.state.icon : e.innerHTML = this.state.type === "loading" ? r.loading : r[this.state.color] || r.default : e.innerHTML = "");
+    const a = this.element.querySelector(".ct-content");
+    if (a) {
+      if (a.innerHTML = "", this.state.title) {
+        const n = document.createElement("div");
+        n.className = "ct-title", n.textContent = typeof this.state.title == "string" ? this.state.title : "", a.appendChild(n);
+      }
+      if (this.state.description) {
+        const n = document.createElement("div");
+        n.className = "ct-description", n.textContent = this.state.description, a.appendChild(n);
+      }
+    }
+    this.timer && clearTimeout(this.timer), this.state.duration > 0 && this.state.duration !== 1 / 0 && (this.timer = window.setTimeout(() => this.dismiss(), this.state.duration));
+  }
+  buildClasses() {
+    return ["ct-toast", `ct-${this.state.variant}`, `ct-color-${this.state.color}`, `ct-radius-${this.state.radius}`].join(" ");
+  }
+  dismiss() {
+    if (!this.element) return;
+    this.timer && clearTimeout(this.timer), this.element.classList.add("ct-leave");
+    const t = () => {
+      this.element && (m.removeToast(this.state.placement, this.element), this.state.onClose && this.state.onClose());
+    };
+    this.element.addEventListener("animationend", t, { once: !0 }), setTimeout(t, 400);
+  }
+}
+const l = (s, t = "normal") => {
+  const e = typeof s == "string" ? { title: s } : s;
+  return new w(e, t);
+}, M = Object.assign(
+  (s) => l(s),
+  {
+    success: (s) => l(s, "success"),
+    error: (s) => l(s, "error"),
+    warning: (s) => l(s, "warning"),
+    info: (s) => l(s, "info"),
+    loading: (s) => l(s, "loading"),
+    promise: (s, t, e) => l({
+      ...e,
+      title: typeof (t == null ? void 0 : t.loading) == "string" ? t.loading : "Loading...",
+      promise: s,
+      promiseMessages: t
+    }, "loading")
+  }
+);
+export {
+  M as toast
+};

package/dist/crisp-toast.umd.cjs ADDED Viewed

@@ -0,0 +1 @@

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import { ToastOptions } from './types/index';
+import { Toast } from './core/toast';
+export * from './types/index';
+export declare const toast: ((options: ToastOptions | string) => Toast) & {
+    success: (options: ToastOptions | string) => Toast;
+    error: (options: ToastOptions | string) => Toast;
+    warning: (options: ToastOptions | string) => Toast;
+    info: (options: ToastOptions | string) => Toast;
+    loading: (options: ToastOptions | string) => Toast;
+    promise: <T>(promise: Promise<T>, messages: ToastOptions["promiseMessages"], options?: Omit<ToastOptions, "promise" | "promiseMessages">) => Toast;
+};

package/dist/style.css ADDED Viewed

@@ -0,0 +1 @@

+ :root{--ct-bg-default: #ffffff;--ct-title-default: #111827;--ct-border-default: #e5e7eb;--ct-icon-default: #6b7280;--ct-bg-primary: #f0f7ff;--ct-title-primary: #1d4ed8;--ct-border-primary: #dbeafe;--ct-icon-primary: #3b82f6;--ct-bg-secondary: #f5f3ff;--ct-title-secondary: #6d28d9;--ct-border-secondary: #ede9fe;--ct-icon-secondary: #8b5cf6;--ct-bg-success: #f0fdf4;--ct-title-success: #15803d;--ct-border-success: #dcfce7;--ct-icon-success: #22c55e;--ct-bg-warning: #fffbeb;--ct-title-warning: #b45309;--ct-border-warning: #fef3c7;--ct-icon-warning: #f59e0b;--ct-bg-danger: #fef2f2;--ct-title-danger: #b91c1c;--ct-border-danger: #fee2e2;--ct-icon-danger: #ef4444;--ct-text-desc: #6b7280;--ct-shadow: 0 4px 6px -1px rgba(0, 0, 0, .05), 0 2px 4px -1px rgba(0, 0, 0, .03);--ct-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--ct-radius-none: 0;--ct-radius-sm: 8px;--ct-radius-md: 12px;--ct-radius-lg: 16px;--ct-radius-full: 9999px;--ct-duration: .3s;--ct-easing: cubic-bezier(.2, .8, .2, 1)}.ct-theme-dark{--ct-bg-default: #171717;--ct-title-default: #f9fafb;--ct-border-default: #262626;--ct-icon-default: #737373;--ct-bg-primary: #171c2b;--ct-title-primary: #93c5fd;--ct-border-primary: #1e3a8a;--ct-icon-primary: #3b82f6;--ct-bg-secondary: #1c1926;--ct-title-secondary: #c4b5fd;--ct-border-secondary: #4c1d95;--ct-icon-secondary: #8b5cf6;--ct-bg-success: #141d18;--ct-title-success: #86efac;--ct-border-success: #14532d;--ct-icon-success: #22c55e;--ct-bg-warning: #1c1b14;--ct-title-warning: #fde047;--ct-border-warning: #713f12;--ct-icon-warning: #f59e0b;--ct-bg-danger: #1c1616;--ct-title-danger: #fca5a5;--ct-border-danger: #7f1d1d;--ct-icon-danger: #ef4444;--ct-text-desc: #a3a3a3;--ct-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5)}@media (prefers-color-scheme: dark){:root:not(.ct-theme-light){--ct-bg-default: #171717;--ct-title-default: #f9fafb;--ct-border-default: #262626;--ct-icon-default: #737373;--ct-bg-primary: #171c2b;--ct-title-primary: #93c5fd;--ct-border-primary: #1e3a8a;--ct-icon-primary: #3b82f6;--ct-bg-secondary: #1c1926;--ct-title-secondary: #c4b5fd;--ct-border-secondary: #4c1d95;--ct-icon-secondary: #8b5cf6;--ct-bg-success: #141d18;--ct-title-success: #86efac;--ct-border-success: #14532d;--ct-icon-success: #22c55e;--ct-bg-warning: #1c1b14;--ct-title-warning: #fde047;--ct-border-warning: #713f12;--ct-icon-warning: #f59e0b;--ct-bg-danger: #1c1616;--ct-title-danger: #fca5a5;--ct-border-danger: #7f1d1d;--ct-icon-danger: #ef4444;--ct-text-desc: #a3a3a3}}.ct-container{position:fixed;z-index:9999;display:grid;pointer-events:none}.ct-top-left{top:1.5rem;left:1.5rem;justify-items:start}.ct-top-center{top:1.5rem;left:50%;transform:translate(-50%);justify-items:center}.ct-top-right{top:1.5rem;right:1.5rem;justify-items:end}.ct-bottom-left{bottom:1.5rem;left:1.5rem;justify-items:start;align-items:end}.ct-bottom-center{bottom:1.5rem;left:50%;transform:translate(-50%);justify-items:center;align-items:end}.ct-bottom-right{bottom:1.5rem;right:1.5rem;justify-items:end;align-items:end}.ct-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.25rem;min-width:340px;max-width:440px;box-shadow:var(--ct-shadow);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:.875rem;line-height:1.25rem;grid-area:1 / 1;will-change:transform,opacity;animation:ct-enter var(--ct-duration) var(--ct-easing) forwards;transition:all var(--ct-duration) var(--ct-easing);border:1px solid transparent;position:relative;overflow:hidden;transform:translateY(var(--ct-y, 0)) scale(var(--ct-scale, 1))}.ct-toast.ct-leave{animation:ct-leave var(--ct-duration) var(--ct-easing) forwards}.ct-radius-none{border-radius:var(--ct-radius-none)}.ct-radius-sm{border-radius:var(--ct-radius-sm)}.ct-radius-md{border-radius:var(--ct-radius-md)}.ct-radius-lg{border-radius:var(--ct-radius-lg)}.ct-radius-full{border-radius:var(--ct-radius-full)}.ct-toast.ct-solid{border-color:transparent;color:#fff}.ct-toast.ct-solid .ct-title{color:#fff!important}.ct-toast.ct-solid .ct-description{color:#fffc!important}.ct-toast.ct-solid .ct-close,.ct-toast.ct-solid .ct-action-btn{color:#fff;opacity:.8}.ct-toast.ct-solid .ct-icon{background:#fff3;border:1px solid rgba(255,255,255,.3)}.ct-toast.ct-solid.ct-color-default{background:var(--ct-icon-default)}.ct-toast.ct-solid.ct-color-primary{background:var(--ct-icon-primary)}.ct-toast.ct-solid.ct-color-secondary{background:var(--ct-icon-secondary)}.ct-toast.ct-solid.ct-color-success{background:var(--ct-icon-success)}.ct-toast.ct-solid.ct-color-warning{background:var(--ct-icon-warning)}.ct-toast.ct-solid.ct-color-danger{background:var(--ct-icon-danger)}.ct-toast.ct-bordered{border-width:2px}.ct-toast.ct-bordered.ct-color-default{background:var(--ct-bg-default);border-color:var(--ct-border-default)}.ct-toast.ct-bordered.ct-color-primary{background:var(--ct-bg-primary);border-color:var(--ct-icon-primary);color:var(--ct-title-primary)}.ct-toast.ct-bordered.ct-color-secondary{background:var(--ct-bg-secondary);border-color:var(--ct-icon-secondary);color:var(--ct-title-secondary)}.ct-toast.ct-bordered.ct-color-success{background:var(--ct-bg-success);border-color:var(--ct-icon-success);color:var(--ct-title-success)}.ct-toast.ct-bordered.ct-color-warning{background:var(--ct-bg-warning);border-color:var(--ct-icon-warning);color:var(--ct-title-warning)}.ct-toast.ct-bordered.ct-color-danger{background:var(--ct-bg-danger);border-color:var(--ct-icon-danger);color:var(--ct-title-danger)}.ct-toast.ct-bordered .ct-title{color:inherit}.ct-toast.ct-bordered .ct-description{color:var(--ct-text-desc)}.ct-toast.ct-flat{box-shadow:none;border-color:transparent;background-image:none!important}.ct-toast.ct-flat:before{content:"";position:absolute;top:-30px;left:-30px;width:90px;height:90px;border-radius:50%;filter:blur(35px);opacity:.35;pointer-events:none;z-index:0}.ct-toast.ct-flat.ct-color-default{background:var(--ct-bg-default)}.ct-toast.ct-flat.ct-color-primary{background:var(--ct-bg-primary);color:var(--ct-title-primary)}.ct-toast.ct-flat.ct-color-secondary{background:var(--ct-bg-secondary);color:var(--ct-title-secondary)}.ct-toast.ct-flat.ct-color-success{background:var(--ct-bg-success);color:var(--ct-title-success)}.ct-toast.ct-flat.ct-color-warning{background:var(--ct-bg-warning);color:var(--ct-title-warning)}.ct-toast.ct-flat.ct-color-danger{background:var(--ct-bg-danger);color:var(--ct-title-danger)}.ct-toast.ct-flat .ct-title{color:inherit}.ct-toast.ct-flat .ct-description{color:var(--ct-text-desc)}.ct-toast.ct-flat.ct-color-primary:before{background:var(--ct-icon-primary)}.ct-toast.ct-flat.ct-color-secondary:before{background:var(--ct-icon-secondary)}.ct-toast.ct-flat.ct-color-success:before{background:var(--ct-icon-success)}.ct-toast.ct-flat.ct-color-warning:before{background:var(--ct-icon-warning)}.ct-toast.ct-flat.ct-color-danger:before{background:var(--ct-icon-danger)}.ct-icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;color:#fff;margin-top:.125rem;position:relative;z-index:1}.ct-icon svg{width:.875rem;height:.875rem}.ct-color-default .ct-icon{background:var(--ct-icon-default)}.ct-color-primary .ct-icon{background:var(--ct-icon-primary)}.ct-color-secondary .ct-icon{background:var(--ct-icon-secondary)}.ct-color-success .ct-icon{background:var(--ct-icon-success)}.ct-color-warning .ct-icon{background:var(--ct-icon-warning)}.ct-color-danger .ct-icon{background:var(--ct-icon-danger)}.ct-content{flex-grow:1;display:flex;flex-direction:column;gap:.25rem;position:relative;z-index:1}.ct-end-content{flex-shrink:0;display:flex;align-items:center;justify-content:center;margin-left:auto;padding-left:.5rem;position:relative;z-index:1}.ct-title{font-weight:600;font-size:.9375rem}.ct-color-default .ct-title{color:var(--ct-title-default)}.ct-color-primary .ct-title{color:var(--ct-title-primary)}.ct-color-secondary .ct-title{color:var(--ct-title-secondary)}.ct-color-success .ct-title{color:var(--ct-title-success)}.ct-color-warning .ct-title{color:var(--ct-title-warning)}.ct-color-danger .ct-title{color:var(--ct-title-danger)}.ct-description{font-size:.8125rem;color:var(--ct-text-desc);line-height:1.25rem}.ct-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto;margin-top:.125rem;position:relative;z-index:1}.ct-action-btn{background:transparent;border:none;font-size:.8125rem;font-weight:600;cursor:pointer;padding:.25rem .5rem;border-radius:var(--ct-radius-sm);transition:background .2s,opacity .2s;color:var(--ct-title-default);opacity:.9}.ct-action-btn:hover{background:#8080801a;opacity:1}.ct-close{background:transparent;border:none;cursor:pointer;padding:.25rem;border-radius:4px;opacity:.5;transition:opacity .2s,background .2s;color:var(--ct-text-desc);display:flex;align-items:center;justify-content:center}.ct-close:hover{opacity:1;background:#8080801a}.ct-close svg{width:1rem;height:1rem}.ct-progress-bar{position:absolute;bottom:0;left:0;height:3px;width:100%;transform-origin:left;z-index:2}.ct-color-default .ct-progress-bar{background:var(--ct-icon-default)}.ct-color-primary .ct-progress-bar{background:var(--ct-icon-primary)}.ct-color-secondary .ct-progress-bar{background:var(--ct-icon-secondary)}.ct-color-success .ct-progress-bar{background:var(--ct-icon-success)}.ct-color-warning .ct-progress-bar{background:var(--ct-icon-warning)}.ct-color-danger .ct-progress-bar{background:var(--ct-icon-danger)}@keyframes ct-enter{0%{transform:scale(.9) translateY(20px);opacity:0}to{transform:scale(var(--ct-scale, 1)) translateY(var(--ct-y, 0));opacity:1}}@keyframes ct-leave{0%{transform:scale(var(--ct-scale, 1)) translateY(var(--ct-y, 0));opacity:1}to{transform:scale(.9) translateY(20px);opacity:0}}@keyframes ct-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.ct-spinner{animation:ct-spin 1s linear infinite;color:#fff}@keyframes ct-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}

package/dist/types/index.d.ts ADDED Viewed

@@ -0,0 +1,34 @@
+export type ToastVariant = 'solid' | 'bordered' | 'flat';
+export type ToastColor = 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger';
+export type ToastPlacement = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export interface ToastOptions {
+    title?: string;
+    description?: string;
+    variant?: ToastVariant;
+    color?: ToastColor;
+    placement?: ToastPlacement;
+    duration?: number;
+    progressBar?: boolean;
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    icon?: string | HTMLElement | boolean;
+    endContent?: string | HTMLElement | ((container: HTMLElement) => void) | any;
+    id?: string;
+    customStyle?: Partial<CSSStyleDeclaration>;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    onClose?: () => void;
+    promise?: Promise<any>;
+    promiseMessages?: {
+        loading: string | HTMLElement;
+        success: string | HTMLElement | ((data: any) => string | HTMLElement);
+        error: string | HTMLElement | ((err: any) => string | HTMLElement);
+    };
+}
+export type ToastType = 'normal' | 'loading' | 'success' | 'error' | 'warning' | 'info';
+export interface ToastState extends ToastOptions {
+    type: ToastType;
+    createdAt: number;
+    element?: HTMLElement;
+}

package/dist/utils/icons.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+export declare const icons: {
+    default: string;
+    primary: string;
+    secondary: string;
+    success: string;
+    warning: string;
+    danger: string;
+    loading: string;
+    close: string;
+};

package/package.json ADDED Viewed

@@ -0,0 +1,70 @@
+{
+  "name": "crisp-toast",
+  "version": "1.0.0",
+  "description": "A lightweight, beautiful, and highly customizable vanilla JS toast notification library.",
+  "type": "module",
+  "main": "./dist/crisp-toast.umd.cjs",
+  "module": "./dist/crisp-toast.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/crisp-toast.js",
+      "require": "./dist/crisp-toast.umd.cjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "toast",
+    "toast-notification",
+    "notification",
+    "javascript-toast",
+    "vanilla-js",
+    "alert",
+    "toast-library",
+    "ui-library",
+    "frontend",
+    "crisp-toast"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/your-username/crisp-toast.git"
+  },
+  "homepage": "https://github.com/your-username/crisp-toast#readme",
+  "bugs": {
+    "url": "https://github.com/your-username/crisp-toast/issues"
+  },
+  "engines": {
+    "node": ">=16"
+  },
+  "author": "Ahmad",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^25.4.0",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.7.0"
+  }
+}