@xsolla/xui-status 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 +82 -184
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,267 +1,165 @@
1
1
  # Status
2
2
 
3
- A cross-platform React status indicator component that displays a colored dot with an optional text label to indicate state or condition.
3
+ A cross-platform React status indicator that pairs a coloured dot with an optional inline label.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
8
  npm install @xsolla/xui-status
9
- # or
10
- yarn add @xsolla/xui-status
11
9
  ```
12
10
 
13
- ## Demo
14
-
15
- ### Basic Status
16
-
17
- ```tsx
18
- import * as React from 'react';
19
- import { Status } from '@xsolla/xui-status';
20
-
21
- export default function BasicStatus() {
22
- return (
23
- <div style={{ display: 'flex', gap: 24 }}>
24
- <Status palette="success">Active</Status>
25
- <Status palette="warning">Pending</Status>
26
- <Status palette="alert">Error</Status>
27
- <Status palette="neutral">Inactive</Status>
28
- </div>
29
- );
30
- }
31
- ```
32
-
33
- ### Dot Only
11
+ ## Imports
34
12
 
35
13
  ```tsx
36
- import * as React from 'react';
37
- import { Status } from '@xsolla/xui-status';
38
-
39
- export default function DotOnly() {
40
- return (
41
- <div style={{ display: 'flex', gap: 16 }}>
42
- <Status palette="success" />
43
- <Status palette="warning" />
44
- <Status palette="alert" />
45
- <Status palette="neutral" />
46
- </div>
47
- );
48
- }
14
+ import {
15
+ Status,
16
+ type StatusProps,
17
+ type StatusPalette,
18
+ type StatusSize,
19
+ type StatusLabelType,
20
+ } from '@xsolla/xui-status';
49
21
  ```
50
22
 
51
- ### Different Sizes
23
+ ## Quick start
52
24
 
53
25
  ```tsx
54
26
  import * as React from 'react';
55
27
  import { Status } from '@xsolla/xui-status';
56
28
 
