@papernote/ui 1.8.3 → 1.9.2

package/dist/index.js

@@ -10076,6 +10076,207 @@ function NotificationIndicator({ count = 0, onClick, className = '', maxCount =
     return (jsxRuntime.jsxs("button", { onClick: onClick, className: `relative bg-white p-2.5 rounded-lg text-ink-400 hover:text-ink-600 hover:bg-paper-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-400 transition-all shadow-xs dark:bg-slate-800 dark:text-slate-400 dark:hover:text-slate-100 dark:hover:bg-slate-700 ${className}`, "aria-label": "View notifications", children: [jsxRuntime.jsx(lucideReact.Bell, { className: "h-5 w-5" }), showBadge && (jsxRuntime.jsx("span", { className: `absolute -top-1 -right-1 ${variantClasses[variant]} text-white text-xs font-semibold rounded-full h-5 min-w-5 px-1 flex items-center justify-center`, children: displayCount }))] }));
 }
 
+/**
+ * Format a date to a relative time string
+ */
+function formatTimeAgo(date) {
+    const now = new Date();
+    const then = new Date(date);
+    const diffMs = now.getTime() - then.getTime();
+    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 (diffSeconds < 60) {
+        return 'Just now';
+    }
+    else if (diffMinutes < 60) {
+        return `${diffMinutes}m ago`;
+    }
+    else if (diffHours < 24) {
+        return `${diffHours}h ago`;
+    }
+    else if (diffDays < 7) {
+        return `${diffDays}d ago`;
+    }
+    else {
+        return then.toLocaleDateString();
+    }
+}
+/**
+ * Map notification type to Badge variant
+ */
+const typeToBadgeVariant = {
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    error: 'error',
+};
+/**
+ * Default labels for notification types
+ */
+const defaultTypeLabels = {
+    info: 'Info',
+    success: 'Success',
+    warning: 'Warning',
+    error: 'Alert',
+};
+/**
+ * Map dropdown position to Popover placement
+ * - bottom-right: Below bell, dropdown's right edge aligns with bell
+ * - bottom-left: Below bell, dropdown's left edge aligns with bell
+ * - top-right: Above bell, dropdown's right edge aligns with bell
+ * - top-left: Above bell, dropdown's left edge aligns with bell
+ */
+function getPopoverPlacement(position) {
+    switch (position) {
+        case 'bottom-right':
+        case 'right':
+            return 'bottom-start'; // Below, extends to the right
+        case 'bottom-left':
+        case 'left':
+            return 'bottom-end'; // Below, extends to the left
+        case 'top-right':
+            return 'top-start'; // Above, extends to the right
+        case 'top-left':
+            return 'top-end'; // Above, extends to the left
+        default:
+            return 'bottom-start';
+    }
+}
+/**
+ * NotificationBell - A bell icon with badge and dropdown for displaying notifications
+ *
+ * Displays a bell icon with an optional unread count badge. When clicked, shows a
+ * dropdown panel with recent notifications, mark as read actions, and a link to
+ * view all notifications.
+ *
+ * @example Basic usage (compact variant)
+ * ```tsx
+ * <NotificationBell
+ *   notifications={notifications}
+ *   onMarkAsRead={(id) => markRead(id)}
+ *   onMarkAllRead={() => markAllRead()}
+ *   onNotificationClick={(n) => navigate(n.actionUrl)}
+ *   onViewAll={() => navigate('/notifications')}
+ * />
+ * ```
+ *
+ * @example Detailed variant with labeled badges
+ * ```tsx
+ * <NotificationBell
+ *   notifications={notifications}
+ *   variant="detailed"
+ *   showUnreadInHeader
+ *   dropdownPosition="bottom-left"
+ * />
+ * ```
+ */
+function NotificationBell({ notifications, unreadCount: providedUnreadCount, onMarkAsRead, onMarkAllRead, onNotificationClick, onViewAll, loading = false, dropdownPosition = 'bottom-right', maxHeight = '400px', size = 'md', emptyMessage = 'No notifications', viewAllText = 'View all notifications', disabled = false, className = '', variant = 'compact', showUnreadInHeader = false, bellStyle = 'ghost', }) {
+    const [isOpen, setIsOpen] = React.useState(false);
+    // Calculate unread count if not provided
+    const unreadCount = React.useMemo(() => {
+        if (providedUnreadCount !== undefined) {
+            return providedUnreadCount;
+        }
+        return notifications.filter((n) => !n.isRead).length;
+    }, [providedUnreadCount, notifications]);
+    // Handle notification click
+    const handleNotificationClick = React.useCallback((notification) => {
+        onNotificationClick?.(notification);
+    }, [onNotificationClick]);
+    // Handle mark as read
+    const handleMarkAsRead = React.useCallback((e, id) => {
+        e.stopPropagation();
+        onMarkAsRead?.(id);
+    }, [onMarkAsRead]);
+    // Handle mark all as read
+    const handleMarkAllRead = React.useCallback(() => {
+        onMarkAllRead?.();
+    }, [onMarkAllRead]);
+    // Handle view all
+    const handleViewAll = React.useCallback(() => {
+        onViewAll?.();
+        setIsOpen(false);
+    }, [onViewAll]);
+    // Icon sizes based on button size
+    const iconSizes = {
+        sm: 'h-4 w-4',
+        md: 'h-5 w-5',
+        lg: 'h-6 w-6',
+    };
+    // Dropdown width based on size
+    const dropdownWidths = {
+        sm: 'w-72',
+        md: 'w-80',
+        lg: 'w-96',
+    };
+    // Outlined bell style classes
+    const outlinedSizeClasses = {
+        sm: 'p-2',
+        md: 'p-3',
+        lg: 'p-4',
+    };
+    // Trigger button
+    const triggerButton = bellStyle === 'outlined' ? (jsxRuntime.jsxs("div", { className: "relative inline-block", children: [jsxRuntime.jsx("button", { className: `
+          ${outlinedSizeClasses[size]}
+          bg-white border-2 border-paper-300 rounded-xl
+          hover:bg-paper-50 hover:border-paper-400
+          focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-400
+          transition-all duration-200
+          disabled:opacity-40 disabled:cursor-not-allowed
+          ${className}
+        `, disabled: disabled, "aria-label": unreadCount > 0
+                    ? `Notifications - ${unreadCount} unread`
+                    : 'Notifications', children: jsxRuntime.jsx(lucideReact.Bell, { className: `${iconSizes[size]} text-ink-600` }) }), unreadCount > 0 && (jsxRuntime.jsx("span", { className: `
+            absolute -top-1 -right-1
+            flex items-center justify-center
+            min-w-[18px] h-[18px] px-1.5
+            rounded-full text-white font-semibold text-[11px]
+            bg-error-500 shadow-sm
+            pointer-events-none
+          `, "aria-label": `${unreadCount > 99 ? '99+' : unreadCount} notifications`, children: unreadCount > 99 ? '99+' : unreadCount }))] })) : (jsxRuntime.jsx(Button, { variant: "ghost", iconOnly: true, size: size, disabled: disabled, badge: unreadCount > 0 ? unreadCount : undefined, badgeVariant: "error", "aria-label": unreadCount > 0
+            ? `Notifications - ${unreadCount} unread`
+            : 'Notifications', className: className, children: jsxRuntime.jsx(lucideReact.Bell, { className: iconSizes[size] }) }));
+    // Header title with optional unread count
+    const headerTitle = showUnreadInHeader && unreadCount > 0
+        ? `Notifications (${unreadCount} unread)`
+        : 'Notifications';
+    // Render compact notification item
+    const renderCompactItem = (notification) => (jsxRuntime.jsxs("div", { className: "flex gap-3", children: [jsxRuntime.jsx("div", { className: "flex-shrink-0 pt-1", children: jsxRuntime.jsx(Badge, { dot: true, variant: typeToBadgeVariant[notification.type], size: "sm" }) }), jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsx(Text, { size: "sm", weight: notification.priority === 'high' ||
+                            notification.priority === 'urgent' ||
+                            !notification.isRead
+                            ? 'medium'
+                            : 'normal', truncate: true, children: notification.title }), jsxRuntime.jsx(Text, { size: "xs", color: "muted", lineClamp: 2, className: "mt-0.5", children: notification.message }), jsxRuntime.jsx(Text, { size: "xs", color: "muted", className: "mt-1", children: formatTimeAgo(notification.createdAt) })] }), !notification.isRead && onMarkAsRead && (jsxRuntime.jsx("button", { className: "flex-shrink-0 p-1 text-ink-400 hover:text-ink-600 hover:bg-paper-100 rounded transition-colors", onClick: (e) => handleMarkAsRead(e, notification.id), "aria-label": "Mark as read", title: "Mark as read", children: jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }))] }));
+    // Render detailed notification item
+    const renderDetailedItem = (notification) => (jsxRuntime.jsxs("div", { className: "flex gap-3", children: [jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntime.jsxs("div", { className: "flex items-start justify-between gap-2", children: [jsxRuntime.jsx(Text, { size: "sm", weight: notification.priority === 'high' ||
+                                    notification.priority === 'urgent' ||
+                                    !notification.isRead
+                                    ? 'semibold'
+                                    : 'medium', className: "flex-1", children: notification.title }), jsxRuntime.jsx(Text, { size: "xs", color: "muted", className: "flex-shrink-0 whitespace-nowrap", children: formatTimeAgo(notification.createdAt) })] }), jsxRuntime.jsx(Text, { size: "xs", color: "muted", lineClamp: 2, className: "mt-1", children: notification.message }), jsxRuntime.jsx("div", { className: "mt-2", children: jsxRuntime.jsx(Badge, { variant: typeToBadgeVariant[notification.type], size: "sm", children: notification.typeLabel || defaultTypeLabels[notification.type] }) })] }), !notification.isRead && onMarkAsRead && (jsxRuntime.jsx("button", { className: "flex-shrink-0 p-1 text-ink-400 hover:text-ink-600 hover:bg-paper-100 rounded transition-colors self-center", onClick: (e) => handleMarkAsRead(e, notification.id), "aria-label": "Mark as read", title: "Mark as read", children: jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" }) }))] }));
+    // Dropdown content
+    const dropdownContent = (jsxRuntime.jsxs("div", { className: `${dropdownWidths[size]} bg-white`, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-paper-200", children: [jsxRuntime.jsx(Text, { weight: "semibold", size: "sm", children: headerTitle }), unreadCount > 0 && onMarkAllRead && (jsxRuntime.jsxs("button", { className: "flex items-center gap-1.5 text-xs text-ink-600 hover:text-ink-800 transition-colors", onClick: handleMarkAllRead, children: [jsxRuntime.jsx(lucideReact.Check, { className: "h-3.5 w-3.5" }), "Mark all read"] }))] }), jsxRuntime.jsx("div", { className: "overflow-y-auto", style: { maxHeight }, role: "list", "aria-label": "Notifications", children: loading ? (
+                // Loading state
+                jsxRuntime.jsx("div", { className: "p-4", children: jsxRuntime.jsx(Stack, { spacing: "sm", children: [1, 2, 3].map((i) => (jsxRuntime.jsxs("div", { className: "flex gap-3", children: [variant === 'compact' && (jsxRuntime.jsx(Skeleton, { className: "h-4 w-4 rounded-full flex-shrink-0" })), jsxRuntime.jsxs("div", { className: "flex-1", children: [jsxRuntime.jsxs("div", { className: "flex justify-between", children: [jsxRuntime.jsx(Skeleton, { className: "h-4 w-3/4 mb-2" }), variant === 'detailed' && (jsxRuntime.jsx(Skeleton, { className: "h-3 w-12" }))] }), jsxRuntime.jsx(Skeleton, { className: "h-3 w-full mb-1" }), variant === 'compact' ? (jsxRuntime.jsx(Skeleton, { className: "h-3 w-1/4" })) : (jsxRuntime.jsx(Skeleton, { className: "h-5 w-16 mt-2" }))] })] }, i))) }) })) : notifications.length === 0 ? (
+                // Empty state
+                jsxRuntime.jsxs("div", { className: "py-8 px-4 text-center", children: [jsxRuntime.jsx(lucideReact.Bell, { className: "h-10 w-10 text-ink-300 mx-auto mb-3" }), jsxRuntime.jsx(Text, { color: "muted", size: "sm", children: emptyMessage })] })) : (
+                // Notification items
+                notifications.map((notification) => (jsxRuntime.jsx("div", { role: "listitem", className: `
+                px-4 py-3 border-b border-paper-100 last:border-b-0
+                hover:bg-paper-50 transition-colors cursor-pointer
+                ${!notification.isRead ? 'bg-primary-50/30' : ''}
+                ${notification.priority === 'urgent' ? 'border-l-2 border-l-error-500' : ''}
+              `, onClick: () => handleNotificationClick(notification), onKeyDown: (e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                            e.preventDefault();
+                            handleNotificationClick(notification);
+                        }
+                    }, tabIndex: 0, children: variant === 'compact'
+                        ? renderCompactItem(notification)
+                        : renderDetailedItem(notification) }, notification.id)))) }), onViewAll && notifications.length > 0 && (jsxRuntime.jsx("div", { className: "px-4 py-3 border-t border-paper-200", children: jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", fullWidth: true, onClick: handleViewAll, icon: jsxRuntime.jsx(lucideReact.ExternalLink, { className: "h-3.5 w-3.5" }), iconPosition: "right", children: viewAllText }) }))] }));
+    return (jsxRuntime.jsx(Popover, { trigger: triggerButton, placement: getPopoverPlacement(dropdownPosition), triggerMode: "click", showArrow: false, offset: 4, open: isOpen, onOpenChange: setIsOpen, closeOnClickOutside: true, closeOnEscape: true, disabled: disabled, className: "p-0 overflow-hidden", children: dropdownContent }));
+}
+
 /**
  * Get value from item by key path (supports nested keys like 'user.name')
  */
@@ -11092,44 +11293,52 @@ function getAugmentedNamespace(n) {
  * (A1, A1:C5, ...)
  */
 
-let Collection$3 = class Collection {
+var collection;
+var hasRequiredCollection;
+
+function requireCollection () {
+	if (hasRequiredCollection) return collection;
+	hasRequiredCollection = 1;
+	class Collection {
 
-    constructor(data, refs) {
-        if (data == null && refs == null) {
-            this._data = [];
-            this._refs = [];
-        } else {
-            if (data.length !== refs.length)
-                throw Error('Collection: data length should match references length.');
-            this._data = data;
-            this._refs = refs;
-        }
-    }
+	    constructor(data, refs) {
+	        if (data == null && refs == null) {
+	            this._data = [];
+	            this._refs = [];
+	        } else {
+	            if (data.length !== refs.length)
+	                throw Error('Collection: data length should match references length.');
+	            this._data = data;
+	            this._refs = refs;
+	        }
+	    }
 
-    get data() {
-        return this._data;
-    }
+	    get data() {
+	        return this._data;
+	    }
 
-    get refs() {
-        return this._refs;
-    }
+	    get refs() {
+	        return this._refs;
+	    }
 
-    get length() {
-        return this._data.length;
-    }
+	    get length() {
+	        return this._data.length;
+	    }
 
-    /**
-     * Add data and references to this collection.
-     * @param {{}} obj - data
-     * @param {{}} ref - reference
-     */
-    add(obj, ref) {
-        this._data.push(obj);
-        this._refs.push(ref);
-    }
-};
+	    /**
+	     * Add data and references to this collection.
+	     * @param {{}} obj - data
+	     * @param {{}} ref - reference
+	     */
+	    add(obj, ref) {
+	        this._data.push(obj);
+	        this._refs.push(ref);
+	    }
+	}
 
-var collection = Collection$3;
+	collection = Collection;
+	return collection;
+}
 
 var helpers;
 var hasRequiredHelpers;
@@ -11138,7 +11347,7 @@ function requireHelpers () {
 	if (hasRequiredHelpers) return helpers;
 	hasRequiredHelpers = 1;
 	const FormulaError = requireError();
-	const Collection = collection;
+	const Collection = requireCollection();
 
 	const Types = {
 	    NUMBER: 0,
@@ -20792,7 +21001,7 @@ var engineering = EngineeringFunctions;
 
 const FormulaError$b = requireError();
 const {FormulaHelpers: FormulaHelpers$8, Types: Types$6, WildCard, Address: Address$3} = requireHelpers();
-const Collection$2 = collection;
+const Collection$2 = requireCollection();
 const H$5 = FormulaHelpers$8;
 
 const ReferenceFunctions$1 = {
@@ -32420,7 +32629,7 @@ var parsing = {
 const FormulaError$4 = requireError();
 const {Address: Address$1} = requireHelpers();
 const {Prefix: Prefix$1, Postfix: Postfix$1, Infix: Infix$1, Operators: Operators$1} = operators;
-const Collection$1 = collection;
+const Collection$1 = requireCollection();
 const MAX_ROW$1 = 1048576, MAX_COLUMN$1 = 16384;
 const {NotAllInputParsedException} = require$$4;
 
@@ -33182,7 +33391,7 @@ var hooks$1 = {
 const FormulaError$2 = requireError();
 const {FormulaHelpers: FormulaHelpers$1, Types, Address} = requireHelpers();
 const {Prefix, Postfix, Infix, Operators} = operators;
-const Collection = collection;
+const Collection = requireCollection();
 const MAX_ROW = 1048576, MAX_COLUMN = 16384;
 
 let Utils$1 = class Utils {
@@ -57799,6 +58008,7 @@ exports.ModalFooter = ModalFooter;
 exports.MultiSelect = MultiSelect;
 exports.NotificationBanner = NotificationBanner;
 exports.NotificationBar = NotificationBar;
+exports.NotificationBell = NotificationBell;
 exports.NotificationIndicator = NotificationIndicator;
 exports.NumberInput = NumberInput;
 exports.Page = Page;