@pathscale/ui 1.3.1 → 1.4.0

package/dist/components/toast/Toast.generated.js

@@ -0,0 +1,918 @@
+import { createComponent, insert, mergeProps, spread, template, use } from "solid-js/web";
+import { defineComponent } from "solid-layouts/application-boundary";
+import "./Toast.css";
+import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, splitProps, useContext } from "solid-js";
+import { twMerge } from "tailwind-merge";
+import button_0 from "../button/index.js";
+import close_button from "../close-button/index.js";
+import { CLASSES, componentRecipe } from "./Toast.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template('<svg><circle cx=12 cy=12 r=10></circle><path d="M12 16v-4"></path><path d="M12 8h.01">'), _tmpl$2 = /*#__PURE__*/ template('<svg><circle cx=12 cy=12 r=10></circle><path d="m9 12 2 2 4-4">'), _tmpl$3 = /*#__PURE__*/ template('<svg><path d="M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z"></path><path d="M12 9v4"></path><path d="M12 17h.01">'), _tmpl$4 = /*#__PURE__*/ template('<svg><circle cx=12 cy=12 r=10></circle><path d="m15 9-6 6"></path><path d="m9 9 6 6">'), _tmpl$5 = /*#__PURE__*/ template('<svg><path d="m18 6-12 12"></path><path d="m6 6 12 12">'), _tmpl$6 = /*#__PURE__*/ template("<span>"), _tmpl$7 = /*#__PURE__*/ template("<div>"), _tmpl$8 = /*#__PURE__*/ template("<p>"), _tmpl$9 = /*#__PURE__*/ template("<div><div>");
+const DEFAULT_GAP = 12;
+const DEFAULT_MAX_VISIBLE_TOAST = 3;
+const DEFAULT_SCALE_FACTOR = 0.05;
+const DEFAULT_TOAST_TIMEOUT = 4000;
+const DEFAULT_TOAST_WIDTH = 460;
+const DEFAULT_QUEUE_MAX_VISIBLE_TOAST = Number.MAX_SAFE_INTEGER;
+const DEFAULT_EXIT_DURATION = 220;
+const invokeEventHandler = (handler, event)=>{
+    if ("function" == typeof handler) return void handler(event);
+    if (Array.isArray(handler) && "function" == typeof handler[0]) handler[0](handler[1], event);
+};
+const normalizeVariant = (variant)=>{
+    if ("info" === variant) return "accent";
+    if ("error" === variant) return "danger";
+    return variant ?? "default";
+};
+const normalizePlacement = (placement)=>{
+    const normalized = (placement ?? "bottom-end").trim().toLowerCase();
+    switch(normalized){
+        case "bottom":
+            return "bottom";
+        case "bottom start":
+        case "bottom-start":
+            return "bottomStart";
+        case "bottom end":
+        case "bottom-end":
+            return "bottomEnd";
+        case "top":
+            return "top";
+        case "top start":
+        case "top-start":
+            return "topStart";
+        case "top end":
+        case "top-end":
+            return "topEnd";
+        default:
+            return "bottomEnd";
+    }
+};
+const isBottomPlacement = (placement)=>placement.startsWith("bottom");
+class ToastQueue {
+    readToasts;
+    setToasts;
+    listeners = new Set();
+    closeCallbacks = new Map();
+    timeoutMeta = new Map();
+    exitTimers = new Map();
+    maxVisibleToasts;
+    paused = false;
+    keyCounter = 0;
+    exitDuration;
+    constructor(options){
+        const [toasts, setToasts] = createSignal([]);
+        this.readToasts = toasts;
+        this.setToasts = setToasts;
+        this.maxVisibleToasts = options?.maxVisibleToasts;
+        this.exitDuration = options?.exitDuration ?? DEFAULT_EXIT_DURATION;
+    }
+    emit = ()=>{
+        for (const listener of this.listeners)listener();
+    };
+    updateToasts = (updater)=>{
+        this.setToasts((prev)=>updater(prev));
+        this.emit();
+    };
+    scheduleTimeout = (key, duration)=>{
+        if (duration <= 0) return;
+        if (this.paused) return void this.timeoutMeta.set(key, {
+            remaining: duration,
+            startedAt: 0
+        });
+        const meta = {
+            remaining: duration,
+            startedAt: Date.now()
+        };
+        meta.timer = setTimeout(()=>{
+            this.close(key);
+        }, duration);
+        this.timeoutMeta.set(key, meta);
+    };
+    clearTimeoutFor = (key)=>{
+        const meta = this.timeoutMeta.get(key);
+        if (meta?.timer) clearTimeout(meta.timer);
+        this.timeoutMeta.delete(key);
+    };
+    clearExitTimerFor = (key)=>{
+        const timer = this.exitTimers.get(key);
+        if (timer) {
+            clearTimeout(timer);
+            this.exitTimers.delete(key);
+        }
+    };
+    add(content, options) {
+        const timeout = options?.timeout ?? DEFAULT_TOAST_TIMEOUT;
+        const key = options?.key ?? `toast-${++this.keyCounter}`;
+        this.closeCallbacks.set(key, options?.onClose);
+        this.updateToasts((prev)=>[
+                {
+                    key,
+                    content,
+                    timeout,
+                    createdAt: Date.now(),
+                    isEntering: true,
+                    isExiting: false
+                },
+                ...prev
+            ]);
+        queueMicrotask(()=>{
+            this.updateToasts((prev)=>prev.map((toast)=>toast.key === key && toast.isEntering ? {
+                        ...toast,
+                        isEntering: false
+                    } : toast));
+        });
+        this.scheduleTimeout(key, timeout);
+        return key;
+    }
+    close(key) {
+        const toast = this.readToasts().find((entry)=>entry.key === key);
+        if (!toast || toast.isExiting) return;
+        this.clearTimeoutFor(key);
+        this.updateToasts((prev)=>prev.map((entry)=>entry.key === key ? {
+                    ...entry,
+                    isEntering: false,
+                    isExiting: true
+                } : entry));
+        this.clearExitTimerFor(key);
+        const timer = setTimeout(()=>{
+            this.remove(key, true);
+        }, this.exitDuration);
+        this.exitTimers.set(key, timer);
+    }
+    remove(key, invokeOnClose = true) {
+        this.clearTimeoutFor(key);
+        this.clearExitTimerFor(key);
+        const callback = this.closeCallbacks.get(key);
+        this.closeCallbacks.delete(key);
+        this.updateToasts((prev)=>prev.filter((entry)=>entry.key !== key));
+        if (invokeOnClose) callback?.();
+    }
+    clear(invokeOnClose = false) {
+        for (const meta of this.timeoutMeta.values())if (meta.timer) clearTimeout(meta.timer);
+        for (const timer of this.exitTimers.values())clearTimeout(timer);
+        const callbacks = invokeOnClose ? Array.from(this.closeCallbacks.values()).filter((callback)=>"function" == typeof callback) : [];
+        this.timeoutMeta.clear();
+        this.exitTimers.clear();
+        this.closeCallbacks.clear();
+        this.updateToasts(()=>[]);
+        for (const callback of callbacks)callback();
+    }
+    pauseAll() {
+        if (this.paused) return;
+        const now = Date.now();
+        for (const [key, meta] of this.timeoutMeta.entries()){
+            if (meta.timer) {
+                clearTimeout(meta.timer);
+                meta.timer = void 0;
+            }
+            if (meta.startedAt > 0) {
+                const elapsed = now - meta.startedAt;
+                meta.remaining = Math.max(0, meta.remaining - elapsed);
+            }
+            meta.startedAt = 0;
+            this.timeoutMeta.set(key, meta);
+        }
+        this.paused = true;
+    }
+    resumeAll() {
+        if (!this.paused) return;
+        this.paused = false;
+        for (const [key, meta] of this.timeoutMeta.entries()){
+            if (meta.remaining <= 0) {
+                this.close(key);
+                continue;
+            }
+            meta.startedAt = Date.now();
+            meta.timer = setTimeout(()=>{
+                this.close(key);
+            }, meta.remaining);
+            this.timeoutMeta.set(key, meta);
+        }
+    }
+    subscribe(fn) {
+        this.listeners.add(fn);
+        return ()=>{
+            this.listeners.delete(fn);
+        };
+    }
+    toasts() {
+        return this.readToasts();
+    }
+    get visibleToasts() {
+        return this.readToasts();
+    }
+    getQueue() {
+        return this;
+    }
+}
+const ToastItemContext = createContext();
+const useToastItemContext = ()=>{
+    const context = useContext(ToastItemContext);
+    if (!context) throw new Error("Toast compound components must be used within <Toast>.");
+    return context;
+};
+const InfoIcon = ()=>(()=>{
+        var _el$ = _tmpl$();
+        spread(_el$, mergeProps(()=>({
+                class: CLASSES.Indicator.icon
+            }), {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "aria-hidden": "true"
+        }), true, true);
+        return _el$;
+    })();
+const SuccessIcon = ()=>(()=>{
+        var _el$2 = _tmpl$2();
+        spread(_el$2, mergeProps(()=>({
+                class: CLASSES.Indicator.icon
+            }), {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "aria-hidden": "true"
+        }), true, true);
+        return _el$2;
+    })();
+const WarningIcon = ()=>(()=>{
+        var _el$3 = _tmpl$3();
+        spread(_el$3, mergeProps(()=>({
+                class: CLASSES.Indicator.icon
+            }), {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "aria-hidden": "true"
+        }), true, true);
+        return _el$3;
+    })();
+const DangerIcon = ()=>(()=>{
+        var _el$4 = _tmpl$4();
+        spread(_el$4, mergeProps(()=>({
+                class: CLASSES.Indicator.icon
+            }), {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "aria-hidden": "true"
+        }), true, true);
+        return _el$4;
+    })();
+const CloseIcon = ()=>(()=>{
+        var _el$5 = _tmpl$5();
+        spread(_el$5, mergeProps(()=>({
+                class: CLASSES.Close.icon
+            }), {
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            "stroke-width": "2",
+            "stroke-linecap": "round",
+            "stroke-linejoin": "round",
+            "aria-hidden": "true"
+        }), true, true);
+        return _el$5;
+    })();
+const __solidLayoutDefaultIndicator = (_stable, p)=>{
+    if (p.isLoading) return (()=>{
+        var _el$6 = _tmpl$6();
+        spread(_el$6, mergeProps(()=>({
+                class: CLASSES.Spinner.base
+            }), {
+            "aria-hidden": "true"
+        }), false, false);
+        return _el$6;
+    })();
+    switch(p.variant){
+        case "success":
+            return createComponent(SuccessIcon, {});
+        case "warning":
+            return createComponent(WarningIcon, {});
+        case "danger":
+            return createComponent(DangerIcon, {});
+        case "accent":
+            return createComponent(InfoIcon, {});
+        case "default":
+        default:
+            return createComponent(InfoIcon, {});
+    }
+};
+const DefaultIndicator = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutDefaultIndicator,
+    embedded: true
+});
+const __solidLayoutToastContent = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$7 = _tmpl$7();
+        spread(_el$7, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.Content.base, local.class, local.className)
+            }), {
+            "data-slot": "toast-content",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$7, ()=>local.children);
+        return _el$7;
+    })();
+};
+const ToastContent = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutToastContent,
+    embedded: true
+});
+const __solidLayoutToastIndicator = (_stable, p)=>{
+    const ctx = useToastItemContext();
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "variant"
+    ]);
+    const variant = createMemo(()=>normalizeVariant(local.variant ?? ctx.variant()));
+    return (()=>{
+        var _el$8 = _tmpl$7();
+        spread(_el$8, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.Indicator.base, local.class, local.className)
+            }), {
+            "data-slot": "toast-indicator",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$8, createComponent(Show, {
+            get when () {
+                return local.children;
+            },
+            get fallback () {
+                return createComponent(DefaultIndicator, {
+                    get variant () {
+                        return variant();
+                    },
+                    get isLoading () {
+                        return ctx.isLoading();
+                    }
+                });
+            },
+            get children () {
+                return local.children;
+            }
+        }));
+        return _el$8;
+    })();
+};
+const ToastIndicator = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutToastIndicator,
+    embedded: true
+});
+const __solidLayoutToastTitle = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$9 = _tmpl$8();
+        spread(_el$9, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.Title.base, local.class, local.className)
+            }), {
+            "data-slot": "toast-title",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$9, ()=>local.children);
+        return _el$9;
+    })();
+};
+const ToastTitle = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutToastTitle,
+    embedded: true
+});
+const __solidLayoutToastDescription = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style"
+    ]);
+    return (()=>{
+        var _el$0 = _tmpl$8();
+        spread(_el$0, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.Description.base, local.class, local.className)
+            }), {
+            "data-slot": "toast-description",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        insert(_el$0, ()=>local.children);
+        return _el$0;
+    })();
+};
+const ToastDescription = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutToastDescription,
+    embedded: true
+});
+const __solidLayoutToastActionButton = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "class",
+        "className"
+    ]);
+    return createComponent(button_0, mergeProps(others, {
+        variant: "outline",
+        size: "sm"
+    }, ()=>({
+            class: twMerge(CLASSES.Action.base, local.class, local.className)
+        }), {
+        "data-slot": "toast-action",
+        get children () {
+            return p.children;
+        }
+    }));
+};
+const ToastActionButton = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutToastActionButton,
+    embedded: true
+});
+const __solidLayoutToastCloseButton = (_stable, p)=>{
+    const ctx = useToastItemContext();
+    const [local, others] = splitProps(p, [
+        "class",
+        "className",
+        "aria-label",
+        "dataTheme",
+        "style",
+        "onClick"
+    ]);
+    const handleClick = (event)=>{
+        invokeEventHandler(local.onClick, event);
+        if (event.defaultPrevented) return;
+        ctx.onClose?.();
+    };
+    return createComponent(close_button, mergeProps(others, ()=>({
+            class: twMerge(CLASSES.Close.base, local.class, local.className)
+        }), {
+        get ["aria-label"] () {
+            return local["aria-label"] ?? "Dismiss notification";
+        },
+        get startIcon () {
+            return createComponent(CloseIcon, {});
+        },
+        "data-slot": "toast-close",
+        get ["data-theme"] () {
+            return local.dataTheme;
+        },
+        get style () {
+            return local.style;
+        },
+        onClick: handleClick
+    }));
+};
+const ToastCloseButton = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutToastCloseButton,
+    embedded: true
+});
+const __solidLayoutToastRoot = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "title",
+        "description",
+        "variant",
+        "indicator",
+        "actionProps",
+        "isLoading",
+        "onClose",
+        "isFrontmost",
+        "isHidden",
+        "isEntering",
+        "isExiting"
+    ]);
+    const variant = createMemo(()=>normalizeVariant(local.variant));
+    const isLoading = createMemo(()=>Boolean(local.isLoading));
+    const isFrontmost = createMemo(()=>local.isFrontmost ?? true);
+    const isHidden = createMemo(()=>local.isHidden ?? false);
+    const contextValue = {
+        variant,
+        isLoading,
+        onClose: local.onClose
+    };
+    const role = createMemo(()=>"danger" === variant() ? "alert" : "status");
+    const ariaLive = createMemo(()=>"danger" === variant() ? "assertive" : "polite");
+    return createComponent(ToastItemContext.Provider, {
+        value: contextValue,
+        get children () {
+            var _el$1 = _tmpl$7();
+            spread(_el$1, mergeProps(others, ()=>({
+                    class: twMerge(CLASSES.Item.base, CLASSES.Item.variant[variant()], isFrontmost() && CLASSES.Item.state.frontmost, isHidden() && CLASSES.Item.state.hidden, local.isEntering && CLASSES.Item.state.entering, local.isExiting && CLASSES.Item.state.exiting, local.class, local.className)
+                }), {
+                get role () {
+                    return role();
+                },
+                get ["aria-live"] () {
+                    return ariaLive();
+                },
+                "data-slot": "toast",
+                get ["data-variant"] () {
+                    return variant();
+                },
+                get ["data-frontmost"] () {
+                    return isFrontmost() ? "true" : "false";
+                },
+                get ["data-hidden"] () {
+                    return isHidden() ? "true" : "false";
+                },
+                get ["data-theme"] () {
+                    return local.dataTheme;
+                },
+                get style () {
+                    return local.style;
+                }
+            }), false, true);
+            insert(_el$1, createComponent(Show, {
+                get when () {
+                    return local.children;
+                },
+                get fallback () {
+                    return [
+                        createComponent(ToastIndicator, {
+                            get children () {
+                                return local.indicator;
+                            }
+                        }),
+                        createComponent(ToastContent, {
+                            get children () {
+                                return [
+                                    createComponent(Show, {
+                                        get when () {
+                                            return null != local.title;
+                                        },
+                                        get children () {
+                                            return createComponent(ToastTitle, {
+                                                get children () {
+                                                    return local.title;
+                                                }
+                                            });
+                                        }
+                                    }),
+                                    createComponent(Show, {
+                                        get when () {
+                                            return null != local.description;
+                                        },
+                                        get children () {
+                                            return createComponent(ToastDescription, {
+                                                get children () {
+                                                    return local.description;
+                                                }
+                                            });
+                                        }
+                                    }),
+                                    createComponent(Show, {
+                                        get when () {
+                                            return local.actionProps?.children;
+                                        },
+                                        get children () {
+                                            return createComponent(ToastActionButton, mergeProps(()=>local.actionProps));
+                                        }
+                                    })
+                                ];
+                            }
+                        }),
+                        createComponent(Show, {
+                            get when () {
+                                return local.onClose;
+                            },
+                            get children () {
+                                return createComponent(ToastCloseButton, {});
+                            }
+                        })
+                    ];
+                },
+                get children () {
+                    return local.children;
+                }
+            }));
+            return _el$1;
+        }
+    });
+};
+const ToastRoot = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutToastRoot,
+    embedded: true
+});
+const __solidLayoutToastProvider = (_stable, p)=>{
+    const [local, others] = splitProps(p, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "style",
+        "ref",
+        "placement",
+        "queue",
+        "width",
+        "gap",
+        "maxVisibleToasts",
+        "scaleFactor",
+        "renderToast",
+        "onMouseEnter",
+        "onMouseLeave"
+    ]);
+    const queue = createMemo(()=>void 0 === local.queue ? toastQueue : local.queue);
+    const placement = createMemo(()=>normalizePlacement(local.placement));
+    const gap = createMemo(()=>local.gap ?? DEFAULT_GAP);
+    const scaleFactor = createMemo(()=>local.scaleFactor ?? DEFAULT_SCALE_FACTOR);
+    const maxVisible = createMemo(()=>local.maxVisibleToasts ?? queue()?.maxVisibleToasts ?? DEFAULT_MAX_VISIBLE_TOAST);
+    const toasts = createMemo(()=>queue()?.toasts() ?? []);
+    const [frontHeight, setFrontHeight] = createSignal(0);
+    const itemRefs = new Map();
+    const setItemRef = (key, node)=>{
+        if (!node) return void itemRefs.delete(key);
+        itemRefs.set(key, node);
+    };
+    createEffect(()=>{
+        const frontmostToast = toasts()[0];
+        const frontmostNode = frontmostToast ? itemRefs.get(frontmostToast.key) : void 0;
+        if (!frontmostNode) return void setFrontHeight(0);
+        setFrontHeight(frontmostNode.getBoundingClientRect().height);
+        if ("u" < typeof ResizeObserver) return;
+        const resizeObserver = new ResizeObserver((entries)=>{
+            const entry = entries[0];
+            if (entry) setFrontHeight(entry.contentRect.height);
+        });
+        resizeObserver.observe(frontmostNode);
+        onCleanup(()=>{
+            resizeObserver.disconnect();
+        });
+    });
+    const widthValue = createMemo(()=>{
+        if ("number" == typeof local.width) return `${local.width}px`;
+        return local.width ?? `${DEFAULT_TOAST_WIDTH}px`;
+    });
+    const providerStyle = createMemo(()=>({
+            "--toast-width": widthValue(),
+            ...local.style ?? {}
+        }));
+    const handleMouseEnter = (event)=>{
+        invokeEventHandler(local.onMouseEnter, event);
+        queue()?.pauseAll();
+    };
+    const handleMouseLeave = (event)=>{
+        invokeEventHandler(local.onMouseLeave, event);
+        queue()?.resumeAll();
+    };
+    return (()=>{
+        var _el$10 = _tmpl$9(), _el$11 = _el$10.firstChild;
+        var _ref$ = local.ref;
+        "function" == typeof _ref$ ? use(_ref$, _el$10) : local.ref = _el$10;
+        spread(_el$10, mergeProps(others, ()=>({
+                class: twMerge(CLASSES.Provider.base, CLASSES.Provider.placement[placement()], local.class, local.className)
+            }), {
+            "data-slot": "toast-region",
+            get ["data-placement"] () {
+                return placement();
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return providerStyle();
+            },
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave
+        }), false, true);
+        spread(_el$11, mergeProps(()=>({
+                class: CLASSES.Provider.stack
+            }), {
+            "data-slot": "toast-stack"
+        }), false, true);
+        insert(_el$11, ()=>local.children, null);
+        insert(_el$11, createComponent(For, {
+            get each () {
+                return toasts();
+            },
+            children: (queuedToast, index)=>{
+                const dismiss = ()=>{
+                    queue()?.close(queuedToast.key);
+                };
+                const isFrontmost = ()=>0 === index();
+                const hidden = ()=>index() >= maxVisible();
+                const itemStyle = createMemo(()=>{
+                    const offset = index() * gap();
+                    const direction = isBottomPlacement(placement()) ? -1 : 1;
+                    const scale = Math.max(0.1, 1 - index() * scaleFactor());
+                    return {
+                        transform: `translate3d(0, ${direction * offset}px, 0) scale(${scale})`,
+                        "z-index": `${Math.max(1, toasts().length - index())}`,
+                        "--toast-front-height": `${frontHeight()}px`
+                    };
+                });
+                return (()=>{
+                    var _el$12 = _tmpl$7();
+                    use((node)=>setItemRef(queuedToast.key, node), _el$12);
+                    spread(_el$12, mergeProps(()=>({
+                            class: twMerge(CLASSES.Provider.item.base, CLASSES.Provider.item.placement[placement()], hidden() && CLASSES.Provider.item.state.hidden)
+                        }), {
+                        "data-slot": "toast-region-item",
+                        get ["data-index"] () {
+                            return index();
+                        },
+                        get ["data-hidden"] () {
+                            return hidden() ? "true" : "false";
+                        },
+                        get ["data-frontmost"] () {
+                            return isFrontmost() ? "true" : "false";
+                        },
+                        get style () {
+                            return itemStyle();
+                        }
+                    }), false, true);
+                    insert(_el$12, createComponent(Show, {
+                        get when () {
+                            return local.renderToast;
+                        },
+                        get fallback () {
+                            return createComponent(ToastRoot, {
+                                get title () {
+                                    return queuedToast.content.title;
+                                },
+                                get description () {
+                                    return queuedToast.content.description;
+                                },
+                                get variant () {
+                                    return queuedToast.content.variant;
+                                },
+                                get indicator () {
+                                    return queuedToast.content.indicator;
+                                },
+                                get actionProps () {
+                                    return queuedToast.content.actionProps;
+                                },
+                                get isLoading () {
+                                    return queuedToast.content.isLoading;
+                                },
+                                onClose: dismiss,
+                                get isFrontmost () {
+                                    return isFrontmost();
+                                },
+                                get isHidden () {
+                                    return hidden();
+                                },
+                                get isEntering () {
+                                    return queuedToast.isEntering;
+                                },
+                                get isExiting () {
+                                    return queuedToast.isExiting;
+                                }
+                            });
+                        },
+                        children: (renderToast)=>renderToast()(queuedToast, dismiss)
+                    }));
+                    return _el$12;
+                })();
+            }
+        }), null);
+        return _el$10;
+    })();
+};
+const ToastProvider = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutToastProvider,
+    embedded: true
+});
+const createToastFunction = (queue)=>{
+    const toastFn = (message, options)=>{
+        const timeout = options?.timeout ?? DEFAULT_TOAST_TIMEOUT;
+        return queue.add({
+            title: message,
+            description: options?.description,
+            indicator: options?.indicator,
+            variant: options?.variant ?? "default",
+            actionProps: options?.actionProps,
+            isLoading: options?.isLoading
+        }, {
+            timeout,
+            onClose: options?.onClose
+        });
+    };
+    toastFn.success = (message, options)=>toastFn(message, {
+            ...options,
+            variant: "success"
+        });
+    toastFn.danger = (message, options)=>toastFn(message, {
+            ...options,
+            variant: "danger"
+        });
+    toastFn.error = (message, options)=>toastFn(message, {
+            ...options,
+            variant: "error"
+        });
+    toastFn.info = (message, options)=>toastFn(message, {
+            ...options,
+            variant: "accent"
+        });
+    toastFn.warning = (message, options)=>toastFn(message, {
+            ...options,
+            variant: "warning"
+        });
+    toastFn.promise = (promise, options)=>{
+        const pendingPromise = "function" == typeof promise ? promise() : promise;
+        const loadingToastKey = queue.add({
+            title: options.loading,
+            variant: "default",
+            isLoading: true
+        }, {
+            timeout: 0
+        });
+        pendingPromise.then((data)=>{
+            queue.close(loadingToastKey);
+            const successMessage = "function" == typeof options.success ? options.success(data) : options.success;
+            toastFn.success(successMessage);
+        }).catch((rawError)=>{
+            queue.close(loadingToastKey);
+            const error = rawError instanceof Error ? rawError : new Error("string" == typeof rawError ? rawError : "Unknown error");
+            const errorMessage = "function" == typeof options.error ? options.error(error) : options.error;
+            toastFn.danger(errorMessage);
+        });
+        return loadingToastKey;
+    };
+    toastFn.close = (key)=>{
+        queue.close(key);
+    };
+    toastFn.pauseAll = ()=>{
+        queue.pauseAll();
+    };
+    toastFn.resumeAll = ()=>{
+        queue.resumeAll();
+    };
+    toastFn.clear = ()=>{
+        queue.clear();
+    };
+    toastFn.getQueue = ()=>queue;
+    return toastFn;
+};
+const toastQueue = new ToastQueue({
+    maxVisibleToasts: DEFAULT_QUEUE_MAX_VISIBLE_TOAST
+});
+const Toast_generated_toast = createToastFunction(toastQueue);
+const Toast = Object.assign(ToastRoot, {
+    Provider: ToastProvider,
+    Content: ToastContent,
+    Indicator: ToastIndicator,
+    Title: ToastTitle,
+    Description: ToastDescription,
+    ActionButton: ToastActionButton,
+    CloseButton: ToastCloseButton,
+    Queue: ToastQueue,
+    toast: Toast_generated_toast
+});
+const Toast_generated = Toast;
+export default Toast_generated;
+export { DEFAULT_GAP, DEFAULT_MAX_VISIBLE_TOAST, DEFAULT_SCALE_FACTOR, DEFAULT_TOAST_TIMEOUT, DEFAULT_TOAST_WIDTH, ToastActionButton, ToastCloseButton, ToastContent, ToastDescription, ToastIndicator, ToastProvider, ToastQueue, ToastRoot, ToastTitle, Toast_generated_toast as toast, toastQueue };