@soft-toast/vue 1.0.0

package/dist/plugin.d.ts

@@ -0,0 +1,7 @@
+import { App } from 'vue';
+import { ToastPluginOptions } from './types';
+export declare const SoftToastPlugin: {
+    install(app: App, options?: ToastPluginOptions): void;
+};
+export declare const getToastOptions: () => ToastPluginOptions;
+//# sourceMappingURL=plugin.d.ts.map

package/dist/plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../src/plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,KAAK,GAAG,EAAE,MAAM,KAAK,CAAA;AAC5C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAEjD,OAAO,oBAAoB,CAAA;AAwB3B,eAAO,MAAM,eAAe;iBACb,GAAG,YAAW,kBAAkB;CAqD9C,CAAA;AAGD,eAAO,MAAM,eAAe,0BAAsB,CAAA"}

package/dist/stores/toastStore.d.ts

@@ -0,0 +1,25 @@
+import { Toast, ToastOptions, ToastType, ToastPosition, ToastPromiseMessages } from '../types';
+import { ComputedRef } from 'vue';
+export interface ToastStore {
+    toasts: ComputedRef<Toast[]>;
+    getToastsByPosition: (position: ToastPosition) => ComputedRef<Toast[]>;
+    add: (options: ToastOptions) => string;
+    update: (id: string, options: Partial<ToastOptions>) => void;
+    dismiss: (id?: string | {
+        type?: ToastType | ToastType[];
+    }) => void;
+    pause: (id: string) => void;
+    resume: (id: string) => void;
+    expand: (id: string) => void;
+    collapse: (id: string) => void;
+    success: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) => string;
+    error: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) => string;
+    warning: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) => string;
+    info: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) => string;
+    loading: (title: string, options?: Omit<ToastOptions, 'type' | 'title'>) => string;
+    promise: <T>(promiseFn: Promise<T>, messages: ToastPromiseMessages, options?: Omit<ToastOptions, 'type' | 'promise' | 'promiseMessages'>) => Promise<T>;
+    clearAll: () => void;
+    remove: (id: string) => void;
+}
+export declare const toastStore: ToastStore;
+//# sourceMappingURL=toastStore.d.ts.map

package/dist/stores/toastStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toastStore.d.ts","sourceRoot":"","sources":["../../src/stores/toastStore.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAsPnG,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,KAAK,CAAA;AAEtC,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,WAAW,CAAC,KAAK,EAAE,CAAC,CAAA;IAC5B,mBAAmB,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,WAAW,CAAC,KAAK,EAAE,CAAC,CAAA;IACtE,GAAG,EAAE,CAAC,OAAO,EAAE,YAAY,KAAK,MAAM,CAAA;IACtC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAA;IAC5D,OAAO,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,GAAG;QAAE,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;KAAE,KAAK,IAAI,CAAA;IACnE,KAAK,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5B,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC9B,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,MAAM,CAAA;IAClF,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,MAAM,CAAA;IAChF,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,MAAM,CAAA;IAClF,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,MAAM,CAAA;IAC/E,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAC,KAAK,MAAM,CAAA;IAClF,OAAO,EAAE,CAAC,CAAC,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,oBAAoB,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,CAAA;IACvJ,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CAC7B;AAED,eAAO,MAAM,UAAU,EAAE,UAkBxB,CAAA"}

package/dist/stores/toastStore.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=toastStore.test.d.ts.map

package/dist/stores/toastStore.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toastStore.test.d.ts","sourceRoot":"","sources":["../../src/stores/toastStore.test.ts"],"names":[],"mappings":""}

package/dist/style.css