57
- export default function Sizes() {
58
- return (
59
- <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
60
- <Status size="sm" palette="success">Small</Status>
61
- <Status size="md" palette="success">Medium</Status>
62
- <Status size="lg" palette="success">Large</Status>
63
- </div>
64
- );
29
+ export default function QuickStart() {
30
+ return <Status palette="success">Active</Status>;
65
31
  }
66
32
  ```
67
33
 
68
- ## Anatomy
34
+ ## API Reference
69
35
 
70
- ```jsx
71
- import { Status } from '@xsolla/xui-status';
36
+ ### `<Status>`
72
37
 
73
- <Status
74
- palette="success" // success, warning, alert, neutral, default
75
- size="md" // s, m, l
76
- labelType="primary" // primary or dot-color
77
- uppercase={true} // Uppercase text
78
- >
79
- Label text
80
- </Status>
81
- ```
38
+ | Prop | Type | Default | Description |
39
+ | --- | --- | --- | --- |
40
+ | `children` | `ReactNode` | — | Optional label text rendered next to the dot. |
41
+ | `palette` | `"default" \| "success" \| "warning" \| "alert" \| "neutral"` | `"default"` | Colour palette for the dot (and optionally the label). |
42
+ | `size` | `"sm" \| "md" \| "lg"` | `"md"` | Dot size, gap, and label typography. |
43
+ | `labelType` | `"primary" \| "dot-color"` | `"primary"` | Label colour mode — primary text colour or matching the dot. |
44
+ | `aria-label` | `string` | auto | Accessible label. Auto-generated from `palette` and string `children` when omitted. Required for non-string children or localised strings. |
45
+ | `aria-live` | `"polite" \| "assertive" \| "off"` | — | Live-region behaviour. `"assertive"` switches the role to `alert`; `"off"` removes the live-region role entirely. |
46
+ | `id` | `string` | — | HTML `id` attribute. |
47
+ | `testID` | `string` | — | Test identifier. |
48
+
49
+ Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
50
+
51
+ ### Sizes
52
+
53
+ | Size | Dot | Gap | Font / line height |
54
+ | --- | --- | --- | --- |
55
+ | `sm` | 4px | 4px | 12px / 16px |
56
+ | `md` | 6px | 6px | 14px / 20px |
57
+ | `lg` | 8px | 8px | 16px / 24px |
58
+
59
+ ### Palettes
60
+
61
+ | Palette | Use case |
62
+ | --- | --- |
63
+ | `success` | Active, completed, operational. |
64
+ | `warning` | Pending, degraded, attention needed. |
65
+ | `alert` | Error, failed, critical. |
66
+ | `neutral` | Inactive, offline, cancelled. |
67
+ | `default` | Generic / disabled state. |
82
68
 
83
69
  ## Examples
84
70
 
85
- ### Order Status
71
+ ### Palettes
86
72
 
87
73
  ```tsx
88
74
  import * as React from 'react';
89
75
  import { Status } from '@xsolla/xui-status';
90
76
 
91
- export default function OrderStatus() {
92
- const orders = [
93
- { id: '001', status: 'Completed', palette: 'success' as const },
94
- { id: '002', status: 'Processing', palette: 'warning' as const },
95
- { id: '003', status: 'Failed', palette: 'alert' as const },
96
- { id: '004', status: 'Cancelled', palette: 'neutral' as const },
97
- ];
98
-
77
+ export default function StatusPalettes() {
99
78
  return (
100
- <table style={{ width: '100%', borderCollapse: 'collapse' }}>
101
- <thead>
102
- <tr>
103
- <th style={{ textAlign: 'left', padding: 8 }}>Order ID</th>
104
- <th style={{ textAlign: 'left', padding: 8 }}>Status</th>
105
- </tr>
106
- </thead>
107
- <tbody>
108
- {orders.map(({ id, status, palette }) => (
109
- <tr key={id}>
110
- <td style={{ padding: 8 }}>{id}</td>
111
- <td style={{ padding: 8 }}>
112
- <Status palette={palette}>{status}</Status>
113
- </td>
114
- </tr>
115
- ))}
116
- </tbody>
117
- </table>
79
+ <div style={{ display: 'flex', gap: 24 }}>
80
+ <Status palette="success">Active</Status>
81
+ <Status palette="warning">Pending</Status>
82
+ <Status palette="alert">Error</Status>
83
+ <Status palette="neutral">Inactive</Status>
84
+ </div>
118
85
  );
119
86
  }
120
87
  ```
121
88
 
122
- ### Service Health
89
+ ### Dot only
123
90
 
124
91
  ```tsx
125
92
  import * as React from 'react';
126
93
  import { Status } from '@xsolla/xui-status';
127
94
 
128
- export default function ServiceHealth() {
129
- const services = [
130
- { name: 'API', status: 'operational', palette: 'success' as const },
131
- { name: 'Database', status: 'degraded', palette: 'warning' as const },
132
- { name: 'CDN', status: 'operational', palette: 'success' as const },
133
- { name: 'Auth', status: 'outage', palette: 'alert' as const },
134
- ];
135
-
95
+ export default function DotOnly() {
136
96
  return (
137
- <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
138
- {services.map(({ name, status, palette }) => (
139
- <div
140
- key={name}
141
- style={{
142
- display: 'flex',
143
- justifyContent: 'space-between',
144
- padding: 12,
145
- border: '1px solid #e0e0e0',
146
- borderRadius: 8,
147
- }}
148
- >
149
- <span>{name}</span>
150
- <Status palette={palette}>{status}</Status>
151
- </div>
152
- ))}
97
+ <div style={{ display: 'flex', gap: 16 }}>
98
+ <Status palette="success" aria-label="Online" />
99
+ <Status palette="warning" aria-label="Away" />
100
+ <Status palette="alert" aria-label="Offline" />
153
101
  </div>
154
102
  );
155
103
  }
156
104
  ```
157
105
 
158
- ### User Online Status
106
+ ### Sizes
159
107
 
160
108
  ```tsx
161
109
  import * as React from 'react';
162
110
  import { Status } from '@xsolla/xui-status';
163
- import { Avatar } from '@xsolla/xui-avatar';
164
-
165
- export default function UserOnlineStatus() {
166
- const users = [
167
- { name: 'John Doe', online: true },
168
- { name: 'Jane Smith', online: true },
169
- { name: 'Bob Wilson', online: false },
170
- ];
171
111
 
112
+ export default function StatusSizes() {
172
113
  return (
173
- <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
174
- {users.map(({ name, online }) => (
175
- <div key={name} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
176
- <Avatar size="md" text={name.split(' ').map(n => n[0]).join('')} />
177
- <span style={{ flex: 1 }}>{name}</span>
178
- <Status
179
- palette={online ? 'success' : 'neutral'}
180
- size="sm"
181
- >
182
- {online ? 'Online' : 'Offline'}
183
- </Status>
184
- </div>
185
- ))}
114
+ <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
115
+ <Status size="sm" palette="success">Small</Status>
116
+ <Status size="md" palette="success">Medium</Status>
117
+ <Status size="lg" palette="success">Large</Status>
186
118
  </div>
187
119
  );
188
120
  }
189
121
  ```
190
122
 
191
- ### Colored Label
123
+ ### Coloured label
192
124
 
193
125
  ```tsx
194
126
  import * as React from 'react';
195
127
  import { Status } from '@xsolla/xui-status';
196
128
 
197
- export default function ColoredLabel() {
129
+ export default function ColouredLabel() {
198
130
  return (
199
131
  <div style={{ display: 'flex', gap: 24 }}>
200
- <Status palette="success" labelType="primary">Primary Label</Status>
201
- <Status palette="success" labelType="dot-color">Colored Label</Status>
132
+ <Status palette="success" labelType="primary">Primary label</Status>
133
+ <Status palette="success" labelType="dot-color">Coloured label</Status>
202
134
  </div>
203
135
  );
204
136
  }
205
137
  ```
206
138
 
207
- ### Lowercase Status
139
+ ### Live region for dynamic updates
208
140
 
209
141
  ```tsx
210
142
  import * as React from 'react';
211
143
  import { Status } from '@xsolla/xui-status';
212
144
 
213
- export default function LowercaseStatus() {
145
+ export default function LiveStatus() {
146
+ const [palette, setPalette] = React.useState<'success' | 'warning' | 'alert'>('success');
214
147
  return (
215
- <div style={{ display: 'flex', gap: 24 }}>
216
- <Status palette="success" uppercase>UPPERCASE</Status>
217
- <Status palette="success" uppercase={false}>Sentence case</Status>
148
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
149
+ <Status palette={palette} aria-live="polite">
150
+ {palette === 'success' ? 'Connected' : palette === 'warning' ? 'Reconnecting' : 'Disconnected'}
151
+ </Status>
152
+ <button onClick={() => setPalette('warning')}>Reconnect</button>
153
+ <button onClick={() => setPalette('alert')}>Disconnect</button>
154
+ <button onClick={() => setPalette('success')}>Restore</button>
218
155
  </div>
219
156
  );
220
157
  }
221
158
  ```
222
159
 
223
- ## API Reference
224
-
225
- ### Status
226
-
227
- **StatusProps:**
228
-
229
- | Prop | Type | Default | Description |
230
- | :--- | :--- | :------ | :---------- |
231
- | children | `ReactNode` | - | Label text (optional). |
232
- | palette | `"success" \| "warning" \| "alert" \| "neutral" \| "default"` | `"default"` | Status color palette. |
233
- | size | `"sm" \| "md" \| "lg"` | `"md"` | Component size. |
234
- | labelType | `"primary" \| "dot-color"` | `"primary"` | Label color mode. |
235
- | uppercase | `boolean` | `true` | Transform text to uppercase. |
236
-
237
- ## Size Specifications
238
-
239
- | Size | Dot Size | Gap | Font Size | Line Height |
240
- | :--- | :------- | :-- | :-------- | :---------- |
241
- | `sm` | 4px | 4px | 12px | 16px |
242
- | `md` | 6px | 6px | 14px | 20px |
243
- | `lg` | 8px | 8px | 16px | 24px |
244
-
245
- ## Color Palettes
246
-
247
- | Palette | Use Case |
248
- | :------ | :------- |
249
- | `success` | Active, completed, operational |
250
- | `warning` | Pending, degraded, attention needed |
251
- | `alert` | Error, failed, critical |
252
- | `neutral` | Inactive, offline, cancelled |
253
- | `default` | Generic/disabled state |
254
-
255
- ## Label Types
256
-
257
- | Type | Description |
258
- | :--- | :---------- |
259
- | `primary` | Uses theme's primary text color |
260
- | `dot-color` | Uses the same color as the dot |
261
-
262
160
  ## Accessibility
263
161
 
264
- - Status information should not rely solely on color
265
- - Text labels provide context for screen readers
266
- - Consider using `aria-live` for dynamic status updates
267
- - Ensure sufficient color contrast for all palettes
162
+ - Defaults to `role="status"` (implies `aria-live="polite"`); `aria-live="assertive"` switches to `role="alert"`; `aria-live="off"` removes the live-region role.
163
+ - Auto-generates `aria-label` from `palette` + string children. Provide an explicit `aria-label` for non-string content or localised strings.
164
+ - The dot is marked `aria-hidden` so the label (or generated label) carries the meaning.
165
+ - Don't rely on colour alone — keep a textual label when the status is meaningful.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-status",
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,8 +10,8 @@
10
10
  "build:native": "PLATFORM=native tsup"
11
11
  },
12
12
  "dependencies": {
13
- "@xsolla/xui-core": "0.150.0",
14
- "@xsolla/xui-primitives-core": "0.150.0"
13
+ "@xsolla/xui-core": "0.152.0",
14
+ "@xsolla/xui-primitives-core": "0.152.0"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": ">=16.8.0",