@xsolla/xui-cell 0.149.1 → 0.151.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 +121 -144
  2. package/package.json +5 -5
package/README.md CHANGED
@@ -1,219 +1,196 @@
1
1
  # Cell
2
2
 
3
- A cross-platform React cell component that provides a consistent layout structure for list items. Features slots for leading/trailing content and a flexible content area.
3
+ A cross-platform layout primitive for list rows and card-like surfaces, with leading/trailing slots, a flexible content area, and an opinionated multi-line text block.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
8
  npm install @xsolla/xui-cell
9
- # or
10
- yarn add @xsolla/xui-cell
11
9
  ```
12
10
 
13
- ## Demo
14
-
15
- ### Basic Cell
11
+ ## Imports
16
12
 
17
13
  ```tsx
18
- import * as React from 'react';
19
14
  import { Cell } from '@xsolla/xui-cell';
20
-
21
- export default function BasicCell() {
22
- return (
23
- <Cell>
24
- <Cell.Content>
25
- Basic cell content
26
- </Cell.Content>
27
- </Cell>
28
- );
29
- }
30
15
  ```
31
16
 
32
- ### With Slots
17
+ ## Quick start
33
18
 
34
19
  ```tsx
35
20
  import * as React from 'react';
36
21
  import { Cell } from '@xsolla/xui-cell';
37
- import { Avatar } from '@xsolla/xui-avatar';
38
- import { ChevronRight } from '@xsolla/xui-icons-base';
39
22
 