@@ -0,0 +1 @@
+.soft-toast-stack[data-v-3699e296]{position:relative;pointer-events:auto;padding-top:32px;padding-bottom:32px;margin-top:-32px;margin-bottom:-32px;width:100%;max-width:100%;display:flex;flex-direction:column}.soft-toast-list[data-v-3699e296]{position:relative;width:100%;flex-shrink:0}.soft-toast-stack[data-direction=up] .soft-toast-list[data-v-3699e296]{margin-top:auto}.soft-toast-stack[data-direction=down] .soft-toast-list[data-v-3699e296]{margin-bottom:auto}.soft-toast-list[data-v-3699e296]>.soft-toast-item{position:absolute;width:100%}.soft-toast-container[data-position$=left] .soft-toast-list[data-v-3699e296]>.soft-toast-item{left:0;right:auto}.soft-toast-container[data-position$=right] .soft-toast-list[data-v-3699e296]>.soft-toast-item{right:0;left:auto}.soft-toast-container[data-position$=center] .soft-toast-list[data-v-3699e296]>.soft-toast-item{left:50%;transform:translate(-50%)}.soft-toast-stack[data-direction=down][data-v-3699e296] .soft-toast-list>.soft-toast-item{top:0;bottom:auto}.soft-toast-stack[data-direction=up][data-v-3699e296] .soft-toast-list>.soft-toast-item{top:auto;bottom:0}:root{--st-bg-default: #ffffff;--st-bg-success: #dcfce7;--st-bg-error: #fee2e2;--st-bg-warning: #fef3c7;--st-bg-info: #dbeafe;--st-text-default: #1f2937;--st-text-success: #166534;--st-text-error: #991b1b;--st-text-warning: #92400e;--st-text-info: #1e40af;--st-border-default: #e5e7eb;--st-border-success: #86efac;--st-border-error: #fca5a5;--st-border-warning: #fcd34d;--st-border-info: #93c5fd;--st-icon-success: #22c55e;--st-icon-error: #ef4444;--st-icon-warning: #f59e0b;--st-icon-info: #3b82f6;--st-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--st-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--st-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--st-shadow-glow: 0 0 20px rgb(0 0 0 / .05);--st-toast-min-width: 320px;--st-toast-max-width: 420px;--st-toast-padding: 16px;--st-toast-gap: 12px;--st-border-radius: 9999px;--st-border-radius-blob: 24px;--st-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--st-font-size-sm: 12px;--st-font-size-base: 14px;--st-font-size-lg: 16px;--st-font-weight-normal: 400;--st-font-weight-medium: 500;--st-font-weight-semibold: 600;--st-transition-fast: .15s;--st-transition-base: .3s;--st-transition-slow: .5s;--st-z-index: 9999}[data-soft-toast-theme=dark]{--st-bg-default: #1f2937;--st-bg-success: #14532d;--st-bg-error: #7f1d1d;--st-bg-warning: #713f12;--st-bg-info: #1e3a8a;--st-text-default: #f9fafb;--st-text-success: #86efac;--st-text-error: #fca5a5;--st-text-warning: #fcd34d;--st-text-info: #93c5fd;--st-border-default: #374151;--st-border-success: #166534;--st-border-error: #991b1b;--st-border-warning: #92400e;--st-border-info: #1e40af;--st-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .3);--st-shadow-md: 0 4px 6px -1px rgb(0 0 0 / .4), 0 2px 4px -2px rgb(0 0 0 / .3);--st-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .4), 0 4px 6px -4px rgb(0 0 0 / .3);--st-shadow-glow: 0 0 30px rgb(0 0 0 / .3)}.soft-toast-container{position:fixed;z-index:var(--st-z-index);pointer-events:none;display:flex;flex-direction:column;gap:10px;width:min(var(--st-width, 356px),calc(100vw - 64px));max-width:calc(100vw - 64px)}.soft-toast-container[data-position=top-left]{top:32px;left:32px}.soft-toast-container[data-position=top-center]{top:32px;left:50%;transform:translate(-50%)}.soft-toast-container[data-position=top-right]{top:32px;right:32px}.soft-toast-container[data-position=bottom-left]{bottom:32px;left:32px}.soft-toast-container[data-position=bottom-center]{bottom:32px;left:50%;transform:translate(-50%)}.soft-toast-container[data-position=bottom-right]{bottom:32px;right:32px}.soft-toast-container[data-position=top]{top:32px;left:50%;transform:translate(-50%)}.soft-toast-container[data-position=bottom]{bottom:32px;left:50%;transform:translate(-50%)}.soft-toast-container[data-position=left]{top:50%;left:32px;transform:translateY(-50%)}.soft-toast-container[data-position=right]{top:50%;right:32px;transform:translateY(-50%)}.soft-toast-container[data-position=center]{top:50%;left:50%;transform:translate(-50%,-50%)}.soft-toast-item{pointer-events:auto;position:relative;box-sizing:border-box;width:100%;min-width:260px;max-width:360px;padding:12px 16px;border-radius:18px;font-family:var(--st-font-family);font-size:13.5px;line-height:1.45;cursor:default;-webkit-user-select:none;user-select:none;will-change:transform,opacity;touch-action:pan-y;background:#fffffffa;border:1px solid rgba(226,232,240,.8);box-shadow:0 10px 30px -5px #00000014,inset 0 1px #fff}.soft-toast-item--swipeable{cursor:grab}.soft-toast-item--swipeable:active{cursor:grabbing}.soft-toast-container[data-position=top-left] .soft-toast-item,.soft-toast-container[data-position=left] .soft-toast-item{border-top-left-radius:4px}.soft-toast-container[data-position=bottom-left] .soft-toast-item{border-bottom-left-radius:4px}.soft-toast-container[data-position=top-right] .soft-toast-item,.soft-toast-container[data-position=right] .soft-toast-item{border-top-right-radius:4px}.soft-toast-container[data-position=bottom-right] .soft-toast-item{border-bottom-right-radius:4px}.soft-toast-item[data-type=default]{--st-accent: #9ca3af;--st-icon-color: #64748b}.soft-toast-item[data-type=success]{--st-accent: #34d399;--st-icon-color: #059669}.soft-toast-item[data-type=error]{--st-accent: #fb7185;--st-icon-color: #e11d48}.soft-toast-item[data-type=warning]{--st-accent: #fbbf24;--st-icon-color: #d97706}.soft-toast-item[data-type=info]{--st-accent: #60a5fa;--st-icon-color: #3b82f6}.soft-toast-item[data-type=promise]{--st-accent: #a78bfa;--st-icon-color: #7c3aed}.soft-toast-content{display:flex;align-items:flex-start;gap:11px}.soft-toast-icon{flex-shrink:0;width:24px;height:24px;margin-top:1px;display:flex;align-items:center;justify-content:center;color:var(--st-icon-color, #64748b)}.soft-toast-icon svg,.soft-toast-icon .iconify,.soft-toast-icon-svg{display:block;flex:none;width:18px!important;height:18px!important;max-width:18px;max-height:18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.12))}.soft-toast-item[data-type=promise] .soft-toast-icon-svg{animation:st-spin .8s linear infinite}.soft-toast-spinner{width:18px;height:18px;border:2px solid rgba(139,92,246,.2);border-top-color:#8b5cf6;border-radius:50%;animation:st-spin .7s linear infinite}@keyframes st-spin{to{transform:rotate(360deg)}}.soft-toast-body{flex:1;min-width:0}.soft-toast-header-row{display:flex;align-items:center;gap:12px}.soft-toast-title{font-weight:600;font-size:14px;color:#111827;margin:0;line-height:1.4;letter-spacing:-.01em;padding-right:4px}.soft-toast-title--has-close{padding-right:24px}.soft-toast-description{font-size:13.5px;font-weight:400;color:#4b5563;margin:4px 0 0;line-height:1.5;max-height:120px;overflow-y:auto;padding-right:4px}.soft-toast-description::-webkit-scrollbar{width:4px}.soft-toast-description::-webkit-scrollbar-track{background:transparent}.soft-toast-description::-webkit-scrollbar-thumb{background:#0000001a;border-radius:4px}.soft-toast-description::-webkit-scrollbar-thumb:hover{background:#0003}.soft-toast-timestamp{display:inline-block;font-size:11px;color:#9ca3af;letter-spacing:.01em;white-space:nowrap;margin-top:6px}.soft-toast-action{display:flex;gap:8px;margin-top:12px}.soft-toast-action-button{flex:1;width:100%;padding:8px 16px;border-radius:12px;background:color-mix(in srgb,var(--st-accent) 15%,transparent);color:var(--st-icon-color);border:none;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .18s ease;letter-spacing:.01em;text-align:center}.soft-toast-action-button:hover{background:color-mix(in srgb,var(--st-accent) 25%,transparent);transform:scale(1.02)}.soft-toast-action-button:active{transform:scale(.98)}.soft-toast-action-primary{background:var(--st-icon-color);color:#fff}.soft-toast-action-primary:hover{background:color-mix(in srgb,var(--st-icon-color) 85%,#000)}.soft-toast-close{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;border:none;background:#0000000a;color:#9ca3af;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .18s ease,background .18s ease,color .18s ease,transform .18s ease;padding:0}.soft-toast-close:hover{background:#0000001a;color:#374151;transform:scale(1.1)}.soft-toast-item:hover .soft-toast-close{opacity:1}.soft-toast-close[data-position=top-left]{right:auto;left:10px}.st-close-line-1,.st-close-line-2{transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;transform-origin:center}.soft-toast-close:hover .st-close-line-1{transform:rotate(-45deg)}.soft-toast-close:hover .st-close-line-2{transform:rotate(45deg) scaleX(0);opacity:0}.soft-toast-progress{position:absolute;top:0;left:0;right:0;bottom:0;height:100%;background:transparent;z-index:0;pointer-events:none;border-radius:inherit;overflow:hidden}.soft-toast-progress-bar{height:100%;background:var(--st-accent);opacity:.12;transform-origin:left}[data-soft-toast-theme=dark] .soft-toast-item{background:#1c1c1e;border-color:#ffffff14;box-shadow:0 4px 24px -4px #00000080,0 1px 4px #0000004d}[data-soft-toast-theme=dark] .soft-toast-title{color:#f9fafb}[data-soft-toast-theme=dark] .soft-toast-description{color:#9ca3af}[data-soft-toast-theme=dark] .soft-toast-timestamp{color:#6b7280}[data-soft-toast-theme=dark] .soft-toast-item[data-type]{background:#1c1c1e;border-color:#ffffff14}[data-soft-toast-dir=rtl] .soft-toast-item:before{left:auto;right:0;border-radius:4px 0 0 4px}[data-soft-toast-dir=rtl] .soft-toast-content{flex-direction:row-reverse;padding-left:0;padding-right:10px}[data-soft-toast-dir=rtl] .soft-toast-body{align-items:flex-end;text-align:right}[data-soft-toast-dir=rtl] .soft-toast-close{right:auto;left:10px}@media (max-width: 640px){.soft-toast-container{left:12px!important;right:12px!important;width:auto;max-width:none;transform:none!important;align-items:stretch!important}.soft-toast-container[data-position^=top]{top:12px}.soft-toast-container[data-position^=bottom]{bottom:12px}.soft-toast-item{min-width:auto;max-width:none}.soft-toast-close{opacity:1}}@media (prefers-reduced-motion: reduce){.soft-toast-item,.soft-toast-action-button,.soft-toast-close,.soft-toast-spinner{transition:none!important;animation:none!important}}

package/dist/types/index.d.ts

@@ -0,0 +1,107 @@
+import { VNode, Component } from 'vue';
+export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info' | 'promise';
+export type ToastPosition = 'top' | 'bottom' | 'left' | 'right' | 'center' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+export type AnimationPreset = 'smooth' | 'bouncy' | 'subtle' | 'snappy';
+export type QueueOverflow = 'drop-oldest' | 'drop-newest';
+export interface ToastAction {
+    label: string;
+    onClick: () => void | Promise<void>;
+    successLabel?: string;
+    primary?: boolean;
+    class?: string;
+}
+export interface ToastPromiseMessages {
+    loading: string;
+    success: string;
+    error: string;
+    description?: {
+        success?: string;
+        error?: string;
+    };
+    action?: {
+        error?: ToastAction;
+    };
+}
+export interface ToastOptions {
+    id?: string;
+    type?: ToastType;
+    title?: string;
+    description?: string | VNode;
+    action?: ToastAction | ToastAction[];
+    icon?: string | VNode | Component;
+    duration?: number;
+    position?: ToastPosition;
+    classNames?: ToastClassNames;
+    fillColor?: string;
+    borderColor?: string;
+    borderWidth?: number;
+    preset?: AnimationPreset;
+    bounce?: number;
+    spring?: boolean;
+    showTimestamp?: boolean;
+    showProgress?: boolean;
+    closeButton?: boolean | 'top-left' | 'top-right';
+    sound?: boolean | string;
+    soundVolume?: number;
+    onDismiss?: (id: string) => void;
+    onAutoClose?: (id: string) => void;
+    promise?: Promise<unknown>;
+    promiseMessages?: ToastPromiseMessages;
+}
+export interface ToastClassNames {
+    wrapper?: string;
+    content?: string;
+    header?: string;
+    title?: string;
+    icon?: string;
+    description?: string;
+    actionWrapper?: string;
+    actionButton?: string;
+}
+export interface Toast extends Required<Pick<ToastOptions, 'id' | 'type' | 'duration' | 'position' | 'showTimestamp' | 'showProgress' | 'spring'>> {
+    title?: string;
+    description?: string | VNode;
+    action?: ToastAction | ToastAction[];
+    icon?: string | VNode | Component;
+    classNames?: ToastClassNames;
+    fillColor?: string;
+    borderColor?: string;
+    borderWidth?: number;
+    closeButton?: boolean | 'top-left' | 'top-right';
+    preset: AnimationPreset;
+    bounce: number;
+    createdAt: number;
+    remainingTime: number;
+    isPaused: boolean;
+    isExpanded: boolean;
+    isLeaving: boolean;
+    promise?: Promise<unknown>;
+    promiseMessages?: ToastPromiseMessages;
+    onDismiss?: (id: string) => void;
+    onAutoClose?: (id: string) => void;
+}
+export interface ToastContainerProps {
+    position?: ToastPosition;
+    duration?: number;
+    gap?: number;
+    offset?: number | string;
+    theme?: 'light' | 'dark';
+    toastOptions?: Partial<ToastOptions>;
+    spring?: boolean;
+    bounce?: number;
+    preset?: AnimationPreset;
+    closeOnEscape?: boolean;
+    closeButton?: boolean | 'top-left' | 'top-right';
+    showProgress?: boolean;
+    showTimestamp?: boolean;
+    sound?: boolean;
+    soundVolume?: number;
+    maxQueue?: number;
+    queueOverflow?: QueueOverflow;
+    dir?: 'ltr' | 'rtl';
+    swipeToDismiss?: boolean;
+}
+export interface ToastPluginOptions extends ToastContainerProps {
+    teleportTarget?: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"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"}

package/dist/utils/sound.d.ts

@@ -0,0 +1,9 @@
+import { ToastType } from '../types';
+/**
+ * Play a sound for the given toast.
+ * @param toastType  The semantic toast type
+ * @param sound      true = built-in tone, string = custom audio URL, false = silence
+ * @param volume     0–1 (clamped)
+ */
+export declare const playToastSound: (toastType: ToastType, sound: boolean | string | undefined, volume?: number) => void;
+//# sourceMappingURL=sound.d.ts.map

package/dist/utils/sound.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sound.d.ts","sourceRoot":"","sources":["../../src/utils/sound.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAqGzC;;;;;GAKG;AACH,eAAO,MAAM,cAAc,GACzB,WAAW,SAAS,EACpB,OAAO,OAAO,GAAG,MAAM,GAAG,SAAS,EACnC,eAAY,KACX,IAsBF,CAAA"}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@soft-toast/vue",
+  "version": "1.0.0",
+  "description": "Soft, fluid toast notifications for Vue 3 — part of the @soft-toast family",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": {
+      "import": "./dist/style.css"
+    },
+    "./style.css": "./dist/style.css",
+    "./dist/style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "bun run build.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "bun test",
+    "test:watch": "bun test --watch",
+    "prepublishOnly": "bun run build"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "dependencies": {
+    "@iconify/vue": "5.0.1",
+    "gsap": "^3.12.0"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "@types/node": "^20.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.4.0",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "5.0.0",
+    "vue": "^3.4.0",
+    "vue-tsc": "^2.0.0"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "toast",
+    "notification",
+    "animation",
+    "soft",
+    "fluid"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ggthkk/soft-toast"
+  },
+  "homepage": "https://soft-toast.netlify.app",
+  "bugs": {
+    "url": "https://github.com/ggthkk/soft-toast/issues"
+  },
+  "engines": {
+    "bun": ">=1.0.0"
+  }
+}

