uibee 2.5.7 → 2.5.8

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

@@ -14,5 +14,5 @@ export { default as PageContainer } from './container/page';
 export { default as Highlight } from './container/highlight';
 export { default as VersionTag } from './version/version';
 export { default as LoginPage } from './login/loginPage';
-export { default as Toaster, addToast } from './toast/toaster';
+export { default as Toaster, toast } from './toast/toaster';
 export { default as Button } from './buttons/button';

package/dist/src/components/index.js

@@ -20,6 +20,6 @@ export { default as Highlight } from './container/highlight';
 // Other components
 export { default as VersionTag } from './version/version';
 export { default as LoginPage } from './login/loginPage';
-export { default as Toaster, addToast } from './toast/toaster';
+export { default as Toaster, toast } from './toast/toaster';
 // Buttons
 export { default as Button } from './buttons/button';

package/dist/src/components/toast/toastItem.d.ts

@@ -0,0 +1,2 @@
+import type { ToastProps } from 'uibee/components';
+export default function Toast({ toast, index, expanded, onRemove, onHeight, offset, frontHeight }: ToastProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/toast/toastItem.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from 'lucide-react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+export default function Toast({ toast, index, expanded, onRemove, onHeight, offset, frontHeight }) {
+    const [mounted, setMounted] = useState(false);
+    const ref = useRef(null);
+    useEffect(() => {
+        requestAnimationFrame(() => setMounted(true));
+    }, []);
+    useLayoutEffect(() => {
+        if (ref.current) {
+            onHeight(toast.id, ref.current.offsetHeight);
+        }
+    }, [toast.message, onHeight, toast.id, expanded]);
+    const isVisible = mounted && !toast.exiting;
+    const isFront = index === 0;
+    const collapsedOffset = index * 10 + (index > 0 ? (frontHeight - 60) : 0);
+    return (_jsx("li", { ref: ref, className: 'absolute bottom-0 right-0 w-full transition-all duration-300 ease-out pointer-events-auto', style: {
+            transform: isVisible
+                ? `translateY(${expanded ? -offset : -collapsedOffset}px) scale(${expanded ? 1 : 1 - index * 0.05})`
+                : 'translateY(20px) scale(0.9)',
+            opacity: isVisible ? 1 : 0,
+            zIndex: toast.id
+        }, children: _jsxs("div", { className: 'flex items-center space-x-4 rounded-lg p-4 shadow-lg border-2 border-login-400 bg-login-700', children: [_jsx("div", { className: 'shrink-0', children: Icon(toast.type) }), _jsx("p", { className: `flex-1 text-sm font-semibold text-login-800 dark:text-login-100 min-w-0
+                        ${!expanded && !isFront ? 'truncate' : ''}`, children: toast.message }), _jsx("button", { onClick: onRemove, className: 'hover:text-login-200 text-login-400', children: _jsx(X, { className: 'h-5 w-5' }) })] }) }));
+}
+function Icon(type) {
+    switch (type) {
+        case 'info':
+            return _jsx(Info, { className: 'h-6 w-6 text-blue-500' });
+        case 'success':
+            return _jsx(CheckCircle, { className: 'h-6 w-6 text-green-500' });
+        case 'warning':
+            return _jsx(AlertTriangle, { className: 'h-6 w-6 text-yellow-500' });
+        case 'error':
+            return _jsx(AlertCircle, { className: 'h-6 w-6 text-red-500' });
+    }
+}

package/dist/src/components/toast/toaster.d.ts

@@ -1,3 +1,3 @@
-import { ToastType } from 'uibee/components';
-export declare function addToast(type: ToastType, title: string, description?: string): void;
+import type { ToastType } from 'uibee/components';
+export declare function toast(message: string, type: ToastType, duration?: number): void;
 export default function Toaster(): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/toast/toaster.js

