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