@ilokesto/toast 1.0.0

package/dist/components/icons.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+export const DefaultSpinner = () => {
+    const style = useMemo(() => ({
+        width: 20,
+        height: 20,
+        boxSizing: "border-box",
+        border: "2px solid",
+        borderRadius: "100%",
+        borderColor: "#e0e0e0",
+        borderRightColor: "#616161",
+        animation: "toast-spin 1s linear infinite",
+    }), []);
+    return _jsx("div", { style: style, className: "toast-motion-spin" });
+};
+export const DefaultSuccess = ({ theme }) => {
+    const primary = theme?.primary || "#61d345";
+    const secondary = theme?.secondary || "#fff";
+    return (_jsx("div", { className: "toast-motion-scale", style: {
+            width: 20,
+            height: 20,
+            background: primary,
+            borderRadius: "100%",
+            position: "relative",
+            animation: "toast-scale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards",
+        }, children: _jsx("div", { style: {
+                boxSizing: "border-box",
+                position: "absolute",
+                top: "45%",
+                left: "50%",
+                width: 6,
+                height: 10,
+                border: `2px solid ${secondary}`,
+                borderTop: 0,
+                borderLeft: 0,
+                transform: "translate(-50%, -50%) rotate(45deg)",
+                transformOrigin: "center",
+            } }) }));
+};
+export const DefaultError = ({ theme }) => {
+    const primary = theme?.primary || "#ff4b4b";
+    const secondary = theme?.secondary || "#fff";
+    return (_jsxs("div", { className: "toast-motion-scale", style: {
+            width: 20,
+            height: 20,
+            background: primary,
+            borderRadius: "100%",
+            position: "relative",
+            animation: "toast-scale 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards",
+        }, children: [_jsx("div", { style: {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    width: 10,
+                    height: 2,
+                    background: secondary,
+                    transform: "translate(-50%, -50%) rotate(45deg)",
+                } }), _jsx("div", { style: {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    width: 10,
+                    height: 2,
+                    background: secondary,
+                    transform: "translate(-50%, -50%) rotate(-45deg)",
+                } })] }));
+};
+export const ToastIcon = ({ type, icon, iconTheme, }) => {
+    if (icon !== undefined) {
+        return _jsx(_Fragment, { children: icon });
+    }
+    switch (type) {
+        case "blank":
+        case "custom":
+            return null;
+        case "loading":
+            return _jsx(DefaultSpinner, {});
+        case "success":
+            return _jsx(DefaultSuccess, { theme: iconTheme });
+        case "error":
+            return _jsx(DefaultError, { theme: iconTheme });
+    }
+};

package/dist/core/createToastRuntime.d.ts

@@ -0,0 +1,2 @@
+import type { ToastRuntimeApi, ToasterId } from "../types/toast";
+export declare function createToastRuntime(toasterId: ToasterId): ToastRuntimeApi;

package/dist/core/createToastRuntime.js