@@ -1,89 +1,82 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CircleAlert, CircleCheck, CircleX, Info } from 'lucide-react';
-import { useEffect, useState, useRef } from 'react';
-const observers = [];
-export function addToast(type, title, description = '') {
-    observers.forEach((observer) => observer({ title, description, type }));
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import ToastItem from 'toastItem';
+const listeners = new Set();
+let idCounter = 0;
+export function toast(message, type, duration = 4000) {
+    const id = ++idCounter;
+    listeners.forEach(listener => listener({ id, message, type, expiresAt: Date.now() + duration }));
 }
 export default function Toaster() {
     const [toasts, setToasts] = useState([]);
-    const timers = useRef({});
-    const [isHovered, setIsHovered] = useState(false);
-    const pauseTimes = useRef({});
-    const mainToastRef = useRef(null);
-    const [mainToastPosition, setMainToastPosition] = useState(null);
+    const [expanded, setExpanded] = useState(false);
+    const [heights, setHeights] = useState({});
     useEffect(() => {
-        const listener = ({ type, title, description }) => {
-            const id = Date.now();
-            setToasts(prev => {
-                const newToasts = prev.concat({ id, type, title, description, remaining: 3000, created: Date.now() }).slice(-3);
-                return newToasts;
-            });
-        };
-        observers.push(listener);
+        function addToast(toast) {
+            setToasts(prev => [toast, ...prev]);
+        }
+        listeners.add(addToast);
         return () => {
-            const idx = observers.indexOf(listener);
-            if (idx > -1)
-                observers.splice(idx, 1);
-            Object.values(timers.current).forEach(clearTimeout);
+            listeners.delete(addToast);
         };
     }, []);
     useEffect(() => {
-        if (isHovered) {
-            toasts.forEach(toast => {
-                if (timers.current[toast.id]) {
-                    clearTimeout(timers.current[toast.id]);
-                    const elapsed = Date.now() - toast.created;
-                    pauseTimes.current[toast.id] = toast.remaining - elapsed > 0 ? toast.remaining - elapsed : 0;
-                    setToasts(prev => prev.map(t => t.id === toast.id ? { ...t, remaining: pauseTimes.current[toast.id] } : t));
-                    delete timers.current[toast.id];
-                }
-            });
-        }
-        else {
-            toasts.forEach(toast => {
-                if (!timers.current[toast.id] && toast.remaining > 0) {
-                    timers.current[toast.id] = setTimeout(() => {
-                        setToasts(prev => prev.filter(t => t.id !== toast.id));
-                        delete timers.current[toast.id];
-                    }, toast.remaining);
-                    setToasts(prev => prev.map(t => t.id === toast.id ? { ...t, created: Date.now() } : t));
-                }
-            });
-        }
-    }, [isHovered, toasts]);
-    // Track main toast position for stacking
+        const now = Date.now();
+        setToasts(prev => prev.map(toast => {
+            if (expanded)
+                return { ...toast, pausedAt: toast.pausedAt || now };
+            if (!toast.pausedAt)
+                return toast;
+            return { ...toast, expiresAt: toast.expiresAt + (now - toast.pausedAt), pausedAt: undefined };
+        }));
+    }, [expanded]);
+    function removeToast(id) {
+        setToasts(prev => prev.map(toast => toast.id === id ? { ...toast, exiting: true } : toast));
+        setTimeout(() => {
+            setToasts(prev => prev.filter(toast => toast.id !== id));
+        }, 300);
+    }
     useEffect(() => {
-        if (mainToastRef.current && toasts.length > 0) {
-            const rect = mainToastRef.current.getBoundingClientRect();
-            setMainToastPosition({
-                top: rect.top,
-                right: window.innerWidth - rect.right
+        const timer = setInterval(() => {
+            if (expanded)
+                return;
+            const now = Date.now();
+            setToasts(prev => {
+                const toastsToExit = prev.filter(toast => !toast.exiting && !toast.pausedAt && toast.expiresAt <= now);
+                if (toastsToExit.length === 0)
+                    return prev;
+                toastsToExit.forEach(toast => {
+                    setTimeout(() => {
+                        setToasts(current => current.filter(item => item.id !== toast.id));
+                    }, 300);
+                });
+                return prev.map(toast => toastsToExit.find(exitToast => exitToast.id === toast.id) ? { ...toast, exiting: true } : toast);
             });
-        }
-    }, [toasts, isHovered]);
-    const bgClasses = ['bg-login-600', 'bg-login-700', 'bg-login-800'];
-    return (_jsx("div", { className: `fixed bottom-4 right-4 z-50 flex ${isHovered ? 'flex-col-reverse items-end gap-2' : 'flex-col items-end'}`, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: toasts.slice().reverse().map((toast, idx) => (_jsxs("div", { ref: idx === 0 ? mainToastRef : null, className: 'p-2 rounded-lg text-login-50 animate-fade-in-down transition-all w-sm flex items-center gap-2 ' +
-                (bgClasses[idx] || bgClasses[2]), style: isHovered ? {} : idx === 0 ? {
-                zIndex: 100,
-            } : {
-                position: 'fixed',
-                top: mainToastPosition ? `${mainToastPosition.top - idx * 8}px` : 'auto',
-                zIndex: 100 - idx,
-                transform: `scale(${1 - idx * 0.05})`,
-            }, children: [_jsx("span", { className: 'shrink-0 w-10 h-10 flex items-center justify-center', children: _jsx(ToastIcon, { type: toast.type }) }), _jsxs("div", { className: 'pr-1 pb-1', children: [_jsx("span", { className: 'font-bold', children: toast.title }), (idx === 0 || isHovered) &&
-                            _jsx("span", { className: 'text-sm line-clamp-3', children: toast.description })] })] }, `${toast.id}-${idx}`))) }));
-}
-function ToastIcon({ type }) {
-    switch (type) {
-        case 'success':
-            return _jsx(CircleCheck, { className: 'text-green-300/70' });
-        case 'warning':
-            return _jsx(CircleAlert, { className: 'text-yellow-300/70' });
-        case 'error':
-            return _jsx(CircleX, { className: 'text-red-300/70' });
-        case 'info':
-            return _jsx(Info, { className: 'text-blue-300/70' });
+        }, 100);
+        return () => clearInterval(timer);
+    }, [expanded]);
+    function onHeight(id, height) {
+        setHeights(prev => {
+            if (prev[id] === height)
+                return prev;
+            return { ...prev, [id]: height };
+        });
     }
+    const visibleToasts = toasts.slice(0, expanded ? 10 : 3);
+    const frontHeight = heights[visibleToasts[0]?.id] || 60;
+    const offsets = useMemo(() => {
+        let currentOffset = 0;
+        return visibleToasts.map(toast => {
+            const height = heights[toast.id] || 60;
+            const offset = currentOffset;
+            currentOffset += height + 16;
+            return offset;
+        });
+    }, [visibleToasts, heights]);
+    const totalHeight = offsets.length > 0
+        ? offsets[offsets.length - 1] + (heights[visibleToasts[visibleToasts.length - 1]?.id] || 60)
+        : 0;
+    return (_jsx("ul", { className: `fixed bottom-4 right-4 z-9999 w-full max-w-sm flex flex-col items-end transition-all duration-300 ease-out
+                ${expanded ? 'pointer-events-auto' : 'pointer-events-none'}`, style: { height: expanded ? totalHeight + 'px' : 'auto' }, onMouseEnter: () => setExpanded(true), onMouseLeave: () => setExpanded(false), children: visibleToasts.map((toast, index) => (_jsx(ToastItem, { toast: toast, index: index, expanded: expanded, onRemove: () => removeToast(toast.id), onHeight: onHeight, offset: offsets[index], frontHeight: frontHeight }, toast.id))) }));
 }

