@pathscale/ui 0.0.107 → 0.0.108

package/README.md

@@ -3,68 +3,37 @@
 Highly opinionated SolidJS component library — batteries and kitchen sink
 included, but optimized and shiny.
 
-## Building
-
-To build this package, use the following command
+## Install
 
 ```sh
-bun run build
+bun add @pathscale/ui
 ```
 
-# Components Checklist
-
-## Actions
-
-- [x] Button
-- [x] Dropdown
-- [x] Modal
-- [x] Swap
+## Usage
 
-## Data Display
+```tsx
+import { Button, Flex } from "@pathscale/ui";
 
-- [x] Accordion
-- [x] Avatar
-- [x] Badge
-- [x] Card
-- [ ] Carousel
-- [x] Chat Bubble
-- [x] Collapse
-- [x] Countdown
-- [x] Diff
-- [x] Kbd
-- [x] Stats
-- [x] Table
-- [x] Timeline
+export const Example = () => (
+  <Flex direction="col" gap="sm">
+    <Button color="primary">Primary</Button>
+  </Flex>
+);
+```
 
-## Navigation
+## Motion
 
-- [x] Dock
-- [x] Breadcrumbs
-- [x] Link
-- [x] Menu
-- [x] Navbar
-- [x] Pagination
-- [x] Steps
-- [ ] Tabs
+Shared animation primitives live in `@pathscale/ui/motion`. For setup,
+Popmotion driver enablement, and migration notes, see `docs/motion.md`.
 
-## Feedback
+## Development
 
-- [x] Alert
-- [x] Loading
-- [x] Progress
-- [x] Radial Progress
-- [x] Skeleton
-- [x] Tooltip
-- [x] Toast
+```sh
+bun run build
+```
 
-## Data Input
+Other useful scripts:
 
-- [x] Checkbox
-- [x] File Input
-- [x] Input
-- [x] Radio
-- [x] Range
-- [x] Rating
-- [x] Select
-- [x] Textarea
-- [x] Toggle
+- `bun run dev`
+- `bun run lint`
+- `bun run format`

package/dist/components/toastcontainer/ToastStack.d.ts

@@ -0,0 +1,17 @@
+import { type Component, type JSX } from "solid-js";
+import type { ToastProps } from "../toast/Toast";
+import type { MotionPreset } from "../../motion";
+import { type ToastItem } from "../../stores/toastStore";
+export type ToastRenderer = (toast: ToastItem, dismiss: () => void) => JSX.Element;
+export type ToastStackProps = ToastProps & {
+    motionPreset?: MotionPreset;
+    motionPresetName?: string;
+    reduceMotion?: boolean;
+    renderToast?: ToastRenderer;
+    expandOnClick?: boolean;
+    collapsedCount?: number;
+    collapsedOffset?: number;
+    collapsedScale?: number;
+};
+export declare const ToastStack: Component<ToastStackProps>;
+export default ToastStack;

package/dist/components/toastcontainer/index.d.ts

@@ -1 +1,3 @@
 export { ToastContainer } from "./ToastContainer";
+export { ToastStack } from "./ToastStack";
+export type { ToastStackProps, ToastRenderer } from "./ToastStack";

package/dist/index.d.ts

@@ -85,7 +85,8 @@ export type { RadioTabProps, TabProps, TabsProps } from "./components/tabs";
 export { default as Textarea } from "./components/textarea";
 export { Timeline, TimelineEnd, TimelineItem, TimelineMiddle, TimelineStart, } from "./components/timeline";
 export { default as Toast } from "./components/toast";
-export { ToastContainer } from "./components/toastcontainer";
+export { ToastContainer, ToastStack } from "./components/toastcontainer";
+export type { ToastRenderer, ToastStackProps, } from "./components/toastcontainer";
 export { default as Toggle } from "./components/toggle";
 export { default as Tooltip } from "./components/tooltip";
 export { default as WindowMockup, type WindowMockupProps, } from "./components/windowmockup";

package/dist/index.js

@@ -12707,333 +12707,6 @@ const Toast = (props)=>{
     })();
 };
 const toast_Toast = Toast;