40
- export default function CellWithSlots() {
23
+ export default function QuickStart() {
41
24
  return (
42
25
  <Cell>
43
- <Cell.Slot>
44
- <Avatar size="md" name="John Doe" />
45
- </Cell.Slot>
46
- <Cell.Content>
47
- <span style={{ fontWeight: 500 }}>John Doe</span>
48
- <span style={{ color: '#888' }}>john@example.com</span>
49
- </Cell.Content>
50
- <Cell.Slot>
51
- <ChevronRight size={20} />
52
- </Cell.Slot>
26
+ <Cell.Content>Basic cell content</Cell.Content>
53
27
  </Cell>
54
28
  );
55
29
  }
56
30
  ```
57
31
 
58
- ### With Board Style
32
+ ## API Reference
59
33
 
60
- ```tsx
61
- import * as React from 'react';
62
- import { Cell } from '@xsolla/xui-cell';
34
+ ### `<Cell>`
63
35
 
64
- export default function BoardCell() {
65
- return (
66
- <Cell withBoard>
67
- <Cell.Content>
68
- Cell with board styling (background, border, rounded corners)
69
- </Cell.Content>
70
- </Cell>
71
- );
72
- }
73
- ```
36
+ Container row. Extends `BoxProps`, so any layout/style prop the underlying `Box` accepts is forwarded.
37
+
38
+ | Prop | Type | Default | Description |
39
+ | --- | --- | --- | --- |
40
+ | `children` | `ReactNode` | - | Slots, content, or text block. |
41
+ | `view` | `"default" \| "stroke" \| "surface"` | `"default"` | Visual variant. `default` is a plain row (min height 56px). `stroke` adds a 1px border and 8px radius. `surface` adds a secondary background fill and 8px radius. |
42
+ | `withBoard` | `boolean` | `false` | **Deprecated.** When `true` and `view` is unset, behaves like `view="stroke"`. |
43
+ | `onPress` | `() => void` | - | Press/click handler. When set, the cell becomes interactive and shows a pointer cursor with a hover background. |
44
+
45
+ Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
46
+
47
+ ### `<Cell.Slot>`
48
+
49
+ Fixed-width container for leading or trailing content (icons, avatars, buttons). Does not flex.
50
+
51
+ | Prop | Type | Default | Description |
52
+ | --- | --- | --- | --- |
53
+ | `children` | `ReactNode` | - | Slot content. |
54
+
55
+ ### `<Cell.Content>`
56
+
57
+ Flexible content area that fills the remaining space.
58
+
59
+ | Prop | Type | Default | Description |
60
+ | --- | --- | --- | --- |
61
+ | `children` | `ReactNode` | - | Content elements. |
62
+
63
+ ### `<Cell.Text>`
64
+
65
+ Pre-styled multi-row text block. Each row has independent left and right slots with size and weight tuned for cells.
66
+
67
+ | Prop | Type | Default | Description |
68
+ | --- | --- | --- | --- |
69
+ | `title` | `ReactNode` | - | Primary text on the title row (left). 16px / 500 weight when string. |
70
+ | `titleRight` | `ReactNode` | - | Secondary text on the title row (right). 12px / 400 weight when string. |
71
+ | `description` | `ReactNode` | - | Description on the second row (left). 12px / 400 weight when string. |
72
+ | `descriptionRight` | `ReactNode` | - | Description on the second row (right). 12px / 400 weight when string. |
73
+ | `caption` | `ReactNode` | - | Caption on the third row (left). 12px / 400 weight when string, tertiary content colour. |
74
+ | `captionRight` | `ReactNode` | - | Caption on the third row (right). 12px / 400 weight when string, tertiary content colour. |
75
+
76
+ Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
74
77
 
75
78
  ## Anatomy
76
79
 
77
- ```jsx
80
+ ```tsx
78
81
  import { Cell } from '@xsolla/xui-cell';
79
82
 
80
- <Cell
81
- withBoard={false} // Add background, border, and padding
82
- >
83
- <Cell.Slot> {/* Leading content (icon, avatar) */}
84
- <Avatar />
85
- </Cell.Slot>
86
- <Cell.Content> {/* Main content area (flexes to fill) */}
87
- <Text>Title</Text>
88
- <Text>Subtitle</Text>
89
- </Cell.Content>
90
- <Cell.Slot> {/* Trailing content (chevron, button) */}
91
- <Icon />
92
- </Cell.Slot>
83
+ <Cell view="default">
84
+ <Cell.Slot>{/* leading */}</Cell.Slot>
85
+ <Cell.Content>{/* flexible body */}</Cell.Content>
86
+ {/* or use Cell.Text instead of Cell.Content */}
87
+ <Cell.Text title="Title" description="Description" caption="Caption" />
88
+ <Cell.Slot>{/* trailing */}</Cell.Slot>
93
89
  </Cell>
94
90
  ```
95
91
 
96
92
  ## Examples
97
93
 
98
- ### Settings List
94
+ ### View variants
99
95
 
100
96
  ```tsx
101
97
  import * as React from 'react';
102
98
  import { Cell } from '@xsolla/xui-cell';
103
- import { User, Bell } from '@xsolla/xui-icons';
104
- import { ChevronRight, Shield } from '@xsolla/xui-icons-base';
105
99
 
106
- export default function SettingsList() {
100
+ export default function Views() {
107
101
  return (
108
- <div>
109
- <Cell>
110
- <Cell.Slot>
111
- <User size={20} />
112
- </Cell.Slot>
113
- <Cell.Content>
114
- <span>Profile</span>
115
- </Cell.Content>
116
- <Cell.Slot>
117
- <ChevronRight size={16} />
118
- </Cell.Slot>
102
+ <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
103
+ <Cell view="default">
104
+ <Cell.Content>Default</Cell.Content>
119
105
  </Cell>
120
- <Cell>
121
- <Cell.Slot>
122
- <Bell size={20} />
123
- </Cell.Slot>
124
- <Cell.Content>
125
- <span>Notifications</span>
126
- </Cell.Content>
127
- <Cell.Slot>
128
- <ChevronRight size={16} />
129
- </Cell.Slot>
106
+ <Cell view="stroke">
107
+ <Cell.Content>Stroke</Cell.Content>
130
108
  </Cell>
131
- <Cell>
132
- <Cell.Slot>
133
- <Shield size={20} />
134
- </Cell.Slot>
135
- <Cell.Content>
136
- <span>Security</span>
137
- </Cell.Content>
138
- <Cell.Slot>
139
- <ChevronRight size={16} />
140
- </Cell.Slot>
109
+ <Cell view="surface">
110
+ <Cell.Content>Surface</Cell.Content>
141
111
  </Cell>
142
112
  </div>
143
113
  );
144
114
  }
145
115
  ```
146
116
 
147
- ### Contact Card
117
+ ### With Cell.Text
148
118
 
149
119
  ```tsx
150
120
  import * as React from 'react';
151
121
  import { Cell } from '@xsolla/xui-cell';
152
122
  import { Avatar } from '@xsolla/xui-avatar';
153
- import { Button } from '@xsolla/xui-button';
123
+ import { ChevronRight } from '@xsolla/xui-icons-base';
154
124
 
155
- export default function ContactCard() {
125
+ export default function CellWithText() {
156
126
  return (
157
- <Cell withBoard>
127
+ <Cell view="stroke">
158
128
  <Cell.Slot>
159
- <Avatar
160
- size="lg"
161
- src="https://example.com/avatar.jpg"
162
- name="Jane Smith"
163
- />
129
+ <Avatar size="md" name="Jane Smith" />
164
130
  </Cell.Slot>
165
- <Cell.Content>
166
- <span style={{ fontWeight: 600 }}>Jane Smith</span>
167
- <span style={{ fontSize: 14, color: '#666' }}>Product Manager</span>
168
- </Cell.Content>
131
+ <Cell.Text
132
+ title="Jane Smith"
133
+ titleRight="Pro"
134
+ description="jane@example.com"
135
+ descriptionRight="2h ago"
136
+ caption="Product Manager"
137
+ />
169
138
  <Cell.Slot>
170
- <Button size="sm" variant="secondary">Message</Button>
139
+ <ChevronRight size={20} aria-hidden />
171
140
  </Cell.Slot>
172
141
  </Cell>
173
142
  );
174
143
  }
175
144
  ```
176
145
 
177
- ## API Reference
178
-
179
- ### Cell
180
-
181
- Container component for cell layout.
182
-
183
- **Cell Props:**
184
-
185
- | Prop | Type | Default | Description |
186
- | :--- | :--- | :------ | :---------- |
187
- | children | `ReactNode` | - | Cell content (Slot and Content components). |
188
- | withBoard | `boolean` | `false` | Add background, border, and rounded corners. |
189
-
190
- ---
191
-
192
- ### Cell.Slot
146
+ ### Pressable cell
193
147
 
194
- Container for leading or trailing content.
195
-
196
- **Cell.Slot Props:**
197
-
198
- | Prop | Type | Default | Description |
199
- | :--- | :--- | :------ | :---------- |
200
- | children | `ReactNode` | - | Slot content (icons, avatars, buttons). |
201
-
202
- ---
148
+ ```tsx
149
+ import * as React from 'react';
150
+ import { Cell } from '@xsolla/xui-cell';
151
+ import { ChevronRight } from '@xsolla/xui-icons-base';
203
152
 
204
- ### Cell.Content
153
+ export default function PressableCell() {
154
+ return (
155
+ <Cell onPress={() => console.log('pressed')}>
156
+ <Cell.Text title="Account settings" description="Email, password, sessions" />
157
+ <Cell.Slot>
158
+ <ChevronRight size={20} aria-hidden />
159
+ </Cell.Slot>
160
+ </Cell>
161
+ );
162
+ }
163
+ ```
205
164
 
206
- Main content area that expands to fill available space.
165
+ ### Settings list
207
166
 
208
- **Cell.Content Props:**
167
+ ```tsx
168
+ import * as React from 'react';
169
+ import { Cell } from '@xsolla/xui-cell';
170
+ import { ChevronRight } from '@xsolla/xui-icons-base';
209
171
 
210
- | Prop | Type | Default | Description |
211
- | :--- | :--- | :------ | :---------- |
212
- | children | `ReactNode` | - | Content elements. |
172
+ export default function SettingsList() {
173
+ return (
174
+ <div>
175
+ <Cell onPress={() => {}}>
176
+ <Cell.Text title="Profile" />
177
+ <Cell.Slot><ChevronRight size={16} aria-hidden /></Cell.Slot>
178
+ </Cell>
179
+ <Cell onPress={() => {}}>
180
+ <Cell.Text title="Notifications" />
181
+ <Cell.Slot><ChevronRight size={16} aria-hidden /></Cell.Slot>
182
+ </Cell>
183
+ <Cell onPress={() => {}}>
184
+ <Cell.Text title="Security" />
185
+ <Cell.Slot><ChevronRight size={16} aria-hidden /></Cell.Slot>
186
+ </Cell>
187
+ </div>
188
+ );
189
+ }
190
+ ```
213
191
 
214
- ## Layout
192
+ ## Accessibility
215
193
 
216
- - Cell uses horizontal flexbox layout with 12px gap
217
- - Minimum height of 56px
218
- - Horizontal padding of 16px
219
- - `withBoard` adds: secondary background, border, 8px border radius, and 12px vertical padding
194
+ - Provide an accessible label on the cell (or its leading slot) when used as an action.
195
+ - When `onPress` is set, ensure the cell receives keyboard focus on web; pair it with a `role` such as `button` if the surrounding context does not already imply interactivity.
196
+ - Decorative icons inside slots should be marked `aria-hidden`.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-cell",
3
- "version": "0.149.1",
3
+ "version": "0.151.0",
4
4
  "main": "./web/index.js",
5
5
  "module": "./web/index.mjs",
6
6
  "types": "./web/index.d.ts",
@@ -10,10 +10,10 @@
10
10
  "build:native": "PLATFORM=native tsup"
11
11
  },
12
12
  "dependencies": {
13
- "@xsolla/xui-avatar": "0.149.1",
14
- "@xsolla/xui-button": "0.149.1",
15
- "@xsolla/xui-core": "0.149.1",
16
- "@xsolla/xui-primitives-core": "0.149.1"
13
+ "@xsolla/xui-avatar": "0.151.0",
14
+ "@xsolla/xui-button": "0.151.0",
15
+ "@xsolla/xui-core": "0.151.0",
16
+ "@xsolla/xui-primitives-core": "0.151.0"
17
17
  },
18
18
  "peerDependencies": {
19
19
  "react": ">=16.8.0",