@papernote/ui 1.8.3 → 1.9.1

package/dist/index.js

@@ -10076,6 +10076,203 @@ 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
+ */
+function getPopoverPlacement(position) {
+    switch (position) {
+        case 'bottom-right':
+        case 'right':
+            return 'bottom-start';
+        case 'bottom-left':
+        case 'left':
+            return 'bottom-end';
+        case 'top-right':
+            return 'top-start';
+        case 'top-left':
+            return 'top-end';
+        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')
  */
@@ -57799,6 +57996,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;