-const [toasts, setToasts] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)([]);
-let toastCounter = 0;
-const toastStore = {
-    toasts,
-    addToast: (message, type = "info", duration = 8000)=>{
-        const id = `toast-${++toastCounter}`;
-        const toast = {
-            id,
-            message,
-            type,
-            timestamp: Date.now()
-        };
-        setToasts((prev)=>[
-                ...prev,
-                toast
-            ]);
-        setTimeout(()=>{
-            toastStore.removeToast(id);
-        }, duration);
-        return id;
-    },
-    removeToast: (id)=>{
-        setToasts((prev)=>prev.filter((toast)=>toast.id !== id));
-    },
-    clearAll: ()=>{
-        setToasts([]);
-    },
-    showError: (message)=>toastStore.addToast(message, "error", 10000),
-    showSuccess: (message)=>toastStore.addToast(message, "success", 6000),
-    showWarning: (message)=>toastStore.addToast(message, "warning", 8000),
-    showInfo: (message)=>toastStore.addToast(message, "info", 6000)
-};
-var ToastContainer_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=flex-1>");
-const ToastContainer = ()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(toast_Toast, {
-        get children () {
-            return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
-                get each () {
-                    return toastStore.toasts();
-                },
-                children: (toast)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(alert_Alert, {
-                        get status () {
-                            return toast.type;
-                        },
-                        class: "flex justify-between items-center gap-4",
-                        style: {
-                            "min-width": "20rem",
-                            "max-width": "32rem"
-                        },
-                        get children () {
-                            return [
-                                (()=>{
-                                    var _el$ = ToastContainer_tmpl$();
-                                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>toast.message);
-                                    return _el$;
-                                })(),
-                                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(button_Button, {
-                                    size: "sm",
-                                    color: "ghost",
-                                    onClick: ()=>toastStore.removeToast(toast.id),
-                                    class: "ml-2 opacity-70 hover:opacity-100",
-                                    children: "x"
-                                })
-                            ];
-                        }
-                    })
-            });
-        }
-    });
-var Toggle_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>");
-const Toggle = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "color",
-        "size",
-        "dataTheme",
-        "class",
-        "className",
-        "style",
-        "aria-label",
-        "aria-describedby",
-        "aria-invalid",
-        "aria-required",
-        "aria-labelledby",
-        "aria-checked"
-    ]);
-    const classes = ()=>twMerge("toggle", local.class, local.className, clsx({
-            "toggle-xl": "xl" === local.size,
-            "toggle-lg": "lg" === local.size,
-            "toggle-md": "md" === local.size,
-            "toggle-sm": "sm" === local.size,
-            "toggle-xs": "xs" === local.size,
-            "toggle-neutral": "neutral" === local.color,
-            "toggle-primary": "primary" === local.color,
-            "toggle-secondary": "secondary" === local.color,
-            "toggle-accent": "accent" === local.color,
-            "toggle-info": "info" === local.color,
-            "toggle-success": "success" === local.color,
-            "toggle-warning": "warning" === local.color,
-            "toggle-error": "error" === local.color
-        }));
-    return (()=>{
-        var _el$ = Toggle_tmpl$();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            type: "checkbox",
-            role: "switch",
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get ["class"] () {
-                return classes();
-            },
-            get style () {
-                return local.style;
-            },
-            get ["aria-label"] () {
-                return local["aria-label"];
-            },
-            get ["aria-describedby"] () {
-                return local["aria-describedby"];
-            },
-            get ["aria-invalid"] () {
-                return local["aria-invalid"];
-            },
-            get ["aria-required"] () {
-                return local["aria-required"];
-            },
-            get ["aria-labelledby"] () {
-                return local["aria-labelledby"];
-            },
-            get ["aria-checked"] () {
-                return local["aria-checked"];
-            }
-        }), false, false);
-        return _el$;
-    })();
-};
-const toggle_Toggle = Toggle;
-var WindowMockup_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), WindowMockup_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div aria-label="Window mockup">');
-const WindowMockup = (props)=>{
-    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
-        "children",
-        "class",
-        "className",
-        "dataTheme",
-        "border",
-        "borderColor",
-        "backgroundColor",
-        "frameColor"
-    ]);
-    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
-    const borderColorValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.borderColor || local.frameColor || "neutral");
-    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("mockup-window", local.class, local.className, local.border && `border border-${borderColorValue()}`, dist_clsx({
-            "border-neutral": "neutral" === borderColorValue(),
-            "border-primary": "primary" === borderColorValue(),
-            "border-secondary": "secondary" === borderColorValue(),
-            "border-accent": "accent" === borderColorValue(),
-            "border-info": "info" === borderColorValue(),
-            "border-success": "success" === borderColorValue(),
-            "border-warning": "warning" === borderColorValue(),
-            "border-error": "error" === borderColorValue(),
-            "bg-neutral": "neutral" === local.frameColor,
-            "bg-primary": "primary" === local.frameColor,
-            "bg-secondary": "secondary" === local.frameColor,
-            "bg-accent": "accent" === local.frameColor,
-            "bg-info": "info" === local.frameColor,
-            "bg-success": "success" === local.frameColor,
-            "bg-warning": "warning" === local.frameColor,
-            "bg-error": "error" === local.frameColor
-        })));
-    const innerClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("p-4", local.backgroundColor && `bg-${local.backgroundColor}`, local.border && `border-t border-${borderColorValue()}`, dist_clsx({
-            "bg-neutral": "neutral" === local.backgroundColor,
-            "bg-primary": "primary" === local.backgroundColor,
-            "bg-secondary": "secondary" === local.backgroundColor,
-            "bg-accent": "accent" === local.backgroundColor,
-            "bg-info": "info" === local.backgroundColor,
-            "bg-success": "success" === local.backgroundColor,
-            "bg-warning": "warning" === local.backgroundColor,
-            "bg-error": "error" === local.backgroundColor
-        })));
-    const innerElement = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
-        const childrenArray = Array.isArray(resolvedChildren()) ? resolvedChildren() : [
-            resolvedChildren()
-        ];
-        const firstChild = childrenArray[0];
-        if (1 === childrenArray.length && "object" == typeof firstChild && null != firstChild && "type" in firstChild) {
-            const existingClass = firstChild.props?.class || firstChild.props?.className || "";
-            const mergedClass = twMerge(innerClasses(), existingClass);
-            return {
-                ...firstChild,
-                props: {
-                    ...firstChild.props,
-                    class: mergedClass
-                }
-            };
-        }
-        return (()=>{
-            var _el$ = WindowMockup_tmpl$();
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
-            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, innerClasses()));
-            return _el$;
-        })();
-    });
-    return (()=>{
-        var _el$2 = WindowMockup_tmpl$2();
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
-            get ["data-theme"] () {
-                return local.dataTheme;
-            },
-            get ["class"] () {
-                return classes();
-            }
-        }), false, true);
-        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, innerElement);
-        return _el$2;
-    })();
-};
-const windowmockup_WindowMockup = WindowMockup;
-const easeOutCubic = (t)=>1 - Math.pow(1 - t, 3);
-const easeInCubic = (t)=>t * t * t;
-const easeInOutCubic = (t)=>t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
-const resolveEase = (easing)=>{
-    if ("function" == typeof easing) return easing;
-    switch(easing){
-        case "ease-in":
-            return easeInCubic;
-        case "ease-in-out":
-            return easeInOutCubic;
-        case "linear":
-            return (t)=>t;
-        case "ease-out":
-        default:
-            return easeOutCubic;
-    }
-};
-const immediateDriver = ({ to, onUpdate, onComplete })=>{
-    onUpdate(to);
-    onComplete?.();
-    return {
-        stop: ()=>{}
-    };
-};
-let activeDriver = immediateDriver;
-const setMotionDriver = (driver)=>{
-    activeDriver = driver;
-};
-const getMotionDriver = ()=>activeDriver;
-const resolveDuration = (transition)=>Math.max(0, (transition?.duration ?? 0) * 1000);
-const resolveDelay = (transition)=>Math.max(0, (transition?.delay ?? 0) * 1000);
-const readOpacity = (el)=>{
-    const value = Number.parseFloat(getComputedStyle(el).opacity);
-    return Number.isFinite(value) ? value : 1;
-};
-const runMotion = (el, from, to, transition, onComplete)=>{
-    const duration = resolveDuration(transition);
-    const delay = resolveDelay(transition);
-    const ease = resolveEase(transition?.easing);
-    const driver = getMotionDriver();
-    const controls = [];
-    const shouldTransform = void 0 !== from.x || void 0 !== from.y || void 0 !== from.scale || void 0 !== to.x || void 0 !== to.y || void 0 !== to.scale;
-    const transformState = {
-        x: from.x ?? 0,
-        y: from.y ?? 0,
-        scale: from.scale ?? 1
-    };
-    const applyTransform = ()=>{
-        if (!shouldTransform) return;
-        el.style.transform = `translate3d(${transformState.x}px, ${transformState.y}px, 0) scale(${transformState.scale})`;
-    };
-    if (void 0 !== from.opacity) el.style.opacity = String(from.opacity);
-    applyTransform();
-    const animationTargets = Object.keys(to);
-    if (0 === animationTargets.length) {
-        onComplete?.();
-        return {
-            stop: ()=>{}
-        };
-    }
-    let remaining = animationTargets.length;
-    const handleComplete = ()=>{
-        remaining -= 1;
-        if (remaining <= 0) onComplete?.();
-    };
-    const start = ()=>{
-        animationTargets.forEach((key)=>{
-            if ("opacity" === key) {
-                const fromValue = from.opacity ?? (void 0 !== to.opacity ? readOpacity(el) : 1);
-                const control = driver({
-                    from: fromValue,
-                    to: to.opacity ?? fromValue,
-                    duration,
-                    ease,
-                    onUpdate: (latest)=>{
-                        el.style.opacity = String(latest);
-                    },
-                    onComplete: handleComplete
-                });
-                controls.push(control);
-                return;
-            }
-            const fromValue = "scale" === key ? from.scale ?? 1 : "x" === key ? from.x ?? 0 : from.y ?? 0;
-            const toValue = to[key] ?? fromValue;
-            const control = driver({
-                from: fromValue,
-                to: toValue,
-                duration,
-                ease,
-                onUpdate: (latest)=>{
-                    if (!shouldTransform) return;
-                    if ("x" === key) transformState.x = latest;
-                    if ("y" === key) transformState.y = latest;
-                    if ("scale" === key) transformState.scale = latest;
-                    applyTransform();
-                },
-                onComplete: handleComplete
-            });
-            controls.push(control);
-        });
-    };
-    let timeoutId = null;
-    if (delay > 0) timeoutId = window.setTimeout(start, delay);
-    else start();
-    return {
-        stop: ()=>{
-            if (null !== timeoutId) clearTimeout(timeoutId);
-            controls.forEach((control)=>control.stop());
-        }
-    };
-};
 const prefersReducedMotion = ()=>globalThis.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
 const motionDurations = {
     route: 0.18,
@@ -13201,6 +12874,24 @@ const createMotionPresets = (tokens)=>{
                 delay: 0.08
             }
         },
