@xsolla/xui-nav-bar 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 +41 -195
  2. package/package.json +3 -3
package/README.md CHANGED
@@ -1,18 +1,22 @@
1
- # Nav Bar
1
+ # NavBar
2
2
 
3
- A cross-platform React navigation bar component with a flexible slot-based layout for building application headers.
3
+ A slot-based application header with `StartSlot`, `Center`, and `EndSlot` regions. Three height variants for compact, standard, and marketing layouts.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
8
  npm install @xsolla/xui-nav-bar
9
- # or
10
- yarn add @xsolla/xui-nav-bar
11
9
  ```
12
10
 
13
- ## Demo
11
+ ## Imports
14
12
 
15
- ### Basic Nav Bar
13
+ ```tsx
14
+ import { NavBar } from '@xsolla/xui-nav-bar';
15
+ ```
16
+
17
+ `NavBar.StartSlot`, `NavBar.Center`, and `NavBar.EndSlot` are attached to the root component.
18
+
19
+ ## Quick start
16
20
 
17
21
  ```tsx
18
22
  import * as React from 'react';
@@ -20,15 +24,13 @@ import { NavBar } from '@xsolla/xui-nav-bar';
20
24
  import { Xsolla } from '@xsolla/xui-logos-xsolla';
21
25
  import { Button } from '@xsolla/xui-button';
22
26
 
