@xsolla/xui-segmented 0.99.0 → 0.101.0-pr166.1772004027
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +181 -26
- package/native/index.d.mts +0 -2
- package/native/index.d.ts +0 -2
- package/native/index.js +111 -62
- package/native/index.js.flow +0 -5
- package/native/index.js.map +1 -1
- package/native/index.mjs +112 -63
- package/native/index.mjs.map +1 -1
- package/package.json +4 -4
- package/web/index.d.mts +0 -2
- package/web/index.d.ts +0 -2
- package/web/index.js +111 -62
- package/web/index.js.flow +0 -5
- package/web/index.js.map +1 -1
- package/web/index.mjs +112 -63
- package/web/index.mjs.map +1 -1
package/README.md
CHANGED
|
@@ -1,47 +1,202 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Segmented
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
A cross-platform React segmented control component for switching between related views or filters. Similar to iOS's UISegmentedControl.
|
|
4
4
|
|
|
5
5
|
## Installation
|
|
6
6
|
|
|
7
7
|
```bash
|
|
8
|
+
npm install @xsolla/xui-segmented
|
|
9
|
+
# or
|
|
8
10
|
yarn add @xsolla/xui-segmented
|
|
9
11
|
```
|
|
10
12
|
|
|
11
|
-
##
|
|
13
|
+
## Demo
|
|
14
|
+
|
|
15
|
+
### Basic Segmented
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
import * as React from 'react';
|
|
19
|
+
import { Segmented } from '@xsolla/xui-segmented';
|
|
20
|
+
|
|
21
|
+
export default function BasicSegmented() {
|
|
22
|
+
const [active, setActive] = React.useState('day');
|
|
23
|
+
|
|
24
|
+
return (
|
|
25
|
+
<Segmented
|
|
26
|
+
items={[
|
|
27
|
+
{ id: 'day', label: 'Day' },
|
|
28
|
+
{ id: 'week', label: 'Week' },
|
|
29
|
+
{ id: 'month', label: 'Month' },
|
|
30
|
+
]}
|
|
31
|
+
activeId={active}
|
|
32
|
+
onChange={setActive}
|
|
33
|
+
/>
|
|
34
|
+
);
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### With Icons
|
|
12
39
|
|
|
13
40
|
```tsx
|
|
41
|
+
import * as React from 'react';
|
|
42
|
+
import { Segmented } from '@xsolla/xui-segmented';
|
|
43
|
+
import { Grid, List } from '@xsolla/xui-icons-base';
|
|
44
|
+
|
|
45
|
+
export default function IconSegmented() {
|
|
46
|
+
const [active, setActive] = React.useState('grid');
|
|
47
|
+
|
|
48
|
+
return (
|
|
49
|
+
<Segmented
|
|
50
|
+
items={[
|
|
51
|
+
{ id: 'grid', label: 'Grid', icon: <Grid size={16} /> },
|
|
52
|
+
{ id: 'list', label: 'List', icon: <List size={16} /> },
|
|
53
|
+
]}
|
|
54
|
+
activeId={active}
|
|
55
|
+
onChange={setActive}
|
|
56
|
+
/>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
### Full Width
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
import * as React from 'react';
|
|
65
|
+
import { Segmented } from '@xsolla/xui-segmented';
|
|
66
|
+
|
|
67
|
+
export default function FullWidthSegmented() {
|
|
68
|
+
const [active, setActive] = React.useState('all');
|
|
69
|
+
|
|
70
|
+
return (
|
|
71
|
+
<div style={{ width: 400 }}>
|
|
72
|
+
<Segmented
|
|
73
|
+
fullWidth={true}
|
|
74
|
+
items={[
|
|
75
|
+
{ id: 'all', label: 'All' },
|
|
76
|
+
{ id: 'active', label: 'Active' },
|
|
77
|
+
{ id: 'completed', label: 'Completed' },
|
|
78
|
+
]}
|
|
79
|
+
activeId={active}
|
|
80
|
+
onChange={setActive}
|
|
81
|
+
/>
|
|
82
|
+
</div>
|
|
83
|
+
);
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
## Anatomy
|
|
88
|
+
|
|
89
|
+
```jsx
|
|
14
90
|
import { Segmented } from '@xsolla/xui-segmented';
|
|
15
91
|
|
|
16
92
|
<Segmented
|
|
17
|
-
items={[
|
|
18
|
-
{ id: '
|
|
19
|
-
{ id: '
|
|
20
|
-
{ id: 'month', label: 'Month' },
|
|
93
|
+
items={[ // Array of segment items
|
|
94
|
+
{ id: 'a', label: 'A' },
|
|
95
|
+
{ id: 'b', label: 'B' },
|
|
21
96
|
]}
|
|
22
|
-
activeId="
|
|
23
|
-
onChange={
|
|
97
|
+
activeId="a" // Currently active item ID
|
|
98
|
+
onChange={handleChange} // Selection change handler
|
|
99
|
+
size="md" // Size variant
|
|
100
|
+
fullWidth={false} // Expand to container width
|
|
24
101
|
/>
|
|
25
102
|
```
|
|
26
103
|
|
|
27
|
-
##
|
|
104
|
+
## Examples
|
|
105
|
+
|
|
106
|
+
### Segmented Sizes
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
import * as React from 'react';
|
|
110
|
+
import { Segmented } from '@xsolla/xui-segmented';
|
|
111
|
+
|
|
112
|
+
export default function SegmentedSizes() {
|
|
113
|
+
const items = [
|
|
114
|
+
{ id: 'a', label: 'Option A' },
|
|
115
|
+
{ id: 'b', label: 'Option B' },
|
|
116
|
+
{ id: 'c', label: 'Option C' },
|
|
117
|
+
];
|
|
118
|
+
|
|
119
|
+
return (
|
|
120
|
+
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
|
|
121
|
+
<Segmented size="sm" items={items} activeId="a" />
|
|
122
|
+
<Segmented size="md" items={items} activeId="a" />
|
|
123
|
+
<Segmented size="lg" items={items} activeId="a" />
|
|
124
|
+
<Segmented size="xl" items={items} activeId="a" />
|
|
125
|
+
</div>
|
|
126
|
+
);
|
|
127
|
+
}
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
### With Disabled Items
|
|
131
|
+
|
|
132
|
+
```tsx
|
|
133
|
+
import * as React from 'react';
|
|
134
|
+
import { Segmented } from '@xsolla/xui-segmented';
|
|
135
|
+
|
|
136
|
+
export default function DisabledItemSegmented() {
|
|
137
|
+
const [active, setActive] = React.useState('enabled1');
|
|
138
|
+
|
|
139
|
+
return (
|
|
140
|
+
<Segmented
|
|
141
|
+
items={[
|
|
142
|
+
{ id: 'enabled1', label: 'Enabled' },
|
|
143
|
+
{ id: 'disabled', label: 'Disabled', disabled: true },
|
|
144
|
+
{ id: 'enabled2', label: 'Enabled' },
|
|
145
|
+
]}
|
|
146
|
+
activeId={active}
|
|
147
|
+
onChange={setActive}
|
|
148
|
+
/>
|
|
149
|
+
);
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
## API Reference
|
|
28
154
|
|
|
29
155
|
### Segmented
|
|
30
156
|
|
|
157
|
+
**Segmented Props:**
|
|
158
|
+
|
|
31
159
|
| Prop | Type | Default | Description |
|
|
32
|
-
|
|
33
|
-
|
|
|
34
|
-
|
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
160
|
+
| :--- | :--- | :------ | :---------- |
|
|
161
|
+
| items | `SegmentedItemType[]` | - | **Required.** Array of segment items. |
|
|
162
|
+
| activeId | `string` | - | ID of the currently active item. |
|
|
163
|
+
| onChange | `(id: string) => void` | - | Selection change handler. |
|
|
164
|
+
| size | `"xl" \| "lg" \| "md" \| "sm"` | `"md"` | Size variant. |
|
|
165
|
+
| fullWidth | `boolean` | `false` | Expand segments to fill container width. |
|
|
166
|
+
| id | `string` | - | HTML id attribute. |
|
|
167
|
+
| testID | `string` | - | Test identifier. |
|
|
168
|
+
|
|
169
|
+
**SegmentedItemType:**
|
|
170
|
+
|
|
171
|
+
```typescript
|
|
172
|
+
interface SegmentedItemType {
|
|
173
|
+
id: string; // Unique identifier
|
|
174
|
+
label: string; // Display text
|
|
175
|
+
icon?: ReactNode; // Optional icon
|
|
176
|
+
disabled?: boolean; // Disabled state
|
|
177
|
+
"aria-label"?: string; // Accessible label
|
|
178
|
+
}
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
## Keyboard Navigation
|
|
182
|
+
|
|
183
|
+
| Key | Action |
|
|
184
|
+
| :-- | :----- |
|
|
185
|
+
| Arrow Right/Down | Move to next item |
|
|
186
|
+
| Arrow Left/Up | Move to previous item |
|
|
187
|
+
| Enter/Space | Select focused item |
|
|
188
|
+
|
|
189
|
+
## Behavior
|
|
190
|
+
|
|
191
|
+
- Active segment has elevated background with smooth sliding animation
|
|
192
|
+
- Disabled segments show reduced opacity
|
|
193
|
+
- Keyboard navigation wraps around
|
|
194
|
+
- Hover effect on non-active segments
|
|
195
|
+
|
|
196
|
+
## Accessibility
|
|
197
|
+
|
|
198
|
+
- Uses `role="radiogroup"` on container
|
|
199
|
+
- Each segment has `role="radio"`
|
|
200
|
+
- `aria-checked` indicates selection state
|
|
201
|
+
- `aria-disabled` for disabled items
|
|
202
|
+
- Roving tabindex for keyboard navigation
|
package/native/index.d.mts
CHANGED
|
@@ -21,8 +21,6 @@ interface SegmentedProps {
|
|
|
21
21
|
onChange?: (id: string) => void;
|
|
22
22
|
/** Size variant */
|
|
23
23
|
size?: "xl" | "lg" | "md" | "sm";
|
|
24
|
-
/** Whether to show a border around the container */
|
|
25
|
-
stroke?: boolean;
|
|
26
24
|
/** HTML id attribute */
|
|
27
25
|
id?: string;
|
|
28
26
|
/** Test ID for testing frameworks */
|
package/native/index.d.ts
CHANGED
|
@@ -21,8 +21,6 @@ interface SegmentedProps {
|
|
|
21
21
|
onChange?: (id: string) => void;
|
|
22
22
|
/** Size variant */
|
|
23
23
|
size?: "xl" | "lg" | "md" | "sm";
|
|
24
|
-
/** Whether to show a border around the container */
|
|
25
|
-
stroke?: boolean;
|
|
26
24
|
/** HTML id attribute */
|
|
27
25
|
id?: string;
|
|
28
26
|
/** Test ID for testing frameworks */
|
package/native/index.js
CHANGED
|
@@ -265,12 +265,12 @@ var Icon = ({ children, color, size }) => {
|
|
|
265
265
|
// src/Segmented.tsx
|
|
266
266
|
var import_xui_core = require("@xsolla/xui-core");
|
|
267
267
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
268
|
+
var isWeb = typeof document !== "undefined";
|
|
268
269
|
var Segmented = ({
|
|
269
270
|
items,
|
|
270
271
|
activeId,
|
|
271
272
|
onChange,
|
|
272
273
|
size = "md",
|
|
273
|
-
stroke = false,
|
|
274
274
|
id,
|
|
275
275
|
testID,
|
|
276
276
|
fullWidth = false
|
|
@@ -279,6 +279,23 @@ var Segmented = ({
|
|
|
279
279
|
const sizeStyles = theme.sizing.segmented(size);
|
|
280
280
|
const containerId = id ? `${id}-container` : void 0;
|
|
281
281
|
const itemRefs = (0, import_react2.useRef)([]);
|
|
282
|
+
const containerRef = (0, import_react2.useRef)(null);
|
|
283
|
+
const [indicatorStyle, setIndicatorStyle] = (0, import_react2.useState)({ left: 0, width: 0, initialized: false });
|
|
284
|
+
(0, import_react2.useEffect)(() => {
|
|
285
|
+
if (!isWeb) return;
|
|
286
|
+
const activeIndex = items.findIndex((item) => item.id === activeId);
|
|
287
|
+
const activeItemEl = itemRefs.current[activeIndex];
|
|
288
|
+
const containerEl = containerRef.current;
|
|
289
|
+
if (activeItemEl && containerEl) {
|
|
290
|
+
const containerRect = containerEl.getBoundingClientRect();
|
|
291
|
+
const itemRect = activeItemEl.getBoundingClientRect();
|
|
292
|
+
setIndicatorStyle({
|
|
293
|
+
left: itemRect.left - containerRect.left,
|
|
294
|
+
width: itemRect.width,
|
|
295
|
+
initialized: true
|
|
296
|
+
});
|
|
297
|
+
}
|
|
298
|
+
}, [activeId, items]);
|
|
282
299
|
const enabledIndices = items.map((item, index) => !item.disabled ? index : -1).filter((i) => i !== -1);
|
|
283
300
|
const focusItem = (0, import_react2.useCallback)((index) => {
|
|
284
301
|
const element = itemRefs.current[index];
|
|
@@ -319,83 +336,115 @@ var Segmented = ({
|
|
|
319
336
|
},
|
|
320
337
|
[enabledIndices, focusItem, onChange, items]
|
|
321
338
|
);
|
|
322
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.
|
|
339
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
323
340
|
Box,
|
|
324
341
|
{
|
|
325
342
|
id: containerId,
|
|
326
343
|
role: "radiogroup",
|
|
327
344
|
testID,
|
|
345
|
+
ref: (el) => {
|
|
346
|
+
containerRef.current = el;
|
|
347
|
+
},
|
|
328
348
|
flexDirection: "row",
|
|
329
349
|
alignItems: "center",
|
|
330
350
|
flexShrink: 0,
|
|
351
|
+
position: "relative",
|
|
331
352
|
width: fullWidth ? "100%" : "fit-content",
|
|
332
353
|
height: sizeStyles.height,
|
|
333
|
-
backgroundColor: theme.colors.
|
|
334
|
-
borderRadius:
|
|
335
|
-
padding:
|
|
336
|
-
borderWidth:
|
|
354
|
+
backgroundColor: theme.colors.control.segmented.bg,
|
|
355
|
+
borderRadius: sizeStyles.containerRadius,
|
|
356
|
+
padding: sizeStyles.containerPadding,
|
|
357
|
+
borderWidth: 1,
|
|
337
358
|
borderColor: theme.colors.border.secondary,
|
|
338
359
|
borderStyle: "solid",
|
|
339
360
|
overflow: "hidden",
|
|
340
|
-
children:
|
|
341
|
-
|
|
342
|
-
const isDisabled = item.disabled;
|
|
343
|
-
const itemId = id ? `${id}-item-${item.id}` : void 0;
|
|
344
|
-
const handlePress = () => {
|
|
345
|
-
if (!isDisabled && onChange) {
|
|
346
|
-
onChange(item.id);
|
|
347
|
-
}
|
|
348
|
-
};
|
|
349
|
-
const textColor = isDisabled ? theme.colors.content.tertiary : isActive ? theme.colors.content.primary : theme.colors.content.secondary;
|
|
350
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
361
|
+
children: [
|
|
362
|
+
isWeb && indicatorStyle.initialized && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
351
363
|
Box,
|
|
352
364
|
{
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
365
|
+
position: "absolute",
|
|
366
|
+
zIndex: 0,
|
|
367
|
+
height: sizeStyles.itemHeight,
|
|
368
|
+
backgroundColor: theme.colors.control.segmented.bgActive,
|
|
369
|
+
borderRadius: sizeStyles.itemRadius,
|
|
370
|
+
style: {
|
|
371
|
+
left: indicatorStyle.left,
|
|
372
|
+
width: indicatorStyle.width,
|
|
373
|
+
transition: "left 200ms ease-out, width 200ms ease-out",
|
|
374
|
+
pointerEvents: "none"
|
|
375
|
+
},
|
|
376
|
+
"aria-hidden": true
|
|
377
|
+
}
|
|
378
|
+
),
|
|
379
|
+
items.map((item, index) => {
|
|
380
|
+
const isActive = item.id === activeId;
|
|
381
|
+
const isDisabled = item.disabled;
|
|
382
|
+
const itemId = id ? `${id}-item-${item.id}` : void 0;
|
|
383
|
+
const handlePress = () => {
|
|
384
|
+
if (!isDisabled && onChange) {
|
|
385
|
+
onChange(item.id);
|
|
386
|
+
}
|
|
387
|
+
};
|
|
388
|
+
const textColor = isDisabled ? theme.colors.control.segmented.textDisable : theme.colors.control.segmented.text;
|
|
389
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
|
|
390
|
+
Box,
|
|
391
|
+
{
|
|
392
|
+
as: "button",
|
|
393
|
+
role: "radio",
|
|
394
|
+
id: itemId,
|
|
395
|
+
"aria-checked": isActive,
|
|
396
|
+
"aria-disabled": isDisabled,
|
|
397
|
+
"aria-label": item["aria-label"] || item.label,
|
|
398
|
+
tabIndex: isActive ? 0 : -1,
|
|
399
|
+
disabled: isDisabled,
|
|
400
|
+
ref: (el) => {
|
|
401
|
+
itemRefs.current[index] = el;
|
|
402
|
+
},
|
|
403
|
+
onPress: handlePress,
|
|
404
|
+
onKeyDown: (e) => handleKeyDown(e, index),
|
|
405
|
+
flex: fullWidth ? 1 : void 0,
|
|
406
|
+
flexShrink: 0,
|
|
407
|
+
position: "relative",
|
|
408
|
+
zIndex: 1,
|
|
409
|
+
height: sizeStyles.itemHeight,
|
|
410
|
+
paddingHorizontal: sizeStyles.itemPaddingHorizontal,
|
|
411
|
+
paddingVertical: sizeStyles.itemPaddingVertical,
|
|
412
|
+
flexDirection: "row",
|
|
413
|
+
alignItems: "center",
|
|
414
|
+
justifyContent: "center",
|
|
415
|
+
gap: sizeStyles.gap,
|
|
416
|
+
backgroundColor: !isWeb && isActive ? theme.colors.control.segmented.bgActive : "transparent",
|
|
417
|
+
borderRadius: sizeStyles.itemRadius,
|
|
418
|
+
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
419
|
+
hoverStyle: !isDisabled && !isActive ? {
|
|
420
|
+
backgroundColor: theme.colors.control.segmented.bgHover
|
|
421
|
+
} : void 0,
|
|
422
|
+
focusStyle: {
|
|
423
|
+
outlineColor: theme.colors.border.brand,
|
|
424
|
+
outlineWidth: 2,
|
|
425
|
+
outlineOffset: -2
|
|
426
|
+
},
|
|
427
|
+
children: [
|
|
428
|
+
item.icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: textColor, "aria-hidden": true, children: item.icon }),
|
|
429
|
+
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
430
|
+
Text,
|
|
431
|
+
{
|
|
432
|
+
color: textColor,
|
|
433
|
+
fontSize: sizeStyles.fontSize,
|
|
434
|
+
fontWeight: "500",
|
|
435
|
+
textAlign: "center",
|
|
436
|
+
whiteSpace: "nowrap",
|
|
437
|
+
overflow: "hidden",
|
|
438
|
+
textOverflow: "ellipsis",
|
|
439
|
+
children: item.label
|
|
440
|
+
}
|
|
441
|
+
)
|
|
442
|
+
]
|
|
363
443
|
},
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
height: "100%",
|
|
369
|
-
paddingHorizontal: sizeStyles.padding,
|
|
370
|
-
flexDirection: "row",
|
|
371
|
-
alignItems: "center",
|
|
372
|
-
justifyContent: "center",
|
|
373
|
-
gap: 8,
|
|
374
|
-
backgroundColor: isActive ? theme.colors.background.primary : "transparent",
|
|
375
|
-
borderRadius: isActive ? theme.radius.button - (stroke ? 1 : 0) : 0,
|
|
376
|
-
cursor: isDisabled ? "not-allowed" : "pointer",
|
|
377
|
-
boxShadow: isActive ? "0px 1px 2px rgba(0, 0, 0, 0.1)" : "none",
|
|
378
|
-
hoverStyle: !isDisabled && !isActive ? {
|
|
379
|
-
backgroundColor: theme.colors.overlay.mono
|
|
380
|
-
} : void 0,
|
|
381
|
-
children: [
|
|
382
|
-
item.icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, { size: sizeStyles.iconSize, color: textColor, "aria-hidden": true, children: item.icon }),
|
|
383
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
384
|
-
Text,
|
|
385
|
-
{
|
|
386
|
-
color: textColor,
|
|
387
|
-
fontSize: sizeStyles.fontSize,
|
|
388
|
-
fontWeight: isActive ? "600" : "500",
|
|
389
|
-
textAlign: "center",
|
|
390
|
-
whiteSpace: "nowrap",
|
|
391
|
-
children: item.label
|
|
392
|
-
}
|
|
393
|
-
)
|
|
394
|
-
]
|
|
395
|
-
},
|
|
396
|
-
item.id
|
|
397
|
-
);
|
|
398
|
-
})
|
|
444
|
+
item.id
|
|
445
|
+
);
|
|
446
|
+
})
|
|
447
|
+
]
|
|
399
448
|
}
|
|
400
449
|
);
|
|
401
450
|
};
|
package/native/index.js.flow
CHANGED
package/native/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/index.tsx","../../src/Segmented.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx"],"sourcesContent":["export * from \"./Segmented\";\n","import React, { useCallback, useRef } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\n\nexport interface SegmentedItemType {\n /** Unique identifier for the item */\n id: string;\n /** Display label for the item */\n label: string;\n /** Optional icon to display */\n icon?: React.ReactNode;\n /** Whether the item is disabled */\n disabled?: boolean;\n /** Accessible label for screen readers */\n \"aria-label\"?: string;\n}\n\nexport interface SegmentedProps {\n /** Array of items */\n items: SegmentedItemType[];\n /** ID of the currently active item */\n activeId?: string;\n /** Callback when an item is selected */\n onChange?: (id: string) => void;\n /** Size variant */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\";\n /** Whether to show a border around the container */\n stroke?: boolean;\n /** HTML id attribute */\n id?: string;\n /** Test ID for testing frameworks */\n testID?: string;\n /** Full width of the container */\n fullWidth?: boolean;\n}\n\n/**\n * Segmented - A control for switching between related views or filters\n */\nexport const Segmented: React.FC<SegmentedProps> = ({\n items,\n activeId,\n onChange,\n size = \"md\",\n stroke = false,\n id,\n testID,\n fullWidth = false,\n}) => {\n const { theme } = useDesignSystem();\n const sizeStyles = theme.sizing.segmented(size);\n\n const containerId = id ? `${id}-container` : undefined;\n const itemRefs = useRef<(HTMLElement | null)[]>([]);\n\n const enabledIndices = items\n .map((item, index) => (!item.disabled ? index : -1))\n .filter((i) => i !== -1);\n\n const focusItem = useCallback((index: number) => {\n const element = itemRefs.current[index];\n if (element) {\n element.focus();\n }\n }, []);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent, currentIndex: number) => {\n const currentEnabledIndex = enabledIndices.indexOf(currentIndex);\n\n switch (e.key) {\n case \"ArrowRight\":\n case \"ArrowDown\":\n e.preventDefault();\n {\n const nextEnabledIndex =\n currentEnabledIndex < enabledIndices.length - 1\n ? enabledIndices[currentEnabledIndex + 1]\n : enabledIndices[0];\n focusItem(nextEnabledIndex);\n }\n break;\n\n case \"ArrowLeft\":\n case \"ArrowUp\":\n e.preventDefault();\n {\n const prevEnabledIndex =\n currentEnabledIndex > 0\n ? enabledIndices[currentEnabledIndex - 1]\n : enabledIndices[enabledIndices.length - 1];\n focusItem(prevEnabledIndex);\n }\n break;\n\n case \"Enter\":\n case \" \":\n e.preventDefault();\n if (onChange && !items[currentIndex].disabled) {\n onChange(items[currentIndex].id);\n }\n break;\n\n default:\n break;\n }\n },\n [enabledIndices, focusItem, onChange, items]\n );\n\n return (\n <Box\n id={containerId}\n role=\"radiogroup\"\n testID={testID}\n flexDirection=\"row\"\n alignItems=\"center\"\n flexShrink={0}\n width={fullWidth ? \"100%\" : \"fit-content\"}\n height={sizeStyles.height}\n backgroundColor={theme.colors.overlay.mono}\n borderRadius={theme.radius.button}\n padding={stroke ? 1 : 0}\n borderWidth={stroke ? 1 : 0}\n borderColor={theme.colors.border.secondary}\n borderStyle=\"solid\"\n overflow=\"hidden\"\n >\n {items.map((item, index) => {\n const isActive = item.id === activeId;\n const isDisabled = item.disabled;\n const itemId = id ? `${id}-item-${item.id}` : undefined;\n\n const handlePress = () => {\n if (!isDisabled && onChange) {\n onChange(item.id);\n }\n };\n\n const textColor = isDisabled\n ? theme.colors.content.tertiary\n : isActive\n ? theme.colors.content.primary\n : theme.colors.content.secondary;\n\n return (\n <Box\n key={item.id}\n as=\"button\"\n role=\"radio\"\n id={itemId}\n aria-checked={isActive}\n aria-disabled={isDisabled}\n aria-label={item[\"aria-label\"] || item.label}\n tabIndex={isActive ? 0 : -1}\n disabled={isDisabled}\n ref={(el: HTMLElement | null) => {\n itemRefs.current[index] = el;\n }}\n onPress={handlePress}\n onKeyDown={(e: React.KeyboardEvent) => handleKeyDown(e, index)}\n flex={fullWidth ? 1 : undefined}\n flexShrink={0}\n height=\"100%\"\n paddingHorizontal={sizeStyles.padding}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gap={8}\n backgroundColor={\n isActive ? theme.colors.background.primary : \"transparent\"\n }\n borderRadius={isActive ? theme.radius.button - (stroke ? 1 : 0) : 0}\n cursor={isDisabled ? \"not-allowed\" : \"pointer\"}\n boxShadow={isActive ? \"0px 1px 2px rgba(0, 0, 0, 0.1)\" : \"none\"}\n hoverStyle={\n !isDisabled && !isActive\n ? {\n backgroundColor: theme.colors.overlay.mono,\n }\n : undefined\n }\n >\n {item.icon && (\n <Icon size={sizeStyles.iconSize} color={textColor} aria-hidden>\n {item.icon}\n </Icon>\n )}\n <Text\n color={textColor}\n fontSize={sizeStyles.fontSize}\n fontWeight={isActive ? \"600\" : \"500\"}\n textAlign=\"center\"\n whiteSpace=\"nowrap\"\n >\n {item.label}\n </Text>\n </Box>\n );\n })}\n </Box>\n );\n};\n\nSegmented.displayName = \"Segmented\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n id,\n role,\n ...props\n}) => {\n // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n // On native, if we don't have the custom font loaded, it's better to use the system font\n // to avoid rendering issues or missing text.\n if (resolvedFontFamily === \"Pilat Wide Bold\") {\n resolvedFontFamily = undefined;\n }\n\n const style: TextStyle = {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n };\n\n // Map role to React Native accessibilityRole\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText style={style} testID={id} accessibilityRole={accessibilityRole}>\n {children}\n </RNText>\n );\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return <View style={style}>{childrenWithProps}</View>;\n};\n"],"mappings":"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","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../src/index.tsx","../../src/Segmented.tsx","../../../primitives-native/src/Box.tsx","../../../primitives-native/src/Text.tsx","../../../primitives-native/src/Icon.tsx"],"sourcesContent":["export * from \"./Segmented\";\n","import React, { useCallback, useRef, useState, useEffect } from \"react\";\n// @ts-expect-error - this will be resolved at build time\nimport { Box, Text, Icon } from \"@xsolla/xui-primitives\";\nimport { useDesignSystem } from \"@xsolla/xui-core\";\n\n// Platform detection without importing react-native directly\nconst isWeb = typeof document !== \"undefined\";\n\nexport interface SegmentedItemType {\n /** Unique identifier for the item */\n id: string;\n /** Display label for the item */\n label: string;\n /** Optional icon to display */\n icon?: React.ReactNode;\n /** Whether the item is disabled */\n disabled?: boolean;\n /** Accessible label for screen readers */\n \"aria-label\"?: string;\n}\n\nexport interface SegmentedProps {\n /** Array of items */\n items: SegmentedItemType[];\n /** ID of the currently active item */\n activeId?: string;\n /** Callback when an item is selected */\n onChange?: (id: string) => void;\n /** Size variant */\n size?: \"xl\" | \"lg\" | \"md\" | \"sm\";\n /** HTML id attribute */\n id?: string;\n /** Test ID for testing frameworks */\n testID?: string;\n /** Full width of the container */\n fullWidth?: boolean;\n}\n\n/**\n * Segmented - A control for switching between related views or filters\n */\nexport const Segmented: React.FC<SegmentedProps> = ({\n items,\n activeId,\n onChange,\n size = \"md\",\n id,\n testID,\n fullWidth = false,\n}) => {\n const { theme } = useDesignSystem();\n const sizeStyles = theme.sizing.segmented(size);\n\n const containerId = id ? `${id}-container` : undefined;\n const itemRefs = useRef<(HTMLElement | null)[]>([]);\n const containerRef = useRef<HTMLElement | null>(null);\n\n // Indicator position for animation (web only)\n const [indicatorStyle, setIndicatorStyle] = useState<{\n left: number;\n width: number;\n initialized: boolean;\n }>({ left: 0, width: 0, initialized: false });\n\n // Update indicator position when active item changes (web only)\n useEffect(() => {\n if (!isWeb) return;\n\n const activeIndex = items.findIndex((item) => item.id === activeId);\n const activeItemEl = itemRefs.current[activeIndex];\n const containerEl = containerRef.current;\n\n if (activeItemEl && containerEl) {\n const containerRect = containerEl.getBoundingClientRect();\n const itemRect = activeItemEl.getBoundingClientRect();\n\n setIndicatorStyle({\n left: itemRect.left - containerRect.left,\n width: itemRect.width,\n initialized: true,\n });\n }\n }, [activeId, items]);\n\n const enabledIndices = items\n .map((item, index) => (!item.disabled ? index : -1))\n .filter((i) => i !== -1);\n\n const focusItem = useCallback((index: number) => {\n const element = itemRefs.current[index];\n if (element) {\n element.focus();\n }\n }, []);\n\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent, currentIndex: number) => {\n const currentEnabledIndex = enabledIndices.indexOf(currentIndex);\n\n switch (e.key) {\n case \"ArrowRight\":\n case \"ArrowDown\":\n e.preventDefault();\n {\n const nextEnabledIndex =\n currentEnabledIndex < enabledIndices.length - 1\n ? enabledIndices[currentEnabledIndex + 1]\n : enabledIndices[0];\n focusItem(nextEnabledIndex);\n }\n break;\n\n case \"ArrowLeft\":\n case \"ArrowUp\":\n e.preventDefault();\n {\n const prevEnabledIndex =\n currentEnabledIndex > 0\n ? enabledIndices[currentEnabledIndex - 1]\n : enabledIndices[enabledIndices.length - 1];\n focusItem(prevEnabledIndex);\n }\n break;\n\n case \"Enter\":\n case \" \":\n e.preventDefault();\n if (onChange && !items[currentIndex].disabled) {\n onChange(items[currentIndex].id);\n }\n break;\n\n default:\n break;\n }\n },\n [enabledIndices, focusItem, onChange, items]\n );\n\n return (\n <Box\n id={containerId}\n role=\"radiogroup\"\n testID={testID}\n ref={(el: HTMLElement | null) => {\n containerRef.current = el;\n }}\n flexDirection=\"row\"\n alignItems=\"center\"\n flexShrink={0}\n position=\"relative\"\n width={fullWidth ? \"100%\" : \"fit-content\"}\n height={sizeStyles.height}\n backgroundColor={theme.colors.control.segmented.bg}\n borderRadius={sizeStyles.containerRadius}\n padding={sizeStyles.containerPadding}\n borderWidth={1}\n borderColor={theme.colors.border.secondary}\n borderStyle=\"solid\"\n overflow=\"hidden\"\n >\n {/* Sliding indicator (web only) */}\n {isWeb && indicatorStyle.initialized && (\n <Box\n position=\"absolute\"\n zIndex={0}\n height={sizeStyles.itemHeight}\n backgroundColor={theme.colors.control.segmented.bgActive}\n borderRadius={sizeStyles.itemRadius}\n style={{\n left: indicatorStyle.left,\n width: indicatorStyle.width,\n transition: \"left 200ms ease-out, width 200ms ease-out\",\n pointerEvents: \"none\",\n }}\n aria-hidden\n />\n )}\n {items.map((item, index) => {\n const isActive = item.id === activeId;\n const isDisabled = item.disabled;\n const itemId = id ? `${id}-item-${item.id}` : undefined;\n\n const handlePress = () => {\n if (!isDisabled && onChange) {\n onChange(item.id);\n }\n };\n\n const textColor = isDisabled\n ? theme.colors.control.segmented.textDisable\n : theme.colors.control.segmented.text;\n\n return (\n <Box\n key={item.id}\n as=\"button\"\n role=\"radio\"\n id={itemId}\n aria-checked={isActive}\n aria-disabled={isDisabled}\n aria-label={item[\"aria-label\"] || item.label}\n tabIndex={isActive ? 0 : -1}\n disabled={isDisabled}\n ref={(el: HTMLElement | null) => {\n itemRefs.current[index] = el;\n }}\n onPress={handlePress}\n onKeyDown={(e: React.KeyboardEvent) => handleKeyDown(e, index)}\n flex={fullWidth ? 1 : undefined}\n flexShrink={0}\n position=\"relative\"\n zIndex={1}\n height={sizeStyles.itemHeight}\n paddingHorizontal={sizeStyles.itemPaddingHorizontal}\n paddingVertical={sizeStyles.itemPaddingVertical}\n flexDirection=\"row\"\n alignItems=\"center\"\n justifyContent=\"center\"\n gap={sizeStyles.gap}\n backgroundColor={\n !isWeb && isActive\n ? theme.colors.control.segmented.bgActive\n : \"transparent\"\n }\n borderRadius={sizeStyles.itemRadius}\n cursor={isDisabled ? \"not-allowed\" : \"pointer\"}\n hoverStyle={\n !isDisabled && !isActive\n ? {\n backgroundColor: theme.colors.control.segmented.bgHover,\n }\n : undefined\n }\n focusStyle={{\n outlineColor: theme.colors.border.brand,\n outlineWidth: 2,\n outlineOffset: -2,\n }}\n >\n {item.icon && (\n <Icon size={sizeStyles.iconSize} color={textColor} aria-hidden>\n {item.icon}\n </Icon>\n )}\n <Text\n color={textColor}\n fontSize={sizeStyles.fontSize}\n fontWeight=\"500\"\n textAlign=\"center\"\n whiteSpace=\"nowrap\"\n overflow=\"hidden\"\n textOverflow=\"ellipsis\"\n >\n {item.label}\n </Text>\n </Box>\n );\n })}\n </Box>\n );\n};\n\nSegmented.displayName = \"Segmented\";\n","import React from \"react\";\nimport {\n View,\n Pressable,\n Image,\n ViewStyle,\n ImageStyle,\n DimensionValue,\n AnimatableNumericValue,\n} from \"react-native\";\nimport { BoxProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Box: React.FC<BoxProps> = ({\n children,\n onPress,\n onLayout,\n onMoveShouldSetResponder,\n onResponderGrant,\n onResponderMove,\n onResponderRelease,\n onResponderTerminate,\n backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius,\n borderStyle,\n height,\n padding,\n paddingHorizontal,\n paddingVertical,\n margin,\n marginTop,\n marginBottom,\n marginLeft,\n marginRight,\n flexDirection,\n alignItems,\n justifyContent,\n position,\n top,\n bottom,\n left,\n right,\n width,\n flex,\n overflow,\n zIndex,\n hoverStyle,\n pressStyle,\n style,\n \"data-testid\": dataTestId,\n testID,\n as,\n src,\n alt,\n ...rest\n}) => {\n const getContainerStyle = (pressed?: boolean): ViewStyle => ({\n backgroundColor:\n pressed && pressStyle?.backgroundColor\n ? pressStyle.backgroundColor\n : backgroundColor,\n borderColor,\n borderWidth,\n borderBottomWidth,\n borderBottomColor,\n borderTopWidth,\n borderTopColor,\n borderLeftWidth,\n borderLeftColor,\n borderRightWidth,\n borderRightColor,\n borderRadius: borderRadius as AnimatableNumericValue,\n borderStyle: borderStyle as ViewStyle[\"borderStyle\"],\n overflow,\n zIndex,\n height: height as DimensionValue,\n width: width as DimensionValue,\n padding: padding as DimensionValue,\n paddingHorizontal: paddingHorizontal as DimensionValue,\n paddingVertical: paddingVertical as DimensionValue,\n margin: margin as DimensionValue,\n marginTop: marginTop as DimensionValue,\n marginBottom: marginBottom as DimensionValue,\n marginLeft: marginLeft as DimensionValue,\n marginRight: marginRight as DimensionValue,\n flexDirection,\n alignItems,\n justifyContent,\n position: position as ViewStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n flex,\n ...(style as ViewStyle),\n });\n\n const finalTestID = dataTestId || testID;\n\n // Destructure and drop web-only props from rest before passing to RN components\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const {\n role,\n tabIndex,\n onKeyDown,\n onKeyUp,\n \"aria-label\": _ariaLabel,\n \"aria-labelledby\": _ariaLabelledBy,\n \"aria-current\": _ariaCurrent,\n \"aria-disabled\": _ariaDisabled,\n \"aria-live\": _ariaLive,\n className,\n \"data-testid\": _dataTestId,\n ...nativeRest\n } = rest as Record<string, unknown>;\n\n // Handle as=\"img\" for React Native\n if (as === \"img\" && src) {\n const imageStyle: ImageStyle = {\n width: width as DimensionValue,\n height: height as DimensionValue,\n borderRadius: borderRadius as number,\n position: position as ImageStyle[\"position\"],\n top: top as DimensionValue,\n bottom: bottom as DimensionValue,\n left: left as DimensionValue,\n right: right as DimensionValue,\n ...(style as ImageStyle),\n };\n\n return (\n <Image\n source={{ uri: src }}\n style={imageStyle}\n testID={finalTestID}\n resizeMode=\"cover\"\n {...nativeRest}\n />\n );\n }\n\n if (onPress) {\n return (\n <Pressable\n onPress={onPress}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n style={({ pressed }) => getContainerStyle(pressed)}\n testID={finalTestID}\n {...nativeRest}\n >\n {children}\n </Pressable>\n );\n }\n\n return (\n <View\n style={getContainerStyle()}\n testID={finalTestID}\n onLayout={onLayout}\n onMoveShouldSetResponder={onMoveShouldSetResponder}\n onResponderGrant={onResponderGrant}\n onResponderMove={onResponderMove}\n onResponderRelease={onResponderRelease}\n onResponderTerminate={onResponderTerminate}\n {...nativeRest}\n >\n {children}\n </View>\n );\n};\n","import React from \"react\";\nimport { Text as RNText, TextStyle, AccessibilityRole } from \"react-native\";\nimport { TextProps } from \"@xsolla/xui-primitives-core\";\n\n// Map web roles to React Native accessibility roles\nconst roleMap: Record<string, AccessibilityRole> = {\n alert: \"alert\",\n heading: \"header\",\n button: \"button\",\n link: \"link\",\n text: \"text\",\n};\n\nexport const Text: React.FC<TextProps> = ({\n children,\n color,\n fontSize,\n fontWeight,\n fontFamily,\n id,\n role,\n ...props\n}) => {\n // Extract the first font name from a comma-separated list (e.g. for web-style font stacks)\n let resolvedFontFamily = fontFamily\n ? fontFamily.split(\",\")[0].replace(/['\"]/g, \"\").trim()\n : undefined;\n\n // On native, if we don't have the custom font loaded, it's better to use the system font\n // to avoid rendering issues or missing text.\n if (resolvedFontFamily === \"Pilat Wide Bold\") {\n resolvedFontFamily = undefined;\n }\n\n const style: TextStyle = {\n color,\n fontSize: typeof fontSize === \"number\" ? fontSize : undefined,\n fontWeight: fontWeight as TextStyle[\"fontWeight\"],\n fontFamily: resolvedFontFamily,\n textDecorationLine: props.textDecoration as TextStyle[\"textDecorationLine\"],\n };\n\n // Map role to React Native accessibilityRole\n const accessibilityRole = role ? roleMap[role] : undefined;\n\n return (\n <RNText style={style} testID={id} accessibilityRole={accessibilityRole}>\n {children}\n </RNText>\n );\n};\n","import React from \"react\";\nimport { View, ViewStyle } from \"react-native\";\nimport { IconProps } from \"@xsolla/xui-primitives-core\";\n\nexport const Icon: React.FC<IconProps> = ({ children, color, size }) => {\n const style: ViewStyle = {\n width: typeof size === \"number\" ? size : undefined,\n height: typeof size === \"number\" ? size : undefined,\n alignItems: \"center\",\n justifyContent: \"center\",\n };\n\n // On native, we try to pass the color down to children (like Text primitives)\n // to mimic the CSS inheritance behavior of the web version.\n const childrenWithProps = React.Children.map(children, (child) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child, {\n color: child.props.color || color,\n // Also pass size if child seems to be an icon that needs it\n size: child.props.size || size,\n });\n }\n return child;\n });\n\n return <View style={style}>{childrenWithProps}</View>;\n};\n"],"mappings":"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","names":["import_react","import_react_native","import_jsx_runtime","RNText","import_react_native","import_jsx_runtime","React","import_jsx_runtime"]}
|