@xsolla/xui-divider 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 +51 -15
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,33 +1,69 @@
1
- # @xsolla/xui-divider
1
+ ---
2
+ title: Divider
3
+ subtitle: A visual separator between content.
4
+ description: A cross-platform React divider component for visually separating content sections.
5
+ ---
2
6
 
3
- A horizontal rule component for separating layout sections, with optional title and dash-stroke style.
7
+ # Divider
8
+
9
+ A cross-platform React divider component for visually separating content sections. Supports horizontal and vertical orientations.
4
10
 
5
11
  ## Installation
6
12
 
7
13
  ```bash
14
+ npm install @xsolla/xui-divider
15
+ # or
8
16
  yarn add @xsolla/xui-divider
9
17
  ```
10
18
 
11
- ## Usage
19
+ ## Demo
20
+
21
+ ### Basic Divider
12
22
 
13
23
  ```tsx
14
- import { Divider } from "@xsolla/xui-divider";
24
+ import * as React from 'react';
25
+ import { Divider } from '@xsolla/xui-divider';
26
+
27
+ export default function BasicDivider() {
28
+ return (
29
+ <div>
30
+ <p>Content above</p>
31
+ <Divider />
32
+ <p>Content below</p>
33
+ </div>
34
+ );
35
+ }
36
+ ```
37
+
38
+ ### Vertical Divider
15
39
 
16
- {/* Plain rule */}
17
- <Divider />
40
+ ```tsx
41
+ import * as React from 'react';
42
+ import { Divider } from '@xsolla/xui-divider';
18
43
 
19
- {/* With section title */}
20
- <Divider title="Or continue with" titlePosition="center" />
44
+ export default function VerticalDivider() {
45
+ return (
46
+ <div style={{ display: 'flex', alignItems: 'center', height: 40 }}>
47
+ <span>Left</span>
48
+ <Divider orientation="vertical" />
49
+ <span>Right</span>
50
+ </div>
51
+ );
52
+ }
21
53
  ```
22
54
 
23
- ## Props
55
+ ## API Reference
24
56
 
25
57
  ### Divider
26
58
 
59
+ **Divider Props:**
60
+
27
61
  | 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 |
62
+ | :--- | :--- | :------ | :---------- |
63
+ | orientation | `"horizontal" \| "vertical"` | `"horizontal"` | Direction of the divider. |
64
+
65
+ ## Theming
66
+
67
+ ```typescript
68
+ theme.colors.border.primary // Divider color
69
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-divider",
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",