@janovix/blocks 1.0.0-rc.3 → 1.0.0-rc.4

package/dist/index.d.cts

@@ -8,6 +8,8 @@ import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Drawer as Drawer$1 } from 'vaul';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { ClassValue } from 'clsx';
 
 type ThemeSwitcherLabels = {
@@ -132,6 +134,61 @@ interface AvatarEditorDialogProps {
 }
 declare function AvatarEditorDialog({ value, onChange, onSave, displaySize, editorSize, outputSize, placeholder: _placeholder, editLabel, dialogTitle, acceptText, cancelText, successMessage, errorMessage, className, }: AvatarEditorDialogProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * NotificationsWidget - A compact notification bell for navigation bars
+ *
+ * @description
+ * Displays a bell icon with unread count badge, plays sound on new notifications,
+ * and shows a popover with recent notifications that can be marked as read or dismissed.
+ *
+ * @example
+ * ```tsx
+ * <NotificationsWidget
+ *   notifications={notifications}
+ *   onMarkAsRead={(id) => markAsRead(id)}
+ *   onMarkAllAsRead={() => markAllAsRead()}
+ *   onDismiss={(id) => dismiss(id)}
+ *   onClearAll={() => clearAll()}
+ *   playSound={true}
+ * />
+ * ```
+ */
+type NotificationType = "info" | "success" | "warning" | "error";
+interface Notification {
+    id: string;
+    title: string;
+    message?: string;
+    type?: NotificationType;
+    timestamp: Date;
+    read?: boolean;
+    href?: string;
+}
+type WidgetSize = "sm" | "md" | "lg";
+type DotColor = "red" | "blue" | "green" | "amber" | "purple" | "primary";
+type SoundType = "chime" | "bell" | "pop" | "ding" | "none";
+type PulseStyle = "ring" | "glow" | "bounce" | "none";
+interface NotificationsWidgetProps {
+    notifications: Notification[];
+    onMarkAsRead?: (id: string) => void;
+    onMarkAllAsRead?: () => void;
+    onDismiss?: (id: string) => void;
+    onClearAll?: () => void;
+    onNotificationClick?: (notification: Notification) => void;
+    size?: WidgetSize;
+    maxVisible?: number;
+    playSound?: boolean;
+    soundUrl?: string;
+    className?: string;
+    emptyMessage?: string;
+    title?: string;
+    dotColor?: DotColor;
+    showPulse?: boolean;
+    soundType?: SoundType;
+    pulseStyle?: PulseStyle;
+    soundCooldown?: number;
+}
+declare function NotificationsWidget({ notifications, onMarkAsRead, onMarkAllAsRead, onDismiss, onClearAll, onNotificationClick, size, maxVisible, playSound: _playSound, soundUrl, className, emptyMessage, title, dotColor, showPulse, soundType, pulseStyle, soundCooldown, }: NotificationsWidgetProps): react_jsx_runtime.JSX.Element;
+
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
@@ -200,6 +257,14 @@ declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div
 declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof Drawer$1.Title>): react_jsx_runtime.JSX.Element;
 declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof Drawer$1.Description>): react_jsx_runtime.JSX.Element;
 
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;
+
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): react_jsx_runtime.JSX.Element;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type Language, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, Slider, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cn, toggleVariants };
+export { AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type Language, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, type Notification, type NotificationType, NotificationsWidget, type NotificationsWidgetProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, Slider, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cn, toggleVariants };

package/dist/index.d.ts