package/dist/src/globals.css

@@ -7,13 +7,12 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-red-300: oklch(80.8% 0.114 19.571);
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-700: oklch(50.5% 0.213 27.518);
     --color-red-800: oklch(44.4% 0.177 26.899);
-    --color-yellow-300: oklch(90.5% 0.182 98.111);
-    --color-green-300: oklch(87.1% 0.15 154.449);
-    --color-blue-300: oklch(80.9% 0.105 251.813);
+    --color-yellow-500: oklch(79.5% 0.184 86.047);
+    --color-green-500: oklch(72.3% 0.219 149.579);
+    --color-blue-500: oklch(62.3% 0.214 259.815);
     --color-gray-400: oklch(70.7% 0.022 261.325);
     --color-black: #000;
     --color-white: #fff;
@@ -58,8 +57,10 @@
     --color-login-700: #1a1a1a;
     --color-login-600: #212121;
     --color-login-500: #323232;
+    --color-login-400: #424242;
     --color-login-300: #5e5e5e;
     --color-login-200: #727272;
+    --color-login-100: #b0b0b0;
     --color-login-50: #ededed;
   }
 }
@@ -326,6 +327,9 @@
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
+  }
   .bottom-4 {
     bottom: calc(var(--spacing) * 4);
   }
@@ -353,6 +357,9 @@
   .z-900 {
     z-index: 900;
   }
