@xsolla/xui-notification 0.150.0 → 0.152.0

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 (2) hide show
  1. package/README.md +64 -89
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -6,121 +6,139 @@ A cross-platform React notification component for displaying alerts, success mes
6
6
 
7
7
  ```bash
8
8
  npm install @xsolla/xui-notification
9
- # or
10
- yarn add @xsolla/xui-notification
11
9
  ```
12
10
 
13
- ## Demo
11
+ ## Imports
14
12
 
15
- ### Basic Notification
13
+ ```tsx
14
+ import { Notification, type NotificationProps } from '@xsolla/xui-notification';
15
+ ```
16
+
17
+ ## Quick start
16
18
 
17
19
  ```tsx
18
20
  import * as React from 'react';
19
21
  import { Notification } from '@xsolla/xui-notification';
20
22
 
21
- export default function BasicNotification() {
23
+ export default function Example() {
22
24
  return (
23
25
  <Notification
26
+ tone="success"
24
27
  title="Success"
25
28
  message="Your changes have been saved."
26
- tone="success"
27
29
  />
28
30
  );
29
31
  }
30
32
  ```
31
33
 
32
- ### Notification Tones
34
+ ## API Reference
35
+
36
+ ### `<Notification>`
37
+
38
+ | Prop | Type | Default | Description |
39
+ | --- | --- | --- | --- |
40
+ | `tone` | `"neutral" \| "success" \| "warning" \| "alert"` | `"neutral"` | Semantic colour tone. |
41
+ | `type` | `"toast" \| "inline"` | `"toast"` | Display mode. `toast` for floating, `inline` for embedded. |
42
+ | `title` | `string` | — | Title text. |
43
+ | `message` | `string` | — | Message body. |
44
+ | `actionLabel` | `string` | — | Optional action label. When set, renders the inline action. |
45
+ | `onAction` | `() => void` | — | Action click handler. |
46
+ | `onClose` | `() => void` | — | Close click handler. |
47
+ | `showClose` | `boolean` | `true` | Show or hide the close button. |
48
+
49
+ Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
50
+
51
+ ### Tone values
52
+
53
+ | Tone | Use case |
54
+ | --- | --- |
55
+ | `neutral` | General information, default state. |
56
+ | `success` | Positive outcomes, confirmations. |
57
+ | `warning` | Caution, requires attention. |
58
+ | `alert` | Errors, critical issues. |
59
+
60
+ ## Examples
61
+
62
+ ### Tones
33
63
 
34
64
  ```tsx
35
65
  import * as React from 'react';
36
66
  import { Notification } from '@xsolla/xui-notification';
37
67
 
38
- export default function NotificationTones() {
68
+ export default function Tones() {
39
69
  return (
40
70
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
41
- <Notification tone="neutral" title="Info" message="This is an informational message." />
42
- <Notification tone="success" title="Success" message="Operation completed successfully." />
43
- <Notification tone="warning" title="Warning" message="Please review before proceeding." />
71
+ <Notification tone="neutral" title="Info" message="Informational message." />
72
+ <Notification tone="success" title="Success" message="Operation completed." />
73
+ <Notification tone="warning" title="Warning" message="Review before proceeding." />
44
74
  <Notification tone="alert" title="Error" message="Something went wrong." />
45
75
  </div>
46
76
  );
47
77
  }
48
78
  ```
49
79
 
50
- ### Notification Types (Toast vs Inline)
80
+ ### Toast vs inline
51
81
 
52
82
  ```tsx
53
83
  import * as React from 'react';
54
84
  import { Notification } from '@xsolla/xui-notification';
55
85
 
56
- export default function NotificationTypes() {
86
+ export default function Types() {
57
87
  return (
58
88
  <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
59
- <Notification
60
- type="toast"
61
- tone="success"
62
- title="Toast Notification"
63
- message="This is a toast-style notification."
64
- />
65
- <Notification
66
- type="inline"
67
- tone="warning"
68
- title="Inline Notification"
69
- message="This is an inline-style notification."
70
- />
89
+ <Notification type="toast" tone="success" title="Toast" message="Floating-style notification." />
90
+ <Notification type="inline" tone="warning" title="Inline" message="Embedded-style notification." />
71
91
  </div>
72
92
  );
73
93
  }
74
94
  ```
75
95
 
76
- ### Dismissible Notification
96
+ ### Dismissible
77
97
 
78
98
  ```tsx
79
99
  import * as React from 'react';
80
100
  import { Notification } from '@xsolla/xui-notification';
81
101
 
82
- export default function DismissibleNotification() {
102
+ export default function Dismissible() {
83
103
  const [visible, setVisible] = React.useState(true);
84
-
85
104
  if (!visible) return null;
86
-
87
105
  return (
88
106
  <Notification
89
107
  title="Notification"
90
- message="Click the X to dismiss this notification."
108
+ message="Click the X to dismiss."
91
109
  onClose={() => setVisible(false)}
92
110
  />
93
111
  );
94
112
  }
95
113
  ```