+        toast: {
+            initial: {
+                opacity: 0,
+                y: distances.sm
+            },
+            animate: {
+                opacity: 1,
+                y: 0
+            },
+            exit: {
+                opacity: 0,
+                y: -distances.sm
+            },
+            transition: {
+                duration: durations.fast,
+                easing: easings.out
+            }
+        },
         routeDashboard: {
             initial: {
                 opacity: 0,
@@ -13258,6 +12949,117 @@ const presets_resolvePreset = (name, options)=>{
     if (reduce) return noMotion;
     return motionPresets[name] ?? noMotion;
 };
+const immediateDriver = ({ to, onUpdate, onComplete })=>{
+    onUpdate(to);
+    onComplete?.();
+    return {
+        stop: ()=>{}
+    };
+};
+let activeDriver = immediateDriver;
+const setMotionDriver = (driver)=>{
+    activeDriver = driver;
+};
+const getMotionDriver = ()=>activeDriver;
+const easeOutCubic = (t)=>1 - Math.pow(1 - t, 3);
+const easeInCubic = (t)=>t * t * t;
+const easeInOutCubic = (t)=>t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+const resolveEase = (easing)=>{
+    if ("function" == typeof easing) return easing;
+    switch(easing){
+        case "ease-in":
+            return easeInCubic;
+        case "ease-in-out":
+            return easeInOutCubic;
+        case "linear":
+            return (t)=>t;
+        case "ease-out":
+        default:
+            return easeOutCubic;
+    }
+};
+const resolveDuration = (transition)=>Math.max(0, (transition?.duration ?? 0) * 1000);
+const resolveDelay = (transition)=>Math.max(0, (transition?.delay ?? 0) * 1000);
+const readOpacity = (el)=>{
+    const value = Number.parseFloat(getComputedStyle(el).opacity);
+    return Number.isFinite(value) ? value : 1;
+};
+const runMotion = (el, from, to, transition, onComplete)=>{
+    const duration = resolveDuration(transition);
+    const delay = resolveDelay(transition);
+    const ease = resolveEase(transition?.easing);
+    const driver = getMotionDriver();
+    const controls = [];
+    const shouldTransform = void 0 !== from.x || void 0 !== from.y || void 0 !== from.scale || void 0 !== to.x || void 0 !== to.y || void 0 !== to.scale;
+    const transformState = {
+        x: from.x ?? 0,
+        y: from.y ?? 0,
+        scale: from.scale ?? 1
+    };
+    const applyTransform = ()=>{
+        if (!shouldTransform) return;
+        el.style.transform = `translate3d(${transformState.x}px, ${transformState.y}px, 0) scale(${transformState.scale})`;
+    };
+    if (void 0 !== from.opacity) el.style.opacity = String(from.opacity);
+    applyTransform();
+    const animationTargets = Object.keys(to);
+    if (0 === animationTargets.length) {
+        onComplete?.();
+        return {
+            stop: ()=>{}
+        };
+    }
+    let remaining = animationTargets.length;
+    const handleComplete = ()=>{
+        remaining -= 1;
+        if (remaining <= 0) onComplete?.();
+    };
+    const start = ()=>{
+        animationTargets.forEach((key)=>{
+            if ("opacity" === key) {
+                const fromValue = from.opacity ?? (void 0 !== to.opacity ? readOpacity(el) : 1);
+                const control = driver({
+                    from: fromValue,
+                    to: to.opacity ?? fromValue,
+                    duration,
+                    ease,
+                    onUpdate: (latest)=>{
+                        el.style.opacity = String(latest);
+                    },
+                    onComplete: handleComplete
+                });
+                controls.push(control);
+                return;
+            }
+            const fromValue = "scale" === key ? from.scale ?? 1 : "x" === key ? from.x ?? 0 : from.y ?? 0;
+            const toValue = to[key] ?? fromValue;
+            const control = driver({
+                from: fromValue,
+                to: toValue,
+                duration,
+                ease,
+                onUpdate: (latest)=>{
+                    if (!shouldTransform) return;
+                    if ("x" === key) transformState.x = latest;
+                    if ("y" === key) transformState.y = latest;
+                    if ("scale" === key) transformState.scale = latest;
+                    applyTransform();
+                },
+                onComplete: handleComplete
+            });
+            controls.push(control);
+        });
+    };
+    let timeoutId = null;
+    if (delay > 0) timeoutId = window.setTimeout(start, delay);
+    else start();
+    return {
+        stop: ()=>{
+            if (null !== timeoutId) clearTimeout(timeoutId);
+            controls.forEach((control)=>control.stop());
+        }
+    };
+};
 var MotionDiv_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
 const MotionDiv_MotionDiv = (props)=>{
     const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
@@ -13330,6 +13132,370 @@ const MotionDiv_MotionDiv = (props)=>{
     })();
 };
 const MotionDiv = MotionDiv_MotionDiv;
+const [toasts, setToasts] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)([]);
+let toastCounter = 0;
+const toastTimers = new Map();
+const clearToastTimer = (id)=>{
+    const timer = toastTimers.get(id);
+    if (!timer) return;
+    clearTimeout(timer);
+    toastTimers.delete(id);
+};
+const scheduleDismiss = (id, duration)=>{
+    if (duration <= 0) return;
+    clearToastTimer(id);
+    const timer = setTimeout(()=>{
+        toastStore.dismissToast(id);
+    }, duration);
+    toastTimers.set(id, timer);
+};
+const toastStore = {
+    toasts,
+    addToast: (message, type = "info", duration = 8000)=>{
+        const id = `toast-${++toastCounter}`;
+        const toast = {
+            id,
+            message,
+            type,
+            timestamp: Date.now(),
+            duration
+        };
+        setToasts((prev)=>[
+                ...prev,
+                toast
+            ]);
+        scheduleDismiss(id, duration);
+        return id;
+    },
+    dismissToast: (id)=>{
+        clearToastTimer(id);
+        setToasts((prev)=>prev.map((toast)=>toast.id !== id || toast.isExiting ? toast : {
+                    ...toast,
+                    isExiting: true
+                }));
+    },
+    removeToast: (id)=>{
+        clearToastTimer(id);
+        setToasts((prev)=>prev.filter((toast)=>toast.id !== id));
+    },
+    clearAll: ()=>{
+        toastTimers.forEach((timer)=>clearTimeout(timer));
+        toastTimers.clear();
+        setToasts([]);
+    },
+    showError: (message)=>toastStore.addToast(message, "error", 10000),
+    showSuccess: (message)=>toastStore.addToast(message, "success", 6000),
+    showWarning: (message)=>toastStore.addToast(message, "warning", 8000),
+    showInfo: (message)=>toastStore.addToast(message, "info", 6000)
+};
+var ToastStack_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<span class=flex-1>"), ToastStack_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const defaultRenderToast = (toast, dismiss)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(alert_Alert, {
+        get status () {
+            return toast.type;
+        },
+        class: "flex justify-between items-center gap-4",
+        style: {
+            "min-width": "20rem",
+            "max-width": "32rem"
+        },
+        get children () {
+            return [
+                (()=>{
+                    var _el$ = ToastStack_tmpl$();
+                    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>toast.message);
+                    return _el$;
+                })(),
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(button_Button, {
+                    size: "sm",
+                    color: "ghost",
+                    onClick: (event)=>{
+                        event.stopPropagation();
+                        dismiss();
+                    },
+                    class: "ml-2 opacity-70 hover:opacity-100",
+                    "aria-label": "Dismiss notification",
+                    children: "x"
+                })
+            ];
+        }
+    });
+const ToastStack_ToastStack = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "motionPreset",
+        "motionPresetName",
+        "reduceMotion",
+        "renderToast",
+        "max",
+        "expandOnClick",
+        "collapsedCount",
+        "collapsedOffset",
+        "collapsedScale"
+    ]);
+    const [expanded, setExpanded] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(false);
+    const resolvedPreset = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (local.motionPreset) return local.motionPreset;
+        const name = local.motionPresetName ?? "toast";
+        return presets_resolvePreset(name, {
+            reduceMotion: local.reduceMotion
+        });
+    });
+    const visibleToasts = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const list = toastStore.toasts();
+        if (local.max && local.max > 0) return list.slice(-local.max);
+        return list;
+    });
+    const allowCollapse = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (false === local.expandOnClick) return false;
+        return visibleToasts().length > 1;
+    });
+    const isExpanded = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        if (!allowCollapse()) return true;
+        return expanded();
+    });
+    const collapsedCount = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.collapsedCount ?? 3);
+    const collapsedOffset = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.collapsedOffset ?? 10);
+    const collapsedScale = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.collapsedScale ?? 0.02);
+    const stackToasts = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const list = visibleToasts();
+        if (isExpanded()) return list;
+        const count = collapsedCount();
+        if (count <= 0) return list;
+        return list.slice(-count);
+    });
+    const renderToast = ()=>local.renderToast ?? defaultRenderToast;
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(toast_Toast, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+        get children () {
+            var _el$2 = ToastStack_tmpl$2();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+                get each () {
+                    return stackToasts();
+                },
+                children: (toast, index)=>{
+                    const isTop = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>index() === stackToasts().length - 1);
+                    const stackIndex = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>stackToasts().length - 1 - index());
+                    const onToggle = ()=>{
+                        if (!allowCollapse() || !isTop()) return;
+                        setExpanded((prev)=>!prev);
+                    };
+                    const stackStyle = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+                        if (isExpanded()) return {};
+                        const offset = stackIndex() * collapsedOffset();
+                        const scale = 1 - stackIndex() * collapsedScale();
+                        return {
+                            position: "absolute",
+                            right: "0",
+                            bottom: `${offset}px`,
+                            transform: `scale(${scale})`,
+                            "transform-origin": "right bottom",
+                            "z-index": String(100 + index()),
+                            transition: "transform 160ms ease-out"
+                        };
+                    });
+                    return (()=>{
+                        var _el$3 = ToastStack_tmpl$2();
+                        _el$3.$$click = onToggle;
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$3, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(MotionDiv, {
+                            get initial () {
+                                return resolvedPreset().initial;
+                            },
+                            get animate () {
+                                return resolvedPreset().animate;
+                            },
+                            get exit () {
+                                return resolvedPreset().exit;
+                            },
+                            get transition () {
+                                return resolvedPreset().transition;
+                            },
+                            get isExiting () {
+                                return toast.isExiting;
+                            },
+                            onExitComplete: ()=>toastStore.removeToast(toast.id),
+                            get children () {
+                                return renderToast()(toast, ()=>toastStore.dismissToast(toast.id));
+                            }
+                        }));
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                            var _v$3 = isTop() && !isExpanded() ? "cursor-pointer" : void 0, _v$4 = stackStyle();
+                            _v$3 !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$3, _p$.e = _v$3);
+                            _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$3, _v$4, _p$.t);
+                            return _p$;
+                        }, {
+                            e: void 0,
+                            t: void 0
+                        });
+                        return _el$3;
+                    })();
+                }
+            }));
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)((_p$)=>{
+                var _v$ = isExpanded() ? "flex flex-col gap-2" : "relative", _v$2 = isExpanded() ? void 0 : {
+                    "min-height": "3rem"
+                };
+                _v$ !== _p$.e && (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$2, _p$.e = _v$);
+                _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$2, _v$2, _p$.t);
+                return _p$;
+            }, {
+                e: void 0,
+                t: void 0
+            });
+            return _el$2;
+        }
+    }));
+};
+const ToastStack = ToastStack_ToastStack;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
+const ToastContainer = ()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(ToastStack, {});
+var Toggle_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<input>");
+const Toggle = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "color",
+        "size",
+        "dataTheme",
+        "class",
+        "className",
+        "style",
+        "aria-label",
+        "aria-describedby",
+        "aria-invalid",
+        "aria-required",
+        "aria-labelledby",
+        "aria-checked"
+    ]);
+    const classes = ()=>twMerge("toggle", local.class, local.className, clsx({
+            "toggle-xl": "xl" === local.size,
+            "toggle-lg": "lg" === local.size,
+            "toggle-md": "md" === local.size,
+            "toggle-sm": "sm" === local.size,
+            "toggle-xs": "xs" === local.size,
+            "toggle-neutral": "neutral" === local.color,
+            "toggle-primary": "primary" === local.color,
+            "toggle-secondary": "secondary" === local.color,
+            "toggle-accent": "accent" === local.color,
+            "toggle-info": "info" === local.color,
+            "toggle-success": "success" === local.color,
+            "toggle-warning": "warning" === local.color,
+            "toggle-error": "error" === local.color
+        }));
+    return (()=>{
+        var _el$ = Toggle_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            type: "checkbox",
+            role: "switch",
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
+            },
+            get style () {
+                return local.style;
+            },
+            get ["aria-label"] () {
+                return local["aria-label"];
+            },
+            get ["aria-describedby"] () {
+                return local["aria-describedby"];
+            },
+            get ["aria-invalid"] () {
+                return local["aria-invalid"];
+            },
+            get ["aria-required"] () {
+                return local["aria-required"];
+            },
+            get ["aria-labelledby"] () {
+                return local["aria-labelledby"];
+            },
+            get ["aria-checked"] () {
+                return local["aria-checked"];
+            }
+        }), false, false);
+        return _el$;
+    })();
+};
+const toggle_Toggle = Toggle;
+var WindowMockup_tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>"), WindowMockup_tmpl$2 = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)('<div aria-label="Window mockup">');
+const WindowMockup = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "children",
+        "class",
+        "className",
+        "dataTheme",
+        "border",
+        "borderColor",
+        "backgroundColor",
+        "frameColor"
+    ]);
+    const resolvedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>local.children);
+    const borderColorValue = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>local.borderColor || local.frameColor || "neutral");
+    const classes = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("mockup-window", local.class, local.className, local.border && `border border-${borderColorValue()}`, dist_clsx({
+            "border-neutral": "neutral" === borderColorValue(),
+            "border-primary": "primary" === borderColorValue(),
+            "border-secondary": "secondary" === borderColorValue(),
+            "border-accent": "accent" === borderColorValue(),
+            "border-info": "info" === borderColorValue(),
+            "border-success": "success" === borderColorValue(),
+            "border-warning": "warning" === borderColorValue(),
+            "border-error": "error" === borderColorValue(),
+            "bg-neutral": "neutral" === local.frameColor,
+            "bg-primary": "primary" === local.frameColor,
+            "bg-secondary": "secondary" === local.frameColor,
+            "bg-accent": "accent" === local.frameColor,
+            "bg-info": "info" === local.frameColor,
+            "bg-success": "success" === local.frameColor,
+            "bg-warning": "warning" === local.frameColor,
+            "bg-error": "error" === local.frameColor
+        })));
+    const innerClasses = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>twMerge("p-4", local.backgroundColor && `bg-${local.backgroundColor}`, local.border && `border-t border-${borderColorValue()}`, dist_clsx({
+            "bg-neutral": "neutral" === local.backgroundColor,
+            "bg-primary": "primary" === local.backgroundColor,
+            "bg-secondary": "secondary" === local.backgroundColor,
+            "bg-accent": "accent" === local.backgroundColor,
+            "bg-info": "info" === local.backgroundColor,
+            "bg-success": "success" === local.backgroundColor,
+            "bg-warning": "warning" === local.backgroundColor,
+            "bg-error": "error" === local.backgroundColor
+        })));
+    const innerElement = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const childrenArray = Array.isArray(resolvedChildren()) ? resolvedChildren() : [
+            resolvedChildren()
+        ];
+        const firstChild = childrenArray[0];
+        if (1 === childrenArray.length && "object" == typeof firstChild && null != firstChild && "type" in firstChild) {
+            const existingClass = firstChild.props?.class || firstChild.props?.className || "";
+            const mergedClass = twMerge(innerClasses(), existingClass);
+            return {
+                ...firstChild,
+                props: {
+                    ...firstChild.props,
+                    class: mergedClass
+                }
+            };
+        }
+        return (()=>{
+            var _el$ = WindowMockup_tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, resolvedChildren);
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.effect)(()=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.className)(_el$, innerClasses()));
+            return _el$;
+        })();
+    });
+    return (()=>{
+        var _el$2 = WindowMockup_tmpl$2();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get ["class"] () {
+                return classes();
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, innerElement);
+        return _el$2;
+    })();
+};
+const windowmockup_WindowMockup = WindowMockup;
 const createPopmotionDriver = (animate)=>(options)=>animate(options);
 const enablePopmotion = (animate)=>{
     setMotionDriver(createPopmotionDriver(animate));
@@ -13410,4 +13576,4 @@ const createRouteTransitionResolver = (options)=>{
         return fallback ?? noMotion;
     };
 };
