@xsolla/xui-spinner 0.150.0 → 0.151.0

package/README.md

@@ -1,29 +1,57 @@
 # Spinner
 
-A cross-platform React spinner component for indicating loading states. Provides visual feedback while content is being loaded.
+A cross-platform React loading indicator with five sizes and theme-aware default colour.
 
 ## Installation
 
 ```bash
 npm install @xsolla/xui-spinner
-# or
-yarn add @xsolla/xui-spinner
 ```
 
-## Demo
+## Imports
 
-### Basic Spinner
+```tsx
+import { Spinner, type SpinnerProps } from '@xsolla/xui-spinner';
+```
+
+## Quick start
 
 ```tsx
 import * as React from 'react';
 import { Spinner } from '@xsolla/xui-spinner';
 
-export default function BasicSpinner() {
+export default function QuickStart() {
   return <Spinner />;
 }
 ```
 
-### Spinner Sizes
+## API Reference
+
+### `<Spinner>`
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `size` | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Spinner size. |
+| `color` | `string` | theme `content.primary` | Custom stroke colour. |
+| `aria-label` | `string` | `"Loading"` | Accessible label. |
+| `aria-describedby` | `string` | — | ID of an element describing what's loading. |
+| `testID` | `string` | — | Test identifier. |
+
+Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
+
+### Sizes
+
+| Size | Diameter |
+| --- | --- |
+| `xs` | 8px |
+| `sm` | 16px |
+| `md` | 24px |
+| `lg` | 48px |
+| `xl` | 96px |
+
+## Examples
+
+### Sizes
 
 ```tsx
 import * as React from 'react';
@@ -42,13 +70,13 @@ export default function SpinnerSizes() {
 }
 ```
 
-### Custom Color Spinner
+### Custom colour
 
 ```tsx
 import * as React from 'react';
 import { Spinner } from '@xsolla/xui-spinner';
 
-export default function ColoredSpinner() {
+export default function ColouredSpinners() {
   return (
     <div style={{ display: 'flex', gap: 24 }}>
       <Spinner color="#3498db" />
@@ -59,122 +87,41 @@ export default function ColoredSpinner() {
 }
 ```
 
-## Anatomy
-
-Import the component and use it directly:
-
-```jsx
-import { Spinner } from '@xsolla/xui-spinner';
-
-<Spinner
-  size="md"                  // Size variant
-  color="#custom"           // Custom color (optional)
-  aria-label="Loading"      // Accessible label
-/>
-```
-
-## Examples
-
-### Loading Button State
+### Inline with text
 
 ```tsx
 import * as React from 'react';
 import { Spinner } from '@xsolla/xui-spinner';
-import { Button } from '@xsolla/xui-button';
 
-export default function LoadingButtonState() {
-  const [loading, setLoading] = React.useState(false);
-
-  const handleClick = () => {
-    setLoading(true);
-    setTimeout(() => setLoading(false), 2000);
-  };
-
-  return (
-    <Button onPress={handleClick} disabled={loading}>
-      {loading ? <Spinner size="sm" color="white" /> : 'Submit'}
-    </Button>
-  );
-}
-```
-
-### Full Page Loading
-
-```tsx
-import * as React from 'react';
-import { Spinner } from '@xsolla/xui-spinner';
-
-export default function FullPageLoading() {
+export default function InlineLoading() {
   return (
-    <div style={{
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      height: '100vh',
-      flexDirection: 'column',
-      gap: 16
-    }}>
-      <Spinner size="xl" />
-      <span>Loading content...</span>
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+      <Spinner size="sm" />
+      <span>Saving changes…</span>
     </div>
   );
 }
 ```
 
-### Inline Loading
+### Loading button state
 
 ```tsx
 import * as React from 'react';
 import { Spinner } from '@xsolla/xui-spinner';
+import { Button } from '@xsolla/xui-button';
 
-export default function InlineLoading() {
+export default function LoadingButton() {
+  const [loading, setLoading] = React.useState(false);
   return (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-      <Spinner size="sm" />
-      <span>Saving changes...</span>
-    </div>
+    <Button onPress={() => { setLoading(true); setTimeout(() => setLoading(false), 1200); }} disabled={loading}>
+      {loading ? <Spinner size="sm" color="white" /> : 'Submit'}
+    </Button>
   );
 }
 ```
 
-## API Reference
-
-### Spinner
-
-A loading indicator component.
-
-**Spinner Props:**
-
-| Prop | Type | Default | Description |
-| :--- | :--- | :------ | :---------- |
-| size | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Size of the spinner. |
-| color | `string` | Theme default | Custom spinner color. |
-| aria-label | `string` | `"Loading"` | Accessible label. |
-| aria-describedby | `string` | - | ID of description element. |
-| testID | `string` | - | Test identifier. |
-
-**Size Reference:**
-
-| Size | Dimensions |
-| :--- | :--------- |
-| xs | 8px |
-| sm | 16px |
-| md | 24px |
-| lg | 48px |
-| xl | 96px |
-
-## Theming
-
-Spinner uses the design system theme for default color:
-
-```typescript
-// Default color from theme
-theme.colors.content.brand  // Default spinner color
-```
-
 ## Accessibility
 
-- Uses `role="status"` for proper semantics
-- `aria-live="polite"` announces to screen readers
-- Default `aria-label="Loading"` can be customized
-- Supports `aria-describedby` for additional context
+- Renders with `role="status"` and `aria-live="polite"` so screen readers announce the loading state.
+- Default `aria-label` is `"Loading"`; override for context-specific messages such as `"Loading orders"`.
+- Pair with `aria-describedby` when describing what the spinner relates to.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-spinner",
-  "version": "0.150.0",
+  "version": "0.151.0",
   "main": "./web/index.js",
   "module": "./web/index.mjs",
   "types": "./web/index.d.ts",
@@ -10,8 +10,8 @@
     "build:native": "PLATFORM=native tsup"
   },
   "dependencies": {
-    "@xsolla/xui-core": "0.150.0",
-    "@xsolla/xui-primitives-core": "0.150.0"
+    "@xsolla/xui-core": "0.151.0",
+    "@xsolla/xui-primitives-core": "0.151.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",