@cube-dev/ui-kit 0.113.0 → 0.114.0

package/es/components/overlays/Notifications/OverlayContainer.js

@@ -0,0 +1,346 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.114.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { useEvent } from '../../../_internal/index.js';
+import { tasty } from '../../../tasty/index.js';
+import { useLayoutEffect } from '../../../utils/react/useLayoutEffect.js';
+import { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition.js';
+import { Portal } from '../../portal/index.js';
+import { ToastItem } from '../Toast/ToastItem.js';
+import { NotificationItem } from './NotificationItem.js';
+// ─── Constants ───────────────────────────────────────────────────────
+const COLLAPSE_VISIBLE_HEIGHT = 10;
+const CONTAINER_OFFSET = 16;
+const ITEM_GAP = 8;
+const DEFAULT_ITEM_HEIGHT = 56;
+// ─── Styled Elements ─────────────────────────────────────────────────
+const OverlayContainerElement = tasty({
+    styles: {
+        position: 'fixed',
+        top: '2x',
+        left: '50%',
+        transform: 'translateX(-50%)',
+        zIndex: 10000,
+        padding: '1x',
+        height: '0',
+        pointerEvents: 'none',
+    },
+});
+const OverlayItemWrapper = tasty({
+    styles: {
+        position: 'absolute',
+        top: '0',
+        left: '50%',
+        transform: {
+            '': 'translateX(-50%) translateY(-50%)',
+            'isMeasured & isShown': 'translateX(-50%) translateY(0)',
+        },
+        width: 'max-content 50x',
+        pointerEvents: 'auto',
+        transition: {
+            '': 'opacity $transition ease-in, transform $transition ease-in',
+            isMeasured: 'top $transition ease-in, opacity $transition ease-in, transform $transition ease-in',
+        },
+        opacity: {
+            '': 0,
+            isShown: 1,
+        },
+    },
+});
+function getItemId(item) {
+    return item.data.internalId;
+}
+function isItemExiting(item) {
+    return item.data.isExiting === true;
+}
+function getItemCreatedAt(item) {
+    return item.data.createdAt;
+}
+/**
+ * Manages height measurement, position calculation, and ref tracking
+ * for overlay items. Extracted from OverlayContainer for readability.
+ */
+function useItemPositions(visibleItems) {
+    const [heights, setHeights] = useState({});
+    const itemRefs = useRef(new Map());
+    const lastPositionsRef = useRef(new Map());
+    // Items that have been measured AND painted at their correct position.
+    // Lags one frame behind `heights` so the browser paints the item at
+    // its final `top` before the CSS `top` transition is enabled.
+    const [settledIds, setSettledIds] = useState(new Set());
+    const rafRef = useRef(null);
+    // Measure heights using layout effect to avoid visible layout shifts.
+    // Runs every render but bails early if nothing changed.
+    useLayoutEffect(() => {
+        const newHeights = {};
+        let hasChanges = false;
+        itemRefs.current.forEach((el, id) => {
+            const height = el.offsetHeight || DEFAULT_ITEM_HEIGHT;
+            newHeights[id] = height;
+            if (heights[id] !== height) {
+                hasChanges = true;
+            }
+        });
+        for (const id of Object.keys(heights)) {
+            if (!itemRefs.current.has(id)) {
+                hasChanges = true;
+            }
+        }
+        if (hasChanges) {
+            setHeights(newHeights);
+        }
+    });
+    // After heights change, schedule settledIds update for the next frame.
+    // This ensures the item is painted at its correct position (with no top
+    // transition) before we enable the transition.
+    useEffect(() => {
+        const heightKeys = Object.keys(heights);
+        const newIds = heightKeys.filter((id) => !settledIds.has(id));
+        const hasStaleIds = settledIds.size > 0 && [...settledIds].some((id) => !(id in heights));
+        if (newIds.length === 0 && !hasStaleIds)
+            return;
+        if (rafRef.current != null) {
+            cancelAnimationFrame(rafRef.current);
+        }
+        // For pruning-only updates (no new items), apply synchronously since
+        // there's no need to wait for a paint frame.
+        if (newIds.length === 0 && hasStaleIds) {
+            setSettledIds((prev) => new Set(heightKeys.filter((id) => prev.has(id))));
+            return;
+        }
+        rafRef.current = requestAnimationFrame(() => {
+            rafRef.current = null;
+            setSettledIds((prev) => {
+                const next = new Set();
+                // Only keep IDs that still exist in heights (prune removed items)
+                for (const id of heightKeys) {
+                    if (prev.has(id)) {
+                        next.add(id);
+                    }
+                }
+                for (const id of newIds) {
+                    next.add(id);
+                }
+                return next;
+            });
+        });
+        return () => {
+            if (rafRef.current != null) {
+                cancelAnimationFrame(rafRef.current);
+                rafRef.current = null;
+            }
+        };
+    }, [heights]);
+    const createRefCallback = useCallback((itemId, displayRef) => (el) => {
+        displayRef(el);
+        if (el) {
+            itemRefs.current.set(itemId, el);
+        }
+        else {
+            itemRefs.current.delete(itemId);
+        }
+    }, []);
+    const positions = useMemo(() => {
+        const posMap = new Map();
+        let currentTop = 0;
+        for (const item of visibleItems) {
+            const id = getItemId(item);
+            posMap.set(id, currentTop);
+            const height = heights[id] ?? DEFAULT_ITEM_HEIGHT;
+            currentTop += height + ITEM_GAP;
+        }
+        return posMap;
+    }, [visibleItems, heights]);
+    useEffect(() => {
+        positions.forEach((pos, id) => {
+            lastPositionsRef.current.set(id, pos);
+        });
+    }, [positions]);
+    return {
+        heights,
+        settledIds,
+        positions,
+        lastPositionsRef,
+        itemRefs,
+        createRefCallback,
+    };
+}
+/**
+ * Manages collapse/expand behavior and pause state for the overlay container.
+ * Extracted from OverlayContainer for readability.
+ */
+function useCollapseState(canCollapse, allItems, itemRefs, onPauseChange) {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const containerRef = useRef(null);
+    const boundsRef = useRef(null);
+    const updateBounds = useCallback(() => {
+        const refs = itemRefs.current;
+        if (!refs || refs.size === 0) {
+            boundsRef.current = null;
+            return;
+        }
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+        refs.forEach((el) => {
+            const rect = el.getBoundingClientRect();
+            minX = Math.min(minX, rect.left);
+            minY = Math.min(minY, rect.top);
+            maxX = Math.max(maxX, rect.right);
+            maxY = Math.max(maxY, rect.bottom);
+        });
+        if (typeof DOMRect !== 'undefined') {
+            boundsRef.current = new DOMRect(minX, minY, maxX - minX, maxY - minY);
+        }
+        else {
+            boundsRef.current = {
+                x: minX,
+                y: minY,
+                width: maxX - minX,
+                height: maxY - minY,
+                top: minY,
+                right: maxX,
+                bottom: maxY,
+                left: minX,
+                toJSON: () => ({}),
+            };
+        }
+    }, [itemRefs]);
+    // Track mouse for collapse — expand when mouse leaves bounds
+    useEffect(() => {
+        if (!isCollapsed)
+            return;
+        const handleMouseMove = (e) => {
+            const bounds = boundsRef.current;
+            if (!bounds) {
+                setIsCollapsed(false);
+                onPauseChange(false);
+                return;
+            }
+            const padding = 20;
+            const isInBounds = e.clientX >= bounds.left - padding &&
+                e.clientX <= bounds.right + padding &&
+                e.clientY >= bounds.top - padding &&
+                e.clientY <= bounds.bottom + padding;
+            if (!isInBounds) {
+                setIsCollapsed(false);
+                onPauseChange(false);
+            }
+        };
+        window.addEventListener('mousemove', handleMouseMove);
+        return () => window.removeEventListener('mousemove', handleMouseMove);
+    }, [isCollapsed, onPauseChange]);
+    // Update bounds when items change
+    useEffect(() => {
+        updateBounds();
+    }, [allItems, updateBounds]);
+    const handleMouseEnter = useCallback(() => {
+        updateBounds();
+        onPauseChange(true);
+        if (canCollapse) {
+            setIsCollapsed(true);
+        }
+    }, [updateBounds, canCollapse, onPauseChange]);
+    const handleMouseLeave = useCallback(() => {
+        if (!isCollapsed) {
+            onPauseChange(false);
+        }
+    }, [isCollapsed, onPauseChange]);
+    const handleFocus = useCallback(() => {
+        onPauseChange(true);
+    }, [onPauseChange]);
+    const handleBlur = useCallback((e) => {
+        if (containerRef.current &&
+            !containerRef.current.contains(e.relatedTarget)) {
+            onPauseChange(false);
+        }
+    }, [onPauseChange]);
+    return {
+        isCollapsed,
+        handleMouseEnter,
+        handleMouseLeave,
+        handleFocus,
+        handleBlur,
+        containerRef,
+    };
+}
+export function OverlayContainer({ toasts, notifications, onToastExitComplete, onNotificationExitComplete, onNotificationDismiss, onPauseChange, }) {
+    // Merge toasts and notifications into a single ordered list
+    const allItems = useMemo(() => {
+        const items = [
+            ...toasts.map((t) => ({ kind: 'toast', data: t })),
+            ...notifications.map((n) => ({ kind: 'notification', data: n })),
+        ];
+        // Sort by createdAt ascending (oldest first = bottom of stack, newest last = top)
+        items.sort((a, b) => getItemCreatedAt(a) - getItemCreatedAt(b));
+        return items;
+    }, [toasts, notifications]);
+    const visibleItems = useMemo(() => allItems.filter((item) => !isItemExiting(item)), [allItems]);
+    const hasNotifications = notifications.some((n) => !n.isExiting);
+    const canCollapse = !hasNotifications;
+    const { heights, settledIds, positions, lastPositionsRef, itemRefs, createRefCallback, } = useItemPositions(visibleItems);
+    const { isCollapsed, handleMouseEnter, handleMouseLeave, handleFocus, handleBlur, containerRef, } = useCollapseState(canCollapse, allItems, itemRefs, onPauseChange);
+    // ─── Callbacks ─────────────────────────────────────────────────────
+    // When the user dismisses a notification they were hovering, the element
+    // is removed from the DOM so mouseLeave never fires. Explicitly unpause
+    // so remaining notifications' timers resume.
+    const handleNotificationDismiss = useEvent((id, reason) => {
+        onNotificationDismiss(id, reason);
+        onPauseChange(false);
+    });
+    const handleExitComplete = useEvent((item) => {
+        const id = getItemId(item);
+        lastPositionsRef.current?.delete(id);
+        if (item.kind === 'toast') {
+            onToastExitComplete(item.data.internalId);
+        }
+        else {
+            onNotificationExitComplete(item.data.internalId);
+        }
+    });
+    // useCallback (not useEvent) because this is called during render.
+    // useEvent defers the ref update to useLayoutEffect, so during render
+    // it would still read the previous closure's positions/heights.
+    const getItemStyle = useCallback((item, index, total) => {
+        const id = getItemId(item);
+        const baseTop = positions.get(id) ?? lastPositionsRef.current?.get(id) ?? 0;
+        const height = heights[id] ?? DEFAULT_ITEM_HEIGHT;
+        if (!isCollapsed || !canCollapse) {
+            return { top: `${baseTop}px` };
+        }
+        const isNewest = index === total - 1;
+        const collapsedTop = COLLAPSE_VISIBLE_HEIGHT - CONTAINER_OFFSET - height;
+        return {
+            top: `${collapsedTop}px`,
+            zIndex: index,
+            opacity: isNewest ? 1 : 0,
+            pointerEvents: 'none',
+        };
+    }, [isCollapsed, canCollapse, positions, heights, lastPositionsRef]);
+    // Build a visibleIndex lookup map to avoid O(n²) findIndex inside render loop
+    const visibleIndexMap = useMemo(() => {
+        const map = new Map();
+        visibleItems.forEach((item, index) => {
+            map.set(getItemId(item), index);
+        });
+        return map;
+    }, [visibleItems]);
+    if (allItems.length === 0)
+        return null;
+    return (_jsx(Portal, { children: _jsx(OverlayContainerElement, { ref: containerRef, onFocus: handleFocus, onBlur: handleBlur, children: allItems.map((item) => {
+                const itemId = getItemId(item);
+                const visibleIndex = visibleIndexMap.get(itemId) ?? 0;
+                const isExiting = isItemExiting(item);
+                return (_jsx(DisplayTransition, { animateOnMount: true, isShown: !isExiting, onRest: (transition) => {
+                        if (transition === 'exit') {
+                            handleExitComplete(item);
+                        }
+                    }, children: ({ isShown, ref }) => (_jsx(OverlayItemWrapper, { ref: createRefCallback(itemId, ref), mods: { isShown, isMeasured: settledIds.has(itemId) }, style: getItemStyle(item, visibleIndex, visibleItems.length), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: item.kind === 'toast' ? (_jsx(ToastItem, { ...item.data.itemProps, title: item.data.title, description: item.data.description, theme: item.data.theme, icon: item.data.icon, isLoading: item.data.isLoading })) : (_jsx(NotificationItem, { notification: item.data, onDismiss: handleNotificationDismiss })) })) }, itemId));
+            }) }) }));
+}
+
+        

package/es/components/overlays/Notifications/OverlayProvider.js

@@ -0,0 +1,69 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.114.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import { NotificationContext, PersistentNotificationsContext, ToastContext, } from './NotificationContext.js';
+import { OverlayContainer } from './OverlayContainer.js';
+import { useNotificationState } from './use-notification-state.js';
+import { useOverlayTimers } from './use-overlay-timers.js';
+import { usePersistentState } from './use-persistent-state.js';
+import { useToastState } from './use-toast-state.js';
+// ─── Re-export context hooks for consumers ───────────────────────────
+export { useToastContext, useNotificationContext } from './NotificationContext.js';
+// ─── Constants ───────────────────────────────────────────────────────
+const DEFAULT_MAX_PERSISTENT = 200;
+// ─── OverlayProvider ─────────────────────────────────────────────────
+export function OverlayProvider({ children, maxPersistentNotifications = DEFAULT_MAX_PERSISTENT, }) {
+    // Shared ref that breaks the circular dependency between state hooks and timers.
+    // State hooks need timer methods (start/clear), timer hooks need remove methods.
+    // All consumers access the ref only inside useEvent/callbacks (never during
+    // render), so it is guaranteed to be populated before first use.
+    const timersRef = useRef(null);
+    // 1. Persistent state (no dependencies on other hooks)
+    const persistent = usePersistentState(maxPersistentNotifications);
+    // 2. Toast state — accesses timers through the shared ref
+    const toast = useToastState(timersRef);
+    // 3. Notification state — accesses timers through the shared ref
+    const notification = useNotificationState(timersRef, persistent);
+    // 4. Create timers and populate the ref
+    const timers = useOverlayTimers({
+        toastsRef: toast.toastsRef,
+        notificationsRef: notification.notificationsRef,
+        removeToast: toast.removeToast,
+        removeNotification: notification.removeNotification,
+    });
+    timersRef.current = timers;
+    // ─── Context Values ───────────────────────────────────────────────
+    // Only include actually-changing values in deps. All useEvent-based
+    // callbacks are referentially stable and omitted.
+    const toastContextValue = useMemo(() => ({
+        addToast: toast.addToast,
+        removeToast: toast.removeToast,
+        updateToast: toast.updateToast,
+        toasts: toast.toasts,
+    }), [toast.toasts]);
+    const notificationContextValue = useMemo(() => ({
+        addNotification: notification.addNotification,
+        removeNotification: notification.removeNotification,
+        updateNotification: notification.updateNotification,
+        notifications: notification.notifications,
+        addPersistentItem: persistent.addPersistentItem,
+        removePersistentItem: persistent.removePersistentItem,
+        removePersistentItemsByOwner: persistent.removePersistentItemsByOwner,
+        removeByOwner: notification.removeByOwner,
+    }), [notification.notifications]);
+    const persistentContextValue = useMemo(() => ({
+        persistentItems: persistent.persistentItems,
+        removePersistentItem: persistent.removePersistentItem,
+        clearPersistentItems: persistent.clearPersistentItems,
+        markAllAsRead: persistent.markAllAsRead,
+    }), [persistent.persistentItems]);
+    return (_jsx(ToastContext.Provider, { value: toastContextValue, children: _jsx(NotificationContext.Provider, { value: notificationContextValue, children: _jsxs(PersistentNotificationsContext.Provider, { value: persistentContextValue, children: [children, _jsx(OverlayContainer, { toasts: toast.toasts, notifications: notification.notifications, onToastExitComplete: toast.finalizeToastRemoval, onNotificationExitComplete: notification.finalizeNotificationRemoval, onNotificationDismiss: notification.removeNotification, onPauseChange: timers.handlePauseChange })] }) }) }));
+}
+
+        

package/es/components/overlays/Notifications/PersistentNotificationsList.js

@@ -0,0 +1,120 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.114.0
+ * Released under the MIT license.
+ */
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useContext, useEffect, useRef, useState } from 'react';
+import { useEvent } from '../../../_internal/index.js';
+import { tasty } from '../../../tasty/index.js';
+import { Divider } from '../../content/Divider.js';
+import { Text } from '../../content/Text.js';
+import { formatRelativeTime } from './format-relative-time.js';
+import { NotificationActionInterceptorContext } from './NotificationAction.js';
+import { NotificationCard } from './NotificationCard.js';
+import { usePersistentNotifications } from './use-persistent-notifications.js';
+// ─── Constants ───────────────────────────────────────────────────────
+const MARK_READ_DELAY = 2000;
+/** Interval (ms) at which relative timestamps refresh while the list is mounted. */
+const TIMESTAMP_REFRESH_INTERVAL = 10_000;
+// ─── Styled Components ──────────────────────────────────────────────
+const ListContainer = tasty({
+    qa: 'PersistentNotificationsList',
+    role: 'log',
+    'aria-label': 'Notifications',
+    styles: {
+        display: 'flex',
+        flow: 'column',
+    },
+});
+const EmptyStateContainer = tasty({
+    styles: {
+        display: 'flex',
+        placeItems: 'center',
+        placeContent: 'center',
+        padding: '4x',
+        color: '#dark.5',
+        preset: 't3',
+    },
+});
+// ─── PersistentNotificationsList Component ───────────────────────────
+/**
+ * Standardized rendering for archived/persistent notifications.
+ * Always reads items from the notification context.
+ * Composable with app-specific shells (popover, dialog, page section).
+ *
+ * Marks all items as read after being visible for 2 seconds.
+ * Relative timestamps refresh every 10 seconds while the list is mounted.
+ *
+ * Items are always dismissible. Dismissing an item removes it from the
+ * persistent list and marks its ID as "fully dismissed" — subsequent triggers
+ * with the same ID will be completely ignored (no overlay, no re-archival).
+ *
+ * @example
+ * ```tsx
+ * <PersistentNotificationsList emptyState="No notifications" />
+ * ```
+ */
+export function PersistentNotificationsList({ onDismissItem, onAction, emptyState, }) {
+    const { items, remove, markAllAsRead } = usePersistentNotifications();
+    // Default dismiss handler removes the item from the persistent list (which
+    // also marks the id as "fully dismissed" so it won't reappear).
+    // If a consumer provides `onDismissItem`, it is called *after* the built-in removal.
+    const handleDismiss = useEvent((item) => {
+        remove(item.id);
+        onDismissItem?.(item);
+    });
+    const markReadTimerRef = useRef(null);
+    // Tick counter that increments every TIMESTAMP_REFRESH_INTERVAL to force
+    // re-render so relative timestamps (e.g. "5 min ago") stay up to date.
+    const [, setTick] = useState(0);
+    useEffect(() => {
+        if (items.length === 0)
+            return;
+        const interval = setInterval(() => {
+            setTick((t) => t + 1);
+        }, TIMESTAMP_REFRESH_INTERVAL);
+        return () => clearInterval(interval);
+    }, [items.length]);
+    // Mark all persistent notifications as read after a 2s delay.
+    // Re-starts the timer whenever items change (e.g. new unread items arrive
+    // while the list is already visible).
+    useEffect(() => {
+        const hasUnread = items.some((i) => !i.isRead);
+        if (!hasUnread)
+            return;
+        markReadTimerRef.current = setTimeout(() => {
+            markAllAsRead();
+        }, MARK_READ_DELAY);
+        return () => {
+            if (markReadTimerRef.current) {
+                clearTimeout(markReadTimerRef.current);
+                markReadTimerRef.current = null;
+            }
+        };
+    }, [markAllAsRead, items]);
+    if (items.length === 0) {
+        return (_jsx(ListContainer, { children: _jsx(EmptyStateContainer, { children: emptyState ?? 'No notifications' }) }));
+    }
+    return (_jsx(NotificationActionInterceptorContext.Provider, { value: onAction ?? null, children: _jsx(ListContainer, { children: items.map((item, index) => (_jsxs(Fragment, { children: [index > 0 && _jsx(Divider, {}), _jsx(PersistentNotificationListItem, { item: item, onDismiss: handleDismiss })] }, String(item.id)))) }) }));
+}
+function PersistentNotificationListItem({ item, onDismiss, }) {
+    const suffix = (_jsx(Text, { opacity: 0.5, preset: "c2", children: formatRelativeTime(item.createdAt) }));
+    // useEvent keeps the callback stable across re-renders regardless of
+    // item reference changes (avoids unnecessary NotificationCard re-renders).
+    const handleDismiss = useEvent((_id, _reason) => {
+        onDismiss?.(item);
+    });
+    const parentInterceptor = useContext(NotificationActionInterceptorContext);
+    // Chains with the list-level interceptor (e.g. closing the parent popover).
+    // Dismissal itself is handled by NotificationAction via the dismiss context
+    // to avoid double-firing onDismiss.
+    const handleItemAction = useEvent(() => {
+        parentInterceptor?.();
+    });
+    return (_jsx(NotificationActionInterceptorContext.Provider, { value: handleItemAction, children: _jsx(NotificationCard, { qa: "PersistentNotificationItem", theme: item.theme, title: item.title, description: item.description, icon: item.icon, actions: item.actions, isDismissible: !!onDismiss, elevated: false, notificationId: item.id, suffix: suffix, onDismiss: onDismiss ? handleDismiss : undefined }) }));
+}
+
+        