-export { accordion_Accordion as Accordion, alert_Alert as Alert, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, bottom_sheet_BottomSheet as BottomSheet, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, Calendar, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, connectionstatus_ConnectionStatus as ConnectionStatus, CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, EnhancedTable, FileInput, flex_Flex as Flex, footer_Footer as Footer, form_Form as Form, Grid, hero_Hero as Hero, icon_Icon as Icon, indicator_Indicator as Indicator, input as Input, join_Join as Join, kbd_Kbd as Kbd, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal_Modal as Modal, MotionDiv, navbar_Navbar as Navbar, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, showcase_section_ShowcaseSection as ShowcaseSection, sidenav_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, streaming_table_StreamingTable as StreamingTable, Summary, SvgBackground, Swap, table_Table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, ToastContainer, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup, createMotionPresets, createMotionSystem, createPopmotionDriver, createRouteTransitionResolver, createStreamingTableStore, connectionstatus_ConnectionStatus as default, defaultMotionTokens, enablePopmotion, getMotionDriver, presets_getPreset as getPreset, immediateDriver, mergeMotionTokens, motionDistances, motionDurations, motionEasings, motionPresets, noMotion, prefersReducedMotion, presets_registerPreset as registerPreset, resolveEase, presets_resolvePreset as resolvePreset, routeTransition, runMotion, setMotionDriver, toastStore, useDesktop, useFormValidation };
+export { accordion_Accordion as Accordion, alert_Alert as Alert, artboard_Artboard as Artboard, avatar as Avatar, background_Background as Background, Badge, bottom_sheet_BottomSheet as BottomSheet, Breadcrumbs, breadcrumbs_BreadcrumbsItem as BreadcrumbsItem, browsermockup_BrowserMockup as BrowserMockup, button_Button as Button, Calendar, card_Card as Card, carousel_Carousel as Carousel, chatbubble_ChatBubble as ChatBubble, checkbox_Checkbox as Checkbox, codemockup_CodeMockup as CodeMockup, CodeMockupLine, collapse_Collapse as Collapse, CollapseContent, CollapseDetails, CollapseTitle, connectionstatus_ConnectionStatus as ConnectionStatus, CopyButton, countdown_Countdown as Countdown, diff_Diff as Diff, divider as Divider, dock as Dock, Drawer, dropdown as Dropdown, EnhancedTable, FileInput, flex_Flex as Flex, footer_Footer as Footer, form_Form as Form, Grid, hero_Hero as Hero, icon_Icon as Icon, indicator_Indicator as Indicator, input as Input, join_Join as Join, kbd_Kbd as Kbd, link_Link as Link, loading_Loading as Loading, mask as Mask, menu_Menu as Menu, modal_Modal as Modal, MotionDiv, navbar_Navbar as Navbar, pagination_Pagination as Pagination, phonemockup_PhoneMockup as PhoneMockup, Progress, props_table_PropsTable as PropsTable, radialprogress_RadialProgress as RadialProgress, radio_Radio as Radio, range_Range as Range, Rating, select_Select as Select, showcase_ShowcaseBlock as ShowcaseBlock, showcase_section_ShowcaseSection as ShowcaseSection, sidenav_Sidenav as Sidenav, sidenav_SidenavButton as SidenavButton, sidenav_SidenavGroup as SidenavGroup, sidenav_SidenavItem as SidenavItem, sidenav_SidenavLink as SidenavLink, sidenav_SidenavMenu as SidenavMenu, skeleton_Skeleton as Skeleton, Stack, stat_card_StatCard as StatCard, stats_Stats as Stats, status_Status as Status, steps as Steps, streaming_table_StreamingTable as StreamingTable, Summary, SvgBackground, Swap, table_Table as Table, tabs_Tabs as Tabs, textarea_Textarea as Textarea, Timeline, timeline_TimelineEnd as TimelineEnd, timeline_TimelineItem as TimelineItem, timeline_TimelineMiddle as TimelineMiddle, timeline_TimelineStart as TimelineStart, toast_Toast as Toast, ToastContainer, ToastStack_ToastStack as ToastStack, toggle_Toggle as Toggle, tooltip_Tooltip as Tooltip, windowmockup_WindowMockup as WindowMockup, createMotionPresets, createMotionSystem, createPopmotionDriver, createRouteTransitionResolver, createStreamingTableStore, connectionstatus_ConnectionStatus as default, defaultMotionTokens, enablePopmotion, getMotionDriver, presets_getPreset as getPreset, immediateDriver, mergeMotionTokens, motionDistances, motionDurations, motionEasings, motionPresets, noMotion, prefersReducedMotion, presets_registerPreset as registerPreset, resolveEase, presets_resolvePreset as resolvePreset, routeTransition, runMotion, setMotionDriver, toastStore, useDesktop, useFormValidation };

package/dist/stores/toastStore.d.ts

@@ -4,10 +4,13 @@ export interface ToastItem {
     message: string;
     type: ToastType;
     timestamp: number;
+    duration: number;
+    isExiting?: boolean;
 }
 export declare const toastStore: {
     toasts: import("solid-js").Accessor<ToastItem[]>;
     addToast: (message: string, type?: ToastType, duration?: number) => string;
+    dismissToast: (id: string) => void;
     removeToast: (id: string) => void;
     clearAll: () => void;
     showError: (message: string) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pathscale/ui",
-  "version": "0.0.107",
+  "version": "0.0.108",
   "author": "pathscale",
   "repository": {
     "type": "git",