@@ -8,6 +8,8 @@ import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Drawer as Drawer$1 } from 'vaul';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { ClassValue } from 'clsx';
 
 type ThemeSwitcherLabels = {
@@ -132,6 +134,61 @@ interface AvatarEditorDialogProps {
 }
 declare function AvatarEditorDialog({ value, onChange, onSave, displaySize, editorSize, outputSize, placeholder: _placeholder, editLabel, dialogTitle, acceptText, cancelText, successMessage, errorMessage, className, }: AvatarEditorDialogProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * NotificationsWidget - A compact notification bell for navigation bars
+ *
+ * @description
+ * Displays a bell icon with unread count badge, plays sound on new notifications,
+ * and shows a popover with recent notifications that can be marked as read or dismissed.
+ *
+ * @example
+ * ```tsx
+ * <NotificationsWidget
+ *   notifications={notifications}
+ *   onMarkAsRead={(id) => markAsRead(id)}
+ *   onMarkAllAsRead={() => markAllAsRead()}
+ *   onDismiss={(id) => dismiss(id)}
+ *   onClearAll={() => clearAll()}
+ *   playSound={true}
+ * />
+ * ```
+ */
+type NotificationType = "info" | "success" | "warning" | "error";
+interface Notification {
+    id: string;
+    title: string;
+    message?: string;
+    type?: NotificationType;
+    timestamp: Date;
+    read?: boolean;
+    href?: string;
+}
+type WidgetSize = "sm" | "md" | "lg";
+type DotColor = "red" | "blue" | "green" | "amber" | "purple" | "primary";
+type SoundType = "chime" | "bell" | "pop" | "ding" | "none";
+type PulseStyle = "ring" | "glow" | "bounce" | "none";
+interface NotificationsWidgetProps {
+    notifications: Notification[];
+    onMarkAsRead?: (id: string) => void;
+    onMarkAllAsRead?: () => void;
+    onDismiss?: (id: string) => void;
+    onClearAll?: () => void;
+    onNotificationClick?: (notification: Notification) => void;
+    size?: WidgetSize;
+    maxVisible?: number;
+    playSound?: boolean;
+    soundUrl?: string;
+    className?: string;
+    emptyMessage?: string;
+    title?: string;
+    dotColor?: DotColor;
+    showPulse?: boolean;
+    soundType?: SoundType;
+    pulseStyle?: PulseStyle;
+    soundCooldown?: number;
+}
+declare function NotificationsWidget({ notifications, onMarkAsRead, onMarkAllAsRead, onDismiss, onClearAll, onNotificationClick, size, maxVisible, playSound: _playSound, soundUrl, className, emptyMessage, title, dotColor, showPulse, soundType, pulseStyle, soundCooldown, }: NotificationsWidgetProps): react_jsx_runtime.JSX.Element;
+
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
@@ -200,6 +257,14 @@ declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div
 declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof Drawer$1.Title>): react_jsx_runtime.JSX.Element;
 declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof Drawer$1.Description>): react_jsx_runtime.JSX.Element;
 
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;
+
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): react_jsx_runtime.JSX.Element;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-export { AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type Language, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, Slider, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cn, toggleVariants };
+export { AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type Language, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, type Notification, type NotificationType, NotificationsWidget, type NotificationsWidgetProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, Slider, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cn, toggleVariants };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { useTheme } from 'next-themes';
-import { CheckIcon, CircleIcon, ChevronRightIcon, Monitor, Sun, Moon, Languages, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, X, XIcon, User, Pencil, Check, Loader2 } from 'lucide-react';
+import { CheckIcon, CircleIcon, ChevronRightIcon, Monitor, Sun, Moon, Languages, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, X, XIcon, User, Pencil, Check, Loader2, Bell, CheckCheck, XCircle, AlertTriangle, CheckCircle, Info, Trash2 } from 'lucide-react';
 import { AnimatePresence, motion } from 'motion/react';
 import * as React32 from 'react';
 import React32__default, { useLayoutEffect, useState, useCallback, useEffect, useRef } from 'react';
@@ -10,6 +10,8 @@ import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Drawer as Drawer$1 } from 'vaul';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
@@ -10590,7 +10592,451 @@ function AvatarEditorDialog({
     ] }) })
   ] });
 }
