@pathscale/ui 0.1.1 → 1.2.0

package/dist/components/timeline/index.js

@@ -0,0 +1,11 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Timeline_js_c241c7d2__ from "./Timeline.js";
+import * as __WEBPACK_EXTERNAL_MODULE__TimelineItem_js_851bef15__ from "./TimelineItem.js";
+import * as __WEBPACK_EXTERNAL_MODULE__TimelineStart_js_5b3a06a5__ from "./TimelineStart.js";
+import * as __WEBPACK_EXTERNAL_MODULE__TimelineMiddle_js_6eee28d3__ from "./TimelineMiddle.js";
+import * as __WEBPACK_EXTERNAL_MODULE__TimelineEnd_js_ffd274a3__ from "./TimelineEnd.js";
+var __webpack_exports__Timeline = __WEBPACK_EXTERNAL_MODULE__Timeline_js_c241c7d2__["default"];
+var __webpack_exports__TimelineEnd = __WEBPACK_EXTERNAL_MODULE__TimelineEnd_js_ffd274a3__["default"];
+var __webpack_exports__TimelineItem = __WEBPACK_EXTERNAL_MODULE__TimelineItem_js_851bef15__["default"];
+var __webpack_exports__TimelineMiddle = __WEBPACK_EXTERNAL_MODULE__TimelineMiddle_js_6eee28d3__["default"];
+var __webpack_exports__TimelineStart = __WEBPACK_EXTERNAL_MODULE__TimelineStart_js_5b3a06a5__["default"];
+export { __webpack_exports__Timeline as Timeline, __webpack_exports__TimelineEnd as TimelineEnd, __webpack_exports__TimelineItem as TimelineItem, __webpack_exports__TimelineMiddle as TimelineMiddle, __webpack_exports__TimelineStart as TimelineStart };

package/dist/components/timeline/timeline.css