23
- export default function BasicNavBar() {
27
+ export default function Example() {
24
28
  return (
25
29
  <NavBar>
26
30
  <NavBar.StartSlot>
27
31
  <Xsolla variant="full" size="sm" />
28
32
  </NavBar.StartSlot>
29
- <NavBar.Center>
30
- Navigation
31
- </NavBar.Center>
33
+ <NavBar.Center>Navigation</NavBar.Center>
32
34
  <NavBar.EndSlot>
33
35
  <Button size="sm">Sign In</Button>
34
36
  </NavBar.EndSlot>
@@ -37,69 +39,34 @@ export default function BasicNavBar() {
37
39
  }
38
40
  ```
39
41
 
40
- ### Different Sizes
41
-
42
- ```tsx
43
- import * as React from 'react';
44
- import { NavBar } from '@xsolla/xui-nav-bar';
42
+ ## API Reference
45
43
 
46
- export default function Sizes() {
47
- return (
48
- <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
49
- <NavBar size="sm">
50
- <NavBar.Center>Small (48px)</NavBar.Center>
51
- </NavBar>
52
- <NavBar size="md">
53
- <NavBar.Center>Medium (64px)</NavBar.Center>
54
- </NavBar>
55
- <NavBar size="lg">
56
- <NavBar.Center>Large (80px)</NavBar.Center>
57
- </NavBar>
58
- </div>
59
- );
60
- }
61
- ```
44
+ ### `<NavBar>`
62
45
 
63
- ### With Border
46
+ | Prop | Type | Default | Description |
47
+ | --- | --- | --- | --- |
48
+ | `children` | `ReactNode` | - | Slot components (`StartSlot`, `Center`, `EndSlot`). |
49
+ | `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Height preset. `sm` = 48px / 12px horizontal padding, `md` = 64px / 16px, `lg` = 80px / 20px. |
50
+ | `bordered` | `boolean` | `false` | Show a 1px bottom border. |
51
+ | `backgroundColor` | `string` | theme `background.primary` | Custom background colour. |
52
+ | `testID` | `string` | - | Test identifier. |
64
53
 
65
- ```tsx
66
- import * as React from 'react';
67
- import { NavBar } from '@xsolla/xui-nav-bar';
54
+ Inherits `ThemeOverrideProps` (`themeMode`, `themeProductContext`).
68
55
 
69
- export default function Bordered() {
70
- return (
71
- <NavBar bordered>
72
- <NavBar.Center>Bordered Navigation</NavBar.Center>
73
- </NavBar>
74
- );
75
- }
76
- ```
56
+ Layout: `StartSlot` and `EndSlot` share `flex: 1`; `Center` takes `flex: 2`. Each slot uses `flex-direction: row` with an `8px` gap between children.
77
57
 
78
- ## Anatomy
58
+ ### `<NavBar.StartSlot>` / `<NavBar.Center>` / `<NavBar.EndSlot>`
79
59
 
80
- ```jsx
81
- import { NavBar } from '@xsolla/xui-nav-bar';
60
+ | Prop | Type | Description |
61
+ | --- | --- | --- |
62
+ | `children` | `ReactNode` | Slot content. |
63
+ | `testID` | `string` | Test identifier. |
82
64
 
83
- <NavBar
84
- size="md" // s, m, or l
85
- bordered={false} // Show bottom border
86
- backgroundColor={color} // Custom background
87
- >
88
- <NavBar.StartSlot> // Left-aligned content
89
- {logo}
90
- </NavBar.StartSlot>
91
- <NavBar.Center> // Center-aligned content
92
- {navigation}
93
- </NavBar.Center>
94
- <NavBar.EndSlot> // Right-aligned content
95
- {actions}
96
- </NavBar.EndSlot>
97
- </NavBar>
98
- ```
65
+ `StartSlot` aligns to the start, `EndSlot` to the end, `Center` to the centre.
99
66
 
100
67
  ## Examples
101
68
 
102
- ### Application Header
69
+ ### Application header
103
70
 
104
71
  ```tsx
105
72
  import * as React from 'react';
@@ -112,13 +79,7 @@ export default function AppHeader() {
112
79
  return (
113
80
  <NavBar size="md" bordered>
114
81
  <NavBar.StartSlot>
115
- <IconButton
116
- icon={<Menu size={20} />}
117
- variant="secondary"
118
- tone="mono"
119
- size="sm"
120
- aria-label="Menu"
121
- />
82
+ <IconButton icon={<Menu size={20} />} variant="secondary" tone="mono" size="sm" aria-label="Menu" />
122
83
  <Xsolla variant="full" size="sm" />
123
84
  </NavBar.StartSlot>
124
85
  <NavBar.Center>
@@ -129,13 +90,7 @@ export default function AppHeader() {
129
90
  </nav>
130
91
  </NavBar.Center>
131
92
  <NavBar.EndSlot>
132
- <IconButton
133
- icon={<Bell size={20} />}
134
- variant="secondary"
135
- tone="mono"
136
- size="sm"
137
- aria-label="Notifications"
138
- />
93
+ <IconButton icon={<Bell size={20} />} variant="secondary" tone="mono" size="sm" aria-label="Notifications" />
139
94
  <Button size="sm">Account</Button>
140
95
  </NavBar.EndSlot>
141
96
  </NavBar>
@@ -143,79 +98,32 @@ export default function AppHeader() {
143
98
  }
144
99
  ```
145
100
 
146
- ### Mobile Header
101
+ ### Mobile header
147
102
 
148
103
  ```tsx
149
104
  import * as React from 'react';
150
105
  import { NavBar } from '@xsolla/xui-nav-bar';
151
106
  import { IconButton } from '@xsolla/xui-button';
152
- import { ArrowLeft, MoreVertical } from '@xsolla/xui-icons-base';
107
+ import { ArrowLeft, MoreVr } from '@xsolla/xui-icons-base';
153
108
 
154
109
  export default function MobileHeader() {
155
110
  return (
156
111
  <NavBar size="sm">
157
112
  <NavBar.StartSlot>
158
- <IconButton
159
- icon={<ArrowLeft size={20} />}
160
- variant="secondary"
161
- tone="mono"
162
- size="sm"
163
- aria-label="Back"
164
- />
113
+ <IconButton icon={<ArrowLeft size={20} />} variant="secondary" tone="mono" size="sm" aria-label="Back" />
165
114
  </NavBar.StartSlot>
166
115
  <NavBar.Center>
167
116
  <strong>Page Title</strong>
168
117
  </NavBar.Center>
169
118
  <NavBar.EndSlot>
170
- <IconButton
171
- icon={<MoreVertical size={20} />}
172
- variant="secondary"
173
- tone="mono"
174
- size="sm"
175
- aria-label="More options"
176
- />
177
- </NavBar.EndSlot>
178
- </NavBar>
179
- );
180
- }
181
- ```
182
-
183
- ### Checkout Header
184
-
185
- ```tsx
186
- import * as React from 'react';
187
- import { NavBar } from '@xsolla/xui-nav-bar';
188
- import { Xsolla } from '@xsolla/xui-logos-xsolla';
189
- import { IconButton } from '@xsolla/xui-button';
190
- import { Lock, HelpCircle } from '@xsolla/xui-icons-base';
191
-
192
- export default function CheckoutHeader() {
193
- return (
194
- <NavBar size="md" backgroundColor="#1a1a1a">
195
- <NavBar.StartSlot>
196
- <Xsolla variant="icon" color="brand" size="sm" />
197
- </NavBar.StartSlot>
198
- <NavBar.Center>
199
- <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
200
- <Lock size={16} color="#4CAF50" />
201
- <span style={{ color: '#fff' }}>Secure Checkout</span>
202
- </div>
203
- </NavBar.Center>
204
- <NavBar.EndSlot>
205
- <IconButton
206
- icon={<HelpCircle size={20} />}
207
- variant="secondary"
208
- tone="mono"
209
- size="sm"
210
- aria-label="Help"
211
- />
119
+ <IconButton icon={<MoreVr size={20} />} variant="secondary" tone="mono" size="sm" aria-label="More options" />
212
120
  </NavBar.EndSlot>
213
121
  </NavBar>
214
122
  );
215
123
  }
216
124
  ```
217
125
 
218
- ### Marketing Header
126
+ ### Marketing header
219
127
 
220
128
  ```tsx
221
129
  import * as React from 'react';
@@ -246,71 +154,9 @@ export default function MarketingHeader() {
246
154
  }
247
155
  ```
248
156
 
249
- ## API Reference
250
-
251
- ### NavBar
252
-
253
- **NavBarProps:**
254
-
255
- | Prop | Type | Default | Description |
256
- | :--- | :--- | :------ | :---------- |
257
- | children | `ReactNode` | - | Slot components (StartSlot, Center, EndSlot). |
258
- | size | `"sm" \| "md" \| "lg"` | `"md"` | Navigation bar height. |
259
- | bordered | `boolean` | `false` | Show bottom border. |
260
- | backgroundColor | `string` | theme background | Custom background color. |
261
- | testID | `string` | - | Test identifier. |
262
-
263
- ### NavBar.StartSlot
264
-
265
- Left-aligned slot for logos and primary actions.
266
-
267
- **Props:**
268
-
269
- | Prop | Type | Description |
270
- | :--- | :--- | :---------- |
271
- | children | `ReactNode` | Content to display. |
272
- | testID | `string` | Test identifier. |
273
-
274
- ### NavBar.Center
275
-
276
- Center-aligned slot for navigation links and titles.
277
-
278
- **Props:**
279
-
280
- | Prop | Type | Description |
281
- | :--- | :--- | :---------- |
282
- | children | `ReactNode` | Content to display. |
283
- | testID | `string` | Test identifier. |
284
-
285
- ### NavBar.EndSlot
286
-
287
- Right-aligned slot for actions and user controls.
288
-
289
- **Props:**
290
-
291
- | Prop | Type | Description |
292
- | :--- | :--- | :---------- |
293
- | children | `ReactNode` | Content to display. |
294
- | testID | `string` | Test identifier. |
295
-
296
- ## Size Specifications
297
-
298
- | Size | Height | Horizontal Padding |
299
- | :--- | :----- | :----------------- |
300
- | `sm` | 48px | 12px |
301
- | `md` | 64px | 16px |
302
- | `lg` | 80px | 20px |
303
-
304
- ## Layout Behavior
305
-
306
- - StartSlot and EndSlot share `flex: 1` for equal width
307
- - Center slot has `flex: 2` for prominent positioning
308
- - All slots use `flexBasis: 0` for consistent sizing
309
- - Items within slots have 8px gap by default
310
-
311
157
  ## Accessibility
312
158
 
313
- - Use `<nav>` elements for navigation link groups
314
- - Provide `aria-label` for navigation regions
315
- - Ensure interactive elements have proper focus states
316
- - Mobile menu triggers should have `aria-expanded` state
159
+ - The component renders a plain header container — wrap your link group in a `<nav aria-label="...">` (as in the examples) so the navigation region is announced.
160
+ - Provide `aria-label` on every `IconButton` used as an action.
161
+ - Mobile menu triggers should reflect `aria-expanded` state.
162
+ - Ensure interactive elements have visible focus styles (the toolkit's `Button` and `IconButton` provide them by default).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xsolla/xui-nav-bar",
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,8 +10,8 @@
10
10
  "build:native": "PLATFORM=native tsup"
11
11
  },
12
12
  "dependencies": {
13
- "@xsolla/xui-core": "0.149.1",
14
- "@xsolla/xui-primitives-core": "0.149.1"
13
+ "@xsolla/xui-core": "0.151.0",
14
+ "@xsolla/xui-primitives-core": "0.151.0"
15
15
  },
16
16
  "peerDependencies": {
17
17
  "react": ">=16.8.0"