@mi1y/toast-mi1y 0.0.1

package/dist/components/toast.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+import '../toast.css';
+import { toast } from "../toasts/store.js";
+import type { Toast } from "../toasts/interfaces.js";
+import { fly } from 'svelte/transition';
+
+let hoveredToastId= $state<string | null>(null);
+let pausedToasts = $state<Map<string, {pauseTime: number, remainingDuration: number}>>(new Map());
+
+const toastsStore = toast.toasts;
+function getToastsStyles(toastType: string) {
+    switch (toastType) {
+        case 'success':
+            return 'bg-emerald-800 border-emerald-700 text-emerald-100';
+        case 'error':
+            return 'bg-red-800 border-red-700 text-red-100';
+        case 'warning':
+            return 'bg-orange-800 border-orange-700 text-orange-100';
+        case 'info':
+            return 'bg-blue-800 border-blue-700 text-blue-100';
+        default:
+            return 'bg-slate-800 border-slate-700 text-slate-100';
+    }
+}   
+function getIconPath(toastType: string) {
+    switch (toastType) {
+        case 'success':
+            return 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z';
+        case 'error':
+            return 'M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z';
+        case 'warning':
+            return 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16c-.77.833.192 2.5 1.732 2.5z';
+        case 'info':
+            return 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z';
+        default:
+            return 'M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z';
+    }
+}
+
+function pauseTimer(toastId: string) {
+    hoveredToastId = toastId;
+
+    if (!pausedToasts.has(toastId)) {
+        const toastItem = $toastsStore.find((t: Toast) => t.id === toastId);
+        if (toastItem && toastItem.duration > 0) {
+            const remainingDuration = toastItem.duration; 
+            pausedToasts.set(toastId, { 
+                pauseTime: Date.now(), 
+                remainingDuration 
+            });
+            
+            toast.pause(toastId);
+        }
+    }
+}
+
+function resumeTimer(toastId: string) {
+    hoveredToastId = null;
+    
+    const pausedInfo = pausedToasts.get(toastId);
+    if (pausedInfo) {
+        toast.resume(toastId, pausedInfo.remainingDuration);
+        pausedToasts.delete(toastId);
+    }
+}
+</script>
+
+<div class="fixed bottom-4 right-4 z-50 space-y-3 max-w-sm">
+    {#each $toastsStore as toastItem (toastItem.id)}
+        <div 
+            class="toast-container border rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300 {getToastsStyles(toastItem.type)}"
+            class:hovered={hoveredToastId === toastItem.id}
+            in:fly={{ x: 300, duration: 300 }}
+            out:fly={{ x: 300, duration: toastItem.isConfirm ? 0 : 300 }}
+            role="alert"
+            onmouseenter={() => pauseTimer(toastItem.id)}
+            onmouseleave={() => resumeTimer(toastItem.id)}
+        >
+            <div class="flex items-start gap-3 p-4">
+                <svg class="w-5 h-5 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={getIconPath(toastItem.type)}></path>
+                </svg>
+                
+                <div class="flex-1 min-w-0">
+                    <p class="text-sm font-medium wrap-break-words">{toastItem.message}</p>
+                </div>
+                
+                <button
+                    class="text-current opacity-70 hover:opacity-100 transition-opacity shrink-0"
+                    aria-label="Close notification"
+                    onclick={() => toast.remove(toastItem.id)}
+                >
+                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                </button>
+            </div>
+            
+            {#if toastItem.isConfirm}
+                <div class="flex justify-end gap-2 px-4 pb-4 border-t border-current/20 pt-3">
+                    <button
+                        class="px-3 py-1.5 text-xs font-medium bg-white/20 hover:bg-white/30 rounded transition-colors"
+                        onclick={toastItem.onConfirm}
+                    >
+                        Confirm
+                    </button>
+                    <button
+                        class="px-3 py-1.5 text-xs font-medium bg-black/20 hover:bg-black/30 rounded transition-colors"
+                        onclick={toastItem.onCancel}
+                    >
+                        Cancel
+                    </button>
+                </div>
+            {/if}
+            
+        {#if toastItem.duration && toastItem.duration > 0 && !toastItem.isConfirm}
+            <div class="h-1 bg-black/20 rounded-b-lg overflow-hidden">
+                <div 
+                    class="h-full bg-white/40 rounded-b-lg progress-bar"
+                    class:paused={hoveredToastId === toastItem.id}
+                    style="animation: shrink {toastItem.duration}ms linear forwards;"
+                ></div>
+            </div>
+        {/if}
+        </div>
+    {/each}
+</div>
+
+<style>
+.toast-container.hovered {
+    transform: scale(1.02);
+    box-shadow: 0 10px 25px -3px rgba(0, 0, 0, 0.3);
+}
+
+.progress-bar {
+    transform-origin: left;
+}
+</style>

package/dist/components/toast.svelte.d.ts

@@ -0,0 +1,5 @@
+import '../toast.css';
+import type { Toast } from "../toasts/interfaces.js";
+declare const Toast: import("svelte").Component<Record<string, never>, {}, "">;
+type Toast = ReturnType<typeof Toast>;
+export default Toast;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { toast } from './toasts/store.js';
+export { default as InitToast } from './components/toast.svelte';

package/dist/index.js

@@ -0,0 +1,2 @@
+export { toast } from './toasts/store.js';
+export { default as InitToast } from './components/toast.svelte';

package/dist/toast.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';

package/dist/toasts/interfaces.d.ts

@@ -0,0 +1,15 @@
+export type ToastType = "success" | "error" | "info" | "warning";
+export interface Toast {
+    id: string;
+    message: string;
+    type: ToastType;
+    duration: number;
+    isConfirm?: boolean;
+    onConfirm?: () => void;
+    onCancel?: () => void;
+}
+export interface CreateToastData {
+    message: string;
+    type: ToastType;
+    duration: number;
+}

package/dist/toasts/interfaces.js

@@ -0,0 +1 @@
+export {};

package/dist/toasts/store.d.ts

@@ -0,0 +1,22 @@
+import type { Toast, CreateToastData } from './interfaces.js';
+declare class ToastStore {
+    private _toasts;
+    private activeTimers;
+    private _defaultDuration;
+    get toasts(): {
+        subscribe: (this: void, run: import("svelte/store").Subscriber<Toast[]>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
+        set: (this: void, value: Toast[]) => void;
+        update: (this: void, updater: import("svelte/store").Updater<Toast[]>) => void;
+    };
+    show(data: CreateToastData): `${string}-${string}-${string}-${string}-${string}`;
+    remove(toastId: string): void;
+    success(message: string, duration?: number): `${string}-${string}-${string}-${string}-${string}`;
+    error(message: string, duration?: number): `${string}-${string}-${string}-${string}-${string}`;
+    info(message: string, duration?: number): `${string}-${string}-${string}-${string}-${string}`;
+    warning(message: string, duration?: number): `${string}-${string}-${string}-${string}-${string}`;
+    pause(toastId: string): void;
+    resume(toastId: string, remainingDuration: number): void;
+    confirm(message: string): Promise<boolean>;
+}
+export declare const toast: ToastStore;
+export {};

package/dist/toasts/store.js

@@ -0,0 +1,78 @@
+import { writable } from 'svelte/store';
+class ToastStore {
+    _toasts = writable([]);
+    activeTimers = new Map();
+    _defaultDuration = 3000;
+    get toasts() {
+        return {
+            subscribe: this._toasts.subscribe,
+            set: this._toasts.set,
+            update: this._toasts.update
+        };
+    }
+    show(data) {
+        const id = crypto.randomUUID();
+        const toast = {
+            id,
+            message: data.message,
+            type: data.type,
+            duration: data.duration ?? this._defaultDuration,
+        };
+        this._toasts.update(toasts => [...toasts, toast]);
+        this.activeTimers.set(id, setTimeout(() => this.remove(id), toast.duration));
+        return id;
+    }
+    remove(toastId) {
+        const timerId = this.activeTimers.get(toastId);
+        if (timerId) {
+            clearTimeout(timerId);
+            this.activeTimers.delete(toastId);
+        }
+        this._toasts.update(toasts => toasts.filter(toast => toast.id !== toastId));
+    }
+    success(message, duration) {
+        return this.show({ message, type: 'success', duration: duration ?? this._defaultDuration });
+    }
+    error(message, duration) {
+        return this.show({ message, type: 'error', duration: duration ?? this._defaultDuration });
+    }
+    info(message, duration) {
+        return this.show({ message, type: 'info', duration: duration ?? this._defaultDuration });
+    }
+    warning(message, duration) {
+        return this.show({ message, type: 'warning', duration: duration ?? this._defaultDuration });
+    }
+    pause(toastId) {
+        const timerId = this.activeTimers.get(toastId);
+        if (timerId) {
+            clearTimeout(timerId);
+            this.activeTimers.delete(toastId);
+        }
+    }
+    resume(toastId, remainingDuration) {
+        const newTimerId = setTimeout(() => this.remove(toastId), remainingDuration);
+        this.activeTimers.set(toastId, newTimerId);
+    }
+    confirm(message) {
+        return new Promise((resolve) => {
+            const id = crypto.randomUUID();
+            const toast = {
+                id,
+                message,
+                type: 'info',
+                duration: 0,
+                isConfirm: true,
+                onConfirm: () => {
+                    resolve(true);
+                    this.remove(id);
+                },
+                onCancel: () => {
+                    resolve(false);
+                    this.remove(id);
+                },
+            };
+            this._toasts.update(toasts => [...toasts, toast]);
+        });
+    }
+}
+export const toast = new ToastStore();

package/package.json

@@ -0,0 +1,98 @@
+{
+	"name": "@mi1y/toast-mi1y",
+	"version": "0.0.1",
+	"description": "A simple and flexible toast notification library for Svelte 5",
+	"keywords": [
+		"svelte",
+		"svelte5",
+		"sveltekit",
+		"toast",
+		"notification",
+		"ui",
+		"alert"
+	],
+	"homepage": "https://github.com/Mi1y/toast-mi1y#readme",
+	"bugs": {
+		"url": "https://github.com/Mi1y/toast-mi1y/issues"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/Mi1y/toast-mi1y.git"
+	},
+	"license": "MIT",
+	"author": "mi1y",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
+		},
+		"./styles": {
+			"default": "./dist/toast.css"
+		}
+	},
+	"types": "./dist/index.d.ts",
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"publishConfig": {
+		"access": "public",
+		"registry": "https://registry.npmjs.org"
+	},
+	"devDependencies": {
+		"@eslint/compat": "^2.0.1",
+		"@eslint/js": "^9.39.2",
+		"@sveltejs/adapter-auto": "^7.0.0",
+		"@sveltejs/kit": "^2.50.1",
+		"@sveltejs/package": "^2.5.7",
+		"@sveltejs/vite-plugin-svelte": "^6.2.4",
+		"@tailwindcss/typography": "^0.5.19",
+		"@tailwindcss/vite": "^4.1.18",
+		"@types/node": "^22",
+		"eslint": "^9.39.2",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.14.0",
+		"globals": "^17.1.0",
+		"prettier": "^3.8.1",
+		"prettier-plugin-svelte": "^3.4.1",
+		"prettier-plugin-tailwindcss": "^0.7.2",
+		"publint": "^0.3.17",
+		"svelte": "^5.48.2",
+		"svelte-check": "^4.3.5",
+		"tailwindcss": "^4.1.18",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.53.1",
+		"vite": "^7.3.1"
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0",
+		"tailwindcss": "^4.0.0"
+	},
+	"peerDependenciesMeta": {
+		"tailwindcss": {
+			"optional": true
+		}
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"engines": {
+		"node": ">=18.0.0"
+	}
+}