+function Popover({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    PopoverPrimitive.Content,
+    {
+      "data-slot": "popover-content",
+      align,
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function PopoverAnchor({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+function ScrollArea({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    ScrollAreaPrimitive.Root,
+    {
+      "data-slot": "scroll-area",
+      className: cn("relative overflow-hidden", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          ScrollAreaPrimitive.Viewport,
+          {
+            "data-slot": "scroll-area-viewport",
+            className: "h-full w-full rounded-[inherit]",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollBar, {}),
+        /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, {})
+      ]
+    }
+  );
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ScrollAreaPrimitive.ScrollAreaScrollbar,
+    {
+      "data-slot": "scroll-bar",
+      orientation,
+      className: cn(
+        "flex touch-none select-none transition-colors",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        ScrollAreaPrimitive.ScrollAreaThumb,
+        {
+          "data-slot": "scroll-thumb",
+          className: "relative flex-1 rounded-full bg-border"
+        }
+      )
+    }
+  );
+}
+var sizeConfig = {
+  sm: {
+    button: "h-8 w-8",
+    icon: "w-4 h-4",
+    badge: "min-w-[16px] h-4 text-[10px] -top-1 -right-1",
+    dot: "w-2.5 h-2.5 -top-0.5 -right-0.5"
+  },
+  md: {
+    button: "h-9 w-9",
+    icon: "w-5 h-5",
+    badge: "min-w-[18px] h-[18px] text-[11px] -top-1 -right-1",
+    dot: "w-3 h-3 -top-0.5 -right-0.5"
+  },
+  lg: {
+    button: "h-10 w-10",
+    icon: "w-6 h-6",
+    badge: "min-w-[20px] h-5 text-xs -top-1.5 -right-1.5",
+    dot: "w-3.5 h-3.5 -top-0.5 -right-0.5"
+  }
+};
+var typeConfig = {
+  info: {
+    icon: Info,
+    color: "text-blue-500",
+    bg: "bg-blue-500/10"
+  },
+  success: {
+    icon: CheckCircle,
+    color: "text-green-500",
+    bg: "bg-green-500/10"
+  },
+  warning: {
+    icon: AlertTriangle,
+    color: "text-amber-500",
+    bg: "bg-amber-500/10"
+  },
+  error: {
+    icon: XCircle,
+    color: "text-red-500",
+    bg: "bg-red-500/10"
+  }
+};
+var dotColorConfig = {
+  red: "bg-red-500",
+  blue: "bg-blue-500",
+  green: "bg-green-500",
+  amber: "bg-amber-500",
+  purple: "bg-purple-500",
+  primary: "bg-primary"
+};
+var soundConfig = {
+  chime: {
+    frequencies: [880, 1100],
+    durations: [0.1, 0.2],
+    gain: 0.3
+  },
+  bell: {
+    frequencies: [523, 659, 784],
+    durations: [0.15, 0.15, 0.2],
+    gain: 0.25
+  },
+  pop: {
+    frequencies: [400, 600],
+    durations: [0.05, 0.08],
+    gain: 0.4
+  },
+  ding: {
+    frequencies: [1200],
+    durations: [0.15],
+    gain: 0.2
+  }
+};
+var pulseVariants = {
+  ring: {
+    animate: { scale: [1, 1.8], opacity: [0.6, 0] },
+    transition: {
+      duration: 1.2,
+      repeat: Number.POSITIVE_INFINITY,
+      ease: "easeOut"
+    }
+  },
+  glow: {
+    animate: { scale: [1, 1.3, 1], opacity: [0.8, 0.4, 0.8] },
+    transition: {
+      duration: 1.5,
+      repeat: Number.POSITIVE_INFINITY,
+      ease: "easeInOut"
+    }
+  },
+  bounce: {
+    animate: { scale: [1, 1.2, 1], y: [0, -2, 0] },
+    transition: {
+      duration: 0.6,
+      repeat: Number.POSITIVE_INFINITY,
+      ease: "easeInOut"
+    }
+  }
+};
+function formatTimeAgo(date) {
+  const now = /* @__PURE__ */ new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffSecs = Math.floor(diffMs / 1e3);
+  const diffMins = Math.floor(diffSecs / 60);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  if (diffSecs < 60) return "just now";
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}
+function playNotificationSound(soundType = "chime", soundUrl) {
+  if (typeof window === "undefined" || soundType === "none") return;
+  if (soundUrl) {
+    const audio = new Audio(soundUrl);
+    audio.volume = 0.5;
+    audio.play().catch(() => {
+    });
+    return;
+  }
+  const config = soundConfig[soundType];
+  if (!config) return;
+  try {
+    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+    let currentTime = audioContext.currentTime;
+    config.frequencies.forEach((freq, i) => {
+      const oscillator = audioContext.createOscillator();
+      const gainNode = audioContext.createGain();
+      oscillator.connect(gainNode);
+      gainNode.connect(audioContext.destination);
+      oscillator.frequency.setValueAtTime(freq, currentTime);
+      gainNode.gain.setValueAtTime(config.gain, currentTime);
+      gainNode.gain.exponentialRampToValueAtTime(
+        0.01,
+        currentTime + config.durations[i]
+      );
+      oscillator.start(currentTime);
+      oscillator.stop(currentTime + config.durations[i]);
+      currentTime += config.durations[i] * 0.7;
+    });
+  } catch {
+  }
+}
+function NotificationsWidget({
+  notifications,
+  onMarkAsRead,
+  onMarkAllAsRead,
+  onDismiss,
+  onClearAll,
+  onNotificationClick,
+  size: size4 = "md",
+  maxVisible = 5,
+  playSound: _playSound = true,
+  soundUrl,
+  className,
+  emptyMessage = "No notifications",
+  title = "Notifications",
+  dotColor = "red",
+  showPulse = true,
+  soundType = "chime",
+  pulseStyle = "ring",
+  soundCooldown = 2e3
+}) {
+  const [isOpen, setIsOpen] = React32.useState(false);
+  const [prevCount, setPrevCount] = React32.useState(0);
+  const lastSoundPlayedRef = React32.useRef(0);
+  const styles = sizeConfig[size4];
+  const dotBgColor = dotColorConfig[dotColor];
+  const unreadCount = notifications.filter((n) => !n.read).length;
+  const visibleNotifications = notifications.slice(0, maxVisible);
+  const hasMore = notifications.length > maxVisible;
+  React32.useEffect(() => {
+    if (soundType !== "none" && unreadCount > prevCount && prevCount > 0) {
+      const now = Date.now();
+      if (now - lastSoundPlayedRef.current >= soundCooldown) {
+        playNotificationSound(soundType, soundUrl);
+        lastSoundPlayedRef.current = now;
+      }
+    }
+    setPrevCount(unreadCount);
+  }, [unreadCount, prevCount, soundType, soundUrl, soundCooldown]);
+  React32.useEffect(() => {
+    if (isOpen && onMarkAsRead) {
+      visibleNotifications.forEach((notification) => {
+        if (!notification.read) {
+          onMarkAsRead(notification.id);
+        }
+      });
+    }
+  }, [isOpen, onMarkAsRead, visibleNotifications]);
+  const handleNotificationClick = (notification) => {
+    if (notification.href) {
+      onNotificationClick?.(notification);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      motion.button,
+      {
+        className: cn(
+          "relative inline-flex items-center justify-center rounded-lg",
+          "bg-muted/50 border border-border/50 hover:bg-muted/70 transition-colors",
+          styles.button,
+          className
+        ),
+        whileTap: { scale: 0.95 },
+        "aria-label": `Notifications${unreadCount > 0 ? ` (${unreadCount} unread)` : ""}`,
+        children: [
+          /* @__PURE__ */ jsx(Bell, { className: cn(styles.icon, "text-muted-foreground") }),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: unreadCount > 0 && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { scale: 0, opacity: 0 },
+              animate: { scale: 1, opacity: 1 },
+              exit: { scale: 0, opacity: 0 },
+              className: cn(
+                "absolute flex items-center justify-center rounded-full",
+                dotBgColor,
+                "text-white font-medium",
+                unreadCount > 9 ? styles.badge : styles.dot,
+                unreadCount > 9 && "px-1"
+              ),
+              children: unreadCount > 9 ? /* @__PURE__ */ jsx("span", { children: unreadCount > 99 ? "99+" : unreadCount }) : null
+            }
+          ) }),
+          /* @__PURE__ */ jsx(AnimatePresence, { children: unreadCount > 0 && showPulse && pulseStyle !== "none" && /* @__PURE__ */ jsx(
+            motion.div,
+            {
+              initial: { scale: 1, opacity: 0.5 },
+              animate: pulseVariants[pulseStyle].animate,
+              transition: pulseVariants[pulseStyle].transition,
+              className: cn("absolute rounded-full", dotBgColor, styles.dot)
+            }
+          ) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        side: "bottom",
+        align: "end",
+        className: "w-80 p-0 overflow-hidden",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-border", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("h4", { className: "font-semibold text-sm", children: title }),
+              unreadCount > 0 && /* @__PURE__ */ jsxs("span", { className: "px-2 py-0.5 text-xs font-medium rounded-full bg-primary/10 text-primary", children: [
+                unreadCount,
+                " new"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "h-7 px-2 text-xs",
+                onClick: () => onMarkAllAsRead(),
+                children: [
+                  /* @__PURE__ */ jsx(CheckCheck, { className: "w-3.5 h-3.5 mr-1" }),
+                  "Mark all read"
+                ]
+              }
+            ) })
+          ] }),
+          notifications.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center py-8 px-4 text-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-3", children: /* @__PURE__ */ jsx(Bell, { className: "w-6 h-6 text-muted-foreground" }) }),
+            /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: emptyMessage })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(ScrollArea, { className: "h-[320px]", children: /* @__PURE__ */ jsx("div", { className: "divide-y divide-border", children: visibleNotifications.map((notification) => {
+              const config = typeConfig[notification.type || "info"];
+              const Icon = config.icon;
+              const hasLink = !!notification.href;
+              return /* @__PURE__ */ jsxs(
+                motion.div,
+                {
+                  initial: { opacity: 0, y: -10 },
+                  animate: { opacity: 1, y: 0 },
+                  className: cn(
+                    "relative flex gap-3 px-4 py-3 transition-colors group",
+                    hasLink && "cursor-pointer hover:bg-muted/50",
+                    !hasLink && "cursor-default",
+                    !notification.read && "bg-primary/5"
+                  ),
+                  onClick: () => handleNotificationClick(notification),
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center",
+                          config.bg
+                        ),
+                        children: /* @__PURE__ */ jsx(Icon, { className: cn("w-4 h-4", config.color) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ jsx("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: cn(
+                            "text-sm line-clamp-1",
+                            !notification.read ? "font-semibold" : "font-medium",
+                            hasLink && "group-hover:underline"
+                          ),
+                          children: notification.title
+                        }
+                      ) }),
+                      notification.message && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground line-clamp-2 mt-0.5", children: notification.message }),
+                      /* @__PURE__ */ jsx("p", { className: "text-[10px] text-muted-foreground/70 mt-1", children: formatTimeAgo(notification.timestamp) })
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 flex items-start gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: onDismiss && /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        variant: "ghost",
+                        size: "icon",
+                        className: "h-6 w-6 text-muted-foreground hover:text-destructive",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onDismiss(notification.id);
+                        },
+                        children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3" })
+                      }
+                    ) })
+                  ]
+                },
+                notification.id
+              );
+            }) }) }),
+            (hasMore || onClearAll) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-2 border-t border-border bg-muted/30", children: [
+              hasMore && /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                "+",
+                notifications.length - maxVisible,
+                " more"
+              ] }),
+              onClearAll && notifications.length > 0 && /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  className: "h-7 px-2 text-xs text-muted-foreground hover:text-destructive",
+                  onClick: () => onClearAll(),
+                  children: [
+                    /* @__PURE__ */ jsx(Trash2, { className: "w-3 h-3 mr-1" }),
+                    "Clear all"
+                  ]
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
 