+  .z-9999 {
+    z-index: 9999;
+  }
   .col-start-3 {
     grid-column-start: 3;
   }
@@ -402,12 +409,6 @@
       padding-top: 2rem;
     }
   }
-  .line-clamp-3 {
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-  }
   .block {
     display: block;
   }
@@ -432,15 +433,15 @@
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
+  .h-5 {
+    height: calc(var(--spacing) * 5);
+  }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
-  .h-10 {
-    height: calc(var(--spacing) * 10);
-  }
   .h-11 {
     height: calc(var(--spacing) * 11);
   }
@@ -513,9 +514,6 @@
   .w-max {
     width: max-content;
   }
-  .w-sm {
-    width: var(--container-sm);
-  }
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
@@ -534,9 +532,15 @@
   .max-w-md {
     max-width: var(--container-md);
   }
+  .max-w-sm {
+    max-width: var(--container-sm);
+  }
   .max-w-xs {
     max-width: var(--container-xs);
   }
+  .min-w-0 {
+    min-width: calc(var(--spacing) * 0);
+  }
   .min-w-\[6ch\] {
     min-width: 6ch;
   }
@@ -621,9 +625,6 @@
   .flex-col {
     flex-direction: column;
   }
-  .flex-col-reverse {
-    flex-direction: column-reverse;
-  }
   .flex-row {
     flex-direction: row;
   }
@@ -666,6 +667,13 @@
   .gap-4 {
     gap: calc(var(--spacing) * 4);
   }
+  .space-x-4 {
+    :where(& > :not(:last-child)) {
+      --tw-space-x-reverse: 0;
+      margin-inline-start: calc(calc(var(--spacing) * 4) * var(--tw-space-x-reverse));
+      margin-inline-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-x-reverse)));
+    }
+  }
   .truncate {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -709,6 +717,10 @@
     border-style: var(--tw-border-style);
     border-width: 0px;
   }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
   .border-\[0\.10rem\] {
     border-style: var(--tw-border-style);
     border-width: 0.10rem;
@@ -724,6 +736,9 @@
   .border-login-200 {
     border-color: var(--color-login-200);
   }
+  .border-login-400 {
+    border-color: var(--color-login-400);
+  }
   .bg-\[\#181818f0\] {
     background-color: #181818f0;
   }
@@ -823,6 +838,9 @@
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
+  .p-4 {
+    padding: calc(var(--spacing) * 4);
+  }
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
@@ -874,15 +892,9 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
-  .pr-1 {
-    padding-right: calc(var(--spacing) * 1);
-  }
   .pr-4 {
     padding-right: calc(var(--spacing) * 4);
   }
-  .pb-1 {
-    padding-bottom: calc(var(--spacing) * 1);
-  }
   .pb-2\.5 {
     padding-bottom: calc(var(--spacing) * 2.5);
   }
@@ -961,29 +973,23 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .text-blue-300\/70 {
-    color: color-mix(in srgb, oklch(80.9% 0.105 251.813) 70%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-blue-300) 70%, transparent);
-    }
+  .text-blue-500 {
+    color: var(--color-blue-500);
   }
