@xsolla/xui-divider 0.174.3 → 0.176.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.
- package/README.md +42 -0
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -2,6 +2,48 @@
|
|
|
2
2
|
|
|
3
3
|
A cross-platform React divider for separating content. Renders a horizontal line with an optional inline title and a dashed-stroke variant.
|
|
4
4
|
|
|
5
|
+
<!-- BEGIN:xui-mcp-instructions:divider -->
|
|
6
|
+
Divider is a line used to separate and group content within lists, menus, cards, or other containers. It can be plain or carry a short title that labels the group it introduces.
|
|
7
|
+
|
|
8
|
+
### When to use
|
|
9
|
+
|
|
10
|
+
- To separate or group related content inside lists, menus, cards, or sections
|
|
11
|
+
- To create visual hierarchy between blocks of content
|
|
12
|
+
- To introduce a group with an optional title placed on the line
|
|
13
|
+
|
|
14
|
+
### When not to use
|
|
15
|
+
|
|
16
|
+
- To add spacing only — use layout spacing instead
|
|
17
|
+
- As a decorative border around a container — use a border or container instead
|
|
18
|
+
- Between items that already have clear visual boundaries
|
|
19
|
+
|
|
20
|
+
### Content guidelines
|
|
21
|
+
- Keep title text short — it labels a group, not a sentence.
|
|
22
|
+
- Size (L, M, S) sets the title text size; use N/A when the divider has no title.
|
|
23
|
+
- Use the dashed stroke sparingly, for lighter or secondary separation.
|
|
24
|
+
- Keep title alignment (Left, Right, Center) consistent within the same context.
|
|
25
|
+
|
|
26
|
+
### Behaviour guidelines
|
|
27
|
+
|
|
28
|
+
Type — Horizontal separates stacked content; Vertical separates side-by-side content.
|
|
29
|
+
|
|
30
|
+
Title position — Left, Right, or Center places the label on the line; N/A renders a plain line.
|
|
31
|
+
|
|
32
|
+
Dash stroke — False is a solid line, True is a dashed line.
|
|
33
|
+
|
|
34
|
+
The divider is display-only and holds no interaction.
|
|
35
|
+
|
|
36
|
+
### Accessibility
|
|
37
|
+
|
|
38
|
+
Expose it as a separator so assistive technology understands the structural break.
|
|
39
|
+
|
|
40
|
+
When the divider carries a title, that title should name the group it introduces.
|
|
41
|
+
|
|
42
|
+
Don't rely on the line alone to convey grouping — use proper headings or structure where the grouping is meaningful.
|
|
43
|
+
|
|
44
|
+
Ensure the line and any title meet contrast minimums against the background.
|
|
45
|
+
<!-- END:xui-mcp-instructions:divider -->
|
|
46
|
+
|
|
5
47
|
## Installation
|
|
6
48
|
|
|
7
49
|
```bash
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-divider",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.176.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.
|
|
14
|
-
"@xsolla/xui-primitives-core": "0.
|
|
13
|
+
"@xsolla/xui-core": "0.176.0",
|
|
14
|
+
"@xsolla/xui-primitives-core": "0.176.0"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": ">=16.8.0",
|