package/src/animations/gsapConfig.ts

@@ -0,0 +1,303 @@
+import { gsap } from 'gsap'
+import type { AnimationPreset } from '../types'
+
+export const presetConfigs: Record<AnimationPreset, { ease: string; elasticEase: string; duration: number }> = {
+  smooth: {
+    ease: 'power3.out',
+    elasticEase: 'elastic.out(1, 0.5)',
+    duration: 0.65
+  },
+  bouncy: {
+    ease: 'back.out(2)',
+    elasticEase: 'elastic.out(1.4, 0.45)',
+    duration: 0.75
+  },
+  subtle: {
+    ease: 'power2.out',
+    elasticEase: 'back.out(1.2)',
+    duration: 0.45
+  },
+  snappy: {
+    ease: 'back.out(3)',
+    elasticEase: 'elastic.out(1.1, 0.35)',
+    duration: 0.5
+  }
+}
+
+gsap.defaults({ overwrite: 'auto' })
+
+const SOFT_SETTLE_DURATION = 0.42
+const QUICK_SETTLE_DURATION = 0.22
+const SOFT_SETTLE_EASE = 'power2.out'
+
+export const createElasticEase = (bounce: number) => {
+  const amplitude = 0.8 + (bounce * 0.8)
+  const period = 0.55 - (bounce * 0.15)
+  return `elastic.out(${amplitude.toFixed(2)}, ${period.toFixed(2)})`
+}
+
+const clamp = (value: number, min: number, max: number) =>
+  Math.max(min, Math.min(max, value))
+
+const cloudSettleAnimation = (
+  element: HTMLElement,
+  target: {
+    y: number
+    scale: number
+    opacity: number
+  }
+) => {
+  const currentY = Number(gsap.getProperty(element, 'y')) || 0
+  const movement = target.y - currentY
+  const distance = Math.abs(movement)
+
+  if (distance < 0.5) {
+    return gsap.to(element, {
+      y: target.y,
+      scale: target.scale,
+      opacity: target.opacity,
+      force3D: true,
+      overwrite: true,
+      duration: QUICK_SETTLE_DURATION,
+      ease: SOFT_SETTLE_EASE
+    })
+  }
+
+  return gsap.to(element, {
+    y: target.y,
+    scale: target.scale,
+    opacity: target.opacity,
+    force3D: true,
+    overwrite: true,
+    duration: clamp(0.34 + distance * 0.003, 0.36, 0.46),
+    ease: 'sine.out'
+  })
+}
+
+export const landingAnimation = (
+  element: HTMLElement,
+  options: {
+    preset?: AnimationPreset
+    bounce?: number
+    spring?: boolean
+    direction?: 'up' | 'down'
+  } = {}
+) => {
+  const { direction = 'up', preset = 'smooth' } = options
+  const config = presetConfigs[preset] || presetConfigs.smooth
+  const yFrom = direction === 'down' ? -14 : 14
+  const landingDuration = Math.min(config.duration, 0.46)
+  const landingEase = preset === 'bouncy' ? 'back.out(1.35)' : SOFT_SETTLE_EASE
+
+  const tl = gsap.timeline()
+  
+  // Find extra wrapper
+  const extra = element.querySelector('.soft-toast-extra') as HTMLElement
+
+  if (extra) {
+    gsap.set(extra, { height: 0, opacity: 0 })
+  }
+
+  // 1. Soft and bouncy "pudding" pop (overshoot effect)
+  tl.fromTo(element,
+    { y: yFrom, opacity: 0, scale: 0.94 },
+    {
+      y: 0, opacity: 1, scale: 1,
+      duration: landingDuration,
+      ease: landingEase,
+      transformOrigin: direction === 'down' ? 'top center' : 'bottom center'
+    }
+  )
+
+  // 2. Expand extra content softly
+  if (extra) {
+    tl.to(extra, {
+      height: 'auto',
+      opacity: 1,
+      duration: 0.36,
+      force3D: true,
+      ease: SOFT_SETTLE_EASE,
+      clearProps: 'overflow'
+    }, "-=0.32") // Start expanding seamlessly as the main pop slows down
+  }
+
+  return tl
+}
+
+// Morph animation: pill ↔ expanded (fluid expand/collapse)
+export const morphAnimation = (
+  element: HTMLElement,
+  options: { preset?: AnimationPreset; bounce?: number; spring?: boolean } = {}
+) => {
+  const { preset = 'smooth', bounce = 0.4, spring = true } = options
+  const ease = spring ? createElasticEase(bounce) : presetConfigs[preset].ease
+
+  const tl = gsap.timeline()
+  tl.to(element, {
+    borderRadius: '20px',
+    scaleX: 1.015,
+    scaleY: 0.98,
+    duration: 0.18,
+    ease: 'power2.in'
+  }).to(element, {
+    borderRadius: '20px',
+    scaleX: 1, scaleY: 1,
+    duration: 0.55,
+    ease: ease
+  })
+
+  return tl
+}
+
+// Exit: Soft scale down + fade
+export const exitAnimation = (
+  element: HTMLElement
+) => {
+  return gsap.to(element, {
+    scale: 0.8,
+    opacity: 0,
+    force3D: true,
+    overwrite: 'auto',
+    duration: 0.25,
+    ease: 'power2.out'
+  })
+}
+
+// Swipe exit: fly off horizontally in the direction of the gesture
+export const swipeExitAnimation = (
+  element: HTMLElement,
+  toX: number  // positive = fly right, negative = fly left
+) => {
+  return gsap.to(element, {
+    x: toX,
+    opacity: 0,
+    force3D: true,
+    overwrite: 'auto',
+    duration: 0.28,
+    ease: 'power3.out'
+  })
+}
+
+// Swipe snap-back: elastic spring return to rest position
+export const swipeSnapBack = (element: HTMLElement) => {
+  return gsap.to(element, {
+    x: 0,
+    opacity: 1,
+    force3D: true,
+    overwrite: 'auto',
+    duration: 0.55,
+    ease: 'elastic.out(1, 0.55)'
+  })
+}
+
+export const expandAnimation = (element: HTMLElement) =>
+  gsap.to(element, { scale: 1.025, duration: 0.25, ease: 'back.out(2)' })
+
+export const collapseAnimation = (element: HTMLElement) =>
+  gsap.to(element, { scale: 1, duration: 0.3, ease: 'power2.out' })
+
+// Animate to a stacked-card position. index 0 = front.
+// direction: 'up' means the stack peeks upward (bottom-anchored).
+// direction: 'down' means the stack peeks downward (top-anchored).
+export const positionAnimation = (
+  element: HTMLElement,
+  options: {
+    index: number
+    expanded: boolean
+    preset?: AnimationPreset
+    bounce?: number
+    spring?: boolean
+    direction?: 'up' | 'down'
+    expandedOffset?: number
+    liftPx?: number
+    scaleStep?: number
+    opacityStep?: number
+    maxVisible?: number
+    reposition?: boolean
+  }
+) => {
+  const {
+    index,
+    expanded,
+    preset = 'smooth',
+    bounce = 0.4,
+    spring = true,
+    direction = 'up',
+    expandedOffset = 0,
+    liftPx = 14,
+    scaleStep = 0.055,
+    opacityStep = 0.2,
+    maxVisible = 3,
+    reposition = false
+  } = options
+
+  const config = presetConfigs[preset] || presetConfigs.smooth
+  const sign = direction === 'up' ? -1 : 1
+
+  if (expanded) {
+    // Expanded hover and dismiss restacking share one soft settle timing.
+    const expandedTarget = {
+      y: expandedOffset * sign,
+      scale: 1,
+      opacity: 1
+    }
+
+    if (reposition && spring) {
+      return cloudSettleAnimation(element, expandedTarget)
+    }
+
+    return gsap.to(element, {
+      ...expandedTarget,
+      force3D: true,
+      overwrite: 'auto',
+      duration: 0.36,
+      ease: SOFT_SETTLE_EASE
+    })
+  }
+
+  const isHidden = index >= maxVisible
+  const clampedIdx = Math.min(index, maxVisible)
+  const targetY = clampedIdx * liftPx * sign
+  const targetScale = 1 - clampedIdx * scaleStep
+  const targetOpacity = isHidden ? 0 : Math.max(0, 1 - clampedIdx * opacityStep)
+
+  if (reposition && spring) {
+    return cloudSettleAnimation(element, {
+      y: targetY,
+      scale: targetScale,
+      opacity: targetOpacity
+    })
+  }
+
+  // Initial collapsed stacking keeps the selected preset feel. Repositioning
+  // paths above stay softer so hover and dismiss do not feel mismatched.
+  const restackEase = spring ? createElasticEase(bounce) : config.ease
+  return gsap.to(element, {
+    y: targetY,
+    scale: targetScale,
+    opacity: targetOpacity,
+    force3D: true,
+    overwrite: 'auto',
+    duration: config.duration * 0.85,
+    ease: restackEase
+  })
+}
+
+export const progressAnimation = (
+  element: HTMLElement,
+  duration: number,
+  onComplete?: () => void
+) =>
+  gsap.fromTo(element,
+    { scaleX: 1 },
+    { scaleX: 0, duration: duration / 1000, ease: 'linear', onComplete }
+  )
+
+export const pauseAnimation = (animation: gsap.core.Tween | gsap.core.Timeline) =>
+  animation.pause()
+
+export const resumeAnimation = (animation: gsap.core.Tween | gsap.core.Timeline) =>
+  animation.play()
+
+export const killAnimations = (element: HTMLElement) =>
+  gsap.killTweensOf(element)

