@papernote/ui 1.9.2 → 1.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.9.2",
+  "version": "1.9.3",
   "type": "module",
   "description": "A modern React component library with a paper notebook aesthetic - minimal, professional, and expressive",
   "main": "dist/index.js",

package/src/components/NotificationBell.stories.tsx

@@ -4,6 +4,7 @@ import NotificationBell, { NotificationItem } from './NotificationBell';
 import Stack from './Stack';
 import Text from './Text';
 import Box from './Box';
+import { MessageCircle, Inbox, BellRing, Mail } from 'lucide-react';
 
 const meta = {
   title: 'Components/NotificationBell',
@@ -757,3 +758,73 @@ export const OutlinedInHeader: Story = {
     );
   },
 };
+
+export const CustomIcon: Story = {
+  render: () => (
+    <Stack direction="horizontal" spacing="xl" align="center">
+      <Stack align="center" spacing="sm">
+        <NotificationBell
+          notifications={sampleNotifications}
+          unreadCount={3}
+          icon={<MessageCircle className="h-5 w-5 text-ink-600" />}
+          onViewAll={() => {}}
+        />
+        <Text size="xs" color="muted">Message icon</Text>
+      </Stack>
+      <Stack align="center" spacing="sm">
+        <NotificationBell
+          notifications={sampleNotifications}
+          unreadCount={5}
+          icon={<Inbox className="h-5 w-5 text-ink-600" />}
+          onViewAll={() => {}}
+        />
+        <Text size="xs" color="muted">Inbox icon</Text>
+      </Stack>
+      <Stack align="center" spacing="sm">
+        <NotificationBell
+          notifications={sampleNotifications}
+          unreadCount={2}
+          icon={<BellRing className="h-5 w-5 text-ink-600" />}
+          onViewAll={() => {}}
+        />
+        <Text size="xs" color="muted">Bell ring icon</Text>
+      </Stack>
+      <Stack align="center" spacing="sm">
+        <NotificationBell
+          notifications={sampleNotifications}
+          unreadCount={8}
+          icon={<Mail className="h-5 w-5 text-ink-600" />}
+          onViewAll={() => {}}
+        />
+        <Text size="xs" color="muted">Mail icon</Text>
+      </Stack>
+    </Stack>
+  ),
+};
+
+export const CustomIconOutlined: Story = {
+  render: () => (
+    <Stack direction="horizontal" spacing="xl" align="center">
+      <Stack align="center" spacing="sm">
+        <NotificationBell
+          notifications={sampleNotifications}
+          unreadCount={3}
+          bellStyle="outlined"
+          icon={<MessageCircle className="h-5 w-5 text-ink-600" />}
+          onViewAll={() => {}}
+        />
+        <Text size="xs" color="muted">Outlined message</Text>
+      </Stack>
+      <Stack align="center" spacing="sm">
+        <NotificationBell
+          notifications={sampleNotifications}
+          unreadCount={5}
+          bellStyle="outlined"
+          icon={<Mail className="h-5 w-5 text-ink-600" />}
+          onViewAll={() => {}}
+        />
+        <Text size="xs" color="muted">Outlined mail</Text>
+      </Stack>
+    </Stack>
+  ),
+};

package/src/components/NotificationBell.tsx

@@ -89,6 +89,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;
 }
 
 /**
@@ -206,6 +211,7 @@ export default function NotificationBell({
   variant = 'compact',
   showUnreadInHeader = false,
   bellStyle = 'ghost',
+  icon: customIcon,
 }: NotificationBellProps) {
   const [isOpen, setIsOpen] = useState(false);
 
@@ -266,6 +272,9 @@ export default function NotificationBell({
     lg: 'p-4',
   };
 
+  // Default bell icon or custom icon
+  const bellIcon = customIcon || <Bell className={`${iconSizes[size]} text-ink-600`} />;
+
   // Trigger button
   const triggerButton = bellStyle === 'outlined' ? (
     <div className="relative inline-block">
@@ -286,7 +295,7 @@ export default function NotificationBell({
             : 'Notifications'
         }
       >
-        <Bell className={`${iconSizes[size]} text-ink-600`} />
+        {bellIcon}
       </button>
       {unreadCount > 0 && (
         <span
@@ -310,6 +319,7 @@ export default function NotificationBell({
       iconOnly
       size={size}
       disabled={disabled}
+      icon={bellIcon}
       badge={unreadCount > 0 ? unreadCount : undefined}
       badgeVariant="error"
       aria-label={
@@ -318,9 +328,7 @@ export default function NotificationBell({
           : 'Notifications'
       }
       className={className}
-    >
-      <Bell className={iconSizes[size]} />
-    </Button>
+    />  
   );
 
   // Header title with optional unread count