@@ -0,0 +1,247 @@
+import { createOverlayStore } from "@ilokesto/overlay";
+import { createToastStore } from "./createToastStore";
+import { DEFAULT_ARIA_PROPS, DEFAULT_DURATION, DEFAULT_ICON_THEME, DEFAULT_POSITION, DEFAULT_REMOVE_DELAY, generateToastId, resolveValue, } from "./utils";
+export function createToastRuntime(toasterId) {
+    const store = createToastStore();
+    const overlayStore = createOverlayStore();
+    const dismissTimers = new Map();
+    const removeTimers = new Map();
+    const listeners = new Set();
+    const view = {
+        limit: Number.POSITIVE_INFINITY,
+        position: DEFAULT_POSITION,
+    };
+    store.subscribe(() => {
+        for (const listener of listeners) {
+            listener();
+        }
+    });
+    function clearTimer(timerMap, id) {
+        const timer = timerMap.get(id);
+        if (timer === undefined) {
+            return;
+        }
+        clearTimeout(timer);
+        timerMap.delete(id);
+    }
+    function clearAllTimers() {
+        for (const timer of dismissTimers.values()) {
+            clearTimeout(timer);
+        }
+        for (const timer of removeTimers.values()) {
+            clearTimeout(timer);
+        }
+        dismissTimers.clear();
+        removeTimers.clear();
+    }
+    function notify() {
+        for (const listener of listeners) {
+            listener();
+        }
+    }
+    function getVisibleItems(items) {
+        return items
+            .filter((item) => item.position === view.position)
+            .slice(0, view.limit);
+    }
+    function getItem(id) {
+        return store.getSnapshot().find((item) => item.id === id);
+    }
+    function scheduleDismiss(item) {
+        clearTimer(dismissTimers, item.id);
+        if (!Number.isFinite(item.duration)) {
+            return;
+        }
+        const remaining = item.duration - item.pauseDuration;
+        if (remaining <= 0) {
+            dismiss(item.id);
+            return;
+        }
+        const timer = setTimeout(() => {
+            dismissTimers.delete(item.id);
+            dismiss(item.id);
+        }, remaining);
+        dismissTimers.set(item.id, timer);
+    }
+    function scheduleRemove(item) {
+        clearTimer(removeTimers, item.id);
+        const timer = setTimeout(() => {
+            removeTimers.delete(item.id);
+            remove(item.id);
+        }, item.removeDelay ?? DEFAULT_REMOVE_DELAY);
+        removeTimers.set(item.id, timer);
+    }
+    function ensurePresence(id) {
+        const presence = overlayStore.getSnapshot().find((item) => item.id === id);
+        if (presence !== undefined) {
+            return;
+        }
+        overlayStore.open({
+            id,
+            type: "toast",
+            props: {},
+        });
+    }
+    function addToast(type, message, options) {
+        const id = options?.id ?? generateToastId();
+        const current = getItem(id);
+        const defaultOptions = view.toastOptions;
+        const defaultTypeOptions = defaultOptions?.[type];
+        const mergedOptions = {
+            ...defaultOptions,
+            ...defaultTypeOptions,
+            ...options,
+            style: {
+                ...(defaultOptions?.style ?? {}),
+                ...(defaultTypeOptions?.style ?? {}),
+                ...(options?.style ?? {}),
+            },
+            ariaProps: {
+                ...(DEFAULT_ARIA_PROPS[type] ?? {}),
+                ...(defaultOptions?.ariaProps ?? {}),
+                ...(defaultTypeOptions?.ariaProps ?? {}),
+                ...(options?.ariaProps ?? {}),
+            },
+            iconTheme: options?.iconTheme
+                ?? defaultTypeOptions?.iconTheme
+                ?? defaultOptions?.iconTheme
+                ?? (type === "success" || type === "error" ? DEFAULT_ICON_THEME[type] : undefined),
+        };
+        const item = {
+            id,
+            type,
+            message,
+            status: "visible",
+            createdAt: current?.createdAt ?? Date.now(),
+            toasterId,
+            duration: mergedOptions.duration ?? current?.duration ?? DEFAULT_DURATION[type],
+            position: mergedOptions.position ?? current?.position ?? DEFAULT_POSITION,
+            height: current?.height ?? null,
+            pauseDuration: 0,
+            pausedAt: null,
+            ariaProps: mergedOptions.ariaProps ?? current?.ariaProps ?? DEFAULT_ARIA_PROPS[type],
+            style: mergedOptions.style,
+            className: mergedOptions.className,
+            icon: mergedOptions.icon,
+            iconTheme: mergedOptions.iconTheme,
+            removeDelay: mergedOptions.removeDelay ?? DEFAULT_REMOVE_DELAY,
+        };
+        ensurePresence(id);
+        store.add(item);
+        clearTimer(removeTimers, id);
+        scheduleDismiss(item);
+        return id;
+    }
+    function configureView(config) {
+        const nextLimit = Math.max(0, config.limit);
+        const hasChanged = nextLimit !== view.limit || config.position !== view.position || config.toastOptions !== view.toastOptions;
+        if (!hasChanged) {
+            return;
+        }
+        view.limit = nextLimit;
+        view.position = config.position;
+        if (config.toastOptions !== undefined) {
+            view.toastOptions = config.toastOptions;
+        }
+        notify();
+    }
+    async function promiseToast(promise, messages, options) {
+        const task = typeof promise === "function" ? promise() : promise;
+        const id = addToast("loading", messages.loading, {
+            ...options,
+            duration: Number.POSITIVE_INFINITY,
+        });
+        try {
+            const data = await task;
+            const successMessage = resolveValue(messages.success, data);
+            addToast("success", successMessage, {
+                ...options,
+                id,
+            });
+            return data;
+        }
+        catch (error) {
+            const errorMessage = resolveValue(messages.error, error);
+            addToast("error", errorMessage, {
+                ...options,
+                id,
+            });
+            throw error;
+        }
+    }
+    function dismiss(id) {
+        const targets = id === undefined ? store.getSnapshot().map((item) => item.id) : [id];
+        for (const targetId of targets) {
+            const current = getItem(targetId);
+            if (current === undefined || current.status === "closing") {
+                continue;
+            }
+            clearTimer(dismissTimers, targetId);
+            overlayStore.close(targetId);
+            store.dismiss(targetId);
+            scheduleRemove(current);
+        }
+    }
+    function remove(id) {
+        const targets = id === undefined ? store.getSnapshot().map((item) => item.id) : [id];
+        for (const targetId of targets) {
+            clearTimer(dismissTimers, targetId);
+            clearTimer(removeTimers, targetId);
+            overlayStore.remove(targetId);
+            store.remove(targetId);
+        }
+    }
+    function clear() {
+        clearAllTimers();
+        overlayStore.clear();
+        store.clear();
+    }
+    function updateHeight(id, height) {
+        store.updateHeight(id, height);
+    }
+    function getRawSnapshot() {
+        return store.getSnapshot();
+    }
+    function startPause() {
+        store.startPause();
+        for (const item of store.getSnapshot()) {
+            clearTimer(dismissTimers, item.id);
+        }
+    }
+    function endPause() {
+        store.endPause();
+        for (const item of store.getSnapshot()) {
+            if (item.status === "visible") {
+                scheduleDismiss(item);
+            }
+        }
+    }
+    function subscribe(listener) {
+        listeners.add(listener);
+        return () => {
+            listeners.delete(listener);
+        };
+    }
+    function getSnapshot() {
+        return getVisibleItems(store.getSnapshot());
+    }
+    function getInitialSnapshot() {
+        return getVisibleItems(store.getInitialSnapshot());
+    }
+    return {
+        toasterId,
+        addToast,
+        configureView,
+        promiseToast,
+        dismiss,
+        remove,
+        clear,
+        updateHeight,
+        getRawSnapshot,
+        startPause,
+        endPause,
+        subscribe,
+        getSnapshot,
+        getInitialSnapshot,
+    };
+}