package/es/components/overlays/Notifications/format-relative-time.js

@@ -0,0 +1,55 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.114.0
+ * Released under the MIT license.
+ */
+
+/**
+ * Lightweight relative time formatter.
+ * No external dependencies.
+ *
+ * Output format:
+ * - `just now` (< 1 minute)
+ * - `N min ago` (1–59 minutes)
+ * - `N h ago` (1–23 hours)
+ * - `N d ago` (1–6 days)
+ * - `N w ago` (1–4 weeks)
+ * - `N mo ago` (1–11 months)
+ * - `N y ago` (1+ years)
+ */
+export function formatRelativeTime(timestamp) {
+    const now = Date.now();
+    const diffMs = now - timestamp;
+    if (diffMs < 0) {
+        return 'just now';
+    }
+    const diffSeconds = Math.floor(diffMs / 1000);
+    const diffMinutes = Math.floor(diffSeconds / 60);
+    const diffHours = Math.floor(diffMinutes / 60);
+    const diffDays = Math.floor(diffHours / 24);
+    if (diffMinutes < 1) {
+        return 'just now';
+    }
+    if (diffHours < 1) {
+        return `${diffMinutes} min ago`;
+    }
+    if (diffDays < 1) {
+        return `${diffHours} h ago`;
+    }
+    if (diffDays < 7) {
+        return `${diffDays} d ago`;
+    }
+    const diffWeeks = Math.floor(diffDays / 7);
+    if (diffDays < 30) {
+        return `${diffWeeks} w ago`;
+    }
+    const diffMonths = Math.floor(diffDays / 30);
+    if (diffDays < 365) {
+        return `${diffMonths} mo ago`;
+    }
+    const diffYears = Math.floor(diffDays / 365);
+    return `${diffYears} y ago`;
+}
+
+        

