@xsolla/xui-spinner 0.99.0 → 0.101.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 +162 -10
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,28 +1,180 @@
1
- # @xsolla/xui-spinner
1
+ # Spinner
2
2
 
3
- Accessible animated loading indicator.
3
+ A cross-platform React spinner component for indicating loading states. Provides visual feedback while content is being loaded.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
+ npm install @xsolla/xui-spinner
9
+ # or
8
10
  yarn add @xsolla/xui-spinner
9
11
  ```
10
12
 
11
- ## Usage
13
+ ## Demo
14
+
15
+ ### Basic Spinner
16
+
17
+ ```tsx
18
+ import * as React from 'react';
19
+ import { Spinner } from '@xsolla/xui-spinner';
20
+
21
+ export default function BasicSpinner() {
22
+ return <Spinner />;
23
+ }
24
+ ```
25
+
26
+ ### Spinner Sizes
27
+
28
+ ```tsx
29
+ import * as React from 'react';
30
+ import { Spinner } from '@xsolla/xui-spinner';
31
+
32
+ export default function SpinnerSizes() {
33
+ return (
34
+ <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
35
+ <Spinner size="xs" />
36
+ <Spinner size="sm" />
37
+ <Spinner size="md" />
38
+ <Spinner size="lg" />
39
+ <Spinner size="xl" />
40
+ </div>
41
+ );
42
+ }
43
+ ```
44
+
45
+ ### Custom Color Spinner
46
+
47
+ ```tsx
48
+ import * as React from 'react';
49
+ import { Spinner } from '@xsolla/xui-spinner';
50
+
51
+ export default function ColoredSpinner() {
52
+ return (
53
+ <div style={{ display: 'flex', gap: 24 }}>
54
+ <Spinner color="#3498db" />
55
+ <Spinner color="#e74c3c" />
56
+ <Spinner color="#2ecc71" />
57
+ </div>
58
+ );
59
+ }
60
+ ```
61
+
62
+ ## Anatomy
63
+
64
+ Import the component and use it directly:
65
+
66
+ ```jsx
67
+ import { Spinner } from '@xsolla/xui-spinner';
68
+
69
+ <Spinner
70
+ size="md" // Size variant
71
+ color="#custom" // Custom color (optional)
72
+ aria-label="Loading" // Accessible label
73
+ />
74
+ ```
75
+
76
+ ## Examples
77
+
78
+ ### Loading Button State
12
79
 
13
80
  ```tsx
81
+ import * as React from 'react';
14
82
  import { Spinner } from '@xsolla/xui-spinner';
83
+ import { Button } from '@xsolla/xui-button';
84
+
85
+ export default function LoadingButtonState() {
86
+ const [loading, setLoading] = React.useState(false);
15
87
 
16
- <Spinner size="md" />
88
+ const handleClick = () => {
89
+ setLoading(true);
90
+ setTimeout(() => setLoading(false), 2000);
91
+ };
92
+
93
+ return (
94
+ <Button onPress={handleClick} disabled={loading}>
95
+ {loading ? <Spinner size="sm" color="white" /> : 'Submit'}
96
+ </Button>
97
+ );
98
+ }
17
99
  ```
18
100
 
19
- ## Props
101
+ ### Full Page Loading
102
+
103
+ ```tsx
104
+ import * as React from 'react';
105
+ import { Spinner } from '@xsolla/xui-spinner';
106
+
107
+ export default function FullPageLoading() {
108
+ return (
109
+ <div style={{
110
+ display: 'flex',
111
+ justifyContent: 'center',
112
+ alignItems: 'center',
113
+ height: '100vh',
114
+ flexDirection: 'column',
115
+ gap: 16
116
+ }}>
117
+ <Spinner size="xl" />
118
+ <span>Loading content...</span>
119
+ </div>
120
+ );
121
+ }
122
+ ```
123
+
124
+ ### Inline Loading
125
+
126
+ ```tsx
127
+ import * as React from 'react';
128
+ import { Spinner } from '@xsolla/xui-spinner';
129
+
130
+ export default function InlineLoading() {
131
+ return (
132
+ <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
133
+ <Spinner size="sm" />
134
+ <span>Saving changes...</span>
135
+ </div>
136
+ );
137
+ }
138
+ ```
139
+
140
+ ## API Reference
20
141
 
21
142
  ### Spinner
22
143
 
144
+ A loading indicator component.
145
+
146
+ **Spinner Props:**
147
+
23
148
  | Prop | Type | Default | Description |
24
- |------|------|---------|-------------|
25
- | `size` | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Size of the spinner (xl: 96px, lg: 48px, md: 24px, sm: 16px, xs: 8px) |
26
- | `color` | `string` | theme primary | Colour of the spinner; defaults to theme content colour |
27
- | `aria-label` | `string` | `"Loading"` | Accessible label for screen readers |
28
- | `aria-describedby` | `string` | — | ID of the element being loaded |
149
+ | :--- | :--- | :------ | :---------- |
150
+ | size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Size of the spinner. |
151
+ | color | `string` | Theme default | Custom spinner color. |
152
+ | aria-label | `string` | `"Loading"` | Accessible label. |
153
+ | aria-describedby | `string` | - | ID of description element. |
154
+ | testID | `string` | - | Test identifier. |
155
+
156
+ **Size Reference:**
157
+
158
+ | Size | Dimensions |
159
+ | :--- | :--------- |
160
+ | xs | 8px |
161
+ | sm | 16px |
162
+ | md | 24px |
163
+ | lg | 48px |
164
+ | xl | 96px |
165
+
166
+ ## Theming
167
+
168
+ Spinner uses the design system theme for default color:
169
+
170
+ ```typescript
171
+ // Default color from theme
172
+ theme.colors.content.brand // Default spinner color
173
+ ```
174
+
175
+ ## Accessibility
176
+
177
+ - Uses `role="status"` for proper semantics
178
+ - `aria-live="polite"` announces to screen readers
179
+ - Default `aria-label="Loading"` can be customized
180
+ - Supports `aria-describedby` for additional context
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-spinner",
3
- "version": "0.99.0",
3
+ "version": "0.101.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.99.0",
14
- "@xsolla/xui-primitives-core": "0.99.0"
13
+ "@xsolla/xui-core": "0.101.0",
14
+ "@xsolla/xui-primitives-core": "0.101.0"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": ">=16.8.0",