@pushwoosh/dumb-components 1.1.78 → 1.1.80

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.
Files changed (21) hide show
  1. package/EnhancedInput/EnhancedInput.d.ts +1 -0
  2. package/EnhancedInput/EnhancedInput.js +5 -3
  3. package/EnhancedInput/styles.d.ts +10 -0
  4. package/EnhancedInput/styles.js +20 -5
  5. package/EnhancedInput/types.d.ts +1 -0
  6. package/NotificationInbox/NotificationBar.d.ts +3 -0
  7. package/NotificationInbox/NotificationBar.js +46 -0
  8. package/NotificationInbox/NotificationBell.d.ts +3 -0
  9. package/NotificationInbox/NotificationBell.js +42 -0
  10. package/NotificationInbox/NotificationInbox.d.ts +3 -0
  11. package/NotificationInbox/NotificationInbox.js +170 -0
  12. package/NotificationInbox/assets/EmptyNotifications.svg +1 -0
  13. package/NotificationInbox/index.d.ts +4 -0
  14. package/NotificationInbox/index.js +3 -0
  15. package/NotificationInbox/styles.d.ts +439 -0
  16. package/NotificationInbox/styles.js +264 -0
  17. package/NotificationInbox/types.d.ts +47 -0
  18. package/NotificationInbox/types.js +1 -0
  19. package/index.d.ts +1 -0
  20. package/index.js +2 -1
  21. package/package.json +1 -1
package/EnhancedInput/EnhancedInput.d.ts CHANGED
@@ -2,4 +2,5 @@ import React from 'react';
2
2
  export declare const EnhancedInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & import("../native/Input").NativeInputProps & {
3
3
  $icon?: React.ReactNode;
4
4
  $onClear?: () => void;
5
+ hint?: string;
5
6
  } & React.RefAttributes<HTMLInputElement>>;
package/EnhancedInput/EnhancedInput.js CHANGED
@@ -1,20 +1,22 @@
1
1
  import React, { forwardRef } from 'react';
2
2
  import { CloseIcon } from '@pushwoosh/kit-icons';
3
- import { Wrapper } from './styles';
3
+ import { Wrapper, RightSlot } from './styles';
4
4
  import { NativeInput } from '../native';
5
5
  export const EnhancedInput = forwardRef(({
6
6
  $icon,
7
7
  $onClear,
8
+ hint,
8
9
  ...props
9
10
  }, ref) => {
10
11
  return React.createElement(Wrapper, {
11
12
  "$hasIcon": !!$icon,
12
13
  "$hasClear": !!$onClear,
13
- "$hasError": !!props.$isErrored
14
+ "$hasError": !!props.$isErrored,
15
+ "$hasHint": !!hint
14
16
  }, $icon, React.createElement(NativeInput, {
15
17
  ...props,
16
18
  ref: ref
17
- }), $onClear && React.createElement(CloseIcon, {
19
+ }), hint && React.createElement(RightSlot, null, hint), $onClear && React.createElement(CloseIcon, {
18
20
  size: "small",
19
21
  onClick: $onClear
20
22
  }));
package/EnhancedInput/styles.d.ts CHANGED
@@ -1,5 +1,15 @@
1
+ import { Color } from '@pushwoosh/kit-constants';
2
+ export declare const RightSlot: import("styled-components").StyledComponent<"span", any, {
3
+ $color?: string | undefined;
4
+ $uppercase?: boolean | undefined;
5
+ $ellipsis?: boolean | undefined;
6
+ $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
7
+ } & {
8
+ $color: Color;
9
+ }, "$color">;
1
10
  export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {
2
11
  $hasIcon?: boolean;
3
12
  $hasClear?: boolean;
4
13
  $hasError?: boolean;
14
+ $hasHint?: boolean;
5
15
  }, never>;
package/EnhancedInput/styles.js CHANGED
@@ -1,13 +1,28 @@
1
1
  import styled from 'styled-components';
2
2
  import { Color } from '@pushwoosh/kit-constants';
3
+ import { Text } from '@pushwoosh/kit-typography';
3
4
  import { NativeInput } from '../native';
5
+ export const RightSlot = styled(Text).attrs({
6
+ $color: Color.PHANTOM
7
+ }).withConfig({
8
+ displayName: "RightSlot",
9
+ componentId: "sc-5f7rba-0"
10
+ })(["pointer-events:none;"]);
4
11
  export const Wrapper = styled.div.withConfig({
5
12
  displayName: "Wrapper",
6
- componentId: "sc-5f7rba-0"
7
- })(["display:inline-grid;position:relative;& > :not(", "){position:absolute;top:50%;transform:translateY(-50%);}& > :not(", "):first-child{left:6px;color:", ";}&:focus-within > :not(", "):first-child{color:", ";}& > :not(", "):last-child{right:12px;cursor:pointer;color:", ";transition:transform 0.3s ease,color 0.3s ease;&:hover{transform:translateY(-50%) scale(1.2);color:", ";}}& > ", "{width:100%;", " ", "}"], NativeInput, NativeInput, ({
13
+ componentId: "sc-5f7rba-1"
14
+ })(["display:inline-grid;position:relative;& > :not(", "){position:absolute;top:50%;transform:translateY(-50%);}& > :not(", "):not(", "):first-child{left:6px;color:", ";}&:focus-within > :not(", "):not(", "):first-child{color:", ";}& > :not(", "):not(", "):last-child{right:12px;cursor:pointer;color:", ";transition:transform 0.3s ease,color 0.3s ease;&:hover{transform:translateY(-50%) scale(1.2);color:", ";}}& > ", "{right:", ";}& > ", "{width:100%;", " padding-right:", ";}"], NativeInput, NativeInput, RightSlot, ({
8
15
  $hasError
9
- }) => $hasError ? Color.DANGER : Color.PHANTOM, NativeInput, Color.BRIGHT, NativeInput, Color.PHANTOM, Color.MAIN, NativeInput, ({
16
+ }) => $hasError ? Color.DANGER : Color.PHANTOM, NativeInput, RightSlot, Color.BRIGHT, NativeInput, RightSlot, Color.PHANTOM, Color.MAIN, RightSlot, ({
17
+ $hasClear
18
+ }) => $hasClear ? '36px' : '12px', NativeInput, ({
10
19
  $hasIcon
11
20
  }) => $hasIcon && 'padding-left: 36px;', ({
12
- $hasClear
13
- }) => $hasClear && `padding-right: 34px;`);
21
+ $hasClear,
22
+ $hasHint: $hasRightSlot
23
+ }) => {
24
+ if ($hasClear && $hasRightSlot) return '125px';
25
+ if ($hasClear) return '34px';
26
+ if ($hasRightSlot) return '100px';
27
+ return '12px';
28
+ });
package/EnhancedInput/types.d.ts CHANGED
@@ -3,5 +3,6 @@ import type { NativeInputProps } from '../native/Input';
3
3
  export type EnhancedInputProps = InputHTMLAttributes<HTMLInputElement> & NativeInputProps & {
4
4
  $icon?: ReactNode;
5
5
  $onClear?: () => void;
6
+ hint?: string;
6
7
  };
7
8
  export type SearchInputProps = Omit<EnhancedInputProps, '$icon'>;
