@xsolla/xui-spinner 0.148.0 → 0.148.2

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 +180 -0
  2. package/package.json +3 -3
package/README.md ADDED
@@ -0,0 +1,180 @@
1
+ # Spinner
2
+
3
+ A cross-platform React spinner component for indicating loading states. Provides visual feedback while content is being loaded.
4
+
5
+ ## Installation
6
+
7
+ ```bash
8
+ npm install @xsolla/xui-spinner
9
+ # or
10
+ yarn add @xsolla/xui-spinner
11
+ ```
12
+
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
79
+
80
+ ```tsx
81
+ import * as React from 'react';
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);
87
+
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
+ }
99
+ ```
100
+
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
141
+
142
+ ### Spinner
143
+
144
+ A loading indicator component.
145
+
146
+ **Spinner Props:**
147
+
148
+ | Prop | Type | Default | Description |
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.148.0",
3
+ "version": "0.148.2",
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.148.0",
14
- "@xsolla/xui-primitives-core": "0.148.0"
13
+ "@xsolla/xui-core": "0.148.2",
14
+ "@xsolla/xui-primitives-core": "0.148.2"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": ">=16.8.0",