package/dist/core/createToastStore.d.ts

@@ -0,0 +1,2 @@
+import type { ToastStoreApi } from "../types/toast";
+export declare function createToastStore(): ToastStoreApi;

package/dist/core/createToastStore.js

@@ -0,0 +1,126 @@
+import { Store } from "@ilokesto/store";
+export function createToastStore() {
+    const store = new Store({ items: [], pausedAt: null });
+    function add(item) {
+        store.setState((prev) => {
+            const existingIndex = prev.items.findIndex((current) => current.id === item.id);
+            if (existingIndex === -1) {
+                return {
+                    ...prev,
+                    items: [...prev.items, item],
+                };
+            }
+            return {
+                ...prev,
+                items: prev.items.map((current) => current.id === item.id
+                    ? {
+                        ...current,
+                        ...item,
+                        createdAt: current.createdAt,
+                        toasterId: current.toasterId,
+                    }
+                    : current),
+            };
+        });
+    }
+    function update(id, patch) {
+        store.setState((prev) => ({
+            ...prev,
+            items: prev.items.map((item) => item.id === id
+                ? {
+                    ...item,
+                    ...patch,
+                }
+                : item),
+        }));
+    }
+    function dismiss(id) {
+        store.setState((prev) => ({
+            ...prev,
+            items: prev.items.map((item) => {
+                if (id !== undefined && item.id !== id) {
+                    return item;
+                }
+                if (item.status === "closing") {
+                    return item;
+                }
+                return {
+                    ...item,
+                    status: "closing",
+                };
+            }),
+        }));
+    }
+    function remove(id) {
+        store.setState((prev) => ({
+            ...prev,
+            items: id === undefined
+                ? []
+                : prev.items.filter((item) => item.id !== id),
+        }));
+    }
+    function clear() {
+        store.setState({ items: [], pausedAt: null });
+    }
+    function updateHeight(id, height) {
+        update(id, { height });
+    }
+    function startPause() {
+        const startedAt = Date.now();
+        store.setState((prev) => {
+            if (prev.pausedAt !== null) {
+                return prev;
+            }
+            return {
+                pausedAt: startedAt,
+                items: prev.items.map((item) => ({
+                    ...item,
+                    pausedAt: item.status === "visible" ? startedAt : item.pausedAt,
+                })),
+            };
+        });
+    }
+    function endPause() {
+        const endedAt = Date.now();
+        store.setState((prev) => {
+            if (prev.pausedAt === null) {
+                return prev;
+            }
+            return {
+                pausedAt: null,
+                items: prev.items.map((item) => {
+                    if (item.pausedAt === null) {
+                        return item;
+                    }
+                    return {
+                        ...item,
+                        pauseDuration: item.pauseDuration + (endedAt - item.pausedAt),
+                        pausedAt: null,
+                    };
+                }),
+            };
+        });
+    }
+    function subscribe(listener) {
+        return store.subscribe(listener);
+    }
+    function getSnapshot() {
+        return store.getState().items;
+    }
+    function getInitialSnapshot() {
+        return store.getInitialState().items;
+    }
+    return {
+        add,
+        update,
+        dismiss,
+        remove,
+        clear,
+        updateHeight,
+        startPause,
+        endPause,
+        subscribe,
+        getSnapshot,
+        getInitialSnapshot,
+    };
+}