package/NotificationInbox/NotificationBar.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { type ReactElement } from 'react';
2
+ import type { NotificationBarProps } from './types';
3
+ export declare function NotificationBar({ type, isOpened, read, count, onClick, className, }: NotificationBarProps): ReactElement;
package/NotificationInbox/NotificationBar.js ADDED
@@ -0,0 +1,46 @@
1
+ import React from 'react';
2
+ import { Color } from '@pushwoosh/kit-constants';
3
+ import { NotificationIcon } from '@pushwoosh/kit-icons';
4
+ import { NotificationBarButton, NotificationBarIcon, NotificationBarBadge, NotificationBarText, NotificationBarBadgeText } from './styles';
5
+ function getIconView(isOpened, filled) {
6
+ if (isOpened) return 'lined';
7
+ if (filled) return 'filled';
8
+ return 'lined';
9
+ }
10
+ export function NotificationBar({
11
+ type = 'notifications',
12
+ isOpened = false,
13
+ read = false,
14
+ count = 0,
15
+ onClick,
16
+ className
17
+ }) {
18
+ const showBadge = count > 0 && type !== 'no-notifications';
19
+ const shouldUseFilledIcon = !isOpened && (!read && type !== 'no-notifications' || read);
20
+ const getIconColor = () => {
21
+ if (isOpened) return Color.CLEAR;
22
+ if (read) {
23
+ if (type === 'important') return Color.DANGER;
24
+ if (type === 'warning') return Color.WARNING;
25
+ if (type === 'notifications') return Color.BRIGHT;
26
+ return Color.MAIN;
27
+ }
28
+ if (type === 'no-notifications') return Color.MAIN;
29
+ return Color.CLEAR;
30
+ };
31
+ return React.createElement(NotificationBarButton, {
32
+ className: className,
33
+ "$type": type,
34
+ "$isOpened": isOpened,
35
+ "$read": read,
36
+ onClick: onClick,
37
+ type: "button"
38
+ }, React.createElement(NotificationBarIcon, null, React.createElement(NotificationIcon, {
39
+ type: "enabled",
40
+ size: "small",
41
+ view: getIconView(isOpened, shouldUseFilledIcon),
42
+ color: getIconColor()
43
+ })), React.createElement(NotificationBarText, null, "Notification center"), showBadge && React.createElement(NotificationBarBadge, null, React.createElement(NotificationBarBadgeText, {
44
+ "$variant": "h5"
45
+ }, count)));
46
+ }
package/NotificationInbox/NotificationBell.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { type ReactElement } from 'react';
2
+ import type { NotificationBellProps } from './types';
3
+ export declare function NotificationBell({ count, severity, isOpened, onClick, className, }: NotificationBellProps): ReactElement;
package/NotificationInbox/NotificationBell.js ADDED
@@ -0,0 +1,42 @@
1
+ import React from 'react';
2
+ import { Color } from '@pushwoosh/kit-constants';
3
+ import { NotificationIcon } from '@pushwoosh/kit-icons';
4
+ import { NotificationBellButton, NotificationBellIcon, NotificationBellBadge, NotificationBellBadgeDot } from './styles';
5
+ export function NotificationBell({
6
+ count = 0,
7
+ severity,
8
+ isOpened = false,
9
+ onClick,
10
+ className
11
+ }) {
12
+ const hasNotifications = count > 0;
13
+ const showBadge = hasNotifications || severity;
14
+ const getBadgeColor = () => {
15
+ if (isOpened) return Color.CLEAR;
16
+ if (severity === 'critical') return Color.DANGER;
17
+ if (severity === 'warning') return Color.WARNING;
18
+ return Color.PRIMARY;
19
+ };
20
+ const getIconColor = () => {
21
+ if (isOpened) return Color.CLEAR;
22
+ return Color.MAIN;
23
+ };
24
+ const getIconView = () => {
25
+ return isOpened ? 'filled' : 'lined';
26
+ };
27
+ return React.createElement(NotificationBellButton, {
28
+ className: className,
29
+ "$isOpened": isOpened,
30
+ onClick: onClick,
31
+ type: "button",
32
+ "aria-label": hasNotifications ? 'You have unread notifications' : 'Notifications'
33
+ }, React.createElement(NotificationBellIcon, null, React.createElement(NotificationIcon, {
34
+ size: "small",
35
+ view: getIconView(),
36
+ type: "enabled",
37
+ color: getIconColor()
38
+ })), showBadge && React.createElement(NotificationBellBadge, null, React.createElement(NotificationBellBadgeDot, {
39
+ "$color": getBadgeColor(),
40
+ "$isDot": true
41
+ })));
42
+ }
package/NotificationInbox/NotificationInbox.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { type ReactElement } from 'react';
2
+ import type { NotificationInboxProps } from './types';
3
+ export declare function NotificationInbox({ notifications, isLoading, hasMore, onLoadMore, onNotificationClick, onMarkAsRead, emptyStateTitle, emptyStateDescription, emptyStateIcon, className, }: NotificationInboxProps): ReactElement;
package/NotificationInbox/NotificationInbox.js ADDED
@@ -0,0 +1,170 @@
1
+ import React, { useEffect, useRef, useCallback } from 'react';
2
+ import { Color } from '@pushwoosh/kit-constants';
3
+ import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
4
+ import { Text } from '@pushwoosh/kit-typography';
5
+ import { Badge } from '../Badge';
6
+ import { Spinner } from '../Spinner';
7
+ import emptyNotificationsIcon from './assets/EmptyNotifications.svg?url';
8
+ import { NotificationInboxContainer, NotificationInboxHeader, NotificationInboxTitle, NotificationInboxList, NotificationItem, NotificationIndicator, NotificationHeader, NotificationActionLink, NotificationInboxEmptyIcon, NotificationInboxLoadMore, NotificationInboxEmptyText } from './styles';
9
+ const severityToBadgeColorMap = {
10
+ critical: 'red',
11
+ warning: 'orange',
12
+ info: 'gray'
13
+ };
14
+ function formatTimestamp(timestamp) {
15
+ const date = typeof timestamp === 'string' ? new Date(timestamp) : timestamp;
16
+ const day = date.getDate();
17
+ const month = date.toLocaleString('en-US', {
18
+ month: 'short'
19
+ });
20
+ const hours = date.getHours();
21
+ const minutes = date.getMinutes().toString().padStart(2, '0');
22
+ return `${day} ${month}, ${hours}:${minutes}`;
23
+ }
24
+ export function NotificationInbox({
25
+ notifications,
26
+ isLoading = false,
27
+ hasMore = false,
28
+ onLoadMore,
29
+ onNotificationClick,
30
+ onMarkAsRead,
31
+ emptyStateTitle = 'No notifications yet',
32
+ emptyStateDescription = 'You\'ll see updates and alerts here once something requires your attention.',
33
+ emptyStateIcon,
34
+ className
35
+ }) {
36
+ const listRef = useRef(null);
37
+ const observerRef = useRef(null);
38
+ const loadMoreRef = useRef(null);
39
+ const unreadCount = notifications.filter(n => !n.isRead).length;
40
+ const handleNotificationClick = useCallback(notification => {
41
+ if (!notification.isRead && onMarkAsRead) {
42
+ onMarkAsRead(notification.id);
43
+ }
44
+ onNotificationClick === null || onNotificationClick === void 0 || onNotificationClick(notification);
45
+ }, [onMarkAsRead, onNotificationClick]);
46
+ useEffect(() => {
47
+ if (!hasMore || !onLoadMore || isLoading) {
48
+ return;
49
+ }
50
+ const loadMoreElement = loadMoreRef.current;
51
+ if (!loadMoreElement) {
52
+ return;
53
+ }
54
+ observerRef.current = new IntersectionObserver(entries => {
55
+ const [entry] = entries;
56
+ if (entry !== null && entry !== void 0 && entry.isIntersecting && hasMore && !isLoading) {
57
+ onLoadMore();
58
+ }
59
+ }, {
60
+ root: listRef.current,
61
+ rootMargin: '100px',
62
+ threshold: 0.1
63
+ });
64
+ observerRef.current.observe(loadMoreElement);
65
+ return () => {
66
+ if (observerRef.current) {
67
+ observerRef.current.disconnect();
68
+ }
69
+ };
70
+ }, [hasMore, onLoadMore, isLoading]);
71
+ if (notifications.length === 0 && !isLoading) {
72
+ return React.createElement(NotificationInboxContainer, {
73
+ className: className
74
+ }, React.createElement(NotificationInboxHeader, null, React.createElement(NotificationInboxTitle, {
75
+ "$variant": "h4",
76
+ "$color": Color.MAIN
77
+ }, "Notifications")), React.createElement(Vertical, {
78
+ "$alignItems": "center",
79
+ "$gap": 24,
80
+ "$padding": "24px"
81
+ }, emptyStateIcon ? React.createElement(NotificationInboxEmptyIcon, null, emptyStateIcon) : React.createElement(NotificationInboxEmptyIcon, null, React.createElement("img", {
82
+ src: emptyNotificationsIcon,
83
+ alt: "No notifications",
84
+ style: {
85
+ width: '120px',
86
+ height: '120px'
87
+ }
88
+ })), React.createElement(Vertical, {
89
+ "$alignItems": "center",
90
+ "$gap": 6,
91
+ "$padding": "24px",
92
+ "$justifyContent": "center",
93
+ "$justifyItems": "center",
94
+ "$alignContent": "center"
95
+ }, React.createElement(NotificationInboxEmptyText, {
96
+ "$variant": "h4",
97
+ "$color": Color.LOCKED
98
+ }, emptyStateTitle), React.createElement(NotificationInboxEmptyText, {
99
+ "$variant": "footnote",
100
+ "$color": Color.LOCKED
101
+ }, emptyStateDescription))));
102
+ }
103
+ return React.createElement(NotificationInboxContainer, {
104
+ className: className
105
+ }, React.createElement(NotificationInboxHeader, null, React.createElement(NotificationInboxTitle, {
106
+ "$variant": "h4",
107
+ "$color": Color.MAIN
108
+ }, React.createElement("span", null, "Notifications"), unreadCount > 0 && React.createElement(React.Fragment, null, ' ', React.createElement(Text, {
109
+ "$variant": "h4",
110
+ "$color": Color.LOCKED
111
+ }, unreadCount, ' ', "unread")))), React.createElement(NotificationInboxList, {
112
+ ref: listRef
113
+ }, notifications.map(notification => {
114
+ const isRead = notification.isRead ?? false;
115
+ const badgeColor = severityToBadgeColorMap[notification.severity] || 'gray';
116
+ return React.createElement(NotificationItem, {
117
+ key: notification.id,
118
+ onClick: () => handleNotificationClick(notification)
119
+ }, React.createElement(NotificationIndicator, {
120
+ "$isRead": isRead
121
+ }), React.createElement(Vertical, {
122
+ "$gap": 8
123
+ }, React.createElement(NotificationHeader, null, React.createElement(Horizontal, {
124
+ "$gap": 4,
125
+ "$alignItems": "center"
126
+ }, React.createElement(Text, {
127
+ "$variant": "footnote",
128
+ "$color": Color.LOCKED
129
+ }, formatTimestamp(notification.timestamp)), notification.projectName && React.createElement(React.Fragment, null, React.createElement("span", null, "\u2022"), React.createElement(Text, {
130
+ "$variant": "footnote",
131
+ "$color": Color.LOCKED
132
+ }, notification.projectName))), (notification.severity === 'critical' || notification.severity === 'warning') && React.createElement(Badge, {
133
+ color: badgeColor,
134
+ isSaturated: false
135
+ }, notification.severity.toUpperCase())), React.createElement(Text, {
136
+ "$variant": "h4",
137
+ "$color": Color.MAIN
138
+ }, notification.title), notification.description && React.createElement(Text, {
139
+ "$variant": "standard",
140
+ "$color": Color.MAIN
141
+ }, notification.description), (notification.actionButton || notification.expandButton) && React.createElement(Horizontal, {
142
+ "$gap": 12,
143
+ "$justifyContent": "start"
144
+ }, notification.actionButton && React.createElement(NotificationActionLink, {
145
+ "$isPrimary": true,
146
+ onClick: e => {
147
+ var _notification$actionB;
148
+ e.stopPropagation();
149
+ (_notification$actionB = notification.actionButton) === null || _notification$actionB === void 0 || _notification$actionB.onClick();
150
+ }
151
+ }, notification.actionButton.label), notification.expandButton && React.createElement(NotificationActionLink, {
152
+ onClick: e => {
153
+ var _notification$expandB;
154
+ e.stopPropagation();
155
+ (_notification$expandB = notification.expandButton) === null || _notification$expandB === void 0 || _notification$expandB.onClick();
156
+ }
157
+ }, notification.expandButton.label))));
158
+ }), hasMore && React.createElement(NotificationInboxLoadMore, {
159
+ "$variant": "footnote",
160
+ "$color": Color.PHANTOM
161
+ }, isLoading ? React.createElement(Spinner, {
162
+ size: "small"
163
+ }) : 'Loading more...'), isLoading && notifications.length === 0 && React.createElement(Horizontal, {
164
+ "$justifyContent": "center",
165
+ "$alignItems": "center",
166
+ "$padding": "16px 0"
167
+ }, React.createElement(Spinner, {
168
+ size: "medium"
169
+ }))));
170
+ }
package/NotificationInbox/assets/EmptyNotifications.svg ADDED
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" style="display:block" viewBox="0 0 110.984 108.155"><path fill="var(--fill-0, #ebf0f5)" d="M13.664 71.785C10.34 67.532 4.189 59.301 9.6 54.507c1.664-1.474 3.838-2.231 5.989-2.793 3.274-.853 6.634-1.331 9.956-1.981 11.967-2.34 23.4-6.886 35.309-9.5 4.72-1.032 9.549-1.772 14.018-3.609 4.304-1.765 4.402-6.19 5.116-10.352a1.2 1.2 0 0 1 .247-.65c.12-.11.262-.194.417-.245 4.046-1.63 8.959-1.698 13.26-2.368 4.747-.742 9.56-1.316 14.373-.993.506.033 1.084.118 1.363.544.134.246.204.521.205.802.742 8.523.572 17.066.232 25.562a476 476 0 0 1-1.366 21.714c-.378 4.412-.82 8.837-1.902 13.128-1.061 4.205-2.972 8.54-6.708 10.74-1.803 1.061-3.882 1.531-5.926 1.976-9.907 2.148-19.9 3.978-29.882 5.806-6.933 1.27-13.88 2.549-20.898 3.258-6.429.642-12.445 2.174-19.053 1.951-1.001-.032-2.031-.097-2.933-.531-1.055-.511-1.812-1.47-2.517-2.407-3.232-4.302-5.836-9.325-8.769-13.914-3.369-5.278-6.459-10.776-8.807-16.593-3.223-7.98 5.705-7.806 10.817-8.92l20.941-4.559 42.5-9.254c1.693-.369 3.415-.74 5.143-.614a9.18 9.18 0 0 1 6.146 3.037c1.416 1.604 2.22 3.637 2.996 5.63q4.255 10.923 8.513 21.845"/><path fill="var(--fill-0, #969ca3)" d="M14.022 71.427c-1.605-2.053-3.153-4.17-4.36-6.48-1.162-2.231-2.205-4.973-1.414-7.504.993-3.169 4.578-4.457 7.482-5.214 3.769-.984 7.643-1.48 11.452-2.282 7.562-1.591 14.92-3.997 22.323-6.163 3.706-1.085 7.431-2.11 11.201-2.942 3.665-.803 7.38-1.419 10.978-2.495 2.798-.836 5.638-1.765 7.075-4.514.595-1.138.93-2.39 1.175-3.644.123-.642.224-1.283.32-1.925.092-.587.065-1.684.403-2.179.339-.494 1.757-.713 2.328-.866.889-.237 1.79-.42 2.697-.574 1.788-.3 3.595-.482 5.397-.679 3.755-.425 7.47-1.123 11.247-1.35 1.964-.121 4-.216 5.96 0 .607.064.836.118.979.749.09.402.07.851.102 1.262q.121 1.579.203 3.159c.208 3.996.245 7.999.186 12-.117 7.986-.527 15.974-1.095 23.94-.282 3.947-.571 7.903-1.023 11.837-.422 3.655-1.004 7.367-2.246 10.842-1.041 2.904-2.695 5.787-5.379 7.452-1.568.972-3.37 1.444-5.148 1.853-1.925.434-3.867.832-5.803 1.232-7.818 1.604-15.668 3.048-23.519 4.492-3.937.718-7.872 1.444-11.822 2.085-3.95.642-7.86 1.085-11.815 1.561-3.742.451-7.452 1.151-11.203 1.529a48 48 0 0 1-5.732.266c-.868-.014-1.776-.011-2.618-.245-.916-.255-1.605-.829-2.216-1.534-2.406-2.762-4.232-6.106-6.096-9.24-1.916-3.228-3.955-6.377-5.867-9.607a98 98 0 0 1-5.248-10.054c-.876-1.968-2.515-4.875-1.142-7 .963-1.496 3.003-2.027 4.63-2.394 1.95-.443 3.943-.642 5.9-1.058 15.798-3.353 31.565-6.87 47.346-10.302l11.72-2.55c1.957-.425 3.91-.89 5.876-1.264 1.845-.35 3.7-.46 5.503.146 3.504 1.176 5.116 4.29 6.378 7.516q2.185 5.583 4.351 11.173 2.128 5.454 4.255 10.923c.305.783 1.582.443 1.272-.351-3.027-7.77-5.915-15.626-9.112-23.331-1.302-3.129-3.172-5.808-6.443-7.06-3.626-1.382-7.564-.062-11.176.724l-49.686 10.83c-3.82.83-7.627 1.78-11.477 2.483-2.094.385-4.227.598-6.273 1.206-1.716.51-3.561 1.365-4.386 3.06-1.136 2.335.064 4.91 1.001 7.08 3.16 7.32 7.574 13.907 11.635 20.731 1.888 3.173 3.758 6.563 6.227 9.334 1.176 1.319 2.596 1.89 4.342 2.005 1.948.106 3.901.068 5.844-.114 3.958-.32 7.861-1.066 11.798-1.569 4.097-.524 8.193-.951 12.274-1.604 8.233-1.333 16.415-2.913 24.597-4.471q6.231-1.185 12.441-2.472c3.621-.757 7.741-1.216 10.784-3.496 5.519-4.13 6.661-12.152 7.417-18.5.979-8.306 1.428-16.704 1.794-25.055.362-8.3.59-16.628.035-24.925-.064-.963-.079-1.946-.236-2.888a1.67 1.67 0 0 0-1.093-1.383c-.802-.293-1.764-.234-2.597-.257a46 46 0 0 0-3.135.02c-4.071.16-8.053.9-12.09 1.373-3.558.417-7.233.658-10.615 1.925-.658.249-1.195.481-1.397 1.211-.203.73-.252 1.537-.366 2.288-.209 1.356-.428 2.727-.886 4.022-.457 1.295-1.248 2.525-2.433 3.308-1.534 1.012-3.51 1.505-5.263 1.996-3.82 1.07-7.748 1.694-11.607 2.605-7.817 1.847-15.433 4.433-23.164 6.592-3.919 1.094-7.86 2.062-11.871 2.798-3.835.706-7.876 1.184-11.497 2.703-2.608 1.094-4.947 3.027-5.376 5.963-.38 2.609.642 5.235 1.86 7.495 1.238 2.312 2.815 4.42 4.43 6.482.4.513 1.11-.207.715-.716z"/><path fill="var(--fill-0, white)" d="M33.543 36.65c-.939-1.536-1.677-2.938-1.954-4.749Z"/><path fill="var(--fill-0, #ebf0f5)" d="M21.11 57.221c-1.003.034-1.97.344-2.93.642a86 86 0 0 1-10.53 2.474c-.995.16-2.015.32-2.903.802-.887.481-1.634 1.354-1.66 2.361-.014.578.202 1.133.422 1.669a87 87 0 0 0 3.558 7.61"/><path fill="var(--fill-0, #969ca3)" d="M21.11 56.674c-1.385.02-2.677.43-3.997.802a84.998 84.998 0 0 1-8.434 1.956c-1.24.223-2.537.335-3.713.802-.963.39-1.833 1.052-2.296 2.002-.558 1.15-.21 2.278.247 3.393a73 73 0 0 0 3.53 7.502c.45.815 1.65.098 1.241-.725-1.073-2.148-2.142-4.3-3.085-6.51-.416-.977-1.158-2.202-.509-3.227.602-.95 1.756-1.275 2.794-1.487 2.339-.481 4.68-.874 6.999-1.453 1.2-.299 2.395-.62 3.58-.976s2.393-.86 3.643-.991c.683-.072.718-1.104 0-1.094z"/><path fill="var(--fill-0, #ebf0f5)" d="M110.426 36.383a479 479 0 0 1-1.704 34.256c-.378 4.412-.819 8.837-1.902 13.128-1.061 4.205-2.971 8.54-6.708 10.74-1.803 1.061-3.882 1.531-5.926 1.976-9.91 2.146-19.903 3.977-29.885 5.804-6.933 1.271-13.88 2.549-20.898 3.258-6.429.642-12.445 2.174-19.053 1.951-1.001-.032-2.031-.096-2.933-.531-1.055-.51-1.812-1.469-2.517-2.406-3.232-4.303-5.836-9.326-8.769-13.914-3.369-5.278-6.459-10.776-8.807-16.593-3.223-7.98 5.705-7.807 10.817-8.92l20.941-4.56 42.5-9.253c1.693-.37 3.415-.74 5.143-.614a9.18 9.18 0 0 1 6.146 3.036c1.416 1.605 2.22 3.637 2.996 5.63l5.659 14.523c.845 2.166 1.532 4.505 2.534 6.597.374.78 2.269 3.257 2.907.998"/><g fill="var(--fill-0, #969ca3)"><path d="M109.921 36.383a492 492 0 0 1-1.648 33.15c-.442 5.268-.871 10.647-2.446 15.721-1.352 4.36-3.807 8.296-8.331 9.786-2.475.817-5.103 1.239-7.65 1.765a674 674 0 0 1-8.087 1.616 1546 1546 0 0 1-16.363 3.059c-5.39 1-10.775 1.996-16.197 2.764-2.774.39-5.562.642-8.342 1.001-2.533.334-5.054.754-7.587 1.091-2.599.374-5.22.567-7.847.578-1.283-.008-2.764.059-3.924-.587-1.023-.573-1.74-1.613-2.419-2.538-3.014-4.117-5.392-8.65-8.106-12.96-2.787-4.423-5.447-8.908-7.635-13.663-1.152-2.506-3.648-6.751-.63-8.93 2.136-1.543 5.167-1.733 7.686-2.143 4.785-.778 9.521-2.002 14.257-3.032l32.673-7.106 16.407-3.57c2.557-.556 5.316-1.433 7.947-.9a8.7 8.7 0 0 1 5.596 3.86c1.333 2.096 2.103 4.559 3.002 6.867l3.001 7.7a350 350 0 0 1 2.822 7.476c.613 1.704 1.176 3.69 2.554 4.956 1.149 1.057 2.45.865 2.95-.685.262-.802-1.012-1.158-1.273-.351-.113.348-.1.457-.401.362-.302-.094-.59-.492-.782-.726-.593-.73-.922-1.651-1.262-2.517-.976-2.497-1.85-5.032-2.825-7.53l-3.12-7.995c-.92-2.357-1.729-4.813-2.889-7.059-1.044-2.025-2.566-3.756-4.631-4.774-2.192-1.083-4.524-1.19-6.898-.803-2.75.458-5.474 1.157-8.198 1.75L60.88 53.87q-16.71 3.633-33.437 7.277c-5.339 1.165-10.667 2.45-16.031 3.49-2.758.532-5.673.694-8.253 1.894-1.065.495-2.076 1.246-2.63 2.307-.659 1.264-.604 2.727-.25 4.07.604 2.29 1.786 4.519 2.82 6.635 1.182 2.416 2.471 4.776 3.837 7.091 1.331 2.257 2.772 4.447 4.13 6.688 1.38 2.273 2.706 4.58 4.116 6.838 1.3 2.085 2.632 4.31 4.331 6.096 1.725 1.824 4.011 1.879 6.38 1.864 5.343-.029 10.589-1.144 15.865-1.793 5.522-.679 11.01-1.379 16.492-2.346 11.179-1.973 22.356-4.028 33.46-6.383 2.488-.53 5.082-.942 7.427-1.967 2.001-.874 3.64-2.293 4.916-4.054 2.753-3.804 3.728-8.721 4.387-13.272.802-5.473 1.136-11.025 1.502-16.54a469 469 0 0 0 .995-25.388c.008-.653-1.002-.653-1.011 0z"/><path d="M54.262 49.989A82 82 0 0 0 66.8 48.8c4.217-.738 8.326-2.154 12.577-2.674 3.419-.417 7.154-.079 9.995 2.055 1.535 1.153 2.454 2.745 3.08 4.532.675 1.933 1.25 3.906 1.868 5.859 1.493 4.72 2.826 9.544 4.6 14.167.264.687 1.316.432 1.124-.308-1.156-4.436-2.742-8.783-4.162-13.14-.691-2.124-1.36-4.257-2.086-6.373-.593-1.75-1.347-3.425-2.692-4.732-5.935-5.776-14.804-2.461-21.707-.921a80 80 0 0 1-15.143 1.888c-.536.016-.539.846 0 .836zM96.29 52.304a195 195 0 0 0 4.063 12.513c.263.722 1.429.403 1.155-.32a212 212 0 0 1-4.293-12.451c-.181-.59-1.099-.342-.926.255z"/></g><path fill="var(--fill-0, #ebf0f5)" d="M17.614 35.452a12.45 12.45 0 0 0-6.215-5.674c1.238-2.65 2.557-5.01 3.178-7.89a36 36 0 0 0 6.353 5.705c-2.264 1.55-3.124 4.427-3.83 7.078"/><path fill="var(--fill-0, #969ca3)" d="M18.05 35.197a12.93 12.93 0 0 0-6.357-5.921l.21.802c1.241-2.608 2.618-5.183 3.282-8.021l-1.052.277a37 37 0 0 0 6.46 5.848v-1.178c-2.416 1.715-3.69 4.804-4.062 7.667-.091.706.908.692 1.133.16.983-2.36 1.394-5.046 3.617-6.643a.693.693 0 0 0 0-1.177 37.3 37.3 0 0 1-6.256-5.56.642.642 0 0 0-1.053.277c-.598 2.762-1.894 5.22-3.074 7.763-.173.374-.02.701.348.855a12.24 12.24 0 0 1 5.936 5.368c.321.571 1.175.066.875-.51z"/><path fill="var(--fill-0, #ebf0f5)" d="M41.816 35.082a9.04 9.04 0 0 0-4.515-4.121c.9-1.925 1.858-3.64 2.31-5.732a26.2 26.2 0 0 0 4.614 4.145c-1.644 1.123-2.268 3.217-2.782 5.144"/><path fill="var(--fill-0, #969ca3)" d="M42.254 34.829A9.54 9.54 0 0 0 37.6 30.46l.209.803c.912-1.906 1.915-3.791 2.406-5.858l-1.052.278a27.2 27.2 0 0 0 4.716 4.287v-1.178c-1.765 1.284-2.849 3.58-3.014 5.732-.044.56.83.802 1.075.29.802-1.68 1.012-3.662 2.627-4.844a.693.693 0 0 0 0-1.178 27.4 27.4 0 0 1-4.514-4 .642.642 0 0 0-1.052.278c-.432 1.996-1.354 3.767-2.205 5.605-.173.374-.019.7.348.856a8.84 8.84 0 0 1 4.232 3.815c.321.57 1.173.065.875-.51z"/><path fill="var(--fill-0, #ebf0f5)" d="M68.408 18.373a8.42 8.42 0 0 0-4.203-3.839c.839-1.792 1.73-3.388 2.15-5.336a24.4 24.4 0 0 0 4.297 3.859c-1.532 1.049-2.112 2.995-2.59 4.789"/><path fill="var(--fill-0, #969ca3)" d="M68.845 18.119a8.9 8.9 0 0 0-4.341-4.086l.208.802c.854-1.778 1.787-3.53 2.254-5.463l-1.052.278a25.3 25.3 0 0 0 4.397 4V12.47c-1.66 1.203-2.693 3.356-2.825 5.374-.037.561.825.802 1.075.29.763-1.548.941-3.393 2.435-4.492a.695.695 0 0 0 0-1.177 25.7 25.7 0 0 1-4.195-3.714.642.642 0 0 0-1.052.277c-.402 1.856-1.257 3.5-2.046 5.21-.119.256-.103.665.209.802a8.34 8.34 0 0 1 4.06 3.59c.32.568 1.173.066.873-.51M45.727 5.53c.652-1.584 1.284-3.186 1.794-4.824l-.934.247c1.239 1.4 2.678 2.406 4.133 3.55v-.916a8.92 8.92 0 0 0-2.26 6.326l1.17-.482c-.67-.778-1.302-1.591-1.947-2.39-.531-.66-1.444.274-.926.927.602.76 1.22 1.513 1.797 2.294.378.514 1.283.39 1.283-.346-.02-2.095.653-3.873 1.906-5.538a.64.64 0 0 0-.232-.886c-1.605-.702-2.986-2.027-4.127-3.324-.298-.338-.802-.12-.935.247-.576 1.618-1.123 3.238-1.765 4.832-.258.65.783.923 1.045.29z"/><path fill="var(--fill-0, white)" d="M74.635 50.543c-1.053 0-2.102.069-3.151.144-5.134.367-13.797.273-16.287 5.844-1.798 4.011-.68 8.69.615 12.897a183 183 0 0 0 7.56 20.225c.94 2.123 1.924 4.237 3.177 6.193l4.693-11.423 13.575 7.95a115.3 115.3 0 0 1-10.326-24.198c-1.499-5.04-2.652-10.408-1.43-15.523.188-.784.75-1.745 1.522-1.516"/><path fill="var(--fill-0, #969ca3)" d="M74.635 50.009a65 65 0 0 0-10.605.641c-3.01.45-6.348 1.4-8.361 3.85-2.753 3.34-2.323 8.173-1.373 12.1 1.182 4.893 2.956 9.701 4.742 14.402q1.515 3.98 3.208 7.891c1.088 2.51 2.205 5.01 3.673 7.325.362.573 1.1.395 1.334-.175 1.561-3.808 3.103-7.623 4.675-11.427l-1.046.425q6.778 3.99 13.576 7.951c.619.363 1.325-.36.974-.975a115 115 0 0 1-7.244-15.206c-2.018-5.194-4.01-10.675-4.734-16.227a25 25 0 0 1-.193-4.577c.028-.494.243-4.362 1.14-4.198s1.26-1.205.373-1.356c-2.774-.472-2.826 4.255-2.888 5.995-.107 3.09.439 6.18 1.193 9.164 1.524 6.04 3.725 11.942 6.288 17.615a115 115 0 0 0 4.834 9.5l.975-.973q-6.786-3.98-13.575-7.951c-.435-.254-.876 0-1.046.427-1.556 3.811-3.143 7.61-4.71 11.417l1.335-.175c-2.511-3.975-4.249-8.491-5.976-12.847a179 179 0 0 1-4.799-13.657c-1.201-3.935-2.495-8.824-.32-12.674 1.472-2.608 4.547-3.637 7.321-4.171a43 43 0 0 1 5.107-.602c2.035-.14 4.084-.409 6.123-.45.687-.013.689-1.056 0-1.067z"/><path fill="var(--fill-0, #969ca3)" d="M66.617 70.031c-1.979.928-3.625 2.522-3.642 4.852-.016 1.975 1.444 3.834 3.404 4.193 2.097.387 3.958-.845 4.72-2.77.714-1.807.953-4.686-1.4-5.368-.697-.202-1.124.813-.495 1.174 1.425.802.982 2.766.39 3.992-.605 1.25-2.034 1.96-3.385 1.461-1.31-.481-2.034-1.896-1.824-3.247.236-1.503 1.423-2.758 2.748-3.404.592-.29.074-1.159-.516-.883"/><g fill="var(--fill-0, #969ca3)"><path d="M83.94 30.629c4.823-.54 9.673-.842 14.488-1.476.696-.092 1.3-.531 1.3-1.3 0-.641-.6-1.387-1.3-1.3-4.933.61-9.817 1.55-14.736 2.257-1.02.147-.79 1.934.247 1.819M102.196 28.805c1.595 0 1.604-2.479 0-2.479s-1.604 2.479 0 2.479M85.155 35.97c2.206.027 4.398.032 6.602-.087s4.39-.369 6.578-.642c.794-.1 1.434-.641 1.317-1.519s-.878-1.242-1.674-1.113a173 173 0 0 1-12.815 1.56c-1.139.095-1.175 1.788 0 1.802zM102.971 34.78c1.309 0 1.311-2.035 0-2.035s-1.311 2.034 0 2.034"/></g></svg>
package/NotificationInbox/index.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export { NotificationInbox } from './NotificationInbox';
2
+ export { NotificationBar } from './NotificationBar';
3
+ export { NotificationBell } from './NotificationBell';
4
+ export type { Notification, NotificationInboxProps, NotificationSeverity, NotificationBarType, NotificationBarProps, NotificationBellProps, } from './types';
package/NotificationInbox/index.js ADDED
@@ -0,0 +1,3 @@
1
+ export { NotificationInbox } from './NotificationInbox';
2
+ export { NotificationBar } from './NotificationBar';
3
+ export { NotificationBell } from './NotificationBell';
package/NotificationInbox/styles.d.ts ADDED
@@ -0,0 +1,439 @@
1
+ export declare const NotificationInboxContainer: import("styled-components").StyledComponent<"div", any, {
2
+ $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
3
+ $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
4
+ $bgColor?: string | undefined;
5
+ $border?: string | ({
6
+ top?: string | undefined;
7
+ right?: string | undefined;
8
+ bottom?: string | undefined;
9
+ left?: string | undefined;
10
+ } | {
11
+ horizontal: string;
12
+ top?: string | undefined;
13
+ bottom?: string | undefined;
14
+ } | {
15
+ vertical: string;
16
+ right?: string | undefined;
17
+ left?: string | undefined;
18
+ }) | undefined;
19
+ $borderRadius?: (string | number) | undefined;
20
+ $boxShadow?: string | undefined;
21
+ $gap?: (string | number) | undefined;
22
+ $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
23
+ $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
24
+ $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
25
+ $margin?: (string | number) | ({
26
+ top?: (string | number) | undefined;
27
+ right?: (string | number) | undefined;
28
+ bottom?: (string | number) | undefined;
29
+ left?: (string | number) | undefined;
30
+ } | {
31
+ horizontal: string | number;
32
+ top?: (string | number) | undefined;
33
+ bottom?: (string | number) | undefined;
34
+ } | {
35
+ vertical: string | number;
36
+ right?: (string | number) | undefined;
37
+ left?: (string | number) | undefined;
38
+ }) | undefined;
39
+ $padding?: (string | number) | ({
40
+ top?: (string | number) | undefined;
41
+ right?: (string | number) | undefined;
42
+ bottom?: (string | number) | undefined;
43
+ left?: (string | number) | undefined;
44
+ } | {
45
+ horizontal: string | number;
46
+ top?: (string | number) | undefined;
47
+ bottom?: (string | number) | undefined;
48
+ } | {
49
+ vertical: string | number;
50
+ right?: (string | number) | undefined;
51
+ left?: (string | number) | undefined;
52
+ }) | undefined;
53
+ $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
54
+ } & {
55
+ $gridAutoFlow: string;
56
+ }, "$gridAutoFlow">;
57
+ export declare const NotificationInboxHeader: import("styled-components").StyledComponent<"div", any, {
58
+ $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
59
+ $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
60
+ $bgColor?: string | undefined;
61
+ $border?: string | ({
62
+ top?: string | undefined;
63
+ right?: string | undefined;
64
+ bottom?: string | undefined;
65
+ left?: string | undefined;
66
+ } | {
67
+ horizontal: string;
68
+ top?: string | undefined;
69
+ bottom?: string | undefined;
70
+ } | {
71
+ vertical: string;
72
+ right?: string | undefined;
73
+ left?: string | undefined;
74
+ }) | undefined;
75
+ $borderRadius?: (string | number) | undefined;
76
+ $boxShadow?: string | undefined;
77
+ $gap?: (string | number) | undefined;
78
+ $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
79
+ $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
80
+ $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
81
+ $margin?: (string | number) | ({
82
+ top?: (string | number) | undefined;
83
+ right?: (string | number) | undefined;
84
+ bottom?: (string | number) | undefined;
85
+ left?: (string | number) | undefined;
86
+ } | {
87
+ horizontal: string | number;
88
+ top?: (string | number) | undefined;
89
+ bottom?: (string | number) | undefined;
90
+ } | {
91
+ vertical: string | number;
92
+ right?: (string | number) | undefined;
93
+ left?: (string | number) | undefined;
94
+ }) | undefined;
95
+ $padding?: (string | number) | ({
96
+ top?: (string | number) | undefined;
97
+ right?: (string | number) | undefined;
98
+ bottom?: (string | number) | undefined;
99
+ left?: (string | number) | undefined;
100
+ } | {
101
+ horizontal: string | number;
102
+ top?: (string | number) | undefined;
103
+ bottom?: (string | number) | undefined;
104
+ } | {
105
+ vertical: string | number;
106
+ right?: (string | number) | undefined;
107
+ left?: (string | number) | undefined;
108
+ }) | undefined;
109
+ $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
110
+ } & {
111
+ $gridAutoFlow: string;
112
+ }, "$gridAutoFlow">;
113
+ export declare const NotificationInboxTitle: import("styled-components").StyledComponent<"span", any, {
114
+ $color?: string | undefined;
115
+ $uppercase?: boolean | undefined;
116
+ $ellipsis?: boolean | undefined;
117
+ $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
118
+ }, never>;
119
+ export declare const NotificationInboxList: import("styled-components").StyledComponent<"div", any, {
120
+ $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
121
+ $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
122
+ $bgColor?: string | undefined;
123
+ $border?: string | ({
124
+ top?: string | undefined;
125
+ right?: string | undefined;
126
+ bottom?: string | undefined;
127
+ left?: string | undefined;
128
+ } | {
129
+ horizontal: string;
130
+ top?: string | undefined;
131
+ bottom?: string | undefined;
132
+ } | {
133
+ vertical: string;
134
+ right?: string | undefined;
135
+ left?: string | undefined;
136
+ }) | undefined;
137
+ $borderRadius?: (string | number) | undefined;
138
+ $boxShadow?: string | undefined;
139
+ $gap?: (string | number) | undefined;
140
+ $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
141
+ $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
142
+ $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
143
+ $margin?: (string | number) | ({
144
+ top?: (string | number) | undefined;
145
+ right?: (string | number) | undefined;
146
+ bottom?: (string | number) | undefined;
147
+ left?: (string | number) | undefined;
148
+ } | {
149
+ horizontal: string | number;
150
+ top?: (string | number) | undefined;
151
+ bottom?: (string | number) | undefined;
152
+ } | {
153
+ vertical: string | number;
154
+ right?: (string | number) | undefined;
155
+ left?: (string | number) | undefined;
156
+ }) | undefined;
157
+ $padding?: (string | number) | ({
158
+ top?: (string | number) | undefined;
159
+ right?: (string | number) | undefined;
160
+ bottom?: (string | number) | undefined;
161
+ left?: (string | number) | undefined;
162
+ } | {
163
+ horizontal: string | number;
164
+ top?: (string | number) | undefined;
165
+ bottom?: (string | number) | undefined;
166
+ } | {
167
+ vertical: string | number;
168
+ right?: (string | number) | undefined;
169
+ left?: (string | number) | undefined;
170
+ }) | undefined;
171
+ $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
172
+ } & {
173
+ $gridAutoFlow: string;
174
+ }, "$gridAutoFlow">;
175
+ export declare const NotificationItem: import("styled-components").StyledComponent<"div", any, {
176
+ $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
177
+ $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
178
+ $bgColor?: string | undefined;
179
+ $border?: string | ({
180
+ top?: string | undefined;
181
+ right?: string | undefined;
182
+ bottom?: string | undefined;
183
+ left?: string | undefined;
184
+ } | {
185
+ horizontal: string;
186
+ top?: string | undefined;
187
+ bottom?: string | undefined;
188
+ } | {
189
+ vertical: string;
190
+ right?: string | undefined;
191
+ left?: string | undefined;
192
+ }) | undefined;
193
+ $borderRadius?: (string | number) | undefined;
194
+ $boxShadow?: string | undefined;
195
+ $gap?: (string | number) | undefined;
196
+ $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
197
+ $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
198
+ $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
199
+ $margin?: (string | number) | ({
200
+ top?: (string | number) | undefined;
201
+ right?: (string | number) | undefined;
202
+ bottom?: (string | number) | undefined;
203
+ left?: (string | number) | undefined;
204
+ } | {
205
+ horizontal: string | number;
206
+ top?: (string | number) | undefined;
207
+ bottom?: (string | number) | undefined;
208
+ } | {
209
+ vertical: string | number;
210
+ right?: (string | number) | undefined;
211
+ left?: (string | number) | undefined;
212
+ }) | undefined;
213
+ $padding?: (string | number) | ({
214
+ top?: (string | number) | undefined;
215
+ right?: (string | number) | undefined;
216
+ bottom?: (string | number) | undefined;
217
+ left?: (string | number) | undefined;
218
+ } | {
219
+ horizontal: string | number;
220
+ top?: (string | number) | undefined;
221
+ bottom?: (string | number) | undefined;
222
+ } | {
223
+ vertical: string | number;
224
+ right?: (string | number) | undefined;
225
+ left?: (string | number) | undefined;
226
+ }) | undefined;
227
+ $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
228
+ } & {
229
+ $gridAutoFlow: string;
230
+ }, "$gridAutoFlow">;
231
+ export declare const NotificationIndicator: import("styled-components").StyledComponent<"div", any, {
232
+ $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
233
+ $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
234
+ $bgColor?: string | undefined;
235
+ $border?: string | ({
236
+ top?: string | undefined;
237
+ right?: string | undefined;
238
+ bottom?: string | undefined;
239
+ left?: string | undefined;
240
+ } | {
241
+ horizontal: string;
242
+ top?: string | undefined;
243
+ bottom?: string | undefined;
244
+ } | {
245
+ vertical: string;
246
+ right?: string | undefined;
247
+ left?: string | undefined;
248
+ }) | undefined;
249
+ $borderRadius?: (string | number) | undefined;
250
+ $boxShadow?: string | undefined;
251
+ $gap?: (string | number) | undefined;
252
+ $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
253
+ $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
254
+ $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
255
+ $margin?: (string | number) | ({
256
+ top?: (string | number) | undefined;
257
+ right?: (string | number) | undefined;
258
+ bottom?: (string | number) | undefined;
259
+ left?: (string | number) | undefined;
260
+ } | {
261
+ horizontal: string | number;
262
+ top?: (string | number) | undefined;
263
+ bottom?: (string | number) | undefined;
264
+ } | {
265
+ vertical: string | number;
266
+ right?: (string | number) | undefined;
267
+ left?: (string | number) | undefined;
268
+ }) | undefined;
269
+ $padding?: (string | number) | ({
270
+ top?: (string | number) | undefined;
271
+ right?: (string | number) | undefined;
272
+ bottom?: (string | number) | undefined;
273
+ left?: (string | number) | undefined;
274
+ } | {
275
+ horizontal: string | number;
276
+ top?: (string | number) | undefined;
277
+ bottom?: (string | number) | undefined;
278
+ } | {
279
+ vertical: string | number;
280
+ right?: (string | number) | undefined;
281
+ left?: (string | number) | undefined;
282
+ }) | undefined;
283
+ $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
284
+ } & {
285
+ $gridAutoFlow: string;
286
+ } & {
287
+ $isRead: boolean;
288
+ }, "$gridAutoFlow">;
289
+ export declare const NotificationHeader: import("styled-components").StyledComponent<"div", any, {
290
+ $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
291
+ $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
292
+ $bgColor?: string | undefined;
293
+ $border?: string | ({
294
+ top?: string | undefined;
295
+ right?: string | undefined;
296
+ bottom?: string | undefined;
297
+ left?: string | undefined;
298
+ } | {
299
+ horizontal: string;
300
+ top?: string | undefined;
301
+ bottom?: string | undefined;
302
+ } | {
303
+ vertical: string;
304
+ right?: string | undefined;
305
+ left?: string | undefined;
306
+ }) | undefined;
307
+ $borderRadius?: (string | number) | undefined;
308
+ $boxShadow?: string | undefined;
309
+ $gap?: (string | number) | undefined;
310
+ $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
311
+ $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
312
+ $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
313
+ $margin?: (string | number) | ({
314
+ top?: (string | number) | undefined;
315
+ right?: (string | number) | undefined;
316
+ bottom?: (string | number) | undefined;
317
+ left?: (string | number) | undefined;
318
+ } | {
319
+ horizontal: string | number;
320
+ top?: (string | number) | undefined;
321
+ bottom?: (string | number) | undefined;
322
+ } | {
323
+ vertical: string | number;
324
+ right?: (string | number) | undefined;
325
+ left?: (string | number) | undefined;
326
+ }) | undefined;
327
+ $padding?: (string | number) | ({
328
+ top?: (string | number) | undefined;
329
+ right?: (string | number) | undefined;
330
+ bottom?: (string | number) | undefined;
331
+ left?: (string | number) | undefined;
332
+ } | {
333
+ horizontal: string | number;
334
+ top?: (string | number) | undefined;
335
+ bottom?: (string | number) | undefined;
336
+ } | {
337
+ vertical: string | number;
338
+ right?: (string | number) | undefined;
339
+ left?: (string | number) | undefined;
340
+ }) | undefined;
341
+ $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
342
+ } & {
343
+ $gridAutoFlow: string;
344
+ }, "$gridAutoFlow">;
345
+ export declare const NotificationActions: import("styled-components").StyledComponent<"div", any, {
346
+ $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
347
+ $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
348
+ $bgColor?: string | undefined;
349
+ $border?: string | ({
350
+ top?: string | undefined;
351
+ right?: string | undefined;
352
+ bottom?: string | undefined;
353
+ left?: string | undefined;
354
+ } | {
355
+ horizontal: string;
356
+ top?: string | undefined;
357
+ bottom?: string | undefined;
358
+ } | {
359
+ vertical: string;
360
+ right?: string | undefined;
361
+ left?: string | undefined;
362
+ }) | undefined;
363
+ $borderRadius?: (string | number) | undefined;
364
+ $boxShadow?: string | undefined;
365
+ $gap?: (string | number) | undefined;
366
+ $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
367
+ $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
368
+ $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
369
+ $margin?: (string | number) | ({
370
+ top?: (string | number) | undefined;
371
+ right?: (string | number) | undefined;
372
+ bottom?: (string | number) | undefined;
373
+ left?: (string | number) | undefined;
374
+ } | {
375
+ horizontal: string | number;
376
+ top?: (string | number) | undefined;
377
+ bottom?: (string | number) | undefined;
378
+ } | {
379
+ vertical: string | number;
380
+ right?: (string | number) | undefined;
381
+ left?: (string | number) | undefined;
382
+ }) | undefined;
383
+ $padding?: (string | number) | ({
384
+ top?: (string | number) | undefined;
385
+ right?: (string | number) | undefined;
386
+ bottom?: (string | number) | undefined;
387
+ left?: (string | number) | undefined;
388
+ } | {
389
+ horizontal: string | number;
390
+ top?: (string | number) | undefined;
391
+ bottom?: (string | number) | undefined;
392
+ } | {
393
+ vertical: string | number;
394
+ right?: (string | number) | undefined;
395
+ left?: (string | number) | undefined;
396
+ }) | undefined;
397
+ $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
398
+ } & {
399
+ $gridAutoFlow: string;
400
+ }, "$gridAutoFlow">;
401
+ export declare const NotificationActionLink: import("styled-components").StyledComponent<"button", any, {
402
+ $isPrimary?: boolean;
403
+ }, never>;
404
+ export declare const NotificationInboxEmptyIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
405
+ export declare const NotificationInboxEmptyText: import("styled-components").StyledComponent<"span", any, {
406
+ $color?: string | undefined;
407
+ $uppercase?: boolean | undefined;
408
+ $ellipsis?: boolean | undefined;
409
+ $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
410
+ }, never>;
411
+ export declare const NotificationInboxLoadMore: import("styled-components").StyledComponent<"span", any, {
412
+ $color?: string | undefined;
413
+ $uppercase?: boolean | undefined;
414
+ $ellipsis?: boolean | undefined;
415
+ $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
416
+ }, never>;
417
+ export declare const NotificationBarButton: import("styled-components").StyledComponent<"button", any, {
418
+ $type: "important" | "warning" | "notifications" | "no-notifications";
419
+ $isOpened: boolean;
420
+ $read: boolean;
421
+ }, never>;
422
+ export declare const NotificationBarIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
423
+ export declare const NotificationBarText: import("styled-components").StyledComponent<"div", any, {}, never>;
424
+ export declare const NotificationBarBadge: import("styled-components").StyledComponent<"div", any, {}, never>;
425
+ export declare const NotificationBarBadgeText: import("styled-components").StyledComponent<"span", any, {
426
+ $color?: string | undefined;
427
+ $uppercase?: boolean | undefined;
428
+ $ellipsis?: boolean | undefined;
429
+ $variant?: import("@pushwoosh/kit-typography").TypographyVariant | undefined;
430
+ }, never>;
431
+ export declare const NotificationBellButton: import("styled-components").StyledComponent<"button", any, {
432
+ $isOpened: boolean;
433
+ }, never>;
434
+ export declare const NotificationBellIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
435
+ export declare const NotificationBellBadge: import("styled-components").StyledComponent<"div", any, {}, never>;
436
+ export declare const NotificationBellBadgeDot: import("styled-components").StyledComponent<"div", any, {
437
+ $color: string;
438
+ $isDot?: boolean;
439
+ }, never>;
package/NotificationInbox/styles.js ADDED
@@ -0,0 +1,264 @@
1
+ import styled from 'styled-components';
2
+ import { Color, FontSize, FontWeight, FontFamily, ShapeRadius } from '@pushwoosh/kit-constants';
3
+ import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
4
+ import { Text } from '@pushwoosh/kit-typography';
5
+ export const NotificationInboxContainer = styled(Vertical).withConfig({
6
+ displayName: "NotificationInboxContainer",
7
+ componentId: "sc-1nrene1-0"
8
+ })(["width:100%;min-width:360px;max-width:360px;max-height:600px;background:", ";border:1px solid ", ";border-radius:", ";overflow:hidden;display:flex;flex-direction:column;"], Color.CLEAR, Color.FORM, ShapeRadius.DIALOG);
9
+ export const NotificationInboxHeader = styled(Horizontal).withConfig({
10
+ displayName: "NotificationInboxHeader",
11
+ componentId: "sc-1nrene1-1"
12
+ })(["width:100%;min-width:0;max-width:100%;box-sizing:border-box;border-bottom:1px solid ", ";margin:0;padding:16px;justify-content:space-between;align-items:center;flex-shrink:0;"], Color.FORM);
13
+ export const NotificationInboxTitle = styled(Text).withConfig({
14
+ displayName: "NotificationInboxTitle",
15
+ componentId: "sc-1nrene1-2"
16
+ })(["display:flex;align-items:center;gap:4px;"]);
17
+ export const NotificationInboxList = styled(Vertical).withConfig({
18
+ displayName: "NotificationInboxList",
19
+ componentId: "sc-1nrene1-3"
20
+ })(["flex:1;overflow-y:auto;overflow-x:hidden;width:100%;min-width:0;"]);
21
+ export const NotificationItem = styled(Horizontal).withConfig({
22
+ displayName: "NotificationItem",
23
+ componentId: "sc-1nrene1-4"
24
+ })(["width:100%;min-width:0;max-width:100%;box-sizing:border-box;margin:0;padding:16px;border-bottom:1px solid ", ";cursor:pointer;transition:background-color 0.2s;align-items:flex-start;gap:8px;background-color:", ";&:hover{background-color:", ";}&:last-child{border-bottom:none;}"], Color.FORM, Color.CLEAR, Color.FROZEN);
25
+ export const NotificationIndicator = styled(Horizontal).withConfig({
26
+ displayName: "NotificationIndicator",
27
+ componentId: "sc-1nrene1-5"
28
+ })(["flex-shrink:0;height:20px;align-items:center;justify-content:center;&::after{content:'';width:6px;height:6px;border-radius:50%;background-color:", ";}"], ({
29
+ $isRead
30
+ }) => $isRead ? Color.FORM : Color.PRIMARY);
31
+ export const NotificationHeader = styled(Horizontal).withConfig({
32
+ displayName: "NotificationHeader",
33
+ componentId: "sc-1nrene1-6"
34
+ })(["justify-content:space-between;align-items:center;width:100%;gap:4px;height:20px;"]);
35
+ export const NotificationActions = styled(Horizontal).withConfig({
36
+ displayName: "NotificationActions",
37
+ componentId: "sc-1nrene1-7"
38
+ })(["gap:12px;margin-top:0;flex-wrap:wrap;justify-content:flex-start;width:100%;"]);
39
+ export const NotificationActionLink = styled.button.withConfig({
40
+ displayName: "NotificationActionLink",
41
+ componentId: "sc-1nrene1-8"
42
+ })(["background:none;border:none;padding:0;margin:0;font-size:12px;font-family:", ";font-weight:", ";line-height:1.3;color:", ";text-decoration:none;text-transform:uppercase;cursor:pointer;transition:opacity 0.2s;white-space:nowrap;&:hover{opacity:0.8;}&:active{opacity:0.6;}"], FontFamily.MAIN, FontWeight.BOLD, ({
43
+ $isPrimary
44
+ }) => $isPrimary ? Color.PRIMARY : Color.SOFT);
45
+ export const NotificationInboxEmptyIcon = styled.div.withConfig({
46
+ displayName: "NotificationInboxEmptyIcon",
47
+ componentId: "sc-1nrene1-9"
48
+ })(["width:120px;height:120px;display:flex;align-items:center;justify-content:center;color:", ";margin:0 auto;img{width:100%;height:100%;object-fit:contain;}"], Color.PHANTOM);
49
+ export const NotificationInboxEmptyText = styled(Text).withConfig({
50
+ displayName: "NotificationInboxEmptyText",
51
+ componentId: "sc-1nrene1-10"
52
+ })(["text-align:center;"]);
53
+ export const NotificationInboxLoadMore = styled(NotificationInboxEmptyText).withConfig({
54
+ displayName: "NotificationInboxLoadMore",
55
+ componentId: "sc-1nrene1-11"
56
+ })(["padding:16px;"]);
57
+ export const NotificationBarButton = styled.button.withConfig({
58
+ displayName: "NotificationBarButton",
59
+ componentId: "sc-1nrene1-12"
60
+ })(["display:flex;gap:8px;align-items:center;padding:8px 16px 8px 12px;width:260px;border:none;border-top:1px solid ", ";border-bottom:0;border-left:0;border-right:0;cursor:pointer;transition:background-color 0.2s,opacity 0.2s;background-color:", ";--icon-color:", ";--text-color:", ";--badge-bg:", ";--badge-text-color:", ";&:hover:not(:disabled){background-color:", ";--icon-color:", ";--text-color:", ";--badge-bg:", ";--badge-text-color:", ";}&:active:not(:disabled){opacity:0.5;--icon-color:", ";--text-color:", ";--badge-bg:", ";}"], Color.FORM, ({
61
+ $type,
62
+ $isOpened,
63
+ $read
64
+ }) => {
65
+ if ($isOpened) {
66
+ return Color.MAIN;
67
+ }
68
+ if ($read) {
69
+ return Color.FROZEN;
70
+ }
71
+ if ($type === 'no-notifications') {
72
+ return Color.FROZEN;
73
+ }
74
+ if ($type === 'important') return Color.DANGER;
75
+ if ($type === 'warning') return Color.WARNING;
76
+ if ($type === 'notifications') return Color.BRIGHT;
77
+ return Color.FROZEN;
78
+ }, ({
79
+ $type,
80
+ $isOpened,
81
+ $read
82
+ }) => {
83
+ if ($isOpened) return Color.CLEAR;
84
+ if ($read) {
85
+ if ($type === 'important') return Color.DANGER;
86
+ if ($type === 'warning') return Color.WARNING;
87
+ if ($type === 'notifications') return Color.BRIGHT;
88
+ return Color.MAIN;
89
+ }
90
+ if ($type === 'no-notifications') return Color.MAIN;
91
+ return Color.CLEAR;
92
+ }, ({
93
+ $type,
94
+ $isOpened,
95
+ $read
96
+ }) => {
97
+ if ($isOpened) return Color.CLEAR;
98
+ if ($read) return Color.MAIN;
99
+ if ($type === 'no-notifications') return Color.MAIN;
100
+ return Color.CLEAR;
101
+ }, ({
102
+ $type,
103
+ $isOpened,
104
+ $read
105
+ }) => {
106
+ if ($isOpened) return Color.CLEAR;
107
+ if ($read) {
108
+ if ($type === 'important') return Color.DANGER;
109
+ if ($type === 'warning') return Color.WARNING;
110
+ if ($type === 'notifications') return Color.PRIMARY;
111
+ return Color.CLEAR;
112
+ }
113
+ return Color.CLEAR;
114
+ }, ({
115
+ $type,
116
+ $isOpened,
117
+ $read
118
+ }) => {
119
+ if ($isOpened) return Color.MAIN;
120
+ if ($read) return Color.CLEAR;
121
+ if ($type === 'important') return Color.DANGER;
122
+ if ($type === 'warning') return Color.WARNING;
123
+ if ($type === 'notifications') return Color.PRIMARY;
124
+ return Color.MAIN;
125
+ }, ({
126
+ $type,
127
+ $isOpened,
128
+ $read
129
+ }) => {
130
+ if ($isOpened) return Color.MAIN;
131
+ if ($read) return Color.FROZEN;
132
+ if ($type === 'no-notifications') return Color.FROZEN;
133
+ if ($type === 'important') return Color.DANGER_HOVER;
134
+ if ($type === 'warning') return Color.WARNING_HOVER;
135
+ if ($type === 'notifications') return Color.BRIGHT_HOVER;
136
+ return Color.FROZEN;
137
+ }, ({
138
+ $type,
139
+ $isOpened,
140
+ $read
141
+ }) => {
142
+ if ($isOpened) return Color.CLEAR;
143
+ if ($read) {
144
+ if ($type === 'important') return Color.DANGER_HOVER;
145
+ if ($type === 'warning') return Color.WARNING_HOVER;
146
+ if ($type === 'notifications') return Color.PRIMARY_HOVER;
147
+ return Color.MAIN;
148
+ }
149
+ if ($type === 'no-notifications') return Color.PRIMARY_HOVER;
150
+ return Color.CLEAR;
151
+ }, ({
152
+ $type,
153
+ $isOpened,
154
+ $read
155
+ }) => {
156
+ if ($isOpened) return Color.CLEAR;
157
+ if ($read) return Color.PRIMARY_HOVER;
158
+ if ($type === 'no-notifications') return Color.PRIMARY_HOVER;
159
+ return Color.CLEAR;
160
+ }, ({
161
+ $type,
162
+ $isOpened,
163
+ $read
164
+ }) => {
165
+ if ($isOpened) return Color.CLEAR;
166
+ if ($read) {
167
+ if ($type === 'important') return Color.DANGER_HOVER;
168
+ if ($type === 'warning') return Color.WARNING_HOVER;
169
+ if ($type === 'notifications') return Color.PRIMARY_HOVER;
170
+ return Color.CLEAR;
171
+ }
172
+ return Color.CLEAR;
173
+ }, ({
174
+ $type,
175
+ $isOpened,
176
+ $read
177
+ }) => {
178
+ if ($isOpened) return Color.MAIN;
179
+ if ($read) return Color.CLEAR;
180
+ if ($type === 'important') return Color.DANGER_HOVER;
181
+ if ($type === 'warning') return Color.WARNING_HOVER;
182
+ if ($type === 'notifications') return Color.PRIMARY_HOVER;
183
+ return Color.MAIN;
184
+ }, ({
185
+ $type,
186
+ $isOpened,
187
+ $read
188
+ }) => {
189
+ if ($isOpened) return Color.CLEAR;
190
+ if ($read) {
191
+ if ($type === 'important') return Color.DANGER;
192
+ if ($type === 'warning') return Color.WARNING;
193
+ if ($type === 'notifications') return Color.BRIGHT;
194
+ return Color.MAIN;
195
+ }
196
+ if ($type === 'no-notifications') return Color.PRIMARY_HOVER;
197
+ return Color.CLEAR;
198
+ }, ({
199
+ $type,
200
+ $isOpened,
201
+ $read
202
+ }) => {
203
+ if ($isOpened) return Color.CLEAR;
204
+ if ($read) return Color.PRIMARY_HOVER;
205
+ if ($type === 'no-notifications') return Color.PRIMARY_HOVER;
206
+ return Color.CLEAR;
207
+ }, ({
208
+ $type,
209
+ $isOpened,
210
+ $read
211
+ }) => {
212
+ if ($isOpened) return Color.CLEAR;
213
+ if ($read) {
214
+ if ($type === 'important') return Color.DANGER;
215
+ if ($type === 'warning') return Color.WARNING;
216
+ if ($type === 'notifications') return Color.BRIGHT;
217
+ return Color.CLEAR;
218
+ }
219
+ return Color.CLEAR;
220
+ });
221
+ export const NotificationBarIcon = styled.div.withConfig({
222
+ displayName: "NotificationBarIcon",
223
+ componentId: "sc-1nrene1-13"
224
+ })(["width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:color 0.2s;color:var(--icon-color);"]);
225
+ export const NotificationBarText = styled.div.withConfig({
226
+ displayName: "NotificationBarText",
227
+ componentId: "sc-1nrene1-14"
228
+ })(["flex:1 0 0;font-size:", ";font-family:", ";font-weight:", ";line-height:1.4;transition:color 0.2s;color:var(--text-color);white-space:pre-wrap;"], FontSize.REGULAR, FontFamily.MAIN, FontWeight.MEDIUM);
229
+ export const NotificationBarBadge = styled.div.withConfig({
230
+ displayName: "NotificationBarBadge",
231
+ componentId: "sc-1nrene1-15"
232
+ })(["flex-shrink:0;transition:background-color 0.2s;background-color:var(--badge-bg);border-radius:", ";padding:2px 6px;display:flex;align-items:center;justify-content:center;"], ShapeRadius.CONTROL);
233
+ export const NotificationBarBadgeText = styled(Text).withConfig({
234
+ displayName: "NotificationBarBadgeText",
235
+ componentId: "sc-1nrene1-16"
236
+ })(["text-transform:uppercase;transition:color 0.2s;color:var(--badge-text-color);"]);
237
+ export const NotificationBellButton = styled.button.withConfig({
238
+ displayName: "NotificationBellButton",
239
+ componentId: "sc-1nrene1-17"
240
+ })(["position:relative;width:36px;height:36px;padding:6px;border:none;background:", ";border-radius:", ";cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color 0.2s;--icon-color:", ";&:hover:not(:disabled){background-color:", ";--icon-color:", ";}"], ({
241
+ $isOpened
242
+ }) => $isOpened ? Color.MAIN : 'transparent', ShapeRadius.CONTROL, ({
243
+ $isOpened
244
+ }) => $isOpened ? Color.CLEAR : Color.MAIN, ({
245
+ $isOpened
246
+ }) => $isOpened ? Color.MAIN : Color.BRIGHT_LIGHT, ({
247
+ $isOpened
248
+ }) => $isOpened ? Color.CLEAR : Color.PRIMARY_HOVER);
249
+ export const NotificationBellIcon = styled.div.withConfig({
250
+ displayName: "NotificationBellIcon",
251
+ componentId: "sc-1nrene1-18"
252
+ })(["width:24px;height:24px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:color 0.2s;color:var(--icon-color);"]);
253
+ export const NotificationBellBadge = styled.div.withConfig({
254
+ displayName: "NotificationBellBadge",
255
+ componentId: "sc-1nrene1-19"
256
+ })(["position:absolute;right:4px;top:4px;z-index:1;"]);
257
+ export const NotificationBellBadgeDot = styled.div.withConfig({
258
+ displayName: "NotificationBellBadgeDot",
259
+ componentId: "sc-1nrene1-20"
260
+ })(["background-color:", ";border-radius:100px;", " display:flex;align-items:center;justify-content:center;font-size:10px;font-family:", ";font-weight:", ";line-height:1;color:", ";white-space:nowrap;"], ({
261
+ $color
262
+ }) => $color, ({
263
+ $isDot
264
+ }) => $isDot ? 'width: 8px; height: 8px;' : 'min-width: 16px; height: 16px; padding: 0 4px;', FontFamily.MAIN, FontWeight.BOLD, Color.CLEAR);
package/NotificationInbox/types.d.ts ADDED
@@ -0,0 +1,47 @@
1
+ import type { ReactNode } from 'react';
2
+ export type NotificationSeverity = 'critical' | 'warning' | 'info';
3
+ export interface Notification {
4
+ readonly id: string;
5
+ readonly title: string;
6
+ readonly description?: string;
7
+ readonly severity: NotificationSeverity;
8
+ readonly timestamp: string | Date;
9
+ readonly isRead?: boolean;
10
+ readonly projectName?: string;
11
+ readonly actionButton?: {
12
+ readonly label: string;
13
+ readonly onClick: () => void;
14
+ };
15
+ readonly expandButton?: {
16
+ readonly label: string;
17
+ readonly onClick: () => void;
18
+ };
19
+ }
20
+ export interface NotificationInboxProps {
21
+ readonly notifications: Notification[];
22
+ readonly isLoading?: boolean;
23
+ readonly hasMore?: boolean;
24
+ readonly onLoadMore?: () => void;
25
+ readonly onNotificationClick?: (notification: Notification) => void;
26
+ readonly onMarkAsRead?: (notificationId: string) => void;
27
+ readonly emptyStateTitle?: string;
28
+ readonly emptyStateDescription?: string;
29
+ readonly emptyStateIcon?: ReactNode;
30
+ readonly className?: string;
31
+ }
32
+ export type NotificationBarType = 'important' | 'warning' | 'notifications' | 'no-notifications';
33
+ export interface NotificationBarProps {
34
+ readonly type?: NotificationBarType;
35
+ readonly isOpened?: boolean;
36
+ readonly read?: boolean;
37
+ readonly count?: number;
38
+ readonly onClick?: () => void;
39
+ readonly className?: string;
40
+ }
41
+ export interface NotificationBellProps {
42
+ readonly count?: number;
43
+ readonly severity?: NotificationSeverity;
44
+ readonly isOpened?: boolean;
45
+ readonly onClick?: () => void;
46
+ readonly className?: string;
47
+ }
package/NotificationInbox/types.js ADDED
@@ -0,0 +1 @@
1
+ export {};
package/index.d.ts CHANGED
@@ -42,3 +42,4 @@ export { FrequencyCappingEdit, FrequencyCappingReadonly, type LocalCapping } fro
42
42
  export { SendRateEdit, SendRateReadonly, type SendRateBase, type SendRateEditProps, type SendRateReadonlyProps } from './SendRate';
43
43
  export { Alert } from './Alert';
44
44
  export { ApplicationPreloader, type ApplicationPreloaderProps } from './ApplicationPreloader';
45
+ export { NotificationInbox, NotificationBar, NotificationBell, type Notification, type NotificationInboxProps, type NotificationSeverity, type NotificationBarType, type NotificationBarProps, type NotificationBellProps, } from './NotificationInbox';
package/index.js CHANGED
@@ -41,4 +41,5 @@ export { RichMessageEditor, RichMessageViewer } from './RichMessageEditor';
41
41
  export { FrequencyCappingEdit, FrequencyCappingReadonly } from './FrequencyCapping';
42
42
  export { SendRateEdit, SendRateReadonly } from './SendRate';
43
43
  export { Alert } from './Alert';
44
- export { ApplicationPreloader } from './ApplicationPreloader';
44
+ export { ApplicationPreloader } from './ApplicationPreloader';
45
+ export { NotificationInbox, NotificationBar, NotificationBell } from './NotificationInbox';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pushwoosh/dumb-components",
3
- "version": "1.1.78",
3
+ "version": "1.1.80",
4
4
  "description": "React components to build Pushwoosh products",
5
5
  "main": "index.js",
6
6
  "module": "index.js",