@xsolla/xui-b2b-notification-panel 0.147.1
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/native/index.d.mts +33 -0
- package/native/index.d.ts +33 -0
- package/native/index.js +360 -0
- package/native/index.js.map +1 -0
- package/native/index.mjs +344 -0
- package/native/index.mjs.map +1 -0
- package/package.json +61 -0
- package/web/index.d.mts +33 -0
- package/web/index.d.ts +33 -0
- package/web/index.js +442 -0
- package/web/index.js.map +1 -0
- package/web/index.mjs +412 -0
- package/web/index.mjs.map +1 -0
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ThemeOverrideProps } from '@xsolla/xui-core';
|
|
3
|
+
import { ButtonProps, IconButtonProps } from '@xsolla/xui-button';
|
|
4
|
+
|
|
5
|
+
type ActionButtonElement = React.ReactElement<ButtonProps | IconButtonProps>;
|
|
6
|
+
interface NotificationPanelProps extends ThemeOverrideProps {
|
|
7
|
+
/** Visual variant/tone of the notification */
|
|
8
|
+
type?: "alert" | "warning" | "success" | "neutral" | "brand";
|
|
9
|
+
/** Title text (optional) */
|
|
10
|
+
title?: string;
|
|
11
|
+
/** Description text (optional) */
|
|
12
|
+
description?: string;
|
|
13
|
+
/** Show/hide the icon frame */
|
|
14
|
+
showIcon?: boolean;
|
|
15
|
+
/** Custom icon override (optional) */
|
|
16
|
+
icon?: React.ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Action button (optional - pass any Button/IconButton component).
|
|
19
|
+
* The `tone`, `size`, and `variant` props will be automatically set.
|
|
20
|
+
*/
|
|
21
|
+
actionButton?: React.ReactElement;
|
|
22
|
+
/** Show/hide close button */
|
|
23
|
+
showCloseButton?: boolean;
|
|
24
|
+
/** Close button click handler */
|
|
25
|
+
onClose?: () => void;
|
|
26
|
+
/** Vertical alignment of the close button — "top" (default) or "center" */
|
|
27
|
+
closeButtonAlign?: "center" | "top";
|
|
28
|
+
/** Test ID for testing frameworks */
|
|
29
|
+
testID?: string;
|
|
30
|
+
}
|
|
31
|
+
declare const NotificationPanel: React.FC<NotificationPanelProps>;
|
|
32
|
+
|
|
33
|
+
export { type ActionButtonElement, NotificationPanel, type NotificationPanelProps };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ThemeOverrideProps } from '@xsolla/xui-core';
|
|
3
|
+
import { ButtonProps, IconButtonProps } from '@xsolla/xui-button';
|
|
4
|
+
|
|
5
|
+
type ActionButtonElement = React.ReactElement<ButtonProps | IconButtonProps>;
|
|
6
|
+
interface NotificationPanelProps extends ThemeOverrideProps {
|
|
7
|
+
/** Visual variant/tone of the notification */
|
|
8
|
+
type?: "alert" | "warning" | "success" | "neutral" | "brand";
|
|
9
|
+
/** Title text (optional) */
|
|
10
|
+
title?: string;
|
|
11
|
+
/** Description text (optional) */
|
|
12
|
+
description?: string;
|
|
13
|
+
/** Show/hide the icon frame */
|
|
14
|
+
showIcon?: boolean;
|
|
15
|
+
/** Custom icon override (optional) */
|
|
16
|
+
icon?: React.ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Action button (optional - pass any Button/IconButton component).
|
|
19
|
+
* The `tone`, `size`, and `variant` props will be automatically set.
|
|
20
|
+
*/
|
|
21
|
+
actionButton?: React.ReactElement;
|
|
22
|
+
/** Show/hide close button */
|
|
23
|
+
showCloseButton?: boolean;
|
|
24
|
+
/** Close button click handler */
|
|
25
|
+
onClose?: () => void;
|
|
26
|
+
/** Vertical alignment of the close button — "top" (default) or "center" */
|
|
27
|
+
closeButtonAlign?: "center" | "top";
|
|
28
|
+
/** Test ID for testing frameworks */
|
|
29
|
+
testID?: string;
|
|
30
|
+
}
|
|
31
|
+
declare const NotificationPanel: React.FC<NotificationPanelProps>;
|
|
32
|
+
|
|
33
|
+
export { type ActionButtonElement, NotificationPanel, type NotificationPanelProps };
|
package/native/index.js
ADDED
|
@@ -0,0 +1,360 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.tsx
|
|
21
|
+
var index_exports = {};
|
|
22
|
+
__export(index_exports, {
|
|
23
|
+
NotificationPanel: () => NotificationPanel
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(index_exports);
|
|
26
|
+
|
|
27
|
+
// src/NotificationPanel.tsx
|
|
28
|
+
var import_react = require("react");
|
|
29
|
+
|
|
30
|
+
// ../../foundation/primitives-native/src/Box.tsx
|
|
31
|
+
var import_react_native = require("react-native");
|
|
32
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
|
+
var Box = ({
|
|
34
|
+
children,
|
|
35
|
+
onPress,
|
|
36
|
+
onLayout,
|
|
37
|
+
onMoveShouldSetResponder,
|
|
38
|
+
onResponderGrant,
|
|
39
|
+
onResponderMove,
|
|
40
|
+
onResponderRelease,
|
|
41
|
+
onResponderTerminate,
|
|
42
|
+
backgroundColor,
|
|
43
|
+
borderColor,
|
|
44
|
+
borderWidth,
|
|
45
|
+
borderBottomWidth,
|
|
46
|
+
borderBottomColor,
|
|
47
|
+
borderTopWidth,
|
|
48
|
+
borderTopColor,
|
|
49
|
+
borderLeftWidth,
|
|
50
|
+
borderLeftColor,
|
|
51
|
+
borderRightWidth,
|
|
52
|
+
borderRightColor,
|
|
53
|
+
borderRadius,
|
|
54
|
+
borderStyle,
|
|
55
|
+
height,
|
|
56
|
+
padding,
|
|
57
|
+
paddingHorizontal,
|
|
58
|
+
paddingVertical,
|
|
59
|
+
margin,
|
|
60
|
+
marginTop,
|
|
61
|
+
marginBottom,
|
|
62
|
+
marginLeft,
|
|
63
|
+
marginRight,
|
|
64
|
+
flexDirection,
|
|
65
|
+
alignItems,
|
|
66
|
+
justifyContent,
|
|
67
|
+
position,
|
|
68
|
+
top,
|
|
69
|
+
bottom,
|
|
70
|
+
left,
|
|
71
|
+
right,
|
|
72
|
+
width,
|
|
73
|
+
minWidth,
|
|
74
|
+
minHeight,
|
|
75
|
+
maxWidth,
|
|
76
|
+
maxHeight,
|
|
77
|
+
flex,
|
|
78
|
+
overflow,
|
|
79
|
+
zIndex,
|
|
80
|
+
hoverStyle,
|
|
81
|
+
pressStyle,
|
|
82
|
+
style,
|
|
83
|
+
"data-testid": dataTestId,
|
|
84
|
+
testID,
|
|
85
|
+
as,
|
|
86
|
+
src,
|
|
87
|
+
alt,
|
|
88
|
+
...rest
|
|
89
|
+
}) => {
|
|
90
|
+
const getContainerStyle = (pressed) => ({
|
|
91
|
+
backgroundColor: pressed && pressStyle?.backgroundColor ? pressStyle.backgroundColor : backgroundColor,
|
|
92
|
+
borderColor,
|
|
93
|
+
borderWidth,
|
|
94
|
+
borderBottomWidth,
|
|
95
|
+
borderBottomColor,
|
|
96
|
+
borderTopWidth,
|
|
97
|
+
borderTopColor,
|
|
98
|
+
borderLeftWidth,
|
|
99
|
+
borderLeftColor,
|
|
100
|
+
borderRightWidth,
|
|
101
|
+
borderRightColor,
|
|
102
|
+
borderRadius,
|
|
103
|
+
borderStyle,
|
|
104
|
+
overflow,
|
|
105
|
+
zIndex,
|
|
106
|
+
height,
|
|
107
|
+
width,
|
|
108
|
+
minWidth,
|
|
109
|
+
minHeight,
|
|
110
|
+
maxWidth,
|
|
111
|
+
maxHeight,
|
|
112
|
+
padding,
|
|
113
|
+
paddingHorizontal,
|
|
114
|
+
paddingVertical,
|
|
115
|
+
margin,
|
|
116
|
+
marginTop,
|
|
117
|
+
marginBottom,
|
|
118
|
+
marginLeft,
|
|
119
|
+
marginRight,
|
|
120
|
+
flexDirection,
|
|
121
|
+
alignItems,
|
|
122
|
+
justifyContent,
|
|
123
|
+
position,
|
|
124
|
+
top,
|
|
125
|
+
bottom,
|
|
126
|
+
left,
|
|
127
|
+
right,
|
|
128
|
+
flex,
|
|
129
|
+
...style
|
|
130
|
+
});
|
|
131
|
+
const finalTestID = dataTestId || testID;
|
|
132
|
+
const {
|
|
133
|
+
role,
|
|
134
|
+
tabIndex,
|
|
135
|
+
onKeyDown,
|
|
136
|
+
onKeyUp,
|
|
137
|
+
"aria-label": _ariaLabel,
|
|
138
|
+
"aria-labelledby": _ariaLabelledBy,
|
|
139
|
+
"aria-current": _ariaCurrent,
|
|
140
|
+
"aria-disabled": _ariaDisabled,
|
|
141
|
+
"aria-live": _ariaLive,
|
|
142
|
+
className,
|
|
143
|
+
"data-testid": _dataTestId,
|
|
144
|
+
...nativeRest
|
|
145
|
+
} = rest;
|
|
146
|
+
if (as === "img" && src) {
|
|
147
|
+
const imageStyle = {
|
|
148
|
+
width,
|
|
149
|
+
height,
|
|
150
|
+
borderRadius,
|
|
151
|
+
position,
|
|
152
|
+
top,
|
|
153
|
+
bottom,
|
|
154
|
+
left,
|
|
155
|
+
right,
|
|
156
|
+
...style
|
|
157
|
+
};
|
|
158
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
159
|
+
import_react_native.Image,
|
|
160
|
+
{
|
|
161
|
+
source: { uri: src },
|
|
162
|
+
style: imageStyle,
|
|
163
|
+
testID: finalTestID,
|
|
164
|
+
resizeMode: "cover",
|
|
165
|
+
...nativeRest
|
|
166
|
+
}
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
if (onPress) {
|
|
170
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
171
|
+
import_react_native.Pressable,
|
|
172
|
+
{
|
|
173
|
+
onPress,
|
|
174
|
+
onLayout,
|
|
175
|
+
onMoveShouldSetResponder,
|
|
176
|
+
onResponderGrant,
|
|
177
|
+
onResponderMove,
|
|
178
|
+
onResponderRelease,
|
|
179
|
+
onResponderTerminate,
|
|
180
|
+
style: ({ pressed }) => getContainerStyle(pressed),
|
|
181
|
+
testID: finalTestID,
|
|
182
|
+
...nativeRest,
|
|
183
|
+
children
|
|
184
|
+
}
|
|
185
|
+
);
|
|
186
|
+
}
|
|
187
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
188
|
+
import_react_native.View,
|
|
189
|
+
{
|
|
190
|
+
style: getContainerStyle(),
|
|
191
|
+
testID: finalTestID,
|
|
192
|
+
onLayout,
|
|
193
|
+
onMoveShouldSetResponder,
|
|
194
|
+
onResponderGrant,
|
|
195
|
+
onResponderMove,
|
|
196
|
+
onResponderRelease,
|
|
197
|
+
onResponderTerminate,
|
|
198
|
+
...nativeRest,
|
|
199
|
+
children
|
|
200
|
+
}
|
|
201
|
+
);
|
|
202
|
+
};
|
|
203
|
+
|
|
204
|
+
// src/NotificationPanel.tsx
|
|
205
|
+
var import_xui_core = require("@xsolla/xui-core");
|
|
206
|
+
var import_xui_button = require("@xsolla/xui-button");
|
|
207
|
+
var import_xui_typography = require("@xsolla/xui-typography");
|
|
208
|
+
var import_xui_icons_base = require("@xsolla/xui-icons-base");
|
|
209
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
210
|
+
var NotificationPanel = ({
|
|
211
|
+
type = "neutral",
|
|
212
|
+
title,
|
|
213
|
+
description,
|
|
214
|
+
showIcon = true,
|
|
215
|
+
icon,
|
|
216
|
+
actionButton,
|
|
217
|
+
showCloseButton = true,
|
|
218
|
+
onClose,
|
|
219
|
+
closeButtonAlign = "top",
|
|
220
|
+
testID,
|
|
221
|
+
themeMode,
|
|
222
|
+
themeProductContext
|
|
223
|
+
}) => {
|
|
224
|
+
const { theme } = (0, import_xui_core.useResolvedTheme)({ themeMode, themeProductContext });
|
|
225
|
+
const config = theme.sizing.notificationPanel();
|
|
226
|
+
const typeConfig = {
|
|
227
|
+
alert: {
|
|
228
|
+
panelBg: theme.colors.overlay.alert,
|
|
229
|
+
iconFrameBg: theme.colors.overlay.alert,
|
|
230
|
+
iconColor: theme.colors.content.primary,
|
|
231
|
+
buttonTone: "alert",
|
|
232
|
+
IconComponent: import_xui_icons_base.ExclamationMarkSq
|
|
233
|
+
},
|
|
234
|
+
warning: {
|
|
235
|
+
panelBg: theme.colors.overlay.warning,
|
|
236
|
+
iconFrameBg: theme.colors.background.warning.primary,
|
|
237
|
+
iconColor: theme.colors.content.primary,
|
|
238
|
+
buttonTone: "mono",
|
|
239
|
+
IconComponent: import_xui_icons_base.ExclamationMarkSq
|
|
240
|
+
},
|
|
241
|
+
success: {
|
|
242
|
+
panelBg: theme.colors.overlay.success,
|
|
243
|
+
iconFrameBg: theme.colors.background.success.primary,
|
|
244
|
+
iconColor: theme.colors.content.primary,
|
|
245
|
+
buttonTone: "brandExtra",
|
|
246
|
+
IconComponent: import_xui_icons_base.CheckCr
|
|
247
|
+
},
|
|
248
|
+
neutral: {
|
|
249
|
+
panelBg: theme.colors.overlay.mono,
|
|
250
|
+
iconFrameBg: theme.colors.overlay.mono,
|
|
251
|
+
iconColor: theme.colors.content.primary,
|
|
252
|
+
buttonTone: "mono",
|
|
253
|
+
IconComponent: import_xui_icons_base.InfoSq
|
|
254
|
+
},
|
|
255
|
+
brand: {
|
|
256
|
+
panelBg: theme.colors.overlay.brand,
|
|
257
|
+
iconFrameBg: theme.colors.overlay.brand,
|
|
258
|
+
iconColor: theme.colors.content.primary,
|
|
259
|
+
buttonTone: "brand",
|
|
260
|
+
IconComponent: import_xui_icons_base.InfoSq
|
|
261
|
+
}
|
|
262
|
+
};
|
|
263
|
+
const currentConfig = typeConfig[type];
|
|
264
|
+
const IconComponent = currentConfig.IconComponent;
|
|
265
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
266
|
+
Box,
|
|
267
|
+
{
|
|
268
|
+
backgroundColor: currentConfig.panelBg,
|
|
269
|
+
borderRadius: config.borderRadius,
|
|
270
|
+
flexDirection: "row",
|
|
271
|
+
alignItems: "stretch",
|
|
272
|
+
overflow: "hidden",
|
|
273
|
+
testID,
|
|
274
|
+
role: type === "alert" ? "alert" : "status",
|
|
275
|
+
"aria-label": `${type} notification`,
|
|
276
|
+
children: [
|
|
277
|
+
showIcon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
278
|
+
Box,
|
|
279
|
+
{
|
|
280
|
+
backgroundColor: currentConfig.iconFrameBg,
|
|
281
|
+
width: config.iconFrameWidth,
|
|
282
|
+
alignItems: "center",
|
|
283
|
+
justifyContent: "center",
|
|
284
|
+
style: {
|
|
285
|
+
borderTopLeftRadius: config.borderRadius,
|
|
286
|
+
borderBottomLeftRadius: config.borderRadius
|
|
287
|
+
},
|
|
288
|
+
children: icon || /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
289
|
+
IconComponent,
|
|
290
|
+
{
|
|
291
|
+
size: config.iconSize,
|
|
292
|
+
color: currentConfig.iconColor,
|
|
293
|
+
variant: "solid"
|
|
294
|
+
}
|
|
295
|
+
)
|
|
296
|
+
}
|
|
297
|
+
),
|
|
298
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
299
|
+
Box,
|
|
300
|
+
{
|
|
301
|
+
flex: 1,
|
|
302
|
+
flexDirection: "row",
|
|
303
|
+
alignItems: "center",
|
|
304
|
+
paddingHorizontal: config.bodyPaddingHorizontal,
|
|
305
|
+
paddingVertical: config.bodyPaddingVertical,
|
|
306
|
+
gap: config.contentGap,
|
|
307
|
+
children: [
|
|
308
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(Box, { flex: 1, gap: config.textGap, children: [
|
|
309
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
310
|
+
import_xui_typography.Typography,
|
|
311
|
+
{
|
|
312
|
+
variant: "bodyMdAccent",
|
|
313
|
+
color: theme.colors.content.primary,
|
|
314
|
+
children: title
|
|
315
|
+
}
|
|
316
|
+
),
|
|
317
|
+
description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_typography.Typography, { variant: "bodySm", color: theme.colors.content.tertiary, children: description })
|
|
318
|
+
] }),
|
|
319
|
+
(actionButton || showCloseButton) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
|
|
320
|
+
Box,
|
|
321
|
+
{
|
|
322
|
+
flexDirection: "row",
|
|
323
|
+
alignSelf: closeButtonAlign === "top" ? "stretch" : "center",
|
|
324
|
+
alignItems: closeButtonAlign === "top" ? "flex-start" : "center",
|
|
325
|
+
justifyContent: "flex-start",
|
|
326
|
+
paddingVertical: closeButtonAlign === "top" ? 4 : 0,
|
|
327
|
+
gap: config.buttonsGap,
|
|
328
|
+
children: [
|
|
329
|
+
(0, import_react.isValidElement)(actionButton) && (0, import_react.cloneElement)(actionButton, {
|
|
330
|
+
size: "xs",
|
|
331
|
+
variant: "secondary"
|
|
332
|
+
}),
|
|
333
|
+
showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
334
|
+
import_xui_button.IconButton,
|
|
335
|
+
{
|
|
336
|
+
variant: "tertiary",
|
|
337
|
+
tone: "mono",
|
|
338
|
+
size: "xs",
|
|
339
|
+
onPress: onClose,
|
|
340
|
+
"aria-label": "Close notification",
|
|
341
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_xui_icons_base.Remove, { size: 18 }),
|
|
342
|
+
hoverBackground: "none"
|
|
343
|
+
}
|
|
344
|
+
)
|
|
345
|
+
]
|
|
346
|
+
}
|
|
347
|
+
)
|
|
348
|
+
]
|
|
349
|
+
}
|
|
350
|
+
)
|
|
351
|
+
]
|
|
352
|
+
}
|
|
353
|
+
);
|
|
354
|
+
};
|
|
355
|
+
NotificationPanel.displayName = "NotificationPanel";
|
|
356
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
357
|
+
0 && (module.exports = {
|
|
358
|
+
NotificationPanel
|
|
359
|
+
});
|
|
360
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../src/NotificationPanel.tsx","../../../../foundation/primitives-native/src/Box.tsx"],"sourcesContent":["export { NotificationPanel } from \"./NotificationPanel\";\nexport type {\n NotificationPanelProps,\n ActionButtonElement,\n} from \"./NotificationPanel\";\n","import React, { cloneElement, isValidElement } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useResolvedTheme, type ThemeOverrideProps } from \"@xsolla/xui-core\";\nimport {\n IconButton,\n type ButtonProps,\n type IconButtonProps,\n} from \"@xsolla/xui-button\";\nimport { Typography } from \"@xsolla/xui-typography\";\nimport {\n ExclamationMarkSq,\n InfoSq,\n CheckCr,\n Remove,\n type BaseIconComponent,\n} from \"@xsolla/xui-icons-base\";\n\nexport type ActionButtonElement = React.ReactElement<\n ButtonProps | IconButtonProps\n>;\n\nexport interface NotificationPanelProps extends ThemeOverrideProps {\n /** Visual variant/tone of the notification */\n type?: \"alert\" | \"warning\" | \"success\" | \"neutral\" | \"brand\";\n /** Title text (optional) */\n title?: string;\n /** Description text (optional) */\n description?: string;\n /** Show/hide the icon frame */\n showIcon?: boolean;\n /** Custom icon override (optional) */\n icon?: React.ReactNode;\n /**\n * Action button (optional - pass any Button/IconButton component).\n * The `tone`, `size`, and `variant` props will be automatically set.\n */\n actionButton?: React.ReactElement;\n /** Show/hide close button */\n showCloseButton?: boolean;\n /** Close button click handler */\n onClose?: () => void;\n /** Vertical alignment of the close button — \"top\" (default) or \"center\" */\n closeButtonAlign?: \"center\" | \"top\";\n /** Test ID for testing frameworks */\n testID?: string;\n}\n\nexport const NotificationPanel: React.FC<NotificationPanelProps> = ({\n type = \"neutral\",\n title,\n description,\n showIcon = true,\n icon,\n actionButton,\n showCloseButton = true,\n onClose,\n closeButtonAlign = \"top\",\n testID,\n themeMode,\n themeProductContext,\n}) => {\n const { theme } = useResolvedTheme({ themeMode, themeProductContext });\n const config = theme.sizing.notificationPanel();\n\n const typeConfig: Record<\n NonNullable<NotificationPanelProps[\"type\"]>,\n {\n panelBg: string;\n iconFrameBg: string;\n iconColor: string;\n buttonTone: \"brand\" | \"brandExtra\" | \"alert\" | \"mono\";\n IconComponent: BaseIconComponent;\n }\n > = {\n alert: {\n panelBg: theme.colors.overlay.alert,\n iconFrameBg: theme.colors.overlay.alert,\n iconColor: theme.colors.content.primary,\n buttonTone: \"alert\",\n IconComponent: ExclamationMarkSq,\n },\n warning: {\n panelBg: theme.colors.overlay.warning,\n iconFrameBg: theme.colors.background.warning.primary,\n iconColor: theme.colors.content.primary,\n buttonTone: \"mono\",\n IconComponent: ExclamationMarkSq,\n },\n success: {\n panelBg: theme.colors.overlay.success,\n iconFrameBg: theme.colors.background.success.primary,\n iconColor: theme.colors.content.primary,\n buttonTone: \"brandExtra\",\n IconComponent: CheckCr,\n },\n neutral: {\n panelBg: theme.colors.overlay.mono,\n iconFrameBg: theme.colors.overlay.mono,\n iconColor: theme.colors.content.primary,\n buttonTone: \"mono\",\n IconComponent: InfoSq,\n },\n brand: {\n panelBg: theme.colors.overlay.brand,\n iconFrameBg: theme.colors.overlay.brand,\n iconColor: theme.colors.content.primary,\n buttonTone: \"brand\",\n IconComponent: InfoSq,\n },\n };\n\n const currentConfig = typeConfig[type];\n const IconComponent = currentConfig.IconComponent;\n\n return (\n <Box\n backgroundColor={currentConfig.panelBg}\n borderRadius={config.borderRadius}\n flexDirection=\"row\"\n alignItems=\"stretch\"\n overflow=\"hidden\"\n testID={testID}\n role={type === \"alert\" ? \"alert\" : \"status\"}\n aria-label={`${type} notification`}\n >\n {/* Icon Frame */}\n {showIcon && (\n <Box\n backgroundColor={currentConfig.iconFrameBg}\n width={config.iconFrameWidth}\n alignItems=\"center\"\n justifyContent=\"center\"\n style={{\n borderTopLeftRadius: config.borderRadius,\n borderBottomLeftRadius: config.borderRadius,\n }}\n >\n {icon || (\n <IconComponent\n size={config.iconSize}\n color={currentConfig.iconColor}\n variant=\"solid\"\n />\n )}\n </Box>\n )}\n\n {/* Body */}\n <Box\n flex={1}\n flexDirection=\"row\"\n alignItems=\"center\"\n paddingHorizontal={config.bodyPaddingHorizontal}\n paddingVertical={config.bodyPaddingVertical}\n gap={config.contentGap}\n >\n {/* Text Content */}\n <Box flex={1} gap={config.textGap}>\n {title && (\n <Typography\n variant=\"bodyMdAccent\"\n color={theme.colors.content.primary}\n >\n {title}\n </Typography>\n )}\n {description && (\n <Typography variant=\"bodySm\" color={theme.colors.content.tertiary}>\n {description}\n </Typography>\n )}\n </Box>\n\n {/* Buttons */}\n {(actionButton || showCloseButton) && (\n <Box\n flexDirection=\"row\"\n alignSelf={closeButtonAlign === \"top\" ? \"stretch\" : \"center\"}\n alignItems={closeButtonAlign === \"top\" ? \"flex-start\" : \"center\"}\n justifyContent=\"flex-start\"\n paddingVertical={closeButtonAlign === \"top\" ? 4 : 0}\n gap={config.buttonsGap}\n >\n {isValidElement(actionButton) &&\n cloneElement(actionButton as ActionButtonElement, {\n size: \"xs\",\n variant: \"secondary\",\n })}\n\n {showCloseButton && (\n <IconButton\n variant=\"tertiary\"\n tone=\"mono\"\n size=\"xs\"\n onPress={onClose}\n aria-label=\"Close notification\"\n icon={<Remove size={18} />}\n hoverBackground=\"none\"\n />\n )}\n </Box>\n )}\n </Box>\n </Box>\n );\n};\n\nNotificationPanel.displayName = \"NotificationPanel\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n minWidth,\n minHeight,\n maxWidth,\n maxHeight,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n minWidth: minWidth as DimensionValue,\n minHeight: minHeight as DimensionValue,\n maxWidth: maxWidth as DimensionValue,\n maxHeight: maxHeight as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n"],"mappings":"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","names":["import_jsx_runtime"]}
|