@papernote/ui 1.9.1 → 1.9.3

package/dist/components/NotificationBell.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 /**
  * Represents a single notification item
  */
@@ -71,6 +72,11 @@ export interface NotificationBellProps {
      * - 'outlined': Visible border/container with subtle background
      */
     bellStyle?: NotificationBellStyle;
+    /**
+     * Custom icon to use instead of the default bell
+     * Use this to provide your own notification icon
+     */
+    icon?: React.ReactNode;
 }
 /**
  * NotificationBell - A bell icon with badge and dropdown for displaying notifications
@@ -100,5 +106,5 @@ export interface NotificationBellProps {
  * />
  * ```
  */
-export default function NotificationBell({ notifications, unreadCount: providedUnreadCount, onMarkAsRead, onMarkAllRead, onNotificationClick, onViewAll, loading, dropdownPosition, maxHeight, size, emptyMessage, viewAllText, disabled, className, variant, showUnreadInHeader, bellStyle, }: NotificationBellProps): import("react/jsx-runtime").JSX.Element;
+export default function NotificationBell({ notifications, unreadCount: providedUnreadCount, onMarkAsRead, onMarkAllRead, onNotificationClick, onViewAll, loading, dropdownPosition, maxHeight, size, emptyMessage, viewAllText, disabled, className, variant, showUnreadInHeader, bellStyle, icon: customIcon, }: NotificationBellProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=NotificationBell.d.ts.map

package/dist/components/NotificationBell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationBell.d.ts","sourceRoot":"","sources":["../../src/components/NotificationBell.tsx"],"names":[],"mappings":"AASA;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC/C,wCAAwC;IACxC,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC/C,wCAAwC;IACxC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,6CAA6C;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,gCAAgC;AAChC,MAAM,MAAM,wBAAwB,GAChC,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AAEZ,gCAAgC;AAChC,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,uCAAuC;IACvC,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/D,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,wBAAwB,CAAC;IAC5C,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;OAIG;IACH,SAAS,CAAC,EAAE,qBAAqB,CAAC;CACnC;AAmED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,aAAa,EACb,WAAW,EAAE,mBAAmB,EAChC,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,SAAS,EACT,OAAe,EACf,gBAAiC,EACjC,SAAmB,EACnB,IAAW,EACX,YAAiC,EACjC,WAAsC,EACtC,QAAgB,EAChB,SAAc,EACd,OAAmB,EACnB,kBAA0B,EAC1B,SAAmB,GACpB,EAAE,qBAAqB,2CA+VvB"}
+{"version":3,"file":"NotificationBell.d.ts","sourceRoot":"","sources":["../../src/components/NotificationBell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAS9D;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,6CAA6C;IAC7C,EAAE,EAAE,MAAM,CAAC;IACX,gCAAgC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,uCAAuC;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IAC/C,wCAAwC;IACxC,QAAQ,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAC;IAC/C,wCAAwC;IACxC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,6CAA6C;IAC7C,MAAM,EAAE,OAAO,CAAC;IAChB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0EAA0E;IAC1E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,gCAAgC;AAChC,MAAM,MAAM,wBAAwB,GAChC,aAAa,GACb,cAAc,GACd,UAAU,GACV,WAAW,GACX,MAAM,GACN,OAAO,CAAC;AAEZ,gCAAgC;AAChC,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD;;GAEG;AACH,MAAM,WAAW,qBAAqB;IACpC,uCAAuC;IACvC,aAAa,EAAE,gBAAgB,EAAE,CAAC;IAClC,sGAAsG;IACtG,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,CAAC,YAAY,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/D,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,yBAAyB;IACzB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,wBAAwB,CAAC;IAC5C,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,0BAA0B;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IACjC,qEAAqE;IACrE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;;OAIG;IACH,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC;;;OAGG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAuED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,aAAa,EACb,WAAW,EAAE,mBAAmB,EAChC,YAAY,EACZ,aAAa,EACb,mBAAmB,EACnB,SAAS,EACT,OAAe,EACf,gBAAiC,EACjC,SAAmB,EACnB,IAAW,EACX,YAAiC,EACjC,WAAsC,EACtC,QAAgB,EAChB,SAAc,EACd,OAAmB,EACnB,kBAA0B,EAC1B,SAAmB,EACnB,IAAI,EAAE,UAAU,GACjB,EAAE,qBAAqB,2CAiWvB"}

package/dist/index.d.ts

@@ -4191,6 +4191,11 @@ interface NotificationBellProps {
      * - 'outlined': Visible border/container with subtle background
      */
     bellStyle?: NotificationBellStyle;
+    /**
+     * Custom icon to use instead of the default bell
+     * Use this to provide your own notification icon
+     */
+    icon?: React__default.ReactNode;
 }
 /**
  * NotificationBell - A bell icon with badge and dropdown for displaying notifications
@@ -4220,7 +4225,7 @@ interface NotificationBellProps {
  * />
  * ```
  */
-declare function NotificationBell({ notifications, unreadCount: providedUnreadCount, onMarkAsRead, onMarkAllRead, onNotificationClick, onViewAll, loading, dropdownPosition, maxHeight, size, emptyMessage, viewAllText, disabled, className, variant, showUnreadInHeader, bellStyle, }: NotificationBellProps): react_jsx_runtime.JSX.Element;
+declare function NotificationBell({ notifications, unreadCount: providedUnreadCount, onMarkAsRead, onMarkAllRead, onNotificationClick, onViewAll, loading, dropdownPosition, maxHeight, size, emptyMessage, viewAllText, disabled, className, variant, showUnreadInHeader, bellStyle, icon: customIcon, }: NotificationBellProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Configuration for how data should display in card view

package/dist/index.esm.js

@@ -10103,19 +10103,23 @@ const defaultTypeLabels = {
 };
 /**
  * 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';
+            return 'bottom-start'; // Below, extends to the right
         case 'bottom-left':
         case 'left':
-            return 'bottom-end';
+            return 'bottom-end'; // Below, extends to the left
         case 'top-right':
-            return 'top-start';
+            return 'top-start'; // Above, extends to the right
         case 'top-left':
-            return 'top-end';
+            return 'top-end'; // Above, extends to the left
         default:
             return 'bottom-start';
     }
@@ -10148,7 +10152,7 @@ function getPopoverPlacement(position) {
  * />
  * ```
  */
-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', }) {
+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', icon: customIcon, }) {
     const [isOpen, setIsOpen] = useState(false);
     // Calculate unread count if not provided
     const unreadCount = useMemo(() => {
@@ -10193,6 +10197,8 @@ function NotificationBell({ notifications, unreadCount: providedUnreadCount, onM
         md: 'p-3',
         lg: 'p-4',
     };
+    // Default bell icon or custom icon
+    const bellIcon = customIcon || jsx(Bell, { className: `${iconSizes[size]} text-ink-600` });
     // Trigger button
     const triggerButton = bellStyle === 'outlined' ? (jsxs("div", { className: "relative inline-block", children: [jsx("button", { className: `
           ${outlinedSizeClasses[size]}
@@ -10204,16 +10210,16 @@ function NotificationBell({ notifications, unreadCount: providedUnreadCount, onM
           ${className}
         `, disabled: disabled, "aria-label": unreadCount > 0
                     ? `Notifications - ${unreadCount} unread`
-                    : 'Notifications', children: jsx(Bell, { className: `${iconSizes[size]} text-ink-600` }) }), unreadCount > 0 && (jsx("span", { className: `
+                    : 'Notifications', children: bellIcon }), unreadCount > 0 && (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 }))] })) : (jsx(Button, { variant: "ghost", iconOnly: true, size: size, disabled: disabled, badge: unreadCount > 0 ? unreadCount : undefined, badgeVariant: "error", "aria-label": unreadCount > 0
+          `, "aria-label": `${unreadCount > 99 ? '99+' : unreadCount} notifications`, children: unreadCount > 99 ? '99+' : unreadCount }))] })) : (jsx(Button, { variant: "ghost", iconOnly: true, size: size, disabled: disabled, icon: bellIcon, badge: unreadCount > 0 ? unreadCount : undefined, badgeVariant: "error", "aria-label": unreadCount > 0
             ? `Notifications - ${unreadCount} unread`
-            : 'Notifications', className: className, children: jsx(Bell, { className: iconSizes[size] }) }));
+            : 'Notifications', className: className }));
     // Header title with optional unread count
     const headerTitle = showUnreadInHeader && unreadCount > 0
         ? `Notifications (${unreadCount} unread)`