package/dist/core/registry.d.ts

@@ -0,0 +1,5 @@
+import type { ToasterId, ToastRuntimeApi } from "../types/toast";
+export declare function registerRuntime(runtime: ToastRuntimeApi): void;
+export declare function unregisterRuntime(toasterId: ToasterId): void;
+export declare function getRuntime(toasterId: ToasterId): ToastRuntimeApi | undefined;
+export declare function requireRuntime(toasterId: ToasterId): ToastRuntimeApi;

package/dist/core/registry.js

@@ -0,0 +1,18 @@
+const runtimeMap = new Map();
+export function registerRuntime(runtime) {
+    runtimeMap.set(runtime.toasterId, runtime);
+}
+export function unregisterRuntime(toasterId) {
+    runtimeMap.delete(toasterId);
+}
+export function getRuntime(toasterId) {
+    return runtimeMap.get(toasterId);
+}
+export function requireRuntime(toasterId) {
+    const runtime = runtimeMap.get(toasterId);
+    if (runtime === undefined) {
+        throw new Error(`No toaster runtime registered for toasterId "${toasterId}". ` +
+            "Make sure a <Toaster> with this toasterId is mounted.");
+    }
+    return runtime;
+}

package/dist/core/toast.d.ts

@@ -0,0 +1,2 @@
+import type { ToastFacade } from "../types/toast";
+export declare const toast: ToastFacade;