package/src/components/ToastContainer.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+
+import type { ToastContainerProps, ToastPosition } from "../types";
+import ToastRegion from "./ToastRegion.vue";
+
+const props = withDefaults(defineProps<ToastContainerProps>(), {
+  position: "top-right",
+  maxQueue: 10,
+  queueOverflow: "drop-oldest",
+});
+
+const positions: ToastPosition[] = [
+  "top", "bottom", "left", "right", "center",
+  "top-left",
+  "top-center",
+  "top-right",
+  "bottom-left",
+  "bottom-center",
+  "bottom-right",
+];
+</script>
+
+<template>
+  <Teleport to="body">
+    <ToastRegion
+      v-for="pos in positions"
+      :key="pos"
+      v-bind="props"
+      :position="pos"
+    >
+      <template v-for="(_, name) in $slots" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps || {}" />
+      </template>
+    </ToastRegion>
+  </Teleport>
+</template>

package/src/components/ToastIcon.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+import type { ToastType } from "../types";
+import { registerToastIcons } from "../icons";
+
+registerToastIcons();
+
+interface Props {
+  type: ToastType;
+  customIcon?: string;
+}
+
+const props = defineProps<Props>();
+
+const defaultIcons: Record<string, string> = {
+  success: 'lucide:circle-check',
+  error: 'lucide:circle-x',
+  warning: 'lucide:triangle-alert',
+  info: 'lucide:info',
+  default: 'lucide:bell',
+};
+
+const getIcon = () => {
+  if (props.customIcon) return props.customIcon;
+  return defaultIcons[props.type] || defaultIcons.default;
+};
+</script>
+
+<template>
+  <span class="soft-toast-icon">
+    <Icon class="soft-toast-icon-svg" :icon="getIcon()" :width="18" :height="18" />
+  </span>
+</template>