@pathscale/ui 0.0.106 → 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,9 +85,11 @@ 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";
 export * from "./stores";
+export * from "./motion";
 export { default } from "./components/connectionstatus";

package/dist/index.js

@@ -269,19 +269,19 @@ function twJoin() {
     let resolvedValue;
     let string = '';
     while(index < arguments.length)if (argument = arguments[index++]) {
-        if (resolvedValue = toValue(argument)) {
+        if (resolvedValue = bundle_mjs_toValue(argument)) {
             string && (string += ' ');
             string += resolvedValue;
         }
     }
     return string;
 }
-const toValue = (mix)=>{
+const bundle_mjs_toValue = (mix)=>{
     if ('string' == typeof mix) return mix;
     let resolvedValue;
     let string = '';
     for(let k = 0; k < mix.length; k++)if (mix[k]) {
-        if (resolvedValue = toValue(mix[k])) {
+        if (resolvedValue = bundle_mjs_toValue(mix[k])) {
             string && (string += ' ');
             string += resolvedValue;
         }
@@ -12707,8 +12707,448 @@ const Toast = (props)=>{
     })();
 };
 const toast_Toast = Toast;
+const prefersReducedMotion = ()=>globalThis.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
+const motionDurations = {
+    route: 0.18,
+    routeAuth: 0.35,
+    fast: 0.2,
+    base: 0.3,
+    slow: 0.45
+};
+const motionEasings = {
+    out: "ease-out",
+    inOut: "ease-in-out"
+};
+const motionDistances = {
+    sm: 6,
+    md: 12,
+    lg: 20,
+    slideIn: 40
+};
+const defaultMotionTokens = {
+    durations: {
+        ...motionDurations
+    },
+    easings: {
+        ...motionEasings
+    },
+    distances: {
+        ...motionDistances
+    }
+};
+const mergeDefined = (base, overrides)=>{
+    const next = {
+        ...base
+    };
+    if (!overrides) return next;
+    for (const [key, value] of Object.entries(overrides))if (void 0 !== value) next[key] = value;
+    return next;
+};
+const mergeMotionTokens = (base, overrides)=>({
+        durations: mergeDefined(base.durations, overrides?.durations),
+        easings: mergeDefined(base.easings, overrides?.easings),
+        distances: mergeDefined(base.distances, overrides?.distances)
+    });
+const createMotionPresets = (tokens)=>{
+    const durations = tokens.durations;
+    const easings = tokens.easings;
+    const distances = tokens.distances;
+    return {
+        route: {
+            initial: {
+                opacity: 0
+            },
+            animate: {
+                opacity: 1
+            },
+            exit: {
+                opacity: 0
+            },
+            transition: {
+                duration: durations.route,
+                easing: easings.out
+            }
+        },
+        routeAuth: {
+            initial: {
+                opacity: 0,
+                x: distances.slideIn
+            },
+            animate: {
+                opacity: 1,
+                x: 0
+            },
+            exit: {
+                opacity: 0,
+                x: -distances.slideIn
+            },
+            transition: {
+                duration: durations.routeAuth,
+                easing: easings.inOut
+            }
+        },
+        routeAuthBack: {
+            initial: {
+                opacity: 0,
+                x: -distances.slideIn
+            },
+            animate: {
+                opacity: 1,
+                x: 0
+            },
+            exit: {
+                opacity: 0,
+                x: distances.slideIn
+            },
+            transition: {
+                duration: durations.routeAuth,
+                easing: easings.inOut
+            }
+        },
+        authSwap: {
+            initial: {
+                opacity: 0.92
+            },
+            animate: {
+                opacity: 1
+            },
+            exit: {
+                opacity: 0.92
+            },
+            transition: {
+                duration: durations.fast,
+                easing: easings.out
+            }
+        },
+        fade: {
+            initial: {
+                opacity: 0
+            },
+            animate: {
+                opacity: 1
+            },
+            exit: {
+                opacity: 0
+            },
+            transition: {
+                duration: durations.base,
+                easing: easings.out,
+                delay: 0.08
+            }
+        },
+        fadeUp: {
+            initial: {
+                opacity: 0,
+                y: distances.sm
+            },
+            animate: {
+                opacity: 1,
+                y: 0
+            },
+            exit: {
+                opacity: 0,
+                y: -distances.sm
+            },
+            transition: {
+                duration: durations.base,
+                easing: easings.out,
+                delay: 0.08
+            }
+        },
+        scaleIn: {
+            initial: {
+                opacity: 0,
+                scale: 0.96
+            },
+            animate: {
+                opacity: 1,
+                scale: 1
+            },
+            exit: {
+                opacity: 0,
+                scale: 0.96
+            },
+            transition: {
+                duration: durations.fast,
+                easing: easings.out,
+                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,
+                y: distances.md,
+                scale: 0.985
+            },
+            animate: {
+                opacity: 1,
+                y: 0,
+                scale: 1
+            },
+            exit: {
+                opacity: 0,
+                y: -distances.sm,
+                scale: 0.985
+            },
+            transition: {
+                duration: durations.route,
+                easing: easings.out
+            }
+        }
+    };
+};
+const motionPresets = createMotionPresets(defaultMotionTokens);
+const routeTransition = motionPresets.route;
+const noMotion = {
+    initial: {
+        opacity: 1,
+        y: 0,
+        x: 0,
+        scale: 1
+    },
+    animate: {
+        opacity: 1,
+        y: 0,
+        x: 0,
+        scale: 1
+    },
+    exit: {
+        opacity: 1,
+        y: 0,
+        x: 0,
+        scale: 1
+    },
+    transition: {
+        duration: 0
+    }
+};
+const presets_getPreset = (name)=>motionPresets[name];
+const presets_registerPreset = (name, preset)=>{
+    motionPresets[name] = preset;
+};
+const presets_resolvePreset = (name, options)=>{
+    const reduce = options?.reduceMotion ?? prefersReducedMotion();
+    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, [
+        "initial",
+        "animate",
+        "exit",
+        "transition",
+        "isExiting",
+        "onExitComplete",
+        "animateKey",
+        "children",
+        "ref"
+    ]);
+    const [elementRef, setElementRef] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createSignal)(void 0);
+    let activeControl = null;
+    let lastTrigger;
+    let lastIsExiting = false;
+    let hasAnimated = false;
+    const stopActive = ()=>{
+        activeControl?.stop();
+        activeControl = null;
+    };
+    const runEnter = (target, from, to, transition)=>{
+        if (!to) return;
+        stopActive();
+        activeControl = runMotion(target, from ?? {}, to ?? {}, transition);
+    };
+    const runExit = (target, from, to, transition, onComplete)=>{
+        if (!to) return void onComplete?.();
+        stopActive();
+        activeControl = runMotion(target, from ?? {}, to ?? {}, transition, onComplete);
+    };
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createEffect)(()=>{
+        const target = elementRef();
+        if (!target) return;
+        const isExiting = Boolean(local.isExiting);
+        const trigger = local.animateKey;
+        const initial = local.initial;
+        const animate = local.animate;
+        const exit = local.exit;
+        const transition = local.transition;
+        const onComplete = local.onExitComplete;
+        if (isExiting) {
+            if (!lastIsExiting) {
+                lastIsExiting = true;
+                hasAnimated = false;
+                runExit(target, animate ?? initial, exit, transition, onComplete);
+            }
+            return;
+        }
+        lastIsExiting = false;
+        if (!hasAnimated || trigger !== lastTrigger) {
+            lastTrigger = trigger;
+            hasAnimated = true;
+            runEnter(target, initial, animate, transition);
+        }
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.onCleanup)(()=>{
+        stopActive();
+    });
+    return (()=>{
+        var _el$ = MotionDiv_tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.use)((el)=>{
+            setElementRef(el);
+            if ("function" == typeof local.ref) local.ref(el);
+        }, _el$);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, rest, false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, ()=>local.children);
+        return _el$;
+    })();
+};
+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)=>{
@@ -12717,21 +13157,30 @@ const toastStore = {
             id,
             message,
             type,
-            timestamp: Date.now()
+            timestamp: Date.now(),
+            duration
         };
         setToasts((prev)=>[
                 ...prev,
                 toast
             ]);
-        setTimeout(()=>{
-            toastStore.removeToast(id);
-        }, duration);
+        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),
@@ -12739,42 +13188,166 @@ const toastStore = {
     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, {
+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 (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.For, {
+            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 toastStore.toasts();
+                    return stackToasts();
                 },
-                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"
-                                })
-                            ];
-                        }
-                    })
+                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, [
@@ -12923,4 +13496,84 @@ const WindowMockup = (props)=>{
     })();
 };
 const windowmockup_WindowMockup = WindowMockup;