package/dist/core/toast.js

@@ -0,0 +1,41 @@
+import { requireRuntime } from "./registry";
+import { DEFAULT_TOASTER_ID } from "./utils";
+function resolveToasterId(options) {
+    return options?.toasterId ?? DEFAULT_TOASTER_ID;
+}
+function createToast(message, options) {
+    const runtime = requireRuntime(resolveToasterId(options));
+    return runtime.addToast("blank", message, options);
+}
+createToast.success = function success(message, options) {
+    const runtime = requireRuntime(resolveToasterId(options));
+    return runtime.addToast("success", message, options);
+};
+createToast.error = function error(message, options) {
+    const runtime = requireRuntime(resolveToasterId(options));
+    return runtime.addToast("error", message, options);
+};
+createToast.loading = function loading(message, options) {
+    const runtime = requireRuntime(resolveToasterId(options));
+    return runtime.addToast("loading", message, {
+        ...options,
+        duration: Number.POSITIVE_INFINITY,
+    });
+};
+createToast.custom = function custom(message, options) {
+    const runtime = requireRuntime(resolveToasterId(options));
+    return runtime.addToast("custom", message, options);
+};
+createToast.promise = function promiseFn(promise, messages, options) {
+    const runtime = requireRuntime(resolveToasterId(options));
+    return runtime.promiseToast(promise, messages, options);
+};
+createToast.dismiss = function dismiss(id, toasterId) {
+    const runtime = requireRuntime(toasterId ?? DEFAULT_TOASTER_ID);
+    runtime.dismiss(id);
+};
+createToast.remove = function remove(id, toasterId) {
+    const runtime = requireRuntime(toasterId ?? DEFAULT_TOASTER_ID);
+    runtime.remove(id);
+};
+export const toast = createToast;

package/dist/core/utils.d.ts

@@ -0,0 +1,11 @@
+import type { ToastAriaProps, IconTheme, ToastId, ToastPosition, ToastType } from "../types/toast";
+export declare function generateToastId(): ToastId;
+export declare const DEFAULT_TOASTER_ID = "default";
+export declare const DEFAULT_REMOVE_DELAY = 1000;
+export declare const DEFAULT_GUTTER = 8;
+export declare const DEFAULT_LIMIT = 20;
+export declare const DEFAULT_POSITION: ToastPosition;
+export declare const DEFAULT_DURATION: Record<ToastType, number>;
+export declare const DEFAULT_ARIA_PROPS: Record<ToastType, ToastAriaProps>;
+export declare const DEFAULT_ICON_THEME: Record<"success" | "error", IconTheme>;
+export declare function resolveValue<TValue, TArg>(value: TValue | ((arg: TArg) => TValue), arg: TArg): TValue;

package/dist/core/utils.js

@@ -0,0 +1,33 @@
+let counter = 0;
+export function generateToastId() {
+    counter += 1;
+    return `toast-${counter}-${Date.now()}`;
+}
+export const DEFAULT_TOASTER_ID = "default";
+export const DEFAULT_REMOVE_DELAY = 1000;
+export const DEFAULT_GUTTER = 8;
+export const DEFAULT_LIMIT = 20;
+export const DEFAULT_POSITION = "top-right";
+export const DEFAULT_DURATION = {
+    blank: 4000,
+    success: 2000,
+    error: 4000,
+    loading: Number.POSITIVE_INFINITY,
+    custom: 4000,
+};
+export const DEFAULT_ARIA_PROPS = {
+    blank: { role: "status", "aria-live": "polite", "aria-atomic": true },
+    success: { role: "status", "aria-live": "polite", "aria-atomic": true },
+    error: { role: "alert", "aria-live": "assertive", "aria-atomic": true },
+    loading: { role: "status", "aria-live": "polite", "aria-atomic": true },
+    custom: { role: "status", "aria-live": "polite", "aria-atomic": true },
+};
+export const DEFAULT_ICON_THEME = {
+    success: { primary: "#61d345", secondary: "#ffffff" },
+    error: { primary: "#ff4b4b", secondary: "#ffffff" },
+};
+export function resolveValue(value, arg) {
+    return typeof value === "function"
+        ? value(arg)
+        : value;
+}

