@r01al/simple-toast 1.0.0

package/dist/simple-toast.umd.js

@@ -0,0 +1,406 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
+  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.SimpleToast = {}));
+})(this, (function (exports) { 'use strict';
+
+  const defaultConfig = {
+    position: 'tr',
+    duration: 3000,
+    theme: 'l',
+    dismissible: true,
+    maxToasts: 10
+  };
+
+  let globalConfig = { ...defaultConfig };
+
+  function configure(config) {
+    globalConfig = { ...globalConfig, ...config };
+  }
+
+  function getConfig() {
+    return globalConfig;
+  }
+
+  let stylesInjected = false;
+
+  function injectStyles() {
+    if (stylesInjected) return;
+    
+    const style = document.createElement('style');
+    style.setAttribute('data-r01st', '');
+    style.textContent = `
+.r01st-container {
+  position: fixed;
+  z-index: 9999;
+  pointer-events: none;
+  padding: 16px;
+}
+.r01st-container[data-position="tl"] {
+  top: 0;
+  left: 0;
+}
+
+.r01st-container[data-position="tc"] {
+  top: 0;
+  left: 50%;
+  margin-left: -210px;
+}
+
+.r01st-container[data-position="tr"] {
+  top: 0;
+  right: 0;
+}
+.r01st-container[data-position="ml"] {
+  top: 50%;
+  left: 0;
+  margin-top: -50px;
+}
+
+.r01st-container[data-position="mc"] {
+  top: 50%;
+  left: 50%;
+  margin-left: -210px;
+  margin-top: -50px;
+}
+
+.r01st-container[data-position="mr"] {
+  top: 50%;
+  right: 0;
+  margin-top: -50px;
+}
+.r01st-container[data-position="bl"] {
+  bottom: 0;
+  left: 0;
+}
+
+.r01st-container[data-position="bc"] {
+  bottom: 0;
+  left: 50%;
+  margin-left: -210px;
+}
+
+.r01st-container[data-position="br"] {
+  bottom: 0;
+  right: 0;
+}
+.r01st {
+  pointer-events: auto;
+  position: relative;
+  min-width: 280px;
+  max-width: 420px;
+  padding: 16px;
+  margin-bottom: 16px;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  font-size: 14px;
+  line-height: 1.5;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  color: #ffffff;
+  opacity: 0;
+  transition: opacity 0.3s ease, margin-top 0.3s ease;
+  margin-top: -20px;
+}
+.r01st-show {
+  opacity: 1;
+  margin-top: 0;
+}
+.r01st-container[data-theme="l"] .r01st-success {
+  background-color: #10b981;
+}
+
+.r01st-container[data-theme="l"] .r01st-error {
+  background-color: #ef4444;
+}
+
+.r01st-container[data-theme="l"] .r01st-info {
+  background-color: #3b82f6;
+}
+
+.r01st-container[data-theme="l"] .r01st-warning {
+  background-color: #f59e0b;
+}
+.r01st-container[data-theme="d"] .r01st-success {
+  background-color: #059669;
+}
+
+.r01st-container[data-theme="d"] .r01st-error {
+  background-color: #dc2626;
+}
+
+.r01st-container[data-theme="d"] .r01st-info {
+  background-color: #2563eb;
+}
+
+.r01st-container[data-theme="d"] .r01st-warning {
+  background-color: #d97706;
+}
+.r01st-content {
+  display: inline-block;
+  width: 100%;
+  vertical-align: top;
+  padding-right: 30px;
+}
+.r01st-icon {
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  margin-right: 12px;
+}
+
+.r01st-icon svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+.r01st-message {
+  display: inline-block;
+  vertical-align: middle;
+  word-wrap: break-word;
+  max-width: calc(100% - 32px);
+}
+.r01st-close {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  background: transparent;
+  border: none;
+  color: #ffffff;
+  font-size: 24px;
+  line-height: 1;
+  cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
+  text-align: center;
+  border-radius: 4px;
+  opacity: 0.8;
+}
+
+.r01st-close:hover {
+  background-color: rgba(255, 255, 255, 0.2);
+  opacity: 1;
+}
+
+.r01st-close:focus {
+  outline: 2px solid #ffffff;
+  outline-offset: 2px;
+}
+.r01st-container[data-position^="b"] .r01st {
+  margin-top: 0;
+  margin-bottom: -20px;
+}
+
+.r01st-container[data-position^="b"] .r01st-show {
+  margin-bottom: 16px;
+}
+@media (max-width: 480px) {
+  .r01st-container {
+    left: 0 !important;
+    right: 0 !important;
+    margin-left: 0 !important;
+    padding: 8px;
+  }
+
+  .r01st {
+    min-width: auto;
+    max-width: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .r01st {
+    transition: opacity 0.2s;
+    margin-top: 0;
+  }
+}
+@media print {
+  .r01st-container {
+    display: none;
+  }
+}
+`;
+    
+    document.head.appendChild(style);
+    stylesInjected = true;
+  }
+
+  let container = null;
+
+  function getContainer(position, theme) {
+    injectStyles();
+    
+    if (container && (container.getAttribute('data-position') !== position || container.getAttribute('data-theme') !== theme)) {
+      container.parentNode.removeChild(container);
+      container = null;
+    }
+
+    if (!container) {
+      container = document.createElement('div');
+      container.className = 'r01st-container';
+      container.setAttribute('role', 'region');
+      container.setAttribute('aria-label', 'Notifications');
+      container.setAttribute('aria-live', 'polite');
+      container.setAttribute('data-position', position);
+      container.setAttribute('data-theme', theme);
+      document.body.appendChild(container);
+    }
+
+    return container;
+  }
+
+  function cleanupContainer(activeCount) {
+    if (container && activeCount === 0) {
+      container.parentNode.removeChild(container);
+      container = null;
+    }
+  }
+
+  function getIcon(type) {
+    const icons = {
+      success: '<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>',
+      error: '<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>',
+      info: '<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>',
+      warning: '<svg viewBox="0 0 20 20" fill="currentColor"><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>'
+    };
+    return icons[type] || icons.info;
+  }
+
+  function createToastElement(message, type, dismissible, className, id, onClose) {
+    const toastEl = document.createElement('div');
+    toastEl.className = 'r01st r01st-' + type + (className ? ' ' + className : '');
+    toastEl.setAttribute('role', 'alert');
+    toastEl.setAttribute('data-toast-id', id);
+
+    const content = document.createElement('div');
+    content.className = 'r01st-content';
+    
+    const icon = document.createElement('span');
+    icon.className = 'r01st-icon';
+    icon.innerHTML = getIcon(type);
+    icon.setAttribute('aria-hidden', 'true');
+    content.appendChild(icon);
+
+    const messageEl = document.createElement('span');
+    messageEl.className = 'r01st-message';
+    messageEl.textContent = message;
+    content.appendChild(messageEl);
+
+    toastEl.appendChild(content);
+
+    if (dismissible) {
+      const closeBtn = document.createElement('button');
+      closeBtn.className = 'r01st-close';
+      closeBtn.innerHTML = '&times;';
+      closeBtn.setAttribute('aria-label', 'Close notification');
+      closeBtn.onclick = onClose;
+      toastEl.appendChild(closeBtn);
+    }
+
+    return toastEl;
+  }
+
+  function showToast(element) {
+    requestAnimationFrame(() => {
+      element.className = element.className + ' r01st-show';
+    });
+  }
+
+  function hideToast(element, callback) {
+    element.className = element.className.replace(' r01st-show', '');
+
+    setTimeout(() => {
+      if (element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+      if (callback) callback();
+    }, 300);
+  }
+
+  let toastCounter = 0;
+  const activeToasts = new Map();
+
+  function createToast(message, options = {}) {
+    const config = { ...getConfig(), ...options };
+    const { position, duration, dismissible, theme, className, type = 'info' } = config;
+
+    const id = ++toastCounter;
+
+    if (activeToasts.size >= getConfig().maxToasts) {
+      const firstToast = activeToasts.keys().next().value;
+      dismissToast(firstToast);
+    }
+
+    const container = getContainer(position, theme);
+
+    const handleClose = () => dismissToast(id);
+
+    const toastEl = createToastElement(message, type, dismissible, className, id, handleClose);
+
+    container.appendChild(toastEl);
+
+    showToast(toastEl);
+
+    const toastData = {
+      element: toastEl,
+      timeoutId: null
+    };
+
+    if (duration > 0) {
+      toastData.timeoutId = setTimeout(() => dismissToast(id), duration);
+    }
+
+    activeToasts.set(id, toastData);
+
+    return id;
+  }
+
+  function dismissToast(id) {
+    const toastData = activeToasts.get(id);
+    if (!toastData) return;
+
+    const { element, timeoutId } = toastData;
+
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    activeToasts.delete(id);
+
+    hideToast(element, () => {
+      cleanupContainer(activeToasts.size);
+    });
+  }
+
+  function dismissAllToasts() {
+    const ids = Array.from(activeToasts.keys());
+    ids.forEach(id => dismissToast(id));
+  }
+
+  /**
+   * Display a toast notification
+   * @param {string} message - The message to display
+   * @param {Object} options - Toast options
+   * @returns {number} Toast ID
+   */
+  function toast(message, options = {}) {
+    return createToast(message, options);
+  }
+
+  // Shorthand methods
+  toast.success = (message, options = {}) => toast(message, { ...options, type: 'success' });
+  toast.error = (message, options = {}) => toast(message, { ...options, type: 'error' });
+  toast.info = (message, options = {}) => toast(message, { ...options, type: 'info' });
+  toast.warning = (message, options = {}) => toast(message, { ...options, type: 'warning' });
+
+  // Export dismiss methods
+  toast.dismiss = dismissToast;
+  toast.dismissAll = dismissAllToasts;
+
+  exports.configure = configure;
+  exports.default = toast;
+  exports.toast = toast;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));

package/dist/toast.d.ts

@@ -0,0 +1,110 @@
+export interface ToastOptions {
+  /**
+   * Type of toast notification
+   * @default 'info'
+   */
+  type?: 'success' | 'error' | 'info' | 'warning';
+
+  /**
+   * Duration in milliseconds before auto-dismiss (0 = no auto-dismiss)
+   * @default 3000
+   */
+  duration?: number;
+
+  /**
+   * Position of the toast on screen
+   * @default 'top-right'
+   */
+  position?: 
+    | 'top-left' 
+    | 'top-center' 
+    | 'top-right' 
+    | 'bottom-left' 
+    | 'bottom-center' 
+    | 'bottom-right' 
+    | 'middle-left' 
+    | 'middle-center' 
+    | 'middle-right';
+
+  /**
+   * Whether to show a close button
+   * @default true
+   */
+  dismissible?: boolean;
+
+  /**
+   * Theme to apply
+   * @default 'light'
+   */
+  theme?: 'light' | 'dark' | 'custom';
+
+  /**
+   * Custom CSS class to add to the toast
+   */
+  className?: string;
+}
+
+export interface ToastConfig extends ToastOptions {
+  /**
+   * Maximum number of toasts to show at once
+   * @default 10
+   */
+  maxToasts?: number;
+}
+
+/**
+ * Configure global toast settings
+ */
+export function configure(config: ToastConfig): void;
+
+/**
+ * Display a toast notification
+ * @param message - The message to display
+ * @param options - Toast options
+ * @returns Toast ID
+ */
+export function toast(message: string, options?: ToastOptions): number;
+
+export namespace toast {
+  /**
+   * Display a success toast
+   */
+  export function success(message: string, options?: ToastOptions): number;
+
+  /**
+   * Display an error toast
+   */
+  export function error(message: string, options?: ToastOptions): number;
+
+  /**
+   * Display an info toast
+   */
+  export function info(message: string, options?: ToastOptions): number;
+
+  /**
+   * Display a warning toast
+   */
+  export function warning(message: string, options?: ToastOptions): number;
+
+  /**
+   * Dismiss a specific toast by ID
+   */
+  export function dismiss(id: number): void;
+
+  /**
+   * Dismiss all active toasts
+   */
+  export function dismissAll(): void;
+}
+
+/**
+ * Dismiss a specific toast by ID
+ */
+export function dismiss(id: number): void;
+
+/**
+ * Dismiss all active toasts
+ */
+export function dismissAll(): void;
+
+export default toast;

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@r01al/simple-toast",
+  "version": "1.0.0",
+  "description": "Lightweight, framework-agnostic toast notification library with zero dependencies",
+  "keywords": [
+    "toast",
+    "notification",
+    "alert",
+    "message",
+    "vanilla-js",
+    "framework-agnostic"
+  ],
+  "license": "MIT",
+  "author": "r01al",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/r01al/simple-toast.git"
+  },
+  "bugs": {
+    "url": "https://github.com/r01al/simple-toast/issues"
+  },
+  "homepage": "https://github.com/r01al/simple-toast#readme",
+  "main": "dist/simple-toast.cjs.js",
+  "module": "dist/simple-toast.esm.js",
+  "browser": "dist/simple-toast.umd.js",
+  "types": "dist/toast.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rollup -c && cp src/toast.d.ts dist/toast.d.ts",
+    "dev": "rollup -c -w",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/preset-env": "^7.28.5",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "rollup": "^4.9.4"
+  }
+}