@@ -0,0 +1,286 @@
+@layer components {
+  .timeline {
+      position: relative;
+      display: flex;
+    }
+
+  .timeline > li {
+      position: relative;
+      display: grid;
+      flex-shrink: 0;
+      align-items: center;
+      grid-template-rows: var(--timeline-row-start, minmax(0, 1fr)) auto var( --timeline-row-end, minmax(0, 1fr) );
+      grid-template-columns: var(--timeline-col-start, minmax(0, 1fr)) auto var( --timeline-col-end, minmax(0, 1fr) );
+    }
+
+  .timeline > li > hr {
+      border: none;
+      width: 100%;
+    }
+
+  .timeline > li > hr:first-child {
+      grid-column-start: 1;
+      grid-row-start: 2;
+    }
+
+  .timeline > li > hr:last-child {
+      grid-column-start: 3;
+      grid-column-end: none;
+      grid-row-start: 2;
+      grid-row-end: auto;
+    }
+
+  @media print {
+    .timeline > li > hr {
+      border: 0.1px solid var(--color-base-300);
+    }
+    }
+
+  .timeline :where(hr) {
+      height: calc(0.25rem * 1);
+      background-color: var(--color-base-300);
+    }
+
+  .timeline:has(.timeline-middle hr):first-child {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-start-end-radius: var(--radius-selector);
+      border-end-end-radius: var(--radius-selector);
+    }
+
+  .timeline:has(.timeline-middle hr):last-child {
+      border-start-start-radius: var(--radius-selector);
+      border-end-start-radius: var(--radius-selector);
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+  .timeline:not(:has(.timeline-middle)) :first-child hr:last-child {
+      border-start-start-radius: var(--radius-selector);
+      border-end-start-radius: var(--radius-selector);
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+  .timeline:not(:has(.timeline-middle)) :last-child hr:first-child {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-start-end-radius: var(--radius-selector);
+      border-end-end-radius: var(--radius-selector);
+    }
+
+  .timeline-end {
+      grid-column-start: 1;
+      grid-column-end: 4;
+      grid-row-start: 3;
+      grid-row-end: 4;
+      margin: calc(0.25rem * 1);
+      align-self: flex-start;
+      justify-self: center;
+    }
+
+  .timeline-start {
+      grid-column-start: 1;
+      grid-column-end: 4;
+      grid-row-start: 1;
+      grid-row-end: 2;
+      margin: calc(0.25rem * 1);
+      align-self: flex-end;
+      justify-self: center;
+    }
+
+  .timeline-horizontal {
+      flex-direction: row;
+    }
+
+  .timeline-horizontal > li {
+      align-items: center;
+    }
+
+  .timeline-horizontal > li > hr {
+      height: calc(0.25rem * 1);
+      width: 100%;
+    }
+
+  .timeline-horizontal > li > hr:first-child {
+      grid-column-start: 1;
+      grid-row-start: 2;
+    }
+
+  .timeline-horizontal > li > hr:last-child {
+      grid-column-start: 3;
+      grid-column-end: none;
+      grid-row-start: 2;
+      grid-row-end: auto;
+    }
+
+  .timeline-horizontal .timeline-start {
+      grid-column-start: 1;
+      grid-column-end: 4;
+      grid-row-start: 1;
+      grid-row-end: 2;
+      align-self: flex-end;
+      justify-self: center;
+    }
+
+  .timeline-horizontal .timeline-end {
+      grid-column-start: 1;
+      grid-column-end: 4;
+      grid-row-start: 3;
+      grid-row-end: 4;
+      align-self: flex-start;
+      justify-self: center;
+    }
+
+  .timeline-horizontal:has(.timeline-middle) > li > hr:first-child {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-start-end-radius: var(--radius-selector);
+      border-end-end-radius: var(--radius-selector);
+    }
+
+  .timeline-horizontal:has(.timeline-middle) > li > hr:last-child {
+      border-start-start-radius: var(--radius-selector);
+      border-end-start-radius: var(--radius-selector);
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+  .timeline-horizontal:not(:has(.timeline-middle)) :first-child > hr:last-child {
+      border-start-start-radius: var(--radius-selector);
+      border-end-start-radius: var(--radius-selector);
+      border-start-end-radius: 0;
+      border-end-end-radius: 0;
+    }
+
+  .timeline-horizontal:not(:has(.timeline-middle)) :last-child > hr:first-child {
+      border-start-start-radius: 0;
+      border-end-start-radius: 0;
+      border-start-end-radius: var(--radius-selector);
+      border-end-end-radius: var(--radius-selector);
+    }
+
+  .timeline-vertical {
+      flex-direction: column;
+    }
+
+  .timeline-vertical > li {
+      justify-items: center;
+      --timeline-row-start: minmax(0, 1fr);
+      --timeline-row-end: minmax(0, 1fr);
+    }
+
+  .timeline-vertical > li > hr {
+      height: 100%;
+      width: calc(0.25rem * 1);
+    }
+
+  .timeline-vertical > li > hr:first-child {
+      grid-column-start: 2;
+      grid-row-start: 1;
+    }
+
+  .timeline-vertical > li > hr:last-child {
+      grid-column-start: 2;
+      grid-column-end: auto;
+      grid-row-start: 3;
+      grid-row-end: none;
+    }
+
+  .timeline-vertical .timeline-start {
+      grid-column-start: 1;
+      grid-column-end: 2;
+      grid-row-start: 1;
+      grid-row-end: 4;
+      align-self: center;
+      justify-self: flex-end;
+    }
+
+  .timeline-vertical .timeline-end {
+      grid-column-start: 3;
+      grid-column-end: 4;
+      grid-row-start: 1;
+      grid-row-end: 4;
+      align-self: center;
+      justify-self: flex-start;
+    }
+
+  .timeline-vertical:has(.timeline-middle) > li > hr:first-child {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: var(--radius-selector);
+      border-bottom-left-radius: var(--radius-selector);
+    }
+
+  .timeline-vertical:has(.timeline-middle) > li > hr:last-child {
+      border-top-left-radius: var(--radius-selector);
+      border-top-right-radius: var(--radius-selector);
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+  .timeline-vertical:not(:has(.timeline-middle)) :first-child > hr:last-child {
+      border-top-left-radius: var(--radius-selector);
+      border-top-right-radius: var(--radius-selector);
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+  .timeline-vertical:not(:has(.timeline-middle)) :last-child > hr:first-child {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+      border-bottom-right-radius: var(--radius-selector);
+      border-bottom-left-radius: var(--radius-selector);
+    }
+
+  .timeline-vertical.timeline-snap-icon > li {
+      --timeline-col-start: minmax(0, 1fr);
+      --timeline-row-start: 0.5rem;
+    }
+
+  .timeline-compact {
+      --timeline-row-start: 0;
+    }
+
+  .timeline-compact .timeline-start {
+      grid-column-start: 1;
+      grid-column-end: 4;
+      grid-row-start: 3;
+      grid-row-end: 4;
+      align-self: flex-start;
+      justify-self: center;
+    }
+
+  .timeline-compact li:has(.timeline-start) .timeline-end {
+      grid-column-start: none;
+      grid-row-start: auto;
+    }
+
+  .timeline-compact.timeline-vertical > li {
+      --timeline-col-start: 0;
+    }
+
+  .timeline-compact.timeline-vertical .timeline-start {
+      grid-column-start: 3;
+      grid-column-end: 4;
+      grid-row-start: 1;
+      grid-row-end: 4;
+      align-self: center;
+      justify-self: flex-start;
+    }
+
+  .timeline-compact.timeline-vertical li:has(.timeline-start) .timeline-end {
+      grid-column-start: auto;
+      grid-row-start: none;
+    }
+
+  .timeline-middle {
+      grid-column-start: 2;
+      grid-row-start: 2;
+    }
+
+  .timeline-snap-icon > li {
+      --timeline-col-start: 0.5rem;
+      --timeline-row-start: minmax(0, 1fr);
+    }
+}

package/dist/components/toast/Toast.d.ts

@@ -1,3 +1,4 @@
+import "./toast.css";
 import { type JSX } from "solid-js";
 import type { IComponentBaseProps } from "../types";
 declare const horizontalOptions: {

package/dist/components/toast/Toast.js

@@ -0,0 +1,54 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import "./toast.css";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const horizontalOptions = {
+    start: "toast-start",
+    center: "toast-center",
+    end: "toast-end"
+};
+const verticalOptions = {
+    top: "toast-top",
+    middle: "toast-middle",
+    bottom: "toast-bottom"
+};
+const Toast = (props)=>{
+    const [local, others] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "horizontal",
+        "vertical",
+        "class",
+        "className",
+        "style",
+        "dataTheme",
+        "max"
+    ]);
+    const positionClasses = [
+        horizontalOptions[local.horizontal || "end"],
+        verticalOptions[local.vertical || "bottom"]
+    ];
+    const limitedChildren = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const childrenArray = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.children)(()=>props.children).toArray();
+        if (local.max && local.max > 0) return childrenArray.slice(-local.max);
+        return childrenArray;
+    });
+    return (()=>{
+        var _el$ = _tmpl$();
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.spread)(_el$, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(others, {
+            role: "status",
+            get ["class"] () {
+                return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)("toast", ...positionClasses, local.class, local.className);
+            },
+            get ["data-theme"] () {
+                return local.dataTheme;
+            },
+            get style () {
+                return local.style;
+            }
+        }), false, true);
+        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, limitedChildren);
+        return _el$;
+    })();
+};
+const toast_Toast = Toast;
+export { toast_Toast as default };

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