-  .text-green-300\/70 {
-    color: color-mix(in srgb, oklch(87.1% 0.15 154.449) 70%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-green-300) 70%, transparent);
-    }
+  .text-green-500 {
+    color: var(--color-green-500);
   }
   .text-login {
     color: var(--color-login);
   }
-  .text-login-50 {
-    color: var(--color-login-50);
+  .text-login-400 {
+    color: var(--color-login-400);
   }
-  .text-red-300\/70 {
-    color: color-mix(in srgb, oklch(80.8% 0.114 19.571) 70%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-red-300) 70%, transparent);
-    }
+  .text-login-800 {
+    color: var(--color-login-800);
+  }
+  .text-red-500 {
+    color: var(--color-red-500);
   }
   .text-red-500\/50 {
     color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent);
@@ -997,11 +1003,8 @@
   .text-white {
     color: var(--color-white);
   }
-  .text-yellow-300\/70 {
-    color: color-mix(in srgb, oklch(90.5% 0.182 98.111) 70%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-yellow-300) 70%, transparent);
-    }
+  .text-yellow-500 {
+    color: var(--color-yellow-500);
   }
   .italic {
     font-style: italic;
@@ -1271,6 +1274,13 @@
       }
     }
   }
+  .hover\:text-login-200 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-login-200);
+      }
+    }
+  }
   .hover\:text-red-800 {
     &:hover {
       @media (hover: hover) {
@@ -1355,6 +1365,11 @@
       gap: calc(var(--spacing) * 6);
     }
   }
+  .dark\:text-login-100 {
+    @media (prefers-color-scheme: dark) {
+      color: var(--color-login-100);
+    }
+  }
 }
 :root {
   transition: background 0.4s,
@@ -1449,6 +1464,11 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-space-x-reverse {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0;
+}
 @property --tw-border-style {
   syntax: "*";
   inherits: false;
@@ -1599,6 +1619,7 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
+      --tw-space-x-reverse: 0;
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.5.7",
+  "version": "2.5.8",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/index.ts

@@ -25,7 +25,7 @@ export { default as Highlight } from './container/highlight'
 // Other components
 export { default as VersionTag } from './version/version'
 export { default as LoginPage } from './login/loginPage'
-export { default as Toaster, addToast } from './toast/toaster'
+export { default as Toaster, toast } from './toast/toaster'
 
 // Buttons
 export { default as Button } from './buttons/button'

package/src/components/toast/toastItem.tsx

@@ -0,0 +1,61 @@
+import { AlertCircle, AlertTriangle, CheckCircle, Info, X } from 'lucide-react'
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import type { Toast, ToastType, ToastProps } from 'uibee/components'
+
+export default function Toast({ toast, index, expanded, onRemove, onHeight, offset, frontHeight }: ToastProps) {
+    const [mounted, setMounted] = useState(false)
+    const ref = useRef<HTMLLIElement>(null)
+
+    useEffect(() => {
+        requestAnimationFrame(() => setMounted(true))
+    }, [])
+
+    useLayoutEffect(() => {
+        if (ref.current) {
+            onHeight(toast.id, ref.current.offsetHeight)
+        }
+    }, [toast.message, onHeight, toast.id, expanded])
+
+    const isVisible = mounted && !toast.exiting
+    const isFront = index === 0
+    const collapsedOffset = index * 10 + (index > 0 ? (frontHeight - 60) : 0)
+
+    return (
+        <li
+            ref={ref}
+            className='absolute bottom-0 right-0 w-full transition-all duration-300 ease-out pointer-events-auto'
+            style={{
+                transform: isVisible
+                    ? `translateY(${expanded ? -offset : -collapsedOffset}px) scale(${expanded ? 1 : 1 - index * 0.05})`
+                    : 'translateY(20px) scale(0.9)',
+                opacity: isVisible ? 1 : 0,
+                zIndex: toast.id
+            }}
+        >
+            <div className='flex items-center space-x-4 rounded-lg p-4 shadow-lg border-2 border-login-400 bg-login-700'>
+                <div className='shrink-0'>{Icon(toast.type)}</div>
+                <p className={`flex-1 text-sm font-semibold text-login-800 dark:text-login-100 min-w-0
+                        ${!expanded && !isFront ? 'truncate' : ''}`}
+                >
+                    {toast.message}
+                </p>
+                <button onClick={onRemove} className='hover:text-login-200 text-login-400'>
+                    <X className='h-5 w-5' />
+                </button>
+            </div>
+        </li>
+    )
+}
+
+function Icon(type: ToastType) {
+    switch (type) {
+        case 'info':
+            return <Info className='h-6 w-6 text-blue-500' />
+        case 'success':
+            return <CheckCircle className='h-6 w-6 text-green-500' />
+        case 'warning':
+            return <AlertTriangle className='h-6 w-6 text-yellow-500' />
+        case 'error':
+            return <AlertCircle className='h-6 w-6 text-red-500' />
+    }
+}

package/src/components/toast/toaster.tsx

@@ -1,123 +1,114 @@
 'use client'
 
-import { CircleAlert, CircleCheck, CircleX, Info } from 'lucide-react'
-import { useEffect, useState, useRef } from 'react'
-import { ToastProps, ToastType, ToastObserverProps } from 'uibee/components'
+import { useState, useEffect, useMemo } from 'react'
+import type { Toast, ToastType } from 'uibee/components'
+import ToastItem from '@components/toast/toastItem'
 
+const listeners = new Set<(toast: Toast) => void>()
+let idCounter = 0
 
-const observers: ToastObserverProps[] = []
-
-export function addToast(type: ToastType, title: string, description: string = '') {
-    observers.forEach((observer) => observer({ title, description, type }))
+export function toast(message: string, type: ToastType, duration = 4000) {
+    const id = ++idCounter
+    listeners.forEach(listener => listener({ id, message, type, expiresAt: Date.now() + duration }))
 }
 
 export default function Toaster() {
-    const [toasts, setToasts] = useState<Array<ToastProps & { remaining: number; created: number }>>([])
-    const timers = useRef<{ [id: number]: NodeJS.Timeout }>({})
-    const [isHovered, setIsHovered] = useState(false)
-    const pauseTimes = useRef<{ [id: number]: number }>({})
-    const mainToastRef = useRef<HTMLDivElement>(null)
-    const [mainToastPosition, setMainToastPosition] = useState<{ top: number; right: number } | null>(null)
+    const [toasts, setToasts] = useState<Toast[]>([])
+    const [expanded, setExpanded] = useState(false)
+    const [heights, setHeights] = useState<Record<number, number>>({})
 
     useEffect(() => {
-        const listener: ToastObserverProps = ({ type, title, description }) => {
-            const id = Date.now()
-            setToasts(prev => {
-                const newToasts = prev.concat({ id, type, title, description, remaining: 3000, created: Date.now() }).slice(-3)
-                return newToasts
-            })
+        function addToast(toast: Toast) {
+            setToasts(prev => [toast, ...prev])
         }
-        observers.push(listener)
+
+        listeners.add(addToast)
+
         return () => {
-            const idx = observers.indexOf(listener)
-            if (idx > -1) observers.splice(idx, 1)
-            Object.values(timers.current).forEach(clearTimeout)
+            listeners.delete(addToast)
         }
     }, [])
 
     useEffect(() => {
-        if (isHovered) {
-            toasts.forEach(toast => {
-                if (timers.current[toast.id]) {
-                    clearTimeout(timers.current[toast.id])
-                    const elapsed = Date.now() - toast.created
-                    pauseTimes.current[toast.id] = toast.remaining - elapsed > 0 ? toast.remaining - elapsed : 0
-                    setToasts(prev => prev.map(t => t.id === toast.id ? { ...t, remaining: pauseTimes.current[toast.id] } : t))
-                    delete timers.current[toast.id]
-                }
-            })
-        } else {
-            toasts.forEach(toast => {
-                if (!timers.current[toast.id] && toast.remaining > 0) {
-                    timers.current[toast.id] = setTimeout(() => {
-                        setToasts(prev => prev.filter(t => t.id !== toast.id))
-                        delete timers.current[toast.id]
-                    }, toast.remaining)
-                    setToasts(prev => prev.map(t => t.id === toast.id ? { ...t, created: Date.now() } : t))
-                }
-            })
-        }
-    }, [isHovered, toasts])
+        const now = Date.now()
+        setToasts(prev => prev.map(toast => {
+            if (expanded) return { ...toast, pausedAt: toast.pausedAt || now }
+            if (!toast.pausedAt) return toast
+            return { ...toast, expiresAt: toast.expiresAt + (now - toast.pausedAt), pausedAt: undefined }
+        }))
+    }, [expanded])
+
+    function removeToast(id: number) {
+        setToasts(prev => prev.map(toast => toast.id === id ? { ...toast, exiting: true } : toast))
+        setTimeout(() => {
+            setToasts(prev => prev.filter(toast => toast.id !== id))
+        }, 300)
+    }
 
-    // Track main toast position for stacking
     useEffect(() => {
-        if (mainToastRef.current && toasts.length > 0) {
-            const rect = mainToastRef.current.getBoundingClientRect()
-            setMainToastPosition({
-                top: rect.top,
-                right: window.innerWidth - rect.right
+        const timer = setInterval(() => {
+            if (expanded) return
+            const now = Date.now()
+            setToasts(prev => {
+                const toastsToExit = prev.filter(toast => !toast.exiting && !toast.pausedAt && toast.expiresAt <= now)
+                if (toastsToExit.length === 0) return prev
+
+                toastsToExit.forEach(toast => {
+                    setTimeout(() => {
+                        setToasts(current => current.filter(item => item.id !== toast.id))
+                    }, 300)
+                })
+
+                return prev.map(toast => toastsToExit.find(exitToast => exitToast.id === toast.id) ? { ...toast, exiting: true } : toast)
             })
-        }
-    }, [toasts, isHovered])
+        }, 100)
+        return () => clearInterval(timer)
+    }, [expanded])
+
+    function onHeight(id: number, height: number) {
+        setHeights(prev => {
+            if (prev[id] === height) return prev
+            return { ...prev, [id]: height }
+        })
+    }
+
+    const visibleToasts = toasts.slice(0, expanded ? 10 : 3)
+    const frontHeight = heights[visibleToasts[0]?.id] || 60
+
+    const offsets = useMemo(() => {
+        let currentOffset = 0
+        return visibleToasts.map(toast => {
+            const height = heights[toast.id] || 60
+            const offset = currentOffset
+            currentOffset += height + 16
+            return offset
+        })
+    }, [visibleToasts, heights])
+
+    const totalHeight = offsets.length > 0
+        ? offsets[offsets.length - 1] + (heights[visibleToasts[visibleToasts.length - 1]?.id] || 60)
+        : 0
 
-    const bgClasses = ['bg-login-600', 'bg-login-700', 'bg-login-800']
     return (
-        <div
-            className={`fixed bottom-4 right-4 z-50 flex ${isHovered ? 'flex-col-reverse items-end gap-2' : 'flex-col items-end'}`}
-            onMouseEnter={() => setIsHovered(true)}
-            onMouseLeave={() => setIsHovered(false)}
+        <ul
+            className={`fixed bottom-4 right-4 z-9999 w-full max-w-sm flex flex-col items-end transition-all duration-300 ease-out
+                ${expanded ? 'pointer-events-auto' : 'pointer-events-none'}`}
+            style={{ height: expanded ? totalHeight + 'px' : 'auto' }}
+            onMouseEnter={() => setExpanded(true)}
+            onMouseLeave={() => setExpanded(false)}
         >
-            {toasts.slice().reverse().map((toast, idx) => (
-                <div
-                    key={`${toast.id}-${idx}`}
-                    ref={idx === 0 ? mainToastRef : null}
-                    className={
-                        'p-2 rounded-lg text-login-50 animate-fade-in-down transition-all w-sm flex items-center gap-2 ' +
-                        (bgClasses[idx] || bgClasses[2])
-                    }
-                    style={isHovered ? {} : idx === 0 ? {
-                        zIndex: 100,
-                    } : {
-                        position: 'fixed',
-                        top: mainToastPosition ? `${mainToastPosition.top - idx * 8}px` : 'auto',
-                        zIndex: 100 - idx,
-                        transform: `scale(${1 - idx * 0.05})`,
-                    }}
-                >
-                    <span className='shrink-0 w-10 h-10 flex items-center justify-center'>
-                        <ToastIcon type={toast.type} />
-                    </span>
-                    <div className='pr-1 pb-1'>
-                        <span className='font-bold'>{toast.title}</span>
-                        {(idx === 0 || isHovered) &&
-                            <span className='text-sm line-clamp-3'>{toast.description}</span>
-                        }
-                    </div>
-                </div>
+            {visibleToasts.map((toast, index) => (
+                <ToastItem
+                    key={toast.id}
+                    toast={toast}
+                    index={index}
+                    expanded={expanded}
+                    onRemove={() => removeToast(toast.id)}
+                    onHeight={onHeight}
+                    offset={offsets[index]}
+                    frontHeight={frontHeight}
+                />
             ))}
-        </div>
+        </ul>
     )
 }
-
-function ToastIcon({ type }: { type?: ToastType }) {
-    switch (type) {
-        case 'success':
-            return <CircleCheck className='text-green-300/70' />
-        case 'warning':
-            return <CircleAlert className='text-yellow-300/70' />
-        case 'error':
-            return <CircleX className='text-red-300/70' />
-        case 'info':
-            return <Info className='text-blue-300/70' />
-    }
-}

package/src/types/components.d.ts

@@ -9,28 +9,32 @@ declare module 'uibee/components' {
         handleSubmit?: (formData: FormData) => void
     }
 
-    export type ToastType = 'success' | 'error' | 'info' | 'warning'
-    export interface ToastProps {
-        id: number
-        type: ToastType
-        title: string
-        description?: string
-    }
+    export type ToastType = 'info' | 'success' | 'warning' | 'error'
 
-    export interface ToastEventProps {
+    interface Toast {
+        id: number
+        message: string
         type: ToastType
-        title: string
-        description?: string
+        expiresAt: number
+        pausedAt?: number
+        exiting?: boolean
     }
 
-    export interface ToastObserverProps {
-        (event: ToastEventProps): void
+    interface ToastProps {
+        toast: Toast,
+        index: number,
+        expanded: boolean,
+        onRemove: () => void,
+        onHeight: (id: number, height: number) => void,
+        offset: number,
+        frontHeight: number
     }
 
     export type Language = 'no' | 'en'
 
     export default function LoginPage(props: LoginPageProps): JSX.Element;
-    export default function Toaster(props: { toasts: ToastProps[] }): JSX.Element;
+    export default function Toaster(): JSX.Element;
+    export default function toast(message: string, type: ToastType, duration?: number): void;
     export default function LanguageToggle(props: { lang: Language }): JSX.Element;
     export default function ThemeSwitch(props: { className?: string }): JSX.Element;
 }