96
114
 
97
- ### Notification with Action
115
+ ### With action
98
116
 
99
117
  ```tsx
100
118
  import * as React from 'react';
101
119
  import { Notification } from '@xsolla/xui-notification';
102
120
 
103
- export default function ActionNotification() {
121
+ export default function Action() {
104
122
  return (
105
123
  <Notification
106
124
  tone="alert"
107
- title="Session Expiring"
125
+ title="Session expiring"
108
126
  message="Your session will expire in 5 minutes."
109
- actionLabel="Extend Session"
110
- onAction={() => console.log('Session extended')}
111
- onClose={() => console.log('Dismissed')}
127
+ actionLabel="Extend session"
128
+ onAction={() => console.log('extended')}
129
+ onClose={() => console.log('dismissed')}
112
130
  />
113
131
  );
114
132
  }
115
133
  ```
116
134
 
117
- ### Hide Close Button
135
+ ### Persistent (no close button)
118
136
 
119
137
  ```tsx
120
138
  import * as React from 'react';
121
139
  import { Notification } from '@xsolla/xui-notification';
122
140
 
123
- export default function PersistentNotification() {
141
+ export default function Persistent() {
124
142
  return (
125
143
  <Notification
126
144
  tone="warning"
@@ -132,57 +150,14 @@ export default function PersistentNotification() {
132
150
  }
133
151
  ```
134
152
 
135
- ## API Reference
136
-
137
- ### Notification
153
+ ## Accessibility
138
154
 
139
- **Notification Props:**
155
+ - Tone provides visual distinction; pair `title` with `message` for context.
156
+ - Close and action are keyboard-focusable.
157
+ - Icons are decorative.
158
+ - The action element rendered by `actionLabel`/`onAction` is a pressable container, not a `<button>`. If you need full button semantics, render the action through your own focusable component instead.
140
159
 
141
- | Prop | Type | Default | Description |
142
- | :--- | :--- | :------ | :---------- |
143
- | tone | `"neutral" \| "success" \| "warning" \| "alert"` | `"neutral"` | Semantic color tone of the notification. |
144
- | type | `"toast" \| "inline"` | `"toast"` | Display mode - toast for floating notifications, inline for embedded. |
145
- | title | `string` | - | Notification title text. |
146
- | message | `string` | - | Notification message/description text. |
147
- | actionLabel | `string` | - | Text for the action button (optional). |
148
- | onAction | `() => void` | - | Callback when action button is clicked. |
149
- | onClose | `() => void` | - | Callback when close button is clicked. |
150
- | showClose | `boolean` | `true` | Whether to show the close button. |
151
-
152
- ### Tone Values
153
-
154
- | Tone | Use Case |
155
- | :--- | :------- |
156
- | `neutral` | General information, default state |
157
- | `success` | Positive outcomes, confirmations |
158
- | `warning` | Caution, requires attention |
159
- | `alert` | Errors, critical issues |
160
-
161
- ### Type Values
162
-
163
- | Type | Description |
164
- | :--- | :---------- |
165
- | `toast` | Floating notification style, typically used for temporary messages |
166
- | `inline` | Embedded notification style, integrated into the page layout |
167
-
168
- ## Theming
169
-
170
- ```typescript
171
- // Tone-specific colors accessed via theme
172
- theme.colors.background.neutral.secondary // Neutral background
173
- theme.colors.background.success.secondary // Success background
174
- theme.colors.background.warning.secondary // Warning background
175
- theme.colors.background.alert.secondary // Alert/error background
176
-
177
- theme.colors.content.neutral.primary // Neutral icon color
178
- theme.colors.content.success.primary // Success icon color
179
- theme.colors.content.warning.primary // Warning icon color
180
- theme.colors.content.alert.primary // Alert icon color
181
- ```
182
-
183
- ## Accessibility
160
+ ## Related
184
161
 
185
- - Uses semantic color tones for visual distinction
186
- - Close button is keyboard accessible
187
- - Icons are decorative and hidden from screen readers
188
- - Action buttons are focusable and clickable
162
+ - [NotificationPanel](./notification-panel.md) — full-width inline banner variant.
163
+ - [Toast](./toast.md) — programmatic auto-dismissing notifications.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-notification",
3
- "version": "0.150.0",
3
+ "version": "0.152.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -10,9 +10,9 @@
10
10
  "build:native": "PLATFORM=native tsup"
11
11
  },
12
12
  "dependencies": {
13
- "@xsolla/xui-core": "0.150.0",
14
- "@xsolla/xui-icons": "0.150.0",
15
- "@xsolla/xui-primitives-core": "0.150.0"
13
+ "@xsolla/xui-core": "0.152.0",
14
+ "@xsolla/xui-icons": "0.152.0",
15
+ "@xsolla/xui-primitives-core": "0.152.0"
16
16
  },
17
17
  "peerDependencies": {
18
18
  "react": ">=16.8.0",