package/dist/hooks/useToastItems.d.ts

@@ -0,0 +1,2 @@
+import type { ToastItem, ToastRuntimeApi } from "../types/toast";
+export declare function useToastItems(runtime: ToastRuntimeApi): ReadonlyArray<ToastItem>;

package/dist/hooks/useToastItems.js

@@ -0,0 +1,4 @@
+import { useSyncExternalStore } from "react";
+export function useToastItems(runtime) {
+    return useSyncExternalStore(runtime.subscribe, runtime.getSnapshot, runtime.getInitialSnapshot);
+}

package/dist/hooks/useToaster.d.ts

@@ -0,0 +1,2 @@
+import type { UseToasterResult } from "../types/toast";
+export declare function useToaster(): UseToasterResult;

package/dist/hooks/useToaster.js

@@ -0,0 +1,31 @@
+import { useCallback, useContext, useMemo } from "react";
+import { ToasterContext } from "../components/ToastProvider";
+import { DEFAULT_GUTTER } from "../core/utils";
+import { useToastItems } from "./useToastItems";
+export function useToaster() {
+    const runtime = useContext(ToasterContext);
+    if (runtime === null) {
+        throw new Error("useToaster must be used within a <Toaster> component.");
+    }
+    const toasts = useToastItems(runtime);
+    const calculateOffset = useCallback((toast, options) => {
+        const gutter = options?.gutter ?? DEFAULT_GUTTER;
+        const ordered = options?.reverseOrder ? [...toasts].reverse() : toasts;
+        const index = ordered.findIndex((item) => item.id === toast.id);
+        if (index === -1) {
+            return 0;
+        }
+        return ordered.slice(0, index).reduce((offset, item) => {
+            return offset + (item.height ?? 0) + gutter;
+        }, 0);
+    }, [toasts]);
+    return useMemo(() => ({
+        toasts,
+        handlers: {
+            updateHeight: runtime.updateHeight,
+            startPause: runtime.startPause,
+            endPause: runtime.endPause,
+            calculateOffset,
+        },
+    }), [calculateOffset, runtime.endPause, runtime.startPause, runtime.updateHeight, toasts]);
+}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+export { toast } from "./core/toast";
+export { Toaster } from "./components/Toaster";
+export { ToastBar } from "./components/ToastBar";
+export { ToastIcon } from "./components/icons";
+export { useToaster } from "./hooks/useToaster";
+export { useToastItems } from "./hooks/useToastItems";
+export { createToastRuntime } from "./core/createToastRuntime";
+export type { ToastBarProps } from "./components/ToastBar";
+export type { Renderable, ToastId, ToasterId, ToastType, ToastStatus, ToastPosition, ToastTransport, ToastItem, ToastState, ToastOptions, DefaultToastOptions, IconTheme, ToastStoreApi, ToastFacade, ToasterProps, UseToasterResult, ToastRowHelpers, ToastRuntimeApi, PromiseToastMessages, } from "./types/toast";

package/dist/index.js

@@ -0,0 +1,7 @@
+export { toast } from "./core/toast";
+export { Toaster } from "./components/Toaster";
+export { ToastBar } from "./components/ToastBar";
+export { ToastIcon } from "./components/icons";
+export { useToaster } from "./hooks/useToaster";
+export { useToastItems } from "./hooks/useToastItems";
+export { createToastRuntime } from "./core/createToastRuntime";