-export { AvatarEditor, AvatarEditorDialog, Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu2 as DropdownMenu, DropdownMenuCheckboxItem2 as DropdownMenuCheckboxItem, DropdownMenuContent2 as DropdownMenuContent, DropdownMenuGroup2 as DropdownMenuGroup, DropdownMenuItem2 as DropdownMenuItem, DropdownMenuLabel2 as DropdownMenuLabel, DropdownMenuPortal2 as DropdownMenuPortal, DropdownMenuRadioGroup2 as DropdownMenuRadioGroup, DropdownMenuRadioItem2 as DropdownMenuRadioItem, DropdownMenuSeparator2 as DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub2 as DropdownMenuSub, DropdownMenuSubContent2 as DropdownMenuSubContent, DropdownMenuSubTrigger2 as DropdownMenuSubTrigger, DropdownMenuTrigger2 as DropdownMenuTrigger, LanguageSwitcher, Slider, ThemeSwitcher, Toggle, Tooltip2 as Tooltip, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, buttonVariants, cn, toggleVariants };
+export { AvatarEditor, AvatarEditorDialog, Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu2 as DropdownMenu, DropdownMenuCheckboxItem2 as DropdownMenuCheckboxItem, DropdownMenuContent2 as DropdownMenuContent, DropdownMenuGroup2 as DropdownMenuGroup, DropdownMenuItem2 as DropdownMenuItem, DropdownMenuLabel2 as DropdownMenuLabel, DropdownMenuPortal2 as DropdownMenuPortal, DropdownMenuRadioGroup2 as DropdownMenuRadioGroup, DropdownMenuRadioItem2 as DropdownMenuRadioItem, DropdownMenuSeparator2 as DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub2 as DropdownMenuSub, DropdownMenuSubContent2 as DropdownMenuSubContent, DropdownMenuSubTrigger2 as DropdownMenuSubTrigger, DropdownMenuTrigger2 as DropdownMenuTrigger, LanguageSwitcher, NotificationsWidget, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, Slider, ThemeSwitcher, Toggle, Tooltip2 as Tooltip, TooltipContent2 as TooltipContent, TooltipProvider2 as TooltipProvider, TooltipTrigger2 as TooltipTrigger, buttonVariants, cn, toggleVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map