@papernote/ui 1.9.2 → 1.10.0

package/dist/styles.css

@@ -5579,6 +5579,21 @@ input:checked + .slider:before{
   --tw-ring-offset-width: 2px;
 }
 
+.focus-visible\:ring-2:focus-visible{
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus-visible\:ring-accent-500:focus-visible{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(139 136 120 / var(--tw-ring-opacity, 1));
+}
+
+.focus-visible\:ring-offset-1:focus-visible{
+  --tw-ring-offset-width: 1px;
+}
+
 .active\:scale-95:active{
   --tw-scale-x: .95;
   --tw-scale-y: .95;
@@ -5661,12 +5676,20 @@ input:checked + .slider:before{
   color: rgb(68 64 60 / var(--tw-text-opacity, 1));
 }
 
+.group:hover .group-hover\:opacity-100{
+  opacity: 1;
+}
+
 .group:hover .group-hover\:shadow-md{
   --tw-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.06);
   --tw-shadow-colored: 0 2px 4px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.group:focus-visible .group-focus-visible\:opacity-100{
+  opacity: 1;
+}
+
 @media (min-width: 640px){
 
   .sm\:mb-6{

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@papernote/ui",
-  "version": "1.9.2",
+  "version": "1.10.0",
   "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