@xsolla/xui-divider 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 +45 -15
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,33 +1,63 @@
1
- # @xsolla/xui-divider
1
+ # Divider
2
2
 
3
- A horizontal rule component for separating layout sections, with optional title and dash-stroke style.
3
+ A cross-platform React divider component for visually separating content sections. Supports horizontal and vertical orientations.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
+ npm install @xsolla/xui-divider
9
+ # or
8
10
  yarn add @xsolla/xui-divider
9
11
  ```
10
12
 
11
- ## Usage
13
+ ## Demo
14
+
15
+ ### Basic Divider
12
16
 
13
17
  ```tsx
14
- import { Divider } from "@xsolla/xui-divider";
18
+ import * as React from 'react';
19
+ import { Divider } from '@xsolla/xui-divider';
20
+
21
+ export default function BasicDivider() {
22
+ return (
23
+ <div>
24
+ <p>Content above</p>
25
+ <Divider />
26
+ <p>Content below</p>
27
+ </div>
28
+ );
29
+ }
30
+ ```
15
31
 
16
- {/* Plain rule */}
17
- <Divider />
32
+ ### Vertical Divider
18
33
 
19
- {/* With section title */}
20
- <Divider title="Or continue with" titlePosition="center" />
34
+ ```tsx
35
+ import * as React from 'react';
36
+ import { Divider } from '@xsolla/xui-divider';
37
+
38
+ export default function VerticalDivider() {
39
+ return (
40
+ <div style={{ display: 'flex', alignItems: 'center', height: 40 }}>
41
+ <span>Left</span>
42
+ <Divider orientation="vertical" />
43
+ <span>Right</span>
44
+ </div>
45
+ );
46
+ }
21
47
  ```
22
48
 
23
- ## Props
49
+ ## API Reference
24
50
 
25
51
  ### Divider
26
52
 
53
+ **Divider Props:**
54
+
27
55
  | Prop | Type | Default | Description |
28
- |------|------|---------|-------------|
29
- | `size` | `"lg" \| "md" \| "sm"` | `"md"` | Controls the height and font size of the divider |
30
- | `title` | `string` | — | Optional label rendered beside the rule; displayed in uppercase |
31
- | `titlePosition` | `"left" \| "center" \| "right"` | `"left"` | Position of the title relative to the rule |
32
- | `dashStroke` | `boolean` | `false` | Renders the rule as a dashed line |
33
- | `decorative` | `boolean` | `false` | Hides the divider from screen readers when purely visual |
56
+ | :--- | :--- | :------ | :---------- |
57
+ | orientation | `"horizontal" \| "vertical"` | `"horizontal"` | Direction of the divider. |
58
+
59
+ ## Theming
60
+
61
+ ```typescript
62
+ theme.colors.border.primary // Divider color
63
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-divider",
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",