@xsolla/xui-nav-bar-web 0.64.0-pr56.1768348754

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 (7) hide show
  1. package/index.d.mts +45 -0
  2. package/index.d.ts +45 -0
  3. package/index.js +556 -0
  4. package/index.js.map +1 -0
  5. package/index.mjs +518 -0
  6. package/index.mjs.map +1 -0
  7. package/package.json +23 -0
package/index.d.mts ADDED
@@ -0,0 +1,45 @@
1
+ import React, { ReactNode } from 'react';
2
+
3
+ interface NavBarProps {
4
+ /**
5
+ * Size variant of the NavBar
6
+ * @default 'md'
7
+ */
8
+ size?: "sm" | "md" | "lg";
9
+ /**
10
+ * Whether to show a bottom border
11
+ * @default false
12
+ */
13
+ bordered?: boolean;
14
+ /**
15
+ * Custom background color
16
+ */
17
+ backgroundColor?: string;
18
+ /**
19
+ * Content of the NavBar, typically StartSlot, Center, and EndSlot
20
+ */
21
+ children?: ReactNode;
22
+ /**
23
+ * Test ID for testing frameworks
24
+ */
25
+ testID?: string;
26
+ }
27
+ interface NavBarSlotProps {
28
+ /**
29
+ * Slot content
30
+ */
31
+ children?: ReactNode;
32
+ /**
33
+ * Test ID for testing frameworks
34
+ */
35
+ testID?: string;
36
+ }
37
+
38
+ declare const NavBarRoot: React.FC<NavBarProps>;
39
+ declare const NavBar: React.FC<NavBarProps> & {
40
+ StartSlot: React.FC<NavBarSlotProps>;
41
+ Center: React.FC<NavBarSlotProps>;
42
+ EndSlot: React.FC<NavBarSlotProps>;
43
+ };
44
+
45
+ export { NavBar, type NavBarProps, NavBarRoot, type NavBarSlotProps };
package/index.d.ts ADDED
@@ -0,0 +1,45 @@
1
+ import React, { ReactNode } from 'react';
2
+
3
+ interface NavBarProps {
4
+ /**
5
+ * Size variant of the NavBar
6
+ * @default 'md'
7
+ */
8
+ size?: "sm" | "md" | "lg";
9
+ /**
10
+ * Whether to show a bottom border
11
+ * @default false
12
+ */
13
+ bordered?: boolean;
14
+ /**
15
+ * Custom background color
16
+ */
17
+ backgroundColor?: string;
18
+ /**
19
+ * Content of the NavBar, typically StartSlot, Center, and EndSlot
20
+ */
21
+ children?: ReactNode;
22
+ /**
23
+ * Test ID for testing frameworks
24
+ */
25
+ testID?: string;
26
+ }
27
+ interface NavBarSlotProps {
28
+ /**
29
+ * Slot content
30
+ */
31
+ children?: ReactNode;
32
+ /**
33
+ * Test ID for testing frameworks
34
+ */
35
+ testID?: string;
36
+ }
37
+
38
+ declare const NavBarRoot: React.FC<NavBarProps>;
39
+ declare const NavBar: React.FC<NavBarProps> & {
40
+ StartSlot: React.FC<NavBarSlotProps>;
41
+ Center: React.FC<NavBarSlotProps>;
42
+ EndSlot: React.FC<NavBarSlotProps>;
43
+ };
44
+
45
+ export { NavBar, type NavBarProps, NavBarRoot, type NavBarSlotProps };
package/index.js ADDED
@@ -0,0 +1,556 @@
1
+ "use strict";
2
+ var __create = Object.create;
3
+ var __defProp = Object.defineProperty;
4
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
+ var __getOwnPropNames = Object.getOwnPropertyNames;
6
+ var __getProtoOf = Object.getPrototypeOf;
7
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
8
+ var __export = (target, all) => {
9
+ for (var name in all)
10
+ __defProp(target, name, { get: all[name], enumerable: true });
11
+ };
12
+ var __copyProps = (to, from, except, desc) => {
13
+ if (from && typeof from === "object" || typeof from === "function") {
14
+ for (let key of __getOwnPropNames(from))
15
+ if (!__hasOwnProp.call(to, key) && key !== except)
16
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
+ }
18
+ return to;
19
+ };
20
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
+ // If the importer is in node compatibility mode or this is not an ESM
22
+ // file that has been converted to a CommonJS file using a Babel-
23
+ // compatible transform (i.e. "__esModule" has not been set), then set
24
+ // "default" to the CommonJS "module.exports" for node compatibility.
25
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
+ mod
27
+ ));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+
30
+ // src/index.tsx
31
+ var index_exports = {};
32
+ __export(index_exports, {
33
+ NavBar: () => NavBar,
34
+ NavBarRoot: () => NavBarRoot
35
+ });
36
+ module.exports = __toCommonJS(index_exports);
37
+
38
+ // ../primitives-web/src/Box.tsx
39
+ var import_react = __toESM(require("react"));
40
+ var import_styled_components = __toESM(require("styled-components"));
41
+ var import_jsx_runtime = require("react/jsx-runtime");
42
+ var StyledBox = import_styled_components.default.div`
43
+ display: flex;
44
+ box-sizing: border-box;
45
+ background-color: ${(props) => props.backgroundColor || "transparent"};
46
+ border-color: ${(props) => props.borderColor || "transparent"};
47
+ border-width: ${(props) => typeof props.borderWidth === "number" ? `${props.borderWidth}px` : props.borderWidth || 0};
48
+
49
+ ${(props) => props.borderBottomWidth !== void 0 && `
50
+ border-bottom-width: ${typeof props.borderBottomWidth === "number" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};
51
+ border-bottom-color: ${props.borderBottomColor || props.borderColor || "transparent"};
52
+ border-bottom-style: solid;
53
+ `}
54
+ ${(props) => props.borderTopWidth !== void 0 && `
55
+ border-top-width: ${typeof props.borderTopWidth === "number" ? `${props.borderTopWidth}px` : props.borderTopWidth};
56
+ border-top-color: ${props.borderTopColor || props.borderColor || "transparent"};
57
+ border-top-style: solid;
58
+ `}
59
+ ${(props) => props.borderLeftWidth !== void 0 && `
60
+ border-left-width: ${typeof props.borderLeftWidth === "number" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};
61
+ border-left-color: ${props.borderLeftColor || props.borderColor || "transparent"};
62
+ border-left-style: solid;
63
+ `}
64
+ ${(props) => props.borderRightWidth !== void 0 && `
65
+ border-right-width: ${typeof props.borderRightWidth === "number" ? `${props.borderRightWidth}px` : props.borderRightWidth};
66
+ border-right-color: ${props.borderRightColor || props.borderColor || "transparent"};
67
+ border-right-style: solid;
68
+ `}
69
+
70
+ border-style: ${(props) => props.borderStyle || (props.borderWidth || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth ? "solid" : "none")};
71
+ border-radius: ${(props) => typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius || 0};
72
+ height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height || "auto"};
73
+ width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
74
+ min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
75
+ min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
76
+
77
+ padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
78
+ ${(props) => props.paddingHorizontal && `
79
+ padding-left: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
80
+ padding-right: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
81
+ `}
82
+ ${(props) => props.paddingVertical && `
83
+ padding-top: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
84
+ padding-bottom: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
85
+ `}
86
+ ${(props) => props.paddingTop !== void 0 && `padding-top: ${typeof props.paddingTop === "number" ? `${props.paddingTop}px` : props.paddingTop};`}
87
+ ${(props) => props.paddingBottom !== void 0 && `padding-bottom: ${typeof props.paddingBottom === "number" ? `${props.paddingBottom}px` : props.paddingBottom};`}
88
+ ${(props) => props.paddingLeft !== void 0 && `padding-left: ${typeof props.paddingLeft === "number" ? `${props.paddingLeft}px` : props.paddingLeft};`}
89
+ ${(props) => props.paddingRight !== void 0 && `padding-right: ${typeof props.paddingRight === "number" ? `${props.paddingRight}px` : props.paddingRight};`}
90
+
91
+ margin: ${(props) => typeof props.margin === "number" ? `${props.margin}px` : props.margin || 0};
92
+ ${(props) => props.marginTop !== void 0 && `margin-top: ${typeof props.marginTop === "number" ? `${props.marginTop}px` : props.marginTop};`}
93
+ ${(props) => props.marginBottom !== void 0 && `margin-bottom: ${typeof props.marginBottom === "number" ? `${props.marginBottom}px` : props.marginBottom};`}
94
+ ${(props) => props.marginLeft !== void 0 && `margin-left: ${typeof props.marginLeft === "number" ? `${props.marginLeft}px` : props.marginLeft};`}
95
+ ${(props) => props.marginRight !== void 0 && `margin-right: ${typeof props.marginRight === "number" ? `${props.marginRight}px` : props.marginRight};`}
96
+
97
+ flex-direction: ${(props) => props.flexDirection || "column"};
98
+ flex-wrap: ${(props) => props.flexWrap || "nowrap"};
99
+ align-items: ${(props) => props.alignItems || "stretch"};
100
+ justify-content: ${(props) => props.justifyContent || "flex-start"};
101
+ cursor: ${(props) => props.cursor ? props.cursor : props.onClick || props.onPress ? "pointer" : "inherit"};
102
+ position: ${(props) => props.position || "static"};
103
+ top: ${(props) => typeof props.top === "number" ? `${props.top}px` : props.top};
104
+ bottom: ${(props) => typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom};
105
+ left: ${(props) => typeof props.left === "number" ? `${props.left}px` : props.left};
106
+ right: ${(props) => typeof props.right === "number" ? `${props.right}px` : props.right};
107
+ flex: ${(props) => props.flex};
108
+ flex-shrink: ${(props) => props.flexShrink ?? 1};
109
+ gap: ${(props) => typeof props.gap === "number" ? `${props.gap}px` : props.gap || 0};
110
+ align-self: ${(props) => props.alignSelf || "auto"};
111
+ overflow: ${(props) => props.overflow || "visible"};
112
+ overflow-x: ${(props) => props.overflowX || "visible"};
113
+ overflow-y: ${(props) => props.overflowY || "visible"};
114
+ z-index: ${(props) => props.zIndex};
115
+ opacity: ${(props) => props.disabled ? 0.5 : 1};
116
+ pointer-events: ${(props) => props.disabled ? "none" : "auto"};
117
+
118
+ &:hover {
119
+ ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
120
+ ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
121
+ }
122
+
123
+ &:active {
124
+ ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
125
+ }
126
+ `;
127
+ var Box = import_react.default.forwardRef(
128
+ ({
129
+ children,
130
+ onPress,
131
+ onKeyDown,
132
+ onKeyUp,
133
+ role,
134
+ "aria-label": ariaLabel,
135
+ "aria-labelledby": ariaLabelledBy,
136
+ "aria-current": ariaCurrent,
137
+ "aria-disabled": ariaDisabled,
138
+ "aria-live": ariaLive,
139
+ "aria-busy": ariaBusy,
140
+ "aria-describedby": ariaDescribedBy,
141
+ "aria-expanded": ariaExpanded,
142
+ "aria-haspopup": ariaHasPopup,
143
+ "aria-pressed": ariaPressed,
144
+ "aria-controls": ariaControls,
145
+ tabIndex,
146
+ as,
147
+ src,
148
+ alt,
149
+ type,
150
+ disabled,
151
+ id,
152
+ ...props
153
+ }, ref) => {
154
+ if (as === "img" && src) {
155
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
156
+ "img",
157
+ {
158
+ src,
159
+ alt: alt || "",
160
+ style: {
161
+ display: "block",
162
+ objectFit: "cover",
163
+ width: typeof props.width === "number" ? `${props.width}px` : props.width,
164
+ height: typeof props.height === "number" ? `${props.height}px` : props.height,
165
+ borderRadius: typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius,
166
+ position: props.position,
167
+ top: typeof props.top === "number" ? `${props.top}px` : props.top,
168
+ left: typeof props.left === "number" ? `${props.left}px` : props.left,
169
+ right: typeof props.right === "number" ? `${props.right}px` : props.right,
170
+ bottom: typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom
171
+ }
172
+ }
173
+ );
174
+ }
175
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
176
+ StyledBox,
177
+ {
178
+ ref,
179
+ as,
180
+ id,
181
+ type: as === "button" ? type || "button" : void 0,
182
+ disabled: as === "button" ? disabled : void 0,
183
+ onClick: onPress,
184
+ onKeyDown,
185
+ onKeyUp,
186
+ role,
187
+ "aria-label": ariaLabel,
188
+ "aria-labelledby": ariaLabelledBy,
189
+ "aria-current": ariaCurrent,
190
+ "aria-disabled": ariaDisabled,
191
+ "aria-busy": ariaBusy,
192
+ "aria-describedby": ariaDescribedBy,
193
+ "aria-expanded": ariaExpanded,
194
+ "aria-haspopup": ariaHasPopup,
195
+ "aria-pressed": ariaPressed,
196
+ "aria-controls": ariaControls,
197
+ "aria-live": ariaLive,
198
+ tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
199
+ ...props,
200
+ children
201
+ }
202
+ );
203
+ }
204
+ );
205
+ Box.displayName = "Box";
206
+
207
+ // ../primitives-web/src/Text.tsx
208
+ var import_styled_components2 = __toESM(require("styled-components"));
209
+ var import_jsx_runtime2 = require("react/jsx-runtime");
210
+ var StyledText = import_styled_components2.default.span`
211
+ color: ${(props) => props.color || "inherit"};
212
+ font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
213
+ font-weight: ${(props) => props.fontWeight || "normal"};
214
+ font-family: ${(props) => props.fontFamily || '"Pilat Wide Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important'};
215
+ line-height: ${(props) => typeof props.lineHeight === "number" ? `${props.lineHeight}px` : props.lineHeight || "inherit"};
216
+ white-space: ${(props) => props.whiteSpace || "normal"};
217
+ text-align: ${(props) => props.textAlign || "inherit"};
218
+ text-decoration: ${(props) => props.textDecoration || "none"};
219
+ `;
220
+
221
+ // ../primitives-web/src/Spinner.tsx
222
+ var import_styled_components3 = __toESM(require("styled-components"));
223
+ var import_jsx_runtime3 = require("react/jsx-runtime");
224
+ var rotate = import_styled_components3.keyframes`
225
+ from {
226
+ transform: rotate(0deg);
227
+ }
228
+ to {
229
+ transform: rotate(360deg);
230
+ }
231
+ `;
232
+ var StyledSpinner = import_styled_components3.default.div`
233
+ width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
234
+ height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
235
+ border: ${(props) => props.strokeWidth || 2}px solid
236
+ ${(props) => props.color || "currentColor"};
237
+ border-bottom-color: transparent;
238
+ border-radius: 50%;
239
+ display: inline-block;
240
+ box-sizing: border-box;
241
+ animation: ${rotate} 1s linear infinite;
242
+ `;
243
+ var Spinner = ({
244
+ role = "status",
245
+ "aria-label": ariaLabel,
246
+ "aria-live": ariaLive = "polite",
247
+ "aria-describedby": ariaDescribedBy,
248
+ testID,
249
+ ...props
250
+ }) => {
251
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
252
+ StyledSpinner,
253
+ {
254
+ role,
255
+ "aria-label": ariaLabel,
256
+ "aria-live": ariaLive,
257
+ "aria-describedby": ariaDescribedBy,
258
+ "data-testid": testID,
259
+ ...props
260
+ }
261
+ );
262
+ };
263
+ Spinner.displayName = "Spinner";
264
+
265
+ // ../primitives-web/src/Icon.tsx
266
+ var import_styled_components4 = __toESM(require("styled-components"));
267
+ var import_jsx_runtime4 = require("react/jsx-runtime");
268
+ var StyledIcon = import_styled_components4.default.div`
269
+ display: flex;
270
+ align-items: center;
271
+ justify-content: center;
272
+ width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
273
+ height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
274
+ color: ${(props) => props.color || "currentColor"};
275
+
276
+ svg {
277
+ width: 100%;
278
+ height: 100%;
279
+ fill: none;
280
+ stroke: currentColor;
281
+ }
282
+ `;
283
+
284
+ // ../primitives-web/src/Divider.tsx
285
+ var import_styled_components5 = __toESM(require("styled-components"));
286
+ var import_jsx_runtime5 = require("react/jsx-runtime");
287
+ var StyledDivider = import_styled_components5.default.div`
288
+ background-color: ${(props) => props.dashStroke ? "transparent" : props.color || "rgba(255, 255, 255, 0.15)"};
289
+ width: ${(props) => props.vertical ? typeof props.width === "number" ? `${props.width}px` : props.width || "1px" : "100%"};
290
+ height: ${(props) => props.vertical ? "100%" : typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
291
+
292
+ ${(props) => props.dashStroke && `
293
+ border-style: dashed;
294
+ border-color: ${props.color || "rgba(255, 255, 255, 0.15)"};
295
+ border-width: 0;
296
+ ${props.vertical ? `
297
+ border-left-width: ${typeof props.width === "number" ? `${props.width}px` : props.width || "1px"};
298
+ height: 100%;
299
+ ` : `
300
+ border-top-width: ${typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
301
+ width: 100%;
302
+ `}
303
+ `}
304
+ `;
305
+
306
+ // ../primitives-web/src/Input.tsx
307
+ var import_react2 = require("react");
308
+ var import_styled_components6 = __toESM(require("styled-components"));
309
+ var import_jsx_runtime6 = require("react/jsx-runtime");
310
+ var StyledInput = import_styled_components6.default.input`
311
+ background: transparent;
312
+ border: none;
313
+ outline: none;
314
+ width: 100%;
315
+ height: 100%;
316
+ padding: 0;
317
+ margin: 0;
318
+ color: ${(props) => props.color || "inherit"};
319
+ font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
320
+ font-family: inherit;
321
+ text-align: inherit;
322
+
323
+ &::placeholder {
324
+ color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
325
+ }
326
+
327
+ &:disabled {
328
+ cursor: not-allowed;
329
+ }
330
+ `;
331
+ var InputPrimitive = (0, import_react2.forwardRef)(
332
+ ({
333
+ value,
334
+ placeholder,
335
+ onChange,
336
+ onChangeText,
337
+ onFocus,
338
+ onBlur,
339
+ onKeyDown,
340
+ disabled,
341
+ secureTextEntry,
342
+ style,
343
+ color,
344
+ fontSize,
345
+ placeholderTextColor,
346
+ maxLength,
347
+ name,
348
+ type,
349
+ inputMode,
350
+ autoComplete,
351
+ id,
352
+ "aria-invalid": ariaInvalid,
353
+ "aria-describedby": ariaDescribedBy,
354
+ "aria-labelledby": ariaLabelledBy,
355
+ "aria-label": ariaLabel,
356
+ "aria-disabled": ariaDisabled,
357
+ "data-testid": dataTestId,
358
+ ...rest
359
+ }, ref) => {
360
+ const handleChange = (e) => {
361
+ if (onChange) {
362
+ onChange(e);
363
+ }
364
+ if (onChangeText) {
365
+ onChangeText(e.target.value);
366
+ }
367
+ };
368
+ const inputValue = value !== void 0 ? value : "";
369
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
370
+ StyledInput,
371
+ {
372
+ ref,
373
+ id,
374
+ value: inputValue,
375
+ name,
376
+ placeholder,
377
+ onChange: handleChange,
378
+ onFocus,
379
+ onBlur,
380
+ onKeyDown,
381
+ disabled,
382
+ type: secureTextEntry ? "password" : type || "text",
383
+ inputMode,
384
+ autoComplete,
385
+ style,
386
+ color,
387
+ fontSize,
388
+ placeholderTextColor,
389
+ maxLength,
390
+ "aria-invalid": ariaInvalid,
391
+ "aria-describedby": ariaDescribedBy,
392
+ "aria-labelledby": ariaLabelledBy,
393
+ "aria-label": ariaLabel,
394
+ "aria-disabled": ariaDisabled,
395
+ "data-testid": dataTestId,
396
+ ...rest
397
+ }
398
+ );
399
+ }
400
+ );
401
+ InputPrimitive.displayName = "InputPrimitive";
402
+
403
+ // ../primitives-web/src/TextArea.tsx
404
+ var import_react3 = require("react");
405
+ var import_styled_components7 = __toESM(require("styled-components"));
406
+ var import_jsx_runtime7 = require("react/jsx-runtime");
407
+ var StyledTextArea = import_styled_components7.default.textarea`
408
+ background: transparent;
409
+ border: none;
410
+ outline: none;
411
+ width: 100%;
412
+ height: 100%;
413
+ padding: 0;
414
+ margin: 0;
415
+ color: ${(props) => props.color || "inherit"};
416
+ font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
417
+ font-family: inherit;
418
+ text-align: inherit;
419
+ resize: none;
420
+
421
+ &::placeholder {
422
+ color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
423
+ }
424
+
425
+ &:disabled {
426
+ cursor: not-allowed;
427
+ }
428
+ `;
429
+ var TextAreaPrimitive = (0, import_react3.forwardRef)(
430
+ ({
431
+ value,
432
+ placeholder,
433
+ onChangeText,
434
+ onFocus,
435
+ onBlur,
436
+ onKeyDown,
437
+ disabled,
438
+ style,
439
+ color,
440
+ fontSize,
441
+ placeholderTextColor,
442
+ maxLength,
443
+ rows
444
+ }, ref) => {
445
+ return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
446
+ StyledTextArea,
447
+ {
448
+ ref,
449
+ value,
450
+ placeholder,
451
+ onChange: (e) => onChangeText?.(e.target.value),
452
+ onFocus,
453
+ onBlur,
454
+ onKeyDown,
455
+ disabled,
456
+ style,
457
+ color,
458
+ fontSize,
459
+ placeholderTextColor,
460
+ maxLength,
461
+ rows
462
+ }
463
+ );
464
+ }
465
+ );
466
+ TextAreaPrimitive.displayName = "TextAreaPrimitive";
467
+
468
+ // src/NavBar.tsx
469
+ var import_xui_core = require("@xsolla/xui-core");
470
+ var import_jsx_runtime8 = require("react/jsx-runtime");
471
+ var StartSlot = ({ children, testID }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
472
+ Box,
473
+ {
474
+ flexDirection: "row",
475
+ alignItems: "center",
476
+ justifyContent: "flex-start",
477
+ flex: 1,
478
+ flexBasis: 0,
479
+ gap: 8,
480
+ testID,
481
+ children
482
+ }
483
+ );
484
+ var Center = ({ children, testID }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
485
+ Box,
486
+ {
487
+ flexDirection: "row",
488
+ alignItems: "center",
489
+ justifyContent: "center",
490
+ flex: 2,
491
+ flexBasis: 0,
492
+ gap: 8,
493
+ testID,
494
+ children
495
+ }
496
+ );
497
+ var EndSlot = ({ children, testID }) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
498
+ Box,
499
+ {
500
+ flexDirection: "row",
501
+ alignItems: "center",
502
+ justifyContent: "flex-end",
503
+ flex: 1,
504
+ flexBasis: 0,
505
+ gap: 8,
506
+ testID,
507
+ children
508
+ }
509
+ );
510
+ var NavBarRoot = ({
511
+ size = "md",
512
+ bordered = false,
513
+ backgroundColor,
514
+ children,
515
+ testID
516
+ }) => {
517
+ const { theme } = (0, import_xui_core.useDesignSystem)();
518
+ const sizeConfigs = {
519
+ sm: { height: 48, paddingHorizontal: 12 },
520
+ md: { height: 64, paddingHorizontal: 16 },
521
+ lg: { height: 80, paddingHorizontal: 20 }
522
+ };
523
+ const currentSize = sizeConfigs[size];
524
+ return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
525
+ Box,
526
+ {
527
+ width: "100%",
528
+ height: currentSize.height,
529
+ flexDirection: "row",
530
+ alignItems: "center",
531
+ justifyContent: "space-between",
532
+ paddingHorizontal: currentSize.paddingHorizontal,
533
+ backgroundColor: backgroundColor || theme.colors.background.primary,
534
+ borderBottomWidth: bordered ? 1 : 0,
535
+ borderBottomColor: theme.colors.border.secondary,
536
+ borderStyle: "solid",
537
+ testID,
538
+ children
539
+ }
540
+ );
541
+ };
542
+ var NavBar = Object.assign(NavBarRoot, {
543
+ StartSlot,
544
+ Center,
545
+ EndSlot
546
+ });
547
+ NavBarRoot.displayName = "NavBar";
548
+ StartSlot.displayName = "NavBar.StartSlot";
549
+ Center.displayName = "NavBar.Center";
550
+ EndSlot.displayName = "NavBar.EndSlot";
551
+ // Annotate the CommonJS export names for ESM import in node:
552
+ 0 && (module.exports = {
553
+ NavBar,
554
+ NavBarRoot
555
+ });
556
+ //# sourceMappingURL=index.js.map
package/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../src/index.tsx","../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Spinner.tsx","../../../primitives-web/src/Icon.tsx","../../../primitives-web/src/Divider.tsx","../../../primitives-web/src/Input.tsx","../../../primitives-web/src/TextArea.tsx","../../src/NavBar.tsx"],"sourcesContent":["export * from \"./NavBar\";\nexport * from \"./types\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Pilat Wide Bold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif !important'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nconst rotate = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n`;\n\nconst StyledSpinner = styled.div<SpinnerProps>`\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n border: ${(props) => props.strokeWidth || 2}px solid\n ${(props) => props.color || \"currentColor\"};\n border-bottom-color: transparent;\n border-radius: 50%;\n display: inline-block;\n box-sizing: border-box;\n animation: ${rotate} 1s linear infinite;\n`;\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n role = \"status\",\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive = \"polite\",\n \"aria-describedby\": ariaDescribedBy,\n testID,\n ...props\n}) => {\n return (\n <StyledSpinner\n role={role}\n aria-label={ariaLabel}\n aria-live={ariaLive}\n aria-describedby={ariaDescribedBy}\n data-testid={testID}\n {...props}\n />\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n color: ${(props) => props.color || \"currentColor\"};\n\n svg {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: currentColor;\n }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { DividerProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledDivider = styled.div<DividerProps>`\n background-color: ${(props) =>\n props.dashStroke\n ? \"transparent\"\n : props.color || \"rgba(255, 255, 255, 0.15)\"};\n width: ${(props) =>\n props.vertical\n ? typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"1px\"\n : \"100%\"};\n height: ${(props) =>\n props.vertical\n ? \"100%\"\n : typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"1px\"};\n\n ${(props) =>\n props.dashStroke &&\n `\n border-style: dashed;\n border-color: ${props.color || \"rgba(255, 255, 255, 0.15)\"};\n border-width: 0;\n ${\n props.vertical\n ? `\n border-left-width: ${typeof props.width === \"number\" ? `${props.width}px` : props.width || \"1px\"};\n height: 100%;\n `\n : `\n border-top-width: ${typeof props.height === \"number\" ? `${props.height}px` : props.height || \"1px\"};\n width: 100%;\n `\n }\n `}\n`;\n\nexport const Divider: React.FC<DividerProps> = (props) => {\n return <StyledDivider {...props} />;\n};\n","import React, { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledInput = styled.input<InputPrimitiveProps>`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-family: inherit;\n text-align: inherit;\n\n &::placeholder {\n color: ${(props) =>\n props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const InputPrimitive = forwardRef<HTMLInputElement, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n name,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-invalid\": ariaInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n ...rest\n },\n ref\n ) => {\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(e.target.value);\n }\n };\n\n // Always pass value to make it a controlled input\n const inputValue = value !== undefined ? value : \"\";\n\n return (\n <StyledInput\n ref={ref}\n id={id}\n value={inputValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n disabled={disabled}\n type={secureTextEntry ? \"password\" : type || \"text\"}\n inputMode={inputMode}\n autoComplete={autoComplete}\n style={style}\n color={color}\n fontSize={fontSize}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n aria-invalid={ariaInvalid}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n aria-disabled={ariaDisabled}\n data-testid={dataTestId}\n {...rest}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n","import React, { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { TextAreaPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledTextArea = styled.textarea<TextAreaPrimitiveProps>`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-family: inherit;\n text-align: inherit;\n resize: none;\n\n &::placeholder {\n color: ${(props) =>\n props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const TextAreaPrimitive = forwardRef<\n HTMLTextAreaElement,\n TextAreaPrimitiveProps\n>(\n (\n {\n value,\n placeholder,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n rows,\n },\n ref\n ) => {\n return (\n <StyledTextArea\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChange={(e) => onChangeText?.(e.target.value)}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n disabled={disabled}\n style={style}\n color={color}\n fontSize={fontSize}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n rows={rows}\n />\n );\n }\n);\n\nTextAreaPrimitive.displayName = \"TextAreaPrimitive\";\n","import React from \"react\";\n// @ts-ignore - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { NavBarProps, NavBarSlotProps } from \"./types\";\n\nconst StartSlot: React.FC<NavBarSlotProps> = ({ children, testID }) => (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"flex-start\"\n flex={1}\n flexBasis={0}\n gap={8}\n testID={testID}\n >\n {children}\n </Box>\n);\n\nconst Center: React.FC<NavBarSlotProps> = ({ children, testID }) => (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n flex={2}\n flexBasis={0}\n gap={8}\n testID={testID}\n >\n {children}\n </Box>\n);\n\nconst EndSlot: React.FC<NavBarSlotProps> = ({ children, testID }) => (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"flex-end\"\n flex={1}\n flexBasis={0}\n gap={8}\n testID={testID}\n >\n {children}\n </Box>\n);\n\nexport const NavBarRoot: React.FC<NavBarProps> = ({\n size = \"md\",\n bordered = false,\n backgroundColor,\n children,\n testID,\n}) => {\n const { theme } = useDesignSystem();\n\n const sizeConfigs = {\n sm: { height: 48, paddingHorizontal: 12 },\n md: { height: 64, paddingHorizontal: 16 },\n lg: { height: 80, paddingHorizontal: 20 },\n };\n\n const currentSize = sizeConfigs[size];\n\n return (\n <Box\n width=\"100%\"\n height={currentSize.height}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n paddingHorizontal={currentSize.paddingHorizontal}\n backgroundColor={backgroundColor || theme.colors.background.primary}\n borderBottomWidth={bordered ? 1 : 0}\n borderBottomColor={theme.colors.border.secondary}\n borderStyle=\"solid\"\n testID={testID}\n >\n {children}\n </Box>\n );\n};\n\nexport const NavBar = Object.assign(NavBarRoot, {\n StartSlot,\n Center,\n EndSlot,\n});\n\nNavBarRoot.displayName = \"NavBar\";\nStartSlot.displayName = \"NavBar.StartSlot\";\nCenter.displayName = \"NavBar.Center\";\nEndSlot.displayName = \"NavBar.EndSlot\";\n"],"mappings":"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","names":["styled","React","import_styled_components","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled","import_styled_components","import_jsx_runtime","styled","import_react","import_styled_components","import_jsx_runtime","styled","import_react","import_styled_components","import_jsx_runtime","styled","import_jsx_runtime"]}
package/index.mjs ADDED
@@ -0,0 +1,518 @@
1
+ // ../primitives-web/src/Box.tsx
2
+ import React from "react";
3
+ import styled from "styled-components";
4
+ import { jsx } from "react/jsx-runtime";
5
+ var StyledBox = styled.div`
6
+ display: flex;
7
+ box-sizing: border-box;
8
+ background-color: ${(props) => props.backgroundColor || "transparent"};
9
+ border-color: ${(props) => props.borderColor || "transparent"};
10
+ border-width: ${(props) => typeof props.borderWidth === "number" ? `${props.borderWidth}px` : props.borderWidth || 0};
11
+
12
+ ${(props) => props.borderBottomWidth !== void 0 && `
13
+ border-bottom-width: ${typeof props.borderBottomWidth === "number" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};
14
+ border-bottom-color: ${props.borderBottomColor || props.borderColor || "transparent"};
15
+ border-bottom-style: solid;
16
+ `}
17
+ ${(props) => props.borderTopWidth !== void 0 && `
18
+ border-top-width: ${typeof props.borderTopWidth === "number" ? `${props.borderTopWidth}px` : props.borderTopWidth};
19
+ border-top-color: ${props.borderTopColor || props.borderColor || "transparent"};
20
+ border-top-style: solid;
21
+ `}
22
+ ${(props) => props.borderLeftWidth !== void 0 && `
23
+ border-left-width: ${typeof props.borderLeftWidth === "number" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};
24
+ border-left-color: ${props.borderLeftColor || props.borderColor || "transparent"};
25
+ border-left-style: solid;
26
+ `}
27
+ ${(props) => props.borderRightWidth !== void 0 && `
28
+ border-right-width: ${typeof props.borderRightWidth === "number" ? `${props.borderRightWidth}px` : props.borderRightWidth};
29
+ border-right-color: ${props.borderRightColor || props.borderColor || "transparent"};
30
+ border-right-style: solid;
31
+ `}
32
+
33
+ border-style: ${(props) => props.borderStyle || (props.borderWidth || props.borderBottomWidth || props.borderTopWidth || props.borderLeftWidth || props.borderRightWidth ? "solid" : "none")};
34
+ border-radius: ${(props) => typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius || 0};
35
+ height: ${(props) => typeof props.height === "number" ? `${props.height}px` : props.height || "auto"};
36
+ width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width || "auto"};
37
+ min-width: ${(props) => typeof props.minWidth === "number" ? `${props.minWidth}px` : props.minWidth || "auto"};
38
+ min-height: ${(props) => typeof props.minHeight === "number" ? `${props.minHeight}px` : props.minHeight || "auto"};
39
+
40
+ padding: ${(props) => typeof props.padding === "number" ? `${props.padding}px` : props.padding || 0};
41
+ ${(props) => props.paddingHorizontal && `
42
+ padding-left: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
43
+ padding-right: ${typeof props.paddingHorizontal === "number" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};
44
+ `}
45
+ ${(props) => props.paddingVertical && `
46
+ padding-top: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
47
+ padding-bottom: ${typeof props.paddingVertical === "number" ? `${props.paddingVertical}px` : props.paddingVertical};
48
+ `}
49
+ ${(props) => props.paddingTop !== void 0 && `padding-top: ${typeof props.paddingTop === "number" ? `${props.paddingTop}px` : props.paddingTop};`}
50
+ ${(props) => props.paddingBottom !== void 0 && `padding-bottom: ${typeof props.paddingBottom === "number" ? `${props.paddingBottom}px` : props.paddingBottom};`}
51
+ ${(props) => props.paddingLeft !== void 0 && `padding-left: ${typeof props.paddingLeft === "number" ? `${props.paddingLeft}px` : props.paddingLeft};`}
52
+ ${(props) => props.paddingRight !== void 0 && `padding-right: ${typeof props.paddingRight === "number" ? `${props.paddingRight}px` : props.paddingRight};`}
53
+
54
+ margin: ${(props) => typeof props.margin === "number" ? `${props.margin}px` : props.margin || 0};
55
+ ${(props) => props.marginTop !== void 0 && `margin-top: ${typeof props.marginTop === "number" ? `${props.marginTop}px` : props.marginTop};`}
56
+ ${(props) => props.marginBottom !== void 0 && `margin-bottom: ${typeof props.marginBottom === "number" ? `${props.marginBottom}px` : props.marginBottom};`}
57
+ ${(props) => props.marginLeft !== void 0 && `margin-left: ${typeof props.marginLeft === "number" ? `${props.marginLeft}px` : props.marginLeft};`}
58
+ ${(props) => props.marginRight !== void 0 && `margin-right: ${typeof props.marginRight === "number" ? `${props.marginRight}px` : props.marginRight};`}
59
+
60
+ flex-direction: ${(props) => props.flexDirection || "column"};
61
+ flex-wrap: ${(props) => props.flexWrap || "nowrap"};
62
+ align-items: ${(props) => props.alignItems || "stretch"};
63
+ justify-content: ${(props) => props.justifyContent || "flex-start"};
64
+ cursor: ${(props) => props.cursor ? props.cursor : props.onClick || props.onPress ? "pointer" : "inherit"};
65
+ position: ${(props) => props.position || "static"};
66
+ top: ${(props) => typeof props.top === "number" ? `${props.top}px` : props.top};
67
+ bottom: ${(props) => typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom};
68
+ left: ${(props) => typeof props.left === "number" ? `${props.left}px` : props.left};
69
+ right: ${(props) => typeof props.right === "number" ? `${props.right}px` : props.right};
70
+ flex: ${(props) => props.flex};
71
+ flex-shrink: ${(props) => props.flexShrink ?? 1};
72
+ gap: ${(props) => typeof props.gap === "number" ? `${props.gap}px` : props.gap || 0};
73
+ align-self: ${(props) => props.alignSelf || "auto"};
74
+ overflow: ${(props) => props.overflow || "visible"};
75
+ overflow-x: ${(props) => props.overflowX || "visible"};
76
+ overflow-y: ${(props) => props.overflowY || "visible"};
77
+ z-index: ${(props) => props.zIndex};
78
+ opacity: ${(props) => props.disabled ? 0.5 : 1};
79
+ pointer-events: ${(props) => props.disabled ? "none" : "auto"};
80
+
81
+ &:hover {
82
+ ${(props) => props.hoverStyle?.backgroundColor && `background-color: ${props.hoverStyle.backgroundColor};`}
83
+ ${(props) => props.hoverStyle?.borderColor && `border-color: ${props.hoverStyle.borderColor};`}
84
+ }
85
+
86
+ &:active {
87
+ ${(props) => props.pressStyle?.backgroundColor && `background-color: ${props.pressStyle.backgroundColor};`}
88
+ }
89
+ `;
90
+ var Box = React.forwardRef(
91
+ ({
92
+ children,
93
+ onPress,
94
+ onKeyDown,
95
+ onKeyUp,
96
+ role,
97
+ "aria-label": ariaLabel,
98
+ "aria-labelledby": ariaLabelledBy,
99
+ "aria-current": ariaCurrent,
100
+ "aria-disabled": ariaDisabled,
101
+ "aria-live": ariaLive,
102
+ "aria-busy": ariaBusy,
103
+ "aria-describedby": ariaDescribedBy,
104
+ "aria-expanded": ariaExpanded,
105
+ "aria-haspopup": ariaHasPopup,
106
+ "aria-pressed": ariaPressed,
107
+ "aria-controls": ariaControls,
108
+ tabIndex,
109
+ as,
110
+ src,
111
+ alt,
112
+ type,
113
+ disabled,
114
+ id,
115
+ ...props
116
+ }, ref) => {
117
+ if (as === "img" && src) {
118
+ return /* @__PURE__ */ jsx(
119
+ "img",
120
+ {
121
+ src,
122
+ alt: alt || "",
123
+ style: {
124
+ display: "block",
125
+ objectFit: "cover",
126
+ width: typeof props.width === "number" ? `${props.width}px` : props.width,
127
+ height: typeof props.height === "number" ? `${props.height}px` : props.height,
128
+ borderRadius: typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius,
129
+ position: props.position,
130
+ top: typeof props.top === "number" ? `${props.top}px` : props.top,
131
+ left: typeof props.left === "number" ? `${props.left}px` : props.left,
132
+ right: typeof props.right === "number" ? `${props.right}px` : props.right,
133
+ bottom: typeof props.bottom === "number" ? `${props.bottom}px` : props.bottom
134
+ }
135
+ }
136
+ );
137
+ }
138
+ return /* @__PURE__ */ jsx(
139
+ StyledBox,
140
+ {
141
+ ref,
142
+ as,
143
+ id,
144
+ type: as === "button" ? type || "button" : void 0,
145
+ disabled: as === "button" ? disabled : void 0,
146
+ onClick: onPress,
147
+ onKeyDown,
148
+ onKeyUp,
149
+ role,
150
+ "aria-label": ariaLabel,
151
+ "aria-labelledby": ariaLabelledBy,
152
+ "aria-current": ariaCurrent,
153
+ "aria-disabled": ariaDisabled,
154
+ "aria-busy": ariaBusy,
155
+ "aria-describedby": ariaDescribedBy,
156
+ "aria-expanded": ariaExpanded,
157
+ "aria-haspopup": ariaHasPopup,
158
+ "aria-pressed": ariaPressed,
159
+ "aria-controls": ariaControls,
160
+ "aria-live": ariaLive,
161
+ tabIndex: tabIndex !== void 0 ? tabIndex : void 0,
162
+ ...props,
163
+ children
164
+ }
165
+ );
166
+ }
167
+ );
168
+ Box.displayName = "Box";
169
+
170
+ // ../primitives-web/src/Text.tsx
171
+ import styled2 from "styled-components";
172
+ import { jsx as jsx2 } from "react/jsx-runtime";
173
+ var StyledText = styled2.span`
174
+ color: ${(props) => props.color || "inherit"};
175
+ font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
176
+ font-weight: ${(props) => props.fontWeight || "normal"};
177
+ font-family: ${(props) => props.fontFamily || '"Pilat Wide Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important'};
178
+ line-height: ${(props) => typeof props.lineHeight === "number" ? `${props.lineHeight}px` : props.lineHeight || "inherit"};
179
+ white-space: ${(props) => props.whiteSpace || "normal"};
180
+ text-align: ${(props) => props.textAlign || "inherit"};
181
+ text-decoration: ${(props) => props.textDecoration || "none"};
182
+ `;
183
+
184
+ // ../primitives-web/src/Spinner.tsx
185
+ import styled3, { keyframes } from "styled-components";
186
+ import { jsx as jsx3 } from "react/jsx-runtime";
187
+ var rotate = keyframes`
188
+ from {
189
+ transform: rotate(0deg);
190
+ }
191
+ to {
192
+ transform: rotate(360deg);
193
+ }
194
+ `;
195
+ var StyledSpinner = styled3.div`
196
+ width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
197
+ height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
198
+ border: ${(props) => props.strokeWidth || 2}px solid
199
+ ${(props) => props.color || "currentColor"};
200
+ border-bottom-color: transparent;
201
+ border-radius: 50%;
202
+ display: inline-block;
203
+ box-sizing: border-box;
204
+ animation: ${rotate} 1s linear infinite;
205
+ `;
206
+ var Spinner = ({
207
+ role = "status",
208
+ "aria-label": ariaLabel,
209
+ "aria-live": ariaLive = "polite",
210
+ "aria-describedby": ariaDescribedBy,
211
+ testID,
212
+ ...props
213
+ }) => {
214
+ return /* @__PURE__ */ jsx3(
215
+ StyledSpinner,
216
+ {
217
+ role,
218
+ "aria-label": ariaLabel,
219
+ "aria-live": ariaLive,
220
+ "aria-describedby": ariaDescribedBy,
221
+ "data-testid": testID,
222
+ ...props
223
+ }
224
+ );
225
+ };
226
+ Spinner.displayName = "Spinner";
227
+
228
+ // ../primitives-web/src/Icon.tsx
229
+ import styled4 from "styled-components";
230
+ import { jsx as jsx4 } from "react/jsx-runtime";
231
+ var StyledIcon = styled4.div`
232
+ display: flex;
233
+ align-items: center;
234
+ justify-content: center;
235
+ width: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
236
+ height: ${(props) => typeof props.size === "number" ? `${props.size}px` : props.size || "24px"};
237
+ color: ${(props) => props.color || "currentColor"};
238
+
239
+ svg {
240
+ width: 100%;
241
+ height: 100%;
242
+ fill: none;
243
+ stroke: currentColor;
244
+ }
245
+ `;
246
+
247
+ // ../primitives-web/src/Divider.tsx
248
+ import styled5 from "styled-components";
249
+ import { jsx as jsx5 } from "react/jsx-runtime";
250
+ var StyledDivider = styled5.div`
251
+ background-color: ${(props) => props.dashStroke ? "transparent" : props.color || "rgba(255, 255, 255, 0.15)"};
252
+ width: ${(props) => props.vertical ? typeof props.width === "number" ? `${props.width}px` : props.width || "1px" : "100%"};
253
+ height: ${(props) => props.vertical ? "100%" : typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
254
+
255
+ ${(props) => props.dashStroke && `
256
+ border-style: dashed;
257
+ border-color: ${props.color || "rgba(255, 255, 255, 0.15)"};
258
+ border-width: 0;
259
+ ${props.vertical ? `
260
+ border-left-width: ${typeof props.width === "number" ? `${props.width}px` : props.width || "1px"};
261
+ height: 100%;
262
+ ` : `
263
+ border-top-width: ${typeof props.height === "number" ? `${props.height}px` : props.height || "1px"};
264
+ width: 100%;
265
+ `}
266
+ `}
267
+ `;
268
+
269
+ // ../primitives-web/src/Input.tsx
270
+ import { forwardRef } from "react";
271
+ import styled6 from "styled-components";
272
+ import { jsx as jsx6 } from "react/jsx-runtime";
273
+ var StyledInput = styled6.input`
274
+ background: transparent;
275
+ border: none;
276
+ outline: none;
277
+ width: 100%;
278
+ height: 100%;
279
+ padding: 0;
280
+ margin: 0;
281
+ color: ${(props) => props.color || "inherit"};
282
+ font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
283
+ font-family: inherit;
284
+ text-align: inherit;
285
+
286
+ &::placeholder {
287
+ color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
288
+ }
289
+
290
+ &:disabled {
291
+ cursor: not-allowed;
292
+ }
293
+ `;
294
+ var InputPrimitive = forwardRef(
295
+ ({
296
+ value,
297
+ placeholder,
298
+ onChange,
299
+ onChangeText,
300
+ onFocus,
301
+ onBlur,
302
+ onKeyDown,
303
+ disabled,
304
+ secureTextEntry,
305
+ style,
306
+ color,
307
+ fontSize,
308
+ placeholderTextColor,
309
+ maxLength,
310
+ name,
311
+ type,
312
+ inputMode,
313
+ autoComplete,
314
+ id,
315
+ "aria-invalid": ariaInvalid,
316
+ "aria-describedby": ariaDescribedBy,
317
+ "aria-labelledby": ariaLabelledBy,
318
+ "aria-label": ariaLabel,
319
+ "aria-disabled": ariaDisabled,
320
+ "data-testid": dataTestId,
321
+ ...rest
322
+ }, ref) => {
323
+ const handleChange = (e) => {
324
+ if (onChange) {
325
+ onChange(e);
326
+ }
327
+ if (onChangeText) {
328
+ onChangeText(e.target.value);
329
+ }
330
+ };
331
+ const inputValue = value !== void 0 ? value : "";
332
+ return /* @__PURE__ */ jsx6(
333
+ StyledInput,
334
+ {
335
+ ref,
336
+ id,
337
+ value: inputValue,
338
+ name,
339
+ placeholder,
340
+ onChange: handleChange,
341
+ onFocus,
342
+ onBlur,
343
+ onKeyDown,
344
+ disabled,
345
+ type: secureTextEntry ? "password" : type || "text",
346
+ inputMode,
347
+ autoComplete,
348
+ style,
349
+ color,
350
+ fontSize,
351
+ placeholderTextColor,
352
+ maxLength,
353
+ "aria-invalid": ariaInvalid,
354
+ "aria-describedby": ariaDescribedBy,
355
+ "aria-labelledby": ariaLabelledBy,
356
+ "aria-label": ariaLabel,
357
+ "aria-disabled": ariaDisabled,
358
+ "data-testid": dataTestId,
359
+ ...rest
360
+ }
361
+ );
362
+ }
363
+ );
364
+ InputPrimitive.displayName = "InputPrimitive";
365
+
366
+ // ../primitives-web/src/TextArea.tsx
367
+ import { forwardRef as forwardRef2 } from "react";
368
+ import styled7 from "styled-components";
369
+ import { jsx as jsx7 } from "react/jsx-runtime";
370
+ var StyledTextArea = styled7.textarea`
371
+ background: transparent;
372
+ border: none;
373
+ outline: none;
374
+ width: 100%;
375
+ height: 100%;
376
+ padding: 0;
377
+ margin: 0;
378
+ color: ${(props) => props.color || "inherit"};
379
+ font-size: ${(props) => typeof props.fontSize === "number" ? `${props.fontSize}px` : props.fontSize || "inherit"};
380
+ font-family: inherit;
381
+ text-align: inherit;
382
+ resize: none;
383
+
384
+ &::placeholder {
385
+ color: ${(props) => props.placeholderTextColor || "rgba(255, 255, 255, 0.5)"};
386
+ }
387
+
388
+ &:disabled {
389
+ cursor: not-allowed;
390
+ }
391
+ `;
392
+ var TextAreaPrimitive = forwardRef2(
393
+ ({
394
+ value,
395
+ placeholder,
396
+ onChangeText,
397
+ onFocus,
398
+ onBlur,
399
+ onKeyDown,
400
+ disabled,
401
+ style,
402
+ color,
403
+ fontSize,
404
+ placeholderTextColor,
405
+ maxLength,
406
+ rows
407
+ }, ref) => {
408
+ return /* @__PURE__ */ jsx7(
409
+ StyledTextArea,
410
+ {
411
+ ref,
412
+ value,
413
+ placeholder,
414
+ onChange: (e) => onChangeText?.(e.target.value),
415
+ onFocus,
416
+ onBlur,
417
+ onKeyDown,
418
+ disabled,
419
+ style,
420
+ color,
421
+ fontSize,
422
+ placeholderTextColor,
423
+ maxLength,
424
+ rows
425
+ }
426
+ );
427
+ }
428
+ );
429
+ TextAreaPrimitive.displayName = "TextAreaPrimitive";
430
+
431
+ // src/NavBar.tsx
432
+ import { useDesignSystem } from "@xsolla/xui-core";
433
+ import { jsx as jsx8 } from "react/jsx-runtime";
434
+ var StartSlot = ({ children, testID }) => /* @__PURE__ */ jsx8(
435
+ Box,
436
+ {
437
+ flexDirection: "row",
438
+ alignItems: "center",
439
+ justifyContent: "flex-start",
440
+ flex: 1,
441
+ flexBasis: 0,
442
+ gap: 8,
443
+ testID,
444
+ children
445
+ }
446
+ );
447
+ var Center = ({ children, testID }) => /* @__PURE__ */ jsx8(
448
+ Box,
449
+ {
450
+ flexDirection: "row",
451
+ alignItems: "center",
452
+ justifyContent: "center",
453
+ flex: 2,
454
+ flexBasis: 0,
455
+ gap: 8,
456
+ testID,
457
+ children
458
+ }
459
+ );
460
+ var EndSlot = ({ children, testID }) => /* @__PURE__ */ jsx8(
461
+ Box,
462
+ {
463
+ flexDirection: "row",
464
+ alignItems: "center",
465
+ justifyContent: "flex-end",
466
+ flex: 1,
467
+ flexBasis: 0,
468
+ gap: 8,
469
+ testID,
470
+ children
471
+ }
472
+ );
473
+ var NavBarRoot = ({
474
+ size = "md",
475
+ bordered = false,
476
+ backgroundColor,
477
+ children,
478
+ testID
479
+ }) => {
480
+ const { theme } = useDesignSystem();
481
+ const sizeConfigs = {
482
+ sm: { height: 48, paddingHorizontal: 12 },
483
+ md: { height: 64, paddingHorizontal: 16 },
484
+ lg: { height: 80, paddingHorizontal: 20 }
485
+ };
486
+ const currentSize = sizeConfigs[size];
487
+ return /* @__PURE__ */ jsx8(
488
+ Box,
489
+ {
490
+ width: "100%",
491
+ height: currentSize.height,
492
+ flexDirection: "row",
493
+ alignItems: "center",
494
+ justifyContent: "space-between",
495
+ paddingHorizontal: currentSize.paddingHorizontal,
496
+ backgroundColor: backgroundColor || theme.colors.background.primary,
497
+ borderBottomWidth: bordered ? 1 : 0,
498
+ borderBottomColor: theme.colors.border.secondary,
499
+ borderStyle: "solid",
500
+ testID,
501
+ children
502
+ }
503
+ );
504
+ };
505
+ var NavBar = Object.assign(NavBarRoot, {
506
+ StartSlot,
507
+ Center,
508
+ EndSlot
509
+ });
510
+ NavBarRoot.displayName = "NavBar";
511
+ StartSlot.displayName = "NavBar.StartSlot";
512
+ Center.displayName = "NavBar.Center";
513
+ EndSlot.displayName = "NavBar.EndSlot";
514
+ export {
515
+ NavBar,
516
+ NavBarRoot
517
+ };
518
+ //# sourceMappingURL=index.mjs.map
package/index.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../primitives-web/src/Box.tsx","../../../primitives-web/src/Text.tsx","../../../primitives-web/src/Spinner.tsx","../../../primitives-web/src/Icon.tsx","../../../primitives-web/src/Divider.tsx","../../../primitives-web/src/Input.tsx","../../../primitives-web/src/TextArea.tsx","../../src/NavBar.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport type { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledBox = styled.div<BoxProps>`\n display: flex;\n box-sizing: border-box;\n background-color: ${(props) => props.backgroundColor || \"transparent\"};\n border-color: ${(props) => props.borderColor || \"transparent\"};\n border-width: ${(props) =>\n typeof props.borderWidth === \"number\"\n ? `${props.borderWidth}px`\n : props.borderWidth || 0};\n\n ${(props) =>\n props.borderBottomWidth !== undefined &&\n `\n border-bottom-width: ${typeof props.borderBottomWidth === \"number\" ? `${props.borderBottomWidth}px` : props.borderBottomWidth};\n border-bottom-color: ${props.borderBottomColor || props.borderColor || \"transparent\"};\n border-bottom-style: solid;\n `}\n ${(props) =>\n props.borderTopWidth !== undefined &&\n `\n border-top-width: ${typeof props.borderTopWidth === \"number\" ? `${props.borderTopWidth}px` : props.borderTopWidth};\n border-top-color: ${props.borderTopColor || props.borderColor || \"transparent\"};\n border-top-style: solid;\n `}\n ${(props) =>\n props.borderLeftWidth !== undefined &&\n `\n border-left-width: ${typeof props.borderLeftWidth === \"number\" ? `${props.borderLeftWidth}px` : props.borderLeftWidth};\n border-left-color: ${props.borderLeftColor || props.borderColor || \"transparent\"};\n border-left-style: solid;\n `}\n ${(props) =>\n props.borderRightWidth !== undefined &&\n `\n border-right-width: ${typeof props.borderRightWidth === \"number\" ? `${props.borderRightWidth}px` : props.borderRightWidth};\n border-right-color: ${props.borderRightColor || props.borderColor || \"transparent\"};\n border-right-style: solid;\n `}\n\n border-style: ${(props) =>\n props.borderStyle ||\n (props.borderWidth ||\n props.borderBottomWidth ||\n props.borderTopWidth ||\n props.borderLeftWidth ||\n props.borderRightWidth\n ? \"solid\"\n : \"none\")};\n border-radius: ${(props) =>\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius || 0};\n height: ${(props) =>\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"auto\"};\n width: ${(props) =>\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"auto\"};\n min-width: ${(props) =>\n typeof props.minWidth === \"number\"\n ? `${props.minWidth}px`\n : props.minWidth || \"auto\"};\n min-height: ${(props) =>\n typeof props.minHeight === \"number\"\n ? `${props.minHeight}px`\n : props.minHeight || \"auto\"};\n\n padding: ${(props) =>\n typeof props.padding === \"number\"\n ? `${props.padding}px`\n : props.padding || 0};\n ${(props) =>\n props.paddingHorizontal &&\n `\n padding-left: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n padding-right: ${typeof props.paddingHorizontal === \"number\" ? `${props.paddingHorizontal}px` : props.paddingHorizontal};\n `}\n ${(props) =>\n props.paddingVertical &&\n `\n padding-top: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n padding-bottom: ${typeof props.paddingVertical === \"number\" ? `${props.paddingVertical}px` : props.paddingVertical};\n `}\n ${(props) =>\n props.paddingTop !== undefined &&\n `padding-top: ${typeof props.paddingTop === \"number\" ? `${props.paddingTop}px` : props.paddingTop};`}\n ${(props) =>\n props.paddingBottom !== undefined &&\n `padding-bottom: ${typeof props.paddingBottom === \"number\" ? `${props.paddingBottom}px` : props.paddingBottom};`}\n ${(props) =>\n props.paddingLeft !== undefined &&\n `padding-left: ${typeof props.paddingLeft === \"number\" ? `${props.paddingLeft}px` : props.paddingLeft};`}\n ${(props) =>\n props.paddingRight !== undefined &&\n `padding-right: ${typeof props.paddingRight === \"number\" ? `${props.paddingRight}px` : props.paddingRight};`}\n\n margin: ${(props) =>\n typeof props.margin === \"number\" ? `${props.margin}px` : props.margin || 0};\n ${(props) =>\n props.marginTop !== undefined &&\n `margin-top: ${typeof props.marginTop === \"number\" ? `${props.marginTop}px` : props.marginTop};`}\n ${(props) =>\n props.marginBottom !== undefined &&\n `margin-bottom: ${typeof props.marginBottom === \"number\" ? `${props.marginBottom}px` : props.marginBottom};`}\n ${(props) =>\n props.marginLeft !== undefined &&\n `margin-left: ${typeof props.marginLeft === \"number\" ? `${props.marginLeft}px` : props.marginLeft};`}\n ${(props) =>\n props.marginRight !== undefined &&\n `margin-right: ${typeof props.marginRight === \"number\" ? `${props.marginRight}px` : props.marginRight};`}\n\n flex-direction: ${(props) => props.flexDirection || \"column\"};\n flex-wrap: ${(props) => props.flexWrap || \"nowrap\"};\n align-items: ${(props) => props.alignItems || \"stretch\"};\n justify-content: ${(props) => props.justifyContent || \"flex-start\"};\n cursor: ${(props) =>\n props.cursor\n ? props.cursor\n : props.onClick || props.onPress\n ? \"pointer\"\n : \"inherit\"};\n position: ${(props) => props.position || \"static\"};\n top: ${(props) =>\n typeof props.top === \"number\" ? `${props.top}px` : props.top};\n bottom: ${(props) =>\n typeof props.bottom === \"number\" ? `${props.bottom}px` : props.bottom};\n left: ${(props) =>\n typeof props.left === \"number\" ? `${props.left}px` : props.left};\n right: ${(props) =>\n typeof props.right === \"number\" ? `${props.right}px` : props.right};\n flex: ${(props) => props.flex};\n flex-shrink: ${(props) => props.flexShrink ?? 1};\n gap: ${(props) =>\n typeof props.gap === \"number\" ? `${props.gap}px` : props.gap || 0};\n align-self: ${(props) => props.alignSelf || \"auto\"};\n overflow: ${(props) => props.overflow || \"visible\"};\n overflow-x: ${(props) => props.overflowX || \"visible\"};\n overflow-y: ${(props) => props.overflowY || \"visible\"};\n z-index: ${(props) => props.zIndex};\n opacity: ${(props) => (props.disabled ? 0.5 : 1)};\n pointer-events: ${(props) => (props.disabled ? \"none\" : \"auto\")};\n\n &:hover {\n ${(props) =>\n props.hoverStyle?.backgroundColor &&\n `background-color: ${props.hoverStyle.backgroundColor};`}\n ${(props) =>\n props.hoverStyle?.borderColor &&\n `border-color: ${props.hoverStyle.borderColor};`}\n }\n\n &:active {\n ${(props) =>\n props.pressStyle?.backgroundColor &&\n `background-color: ${props.pressStyle.backgroundColor};`}\n }\n`;\n\nexport const Box = React.forwardRef<\n HTMLDivElement | HTMLButtonElement,\n BoxProps\n>(\n (\n {\n children,\n onPress,\n onKeyDown,\n onKeyUp,\n role,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-current\": ariaCurrent,\n \"aria-disabled\": ariaDisabled,\n \"aria-live\": ariaLive,\n \"aria-busy\": ariaBusy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-expanded\": ariaExpanded,\n \"aria-haspopup\": ariaHasPopup,\n \"aria-pressed\": ariaPressed,\n \"aria-controls\": ariaControls,\n tabIndex,\n as,\n src,\n alt,\n type,\n disabled,\n id,\n ...props\n },\n ref\n ) => {\n // Handle as=\"img\" for rendering images with proper border-radius\n if (as === \"img\" && src) {\n return (\n <img\n src={src}\n alt={alt || \"\"}\n style={{\n display: \"block\",\n objectFit: \"cover\",\n width:\n typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width,\n height:\n typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height,\n borderRadius:\n typeof props.borderRadius === \"number\"\n ? `${props.borderRadius}px`\n : props.borderRadius,\n position: props.position,\n top: typeof props.top === \"number\" ? `${props.top}px` : props.top,\n left:\n typeof props.left === \"number\" ? `${props.left}px` : props.left,\n right:\n typeof props.right === \"number\"\n ? `${props.right}px`\n : props.right,\n bottom:\n typeof props.bottom === \"number\"\n ? `${props.bottom}px`\n : props.bottom,\n }}\n />\n );\n }\n\n return (\n <StyledBox\n ref={ref}\n as={as}\n id={id}\n type={as === \"button\" ? type || \"button\" : undefined}\n disabled={as === \"button\" ? disabled : undefined}\n onClick={onPress}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n role={role}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-current={ariaCurrent}\n aria-disabled={ariaDisabled}\n aria-busy={ariaBusy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={ariaExpanded}\n aria-haspopup={ariaHasPopup}\n aria-pressed={ariaPressed}\n aria-controls={ariaControls}\n aria-live={ariaLive}\n tabIndex={tabIndex !== undefined ? tabIndex : undefined}\n {...props}\n >\n {children}\n </StyledBox>\n );\n }\n);\n\nBox.displayName = \"Box\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledText = styled.span<TextProps>`\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-weight: ${(props) => props.fontWeight || \"normal\"};\n font-family: ${(props) =>\n props.fontFamily ||\n '\"Pilat Wide Bold\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif !important'};\n line-height: ${(props) =>\n typeof props.lineHeight === \"number\"\n ? `${props.lineHeight}px`\n : props.lineHeight || \"inherit\"};\n white-space: ${(props) => props.whiteSpace || \"normal\"};\n text-align: ${(props) => props.textAlign || \"inherit\"};\n text-decoration: ${(props) => props.textDecoration || \"none\"};\n`;\n\nexport const Text: React.FC<TextProps> = ({\n style,\n className,\n id,\n role,\n ...props\n}) => {\n return (\n <StyledText\n {...props}\n style={style}\n className={className}\n id={id}\n role={role}\n />\n );\n};\n","import React from \"react\";\nimport styled, { keyframes } from \"styled-components\";\nimport type { SpinnerProps } from \"@xsolla/xui-primitives-core\";\n\nconst rotate = keyframes`\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n`;\n\nconst StyledSpinner = styled.div<SpinnerProps>`\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n border: ${(props) => props.strokeWidth || 2}px solid\n ${(props) => props.color || \"currentColor\"};\n border-bottom-color: transparent;\n border-radius: 50%;\n display: inline-block;\n box-sizing: border-box;\n animation: ${rotate} 1s linear infinite;\n`;\n\nexport const Spinner: React.FC<SpinnerProps> = ({\n role = \"status\",\n \"aria-label\": ariaLabel,\n \"aria-live\": ariaLive = \"polite\",\n \"aria-describedby\": ariaDescribedBy,\n testID,\n ...props\n}) => {\n return (\n <StyledSpinner\n role={role}\n aria-label={ariaLabel}\n aria-live={ariaLive}\n aria-describedby={ariaDescribedBy}\n data-testid={testID}\n {...props}\n />\n );\n};\n\nSpinner.displayName = \"Spinner\";\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledIcon = styled.div<IconProps>`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n height: ${(props) =>\n typeof props.size === \"number\" ? `${props.size}px` : props.size || \"24px\"};\n color: ${(props) => props.color || \"currentColor\"};\n\n svg {\n width: 100%;\n height: 100%;\n fill: none;\n stroke: currentColor;\n }\n`;\n\nexport const Icon: React.FC<IconProps> = ({ children, ...props }) => {\n return <StyledIcon {...props}>{children}</StyledIcon>;\n};\n","import React from \"react\";\nimport styled from \"styled-components\";\nimport { DividerProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledDivider = styled.div<DividerProps>`\n background-color: ${(props) =>\n props.dashStroke\n ? \"transparent\"\n : props.color || \"rgba(255, 255, 255, 0.15)\"};\n width: ${(props) =>\n props.vertical\n ? typeof props.width === \"number\"\n ? `${props.width}px`\n : props.width || \"1px\"\n : \"100%\"};\n height: ${(props) =>\n props.vertical\n ? \"100%\"\n : typeof props.height === \"number\"\n ? `${props.height}px`\n : props.height || \"1px\"};\n\n ${(props) =>\n props.dashStroke &&\n `\n border-style: dashed;\n border-color: ${props.color || \"rgba(255, 255, 255, 0.15)\"};\n border-width: 0;\n ${\n props.vertical\n ? `\n border-left-width: ${typeof props.width === \"number\" ? `${props.width}px` : props.width || \"1px\"};\n height: 100%;\n `\n : `\n border-top-width: ${typeof props.height === \"number\" ? `${props.height}px` : props.height || \"1px\"};\n width: 100%;\n `\n }\n `}\n`;\n\nexport const Divider: React.FC<DividerProps> = (props) => {\n return <StyledDivider {...props} />;\n};\n","import React, { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { InputPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledInput = styled.input<InputPrimitiveProps>`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-family: inherit;\n text-align: inherit;\n\n &::placeholder {\n color: ${(props) =>\n props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const InputPrimitive = forwardRef<HTMLInputElement, InputPrimitiveProps>(\n (\n {\n value,\n placeholder,\n onChange,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n secureTextEntry,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n name,\n type,\n inputMode,\n autoComplete,\n id,\n \"aria-invalid\": ariaInvalid,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-label\": ariaLabel,\n \"aria-disabled\": ariaDisabled,\n \"data-testid\": dataTestId,\n ...rest\n },\n ref\n ) => {\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (onChange) {\n onChange(e);\n }\n if (onChangeText) {\n onChangeText(e.target.value);\n }\n };\n\n // Always pass value to make it a controlled input\n const inputValue = value !== undefined ? value : \"\";\n\n return (\n <StyledInput\n ref={ref}\n id={id}\n value={inputValue}\n name={name}\n placeholder={placeholder}\n onChange={handleChange}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n disabled={disabled}\n type={secureTextEntry ? \"password\" : type || \"text\"}\n inputMode={inputMode}\n autoComplete={autoComplete}\n style={style}\n color={color}\n fontSize={fontSize}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n aria-invalid={ariaInvalid}\n aria-describedby={ariaDescribedBy}\n aria-labelledby={ariaLabelledBy}\n aria-label={ariaLabel}\n aria-disabled={ariaDisabled}\n data-testid={dataTestId}\n {...rest}\n />\n );\n }\n);\n\nInputPrimitive.displayName = \"InputPrimitive\";\n","import React, { forwardRef } from \"react\";\nimport styled from \"styled-components\";\nimport { TextAreaPrimitiveProps } from \"@xsolla/xui-primitives-core\";\n\nconst StyledTextArea = styled.textarea<TextAreaPrimitiveProps>`\n background: transparent;\n border: none;\n outline: none;\n width: 100%;\n height: 100%;\n padding: 0;\n margin: 0;\n color: ${(props) => props.color || \"inherit\"};\n font-size: ${(props) =>\n typeof props.fontSize === \"number\"\n ? `${props.fontSize}px`\n : props.fontSize || \"inherit\"};\n font-family: inherit;\n text-align: inherit;\n resize: none;\n\n &::placeholder {\n color: ${(props) =>\n props.placeholderTextColor || \"rgba(255, 255, 255, 0.5)\"};\n }\n\n &:disabled {\n cursor: not-allowed;\n }\n`;\n\nexport const TextAreaPrimitive = forwardRef<\n HTMLTextAreaElement,\n TextAreaPrimitiveProps\n>(\n (\n {\n value,\n placeholder,\n onChangeText,\n onFocus,\n onBlur,\n onKeyDown,\n disabled,\n style,\n color,\n fontSize,\n placeholderTextColor,\n maxLength,\n rows,\n },\n ref\n ) => {\n return (\n <StyledTextArea\n ref={ref}\n value={value}\n placeholder={placeholder}\n onChange={(e) => onChangeText?.(e.target.value)}\n onFocus={onFocus}\n onBlur={onBlur}\n onKeyDown={onKeyDown}\n disabled={disabled}\n style={style}\n color={color}\n fontSize={fontSize}\n placeholderTextColor={placeholderTextColor}\n maxLength={maxLength}\n rows={rows}\n />\n );\n }\n);\n\nTextAreaPrimitive.displayName = \"TextAreaPrimitive\";\n","import React from \"react\";\n// @ts-ignore - this will be resolved at build time\nimport { Box } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\nimport type { NavBarProps, NavBarSlotProps } from \"./types\";\n\nconst StartSlot: React.FC<NavBarSlotProps> = ({ children, testID }) => (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"flex-start\"\n flex={1}\n flexBasis={0}\n gap={8}\n testID={testID}\n >\n {children}\n </Box>\n);\n\nconst Center: React.FC<NavBarSlotProps> = ({ children, testID }) => (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n flex={2}\n flexBasis={0}\n gap={8}\n testID={testID}\n >\n {children}\n </Box>\n);\n\nconst EndSlot: React.FC<NavBarSlotProps> = ({ children, testID }) => (\n <Box\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"flex-end\"\n flex={1}\n flexBasis={0}\n gap={8}\n testID={testID}\n >\n {children}\n </Box>\n);\n\nexport const NavBarRoot: React.FC<NavBarProps> = ({\n size = \"md\",\n bordered = false,\n backgroundColor,\n children,\n testID,\n}) => {\n const { theme } = useDesignSystem();\n\n const sizeConfigs = {\n sm: { height: 48, paddingHorizontal: 12 },\n md: { height: 64, paddingHorizontal: 16 },\n lg: { height: 80, paddingHorizontal: 20 },\n };\n\n const currentSize = sizeConfigs[size];\n\n return (\n <Box\n width=\"100%\"\n height={currentSize.height}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n paddingHorizontal={currentSize.paddingHorizontal}\n backgroundColor={backgroundColor || theme.colors.background.primary}\n borderBottomWidth={bordered ? 1 : 0}\n borderBottomColor={theme.colors.border.secondary}\n borderStyle=\"solid\"\n testID={testID}\n >\n {children}\n </Box>\n );\n};\n\nexport const NavBar = Object.assign(NavBarRoot, {\n StartSlot,\n Center,\n EndSlot,\n});\n\nNavBarRoot.displayName = \"NavBar\";\nStartSlot.displayName = \"NavBar.StartSlot\";\nCenter.displayName = \"NavBar.Center\";\nEndSlot.displayName = \"NavBar.EndSlot\";\n"],"mappings":"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","names":["styled","jsx","styled","jsx","styled","jsx","styled","jsx","styled","jsx","forwardRef","styled","jsx","jsx"]}
package/package.json ADDED
@@ -0,0 +1,23 @@
1
+ {
2
+ "name": "@xsolla/xui-nav-bar-web",
3
+ "version": "0.64.0-pr56.1768348754",
4
+ "main": "./index.js",
5
+ "module": "./index.mjs",
6
+ "types": "./index.d.ts",
7
+ "scripts": {
8
+ "build": "yarn build:web && yarn build:native",
9
+ "build:web": "PLATFORM=web tsup src/index.tsx --format esm,cjs --dts --env.PLATFORM web --clean",
10
+ "build:native": "PLATFORM=native tsup src/index.tsx --format esm,cjs --dts --env.PLATFORM native --clean"
11
+ },
12
+ "dependencies": {
13
+ "@xsolla/xui-core": "0.64.0-pr56.1768348754",
14
+ "@xsolla/xui-primitives-core": "0.64.0-pr56.1768348754"
15
+ },
16
+ "peerDependencies": {
17
+ "react": ">=16.8.0"
18
+ },
19
+ "devDependencies": {
20
+ "tsup": "^8.0.0"
21
+ },
22
+ "license": "MIT"
23
+ }