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

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, 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, 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 };