@boostdev/design-system-react-native 0.5.0 → 0.5.1
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/CHANGELOG.md +38 -0
- package/dist/index.cjs +572 -534
- package/dist/index.js +464 -426
- package/package.json +1 -1
- package/src/components/interaction/Button/Button.mdx +5 -1
- package/src/components/interaction/Button/Button.spec.tsx +23 -0
- package/src/components/interaction/Button/Button.tsx +7 -6
- package/src/components/interaction/form/Combobox/Combobox.spec.tsx +9 -0
- package/src/components/interaction/form/Combobox/Combobox.tsx +2 -2
- package/src/components/interaction/form/FileInput/FileInput.spec.tsx +6 -0
- package/src/components/interaction/form/FileInput/FileInput.tsx +1 -1
- package/src/components/interaction/form/FormInput/FormInput.spec.tsx +7 -0
- package/src/components/interaction/form/FormInput/FormInput.tsx +2 -2
- package/src/components/interaction/form/NumberInput/NumberInput.spec.tsx +8 -0
- package/src/components/interaction/form/NumberInput/NumberInput.tsx +4 -4
- package/src/components/interaction/form/Select/Select.mdx +2 -1
- package/src/components/interaction/form/Select/Select.spec.tsx +22 -1
- package/src/components/interaction/form/Select/Select.tsx +7 -6
- package/src/components/interaction/form/Textarea/Textarea.spec.tsx +6 -0
- package/src/components/interaction/form/Textarea/Textarea.tsx +1 -1
- package/src/components/ui/Collapsible/Collapsible.spec.tsx +1 -1
- package/src/components/ui/Collapsible/Collapsible.tsx +5 -10
- package/src/native/Chevron.spec.tsx +34 -0
- package/src/native/Chevron.tsx +50 -0
- package/src/test/cornerRadii.ts +15 -0
package/dist/index.cjs
CHANGED
|
@@ -1162,12 +1162,50 @@ function Pagination({
|
|
|
1162
1162
|
|
|
1163
1163
|
// src/components/ui/Collapsible/Collapsible.tsx
|
|
1164
1164
|
var import_react5 = require("react");
|
|
1165
|
+
var import_react_native19 = require("react-native");
|
|
1166
|
+
|
|
1167
|
+
// src/native/Chevron.tsx
|
|
1165
1168
|
var import_react_native18 = require("react-native");
|
|
1166
1169
|
var import_jsx_runtime18 = require("react/jsx-runtime");
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
+
var SIZE = 8;
|
|
1171
|
+
var STROKE = 1.5;
|
|
1172
|
+
var CENTRE_SHIFT = -(SIZE - STROKE) / 4;
|
|
1170
1173
|
var styles15 = import_react_native18.StyleSheet.create({
|
|
1174
|
+
chevron: {
|
|
1175
|
+
// Border-box chevron (no glyph font dependency): a small square with two
|
|
1176
|
+
// adjacent borders, rotated to form a crisp "›" / "⌄" indicator.
|
|
1177
|
+
width: SIZE,
|
|
1178
|
+
height: SIZE,
|
|
1179
|
+
borderRightWidth: STROKE,
|
|
1180
|
+
borderBottomWidth: STROKE
|
|
1181
|
+
}
|
|
1182
|
+
});
|
|
1183
|
+
function Chevron({ color, rotate = "45deg", testID, style }) {
|
|
1184
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
|
|
1185
|
+
import_react_native18.Animated.View,
|
|
1186
|
+
{
|
|
1187
|
+
testID,
|
|
1188
|
+
style: [
|
|
1189
|
+
styles15.chevron,
|
|
1190
|
+
{
|
|
1191
|
+
borderColor: color,
|
|
1192
|
+
transform: [{ rotate }, { translateX: CENTRE_SHIFT }, { translateY: CENTRE_SHIFT }]
|
|
1193
|
+
},
|
|
1194
|
+
style
|
|
1195
|
+
],
|
|
1196
|
+
"aria-hidden": true,
|
|
1197
|
+
importantForAccessibility: "no-hide-descendants",
|
|
1198
|
+
accessibilityElementsHidden: true
|
|
1199
|
+
}
|
|
1200
|
+
);
|
|
1201
|
+
}
|
|
1202
|
+
|
|
1203
|
+
// src/components/ui/Collapsible/Collapsible.tsx
|
|
1204
|
+
var import_jsx_runtime19 = require("react/jsx-runtime");
|
|
1205
|
+
if (import_react_native19.Platform.OS === "android" && import_react_native19.UIManager.setLayoutAnimationEnabledExperimental) {
|
|
1206
|
+
import_react_native19.UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
1207
|
+
}
|
|
1208
|
+
var styles16 = import_react_native19.StyleSheet.create({
|
|
1171
1209
|
container: {
|
|
1172
1210
|
borderRadius: import_native.border.radius.m,
|
|
1173
1211
|
overflow: "hidden"
|
|
@@ -1188,12 +1226,6 @@ var styles15 = import_react_native18.StyleSheet.create({
|
|
|
1188
1226
|
lineHeight: lineHeight.body
|
|
1189
1227
|
},
|
|
1190
1228
|
chevron: {
|
|
1191
|
-
// Border-box chevron (no glyph font dependency): a small square with two
|
|
1192
|
-
// adjacent borders, rotated to form a crisp "›" / "⌄" disclosure indicator.
|
|
1193
|
-
width: 8,
|
|
1194
|
-
height: 8,
|
|
1195
|
-
borderRightWidth: 2,
|
|
1196
|
-
borderBottomWidth: 2,
|
|
1197
1229
|
marginStart: import_native.spacing.xs
|
|
1198
1230
|
},
|
|
1199
1231
|
content: {
|
|
@@ -1218,11 +1250,11 @@ function Collapsible({
|
|
|
1218
1250
|
const [internalOpen, setInternalOpen] = (0, import_react5.useState)(defaultOpen);
|
|
1219
1251
|
const isControlled = controlledOpen !== void 0;
|
|
1220
1252
|
const isOpen = isControlled ? controlledOpen : internalOpen;
|
|
1221
|
-
const rotation = (0, import_react5.useRef)(new
|
|
1253
|
+
const rotation = (0, import_react5.useRef)(new import_react_native19.Animated.Value(isOpen ? 1 : 0)).current;
|
|
1222
1254
|
const toggle = (0, import_react5.useCallback)(() => {
|
|
1223
1255
|
const next = !isOpen;
|
|
1224
|
-
|
|
1225
|
-
|
|
1256
|
+
import_react_native19.LayoutAnimation.configureNext(import_react_native19.LayoutAnimation.Presets.easeInEaseOut);
|
|
1257
|
+
import_react_native19.Animated.timing(rotation, {
|
|
1226
1258
|
toValue: next ? 1 : 0,
|
|
1227
1259
|
duration: 200,
|
|
1228
1260
|
useNativeDriver: true
|
|
@@ -1236,35 +1268,35 @@ function Collapsible({
|
|
|
1236
1268
|
inputRange: [0, 1],
|
|
1237
1269
|
outputRange: ["-45deg", "45deg"]
|
|
1238
1270
|
});
|
|
1239
|
-
return /* @__PURE__ */ (0,
|
|
1240
|
-
|
|
1271
|
+
return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1272
|
+
import_react_native19.View,
|
|
1241
1273
|
{
|
|
1242
|
-
style: [
|
|
1274
|
+
style: [styles16.container, { borderBottomWidth: 1, borderBottomColor: colors2.colorBgSubtle }, style],
|
|
1243
1275
|
accessibilityRole: "summary",
|
|
1244
1276
|
children: [
|
|
1245
|
-
/* @__PURE__ */ (0,
|
|
1246
|
-
|
|
1277
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
|
|
1278
|
+
import_react_native19.Pressable,
|
|
1247
1279
|
{
|
|
1248
1280
|
onPress: toggle,
|
|
1249
1281
|
accessibilityRole: "button",
|
|
1250
1282
|
accessibilityLabel: summary,
|
|
1251
1283
|
accessibilityState: { expanded: isOpen },
|
|
1252
|
-
style: ({ pressed }) => [
|
|
1284
|
+
style: ({ pressed }) => [styles16.header, pressed && styles16.pressed],
|
|
1253
1285
|
children: [
|
|
1254
|
-
/* @__PURE__ */ (0,
|
|
1255
|
-
/* @__PURE__ */ (0,
|
|
1256
|
-
|
|
1286
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ScaledText, { style: [styles16.summaryText, { color: colors2.colorOnBg }], children: summary }),
|
|
1287
|
+
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
|
|
1288
|
+
Chevron,
|
|
1257
1289
|
{
|
|
1258
1290
|
testID: "bds-collapsible-chevron",
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1291
|
+
color: colors2.colorOnBgSubtle,
|
|
1292
|
+
rotate,
|
|
1293
|
+
style: styles16.chevron
|
|
1262
1294
|
}
|
|
1263
1295
|
)
|
|
1264
1296
|
]
|
|
1265
1297
|
}
|
|
1266
1298
|
),
|
|
1267
|
-
isOpen && /* @__PURE__ */ (0,
|
|
1299
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_native19.View, { style: styles16.content, children })
|
|
1268
1300
|
]
|
|
1269
1301
|
}
|
|
1270
1302
|
);
|
|
@@ -1272,12 +1304,12 @@ function Collapsible({
|
|
|
1272
1304
|
|
|
1273
1305
|
// src/components/ui/Accordion/Accordion.tsx
|
|
1274
1306
|
var import_react6 = require("react");
|
|
1275
|
-
var
|
|
1276
|
-
var
|
|
1277
|
-
if (
|
|
1278
|
-
|
|
1307
|
+
var import_react_native20 = require("react-native");
|
|
1308
|
+
var import_jsx_runtime20 = require("react/jsx-runtime");
|
|
1309
|
+
if (import_react_native20.Platform.OS === "android" && import_react_native20.UIManager.setLayoutAnimationEnabledExperimental) {
|
|
1310
|
+
import_react_native20.UIManager.setLayoutAnimationEnabledExperimental(true);
|
|
1279
1311
|
}
|
|
1280
|
-
var
|
|
1312
|
+
var styles17 = import_react_native20.StyleSheet.create({
|
|
1281
1313
|
container: {
|
|
1282
1314
|
overflow: "hidden",
|
|
1283
1315
|
borderRadius: import_native.border.radius.s
|
|
@@ -1324,43 +1356,43 @@ function Accordion({
|
|
|
1324
1356
|
const { colors: colors2 } = useTheme();
|
|
1325
1357
|
const [openIds, setOpenIds] = (0, import_react6.useState)(defaultOpen);
|
|
1326
1358
|
const toggle = (id) => {
|
|
1327
|
-
|
|
1359
|
+
import_react_native20.LayoutAnimation.configureNext(import_react_native20.LayoutAnimation.Presets.easeInEaseOut);
|
|
1328
1360
|
setOpenIds((prev) => {
|
|
1329
1361
|
const isOpen = prev.includes(id);
|
|
1330
1362
|
if (isOpen) return prev.filter((i) => i !== id);
|
|
1331
1363
|
return allowMultiple ? [...prev, id] : [id];
|
|
1332
1364
|
});
|
|
1333
1365
|
};
|
|
1334
|
-
return /* @__PURE__ */ (0,
|
|
1366
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native20.View, { style: [styles17.container, style], children: items.map((item, index) => {
|
|
1335
1367
|
const isOpen = openIds.includes(item.id);
|
|
1336
1368
|
const isLast = index === items.length - 1;
|
|
1337
|
-
return /* @__PURE__ */ (0,
|
|
1338
|
-
|
|
1369
|
+
return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1370
|
+
import_react_native20.View,
|
|
1339
1371
|
{
|
|
1340
1372
|
style: [
|
|
1341
|
-
|
|
1373
|
+
styles17.item,
|
|
1342
1374
|
{ borderBottomColor: colors2.colorBgSubtle },
|
|
1343
1375
|
isLast && { borderBottomWidth: 0 }
|
|
1344
1376
|
],
|
|
1345
1377
|
children: [
|
|
1346
|
-
/* @__PURE__ */ (0,
|
|
1347
|
-
|
|
1378
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
|
|
1379
|
+
import_react_native20.Pressable,
|
|
1348
1380
|
{
|
|
1349
1381
|
onPress: () => toggle(item.id),
|
|
1350
1382
|
disabled: item.disabled,
|
|
1351
1383
|
accessibilityRole: "button",
|
|
1352
1384
|
accessibilityState: { expanded: isOpen, disabled: item.disabled },
|
|
1353
1385
|
style: ({ pressed }) => [
|
|
1354
|
-
|
|
1355
|
-
item.disabled &&
|
|
1356
|
-
pressed && !item.disabled &&
|
|
1386
|
+
styles17.header,
|
|
1387
|
+
item.disabled && styles17.disabled,
|
|
1388
|
+
pressed && !item.disabled && styles17.pressed
|
|
1357
1389
|
],
|
|
1358
1390
|
children: [
|
|
1359
|
-
/* @__PURE__ */ (0,
|
|
1360
|
-
/* @__PURE__ */ (0,
|
|
1391
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ScaledText, { style: [styles17.titleText, { color: colors2.colorOnBg }], children: typeof item.title === "string" ? item.title : item.title }),
|
|
1392
|
+
/* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
|
|
1361
1393
|
ScaledText,
|
|
1362
1394
|
{
|
|
1363
|
-
style: [
|
|
1395
|
+
style: [styles17.chevron, { color: colors2.colorOnBgSubtle }],
|
|
1364
1396
|
importantForAccessibility: "no",
|
|
1365
1397
|
accessibilityElementsHidden: true,
|
|
1366
1398
|
children: isOpen ? "\u25BE" : "\u25B8"
|
|
@@ -1369,7 +1401,7 @@ function Accordion({
|
|
|
1369
1401
|
]
|
|
1370
1402
|
}
|
|
1371
1403
|
),
|
|
1372
|
-
isOpen && /* @__PURE__ */ (0,
|
|
1404
|
+
isOpen && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_native20.View, { style: styles17.panel, accessibilityRole: "summary", children: item.content })
|
|
1373
1405
|
]
|
|
1374
1406
|
},
|
|
1375
1407
|
item.id
|
|
@@ -1379,9 +1411,9 @@ function Accordion({
|
|
|
1379
1411
|
|
|
1380
1412
|
// src/components/ui/Tabs/Tabs.tsx
|
|
1381
1413
|
var import_react7 = require("react");
|
|
1382
|
-
var
|
|
1383
|
-
var
|
|
1384
|
-
var
|
|
1414
|
+
var import_react_native21 = require("react-native");
|
|
1415
|
+
var import_jsx_runtime21 = require("react/jsx-runtime");
|
|
1416
|
+
var styles18 = import_react_native21.StyleSheet.create({
|
|
1385
1417
|
container: {
|
|
1386
1418
|
overflow: "hidden"
|
|
1387
1419
|
},
|
|
@@ -1420,18 +1452,18 @@ function Tabs({
|
|
|
1420
1452
|
}) {
|
|
1421
1453
|
const { colors: colors2 } = useTheme();
|
|
1422
1454
|
const [activeTab, setActiveTab] = (0, import_react7.useState)(defaultTab ?? tabs[0]?.id);
|
|
1423
|
-
return /* @__PURE__ */ (0,
|
|
1424
|
-
/* @__PURE__ */ (0,
|
|
1425
|
-
|
|
1455
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_native21.View, { style: [styles18.container, style], children: [
|
|
1456
|
+
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1457
|
+
import_react_native21.ScrollView,
|
|
1426
1458
|
{
|
|
1427
1459
|
horizontal: true,
|
|
1428
1460
|
showsHorizontalScrollIndicator: false,
|
|
1429
|
-
contentContainerStyle: [
|
|
1461
|
+
contentContainerStyle: [styles18.tabList, { borderBottomColor: colors2.colorBgSubtle }],
|
|
1430
1462
|
accessibilityRole: "tabbar",
|
|
1431
1463
|
children: tabs.map((tab) => {
|
|
1432
1464
|
const isActive = activeTab === tab.id;
|
|
1433
|
-
return /* @__PURE__ */ (0,
|
|
1434
|
-
|
|
1465
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1466
|
+
import_react_native21.Pressable,
|
|
1435
1467
|
{
|
|
1436
1468
|
onPress: () => setActiveTab(tab.id),
|
|
1437
1469
|
disabled: tab.disabled,
|
|
@@ -1442,18 +1474,18 @@ function Tabs({
|
|
|
1442
1474
|
},
|
|
1443
1475
|
accessibilityLabel: typeof tab.label === "string" ? tab.label : void 0,
|
|
1444
1476
|
style: ({ pressed }) => [
|
|
1445
|
-
|
|
1477
|
+
styles18.tabButton,
|
|
1446
1478
|
{
|
|
1447
1479
|
borderBottomColor: isActive ? colors2.colorInteractive : "transparent"
|
|
1448
1480
|
},
|
|
1449
|
-
tab.disabled &&
|
|
1450
|
-
pressed && !tab.disabled &&
|
|
1481
|
+
tab.disabled && styles18.disabled,
|
|
1482
|
+
pressed && !tab.disabled && styles18.pressed
|
|
1451
1483
|
],
|
|
1452
|
-
children: /* @__PURE__ */ (0,
|
|
1484
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
|
|
1453
1485
|
ScaledText,
|
|
1454
1486
|
{
|
|
1455
1487
|
style: [
|
|
1456
|
-
|
|
1488
|
+
styles18.tabLabel,
|
|
1457
1489
|
{
|
|
1458
1490
|
color: isActive ? colors2.colorInteractive : colors2.colorOnBgSubtle,
|
|
1459
1491
|
fontWeight: isActive ? import_native.font.weight.semibold : import_native.font.weight.body
|
|
@@ -1471,15 +1503,15 @@ function Tabs({
|
|
|
1471
1503
|
tabs.map((tab) => {
|
|
1472
1504
|
const isActive = activeTab === tab.id;
|
|
1473
1505
|
if (!isActive) return null;
|
|
1474
|
-
return /* @__PURE__ */ (0,
|
|
1506
|
+
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_native21.View, { style: styles18.panel, accessibilityRole: "tabpanel", children: tab.content }, tab.id);
|
|
1475
1507
|
})
|
|
1476
1508
|
] });
|
|
1477
1509
|
}
|
|
1478
1510
|
|
|
1479
1511
|
// src/components/ui/Table/Table.tsx
|
|
1480
|
-
var
|
|
1481
|
-
var
|
|
1482
|
-
var
|
|
1512
|
+
var import_react_native22 = require("react-native");
|
|
1513
|
+
var import_jsx_runtime22 = require("react/jsx-runtime");
|
|
1514
|
+
var styles19 = import_react_native22.StyleSheet.create({
|
|
1483
1515
|
wrapper: {
|
|
1484
1516
|
borderRadius: import_native.border.radius.s,
|
|
1485
1517
|
overflow: "hidden"
|
|
@@ -1555,29 +1587,29 @@ function Table({
|
|
|
1555
1587
|
if (sortKey !== col.key) return base;
|
|
1556
1588
|
return `${base}, currently ${sortDirection === "asc" ? "ascending" : "descending"}`;
|
|
1557
1589
|
};
|
|
1558
|
-
return /* @__PURE__ */ (0,
|
|
1559
|
-
|
|
1590
|
+
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1591
|
+
import_react_native22.ScrollView,
|
|
1560
1592
|
{
|
|
1561
1593
|
horizontal: true,
|
|
1562
1594
|
showsHorizontalScrollIndicator: true,
|
|
1563
|
-
style: [
|
|
1564
|
-
children: /* @__PURE__ */ (0,
|
|
1565
|
-
caption && /* @__PURE__ */ (0,
|
|
1566
|
-
/* @__PURE__ */ (0,
|
|
1567
|
-
(col) => col.sortable ? /* @__PURE__ */ (0,
|
|
1568
|
-
|
|
1595
|
+
style: [styles19.wrapper, { backgroundColor: colors2.colorBg }, style],
|
|
1596
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_native22.View, { children: [
|
|
1597
|
+
caption && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScaledText, { style: [styles19.caption, { color: colors2.colorOnBgSubtle }], children: caption }),
|
|
1598
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native22.View, { style: [styles19.headerRow, { backgroundColor: colors2.colorBgSubtle }], children: columns.map(
|
|
1599
|
+
(col) => col.sortable ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
|
|
1600
|
+
import_react_native22.Pressable,
|
|
1569
1601
|
{
|
|
1570
1602
|
onPress: () => handleSort(col.key),
|
|
1571
1603
|
accessibilityRole: "button",
|
|
1572
1604
|
accessibilityLabel: getSortLabel(col),
|
|
1573
|
-
style: ({ pressed }) => [
|
|
1605
|
+
style: ({ pressed }) => [styles19.headerCell, pressed && styles19.pressed],
|
|
1574
1606
|
children: [
|
|
1575
|
-
/* @__PURE__ */ (0,
|
|
1576
|
-
/* @__PURE__ */ (0,
|
|
1607
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScaledText, { style: [styles19.headerText, { color: colors2.colorOnBg }], children: col.header }),
|
|
1608
|
+
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1577
1609
|
ScaledText,
|
|
1578
1610
|
{
|
|
1579
1611
|
style: [
|
|
1580
|
-
|
|
1612
|
+
styles19.sortIndicator,
|
|
1581
1613
|
{
|
|
1582
1614
|
color: sortKey === col.key ? colors2.colorInteractive : colors2.colorOnBgSubtle
|
|
1583
1615
|
}
|
|
@@ -1590,18 +1622,18 @@ function Table({
|
|
|
1590
1622
|
]
|
|
1591
1623
|
},
|
|
1592
1624
|
col.key
|
|
1593
|
-
) : /* @__PURE__ */ (0,
|
|
1625
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native22.View, { style: styles19.headerCell, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScaledText, { style: [styles19.headerText, { color: colors2.colorOnBg }], children: col.header }) }, col.key)
|
|
1594
1626
|
) }),
|
|
1595
|
-
rows.map((row, rowIndex) => /* @__PURE__ */ (0,
|
|
1596
|
-
|
|
1627
|
+
rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
|
|
1628
|
+
import_react_native22.View,
|
|
1597
1629
|
{
|
|
1598
1630
|
style: [
|
|
1599
|
-
|
|
1631
|
+
styles19.row,
|
|
1600
1632
|
{ borderTopColor: colors2.colorBgSubtle },
|
|
1601
1633
|
rowIndex % 2 === 1 && { backgroundColor: colors2.colorBgSubtle }
|
|
1602
1634
|
],
|
|
1603
1635
|
accessibilityRole: "none",
|
|
1604
|
-
children: columns.map((col) => /* @__PURE__ */ (0,
|
|
1636
|
+
children: columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_native22.View, { style: styles19.cell, children: col.render ? typeof col.render(row) === "string" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScaledText, { style: [styles19.cellText, { color: colors2.colorOnBg }], children: col.render(row) }) : col.render(row) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ScaledText, { style: [styles19.cellText, { color: colors2.colorOnBg }], children: String(row[col.key] ?? "") }) }, col.key))
|
|
1605
1637
|
},
|
|
1606
1638
|
rowIndex
|
|
1607
1639
|
))
|
|
@@ -1612,8 +1644,8 @@ function Table({
|
|
|
1612
1644
|
|
|
1613
1645
|
// src/components/ui/Calendar/Calendar.tsx
|
|
1614
1646
|
var import_react8 = require("react");
|
|
1615
|
-
var
|
|
1616
|
-
var
|
|
1647
|
+
var import_react_native23 = require("react-native");
|
|
1648
|
+
var import_jsx_runtime23 = require("react/jsx-runtime");
|
|
1617
1649
|
var DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
|
|
1618
1650
|
var DAY_LABELS = {
|
|
1619
1651
|
Su: "Sunday",
|
|
@@ -1656,7 +1688,7 @@ function getFirstDayOfMonth(year, month) {
|
|
|
1656
1688
|
return new Date(year, month, 1).getDay();
|
|
1657
1689
|
}
|
|
1658
1690
|
var DAY_SIZE = 44;
|
|
1659
|
-
var
|
|
1691
|
+
var styles20 = import_react_native23.StyleSheet.create({
|
|
1660
1692
|
container: {
|
|
1661
1693
|
alignSelf: "flex-start"
|
|
1662
1694
|
},
|
|
@@ -1768,28 +1800,28 @@ function Calendar({
|
|
|
1768
1800
|
{ length: cells.length / 7 },
|
|
1769
1801
|
(_, i) => cells.slice(i * 7, i * 7 + 7)
|
|
1770
1802
|
);
|
|
1771
|
-
return /* @__PURE__ */ (0,
|
|
1772
|
-
|
|
1803
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1804
|
+
import_react_native23.View,
|
|
1773
1805
|
{
|
|
1774
|
-
style: [
|
|
1806
|
+
style: [styles20.container, style],
|
|
1775
1807
|
accessibilityRole: "none",
|
|
1776
1808
|
accessibilityLabel: `${MONTHS[viewMonth]} ${viewYear} calendar`,
|
|
1777
1809
|
children: [
|
|
1778
|
-
/* @__PURE__ */ (0,
|
|
1779
|
-
/* @__PURE__ */ (0,
|
|
1780
|
-
|
|
1810
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(import_react_native23.View, { style: styles20.header, children: [
|
|
1811
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1812
|
+
import_react_native23.Pressable,
|
|
1781
1813
|
{
|
|
1782
1814
|
onPress: () => navigate(-1),
|
|
1783
1815
|
accessibilityRole: "button",
|
|
1784
1816
|
accessibilityLabel: "Previous month",
|
|
1785
|
-
style: ({ pressed }) => [
|
|
1786
|
-
children: /* @__PURE__ */ (0,
|
|
1817
|
+
style: ({ pressed }) => [styles20.navButton, pressed && styles20.pressed],
|
|
1818
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ScaledText, { style: [styles20.navText, { color: colors2.colorOnBg }], children: "\u2039" })
|
|
1787
1819
|
}
|
|
1788
1820
|
),
|
|
1789
|
-
/* @__PURE__ */ (0,
|
|
1821
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
|
|
1790
1822
|
ScaledText,
|
|
1791
1823
|
{
|
|
1792
|
-
style: [
|
|
1824
|
+
style: [styles20.monthYear, { color: colors2.colorOnBg }],
|
|
1793
1825
|
accessibilityRole: "text",
|
|
1794
1826
|
accessibilityLiveRegion: "polite",
|
|
1795
1827
|
children: [
|
|
@@ -1799,35 +1831,35 @@ function Calendar({
|
|
|
1799
1831
|
]
|
|
1800
1832
|
}
|
|
1801
1833
|
),
|
|
1802
|
-
/* @__PURE__ */ (0,
|
|
1803
|
-
|
|
1834
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1835
|
+
import_react_native23.Pressable,
|
|
1804
1836
|
{
|
|
1805
1837
|
onPress: () => navigate(1),
|
|
1806
1838
|
accessibilityRole: "button",
|
|
1807
1839
|
accessibilityLabel: "Next month",
|
|
1808
|
-
style: ({ pressed }) => [
|
|
1809
|
-
children: /* @__PURE__ */ (0,
|
|
1840
|
+
style: ({ pressed }) => [styles20.navButton, pressed && styles20.pressed],
|
|
1841
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ScaledText, { style: [styles20.navText, { color: colors2.colorOnBg }], children: "\u203A" })
|
|
1810
1842
|
}
|
|
1811
1843
|
)
|
|
1812
1844
|
] }),
|
|
1813
|
-
/* @__PURE__ */ (0,
|
|
1845
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { style: styles20.weekRow, children: DAYS.map((d) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { style: styles20.weekday, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1814
1846
|
ScaledText,
|
|
1815
1847
|
{
|
|
1816
|
-
style: [
|
|
1848
|
+
style: [styles20.weekdayText, { color: colors2.colorOnBgSubtle }],
|
|
1817
1849
|
accessibilityLabel: DAY_LABELS[d],
|
|
1818
1850
|
children: d
|
|
1819
1851
|
}
|
|
1820
1852
|
) }, d)) }),
|
|
1821
|
-
/* @__PURE__ */ (0,
|
|
1853
|
+
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { style: styles20.grid, children: rows.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { style: styles20.dayRow, children: row.map((cell, colIndex) => {
|
|
1822
1854
|
if (!cell) {
|
|
1823
|
-
return /* @__PURE__ */ (0,
|
|
1855
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_native23.View, { style: styles20.dayCell }, colIndex);
|
|
1824
1856
|
}
|
|
1825
1857
|
const date = new Date(viewYear, viewMonth, cell.day);
|
|
1826
1858
|
const isSelected = selected ? isSameDay(date, selected) : false;
|
|
1827
1859
|
const isToday = isSameDay(date, today);
|
|
1828
1860
|
const disabled = isOutOfRange(date, min, max);
|
|
1829
|
-
return /* @__PURE__ */ (0,
|
|
1830
|
-
|
|
1861
|
+
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1862
|
+
import_react_native23.Pressable,
|
|
1831
1863
|
{
|
|
1832
1864
|
onPress: () => selectDay(cell.day),
|
|
1833
1865
|
disabled,
|
|
@@ -1842,22 +1874,22 @@ function Calendar({
|
|
|
1842
1874
|
disabled
|
|
1843
1875
|
},
|
|
1844
1876
|
style: ({ pressed }) => [
|
|
1845
|
-
|
|
1877
|
+
styles20.dayCell,
|
|
1846
1878
|
isSelected && {
|
|
1847
1879
|
backgroundColor: colors2.colorInteractive
|
|
1848
1880
|
},
|
|
1849
1881
|
isToday && !isSelected && [
|
|
1850
|
-
|
|
1882
|
+
styles20.today,
|
|
1851
1883
|
{ borderColor: colors2.colorInteractive }
|
|
1852
1884
|
],
|
|
1853
|
-
disabled &&
|
|
1854
|
-
pressed && !disabled &&
|
|
1885
|
+
disabled && styles20.disabled,
|
|
1886
|
+
pressed && !disabled && styles20.pressed
|
|
1855
1887
|
],
|
|
1856
|
-
children: /* @__PURE__ */ (0,
|
|
1888
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
1857
1889
|
ScaledText,
|
|
1858
1890
|
{
|
|
1859
1891
|
style: [
|
|
1860
|
-
|
|
1892
|
+
styles20.dayText,
|
|
1861
1893
|
{
|
|
1862
1894
|
color: isSelected ? colors2.colorOnInteractive : colors2.colorOnBg,
|
|
1863
1895
|
fontWeight: isToday ? import_native.font.weight.semibold : import_native.font.weight.body
|
|
@@ -1877,11 +1909,11 @@ function Calendar({
|
|
|
1877
1909
|
|
|
1878
1910
|
// src/components/ui/Carousel/Carousel.tsx
|
|
1879
1911
|
var import_react9 = require("react");
|
|
1880
|
-
var
|
|
1881
|
-
var
|
|
1912
|
+
var import_react_native24 = require("react-native");
|
|
1913
|
+
var import_jsx_runtime24 = require("react/jsx-runtime");
|
|
1882
1914
|
var DOT_SIZE = 8;
|
|
1883
1915
|
var DOT_HIT_SIZE = 44;
|
|
1884
|
-
var
|
|
1916
|
+
var styles21 = import_react_native24.StyleSheet.create({
|
|
1885
1917
|
container: {
|
|
1886
1918
|
width: "100%"
|
|
1887
1919
|
},
|
|
@@ -1938,7 +1970,7 @@ function Carousel({
|
|
|
1938
1970
|
const { colors: colors2 } = useTheme();
|
|
1939
1971
|
const scrollRef = (0, import_react9.useRef)(null);
|
|
1940
1972
|
const [activeIndex, setActiveIndex] = (0, import_react9.useState)(0);
|
|
1941
|
-
const [slideWidth, setSlideWidth] = (0, import_react9.useState)(
|
|
1973
|
+
const [slideWidth, setSlideWidth] = (0, import_react9.useState)(import_react_native24.Dimensions.get("window").width);
|
|
1942
1974
|
const handleScroll = (0, import_react9.useCallback)(
|
|
1943
1975
|
(e) => {
|
|
1944
1976
|
const offset = e.nativeEvent.contentOffset.x;
|
|
@@ -1954,15 +1986,15 @@ function Carousel({
|
|
|
1954
1986
|
const clamped = Math.max(0, Math.min(index, items.length - 1));
|
|
1955
1987
|
scrollRef.current?.scrollTo({ x: clamped * slideWidth, animated: true });
|
|
1956
1988
|
};
|
|
1957
|
-
return /* @__PURE__ */ (0,
|
|
1958
|
-
|
|
1989
|
+
return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
|
|
1990
|
+
import_react_native24.View,
|
|
1959
1991
|
{
|
|
1960
|
-
style: [
|
|
1992
|
+
style: [styles21.container, style],
|
|
1961
1993
|
accessibilityRole: "none",
|
|
1962
1994
|
accessibilityLabel: label,
|
|
1963
1995
|
children: [
|
|
1964
|
-
/* @__PURE__ */ (0,
|
|
1965
|
-
|
|
1996
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
1997
|
+
import_react_native24.ScrollView,
|
|
1966
1998
|
{
|
|
1967
1999
|
ref: scrollRef,
|
|
1968
2000
|
horizontal: true,
|
|
@@ -1971,13 +2003,13 @@ function Carousel({
|
|
|
1971
2003
|
onScroll: handleScroll,
|
|
1972
2004
|
scrollEventThrottle: 16,
|
|
1973
2005
|
onLayout: (e) => setSlideWidth(e.nativeEvent.layout.width),
|
|
1974
|
-
style:
|
|
1975
|
-
children: items.map((item, index) => /* @__PURE__ */ (0,
|
|
2006
|
+
style: styles21.scrollView,
|
|
2007
|
+
children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.View, { style: [styles21.slide, { width: slideWidth }], children: item }, index))
|
|
1976
2008
|
}
|
|
1977
2009
|
),
|
|
1978
|
-
/* @__PURE__ */ (0,
|
|
1979
|
-
/* @__PURE__ */ (0,
|
|
1980
|
-
|
|
2010
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react_native24.View, { style: styles21.nav, children: [
|
|
2011
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2012
|
+
import_react_native24.Pressable,
|
|
1981
2013
|
{
|
|
1982
2014
|
onPress: () => scrollTo(activeIndex - 1),
|
|
1983
2015
|
disabled: activeIndex <= 0,
|
|
@@ -1985,26 +2017,26 @@ function Carousel({
|
|
|
1985
2017
|
accessibilityLabel: "Previous",
|
|
1986
2018
|
accessibilityState: { disabled: activeIndex <= 0 },
|
|
1987
2019
|
style: ({ pressed }) => [
|
|
1988
|
-
|
|
2020
|
+
styles21.navButton,
|
|
1989
2021
|
activeIndex <= 0 && { opacity: 0.4 },
|
|
1990
|
-
pressed &&
|
|
2022
|
+
pressed && styles21.pressed
|
|
1991
2023
|
],
|
|
1992
|
-
children: /* @__PURE__ */ (0,
|
|
2024
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ScaledText, { style: [styles21.navText, { color: colors2.colorOnBg }], children: "\u2039" })
|
|
1993
2025
|
}
|
|
1994
2026
|
),
|
|
1995
|
-
/* @__PURE__ */ (0,
|
|
1996
|
-
|
|
2027
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_native24.View, { style: styles21.dots, children: items.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2028
|
+
import_react_native24.Pressable,
|
|
1997
2029
|
{
|
|
1998
2030
|
onPress: () => scrollTo(index),
|
|
1999
2031
|
accessibilityRole: "button",
|
|
2000
2032
|
accessibilityLabel: `Go to slide ${index + 1}`,
|
|
2001
2033
|
accessibilityState: { selected: activeIndex === index },
|
|
2002
|
-
style:
|
|
2003
|
-
children: /* @__PURE__ */ (0,
|
|
2004
|
-
|
|
2034
|
+
style: styles21.dotWrapper,
|
|
2035
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2036
|
+
import_react_native24.View,
|
|
2005
2037
|
{
|
|
2006
2038
|
style: [
|
|
2007
|
-
|
|
2039
|
+
styles21.dot,
|
|
2008
2040
|
{
|
|
2009
2041
|
backgroundColor: activeIndex === index ? colors2.colorInteractive : colors2.colorBgSubtle
|
|
2010
2042
|
}
|
|
@@ -2014,8 +2046,8 @@ function Carousel({
|
|
|
2014
2046
|
},
|
|
2015
2047
|
index
|
|
2016
2048
|
)) }),
|
|
2017
|
-
/* @__PURE__ */ (0,
|
|
2018
|
-
|
|
2049
|
+
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
|
|
2050
|
+
import_react_native24.Pressable,
|
|
2019
2051
|
{
|
|
2020
2052
|
onPress: () => scrollTo(activeIndex + 1),
|
|
2021
2053
|
disabled: activeIndex >= items.length - 1,
|
|
@@ -2023,11 +2055,11 @@ function Carousel({
|
|
|
2023
2055
|
accessibilityLabel: "Next",
|
|
2024
2056
|
accessibilityState: { disabled: activeIndex >= items.length - 1 },
|
|
2025
2057
|
style: ({ pressed }) => [
|
|
2026
|
-
|
|
2058
|
+
styles21.navButton,
|
|
2027
2059
|
activeIndex >= items.length - 1 && { opacity: 0.4 },
|
|
2028
|
-
pressed &&
|
|
2060
|
+
pressed && styles21.pressed
|
|
2029
2061
|
],
|
|
2030
|
-
children: /* @__PURE__ */ (0,
|
|
2062
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ScaledText, { style: [styles21.navText, { color: colors2.colorOnBg }], children: "\u203A" })
|
|
2031
2063
|
}
|
|
2032
2064
|
)
|
|
2033
2065
|
] })
|
|
@@ -2037,8 +2069,8 @@ function Carousel({
|
|
|
2037
2069
|
}
|
|
2038
2070
|
|
|
2039
2071
|
// src/components/layout/Card/Card.tsx
|
|
2040
|
-
var
|
|
2041
|
-
var
|
|
2072
|
+
var import_react_native25 = require("react-native");
|
|
2073
|
+
var import_jsx_runtime25 = require("react/jsx-runtime");
|
|
2042
2074
|
var paddingMap = {
|
|
2043
2075
|
none: 0,
|
|
2044
2076
|
small: import_native.spacing.s,
|
|
@@ -2050,7 +2082,7 @@ var alignMap = {
|
|
|
2050
2082
|
center: "center",
|
|
2051
2083
|
end: "flex-end"
|
|
2052
2084
|
};
|
|
2053
|
-
var
|
|
2085
|
+
var styles22 = import_react_native25.StyleSheet.create({
|
|
2054
2086
|
card: {
|
|
2055
2087
|
borderRadius: import_native.border.radius.m,
|
|
2056
2088
|
overflow: "hidden"
|
|
@@ -2085,29 +2117,29 @@ function Card({
|
|
|
2085
2117
|
alignItems: alignMap[textAlign]
|
|
2086
2118
|
};
|
|
2087
2119
|
if (onPress) {
|
|
2088
|
-
return /* @__PURE__ */ (0,
|
|
2089
|
-
|
|
2120
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
|
|
2121
|
+
import_react_native25.Pressable,
|
|
2090
2122
|
{
|
|
2091
2123
|
onPress,
|
|
2092
2124
|
accessibilityRole: "button",
|
|
2093
2125
|
accessibilityLabel,
|
|
2094
|
-
style: ({ pressed }) => [
|
|
2126
|
+
style: ({ pressed }) => [styles22.card, variantStyle, inner, pressed && { opacity: 0.8 }, style],
|
|
2095
2127
|
children
|
|
2096
2128
|
}
|
|
2097
2129
|
);
|
|
2098
2130
|
}
|
|
2099
|
-
return /* @__PURE__ */ (0,
|
|
2131
|
+
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_native25.View, { style: [styles22.card, variantStyle, inner, style], children });
|
|
2100
2132
|
}
|
|
2101
2133
|
|
|
2102
2134
|
// src/components/layout/SectionHeader/SectionHeader.tsx
|
|
2103
|
-
var
|
|
2104
|
-
var
|
|
2135
|
+
var import_react_native26 = require("react-native");
|
|
2136
|
+
var import_jsx_runtime26 = require("react/jsx-runtime");
|
|
2105
2137
|
var alignMap2 = {
|
|
2106
2138
|
start: "flex-start",
|
|
2107
2139
|
center: "center",
|
|
2108
2140
|
end: "flex-end"
|
|
2109
2141
|
};
|
|
2110
|
-
var titleStyles =
|
|
2142
|
+
var titleStyles = import_react_native26.StyleSheet.create({
|
|
2111
2143
|
small: {
|
|
2112
2144
|
fontSize: import_native.font.size.heading3,
|
|
2113
2145
|
fontFamily: import_native.font.family.heading,
|
|
@@ -2127,7 +2159,7 @@ var titleStyles = import_react_native25.StyleSheet.create({
|
|
|
2127
2159
|
lineHeight: lineHeight.heading1
|
|
2128
2160
|
}
|
|
2129
2161
|
});
|
|
2130
|
-
var
|
|
2162
|
+
var styles23 = import_react_native26.StyleSheet.create({
|
|
2131
2163
|
container: {
|
|
2132
2164
|
gap: import_native.spacing.xxs
|
|
2133
2165
|
},
|
|
@@ -2146,8 +2178,8 @@ function SectionHeader({
|
|
|
2146
2178
|
}) {
|
|
2147
2179
|
const { colors: colors2 } = useTheme();
|
|
2148
2180
|
const align = alignMap2[alignment];
|
|
2149
|
-
return /* @__PURE__ */ (0,
|
|
2150
|
-
/* @__PURE__ */ (0,
|
|
2181
|
+
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_native26.View, { style: [styles23.container, { alignItems: align }, style], children: [
|
|
2182
|
+
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
|
|
2151
2183
|
ScaledText,
|
|
2152
2184
|
{
|
|
2153
2185
|
accessibilityRole: "header",
|
|
@@ -2155,16 +2187,16 @@ function SectionHeader({
|
|
|
2155
2187
|
children: title
|
|
2156
2188
|
}
|
|
2157
2189
|
),
|
|
2158
|
-
subtitle && /* @__PURE__ */ (0,
|
|
2190
|
+
subtitle && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ScaledText, { style: [styles23.subtitle, { color: colors2.colorOnBgSubtle }], children: subtitle })
|
|
2159
2191
|
] });
|
|
2160
2192
|
}
|
|
2161
2193
|
|
|
2162
2194
|
// src/components/layout/IconWrapper/IconWrapper.tsx
|
|
2163
|
-
var
|
|
2164
|
-
var
|
|
2195
|
+
var import_react_native27 = require("react-native");
|
|
2196
|
+
var import_jsx_runtime27 = require("react/jsx-runtime");
|
|
2165
2197
|
function IconWrapper({ children, style, accessibilityElementsHidden }) {
|
|
2166
|
-
return /* @__PURE__ */ (0,
|
|
2167
|
-
|
|
2198
|
+
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
|
|
2199
|
+
import_react_native27.View,
|
|
2168
2200
|
{
|
|
2169
2201
|
style: [{ alignItems: "center", justifyContent: "center" }, style],
|
|
2170
2202
|
importantForAccessibility: accessibilityElementsHidden ? "no-hide-descendants" : "auto",
|
|
@@ -2175,9 +2207,9 @@ function IconWrapper({ children, style, accessibilityElementsHidden }) {
|
|
|
2175
2207
|
}
|
|
2176
2208
|
|
|
2177
2209
|
// src/components/layout/ButtonGroup/ButtonGroup.tsx
|
|
2178
|
-
var
|
|
2179
|
-
var
|
|
2180
|
-
var
|
|
2210
|
+
var import_react_native28 = require("react-native");
|
|
2211
|
+
var import_jsx_runtime28 = require("react/jsx-runtime");
|
|
2212
|
+
var styles24 = import_react_native28.StyleSheet.create({
|
|
2181
2213
|
group: {
|
|
2182
2214
|
flexDirection: "row",
|
|
2183
2215
|
flexWrap: "wrap",
|
|
@@ -2190,11 +2222,11 @@ var styles23 = import_react_native27.StyleSheet.create({
|
|
|
2190
2222
|
});
|
|
2191
2223
|
function ButtonContainer({ children, variant, accessibilityLabel, style }) {
|
|
2192
2224
|
const isColumn = variant === "card" || variant === "modal";
|
|
2193
|
-
return /* @__PURE__ */ (0,
|
|
2194
|
-
|
|
2225
|
+
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
|
|
2226
|
+
import_react_native28.View,
|
|
2195
2227
|
{
|
|
2196
2228
|
accessibilityLabel,
|
|
2197
|
-
style: [isColumn ?
|
|
2229
|
+
style: [isColumn ? styles24.column : styles24.group, style],
|
|
2198
2230
|
children
|
|
2199
2231
|
}
|
|
2200
2232
|
);
|
|
@@ -2202,14 +2234,14 @@ function ButtonContainer({ children, variant, accessibilityLabel, style }) {
|
|
|
2202
2234
|
var ButtonGroup = ButtonContainer;
|
|
2203
2235
|
|
|
2204
2236
|
// src/components/interaction/Button/Button.tsx
|
|
2205
|
-
var
|
|
2206
|
-
var
|
|
2237
|
+
var import_react_native29 = require("react-native");
|
|
2238
|
+
var import_jsx_runtime29 = require("react/jsx-runtime");
|
|
2207
2239
|
var sizeTokens = {
|
|
2208
|
-
small: { height: 36, px: import_native.spacing.m, fontSize: import_native.font.size.bodyS
|
|
2209
|
-
medium: { height: 48, px: import_native.spacing.m, fontSize: import_native.font.size.body
|
|
2210
|
-
large: { height: 56, px: import_native.spacing.xxl, fontSize: import_native.font.size.heading3
|
|
2240
|
+
small: { height: 36, px: import_native.spacing.m, fontSize: import_native.font.size.bodyS },
|
|
2241
|
+
medium: { height: 48, px: import_native.spacing.m, fontSize: import_native.font.size.body },
|
|
2242
|
+
large: { height: 56, px: import_native.spacing.xxl, fontSize: import_native.font.size.heading3 }
|
|
2211
2243
|
};
|
|
2212
|
-
var
|
|
2244
|
+
var styles25 = import_react_native29.StyleSheet.create({
|
|
2213
2245
|
pressable: {
|
|
2214
2246
|
flexDirection: "row",
|
|
2215
2247
|
alignItems: "center",
|
|
@@ -2238,7 +2270,7 @@ function Button({
|
|
|
2238
2270
|
style
|
|
2239
2271
|
}) {
|
|
2240
2272
|
const { colors: colors2 } = useTheme();
|
|
2241
|
-
const { height, px, fontSize
|
|
2273
|
+
const { height, px, fontSize } = sizeTokens[size];
|
|
2242
2274
|
const primaryColor = colors2.colorInteractive;
|
|
2243
2275
|
const onPrimaryColor = colors2.colorOnInteractive;
|
|
2244
2276
|
const outlineTextColor = colors2.colorInteractiveOnBg;
|
|
@@ -2246,7 +2278,8 @@ function Button({
|
|
|
2246
2278
|
const containerStyle = {
|
|
2247
2279
|
minHeight: height,
|
|
2248
2280
|
paddingHorizontal: isIconOnly ? import_native.spacing.xs : px,
|
|
2249
|
-
|
|
2281
|
+
// A text button has medium corners on every size; an icon-only button stays round.
|
|
2282
|
+
borderRadius: isIconOnly ? import_native.border.radius.full : import_native.border.radius.m,
|
|
2250
2283
|
opacity: disabled ? 0.4 : 1,
|
|
2251
2284
|
// Icon-only: square with equal xs padding on both axes.
|
|
2252
2285
|
...isIconOnly && { aspectRatio: 1, paddingVertical: import_native.spacing.xs },
|
|
@@ -2261,29 +2294,29 @@ function Button({
|
|
|
2261
2294
|
}
|
|
2262
2295
|
};
|
|
2263
2296
|
const textColor = variant === "default" ? onPrimaryColor : outlineTextColor;
|
|
2264
|
-
return /* @__PURE__ */ (0,
|
|
2265
|
-
|
|
2297
|
+
return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
|
|
2298
|
+
import_react_native29.Pressable,
|
|
2266
2299
|
{
|
|
2267
2300
|
onPress,
|
|
2268
2301
|
disabled,
|
|
2269
2302
|
accessibilityRole: "button",
|
|
2270
2303
|
accessibilityLabel,
|
|
2271
2304
|
accessibilityState: { disabled },
|
|
2272
|
-
style: ({ pressed }) => [
|
|
2305
|
+
style: ({ pressed }) => [styles25.pressable, containerStyle, pressed && { opacity: 0.75 }, style],
|
|
2273
2306
|
children: [
|
|
2274
|
-
iconStart && /* @__PURE__ */ (0,
|
|
2275
|
-
children && (isIconOnly ? children : /* @__PURE__ */ (0,
|
|
2276
|
-
iconEnd && /* @__PURE__ */ (0,
|
|
2307
|
+
iconStart && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.View, { importantForAccessibility: "no-hide-descendants", accessibilityElementsHidden: true, children: iconStart }),
|
|
2308
|
+
children && (isIconOnly ? children : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ScaledText, { style: [styles25.label, { fontSize, color: textColor }], children })),
|
|
2309
|
+
iconEnd && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_native29.View, { importantForAccessibility: "no-hide-descendants", children: iconEnd })
|
|
2277
2310
|
]
|
|
2278
2311
|
}
|
|
2279
2312
|
);
|
|
2280
2313
|
}
|
|
2281
2314
|
|
|
2282
2315
|
// src/components/interaction/Rating/Rating.tsx
|
|
2283
|
-
var
|
|
2284
|
-
var
|
|
2316
|
+
var import_react_native30 = require("react-native");
|
|
2317
|
+
var import_jsx_runtime30 = require("react/jsx-runtime");
|
|
2285
2318
|
var STAR_SIZE = 24;
|
|
2286
|
-
var
|
|
2319
|
+
var styles26 = import_react_native30.StyleSheet.create({
|
|
2287
2320
|
container: {
|
|
2288
2321
|
flexDirection: "row",
|
|
2289
2322
|
alignItems: "center"
|
|
@@ -2296,17 +2329,17 @@ var styles25 = import_react_native29.StyleSheet.create({
|
|
|
2296
2329
|
function Rating({ value, max = 5, style, accessibilityLabel }) {
|
|
2297
2330
|
const { colors: colors2 } = useTheme();
|
|
2298
2331
|
const label = accessibilityLabel ?? `${value} out of ${max} stars`;
|
|
2299
|
-
return /* @__PURE__ */ (0,
|
|
2300
|
-
|
|
2332
|
+
return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2333
|
+
import_react_native30.View,
|
|
2301
2334
|
{
|
|
2302
|
-
style: [
|
|
2335
|
+
style: [styles26.container, style],
|
|
2303
2336
|
accessibilityRole: "image",
|
|
2304
2337
|
accessibilityLabel: label,
|
|
2305
|
-
children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ (0,
|
|
2338
|
+
children: Array.from({ length: max }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
|
|
2306
2339
|
ScaledText,
|
|
2307
2340
|
{
|
|
2308
2341
|
style: [
|
|
2309
|
-
|
|
2342
|
+
styles26.star,
|
|
2310
2343
|
{ color: i < value ? colors2.colorWarning : colors2.colorBgSubtle }
|
|
2311
2344
|
],
|
|
2312
2345
|
importantForAccessibility: "no",
|
|
@@ -2320,13 +2353,13 @@ function Rating({ value, max = 5, style, accessibilityLabel }) {
|
|
|
2320
2353
|
}
|
|
2321
2354
|
|
|
2322
2355
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2323
|
-
var
|
|
2356
|
+
var import_react_native32 = require("react-native");
|
|
2324
2357
|
|
|
2325
2358
|
// src/components/interaction/form/atoms/Label.tsx
|
|
2326
|
-
var
|
|
2359
|
+
var import_jsx_runtime31 = require("react/jsx-runtime");
|
|
2327
2360
|
function Label({ label, style }) {
|
|
2328
2361
|
const { colors: colors2 } = useTheme();
|
|
2329
|
-
return /* @__PURE__ */ (0,
|
|
2362
|
+
return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
|
|
2330
2363
|
ScaledText,
|
|
2331
2364
|
{
|
|
2332
2365
|
style: [
|
|
@@ -2345,9 +2378,9 @@ function Label({ label, style }) {
|
|
|
2345
2378
|
}
|
|
2346
2379
|
|
|
2347
2380
|
// src/components/interaction/form/atoms/Message.tsx
|
|
2348
|
-
var
|
|
2349
|
-
var
|
|
2350
|
-
var
|
|
2381
|
+
var import_react_native31 = require("react-native");
|
|
2382
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
2383
|
+
var styles27 = import_react_native31.StyleSheet.create({
|
|
2351
2384
|
base: {
|
|
2352
2385
|
fontFamily: import_native.font.family.body,
|
|
2353
2386
|
fontSize: import_native.font.size.bodyS,
|
|
@@ -2358,20 +2391,20 @@ function Message({ message, type, style }) {
|
|
|
2358
2391
|
const { colors: colors2 } = useTheme();
|
|
2359
2392
|
if (!message) return null;
|
|
2360
2393
|
const color = type === "error" ? colors2.colorError : colors2.colorOnBgSubtle;
|
|
2361
|
-
return /* @__PURE__ */ (0,
|
|
2394
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
2362
2395
|
ScaledText,
|
|
2363
2396
|
{
|
|
2364
2397
|
accessibilityRole: type === "error" ? "alert" : "none",
|
|
2365
2398
|
accessibilityLiveRegion: type === "error" ? "assertive" : "polite",
|
|
2366
|
-
style: [
|
|
2399
|
+
style: [styles27.base, { color }, style],
|
|
2367
2400
|
children: message
|
|
2368
2401
|
}
|
|
2369
2402
|
);
|
|
2370
2403
|
}
|
|
2371
2404
|
|
|
2372
2405
|
// src/components/interaction/form/Switch/Switch.tsx
|
|
2373
|
-
var
|
|
2374
|
-
var
|
|
2406
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
2407
|
+
var styles28 = import_react_native32.StyleSheet.create({
|
|
2375
2408
|
container: {
|
|
2376
2409
|
gap: import_native.spacing.xxs
|
|
2377
2410
|
},
|
|
@@ -2391,10 +2424,10 @@ function Switch({
|
|
|
2391
2424
|
style
|
|
2392
2425
|
}) {
|
|
2393
2426
|
const { colors: colors2 } = useTheme();
|
|
2394
|
-
return /* @__PURE__ */ (0,
|
|
2395
|
-
/* @__PURE__ */ (0,
|
|
2396
|
-
/* @__PURE__ */ (0,
|
|
2397
|
-
|
|
2427
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_native32.View, { style: [styles28.container, style], children: [
|
|
2428
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_native32.View, { style: styles28.row, children: [
|
|
2429
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
2430
|
+
import_react_native32.Switch,
|
|
2398
2431
|
{
|
|
2399
2432
|
value,
|
|
2400
2433
|
onValueChange: onChange,
|
|
@@ -2406,18 +2439,18 @@ function Switch({
|
|
|
2406
2439
|
trackColor: { false: colors2.colorBgSubtle, true: colors2.colorBlueSubtle }
|
|
2407
2440
|
}
|
|
2408
2441
|
),
|
|
2409
|
-
/* @__PURE__ */ (0,
|
|
2442
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Label, { label })
|
|
2410
2443
|
] }),
|
|
2411
|
-
/* @__PURE__ */ (0,
|
|
2412
|
-
/* @__PURE__ */ (0,
|
|
2444
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Message, { type: "error", message: error }),
|
|
2445
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Message, { type: "hint", message: hint })
|
|
2413
2446
|
] });
|
|
2414
2447
|
}
|
|
2415
2448
|
|
|
2416
2449
|
// src/components/interaction/form/Checkbox/Checkbox.tsx
|
|
2417
|
-
var
|
|
2418
|
-
var
|
|
2450
|
+
var import_react_native33 = require("react-native");
|
|
2451
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
2419
2452
|
var BOX = 22;
|
|
2420
|
-
var
|
|
2453
|
+
var styles29 = import_react_native33.StyleSheet.create({
|
|
2421
2454
|
container: {
|
|
2422
2455
|
gap: import_native.spacing.xxs
|
|
2423
2456
|
},
|
|
@@ -2454,31 +2487,31 @@ function Checkbox({
|
|
|
2454
2487
|
const { colors: colors2 } = useTheme();
|
|
2455
2488
|
const borderColor = error ? colors2.colorError : checked ? colors2.colorInteractive : colors2.colorOnBg;
|
|
2456
2489
|
const bgColor = checked ? colors2.colorInteractive : "transparent";
|
|
2457
|
-
return /* @__PURE__ */ (0,
|
|
2458
|
-
/* @__PURE__ */ (0,
|
|
2459
|
-
|
|
2490
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_native33.View, { style: [styles29.container, style], children: [
|
|
2491
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
2492
|
+
import_react_native33.Pressable,
|
|
2460
2493
|
{
|
|
2461
2494
|
onPress: () => !disabled && onChange?.(!checked),
|
|
2462
2495
|
accessibilityRole: "checkbox",
|
|
2463
2496
|
accessibilityLabel: typeof label === "string" ? label : name,
|
|
2464
2497
|
accessibilityState: { checked, disabled },
|
|
2465
2498
|
disabled,
|
|
2466
|
-
style: ({ pressed }) => [
|
|
2499
|
+
style: ({ pressed }) => [styles29.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }],
|
|
2467
2500
|
children: [
|
|
2468
|
-
/* @__PURE__ */ (0,
|
|
2469
|
-
/* @__PURE__ */ (0,
|
|
2501
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_native33.View, { style: [styles29.box, { borderColor, backgroundColor: bgColor }], children: checked && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Label, { label: "\u2713", style: [styles29.checkmark, { color: colors2.colorOnInteractive }] }) }),
|
|
2502
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Label, { label })
|
|
2470
2503
|
]
|
|
2471
2504
|
}
|
|
2472
2505
|
),
|
|
2473
|
-
/* @__PURE__ */ (0,
|
|
2474
|
-
/* @__PURE__ */ (0,
|
|
2506
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Message, { type: "error", message: error }),
|
|
2507
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Message, { type: "hint", message: hint })
|
|
2475
2508
|
] });
|
|
2476
2509
|
}
|
|
2477
2510
|
|
|
2478
2511
|
// src/components/interaction/form/CheckboxGroup/CheckboxGroup.tsx
|
|
2479
|
-
var
|
|
2480
|
-
var
|
|
2481
|
-
var
|
|
2512
|
+
var import_react_native34 = require("react-native");
|
|
2513
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
2514
|
+
var styles30 = import_react_native34.StyleSheet.create({
|
|
2482
2515
|
container: {
|
|
2483
2516
|
gap: import_native.spacing.xs
|
|
2484
2517
|
},
|
|
@@ -2505,31 +2538,31 @@ function CheckboxGroup({
|
|
|
2505
2538
|
style
|
|
2506
2539
|
}) {
|
|
2507
2540
|
const { colors: colors2 } = useTheme();
|
|
2508
|
-
return /* @__PURE__ */ (0,
|
|
2509
|
-
|
|
2541
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
2542
|
+
import_react_native34.View,
|
|
2510
2543
|
{
|
|
2511
|
-
style: [
|
|
2544
|
+
style: [styles30.container, disabled && { opacity: 0.4 }, style],
|
|
2512
2545
|
accessibilityRole: "none",
|
|
2513
2546
|
accessibilityLabel: legend,
|
|
2514
2547
|
children: [
|
|
2515
|
-
/* @__PURE__ */ (0,
|
|
2548
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(ScaledText, { style: [styles30.legend, { color: colors2.colorOnBg }], children: [
|
|
2516
2549
|
legend,
|
|
2517
|
-
required && /* @__PURE__ */ (0,
|
|
2550
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ScaledText, { style: [styles30.required, { color: colors2.colorOnBgSubtle }], children: " *" })
|
|
2518
2551
|
] }),
|
|
2519
|
-
/* @__PURE__ */ (0,
|
|
2520
|
-
/* @__PURE__ */ (0,
|
|
2521
|
-
/* @__PURE__ */ (0,
|
|
2552
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native34.View, { style: styles30.items, children }),
|
|
2553
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Message, { type: "error", message: error }),
|
|
2554
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Message, { type: "hint", message: hint })
|
|
2522
2555
|
]
|
|
2523
2556
|
}
|
|
2524
2557
|
);
|
|
2525
2558
|
}
|
|
2526
2559
|
|
|
2527
2560
|
// src/components/interaction/form/Radio/Radio.tsx
|
|
2528
|
-
var
|
|
2529
|
-
var
|
|
2561
|
+
var import_react_native35 = require("react-native");
|
|
2562
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
2530
2563
|
var DOT = 22;
|
|
2531
2564
|
var INNER = 10;
|
|
2532
|
-
var
|
|
2565
|
+
var styles31 = import_react_native35.StyleSheet.create({
|
|
2533
2566
|
container: {
|
|
2534
2567
|
gap: import_native.spacing.xxs
|
|
2535
2568
|
},
|
|
@@ -2565,31 +2598,31 @@ function Radio({
|
|
|
2565
2598
|
}) {
|
|
2566
2599
|
const { colors: colors2 } = useTheme();
|
|
2567
2600
|
const borderColor = error ? colors2.colorError : checked ? colors2.colorInteractive : colors2.colorOnBg;
|
|
2568
|
-
return /* @__PURE__ */ (0,
|
|
2569
|
-
/* @__PURE__ */ (0,
|
|
2570
|
-
|
|
2601
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_native35.View, { style: [styles31.container, style], children: [
|
|
2602
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
|
|
2603
|
+
import_react_native35.Pressable,
|
|
2571
2604
|
{
|
|
2572
2605
|
onPress: () => !disabled && onChange?.(),
|
|
2573
2606
|
accessibilityRole: "radio",
|
|
2574
2607
|
accessibilityLabel: typeof label === "string" ? label : name,
|
|
2575
2608
|
accessibilityState: { checked, disabled },
|
|
2576
2609
|
disabled,
|
|
2577
|
-
style: ({ pressed }) => [
|
|
2610
|
+
style: ({ pressed }) => [styles31.row, pressed && { opacity: 0.7 }, disabled && { opacity: 0.4 }],
|
|
2578
2611
|
children: [
|
|
2579
|
-
/* @__PURE__ */ (0,
|
|
2580
|
-
/* @__PURE__ */ (0,
|
|
2612
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.View, { style: [styles31.outer, { borderColor }], children: checked && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_native35.View, { style: [styles31.inner, { backgroundColor: colors2.colorInteractive }] }) }),
|
|
2613
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Label, { label })
|
|
2581
2614
|
]
|
|
2582
2615
|
}
|
|
2583
2616
|
),
|
|
2584
|
-
/* @__PURE__ */ (0,
|
|
2585
|
-
/* @__PURE__ */ (0,
|
|
2617
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Message, { type: "error", message: error }),
|
|
2618
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Message, { type: "hint", message: hint })
|
|
2586
2619
|
] });
|
|
2587
2620
|
}
|
|
2588
2621
|
|
|
2589
2622
|
// src/components/interaction/form/RadioGroup/RadioGroup.tsx
|
|
2590
|
-
var
|
|
2591
|
-
var
|
|
2592
|
-
var
|
|
2623
|
+
var import_react_native36 = require("react-native");
|
|
2624
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
2625
|
+
var styles32 = import_react_native36.StyleSheet.create({
|
|
2593
2626
|
container: {
|
|
2594
2627
|
gap: import_native.spacing.xs
|
|
2595
2628
|
},
|
|
@@ -2616,29 +2649,29 @@ function RadioGroup({
|
|
|
2616
2649
|
style
|
|
2617
2650
|
}) {
|
|
2618
2651
|
const { colors: colors2 } = useTheme();
|
|
2619
|
-
return /* @__PURE__ */ (0,
|
|
2620
|
-
|
|
2652
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
2653
|
+
import_react_native36.View,
|
|
2621
2654
|
{
|
|
2622
|
-
style: [
|
|
2655
|
+
style: [styles32.container, disabled && { opacity: 0.4 }, style],
|
|
2623
2656
|
accessibilityRole: "radiogroup",
|
|
2624
2657
|
accessibilityLabel: legend,
|
|
2625
2658
|
children: [
|
|
2626
|
-
/* @__PURE__ */ (0,
|
|
2659
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(ScaledText, { style: [styles32.legend, { color: colors2.colorOnBg }], children: [
|
|
2627
2660
|
legend,
|
|
2628
|
-
required && /* @__PURE__ */ (0,
|
|
2661
|
+
required && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ScaledText, { style: [styles32.required, { color: colors2.colorOnBgSubtle }], children: " *" })
|
|
2629
2662
|
] }),
|
|
2630
|
-
/* @__PURE__ */ (0,
|
|
2631
|
-
/* @__PURE__ */ (0,
|
|
2632
|
-
/* @__PURE__ */ (0,
|
|
2663
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_native36.View, { style: styles32.items, children }),
|
|
2664
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, { type: "error", message: error }),
|
|
2665
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Message, { type: "hint", message: hint })
|
|
2633
2666
|
]
|
|
2634
2667
|
}
|
|
2635
2668
|
);
|
|
2636
2669
|
}
|
|
2637
2670
|
|
|
2638
2671
|
// src/components/interaction/form/FileInput/FileInput.tsx
|
|
2639
|
-
var
|
|
2640
|
-
var
|
|
2641
|
-
var
|
|
2672
|
+
var import_react_native37 = require("react-native");
|
|
2673
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
2674
|
+
var styles33 = import_react_native37.StyleSheet.create({
|
|
2642
2675
|
container: {
|
|
2643
2676
|
gap: import_native.spacing.xxs
|
|
2644
2677
|
},
|
|
@@ -2650,7 +2683,7 @@ var styles32 = import_react_native36.StyleSheet.create({
|
|
|
2650
2683
|
paddingHorizontal: import_native.spacing.m,
|
|
2651
2684
|
borderWidth: 2,
|
|
2652
2685
|
borderStyle: "dashed",
|
|
2653
|
-
borderRadius: import_native.border.radius.
|
|
2686
|
+
borderRadius: import_native.border.radius.m,
|
|
2654
2687
|
minHeight: 120
|
|
2655
2688
|
},
|
|
2656
2689
|
icon: {
|
|
@@ -2693,15 +2726,15 @@ function FileInput({
|
|
|
2693
2726
|
}) {
|
|
2694
2727
|
const { colors: colors2 } = useTheme();
|
|
2695
2728
|
const borderColor = error ? colors2.colorError : colors2.colorBgSubtle;
|
|
2696
|
-
return /* @__PURE__ */ (0,
|
|
2697
|
-
/* @__PURE__ */ (0,
|
|
2729
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_react_native37.View, { style: [styles33.container, style], testID: name, children: [
|
|
2730
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
2698
2731
|
Label,
|
|
2699
2732
|
{
|
|
2700
2733
|
label: required ? `${label} *` : label
|
|
2701
2734
|
}
|
|
2702
2735
|
),
|
|
2703
|
-
/* @__PURE__ */ (0,
|
|
2704
|
-
|
|
2736
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
2737
|
+
import_react_native37.Pressable,
|
|
2705
2738
|
{
|
|
2706
2739
|
onPress: () => !disabled && onSelect?.(),
|
|
2707
2740
|
disabled,
|
|
@@ -2709,7 +2742,7 @@ function FileInput({
|
|
|
2709
2742
|
accessibilityLabel: `${label}, tap to select file`,
|
|
2710
2743
|
accessibilityState: { disabled },
|
|
2711
2744
|
style: ({ pressed }) => [
|
|
2712
|
-
|
|
2745
|
+
styles33.dropZone,
|
|
2713
2746
|
{
|
|
2714
2747
|
borderColor,
|
|
2715
2748
|
backgroundColor: "transparent"
|
|
@@ -2718,35 +2751,35 @@ function FileInput({
|
|
|
2718
2751
|
disabled && { opacity: 0.4 }
|
|
2719
2752
|
],
|
|
2720
2753
|
children: [
|
|
2721
|
-
/* @__PURE__ */ (0,
|
|
2722
|
-
/* @__PURE__ */ (0,
|
|
2723
|
-
fileNames.length > 0 && /* @__PURE__ */ (0,
|
|
2724
|
-
accept && /* @__PURE__ */ (0,
|
|
2754
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScaledText, { style: [styles33.icon, { color: colors2.colorInteractive }], children: "\u2191" }),
|
|
2755
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScaledText, { style: [styles33.prompt, { color: colors2.colorOnBgSubtle }], children: fileNames.length > 0 ? "Selected files:" : "Tap to select file" }),
|
|
2756
|
+
fileNames.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_native37.View, { style: styles33.fileList, children: fileNames.map((fileName) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScaledText, { style: [styles33.fileName, { color: colors2.colorOnBg }], children: fileName }, fileName)) }),
|
|
2757
|
+
accept && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ScaledText, { style: [styles33.acceptHint, { color: colors2.colorOnBgSubtle }], children: accept })
|
|
2725
2758
|
]
|
|
2726
2759
|
}
|
|
2727
2760
|
),
|
|
2728
|
-
/* @__PURE__ */ (0,
|
|
2729
|
-
/* @__PURE__ */ (0,
|
|
2761
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Message, { type: "error", message: error }),
|
|
2762
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Message, { type: "hint", message: hint })
|
|
2730
2763
|
] });
|
|
2731
2764
|
}
|
|
2732
2765
|
|
|
2733
2766
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
2734
2767
|
var import_react10 = require("react");
|
|
2735
|
-
var
|
|
2768
|
+
var import_react_native38 = require("react-native");
|
|
2736
2769
|
|
|
2737
2770
|
// src/components/interaction/form/atoms/inputHelpers.ts
|
|
2738
2771
|
var OPTICAL_TEXT_SHIFT = -1.5;
|
|
2739
2772
|
|
|
2740
2773
|
// src/components/interaction/form/Combobox/Combobox.tsx
|
|
2741
|
-
var
|
|
2774
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
2742
2775
|
var INPUT_HEIGHT = 44;
|
|
2743
2776
|
var MAX_DROPDOWN_HEIGHT = 200;
|
|
2744
|
-
var
|
|
2777
|
+
var styles34 = import_react_native38.StyleSheet.create({
|
|
2745
2778
|
container: {
|
|
2746
2779
|
gap: import_native.spacing.xxs
|
|
2747
2780
|
},
|
|
2748
2781
|
/**
|
|
2749
|
-
* Draws the
|
|
2782
|
+
* Draws the rounded border and provides the fixed 44pt touch-target height.
|
|
2750
2783
|
* justifyContent: 'center' vertically centers the inner TextInput.
|
|
2751
2784
|
* position: 'relative' is required for the dropdown's absolute positioning.
|
|
2752
2785
|
*/
|
|
@@ -2755,7 +2788,7 @@ var styles33 = import_react_native37.StyleSheet.create({
|
|
|
2755
2788
|
height: INPUT_HEIGHT,
|
|
2756
2789
|
justifyContent: "center",
|
|
2757
2790
|
borderWidth: 1,
|
|
2758
|
-
borderRadius: import_native.border.radius.
|
|
2791
|
+
borderRadius: import_native.border.radius.m
|
|
2759
2792
|
},
|
|
2760
2793
|
/**
|
|
2761
2794
|
* No vertical padding: iOS centers text automatically inside the wrapper height.
|
|
@@ -2837,13 +2870,13 @@ function Combobox({
|
|
|
2837
2870
|
setTimeout(() => setIsOpen(false), 150);
|
|
2838
2871
|
};
|
|
2839
2872
|
const borderColor = error ? colors2.colorError : colors2.colorOnBg;
|
|
2840
|
-
return /* @__PURE__ */ (0,
|
|
2841
|
-
/* @__PURE__ */ (0,
|
|
2842
|
-
/* @__PURE__ */ (0,
|
|
2843
|
-
|
|
2873
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native38.View, { style: [styles34.container, style], children: [
|
|
2874
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Label, { label }),
|
|
2875
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
|
|
2876
|
+
import_react_native38.View,
|
|
2844
2877
|
{
|
|
2845
2878
|
style: [
|
|
2846
|
-
|
|
2879
|
+
styles34.inputWrapper,
|
|
2847
2880
|
{
|
|
2848
2881
|
borderColor,
|
|
2849
2882
|
backgroundColor: colors2.colorBg
|
|
@@ -2851,7 +2884,7 @@ function Combobox({
|
|
|
2851
2884
|
disabled && { opacity: 0.4 }
|
|
2852
2885
|
],
|
|
2853
2886
|
children: [
|
|
2854
|
-
/* @__PURE__ */ (0,
|
|
2887
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2855
2888
|
ScaledTextInput,
|
|
2856
2889
|
{
|
|
2857
2890
|
value: inputValue,
|
|
@@ -2865,16 +2898,16 @@ function Combobox({
|
|
|
2865
2898
|
accessibilityLabel: typeof label === "string" ? label : name,
|
|
2866
2899
|
accessibilityState: { disabled, expanded: isOpen },
|
|
2867
2900
|
style: [
|
|
2868
|
-
|
|
2901
|
+
styles34.input,
|
|
2869
2902
|
{ color: colors2.colorOnBg }
|
|
2870
2903
|
]
|
|
2871
2904
|
}
|
|
2872
2905
|
),
|
|
2873
|
-
isOpen && filtered.length > 0 && /* @__PURE__ */ (0,
|
|
2874
|
-
|
|
2906
|
+
isOpen && filtered.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2907
|
+
import_react_native38.ScrollView,
|
|
2875
2908
|
{
|
|
2876
2909
|
style: [
|
|
2877
|
-
|
|
2910
|
+
styles34.dropdown,
|
|
2878
2911
|
{
|
|
2879
2912
|
borderColor: colors2.colorBgSubtle,
|
|
2880
2913
|
backgroundColor: colors2.colorBg
|
|
@@ -2885,8 +2918,8 @@ function Combobox({
|
|
|
2885
2918
|
children: filtered.map((option) => {
|
|
2886
2919
|
const isSelected = option.value === value;
|
|
2887
2920
|
const isDisabled = option.disabled;
|
|
2888
|
-
return /* @__PURE__ */ (0,
|
|
2889
|
-
|
|
2921
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2922
|
+
import_react_native38.Pressable,
|
|
2890
2923
|
{
|
|
2891
2924
|
onPress: () => !isDisabled && selectOption(option),
|
|
2892
2925
|
disabled: isDisabled,
|
|
@@ -2894,16 +2927,16 @@ function Combobox({
|
|
|
2894
2927
|
accessibilityLabel: option.label,
|
|
2895
2928
|
accessibilityState: { selected: isSelected, disabled: isDisabled },
|
|
2896
2929
|
style: ({ pressed }) => [
|
|
2897
|
-
|
|
2930
|
+
styles34.option,
|
|
2898
2931
|
isSelected && { backgroundColor: colors2.colorBlueSubtle },
|
|
2899
2932
|
pressed && !isDisabled && { backgroundColor: colors2.colorBgSubtle },
|
|
2900
2933
|
isDisabled && { opacity: 0.4 }
|
|
2901
2934
|
],
|
|
2902
|
-
children: /* @__PURE__ */ (0,
|
|
2935
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
2903
2936
|
ScaledText,
|
|
2904
2937
|
{
|
|
2905
2938
|
style: [
|
|
2906
|
-
|
|
2939
|
+
styles34.optionText,
|
|
2907
2940
|
{
|
|
2908
2941
|
color: isSelected ? colors2.colorInteractive : colors2.colorOnBg
|
|
2909
2942
|
},
|
|
@@ -2921,15 +2954,15 @@ function Combobox({
|
|
|
2921
2954
|
]
|
|
2922
2955
|
}
|
|
2923
2956
|
),
|
|
2924
|
-
/* @__PURE__ */ (0,
|
|
2925
|
-
/* @__PURE__ */ (0,
|
|
2957
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Message, { type: "error", message: error }),
|
|
2958
|
+
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Message, { type: "hint", message: hint })
|
|
2926
2959
|
] });
|
|
2927
2960
|
}
|
|
2928
2961
|
|
|
2929
2962
|
// src/components/interaction/form/SegmentedControl/SegmentedControl.tsx
|
|
2930
2963
|
var import_react11 = require("react");
|
|
2931
|
-
var
|
|
2932
|
-
var
|
|
2964
|
+
var import_react_native39 = require("react-native");
|
|
2965
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
2933
2966
|
var TRACK_PADDING = import_native.spacing.xxxs;
|
|
2934
2967
|
var sizeTokens2 = {
|
|
2935
2968
|
small: { minHeight: 32, fontSize: import_native.font.size.bodyS, px: import_native.spacing.s, py: import_native.spacing.xxs },
|
|
@@ -2944,7 +2977,7 @@ var thumbShadow = {
|
|
|
2944
2977
|
shadowRadius: 2,
|
|
2945
2978
|
elevation: 2
|
|
2946
2979
|
};
|
|
2947
|
-
var
|
|
2980
|
+
var styles35 = import_react_native39.StyleSheet.create({
|
|
2948
2981
|
track: {
|
|
2949
2982
|
flexDirection: "row",
|
|
2950
2983
|
borderRadius: import_native.border.radius.full,
|
|
@@ -2979,10 +3012,10 @@ function SegmentedControl({
|
|
|
2979
3012
|
const items = import_react11.Children.toArray(children);
|
|
2980
3013
|
const trackBg = colors2.colorBgSubtle;
|
|
2981
3014
|
const thumbBg = variant === "outline" ? colors2.colorBg : colors2.colorInteractive;
|
|
2982
|
-
return /* @__PURE__ */ (0,
|
|
2983
|
-
|
|
3015
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3016
|
+
import_react_native39.View,
|
|
2984
3017
|
{
|
|
2985
|
-
style: [
|
|
3018
|
+
style: [styles35.track, { backgroundColor: trackBg }, style],
|
|
2986
3019
|
accessibilityRole: "tablist",
|
|
2987
3020
|
accessibilityLabel,
|
|
2988
3021
|
children: items.map((child, index) => {
|
|
@@ -2995,8 +3028,8 @@ function SegmentedControl({
|
|
|
2995
3028
|
paddingVertical: py,
|
|
2996
3029
|
...isActive ? { backgroundColor: thumbBg, ...thumbShadow } : { backgroundColor: "transparent" }
|
|
2997
3030
|
};
|
|
2998
|
-
return /* @__PURE__ */ (0,
|
|
2999
|
-
|
|
3031
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3032
|
+
import_react_native39.Pressable,
|
|
3000
3033
|
{
|
|
3001
3034
|
onPress: () => !disabled && onValueChange?.(index),
|
|
3002
3035
|
disabled,
|
|
@@ -3004,15 +3037,15 @@ function SegmentedControl({
|
|
|
3004
3037
|
accessibilityLabel: label ?? void 0,
|
|
3005
3038
|
accessibilityState: { selected: isActive, disabled },
|
|
3006
3039
|
style: ({ pressed }) => [
|
|
3007
|
-
|
|
3040
|
+
styles35.segment,
|
|
3008
3041
|
segmentStyle,
|
|
3009
3042
|
pressed && !disabled && { opacity: 0.7 },
|
|
3010
3043
|
disabled && { opacity: 0.4 }
|
|
3011
3044
|
],
|
|
3012
|
-
children: label !== null ? /* @__PURE__ */ (0,
|
|
3045
|
+
children: label !== null ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
3013
3046
|
ScaledText,
|
|
3014
3047
|
{
|
|
3015
|
-
style: [
|
|
3048
|
+
style: [styles35.label, { fontSize, color: labelColor }],
|
|
3016
3049
|
numberOfLines: 1,
|
|
3017
3050
|
adjustsFontSizeToFit: true,
|
|
3018
3051
|
minimumFontScale: 0.5,
|
|
@@ -3029,8 +3062,8 @@ function SegmentedControl({
|
|
|
3029
3062
|
|
|
3030
3063
|
// src/components/interaction/form/FormInput/FormInput.tsx
|
|
3031
3064
|
var import_react12 = require("react");
|
|
3032
|
-
var
|
|
3033
|
-
var
|
|
3065
|
+
var import_react_native40 = require("react-native");
|
|
3066
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
3034
3067
|
var INPUT_HEIGHT2 = 44;
|
|
3035
3068
|
var keyboardTypeMap = {
|
|
3036
3069
|
text: "default",
|
|
@@ -3041,19 +3074,19 @@ var keyboardTypeMap = {
|
|
|
3041
3074
|
number: "numeric",
|
|
3042
3075
|
search: "default"
|
|
3043
3076
|
};
|
|
3044
|
-
var
|
|
3077
|
+
var styles36 = import_react_native40.StyleSheet.create({
|
|
3045
3078
|
container: {
|
|
3046
3079
|
gap: import_native.spacing.xxs
|
|
3047
3080
|
},
|
|
3048
3081
|
/**
|
|
3049
|
-
* The wrapper draws the
|
|
3082
|
+
* The wrapper draws the rounded border and provides at least 44pt touch-target height.
|
|
3050
3083
|
* justifyContent: 'center' vertically centers the inner TextInput on both iOS and Android.
|
|
3051
3084
|
*/
|
|
3052
3085
|
inputWrapper: {
|
|
3053
3086
|
minHeight: INPUT_HEIGHT2,
|
|
3054
3087
|
justifyContent: "center",
|
|
3055
3088
|
borderWidth: 1,
|
|
3056
|
-
borderRadius: import_native.border.radius.
|
|
3089
|
+
borderRadius: import_native.border.radius.m
|
|
3057
3090
|
},
|
|
3058
3091
|
/**
|
|
3059
3092
|
* No vertical padding: iOS centers text automatically inside the wrapper height.
|
|
@@ -3089,20 +3122,20 @@ function FormInput({
|
|
|
3089
3122
|
const { colors: colors2 } = useTheme();
|
|
3090
3123
|
const [focused, setFocused] = (0, import_react12.useState)(false);
|
|
3091
3124
|
const borderColor = error ? colors2.colorError : focused ? colors2.colorInteractive : colors2.colorOnBg;
|
|
3092
|
-
return /* @__PURE__ */ (0,
|
|
3093
|
-
/* @__PURE__ */ (0,
|
|
3094
|
-
/* @__PURE__ */ (0,
|
|
3095
|
-
|
|
3125
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react_native40.View, { style: [styles36.container, style], children: [
|
|
3126
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Label, { label }),
|
|
3127
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3128
|
+
import_react_native40.View,
|
|
3096
3129
|
{
|
|
3097
3130
|
style: [
|
|
3098
|
-
|
|
3131
|
+
styles36.inputWrapper,
|
|
3099
3132
|
{
|
|
3100
3133
|
borderColor,
|
|
3101
3134
|
backgroundColor: colors2.colorBg
|
|
3102
3135
|
},
|
|
3103
3136
|
disabled && { opacity: 0.4 }
|
|
3104
3137
|
],
|
|
3105
|
-
children: /* @__PURE__ */ (0,
|
|
3138
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
3106
3139
|
ScaledTextInput,
|
|
3107
3140
|
{
|
|
3108
3141
|
accessibilityLabel: typeof label === "string" ? label : name,
|
|
@@ -3127,23 +3160,23 @@ function FormInput({
|
|
|
3127
3160
|
onBlur?.();
|
|
3128
3161
|
},
|
|
3129
3162
|
style: [
|
|
3130
|
-
|
|
3163
|
+
styles36.input,
|
|
3131
3164
|
{ color: colors2.colorOnBg }
|
|
3132
3165
|
]
|
|
3133
3166
|
}
|
|
3134
3167
|
)
|
|
3135
3168
|
}
|
|
3136
3169
|
),
|
|
3137
|
-
/* @__PURE__ */ (0,
|
|
3138
|
-
/* @__PURE__ */ (0,
|
|
3170
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Message, { type: "error", message: error }),
|
|
3171
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Message, { type: "hint", message: hint })
|
|
3139
3172
|
] });
|
|
3140
3173
|
}
|
|
3141
3174
|
|
|
3142
3175
|
// src/components/interaction/form/Textarea/Textarea.tsx
|
|
3143
3176
|
var import_react13 = require("react");
|
|
3144
|
-
var
|
|
3145
|
-
var
|
|
3146
|
-
var
|
|
3177
|
+
var import_react_native41 = require("react-native");
|
|
3178
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
3179
|
+
var styles37 = import_react_native41.StyleSheet.create({
|
|
3147
3180
|
container: {
|
|
3148
3181
|
gap: import_native.spacing.xxs
|
|
3149
3182
|
},
|
|
@@ -3154,7 +3187,7 @@ var styles36 = import_react_native40.StyleSheet.create({
|
|
|
3154
3187
|
paddingHorizontal: import_native.spacing.s,
|
|
3155
3188
|
paddingVertical: import_native.spacing.xs,
|
|
3156
3189
|
borderWidth: 1,
|
|
3157
|
-
borderRadius: import_native.border.radius.
|
|
3190
|
+
borderRadius: import_native.border.radius.m,
|
|
3158
3191
|
minHeight: 100,
|
|
3159
3192
|
textAlignVertical: "top"
|
|
3160
3193
|
}
|
|
@@ -3177,9 +3210,9 @@ function Textarea({
|
|
|
3177
3210
|
const { colors: colors2 } = useTheme();
|
|
3178
3211
|
const [focused, setFocused] = (0, import_react13.useState)(false);
|
|
3179
3212
|
const borderColor = error ? colors2.colorError : focused ? colors2.colorInteractive : colors2.colorOnBg;
|
|
3180
|
-
return /* @__PURE__ */ (0,
|
|
3181
|
-
/* @__PURE__ */ (0,
|
|
3182
|
-
/* @__PURE__ */ (0,
|
|
3213
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_native41.View, { style: [styles37.container, style], children: [
|
|
3214
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Label, { label }),
|
|
3215
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
3183
3216
|
ScaledTextInput,
|
|
3184
3217
|
{
|
|
3185
3218
|
accessibilityLabel: typeof label === "string" ? label : name,
|
|
@@ -3202,7 +3235,7 @@ function Textarea({
|
|
|
3202
3235
|
onBlur?.();
|
|
3203
3236
|
},
|
|
3204
3237
|
style: [
|
|
3205
|
-
|
|
3238
|
+
styles37.textarea,
|
|
3206
3239
|
{
|
|
3207
3240
|
borderColor,
|
|
3208
3241
|
color: colors2.colorOnBg,
|
|
@@ -3212,16 +3245,16 @@ function Textarea({
|
|
|
3212
3245
|
]
|
|
3213
3246
|
}
|
|
3214
3247
|
),
|
|
3215
|
-
/* @__PURE__ */ (0,
|
|
3216
|
-
/* @__PURE__ */ (0,
|
|
3248
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Message, { type: "error", message: error }),
|
|
3249
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Message, { type: "hint", message: hint })
|
|
3217
3250
|
] });
|
|
3218
3251
|
}
|
|
3219
3252
|
|
|
3220
3253
|
// src/components/interaction/form/Select/Select.tsx
|
|
3221
3254
|
var import_react14 = require("react");
|
|
3222
|
-
var
|
|
3223
|
-
var
|
|
3224
|
-
var
|
|
3255
|
+
var import_react_native42 = require("react-native");
|
|
3256
|
+
var import_jsx_runtime43 = require("react/jsx-runtime");
|
|
3257
|
+
var styles38 = import_react_native42.StyleSheet.create({
|
|
3225
3258
|
container: {
|
|
3226
3259
|
gap: import_native.spacing.xxs
|
|
3227
3260
|
},
|
|
@@ -3232,7 +3265,7 @@ var styles37 = import_react_native41.StyleSheet.create({
|
|
|
3232
3265
|
paddingHorizontal: import_native.spacing.s,
|
|
3233
3266
|
paddingVertical: import_native.spacing.xs,
|
|
3234
3267
|
borderWidth: 1,
|
|
3235
|
-
borderRadius: import_native.border.radius.
|
|
3268
|
+
borderRadius: import_native.border.radius.m,
|
|
3236
3269
|
minHeight: 44
|
|
3237
3270
|
},
|
|
3238
3271
|
triggerText: {
|
|
@@ -3242,8 +3275,6 @@ var styles37 = import_react_native41.StyleSheet.create({
|
|
|
3242
3275
|
flex: 1
|
|
3243
3276
|
},
|
|
3244
3277
|
chevron: {
|
|
3245
|
-
fontFamily: import_native.font.family.body,
|
|
3246
|
-
fontSize: import_native.font.size.body,
|
|
3247
3278
|
marginStart: import_native.spacing.xs
|
|
3248
3279
|
},
|
|
3249
3280
|
overlay: {
|
|
@@ -3309,10 +3340,10 @@ function Select({
|
|
|
3309
3340
|
onChange?.(optionValue);
|
|
3310
3341
|
setOpen(false);
|
|
3311
3342
|
};
|
|
3312
|
-
return /* @__PURE__ */ (0,
|
|
3313
|
-
/* @__PURE__ */ (0,
|
|
3314
|
-
/* @__PURE__ */ (0,
|
|
3315
|
-
|
|
3343
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.View, { style: [styles38.container, style], children: [
|
|
3344
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Label, { label }),
|
|
3345
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
|
|
3346
|
+
import_react_native42.Pressable,
|
|
3316
3347
|
{
|
|
3317
3348
|
accessibilityRole: "button",
|
|
3318
3349
|
accessibilityLabel: typeof label === "string" ? `${label}, ${displayText}` : name,
|
|
@@ -3321,7 +3352,7 @@ function Select({
|
|
|
3321
3352
|
disabled,
|
|
3322
3353
|
onPress: () => setOpen(true),
|
|
3323
3354
|
style: [
|
|
3324
|
-
|
|
3355
|
+
styles38.trigger,
|
|
3325
3356
|
{
|
|
3326
3357
|
borderColor,
|
|
3327
3358
|
backgroundColor: colors2.colorBg
|
|
@@ -3329,11 +3360,11 @@ function Select({
|
|
|
3329
3360
|
disabled && { opacity: 0.4 }
|
|
3330
3361
|
],
|
|
3331
3362
|
children: [
|
|
3332
|
-
/* @__PURE__ */ (0,
|
|
3363
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
3333
3364
|
ScaledText,
|
|
3334
3365
|
{
|
|
3335
3366
|
style: [
|
|
3336
|
-
|
|
3367
|
+
styles38.triggerText,
|
|
3337
3368
|
{
|
|
3338
3369
|
color: isPlaceholder ? colors2.colorOnBgSubtle : colors2.colorOnBg
|
|
3339
3370
|
}
|
|
@@ -3341,53 +3372,60 @@ function Select({
|
|
|
3341
3372
|
children: displayText
|
|
3342
3373
|
}
|
|
3343
3374
|
),
|
|
3344
|
-
/* @__PURE__ */ (0,
|
|
3375
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
3376
|
+
Chevron,
|
|
3377
|
+
{
|
|
3378
|
+
testID: "bds-select-chevron",
|
|
3379
|
+
color: colors2.colorOnBgSubtle,
|
|
3380
|
+
style: styles38.chevron
|
|
3381
|
+
}
|
|
3382
|
+
)
|
|
3345
3383
|
]
|
|
3346
3384
|
}
|
|
3347
3385
|
),
|
|
3348
|
-
/* @__PURE__ */ (0,
|
|
3349
|
-
|
|
3386
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
3387
|
+
import_react_native42.Modal,
|
|
3350
3388
|
{
|
|
3351
3389
|
visible: open,
|
|
3352
3390
|
transparent: true,
|
|
3353
3391
|
animationType: "slide",
|
|
3354
3392
|
onRequestClose: () => setOpen(false),
|
|
3355
|
-
children: /* @__PURE__ */ (0,
|
|
3356
|
-
|
|
3393
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
3394
|
+
import_react_native42.Pressable,
|
|
3357
3395
|
{
|
|
3358
|
-
style:
|
|
3396
|
+
style: styles38.overlay,
|
|
3359
3397
|
onPress: () => setOpen(false),
|
|
3360
3398
|
accessibilityRole: "button",
|
|
3361
3399
|
accessibilityLabel: "Close options",
|
|
3362
|
-
children: /* @__PURE__ */ (0,
|
|
3363
|
-
|
|
3400
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
3401
|
+
import_react_native42.Pressable,
|
|
3364
3402
|
{
|
|
3365
|
-
style: [
|
|
3403
|
+
style: [styles38.sheet, { backgroundColor: colors2.colorBg }],
|
|
3366
3404
|
onPress: () => {
|
|
3367
3405
|
},
|
|
3368
|
-
children: /* @__PURE__ */ (0,
|
|
3369
|
-
/* @__PURE__ */ (0,
|
|
3370
|
-
/* @__PURE__ */ (0,
|
|
3371
|
-
/* @__PURE__ */ (0,
|
|
3372
|
-
|
|
3406
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.SafeAreaView, { children: [
|
|
3407
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_react_native42.View, { style: styles38.sheetHeader, children: [
|
|
3408
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ScaledText, { style: [styles38.sheetTitle, { color: colors2.colorOnBg }], children: typeof label === "string" ? label : "Select" }),
|
|
3409
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
3410
|
+
import_react_native42.Pressable,
|
|
3373
3411
|
{
|
|
3374
3412
|
accessibilityRole: "button",
|
|
3375
3413
|
accessibilityLabel: "Close",
|
|
3376
3414
|
onPress: () => setOpen(false),
|
|
3377
3415
|
hitSlop: 8,
|
|
3378
|
-
children: /* @__PURE__ */ (0,
|
|
3416
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ScaledText, { style: [styles38.closeText, { color: colors2.colorInteractive }], children: "Done" })
|
|
3379
3417
|
}
|
|
3380
3418
|
)
|
|
3381
3419
|
] }),
|
|
3382
|
-
/* @__PURE__ */ (0,
|
|
3383
|
-
|
|
3420
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
3421
|
+
import_react_native42.FlatList,
|
|
3384
3422
|
{
|
|
3385
3423
|
data: options,
|
|
3386
3424
|
keyExtractor: (item) => item.value,
|
|
3387
3425
|
renderItem: ({ item }) => {
|
|
3388
3426
|
const isSelected = item.value === value;
|
|
3389
|
-
return /* @__PURE__ */ (0,
|
|
3390
|
-
|
|
3427
|
+
return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
3428
|
+
import_react_native42.Pressable,
|
|
3391
3429
|
{
|
|
3392
3430
|
accessibilityRole: "button",
|
|
3393
3431
|
accessibilityLabel: item.label,
|
|
@@ -3398,16 +3436,16 @@ function Select({
|
|
|
3398
3436
|
disabled: item.disabled,
|
|
3399
3437
|
onPress: () => handleSelect(item.value),
|
|
3400
3438
|
style: ({ pressed }) => [
|
|
3401
|
-
|
|
3439
|
+
styles38.optionItem,
|
|
3402
3440
|
isSelected && { backgroundColor: colors2.colorBgSubtle },
|
|
3403
3441
|
pressed && { opacity: 0.7 },
|
|
3404
3442
|
item.disabled && { opacity: 0.4 }
|
|
3405
3443
|
],
|
|
3406
|
-
children: /* @__PURE__ */ (0,
|
|
3444
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
|
|
3407
3445
|
ScaledText,
|
|
3408
3446
|
{
|
|
3409
3447
|
style: [
|
|
3410
|
-
|
|
3448
|
+
styles38.optionText,
|
|
3411
3449
|
{
|
|
3412
3450
|
color: isSelected ? colors2.colorInteractive : colors2.colorOnBg,
|
|
3413
3451
|
fontWeight: isSelected ? import_native.font.weight.semibold : import_native.font.weight.body
|
|
@@ -3428,18 +3466,18 @@ function Select({
|
|
|
3428
3466
|
)
|
|
3429
3467
|
}
|
|
3430
3468
|
),
|
|
3431
|
-
/* @__PURE__ */ (0,
|
|
3432
|
-
/* @__PURE__ */ (0,
|
|
3469
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Message, { type: "error", message: error }),
|
|
3470
|
+
/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Message, { type: "hint", message: hint })
|
|
3433
3471
|
] });
|
|
3434
3472
|
}
|
|
3435
3473
|
|
|
3436
3474
|
// src/components/interaction/form/Slider/Slider.tsx
|
|
3437
3475
|
var import_react15 = require("react");
|
|
3438
|
-
var
|
|
3439
|
-
var
|
|
3476
|
+
var import_react_native43 = require("react-native");
|
|
3477
|
+
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
3440
3478
|
var TRACK_HEIGHT = 6;
|
|
3441
3479
|
var THUMB_SIZE = 24;
|
|
3442
|
-
var
|
|
3480
|
+
var styles39 = import_react_native43.StyleSheet.create({
|
|
3443
3481
|
container: {
|
|
3444
3482
|
gap: import_native.spacing.xxs
|
|
3445
3483
|
},
|
|
@@ -3533,34 +3571,34 @@ function Slider({
|
|
|
3533
3571
|
updateValue(valueFromTouch(e.nativeEvent.pageX, pageX));
|
|
3534
3572
|
});
|
|
3535
3573
|
};
|
|
3536
|
-
return /* @__PURE__ */ (0,
|
|
3537
|
-
|
|
3574
|
+
return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
3575
|
+
import_react_native43.View,
|
|
3538
3576
|
{
|
|
3539
|
-
style: [
|
|
3577
|
+
style: [styles39.container, style],
|
|
3540
3578
|
accessibilityRole: "adjustable",
|
|
3541
3579
|
accessibilityLabel: label,
|
|
3542
3580
|
accessibilityValue: { min, max, now: currentValue, text: String(currentValue) },
|
|
3543
3581
|
accessibilityState: { disabled },
|
|
3544
3582
|
children: [
|
|
3545
|
-
/* @__PURE__ */ (0,
|
|
3546
|
-
/* @__PURE__ */ (0,
|
|
3547
|
-
showValue && /* @__PURE__ */ (0,
|
|
3583
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_react_native43.View, { style: styles39.labelRow, children: [
|
|
3584
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Label, { label }),
|
|
3585
|
+
showValue && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ScaledText, { style: [styles39.valueText, { color: colors2.colorOnBg }], children: currentValue })
|
|
3548
3586
|
] }),
|
|
3549
|
-
/* @__PURE__ */ (0,
|
|
3550
|
-
|
|
3587
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
3588
|
+
import_react_native43.View,
|
|
3551
3589
|
{
|
|
3552
|
-
style: [
|
|
3590
|
+
style: [styles39.trackContainer, disabled && { opacity: 0.4 }],
|
|
3553
3591
|
onLayout: handleTrackLayout,
|
|
3554
3592
|
onStartShouldSetResponder: handleStartShouldSetResponder,
|
|
3555
3593
|
onMoveShouldSetResponder: handleStartShouldSetResponder,
|
|
3556
3594
|
onResponderGrant: handleResponderGrant,
|
|
3557
3595
|
onResponderMove: handleResponderMove,
|
|
3558
3596
|
children: [
|
|
3559
|
-
/* @__PURE__ */ (0,
|
|
3560
|
-
|
|
3597
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_native43.View, { style: [styles39.track, { backgroundColor: colors2.colorBgSubtle }], children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
3598
|
+
import_react_native43.View,
|
|
3561
3599
|
{
|
|
3562
3600
|
style: [
|
|
3563
|
-
|
|
3601
|
+
styles39.fill,
|
|
3564
3602
|
{
|
|
3565
3603
|
width: `${fillPct}%`,
|
|
3566
3604
|
backgroundColor: error ? colors2.colorError : colors2.colorInteractive
|
|
@@ -3568,11 +3606,11 @@ function Slider({
|
|
|
3568
3606
|
]
|
|
3569
3607
|
}
|
|
3570
3608
|
) }),
|
|
3571
|
-
/* @__PURE__ */ (0,
|
|
3572
|
-
|
|
3609
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
3610
|
+
import_react_native43.View,
|
|
3573
3611
|
{
|
|
3574
3612
|
style: [
|
|
3575
|
-
|
|
3613
|
+
styles39.thumb,
|
|
3576
3614
|
{
|
|
3577
3615
|
start: `${fillPct}%`,
|
|
3578
3616
|
marginStart: -(THUMB_SIZE / 2),
|
|
@@ -3585,8 +3623,8 @@ function Slider({
|
|
|
3585
3623
|
]
|
|
3586
3624
|
}
|
|
3587
3625
|
),
|
|
3588
|
-
/* @__PURE__ */ (0,
|
|
3589
|
-
/* @__PURE__ */ (0,
|
|
3626
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Message, { type: "error", message: error }),
|
|
3627
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Message, { type: "hint", message: hint })
|
|
3590
3628
|
]
|
|
3591
3629
|
}
|
|
3592
3630
|
);
|
|
@@ -3594,10 +3632,10 @@ function Slider({
|
|
|
3594
3632
|
|
|
3595
3633
|
// src/components/interaction/form/NumberInput/NumberInput.tsx
|
|
3596
3634
|
var import_react16 = require("react");
|
|
3597
|
-
var
|
|
3598
|
-
var
|
|
3635
|
+
var import_react_native44 = require("react-native");
|
|
3636
|
+
var import_jsx_runtime45 = require("react/jsx-runtime");
|
|
3599
3637
|
var STEPPER_SIZE = 44;
|
|
3600
|
-
var
|
|
3638
|
+
var styles40 = import_react_native44.StyleSheet.create({
|
|
3601
3639
|
container: {
|
|
3602
3640
|
gap: import_native.spacing.xxs
|
|
3603
3641
|
},
|
|
@@ -3613,13 +3651,13 @@ var styles39 = import_react_native43.StyleSheet.create({
|
|
|
3613
3651
|
borderWidth: 1
|
|
3614
3652
|
},
|
|
3615
3653
|
stepperStart: {
|
|
3616
|
-
borderTopStartRadius: import_native.border.radius.
|
|
3617
|
-
borderBottomStartRadius: import_native.border.radius.
|
|
3654
|
+
borderTopStartRadius: import_native.border.radius.m,
|
|
3655
|
+
borderBottomStartRadius: import_native.border.radius.m,
|
|
3618
3656
|
borderEndWidth: 0
|
|
3619
3657
|
},
|
|
3620
3658
|
stepperEnd: {
|
|
3621
|
-
borderTopEndRadius: import_native.border.radius.
|
|
3622
|
-
borderBottomEndRadius: import_native.border.radius.
|
|
3659
|
+
borderTopEndRadius: import_native.border.radius.m,
|
|
3660
|
+
borderBottomEndRadius: import_native.border.radius.m,
|
|
3623
3661
|
borderStartWidth: 0
|
|
3624
3662
|
},
|
|
3625
3663
|
stepperText: {
|
|
@@ -3686,11 +3724,11 @@ function NumberInput({
|
|
|
3686
3724
|
const canDecrease = min === void 0 || currentValue > min;
|
|
3687
3725
|
const canIncrease = max === void 0 || currentValue < max;
|
|
3688
3726
|
const borderColor = error ? colors2.colorError : colors2.colorOnBg;
|
|
3689
|
-
return /* @__PURE__ */ (0,
|
|
3690
|
-
/* @__PURE__ */ (0,
|
|
3691
|
-
/* @__PURE__ */ (0,
|
|
3692
|
-
/* @__PURE__ */ (0,
|
|
3693
|
-
|
|
3727
|
+
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_native44.View, { style: [styles40.container, style], children: [
|
|
3728
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Label, { label }),
|
|
3729
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_native44.View, { style: [styles40.inputRow, disabled && { opacity: 0.4 }], children: [
|
|
3730
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
3731
|
+
import_react_native44.Pressable,
|
|
3694
3732
|
{
|
|
3695
3733
|
accessibilityRole: "button",
|
|
3696
3734
|
accessibilityLabel: "Decrease",
|
|
@@ -3698,8 +3736,8 @@ function NumberInput({
|
|
|
3698
3736
|
disabled: disabled || !canDecrease,
|
|
3699
3737
|
onPress: () => update(currentValue - step),
|
|
3700
3738
|
style: ({ pressed }) => [
|
|
3701
|
-
|
|
3702
|
-
|
|
3739
|
+
styles40.stepper,
|
|
3740
|
+
styles40.stepperStart,
|
|
3703
3741
|
{
|
|
3704
3742
|
borderColor,
|
|
3705
3743
|
backgroundColor: colors2.colorBgSubtle
|
|
@@ -3707,27 +3745,27 @@ function NumberInput({
|
|
|
3707
3745
|
pressed && { opacity: 0.7 },
|
|
3708
3746
|
(disabled || !canDecrease) && { opacity: 0.4 }
|
|
3709
3747
|
],
|
|
3710
|
-
children: /* @__PURE__ */ (0,
|
|
3748
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
3711
3749
|
ScaledText,
|
|
3712
3750
|
{
|
|
3713
|
-
style: [
|
|
3751
|
+
style: [styles40.stepperText, { color: colors2.colorOnBg }],
|
|
3714
3752
|
"aria-hidden": true,
|
|
3715
3753
|
children: "\u2212"
|
|
3716
3754
|
}
|
|
3717
3755
|
)
|
|
3718
3756
|
}
|
|
3719
3757
|
),
|
|
3720
|
-
/* @__PURE__ */ (0,
|
|
3721
|
-
|
|
3758
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
3759
|
+
import_react_native44.View,
|
|
3722
3760
|
{
|
|
3723
3761
|
style: [
|
|
3724
|
-
|
|
3762
|
+
styles40.inputWrapper,
|
|
3725
3763
|
{
|
|
3726
3764
|
borderColor,
|
|
3727
3765
|
backgroundColor: colors2.colorBg
|
|
3728
3766
|
}
|
|
3729
3767
|
],
|
|
3730
|
-
children: /* @__PURE__ */ (0,
|
|
3768
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
3731
3769
|
ScaledTextInput,
|
|
3732
3770
|
{
|
|
3733
3771
|
accessibilityLabel: label,
|
|
@@ -3747,15 +3785,15 @@ function NumberInput({
|
|
|
3747
3785
|
update(safe);
|
|
3748
3786
|
},
|
|
3749
3787
|
style: [
|
|
3750
|
-
|
|
3788
|
+
styles40.input,
|
|
3751
3789
|
{ color: colors2.colorOnBg }
|
|
3752
3790
|
]
|
|
3753
3791
|
}
|
|
3754
3792
|
)
|
|
3755
3793
|
}
|
|
3756
3794
|
),
|
|
3757
|
-
/* @__PURE__ */ (0,
|
|
3758
|
-
|
|
3795
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
3796
|
+
import_react_native44.Pressable,
|
|
3759
3797
|
{
|
|
3760
3798
|
accessibilityRole: "button",
|
|
3761
3799
|
accessibilityLabel: "Increase",
|
|
@@ -3763,8 +3801,8 @@ function NumberInput({
|
|
|
3763
3801
|
disabled: disabled || !canIncrease,
|
|
3764
3802
|
onPress: () => update(currentValue + step),
|
|
3765
3803
|
style: ({ pressed }) => [
|
|
3766
|
-
|
|
3767
|
-
|
|
3804
|
+
styles40.stepper,
|
|
3805
|
+
styles40.stepperEnd,
|
|
3768
3806
|
{
|
|
3769
3807
|
borderColor,
|
|
3770
3808
|
backgroundColor: colors2.colorBgSubtle
|
|
@@ -3772,10 +3810,10 @@ function NumberInput({
|
|
|
3772
3810
|
pressed && { opacity: 0.7 },
|
|
3773
3811
|
(disabled || !canIncrease) && { opacity: 0.4 }
|
|
3774
3812
|
],
|
|
3775
|
-
children: /* @__PURE__ */ (0,
|
|
3813
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
3776
3814
|
ScaledText,
|
|
3777
3815
|
{
|
|
3778
|
-
style: [
|
|
3816
|
+
style: [styles40.stepperText, { color: colors2.colorOnBg }],
|
|
3779
3817
|
"aria-hidden": true,
|
|
3780
3818
|
children: "+"
|
|
3781
3819
|
}
|
|
@@ -3783,15 +3821,15 @@ function NumberInput({
|
|
|
3783
3821
|
}
|
|
3784
3822
|
)
|
|
3785
3823
|
] }),
|
|
3786
|
-
/* @__PURE__ */ (0,
|
|
3787
|
-
/* @__PURE__ */ (0,
|
|
3824
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Message, { type: "error", message: error }),
|
|
3825
|
+
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Message, { type: "hint", message: hint })
|
|
3788
3826
|
] });
|
|
3789
3827
|
}
|
|
3790
3828
|
|
|
3791
3829
|
// src/components/interaction/Dialog/Dialog.tsx
|
|
3792
|
-
var
|
|
3793
|
-
var
|
|
3794
|
-
var
|
|
3830
|
+
var import_react_native45 = require("react-native");
|
|
3831
|
+
var import_jsx_runtime46 = require("react/jsx-runtime");
|
|
3832
|
+
var styles41 = import_react_native45.StyleSheet.create({
|
|
3795
3833
|
overlay: {
|
|
3796
3834
|
flex: 1,
|
|
3797
3835
|
justifyContent: "center",
|
|
@@ -3847,50 +3885,50 @@ function Dialog({
|
|
|
3847
3885
|
style
|
|
3848
3886
|
}) {
|
|
3849
3887
|
const { colors: colors2 } = useTheme();
|
|
3850
|
-
return /* @__PURE__ */ (0,
|
|
3851
|
-
|
|
3888
|
+
return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3889
|
+
import_react_native45.Modal,
|
|
3852
3890
|
{
|
|
3853
3891
|
visible: isOpen,
|
|
3854
3892
|
transparent: true,
|
|
3855
3893
|
animationType: "fade",
|
|
3856
3894
|
onRequestClose: onClose,
|
|
3857
|
-
children: /* @__PURE__ */ (0,
|
|
3858
|
-
/* @__PURE__ */ (0,
|
|
3859
|
-
|
|
3895
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react_native45.View, { style: styles41.overlay, children: [
|
|
3896
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3897
|
+
import_react_native45.Pressable,
|
|
3860
3898
|
{
|
|
3861
3899
|
testID: "bds-dialog-backdrop",
|
|
3862
|
-
style:
|
|
3900
|
+
style: import_react_native45.StyleSheet.absoluteFill,
|
|
3863
3901
|
onPress: onClose,
|
|
3864
3902
|
accessible: false,
|
|
3865
3903
|
importantForAccessibility: "no"
|
|
3866
3904
|
}
|
|
3867
3905
|
),
|
|
3868
|
-
/* @__PURE__ */ (0,
|
|
3869
|
-
|
|
3906
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
3907
|
+
import_react_native45.View,
|
|
3870
3908
|
{
|
|
3871
|
-
style: [
|
|
3909
|
+
style: [styles41.panel, { backgroundColor: colors2.colorGreySubtle }, style],
|
|
3872
3910
|
accessibilityViewIsModal: true,
|
|
3873
3911
|
onAccessibilityEscape: onClose,
|
|
3874
3912
|
children: [
|
|
3875
|
-
/* @__PURE__ */ (0,
|
|
3876
|
-
|
|
3913
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3914
|
+
import_react_native45.Pressable,
|
|
3877
3915
|
{
|
|
3878
|
-
style:
|
|
3916
|
+
style: styles41.closeButton,
|
|
3879
3917
|
onPress: onClose,
|
|
3880
3918
|
accessibilityRole: "button",
|
|
3881
3919
|
accessibilityLabel: "Close dialog",
|
|
3882
3920
|
hitSlop: 8,
|
|
3883
|
-
children: /* @__PURE__ */ (0,
|
|
3921
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
3884
3922
|
ScaledText,
|
|
3885
3923
|
{
|
|
3886
|
-
style: [
|
|
3924
|
+
style: [styles41.closeText, { color: colors2.colorOnBgSubtle }],
|
|
3887
3925
|
"aria-hidden": true,
|
|
3888
3926
|
children: "\u2715"
|
|
3889
3927
|
}
|
|
3890
3928
|
)
|
|
3891
3929
|
}
|
|
3892
3930
|
),
|
|
3893
|
-
!!title && /* @__PURE__ */ (0,
|
|
3931
|
+
!!title && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_react_native45.View, { style: styles41.header, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ScaledText, { style: [styles41.title, { color: colors2.colorOnGreySubtle }], children: title }) }),
|
|
3894
3932
|
children
|
|
3895
3933
|
]
|
|
3896
3934
|
}
|
|
@@ -3902,9 +3940,9 @@ function Dialog({
|
|
|
3902
3940
|
|
|
3903
3941
|
// src/components/interaction/SideSheet/SideSheet.tsx
|
|
3904
3942
|
var import_react17 = require("react");
|
|
3905
|
-
var
|
|
3906
|
-
var
|
|
3907
|
-
var
|
|
3943
|
+
var import_react_native46 = require("react-native");
|
|
3944
|
+
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
3945
|
+
var styles42 = import_react_native46.StyleSheet.create({
|
|
3908
3946
|
overlay: {
|
|
3909
3947
|
flex: 1,
|
|
3910
3948
|
justifyContent: "flex-end"
|
|
@@ -3961,31 +3999,31 @@ function SideSheet({
|
|
|
3961
3999
|
style
|
|
3962
4000
|
}) {
|
|
3963
4001
|
const { colors: colors2 } = useTheme();
|
|
3964
|
-
const screenHeight =
|
|
3965
|
-
const slideAnim = (0, import_react17.useRef)(new
|
|
3966
|
-
const backdropAnim = (0, import_react17.useRef)(new
|
|
4002
|
+
const screenHeight = import_react_native46.Dimensions.get("window").height;
|
|
4003
|
+
const slideAnim = (0, import_react17.useRef)(new import_react_native46.Animated.Value(screenHeight)).current;
|
|
4004
|
+
const backdropAnim = (0, import_react17.useRef)(new import_react_native46.Animated.Value(0)).current;
|
|
3967
4005
|
(0, import_react17.useEffect)(() => {
|
|
3968
4006
|
if (isOpen) {
|
|
3969
|
-
|
|
3970
|
-
|
|
4007
|
+
import_react_native46.Animated.parallel([
|
|
4008
|
+
import_react_native46.Animated.timing(slideAnim, {
|
|
3971
4009
|
toValue: 0,
|
|
3972
4010
|
duration: 250,
|
|
3973
4011
|
useNativeDriver: true
|
|
3974
4012
|
}),
|
|
3975
|
-
|
|
4013
|
+
import_react_native46.Animated.timing(backdropAnim, {
|
|
3976
4014
|
toValue: 1,
|
|
3977
4015
|
duration: 250,
|
|
3978
4016
|
useNativeDriver: true
|
|
3979
4017
|
})
|
|
3980
4018
|
]).start();
|
|
3981
4019
|
} else {
|
|
3982
|
-
|
|
3983
|
-
|
|
4020
|
+
import_react_native46.Animated.parallel([
|
|
4021
|
+
import_react_native46.Animated.timing(slideAnim, {
|
|
3984
4022
|
toValue: screenHeight,
|
|
3985
4023
|
duration: 200,
|
|
3986
4024
|
useNativeDriver: true
|
|
3987
4025
|
}),
|
|
3988
|
-
|
|
4026
|
+
import_react_native46.Animated.timing(backdropAnim, {
|
|
3989
4027
|
toValue: 0,
|
|
3990
4028
|
duration: 200,
|
|
3991
4029
|
useNativeDriver: true
|
|
@@ -3993,25 +4031,25 @@ function SideSheet({
|
|
|
3993
4031
|
]).start();
|
|
3994
4032
|
}
|
|
3995
4033
|
}, [isOpen, slideAnim, backdropAnim, screenHeight]);
|
|
3996
|
-
return /* @__PURE__ */ (0,
|
|
3997
|
-
|
|
4034
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
4035
|
+
import_react_native46.Modal,
|
|
3998
4036
|
{
|
|
3999
4037
|
visible: isOpen,
|
|
4000
4038
|
transparent: true,
|
|
4001
4039
|
animationType: "none",
|
|
4002
4040
|
onRequestClose: onClose,
|
|
4003
|
-
children: /* @__PURE__ */ (0,
|
|
4004
|
-
/* @__PURE__ */ (0,
|
|
4005
|
-
|
|
4041
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native46.View, { style: styles42.overlay, children: [
|
|
4042
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
4043
|
+
import_react_native46.Animated.View,
|
|
4006
4044
|
{
|
|
4007
4045
|
style: [
|
|
4008
|
-
|
|
4046
|
+
import_react_native46.StyleSheet.absoluteFill,
|
|
4009
4047
|
{ backgroundColor: "rgba(0, 0, 0, 0.5)", opacity: backdropAnim }
|
|
4010
4048
|
],
|
|
4011
|
-
children: /* @__PURE__ */ (0,
|
|
4012
|
-
|
|
4049
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
4050
|
+
import_react_native46.Pressable,
|
|
4013
4051
|
{
|
|
4014
|
-
style:
|
|
4052
|
+
style: import_react_native46.StyleSheet.absoluteFill,
|
|
4015
4053
|
onPress: onClose,
|
|
4016
4054
|
testID: "bds-sidesheet-backdrop",
|
|
4017
4055
|
accessible: false,
|
|
@@ -4020,11 +4058,11 @@ function SideSheet({
|
|
|
4020
4058
|
)
|
|
4021
4059
|
}
|
|
4022
4060
|
),
|
|
4023
|
-
/* @__PURE__ */ (0,
|
|
4024
|
-
|
|
4061
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
4062
|
+
import_react_native46.Animated.View,
|
|
4025
4063
|
{
|
|
4026
4064
|
style: [
|
|
4027
|
-
|
|
4065
|
+
styles42.panel,
|
|
4028
4066
|
{
|
|
4029
4067
|
backgroundColor: colors2.colorBg,
|
|
4030
4068
|
transform: [{ translateY: slideAnim }]
|
|
@@ -4034,24 +4072,24 @@ function SideSheet({
|
|
|
4034
4072
|
accessibilityViewIsModal: true,
|
|
4035
4073
|
onAccessibilityEscape: onClose,
|
|
4036
4074
|
children: [
|
|
4037
|
-
/* @__PURE__ */ (0,
|
|
4038
|
-
|
|
4075
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
4076
|
+
import_react_native46.View,
|
|
4039
4077
|
{
|
|
4040
|
-
style: [
|
|
4078
|
+
style: [styles42.header, { borderBottomColor: colors2.colorBgSubtle }],
|
|
4041
4079
|
children: [
|
|
4042
|
-
!!title && /* @__PURE__ */ (0,
|
|
4043
|
-
/* @__PURE__ */ (0,
|
|
4044
|
-
|
|
4080
|
+
!!title && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ScaledText, { style: [styles42.title, { color: colors2.colorOnBg }], children: title }),
|
|
4081
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
4082
|
+
import_react_native46.Pressable,
|
|
4045
4083
|
{
|
|
4046
|
-
style:
|
|
4084
|
+
style: styles42.closeButton,
|
|
4047
4085
|
onPress: onClose,
|
|
4048
4086
|
accessibilityRole: "button",
|
|
4049
4087
|
accessibilityLabel: "Close side sheet",
|
|
4050
4088
|
hitSlop: 8,
|
|
4051
|
-
children: /* @__PURE__ */ (0,
|
|
4089
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
4052
4090
|
ScaledText,
|
|
4053
4091
|
{
|
|
4054
|
-
style: [
|
|
4092
|
+
style: [styles42.closeText, { color: colors2.colorOnBgSubtle }],
|
|
4055
4093
|
"aria-hidden": true,
|
|
4056
4094
|
children: "\u2715"
|
|
4057
4095
|
}
|
|
@@ -4061,7 +4099,7 @@ function SideSheet({
|
|
|
4061
4099
|
]
|
|
4062
4100
|
}
|
|
4063
4101
|
),
|
|
4064
|
-
/* @__PURE__ */ (0,
|
|
4102
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_react_native46.View, { style: styles42.body, testID: "bds-sidesheet-body", children })
|
|
4065
4103
|
]
|
|
4066
4104
|
}
|
|
4067
4105
|
)
|
|
@@ -4072,10 +4110,10 @@ function SideSheet({
|
|
|
4072
4110
|
|
|
4073
4111
|
// src/components/interaction/Toast/Toast.tsx
|
|
4074
4112
|
var import_react18 = require("react");
|
|
4075
|
-
var
|
|
4076
|
-
var
|
|
4113
|
+
var import_react_native47 = require("react-native");
|
|
4114
|
+
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
4077
4115
|
var ToastContext = (0, import_react18.createContext)(void 0);
|
|
4078
|
-
var
|
|
4116
|
+
var styles43 = import_react_native47.StyleSheet.create({
|
|
4079
4117
|
container: {
|
|
4080
4118
|
position: "absolute",
|
|
4081
4119
|
top: 0,
|
|
@@ -4120,8 +4158,8 @@ function ToastItem({
|
|
|
4120
4158
|
onRemove
|
|
4121
4159
|
}) {
|
|
4122
4160
|
const { colors: colors2 } = useTheme();
|
|
4123
|
-
const slideAnim = (0, import_react18.useRef)(new
|
|
4124
|
-
const opacityAnim = (0, import_react18.useRef)(new
|
|
4161
|
+
const slideAnim = (0, import_react18.useRef)(new import_react_native47.Animated.Value(-100)).current;
|
|
4162
|
+
const opacityAnim = (0, import_react18.useRef)(new import_react_native47.Animated.Value(0)).current;
|
|
4125
4163
|
const variantColors = (0, import_react18.useMemo)(
|
|
4126
4164
|
() => ({
|
|
4127
4165
|
success: { bg: colors2.colorSuccess, text: colors2.colorOnSuccess },
|
|
@@ -4131,13 +4169,13 @@ function ToastItem({
|
|
|
4131
4169
|
[colors2]
|
|
4132
4170
|
);
|
|
4133
4171
|
(0, import_react18.useEffect)(() => {
|
|
4134
|
-
|
|
4135
|
-
|
|
4172
|
+
import_react_native47.Animated.parallel([
|
|
4173
|
+
import_react_native47.Animated.timing(slideAnim, {
|
|
4136
4174
|
toValue: 0,
|
|
4137
4175
|
duration: 200,
|
|
4138
4176
|
useNativeDriver: true
|
|
4139
4177
|
}),
|
|
4140
|
-
|
|
4178
|
+
import_react_native47.Animated.timing(opacityAnim, {
|
|
4141
4179
|
toValue: 1,
|
|
4142
4180
|
duration: 200,
|
|
4143
4181
|
useNativeDriver: true
|
|
@@ -4149,11 +4187,11 @@ function ToastItem({
|
|
|
4149
4187
|
return () => clearTimeout(timer);
|
|
4150
4188
|
}, [onRemove]);
|
|
4151
4189
|
const { bg, text } = variantColors[toast.variant];
|
|
4152
|
-
return /* @__PURE__ */ (0,
|
|
4153
|
-
|
|
4190
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
|
|
4191
|
+
import_react_native47.Animated.View,
|
|
4154
4192
|
{
|
|
4155
4193
|
style: [
|
|
4156
|
-
|
|
4194
|
+
styles43.toast,
|
|
4157
4195
|
{
|
|
4158
4196
|
backgroundColor: bg,
|
|
4159
4197
|
transform: [{ translateY: slideAnim }],
|
|
@@ -4163,16 +4201,16 @@ function ToastItem({
|
|
|
4163
4201
|
accessibilityRole: "alert",
|
|
4164
4202
|
accessibilityLiveRegion: "polite",
|
|
4165
4203
|
children: [
|
|
4166
|
-
/* @__PURE__ */ (0,
|
|
4167
|
-
/* @__PURE__ */ (0,
|
|
4168
|
-
|
|
4204
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ScaledText, { style: [styles43.message, { color: text }], children: toast.message }),
|
|
4205
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
4206
|
+
import_react_native47.Pressable,
|
|
4169
4207
|
{
|
|
4170
|
-
style:
|
|
4208
|
+
style: styles43.closeButton,
|
|
4171
4209
|
onPress: onRemove,
|
|
4172
4210
|
accessibilityRole: "button",
|
|
4173
4211
|
accessibilityLabel: "Dismiss",
|
|
4174
4212
|
hitSlop: 8,
|
|
4175
|
-
children: /* @__PURE__ */ (0,
|
|
4213
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ScaledText, { style: [styles43.closeText, { color: text }], "aria-hidden": true, children: "\u2715" })
|
|
4176
4214
|
}
|
|
4177
4215
|
)
|
|
4178
4216
|
]
|
|
@@ -4192,15 +4230,15 @@ function ToastProvider({
|
|
|
4192
4230
|
setToasts((prev) => prev.filter((t) => t.id !== id));
|
|
4193
4231
|
}, []);
|
|
4194
4232
|
const value = (0, import_react18.useMemo)(() => ({ showToast }), [showToast]);
|
|
4195
|
-
return /* @__PURE__ */ (0,
|
|
4233
|
+
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ToastContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_react_native47.View, { style: [{ flex: 1 }, style], children: [
|
|
4196
4234
|
children,
|
|
4197
|
-
toasts.length > 0 && /* @__PURE__ */ (0,
|
|
4198
|
-
|
|
4235
|
+
toasts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
4236
|
+
import_react_native47.View,
|
|
4199
4237
|
{
|
|
4200
|
-
style:
|
|
4238
|
+
style: styles43.container,
|
|
4201
4239
|
accessibilityRole: "summary",
|
|
4202
4240
|
accessibilityLabel: "Notifications",
|
|
4203
|
-
children: toasts.map((toast) => /* @__PURE__ */ (0,
|
|
4241
|
+
children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
4204
4242
|
ToastItem,
|
|
4205
4243
|
{
|
|
4206
4244
|
toast,
|
|
@@ -4222,9 +4260,9 @@ function useToast() {
|
|
|
4222
4260
|
|
|
4223
4261
|
// src/components/interaction/DropdownMenu/DropdownMenu.tsx
|
|
4224
4262
|
var import_react19 = __toESM(require("react"), 1);
|
|
4225
|
-
var
|
|
4226
|
-
var
|
|
4227
|
-
var
|
|
4263
|
+
var import_react_native48 = require("react-native");
|
|
4264
|
+
var import_jsx_runtime49 = require("react/jsx-runtime");
|
|
4265
|
+
var styles44 = import_react_native48.StyleSheet.create({
|
|
4228
4266
|
overlay: {
|
|
4229
4267
|
flex: 1,
|
|
4230
4268
|
justifyContent: "flex-end"
|
|
@@ -4282,31 +4320,31 @@ function DropdownMenu({
|
|
|
4282
4320
|
}) {
|
|
4283
4321
|
const { colors: colors2 } = useTheme();
|
|
4284
4322
|
const [open, setOpen] = (0, import_react19.useState)(false);
|
|
4285
|
-
const screenHeight =
|
|
4286
|
-
const slideAnim = (0, import_react19.useRef)(new
|
|
4287
|
-
const backdropAnim = (0, import_react19.useRef)(new
|
|
4323
|
+
const screenHeight = import_react_native48.Dimensions.get("window").height;
|
|
4324
|
+
const slideAnim = (0, import_react19.useRef)(new import_react_native48.Animated.Value(screenHeight)).current;
|
|
4325
|
+
const backdropAnim = (0, import_react19.useRef)(new import_react_native48.Animated.Value(0)).current;
|
|
4288
4326
|
(0, import_react19.useEffect)(() => {
|
|
4289
4327
|
if (open) {
|
|
4290
|
-
|
|
4291
|
-
|
|
4328
|
+
import_react_native48.Animated.parallel([
|
|
4329
|
+
import_react_native48.Animated.timing(slideAnim, {
|
|
4292
4330
|
toValue: 0,
|
|
4293
4331
|
duration: 250,
|
|
4294
4332
|
useNativeDriver: true
|
|
4295
4333
|
}),
|
|
4296
|
-
|
|
4334
|
+
import_react_native48.Animated.timing(backdropAnim, {
|
|
4297
4335
|
toValue: 1,
|
|
4298
4336
|
duration: 250,
|
|
4299
4337
|
useNativeDriver: true
|
|
4300
4338
|
})
|
|
4301
4339
|
]).start();
|
|
4302
4340
|
} else {
|
|
4303
|
-
|
|
4304
|
-
|
|
4341
|
+
import_react_native48.Animated.parallel([
|
|
4342
|
+
import_react_native48.Animated.timing(slideAnim, {
|
|
4305
4343
|
toValue: screenHeight,
|
|
4306
4344
|
duration: 200,
|
|
4307
4345
|
useNativeDriver: true
|
|
4308
4346
|
}),
|
|
4309
|
-
|
|
4347
|
+
import_react_native48.Animated.timing(backdropAnim, {
|
|
4310
4348
|
toValue: 0,
|
|
4311
4349
|
duration: 200,
|
|
4312
4350
|
useNativeDriver: true
|
|
@@ -4318,31 +4356,31 @@ function DropdownMenu({
|
|
|
4318
4356
|
item.onPress?.();
|
|
4319
4357
|
setOpen(false);
|
|
4320
4358
|
};
|
|
4321
|
-
return /* @__PURE__ */ (0,
|
|
4359
|
+
return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.View, { style, children: [
|
|
4322
4360
|
import_react19.default.cloneElement(trigger, {
|
|
4323
4361
|
onPress: () => setOpen(true),
|
|
4324
4362
|
accessibilityRole: "button",
|
|
4325
4363
|
accessibilityLabel: title
|
|
4326
4364
|
}),
|
|
4327
|
-
/* @__PURE__ */ (0,
|
|
4328
|
-
|
|
4365
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
4366
|
+
import_react_native48.Modal,
|
|
4329
4367
|
{
|
|
4330
4368
|
visible: open,
|
|
4331
4369
|
transparent: true,
|
|
4332
4370
|
animationType: "none",
|
|
4333
4371
|
onRequestClose: () => setOpen(false),
|
|
4334
|
-
children: /* @__PURE__ */ (0,
|
|
4335
|
-
/* @__PURE__ */ (0,
|
|
4336
|
-
|
|
4372
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.View, { style: styles44.overlay, children: [
|
|
4373
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
4374
|
+
import_react_native48.Animated.View,
|
|
4337
4375
|
{
|
|
4338
4376
|
style: [
|
|
4339
|
-
|
|
4377
|
+
import_react_native48.StyleSheet.absoluteFill,
|
|
4340
4378
|
{ backgroundColor: "rgba(0, 0, 0, 0.5)", opacity: backdropAnim }
|
|
4341
4379
|
],
|
|
4342
|
-
children: /* @__PURE__ */ (0,
|
|
4343
|
-
|
|
4380
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
4381
|
+
import_react_native48.Pressable,
|
|
4344
4382
|
{
|
|
4345
|
-
style:
|
|
4383
|
+
style: import_react_native48.StyleSheet.absoluteFill,
|
|
4346
4384
|
onPress: () => setOpen(false),
|
|
4347
4385
|
testID: "bds-dropdownmenu-backdrop",
|
|
4348
4386
|
accessible: false,
|
|
@@ -4351,11 +4389,11 @@ function DropdownMenu({
|
|
|
4351
4389
|
)
|
|
4352
4390
|
}
|
|
4353
4391
|
),
|
|
4354
|
-
/* @__PURE__ */ (0,
|
|
4355
|
-
|
|
4392
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
4393
|
+
import_react_native48.Animated.View,
|
|
4356
4394
|
{
|
|
4357
4395
|
style: [
|
|
4358
|
-
|
|
4396
|
+
styles44.sheet,
|
|
4359
4397
|
{
|
|
4360
4398
|
backgroundColor: colors2.colorBg,
|
|
4361
4399
|
transform: [{ translateY: slideAnim }]
|
|
@@ -4363,28 +4401,28 @@ function DropdownMenu({
|
|
|
4363
4401
|
],
|
|
4364
4402
|
accessibilityViewIsModal: true,
|
|
4365
4403
|
onAccessibilityEscape: () => setOpen(false),
|
|
4366
|
-
children: /* @__PURE__ */ (0,
|
|
4367
|
-
/* @__PURE__ */ (0,
|
|
4368
|
-
|
|
4404
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_react_native48.SafeAreaView, { children: [
|
|
4405
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
|
|
4406
|
+
import_react_native48.View,
|
|
4369
4407
|
{
|
|
4370
4408
|
style: [
|
|
4371
|
-
|
|
4409
|
+
styles44.sheetHeader,
|
|
4372
4410
|
{ borderBottomColor: colors2.colorBgSubtle }
|
|
4373
4411
|
],
|
|
4374
4412
|
children: [
|
|
4375
|
-
/* @__PURE__ */ (0,
|
|
4376
|
-
/* @__PURE__ */ (0,
|
|
4377
|
-
|
|
4413
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ScaledText, { style: [styles44.sheetTitle, { color: colors2.colorOnBg }], children: title }),
|
|
4414
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
4415
|
+
import_react_native48.Pressable,
|
|
4378
4416
|
{
|
|
4379
4417
|
accessibilityRole: "button",
|
|
4380
4418
|
accessibilityLabel: "Close",
|
|
4381
4419
|
onPress: () => setOpen(false),
|
|
4382
4420
|
hitSlop: 8,
|
|
4383
|
-
children: /* @__PURE__ */ (0,
|
|
4421
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
4384
4422
|
ScaledText,
|
|
4385
4423
|
{
|
|
4386
4424
|
style: [
|
|
4387
|
-
|
|
4425
|
+
styles44.closeText,
|
|
4388
4426
|
{ color: colors2.colorInteractive }
|
|
4389
4427
|
],
|
|
4390
4428
|
children: "Done"
|
|
@@ -4395,24 +4433,24 @@ function DropdownMenu({
|
|
|
4395
4433
|
]
|
|
4396
4434
|
}
|
|
4397
4435
|
),
|
|
4398
|
-
/* @__PURE__ */ (0,
|
|
4399
|
-
|
|
4436
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
4437
|
+
import_react_native48.FlatList,
|
|
4400
4438
|
{
|
|
4401
4439
|
data: items,
|
|
4402
4440
|
keyExtractor: (item) => item.id,
|
|
4403
|
-
renderItem: ({ item }) => /* @__PURE__ */ (0,
|
|
4404
|
-
item.separator && /* @__PURE__ */ (0,
|
|
4405
|
-
|
|
4441
|
+
renderItem: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
|
|
4442
|
+
item.separator && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
4443
|
+
import_react_native48.View,
|
|
4406
4444
|
{
|
|
4407
4445
|
style: [
|
|
4408
|
-
|
|
4446
|
+
styles44.separator,
|
|
4409
4447
|
{ backgroundColor: colors2.colorBgSubtle }
|
|
4410
4448
|
],
|
|
4411
4449
|
accessibilityRole: "none"
|
|
4412
4450
|
}
|
|
4413
4451
|
),
|
|
4414
|
-
/* @__PURE__ */ (0,
|
|
4415
|
-
|
|
4452
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
|
|
4453
|
+
import_react_native48.Pressable,
|
|
4416
4454
|
{
|
|
4417
4455
|
accessibilityRole: "menuitem",
|
|
4418
4456
|
accessibilityLabel: item.label,
|
|
@@ -4420,24 +4458,24 @@ function DropdownMenu({
|
|
|
4420
4458
|
disabled: item.disabled,
|
|
4421
4459
|
onPress: () => handleItemPress(item),
|
|
4422
4460
|
style: ({ pressed }) => [
|
|
4423
|
-
|
|
4461
|
+
styles44.item,
|
|
4424
4462
|
pressed && { backgroundColor: colors2.colorBgSubtle },
|
|
4425
4463
|
item.disabled && { opacity: 0.4 }
|
|
4426
4464
|
],
|
|
4427
4465
|
children: [
|
|
4428
|
-
!!item.icon && /* @__PURE__ */ (0,
|
|
4429
|
-
|
|
4466
|
+
!!item.icon && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
4467
|
+
import_react_native48.View,
|
|
4430
4468
|
{
|
|
4431
4469
|
importantForAccessibility: "no-hide-descendants",
|
|
4432
4470
|
accessibilityElementsHidden: true,
|
|
4433
4471
|
children: item.icon
|
|
4434
4472
|
}
|
|
4435
4473
|
),
|
|
4436
|
-
/* @__PURE__ */ (0,
|
|
4474
|
+
/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
4437
4475
|
ScaledText,
|
|
4438
4476
|
{
|
|
4439
4477
|
style: [
|
|
4440
|
-
|
|
4478
|
+
styles44.itemText,
|
|
4441
4479
|
{ color: colors2.colorOnBg }
|
|
4442
4480
|
],
|
|
4443
4481
|
children: item.label
|
|
@@ -4460,9 +4498,9 @@ function DropdownMenu({
|
|
|
4460
4498
|
|
|
4461
4499
|
// src/components/interaction/Popover/Popover.tsx
|
|
4462
4500
|
var import_react20 = __toESM(require("react"), 1);
|
|
4463
|
-
var
|
|
4464
|
-
var
|
|
4465
|
-
var
|
|
4501
|
+
var import_react_native49 = require("react-native");
|
|
4502
|
+
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
4503
|
+
var styles45 = import_react_native49.StyleSheet.create({
|
|
4466
4504
|
wrapper: {
|
|
4467
4505
|
alignSelf: "flex-start"
|
|
4468
4506
|
},
|
|
@@ -4494,35 +4532,35 @@ function Popover({
|
|
|
4494
4532
|
const { colors: colors2 } = useTheme();
|
|
4495
4533
|
const [isOpen, setIsOpen] = (0, import_react20.useState)(false);
|
|
4496
4534
|
const close = () => setIsOpen(false);
|
|
4497
|
-
return /* @__PURE__ */ (0,
|
|
4535
|
+
return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native49.View, { style: [styles45.wrapper, style], children: [
|
|
4498
4536
|
import_react20.default.cloneElement(children, {
|
|
4499
4537
|
onPress: () => setIsOpen(true),
|
|
4500
4538
|
accessibilityRole: "button",
|
|
4501
4539
|
accessibilityLabel: accessibilityLabel ?? "Open popover"
|
|
4502
4540
|
}),
|
|
4503
|
-
/* @__PURE__ */ (0,
|
|
4504
|
-
|
|
4541
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
4542
|
+
import_react_native49.Modal,
|
|
4505
4543
|
{
|
|
4506
4544
|
visible: isOpen,
|
|
4507
4545
|
transparent: true,
|
|
4508
4546
|
animationType: "fade",
|
|
4509
4547
|
onRequestClose: close,
|
|
4510
|
-
children: /* @__PURE__ */ (0,
|
|
4511
|
-
/* @__PURE__ */ (0,
|
|
4512
|
-
|
|
4548
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_react_native49.View, { style: styles45.overlay, onAccessibilityEscape: close, children: [
|
|
4549
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
4550
|
+
import_react_native49.Pressable,
|
|
4513
4551
|
{
|
|
4514
4552
|
testID: "bds-popover-backdrop",
|
|
4515
|
-
style:
|
|
4553
|
+
style: import_react_native49.StyleSheet.absoluteFill,
|
|
4516
4554
|
onPress: close,
|
|
4517
4555
|
onAccessibilityTap: close,
|
|
4518
4556
|
accessibilityRole: "button",
|
|
4519
4557
|
accessibilityLabel: "Close popover"
|
|
4520
4558
|
}
|
|
4521
4559
|
),
|
|
4522
|
-
/* @__PURE__ */ (0,
|
|
4523
|
-
|
|
4560
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
4561
|
+
import_react_native49.View,
|
|
4524
4562
|
{
|
|
4525
|
-
style: [
|
|
4563
|
+
style: [styles45.panel, { backgroundColor: colors2.colorBg }],
|
|
4526
4564
|
accessibilityLabel,
|
|
4527
4565
|
children: content
|
|
4528
4566
|
}
|