-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, 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, createStreamingTableStore, connectionstatus_ConnectionStatus as default, toastStore, useDesktop, useFormValidation };
+const createPopmotionDriver = (animate)=>(options)=>animate(options);
+const enablePopmotion = (animate)=>{
+    setMotionDriver(createPopmotionDriver(animate));
+};
+const createMotionSystem = (config)=>{
+    let tokens = mergeMotionTokens(defaultMotionTokens, config?.tokens);
+    let customPresets = {
+        ...config?.presets ?? {}
+    };
+    let basePresets = createMotionPresets(tokens);
+    let presets = {
+        ...basePresets,
+        ...customPresets
+    };
+    const reduceMotion = config?.reduceMotion ?? prefersReducedMotion;
+    let noMotionPreset = config?.noMotionPreset ?? noMotion;
+    const rebuildPresets = ()=>{
+        basePresets = createMotionPresets(tokens);
+        presets = {
+            ...basePresets,
+            ...customPresets
+        };
+    };
+    const getTokens = ()=>tokens;
+    const getPresets = ()=>presets;
+    const getPreset = (name)=>presets[name];
+    const registerPreset = (name, preset)=>{
+        customPresets = {
+            ...customPresets,
+            [name]: preset
+        };
+        presets = {
+            ...basePresets,
+            ...customPresets
+        };
+    };
+    const overrideTokens = (overrides)=>{
+        tokens = mergeMotionTokens(tokens, overrides);
+        rebuildPresets();
+        return tokens;
+    };
+    const resolvePreset = (name, options)=>{
+        const reduce = options?.reduceMotion ?? reduceMotion();
+        if (reduce) return noMotionPreset;
+        return presets[name] ?? noMotionPreset;
+    };
+    const setNoMotionPreset = (preset)=>{
+        noMotionPreset = preset;
+    };
+    return {
+        getTokens,
+        getPresets,
+        getPreset,
+        registerPreset,
+        overrideTokens,
+        resolvePreset,
+        setNoMotionPreset
+    };
+};
+const createRouteTransitionResolver = (options)=>{
+    const resolvePreset = options.resolvePreset ?? ((name)=>motionPresets[name]);
+    const reduceMotion = options.reduceMotion ?? prefersReducedMotion;
+    const fallback = options.fallback ?? routeTransition;
+    const reduceMotionPreset = options.reduceMotionPreset ?? noMotion;
+    return (from, to)=>{
+        if (reduceMotion()) return reduceMotionPreset;
+        for (const rule of options.rules){
+            const result = rule(from, to);
+            if (result) {
+                if ("string" == typeof result) {
+                    const resolved = resolvePreset(result);
+                    if (resolved) return resolved;
+                    continue;
+                }
+                return result;
+            }
+        }
+        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, 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/motion/driver.d.ts

@@ -0,0 +1,5 @@
+import type { MotionDriver } from "./types";
+declare const immediateDriver: MotionDriver;
+export declare const setMotionDriver: (driver: MotionDriver) => void;
+export declare const getMotionDriver: () => MotionDriver;
+export { immediateDriver };

package/dist/motion/easing.d.ts

@@ -0,0 +1,2 @@
+import type { MotionEasing } from "./types";
+export declare const resolveEase: (easing?: MotionEasing) => (t: number) => number;

package/dist/motion/engine.d.ts

@@ -0,0 +1,4 @@
+import type { MotionState, MotionTransition } from "./types";
+export declare const runMotion: (el: HTMLElement, from: MotionState, to: MotionState, transition?: MotionTransition, onComplete?: () => void) => {
+    stop: () => void;
+};

package/dist/motion/index.d.ts

@@ -0,0 +1,11 @@
+export type { MotionDriver, MotionDriverOptions, MotionEasing, MotionPreset, MotionState, MotionTransition, MotionTokenOverrides, MotionTokens, } from "./types";
+export { resolveEase } from "./easing";
+export { getMotionDriver, setMotionDriver, immediateDriver } from "./driver";
+export { runMotion } from "./engine";
+export { prefersReducedMotion } from "./reduced-motion";
+export { defaultMotionTokens, mergeMotionTokens, motionDurations, motionDistances, motionEasings, } from "./tokens";
+export { getPreset, createMotionPresets, motionPresets, noMotion, registerPreset, resolvePreset, routeTransition, } from "./presets";
+export { MotionDiv, type MotionDivProps } from "./solid";
+export { createPopmotionDriver, enablePopmotion, type PopmotionAnimate, } from "./popmotion";
+export { createMotionSystem, type MotionSystemConfig } from "./system";
+export { createRouteTransitionResolver, type RouteTransitionRule, type RouteTransitionRuleResult, type RouteTransitionResolverOptions, } from "./route";

package/dist/motion/popmotion.d.ts

@@ -0,0 +1,6 @@
+import type { MotionDriver, MotionDriverOptions } from "./types";
+export type PopmotionAnimate = (options: MotionDriverOptions) => {
+    stop: () => void;
+};
+export declare const createPopmotionDriver: (animate: PopmotionAnimate) => MotionDriver;
+export declare const enablePopmotion: (animate: PopmotionAnimate) => void;

package/dist/motion/presets.d.ts

@@ -0,0 +1,10 @@
+import type { MotionPreset, MotionTokens } from "./types";
+export declare const createMotionPresets: (tokens: MotionTokens) => Record<string, MotionPreset>;
+export declare const motionPresets: Record<string, MotionPreset>;
+export declare const routeTransition: MotionPreset;
+export declare const noMotion: MotionPreset;
+export declare const getPreset: (name: string) => MotionPreset;
+export declare const registerPreset: (name: string, preset: MotionPreset) => void;
+export declare const resolvePreset: (name: string, options?: {
+    reduceMotion?: boolean;
+}) => MotionPreset;

package/dist/motion/reduced-motion.d.ts

@@ -0,0 +1 @@
+export declare const prefersReducedMotion: () => boolean;

package/dist/motion/route.d.ts

@@ -0,0 +1,11 @@
+import type { MotionPreset } from "./types";
+export type RouteTransitionRuleResult = MotionPreset | string | null | undefined;
+export type RouteTransitionRule = (from: string, to: string) => RouteTransitionRuleResult;
+export type RouteTransitionResolverOptions = {
+    rules: RouteTransitionRule[];
+    fallback?: MotionPreset;
+    resolvePreset?: (name: string) => MotionPreset | undefined;
+    reduceMotion?: () => boolean;
+    reduceMotionPreset?: MotionPreset;
+};
+export declare const createRouteTransitionResolver: (options: RouteTransitionResolverOptions) => (from: string, to: string) => MotionPreset;

package/dist/motion/solid/MotionDiv.d.ts

@@ -0,0 +1,13 @@
+import { type Component, type JSX } from "solid-js";
+import type { MotionState, MotionTransition } from "../types";
+export interface MotionDivProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    initial?: MotionState;
+    animate?: MotionState;
+    exit?: MotionState;
+    transition?: MotionTransition;
+    isExiting?: boolean;
+    onExitComplete?: () => void;
+    animateKey?: unknown;
+}
+export declare const MotionDiv: Component<MotionDivProps>;
+export default MotionDiv;

package/dist/motion/solid/index.d.ts

@@ -0,0 +1,2 @@
+export { default as MotionDiv } from "./MotionDiv";
+export type { MotionDivProps } from "./MotionDiv";

package/dist/motion/system.d.ts

@@ -0,0 +1,20 @@
+import type { MotionPreset, MotionTokenOverrides, MotionTokens } from "./types";
+export type MotionSystemConfig = {
+    tokens?: MotionTokenOverrides;
+    presets?: Record<string, MotionPreset>;
+    reduceMotion?: () => boolean;
+    noMotionPreset?: MotionPreset;
+};
+export declare const createMotionSystem: (config?: MotionSystemConfig) => {
+    getTokens: () => MotionTokens;
+    getPresets: () => {
+        [x: string]: MotionPreset;
+    };
+    getPreset: (name: string) => MotionPreset;
+    registerPreset: (name: string, preset: MotionPreset) => void;
+    overrideTokens: (overrides: MotionTokenOverrides) => MotionTokens;
+    resolvePreset: (name: string, options?: {
+        reduceMotion?: boolean;
+    }) => MotionPreset;
+    setNoMotionPreset: (preset: MotionPreset) => void;
+};

package/dist/motion/tokens.d.ts

@@ -0,0 +1,6 @@
+import type { MotionEasing, MotionTokens, MotionTokenOverrides } from "./types";
+export declare const motionDurations: Record<string, number>;
+export declare const motionEasings: Record<string, MotionEasing>;
+export declare const motionDistances: Record<string, number>;
+export declare const defaultMotionTokens: MotionTokens;
+export declare const mergeMotionTokens: (base: MotionTokens, overrides?: MotionTokenOverrides) => MotionTokens;

package/dist/motion/types.d.ts

@@ -0,0 +1,39 @@
+export type MotionState = {
+    opacity?: number;
+    x?: number;
+    y?: number;
+    scale?: number;
+};
+export type MotionEasing = "ease-in" | "ease-out" | "ease-in-out" | "linear" | ((t: number) => number);
+export type MotionTransition = {
+    duration?: number;
+    easing?: MotionEasing;
+    delay?: number;
+};
+export type MotionPreset = {
+    initial: MotionState;
+    animate: MotionState;
+    exit: MotionState;
+    transition?: MotionTransition;
+};
+export type MotionTokens = {
+    durations: Record<string, number>;
+    easings: Record<string, MotionEasing>;
+    distances: Record<string, number>;
+};
+export type MotionTokenOverrides = {
+    durations?: Partial<Record<string, number>>;
+    easings?: Partial<Record<string, MotionEasing>>;
+    distances?: Partial<Record<string, number>>;
+};
+export type MotionDriverOptions = {
+    from: number;
+    to: number;
+    duration: number;
+    ease: (t: number) => number;
+    onUpdate: (value: number) => void;
+    onComplete?: () => void;
+};
+export type MotionDriver = (options: MotionDriverOptions) => {
+    stop: () => void;
+};

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.106",
+  "version": "0.0.108",
   "author": "pathscale",
   "repository": {
     "type": "git",
@@ -64,8 +64,14 @@
     "@felte/validator-zod": "^1.0.0",
     "@tanstack/solid-table": "^8.0.0",
     "solid-js": "^1.9",
+    "popmotion": "^11.0.5",
     "zod": "^3.22.0"
   },
+  "peerDependenciesMeta": {
+    "popmotion": {
+      "optional": true
+    }
+  },
   "scripts": {
     "build": "rslib build && bun scripts/copy-css.js",
     "build:watch": "rslib build --watch",