@@ -1 +1 @@
-export { default } from "./Toast";
+export { default, type ToastProps } from "./Toast";

package/dist/components/toast/index.js

@@ -0,0 +1,3 @@
+import * as __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__ from "./Toast.js";
+var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE__Toast_js_72ea0bce__["default"];
+export { __webpack_exports__default as default };

package/dist/components/toast/toast.css

@@ -0,0 +1,58 @@
+@layer components {
+  .toast {
+      position: fixed;
+      inset-inline-start: auto;
+      inset-inline-end: calc(0.25rem * 4);
+      top: auto;
+      bottom: calc(0.25rem * 4);
+      display: flex;
+      flex-direction: column;
+      gap: calc(0.25rem * 2);
+      background-color: transparent;
+      translate: var(--toast-x, 0) var(--toast-y, 0);
+      width: max-content;
+      max-width: calc(100vw - 2rem);
+    }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .toast > * {
+      animation: toast 0.25s ease-out;
+    }
+    }
+
+  .toast-center {
+      inset-inline-start: calc(1/2 * 100%);
+      inset-inline-end: calc(1/2 * 100%);
+      --toast-x: -50%;
+    }
+
+  .toast-end {
+      inset-inline-start: auto;
+      inset-inline-end: calc(0.25rem * 4);
+      --toast-x: 0;
+    }
+
+  .toast-start {
+      inset-inline-start: calc(0.25rem * 4);
+      inset-inline-end: auto;
+      --toast-x: 0;
+    }
+
+  .toast-bottom {
+      top: auto;
+      bottom: calc(0.25rem * 4);
+      --toast-y: 0;
+    }
+
+  .toast-middle {
+      top: calc(1/2 * 100%);
+      bottom: auto;
+      --toast-y: -50%;
+    }
+
+  .toast-top {
+      top: calc(0.25rem * 4);
+      bottom: auto;
+      --toast-y: 0;
+    }
+}

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

@@ -1,2 +1,3 @@
 import { type Component } from "solid-js";
-export declare const ToastContainer: Component;
+import type { ToastStackProps } from "./ToastStack";
+export declare const ToastContainer: Component<ToastStackProps>;

