@xsolla/xui-progress-bar 0.99.0 → 0.100.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 +67 -14
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,32 +1,85 @@
1
- # @xsolla/xui-progress-bar
1
+ ---
2
+ title: Progress Bar
3
+ subtitle: A circular progress indicator.
4
+ description: A cross-platform React circular progress bar component for displaying completion status.
5
+ ---
2
6
 
3
- Themed progress bar with label, helper text, and error/success states.
7
+ # Progress Bar
8
+
9
+ A cross-platform React circular progress bar component for displaying completion status. Useful for showing task progress or loading states with percentage.
4
10
 
5
11
  ## Installation
6
12
 
7
13
  ```bash
14
+ npm install @xsolla/xui-progress-bar
15
+ # or
8
16
  yarn add @xsolla/xui-progress-bar
9
17
  ```
10
18
 
11
- ## Usage
19
+ ## Demo
20
+
21
+ ### Basic Progress Bar
22
+
23
+ ```tsx
24
+ import * as React from 'react';
25
+ import { ProgressBar } from '@xsolla/xui-progress-bar';
26
+
27
+ export default function BasicProgressBar() {
28
+ return <ProgressBar value={75} />;
29
+ }
30
+ ```
31
+
32
+ ### Progress Bar Sizes
33
+
34
+ ```tsx
35
+ import * as React from 'react';
36
+ import { ProgressBar } from '@xsolla/xui-progress-bar';
37
+
38
+ export default function ProgressBarSizes() {
39
+ return (
40
+ <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
41
+ <ProgressBar value={60} size="sm" />
42
+ <ProgressBar value={60} size="md" />
43
+ <ProgressBar value={60} size="lg" />
44
+ </div>
45
+ );
46
+ }
47
+ ```
48
+
49
+ ### Animated Progress
12
50
 
13
51
  ```tsx
52
+ import * as React from 'react';
14
53
  import { ProgressBar } from '@xsolla/xui-progress-bar';
15
54
 
16
- <ProgressBar percent={65} label="Uploading..." helperText="65% complete" />
55
+ export default function AnimatedProgress() {
56
+ const [progress, setProgress] = React.useState(0);
57
+
58
+ React.useEffect(() => {
59
+ const timer = setInterval(() => {
60
+ setProgress((prev) => (prev >= 100 ? 0 : prev + 10));
61
+ }, 500);
62
+ return () => clearInterval(timer);
63
+ }, []);
64
+
65
+ return <ProgressBar value={progress} />;
66
+ }
17
67
  ```
18
68
 
19
- ## Props
69
+ ## API Reference
20
70
 
21
71
  ### ProgressBar
22
72
 
73
+ **ProgressBar Props:**
74
+
23
75
  | Prop | Type | Default | Description |
24
- |------|------|---------|-------------|
25
- | `percent` | `number` | `0` | Progress value from 0 to 100 |
26
- | `size` | `"xl" \| "lg" \| "md" \| "sm" \| "xs"` | `"md"` | Size of the progress bar |
27
- | `state` | `"default" \| "success" \| "error"` | `"default"` | Visual state affecting bar colour |
28
- | `label` | `string` | — | Label text displayed above the bar |
29
- | `helperText` | `string` | — | Helper text displayed below the bar |
30
- | `errorMessage` | `string` | — | Error text shown when `state` is `"error"` |
31
- | `labelIcon` | `React.ReactNode` | — | Icon displayed alongside the label |
32
- | `statusIcon` | `React.ReactNode` | — | Icon displayed at the right of the label row |
76
+ | :--- | :--- | :------ | :---------- |
77
+ | value | `number` | `0` | Progress value (0-100). |
78
+ | size | `"sm" \| "md" \| "lg"` | `"md"` | Size of the progress bar. |
79
+
80
+ ## Theming
81
+
82
+ ```typescript
83
+ theme.colors.background.brand.primary // Progress fill color
84
+ theme.colors.border.secondary // Track color
85
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-progress-bar",
3
- "version": "0.99.0",
3
+ "version": "0.100.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.100.0",
14
+ "@xsolla/xui-primitives-core": "0.100.0"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": ">=16.8.0",