@janovix/blocks 1.2.0-rc.14 → 1.2.0-rc.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +46 -12
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +127 -11
- package/dist/index.d.ts +127 -11
- package/dist/index.js +43 -14
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.d.cts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
3
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
|
-
import * as React from 'react';
|
|
4
4
|
import { VariantProps } from 'class-variance-authority';
|
|
5
5
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
6
6
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
@@ -12,6 +12,90 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
|
12
12
|
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
13
13
|
import { ClassValue } from 'clsx';
|
|
14
14
|
|
|
15
|
+
/**
|
|
16
|
+
* Blocks Context Interfaces
|
|
17
|
+
*
|
|
18
|
+
* These interfaces define the contract that consuming apps must implement
|
|
19
|
+
* to provide context to blocks components. Components will automatically
|
|
20
|
+
* consume these contexts when available, falling back to props otherwise.
|
|
21
|
+
*/
|
|
22
|
+
/**
|
|
23
|
+
* Notification type for blocks components.
|
|
24
|
+
* This is the format that blocks components expect.
|
|
25
|
+
*/
|
|
26
|
+
interface BlocksNotification {
|
|
27
|
+
id: string;
|
|
28
|
+
title: string;
|
|
29
|
+
message?: string;
|
|
30
|
+
type?: "info" | "success" | "warning" | "error";
|
|
31
|
+
timestamp: Date;
|
|
32
|
+
read?: boolean;
|
|
33
|
+
href?: string;
|
|
34
|
+
channelId?: string;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Notifications context value interface.
|
|
38
|
+
* Consuming apps implement this interface to provide notifications data
|
|
39
|
+
* and actions to blocks components.
|
|
40
|
+
*/
|
|
41
|
+
interface NotificationsContextValue {
|
|
42
|
+
/** List of notifications to display */
|
|
43
|
+
notifications: BlocksNotification[];
|
|
44
|
+
/** Count of unread notifications */
|
|
45
|
+
unreadCount: number;
|
|
46
|
+
/** Mark a single notification as read by ID */
|
|
47
|
+
markAsRead: (id: string) => void | Promise<void>;
|
|
48
|
+
/** Mark all notifications as read */
|
|
49
|
+
markAllAsRead: () => void | Promise<void>;
|
|
50
|
+
/** Dismiss/remove a notification (optional) */
|
|
51
|
+
dismiss?: (id: string) => void;
|
|
52
|
+
/** Clear all notifications (optional) */
|
|
53
|
+
clearAll?: () => void;
|
|
54
|
+
/** Handle notification click (optional) */
|
|
55
|
+
onNotificationClick?: (notification: BlocksNotification) => void;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* React context for notifications.
|
|
59
|
+
* Blocks components will consume this context when available.
|
|
60
|
+
*/
|
|
61
|
+
declare const NotificationsContext: React.Context<NotificationsContextValue | null>;
|
|
62
|
+
/**
|
|
63
|
+
* Hook to consume the notifications context.
|
|
64
|
+
* Returns null if no provider is present (components should fall back to props).
|
|
65
|
+
*/
|
|
66
|
+
declare function useNotificationsContext(): NotificationsContextValue | null;
|
|
67
|
+
/**
|
|
68
|
+
* Language definition for the language switcher.
|
|
69
|
+
*/
|
|
70
|
+
interface BlocksLanguage {
|
|
71
|
+
code: string;
|
|
72
|
+
name: string;
|
|
73
|
+
flag?: string;
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* Language context value interface.
|
|
77
|
+
* Consuming apps implement this interface to provide language state
|
|
78
|
+
* and actions to blocks components.
|
|
79
|
+
*/
|
|
80
|
+
interface LanguageContextValue {
|
|
81
|
+
/** Current language code (e.g., "en", "es") */
|
|
82
|
+
language: string;
|
|
83
|
+
/** Function to change the language */
|
|
84
|
+
setLanguage: (lang: string) => void;
|
|
85
|
+
/** Available languages (optional, components have defaults) */
|
|
86
|
+
languages?: BlocksLanguage[];
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* React context for language.
|
|
90
|
+
* Blocks components will consume this context when available.
|
|
91
|
+
*/
|
|
92
|
+
declare const LanguageContext: React.Context<LanguageContextValue | null>;
|
|
93
|
+
/**
|
|
94
|
+
* Hook to consume the language context.
|
|
95
|
+
* Returns null if no provider is present (components should fall back to props).
|
|
96
|
+
*/
|
|
97
|
+
declare function useLanguageContext(): LanguageContextValue | null;
|
|
98
|
+
|
|
15
99
|
type ThemeSwitcherLabels = {
|
|
16
100
|
/** Tooltip label for the theme switcher */
|
|
17
101
|
theme?: string;
|
|
@@ -51,13 +135,27 @@ type LanguageSwitcherLabels = {
|
|
|
51
135
|
/** Tooltip label for the language switcher */
|
|
52
136
|
language?: string;
|
|
53
137
|
};
|
|
138
|
+
/**
|
|
139
|
+
* Default languages when none are provided via props or context.
|
|
140
|
+
*/
|
|
141
|
+
declare const defaultLanguages: Language[];
|
|
54
142
|
type LanguageSwitcherProps = {
|
|
55
|
-
/**
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
143
|
+
/**
|
|
144
|
+
* Available languages. Optional if using LanguageContext.
|
|
145
|
+
* When context is available, context.languages is used; props override context.
|
|
146
|
+
* Falls back to defaultLanguages if neither provided.
|
|
147
|
+
*/
|
|
148
|
+
languages?: Language[];
|
|
149
|
+
/**
|
|
150
|
+
* Current selected language key. Optional if using LanguageContext.
|
|
151
|
+
* When context is available, context.language is used; props override context.
|
|
152
|
+
*/
|
|
153
|
+
currentLanguage?: string;
|
|
154
|
+
/**
|
|
155
|
+
* Callback when language changes. Optional if using LanguageContext.
|
|
156
|
+
* When context is available, context.setLanguage is used; props override context.
|
|
157
|
+
*/
|
|
158
|
+
onLanguageChange?: (languageKey: string) => void;
|
|
61
159
|
/** Labels for accessibility/tooltips */
|
|
62
160
|
labels?: LanguageSwitcherLabels;
|
|
63
161
|
className?: string;
|
|
@@ -74,7 +172,7 @@ type LanguageSwitcherProps = {
|
|
|
74
172
|
/** Dropdown side */
|
|
75
173
|
side?: "top" | "bottom" | "left" | "right";
|
|
76
174
|
};
|
|
77
|
-
declare function LanguageSwitcher({ languages, currentLanguage, onLanguageChange, labels, className, size, shape, variant, showIcon, align, side, }: LanguageSwitcherProps): react_jsx_runtime.JSX.Element;
|
|
175
|
+
declare function LanguageSwitcher({ languages: propLanguages, currentLanguage: propCurrentLanguage, onLanguageChange: propOnLanguageChange, labels, className, size, shape, variant, showIcon, align, side, }: LanguageSwitcherProps): react_jsx_runtime.JSX.Element;
|
|
78
176
|
|
|
79
177
|
interface AvatarEditorProps {
|
|
80
178
|
/** Current cropped image as data URL (controlled) */
|
|
@@ -169,21 +267,39 @@ type DotColor = "red" | "blue" | "green" | "amber" | "purple" | "primary";
|
|
|
169
267
|
type SoundType = "chime" | "bell" | "pop" | "ding" | "none";
|
|
170
268
|
type PulseStyle = "ring" | "glow" | "bounce" | "none";
|
|
171
269
|
interface NotificationsWidgetProps {
|
|
172
|
-
|
|
270
|
+
/**
|
|
271
|
+
* Notifications to display. Optional if using NotificationsContext.
|
|
272
|
+
* When context is available, context.notifications is used; props override context.
|
|
273
|
+
*/
|
|
274
|
+
notifications?: Notification[];
|
|
173
275
|
/**
|
|
174
276
|
* Called when a notification becomes visible (scroll into view).
|
|
175
277
|
* Should return a Promise - if rejected, the notification will be reverted to unread.
|
|
176
278
|
* Uses optimistic update: marks as read immediately, reverts on failure.
|
|
279
|
+
* Optional if using NotificationsContext.
|
|
177
280
|
*/
|
|
178
281
|
onMarkAsRead?: (id: string) => void | Promise<void>;
|
|
179
282
|
/**
|
|
180
283
|
* Called when "Mark all as read" button is clicked.
|
|
181
284
|
* Should return a Promise - if rejected, notifications will be reverted to unread.
|
|
182
285
|
* Uses optimistic update: marks all as read immediately, reverts on failure.
|
|
286
|
+
* Optional if using NotificationsContext.
|
|
183
287
|
*/
|
|
184
288
|
onMarkAllAsRead?: () => void | Promise<void>;
|
|
289
|
+
/**
|
|
290
|
+
* Called when a notification is dismissed.
|
|
291
|
+
* Optional if using NotificationsContext.
|
|
292
|
+
*/
|
|
185
293
|
onDismiss?: (id: string) => void;
|
|
294
|
+
/**
|
|
295
|
+
* Called when all notifications are cleared.
|
|
296
|
+
* Optional if using NotificationsContext.
|
|
297
|
+
*/
|
|
186
298
|
onClearAll?: () => void;
|
|
299
|
+
/**
|
|
300
|
+
* Called when a notification is clicked.
|
|
301
|
+
* Optional if using NotificationsContext.
|
|
302
|
+
*/
|
|
187
303
|
onNotificationClick?: (notification: Notification) => void;
|
|
188
304
|
size?: WidgetSize;
|
|
189
305
|
/**
|
|
@@ -202,7 +318,7 @@ interface NotificationsWidgetProps {
|
|
|
202
318
|
pulseStyle?: PulseStyle;
|
|
203
319
|
soundCooldown?: number;
|
|
204
320
|
}
|
|
205
|
-
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;
|
|
321
|
+
declare function NotificationsWidget({ notifications: propNotifications, onMarkAsRead: propOnMarkAsRead, onMarkAllAsRead: propOnMarkAllAsRead, onDismiss: propOnDismiss, onClearAll: propOnClearAll, onNotificationClick: propOnNotificationClick, size, maxVisible, playSound, soundUrl, className, emptyMessage, title, dotColor, showPulse, soundType, pulseStyle, soundCooldown, }: NotificationsWidgetProps): react_jsx_runtime.JSX.Element;
|
|
206
322
|
|
|
207
323
|
declare const buttonVariants: (props?: ({
|
|
208
324
|
variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
|
|
@@ -282,4 +398,4 @@ declare function ScrollBar({ className, orientation, ...props }: React.Component
|
|
|
282
398
|
|
|
283
399
|
declare function cn(...inputs: ClassValue[]): string;
|
|
284
400
|
|
|
285
|
-
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 };
|
|
401
|
+
export { AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, type BlocksLanguage, type BlocksNotification, 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, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, type Notification, type NotificationType, NotificationsContext, type NotificationsContextValue, NotificationsWidget, type NotificationsWidgetProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, Slider, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cn, defaultLanguages, toggleVariants, useLanguageContext, useNotificationsContext };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
1
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
3
|
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
3
|
-
import * as React from 'react';
|
|
4
4
|
import { VariantProps } from 'class-variance-authority';
|
|
5
5
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
6
6
|
import * as TooltipPrimitive from '@radix-ui/react-tooltip';
|
|
@@ -12,6 +12,90 @@ import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
|
12
12
|
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
13
13
|
import { ClassValue } from 'clsx';
|
|
14
14
|
|
|
15
|
+
/**
|
|
16
|
+
* Blocks Context Interfaces
|
|
17
|
+
*
|
|
18
|
+
* These interfaces define the contract that consuming apps must implement
|
|
19
|
+
* to provide context to blocks components. Components will automatically
|
|
20
|
+
* consume these contexts when available, falling back to props otherwise.
|
|
21
|
+
*/
|
|
22
|
+
/**
|
|
23
|
+
* Notification type for blocks components.
|
|
24
|
+
* This is the format that blocks components expect.
|
|
25
|
+
*/
|
|
26
|
+
interface BlocksNotification {
|
|
27
|
+
id: string;
|
|
28
|
+
title: string;
|
|
29
|
+
message?: string;
|
|
30
|
+
type?: "info" | "success" | "warning" | "error";
|
|
31
|
+
timestamp: Date;
|
|
32
|
+
read?: boolean;
|
|
33
|
+
href?: string;
|
|
34
|
+
channelId?: string;
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* Notifications context value interface.
|
|
38
|
+
* Consuming apps implement this interface to provide notifications data
|
|
39
|
+
* and actions to blocks components.
|
|
40
|
+
*/
|
|
41
|
+
interface NotificationsContextValue {
|
|
42
|
+
/** List of notifications to display */
|
|
43
|
+
notifications: BlocksNotification[];
|
|
44
|
+
/** Count of unread notifications */
|
|
45
|
+
unreadCount: number;
|
|
46
|
+
/** Mark a single notification as read by ID */
|
|
47
|
+
markAsRead: (id: string) => void | Promise<void>;
|
|
48
|
+
/** Mark all notifications as read */
|
|
49
|
+
markAllAsRead: () => void | Promise<void>;
|
|
50
|
+
/** Dismiss/remove a notification (optional) */
|
|
51
|
+
dismiss?: (id: string) => void;
|
|
52
|
+
/** Clear all notifications (optional) */
|
|
53
|
+
clearAll?: () => void;
|
|
54
|
+
/** Handle notification click (optional) */
|
|
55
|
+
onNotificationClick?: (notification: BlocksNotification) => void;
|
|
56
|
+
}
|
|
57
|
+
/**
|
|
58
|
+
* React context for notifications.
|
|
59
|
+
* Blocks components will consume this context when available.
|
|
60
|
+
*/
|
|
61
|
+
declare const NotificationsContext: React.Context<NotificationsContextValue | null>;
|
|
62
|
+
/**
|
|
63
|
+
* Hook to consume the notifications context.
|
|
64
|
+
* Returns null if no provider is present (components should fall back to props).
|
|
65
|
+
*/
|
|
66
|
+
declare function useNotificationsContext(): NotificationsContextValue | null;
|
|
67
|
+
/**
|
|
68
|
+
* Language definition for the language switcher.
|
|
69
|
+
*/
|
|
70
|
+
interface BlocksLanguage {
|
|
71
|
+
code: string;
|
|
72
|
+
name: string;
|
|
73
|
+
flag?: string;
|
|
74
|
+
}
|
|
75
|
+
/**
|
|
76
|
+
* Language context value interface.
|
|
77
|
+
* Consuming apps implement this interface to provide language state
|
|
78
|
+
* and actions to blocks components.
|
|
79
|
+
*/
|
|
80
|
+
interface LanguageContextValue {
|
|
81
|
+
/** Current language code (e.g., "en", "es") */
|
|
82
|
+
language: string;
|
|
83
|
+
/** Function to change the language */
|
|
84
|
+
setLanguage: (lang: string) => void;
|
|
85
|
+
/** Available languages (optional, components have defaults) */
|
|
86
|
+
languages?: BlocksLanguage[];
|
|
87
|
+
}
|
|
88
|
+
/**
|
|
89
|
+
* React context for language.
|
|
90
|
+
* Blocks components will consume this context when available.
|
|
91
|
+
*/
|
|
92
|
+
declare const LanguageContext: React.Context<LanguageContextValue | null>;
|
|
93
|
+
/**
|
|
94
|
+
* Hook to consume the language context.
|
|
95
|
+
* Returns null if no provider is present (components should fall back to props).
|
|
96
|
+
*/
|
|
97
|
+
declare function useLanguageContext(): LanguageContextValue | null;
|
|
98
|
+
|
|
15
99
|
type ThemeSwitcherLabels = {
|
|
16
100
|
/** Tooltip label for the theme switcher */
|
|
17
101
|
theme?: string;
|
|
@@ -51,13 +135,27 @@ type LanguageSwitcherLabels = {
|
|
|
51
135
|
/** Tooltip label for the language switcher */
|
|
52
136
|
language?: string;
|
|
53
137
|
};
|
|
138
|
+
/**
|
|
139
|
+
* Default languages when none are provided via props or context.
|
|
140
|
+
*/
|
|
141
|
+
declare const defaultLanguages: Language[];
|
|
54
142
|
type LanguageSwitcherProps = {
|
|
55
|
-
/**
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
143
|
+
/**
|
|
144
|
+
* Available languages. Optional if using LanguageContext.
|
|
145
|
+
* When context is available, context.languages is used; props override context.
|
|
146
|
+
* Falls back to defaultLanguages if neither provided.
|
|
147
|
+
*/
|
|
148
|
+
languages?: Language[];
|
|
149
|
+
/**
|
|
150
|
+
* Current selected language key. Optional if using LanguageContext.
|
|
151
|
+
* When context is available, context.language is used; props override context.
|
|
152
|
+
*/
|
|
153
|
+
currentLanguage?: string;
|
|
154
|
+
/**
|
|
155
|
+
* Callback when language changes. Optional if using LanguageContext.
|
|
156
|
+
* When context is available, context.setLanguage is used; props override context.
|
|
157
|
+
*/
|
|
158
|
+
onLanguageChange?: (languageKey: string) => void;
|
|
61
159
|
/** Labels for accessibility/tooltips */
|
|
62
160
|
labels?: LanguageSwitcherLabels;
|
|
63
161
|
className?: string;
|
|
@@ -74,7 +172,7 @@ type LanguageSwitcherProps = {
|
|
|
74
172
|
/** Dropdown side */
|
|
75
173
|
side?: "top" | "bottom" | "left" | "right";
|
|
76
174
|
};
|
|
77
|
-
declare function LanguageSwitcher({ languages, currentLanguage, onLanguageChange, labels, className, size, shape, variant, showIcon, align, side, }: LanguageSwitcherProps): react_jsx_runtime.JSX.Element;
|
|
175
|
+
declare function LanguageSwitcher({ languages: propLanguages, currentLanguage: propCurrentLanguage, onLanguageChange: propOnLanguageChange, labels, className, size, shape, variant, showIcon, align, side, }: LanguageSwitcherProps): react_jsx_runtime.JSX.Element;
|
|
78
176
|
|
|
79
177
|
interface AvatarEditorProps {
|
|
80
178
|
/** Current cropped image as data URL (controlled) */
|
|
@@ -169,21 +267,39 @@ type DotColor = "red" | "blue" | "green" | "amber" | "purple" | "primary";
|
|
|
169
267
|
type SoundType = "chime" | "bell" | "pop" | "ding" | "none";
|
|
170
268
|
type PulseStyle = "ring" | "glow" | "bounce" | "none";
|
|
171
269
|
interface NotificationsWidgetProps {
|
|
172
|
-
|
|
270
|
+
/**
|
|
271
|
+
* Notifications to display. Optional if using NotificationsContext.
|
|
272
|
+
* When context is available, context.notifications is used; props override context.
|
|
273
|
+
*/
|
|
274
|
+
notifications?: Notification[];
|
|
173
275
|
/**
|
|
174
276
|
* Called when a notification becomes visible (scroll into view).
|
|
175
277
|
* Should return a Promise - if rejected, the notification will be reverted to unread.
|
|
176
278
|
* Uses optimistic update: marks as read immediately, reverts on failure.
|
|
279
|
+
* Optional if using NotificationsContext.
|
|
177
280
|
*/
|
|
178
281
|
onMarkAsRead?: (id: string) => void | Promise<void>;
|
|
179
282
|
/**
|
|
180
283
|
* Called when "Mark all as read" button is clicked.
|
|
181
284
|
* Should return a Promise - if rejected, notifications will be reverted to unread.
|
|
182
285
|
* Uses optimistic update: marks all as read immediately, reverts on failure.
|
|
286
|
+
* Optional if using NotificationsContext.
|
|
183
287
|
*/
|
|
184
288
|
onMarkAllAsRead?: () => void | Promise<void>;
|
|
289
|
+
/**
|
|
290
|
+
* Called when a notification is dismissed.
|
|
291
|
+
* Optional if using NotificationsContext.
|
|
292
|
+
*/
|
|
185
293
|
onDismiss?: (id: string) => void;
|
|
294
|
+
/**
|
|
295
|
+
* Called when all notifications are cleared.
|
|
296
|
+
* Optional if using NotificationsContext.
|
|
297
|
+
*/
|
|
186
298
|
onClearAll?: () => void;
|
|
299
|
+
/**
|
|
300
|
+
* Called when a notification is clicked.
|
|
301
|
+
* Optional if using NotificationsContext.
|
|
302
|
+
*/
|
|
187
303
|
onNotificationClick?: (notification: Notification) => void;
|
|
188
304
|
size?: WidgetSize;
|
|
189
305
|
/**
|
|
@@ -202,7 +318,7 @@ interface NotificationsWidgetProps {
|
|
|
202
318
|
pulseStyle?: PulseStyle;
|
|
203
319
|
soundCooldown?: number;
|
|
204
320
|
}
|
|
205
|
-
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;
|
|
321
|
+
declare function NotificationsWidget({ notifications: propNotifications, onMarkAsRead: propOnMarkAsRead, onMarkAllAsRead: propOnMarkAllAsRead, onDismiss: propOnDismiss, onClearAll: propOnClearAll, onNotificationClick: propOnNotificationClick, size, maxVisible, playSound, soundUrl, className, emptyMessage, title, dotColor, showPulse, soundType, pulseStyle, soundCooldown, }: NotificationsWidgetProps): react_jsx_runtime.JSX.Element;
|
|
206
322
|
|
|
207
323
|
declare const buttonVariants: (props?: ({
|
|
208
324
|
variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
|
|
@@ -282,4 +398,4 @@ declare function ScrollBar({ className, orientation, ...props }: React.Component
|
|
|
282
398
|
|
|
283
399
|
declare function cn(...inputs: ClassValue[]): string;
|
|
284
400
|
|
|
285
|
-
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 };
|
|
401
|
+
export { AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, type BlocksLanguage, type BlocksNotification, 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, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, type Notification, type NotificationType, NotificationsContext, type NotificationsContextValue, NotificationsWidget, type NotificationsWidgetProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, Slider, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cn, defaultLanguages, toggleVariants, useLanguageContext, useNotificationsContext };
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
+
import * as React2 from 'react';
|
|
2
|
+
import { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react';
|
|
1
3
|
import { useTheme } from 'next-themes';
|
|
2
4
|
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';
|
|
3
5
|
import { AnimatePresence, motion } from 'motion/react';
|
|
4
|
-
import * as React2 from 'react';
|
|
5
|
-
import { useState, useCallback, useEffect, useRef } from 'react';
|
|
6
6
|
import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
|
|
7
7
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
8
8
|
import { Slot } from '@radix-ui/react-slot';
|
|
@@ -14,6 +14,15 @@ import { Drawer as Drawer$1 } from 'vaul';
|
|
|
14
14
|
import * as PopoverPrimitive from '@radix-ui/react-popover';
|
|
15
15
|
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
16
16
|
|
|
17
|
+
var NotificationsContext = createContext(null);
|
|
18
|
+
function useNotificationsContext() {
|
|
19
|
+
return useContext(NotificationsContext);
|
|
20
|
+
}
|
|
21
|
+
var LanguageContext = createContext(null);
|
|
22
|
+
function useLanguageContext() {
|
|
23
|
+
return useContext(LanguageContext);
|
|
24
|
+
}
|
|
25
|
+
|
|
17
26
|
// node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
|
|
18
27
|
function r(e) {
|
|
19
28
|
var t, f, n = "";
|
|
@@ -3541,6 +3550,10 @@ function ThemeSwitcher({
|
|
|
3541
3550
|
}
|
|
3542
3551
|
);
|
|
3543
3552
|
}
|
|
3553
|
+
var defaultLanguages = [
|
|
3554
|
+
{ key: "en", label: "EN", nativeName: "English" },
|
|
3555
|
+
{ key: "es", label: "ES", nativeName: "Espa\xF1ol" }
|
|
3556
|
+
];
|
|
3544
3557
|
var sizeClasses2 = {
|
|
3545
3558
|
sm: {
|
|
3546
3559
|
container: "h-7 p-0.5 text-xs",
|
|
@@ -3570,9 +3583,9 @@ var shapeClasses2 = {
|
|
|
3570
3583
|
pill: "rounded-full"
|
|
3571
3584
|
};
|
|
3572
3585
|
function LanguageSwitcher({
|
|
3573
|
-
languages,
|
|
3574
|
-
currentLanguage,
|
|
3575
|
-
onLanguageChange,
|
|
3586
|
+
languages: propLanguages,
|
|
3587
|
+
currentLanguage: propCurrentLanguage,
|
|
3588
|
+
onLanguageChange: propOnLanguageChange,
|
|
3576
3589
|
labels = {},
|
|
3577
3590
|
className,
|
|
3578
3591
|
size = "sm",
|
|
@@ -3582,6 +3595,15 @@ function LanguageSwitcher({
|
|
|
3582
3595
|
align = "center",
|
|
3583
3596
|
side = "top"
|
|
3584
3597
|
}) {
|
|
3598
|
+
const context = useLanguageContext();
|
|
3599
|
+
const contextLanguages = context?.languages?.map((lang) => ({
|
|
3600
|
+
key: lang.code,
|
|
3601
|
+
label: lang.code.toUpperCase(),
|
|
3602
|
+
nativeName: lang.name
|
|
3603
|
+
}));
|
|
3604
|
+
const languages = propLanguages ?? contextLanguages ?? defaultLanguages;
|
|
3605
|
+
const currentLanguage = propCurrentLanguage ?? context?.language ?? "en";
|
|
3606
|
+
const onLanguageChange = propOnLanguageChange ?? context?.setLanguage;
|
|
3585
3607
|
const sizes = sizeClasses2[size];
|
|
3586
3608
|
const shapeClass = shapeClasses2[shape];
|
|
3587
3609
|
const defaultLabels2 = {
|
|
@@ -3611,7 +3633,7 @@ function LanguageSwitcher({
|
|
|
3611
3633
|
children: languages.map(({ key, nativeName }) => /* @__PURE__ */ jsx(
|
|
3612
3634
|
DropdownMenuItem,
|
|
3613
3635
|
{
|
|
3614
|
-
onClick: () => onLanguageChange(key),
|
|
3636
|
+
onClick: () => onLanguageChange?.(key),
|
|
3615
3637
|
className: cn(
|
|
3616
3638
|
"justify-center text-xs font-semibold cursor-pointer px-3",
|
|
3617
3639
|
currentLanguage === key && "bg-accent"
|
|
@@ -3647,7 +3669,7 @@ function LanguageSwitcher({
|
|
|
3647
3669
|
{
|
|
3648
3670
|
"aria-label": label,
|
|
3649
3671
|
className: cn("relative font-semibold", sizes.button, shapeClass),
|
|
3650
|
-
onClick: () => onLanguageChange(key),
|
|
3672
|
+
onClick: () => onLanguageChange?.(key),
|
|
3651
3673
|
type: "button",
|
|
3652
3674
|
children: [
|
|
3653
3675
|
/* @__PURE__ */ jsx(AnimatePresence, { children: isActive && /* @__PURE__ */ jsx(
|
|
@@ -4953,12 +4975,12 @@ function playNotificationSound(soundType = "chime", soundUrl) {
|
|
|
4953
4975
|
}
|
|
4954
4976
|
}
|
|
4955
4977
|
function NotificationsWidget({
|
|
4956
|
-
notifications,
|
|
4957
|
-
onMarkAsRead,
|
|
4958
|
-
onMarkAllAsRead,
|
|
4959
|
-
onDismiss,
|
|
4960
|
-
onClearAll,
|
|
4961
|
-
onNotificationClick,
|
|
4978
|
+
notifications: propNotifications,
|
|
4979
|
+
onMarkAsRead: propOnMarkAsRead,
|
|
4980
|
+
onMarkAllAsRead: propOnMarkAllAsRead,
|
|
4981
|
+
onDismiss: propOnDismiss,
|
|
4982
|
+
onClearAll: propOnClearAll,
|
|
4983
|
+
onNotificationClick: propOnNotificationClick,
|
|
4962
4984
|
size = "md",
|
|
4963
4985
|
maxVisible = 5,
|
|
4964
4986
|
playSound = true,
|
|
@@ -4972,6 +4994,13 @@ function NotificationsWidget({
|
|
|
4972
4994
|
pulseStyle = "ring",
|
|
4973
4995
|
soundCooldown = 2e3
|
|
4974
4996
|
}) {
|
|
4997
|
+
const context = useNotificationsContext();
|
|
4998
|
+
const notifications = propNotifications ?? context?.notifications ?? [];
|
|
4999
|
+
const onMarkAsRead = propOnMarkAsRead ?? context?.markAsRead;
|
|
5000
|
+
const onMarkAllAsRead = propOnMarkAllAsRead ?? context?.markAllAsRead;
|
|
5001
|
+
const onDismiss = propOnDismiss ?? context?.dismiss;
|
|
5002
|
+
const onClearAll = propOnClearAll ?? context?.clearAll;
|
|
5003
|
+
const onNotificationClick = propOnNotificationClick ?? context?.onNotificationClick;
|
|
4975
5004
|
const [isOpen, setIsOpen] = React2.useState(false);
|
|
4976
5005
|
const [prevCount, setPrevCount] = React2.useState(0);
|
|
4977
5006
|
const lastSoundPlayedRef = React2.useRef(0);
|
|
@@ -5376,6 +5405,6 @@ function ScrollBar({
|
|
|
5376
5405
|
);
|
|
5377
5406
|
}
|
|
5378
5407
|
|
|
5379
|
-
export { AvatarEditor, AvatarEditorDialog, 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, LanguageSwitcher, NotificationsWidget, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, Slider, ThemeSwitcher, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cn, toggleVariants };
|
|
5408
|
+
export { AvatarEditor, AvatarEditorDialog, 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, LanguageContext, LanguageSwitcher, NotificationsContext, NotificationsWidget, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, ScrollArea, ScrollBar, Slider, ThemeSwitcher, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, buttonVariants, cn, defaultLanguages, toggleVariants, useLanguageContext, useNotificationsContext };
|
|
5380
5409
|
//# sourceMappingURL=index.js.map
|
|
5381
5410
|
//# sourceMappingURL=index.js.map
|