@xsolla/xui-spinner 0.99.0 → 0.100.0

package/README.md

@@ -1,28 +1,186 @@
-# @xsolla/xui-spinner
+---
+title: Spinner
+subtitle: A loading spinner indicator.
+description: A cross-platform React spinner component for indicating loading states.
+---
 
-Accessible animated loading indicator.
+# Spinner
+
+A cross-platform React spinner component for indicating loading states. Provides visual feedback while content is being loaded.
 
 ## Installation
 
 ```bash
+npm install @xsolla/xui-spinner
+# or
 yarn add @xsolla/xui-spinner
 ```
 
-## Usage
+## Demo
+
+### Basic Spinner
+
+```tsx
+import * as React from 'react';
+import { Spinner } from '@xsolla/xui-spinner';
+
+export default function BasicSpinner() {
+  return <Spinner />;
+}
+```
+
+### Spinner Sizes
+
+```tsx
+import * as React from 'react';
+import { Spinner } from '@xsolla/xui-spinner';
+
+export default function SpinnerSizes() {
+  return (
+    <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
+      <Spinner size="xs" />
+      <Spinner size="sm" />
+      <Spinner size="md" />
+      <Spinner size="lg" />
+      <Spinner size="xl" />
+    </div>
+  );
+}
+```
+
+### Custom Color Spinner
 
 ```tsx
+import * as React from 'react';
+import { Spinner } from '@xsolla/xui-spinner';
+
+export default function ColoredSpinner() {
+  return (
+    <div style={{ display: 'flex', gap: 24 }}>
+      <Spinner color="#3498db" />
+      <Spinner color="#e74c3c" />
+      <Spinner color="#2ecc71" />
+    </div>
+  );
+}
+```
+
+## Anatomy
+
+Import the component and use it directly:
+
+```jsx
 import { Spinner } from '@xsolla/xui-spinner';
 
-<Spinner size="md" />
+<Spinner
+  size="md"                  // Size variant
+  color="#custom"           // Custom color (optional)
+  aria-label="Loading"      // Accessible label
+/>
 ```
 
-## Props
+## Examples
+
+### Loading Button State
+
+```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() {
+  return (
+    <div style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      height: '100vh',
+      flexDirection: 'column',
+      gap: 16
+    }}>
+      <Spinner size="xl" />
+      <span>Loading content...</span>
+    </div>
+  );
+}
+```
+
+### Inline Loading
+
+```tsx
+import * as React from 'react';
+import { Spinner } from '@xsolla/xui-spinner';
+
+export default function InlineLoading() {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+      <Spinner size="sm" />
+      <span>Saving changes...</span>
+    </div>
+  );
+}
+```
+
+## API Reference
 
 ### Spinner
 
+A loading indicator component.
+
+**Spinner Props:**
+
 | Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `size` | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Size of the spinner (xl: 96px, lg: 48px, md: 24px, sm: 16px, xs: 8px) |
-| `color` | `string` | theme primary | Colour of the spinner; defaults to theme content colour |
-| `aria-label` | `string` | `"Loading"` | Accessible label for screen readers |
-| `aria-describedby` | `string` | — | ID of the element being loaded |
+| :--- | :--- | :------ | :---------- |
+| 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xsolla/xui-spinner",
-  "version": "0.99.0",
+  "version": "0.100.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.99.0",
-    "@xsolla/xui-primitives-core": "0.99.0"
+    "@xsolla/xui-core": "0.100.0",
+    "@xsolla/xui-primitives-core": "0.100.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",