package/es/components/overlays/Notifications/index.js

@@ -0,0 +1,51 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.114.0
+ * Released under the MIT license.
+ */
+
+// ─── Components ──────────────────────────────────────────────────────
+import { Notification as NotificationBase } from './Notification.js';
+import { NotificationAction } from './NotificationAction.js';
+export { NotificationAction } from './NotificationAction.js';
+export { NotificationCard } from './NotificationCard.js';
+export { NotificationItem } from './NotificationItem.js';
+export { PersistentNotificationsList } from './PersistentNotificationsList.js';
+// ─── Provider ────────────────────────────────────────────────────────
+export { OverlayProvider } from './OverlayProvider.js';
+// useToastContext is re-exported for Toast module backward compatibility
+export { useToastContext } from './NotificationContext.js';
+// ─── Hooks ───────────────────────────────────────────────────────────
+export { useNotifications } from './use-notifications.js';
+export { usePersistentNotifications, useNotificationsCount, } from './use-persistent-notifications.js';
+// ─── Utilities ───────────────────────────────────────────────────────
+export { formatRelativeTime } from './format-relative-time.js';
+// ─── Compound Notification Component ─────────────────────────────────
+/**
+ * Declarative Notification component with compound API.
+ *
+ * @example
+ * ```tsx
+ * // Declarative usage
+ * <Notification
+ *   id="release:new-version"
+ *   theme="warning"
+ *   title="New release available"
+ *   description="2.0.0 can be installed now."
+ *   actions={
+ *     <>
+ *       <Notification.Action>Later</Notification.Action>
+ *       <Notification.Action onPress={() => openUpgradeDialog()}>
+ *         Upgrade
+ *       </Notification.Action>
+ *     </>
+ *   }
+ * />
+ * ```
+ */
+export const Notification = Object.assign(NotificationBase, {
+    Action: NotificationAction,
+});
+
+        

package/es/components/overlays/{NewNotifications/NotificationsList → Notifications}/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.113.0
+ * @cube-dev/ui-kit v0.114.0
  * Released under the MIT license.
  */