package/dist/components/toastcontainer/ToastContainer.js

@@ -0,0 +1,15 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__ToastStack_js_7635dd78__ from "./ToastStack.js";
+const ToastContainer = (props)=>{
+    const [local, rest] = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.splitProps)(props, [
+        "class"
+    ]);
+    return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__ToastStack_js_7635dd78__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class);
+        }
+    }));
+};
+export { ToastContainer };

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/ToastStack.js

@@ -0,0 +1,181 @@
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__ from "solid-js/web";
+import * as __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__ from "solid-js";
+import * as __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__ from "tailwind-merge";
+import * as __WEBPACK_EXTERNAL_MODULE__alert_index_js_d9d6572d__ from "../alert/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__ from "../button/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__toast_index_js_78d3aea9__ from "../toast/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__ from "../../motion/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__stores_toastStore_js_d4b6a69a__ from "../../stores/toastStore.js";
+var _tmpl$ = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.template)("<div>");
+const TOAST_STATUS_MAP = {
+    info: "accent",
+    success: "success",
+    warning: "warning",
+    error: "danger"
+};
+const defaultRenderToast = (toast, dismiss)=>(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__alert_index_js_d9d6572d__["default"], {
+        get status () {
+            return TOAST_STATUS_MAP[toast.type];
+        },
+        style: {
+            "min-width": "20rem",
+            "max-width": "32rem"
+        },
+        get children () {
+            return [
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__alert_index_js_d9d6572d__["default"].Content, {
+                    get children () {
+                        return (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__alert_index_js_d9d6572d__["default"].Title, {
+                            get children () {
+                                return toast.message;
+                            }
+                        });
+                    }
+                }),
+                (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__button_index_js_557db1f7__["default"], {
+                    size: "sm",
+                    variant: "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, [
+        "class",
+        "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 (0, __WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.resolvePreset)(name, {
+            reduceMotion: local.reduceMotion
+        });
+    });
+    const visibleToasts = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_aeefcc6d__.createMemo)(()=>{
+        const list = __WEBPACK_EXTERNAL_MODULE__stores_toastStore_js_d4b6a69a__.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)(__WEBPACK_EXTERNAL_MODULE__toast_index_js_78d3aea9__["default"], (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.mergeProps)(rest, {
+        get ["class"] () {
+            return (0, __WEBPACK_EXTERNAL_MODULE_tailwind_merge_e05e3e95__.twMerge)(local.class);
+        },
+        get children () {
+            var _el$ = _tmpl$();
+            (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$, (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$2 = _tmpl$();
+                        _el$2.$$click = onToggle;
+                        (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.insert)(_el$2, (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.createComponent)(__WEBPACK_EXTERNAL_MODULE__motion_index_js_58495715__.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: ()=>__WEBPACK_EXTERNAL_MODULE__stores_toastStore_js_d4b6a69a__.toastStore.removeToast(toast.id),
+                            get children () {
+                                return renderToast()(toast, ()=>__WEBPACK_EXTERNAL_MODULE__stores_toastStore_js_d4b6a69a__.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$2, _p$.e = _v$3);
+                            _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$2, _v$4, _p$.t);
+                            return _p$;
+                        }, {
+                            e: void 0,
+                            t: void 0
+                        });
+                        return _el$2;
+                    })();
+                }
+            }));
+            (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$, _p$.e = _v$);
+                _p$.t = (0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.style)(_el$, _v$2, _p$.t);
+                return _p$;
+            }, {
+                e: void 0,
+                t: void 0
+            });
+            return _el$;
+        }
+    }));
+};
+const ToastStack = ToastStack_ToastStack;
+(0, __WEBPACK_EXTERNAL_MODULE_solid_js_web_35d951b7__.delegateEvents)([
+    "click"
+]);
+export { ToastStack_ToastStack as ToastStack, ToastStack as default };

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/components/toastcontainer/index.js

@@ -0,0 +1,5 @@
+import * as __WEBPACK_EXTERNAL_MODULE__ToastContainer_js_6b089da7__ from "./ToastContainer.js";
+import * as __WEBPACK_EXTERNAL_MODULE__ToastStack_js_7635dd78__ from "./ToastStack.js";
+var __webpack_exports__ToastContainer = __WEBPACK_EXTERNAL_MODULE__ToastContainer_js_6b089da7__.ToastContainer;
+var __webpack_exports__ToastStack = __WEBPACK_EXTERNAL_MODULE__ToastStack_js_7635dd78__.ToastStack;
+export { __webpack_exports__ToastContainer as ToastContainer, __webpack_exports__ToastStack as ToastStack };