@entropix/react-native 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -3,8 +3,8 @@ import { tokens } from '@entropix/tokens/native';
3
3
  import { tokens as tokens$1 } from '@entropix/tokens/native/light';
4
4
  import { tokens as tokens$2 } from '@entropix/tokens/native/dark';
5
5
  import { jsx, jsxs } from 'react/jsx-runtime';
6
- import { Pressable, Text, Animated, Modal, View, StyleSheet, Dimensions } from 'react-native';
7
- import { useButton, useToggle, useDialog, useTabs, useAccordion, useMenu } from '@entropix/core';
6
+ import { Pressable, Text, Animated, Modal, View, StyleSheet, TextInput, Dimensions } from 'react-native';
7
+ import { useButton, useToggle, useDialog, useTabs, useAccordion, useMenu, useInput, useRadioGroup, useSelect } from '@entropix/core';
8
8
 
9
9
  // src/theme/theme-context.tsx
10
10
  var ThemeContext = createContext({
@@ -966,6 +966,821 @@ function MenuItem({
966
966
  }
967
967
  );
968
968
  }
969
+ var KEYBOARD_TYPE_MAP = {
970
+ text: "default",
971
+ email: "email-address",
972
+ password: "default",
973
+ number: "numeric",
974
+ tel: "phone-pad",
975
+ url: "url",
976
+ search: "default"
977
+ };
978
+ function Input({
979
+ value,
980
+ defaultValue,
981
+ onChange,
982
+ disabled,
983
+ readOnly,
984
+ required,
985
+ invalid,
986
+ label,
987
+ helperText,
988
+ errorMessage,
989
+ placeholder,
990
+ type = "text",
991
+ size = "md",
992
+ style,
993
+ inputStyle,
994
+ textStyle,
995
+ testID
996
+ }) {
997
+ const { tokens: t, baseTokens: bt } = useTheme();
998
+ const {
999
+ value: inputValue,
1000
+ isDisabled,
1001
+ isReadOnly,
1002
+ isInvalid,
1003
+ setValue,
1004
+ getInputProps
1005
+ } = useInput({
1006
+ value,
1007
+ defaultValue,
1008
+ onChange,
1009
+ disabled,
1010
+ readOnly,
1011
+ required,
1012
+ invalid,
1013
+ type,
1014
+ placeholder
1015
+ });
1016
+ const propGetterReturn = getInputProps();
1017
+ const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
1018
+ const handleChangeText = useCallback(
1019
+ (text) => {
1020
+ setValue(text);
1021
+ },
1022
+ [setValue]
1023
+ );
1024
+ const sizeStyles = getSizeStyles(size, bt);
1025
+ const showError = isInvalid && errorMessage;
1026
+ return /* @__PURE__ */ jsxs(View, { style: [{ gap: bt.entropixSpacing1 }, style], children: [
1027
+ label ? /* @__PURE__ */ jsxs(
1028
+ Text,
1029
+ {
1030
+ style: [
1031
+ {
1032
+ fontSize: sizeStyles.labelFontSize,
1033
+ fontWeight: "500",
1034
+ color: t.entropixColorTextPrimary
1035
+ },
1036
+ textStyle
1037
+ ],
1038
+ children: [
1039
+ label,
1040
+ required ? " *" : ""
1041
+ ]
1042
+ }
1043
+ ) : null,
1044
+ /* @__PURE__ */ jsx(
1045
+ TextInput,
1046
+ {
1047
+ ...rnAccessibility,
1048
+ testID,
1049
+ value: inputValue,
1050
+ onChangeText: handleChangeText,
1051
+ placeholder,
1052
+ placeholderTextColor: t.entropixColorTextTertiary,
1053
+ editable: !isDisabled && !isReadOnly,
1054
+ secureTextEntry: type === "password",
1055
+ keyboardType: KEYBOARD_TYPE_MAP[type] ?? "default",
1056
+ style: [
1057
+ {
1058
+ paddingVertical: sizeStyles.paddingVertical,
1059
+ paddingHorizontal: sizeStyles.paddingHorizontal,
1060
+ fontSize: sizeStyles.fontSize,
1061
+ borderWidth: 1,
1062
+ borderColor: showError ? t.entropixColorBorderDanger : t.entropixColorBorderDefault,
1063
+ borderRadius: bt.entropixRadiusMd,
1064
+ backgroundColor: t.entropixColorBgPrimary,
1065
+ color: t.entropixColorTextPrimary
1066
+ },
1067
+ isDisabled && { opacity: 0.5 },
1068
+ inputStyle
1069
+ ]
1070
+ }
1071
+ ),
1072
+ showError ? /* @__PURE__ */ jsx(
1073
+ Text,
1074
+ {
1075
+ style: [
1076
+ {
1077
+ fontSize: sizeStyles.helperFontSize,
1078
+ color: t.entropixColorTextDanger
1079
+ },
1080
+ textStyle
1081
+ ],
1082
+ accessibilityRole: "alert",
1083
+ accessibilityLiveRegion: "polite",
1084
+ children: errorMessage
1085
+ }
1086
+ ) : helperText ? /* @__PURE__ */ jsx(
1087
+ Text,
1088
+ {
1089
+ style: [
1090
+ {
1091
+ fontSize: sizeStyles.helperFontSize,
1092
+ color: t.entropixColorTextSecondary
1093
+ },
1094
+ textStyle
1095
+ ],
1096
+ children: helperText
1097
+ }
1098
+ ) : null
1099
+ ] });
1100
+ }
1101
+ function getSizeStyles(size, bt) {
1102
+ switch (size) {
1103
+ case "sm":
1104
+ return {
1105
+ paddingVertical: bt.entropixSpacing1,
1106
+ paddingHorizontal: bt.entropixSpacing2,
1107
+ fontSize: bt.entropixFontSizeXs,
1108
+ labelFontSize: bt.entropixFontSizeXs,
1109
+ helperFontSize: bt.entropixFontSizeXs - 1
1110
+ };
1111
+ case "lg":
1112
+ return {
1113
+ paddingVertical: bt.entropixSpacing3,
1114
+ paddingHorizontal: bt.entropixSpacing4,
1115
+ fontSize: bt.entropixFontSizeBase,
1116
+ labelFontSize: bt.entropixFontSizeBase,
1117
+ helperFontSize: bt.entropixFontSizeSm
1118
+ };
1119
+ default:
1120
+ return {
1121
+ paddingVertical: bt.entropixSpacing2,
1122
+ paddingHorizontal: bt.entropixSpacing3,
1123
+ fontSize: bt.entropixFontSizeSm,
1124
+ labelFontSize: bt.entropixFontSizeSm,
1125
+ helperFontSize: bt.entropixFontSizeXs
1126
+ };
1127
+ }
1128
+ }
1129
+ function Textarea({
1130
+ value,
1131
+ defaultValue,
1132
+ onChange,
1133
+ disabled,
1134
+ readOnly,
1135
+ required,
1136
+ invalid,
1137
+ label,
1138
+ helperText,
1139
+ errorMessage,
1140
+ placeholder,
1141
+ numberOfLines = 4,
1142
+ size = "md",
1143
+ style,
1144
+ inputStyle,
1145
+ textStyle,
1146
+ testID
1147
+ }) {
1148
+ const { tokens: t, baseTokens: bt } = useTheme();
1149
+ const {
1150
+ value: inputValue,
1151
+ isDisabled,
1152
+ isReadOnly,
1153
+ isInvalid,
1154
+ setValue,
1155
+ getInputProps
1156
+ } = useInput({
1157
+ value,
1158
+ defaultValue,
1159
+ onChange,
1160
+ disabled,
1161
+ readOnly,
1162
+ required,
1163
+ invalid,
1164
+ type: "text",
1165
+ placeholder
1166
+ });
1167
+ const propGetterReturn = getInputProps();
1168
+ const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
1169
+ const handleChangeText = useCallback(
1170
+ (text) => {
1171
+ setValue(text);
1172
+ },
1173
+ [setValue]
1174
+ );
1175
+ const sizeStyles = getSizeStyles2(size, bt);
1176
+ const showError = isInvalid && errorMessage;
1177
+ return /* @__PURE__ */ jsxs(View, { style: [{ gap: bt.entropixSpacing1 }, style], children: [
1178
+ label ? /* @__PURE__ */ jsxs(
1179
+ Text,
1180
+ {
1181
+ style: [
1182
+ {
1183
+ fontSize: sizeStyles.labelFontSize,
1184
+ fontWeight: "500",
1185
+ color: t.entropixColorTextPrimary
1186
+ },
1187
+ textStyle
1188
+ ],
1189
+ children: [
1190
+ label,
1191
+ required ? " *" : ""
1192
+ ]
1193
+ }
1194
+ ) : null,
1195
+ /* @__PURE__ */ jsx(
1196
+ TextInput,
1197
+ {
1198
+ ...rnAccessibility,
1199
+ testID,
1200
+ value: inputValue,
1201
+ onChangeText: handleChangeText,
1202
+ placeholder,
1203
+ placeholderTextColor: t.entropixColorTextTertiary,
1204
+ editable: !isDisabled && !isReadOnly,
1205
+ multiline: true,
1206
+ numberOfLines,
1207
+ textAlignVertical: "top",
1208
+ style: [
1209
+ {
1210
+ paddingVertical: sizeStyles.paddingVertical,
1211
+ paddingHorizontal: sizeStyles.paddingHorizontal,
1212
+ fontSize: sizeStyles.fontSize,
1213
+ borderWidth: 1,
1214
+ borderColor: showError ? t.entropixColorBorderDanger : t.entropixColorBorderDefault,
1215
+ borderRadius: bt.entropixRadiusMd,
1216
+ backgroundColor: t.entropixColorBgPrimary,
1217
+ color: t.entropixColorTextPrimary,
1218
+ minHeight: numberOfLines * (sizeStyles.fontSize + 8)
1219
+ },
1220
+ isDisabled && { opacity: 0.5 },
1221
+ inputStyle
1222
+ ]
1223
+ }
1224
+ ),
1225
+ showError ? /* @__PURE__ */ jsx(
1226
+ Text,
1227
+ {
1228
+ style: [
1229
+ {
1230
+ fontSize: sizeStyles.helperFontSize,
1231
+ color: t.entropixColorTextDanger
1232
+ },
1233
+ textStyle
1234
+ ],
1235
+ accessibilityRole: "alert",
1236
+ accessibilityLiveRegion: "polite",
1237
+ children: errorMessage
1238
+ }
1239
+ ) : helperText ? /* @__PURE__ */ jsx(
1240
+ Text,
1241
+ {
1242
+ style: [
1243
+ {
1244
+ fontSize: sizeStyles.helperFontSize,
1245
+ color: t.entropixColorTextSecondary
1246
+ },
1247
+ textStyle
1248
+ ],
1249
+ children: helperText
1250
+ }
1251
+ ) : null
1252
+ ] });
1253
+ }
1254
+ function getSizeStyles2(size, bt) {
1255
+ switch (size) {
1256
+ case "sm":
1257
+ return {
1258
+ paddingVertical: bt.entropixSpacing1,
1259
+ paddingHorizontal: bt.entropixSpacing2,
1260
+ fontSize: bt.entropixFontSizeXs,
1261
+ labelFontSize: bt.entropixFontSizeXs,
1262
+ helperFontSize: bt.entropixFontSizeXs - 1
1263
+ };
1264
+ case "lg":
1265
+ return {
1266
+ paddingVertical: bt.entropixSpacing3,
1267
+ paddingHorizontal: bt.entropixSpacing4,
1268
+ fontSize: bt.entropixFontSizeBase,
1269
+ labelFontSize: bt.entropixFontSizeBase,
1270
+ helperFontSize: bt.entropixFontSizeSm
1271
+ };
1272
+ default:
1273
+ return {
1274
+ paddingVertical: bt.entropixSpacing2,
1275
+ paddingHorizontal: bt.entropixSpacing3,
1276
+ fontSize: bt.entropixFontSizeSm,
1277
+ labelFontSize: bt.entropixFontSizeSm,
1278
+ helperFontSize: bt.entropixFontSizeXs
1279
+ };
1280
+ }
1281
+ }
1282
+ function Checkbox({
1283
+ checked,
1284
+ defaultChecked,
1285
+ onChange,
1286
+ disabled,
1287
+ indeterminate,
1288
+ label,
1289
+ size = "md",
1290
+ style,
1291
+ textStyle,
1292
+ children,
1293
+ ...rest
1294
+ }) {
1295
+ const { tokens: t, baseTokens: bt } = useTheme();
1296
+ const { isChecked, isDisabled, getToggleProps } = useToggle({
1297
+ checked,
1298
+ defaultChecked,
1299
+ onChange,
1300
+ disabled,
1301
+ role: "checkbox"
1302
+ });
1303
+ const propGetterReturn = getToggleProps();
1304
+ const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
1305
+ if (indeterminate) {
1306
+ rnAccessibility.accessibilityState = {
1307
+ ...rnAccessibility.accessibilityState,
1308
+ checked: "mixed"
1309
+ };
1310
+ }
1311
+ if (label) {
1312
+ rnAccessibility.accessibilityLabel = label;
1313
+ }
1314
+ const handlePress = useCallback(() => {
1315
+ propGetterReturn.onAction?.();
1316
+ }, [propGetterReturn.onAction]);
1317
+ const sizeStyles = getSizeStyles3(size, bt);
1318
+ const isActive = indeterminate || isChecked;
1319
+ return /* @__PURE__ */ jsxs(
1320
+ Pressable,
1321
+ {
1322
+ ...rnAccessibility,
1323
+ ...rest,
1324
+ disabled: isDisabled,
1325
+ onPress: isDisabled ? void 0 : handlePress,
1326
+ style: [
1327
+ {
1328
+ flexDirection: "row",
1329
+ alignItems: "center",
1330
+ gap: bt.entropixSpacing2
1331
+ },
1332
+ isDisabled && { opacity: 0.5 },
1333
+ style
1334
+ ],
1335
+ children: [
1336
+ /* @__PURE__ */ jsx(
1337
+ View,
1338
+ {
1339
+ style: {
1340
+ width: sizeStyles.boxSize,
1341
+ height: sizeStyles.boxSize,
1342
+ borderWidth: 2,
1343
+ borderColor: isActive ? t.entropixColorActionPrimaryDefault : t.entropixColorBorderDefault,
1344
+ borderRadius: bt.entropixRadiusSm,
1345
+ backgroundColor: isActive ? t.entropixColorActionPrimaryDefault : "transparent",
1346
+ alignItems: "center",
1347
+ justifyContent: "center"
1348
+ },
1349
+ children: indeterminate ? /* @__PURE__ */ jsx(
1350
+ Text,
1351
+ {
1352
+ style: {
1353
+ fontSize: sizeStyles.indicatorFontSize,
1354
+ fontWeight: "700",
1355
+ color: t.entropixColorTextInverse,
1356
+ lineHeight: sizeStyles.boxSize - 2
1357
+ },
1358
+ children: "\u2013"
1359
+ }
1360
+ ) : isChecked ? /* @__PURE__ */ jsx(
1361
+ Text,
1362
+ {
1363
+ style: {
1364
+ fontSize: sizeStyles.indicatorFontSize,
1365
+ fontWeight: "700",
1366
+ color: t.entropixColorTextInverse,
1367
+ lineHeight: sizeStyles.boxSize - 2
1368
+ },
1369
+ children: "\u2713"
1370
+ }
1371
+ ) : null
1372
+ }
1373
+ ),
1374
+ typeof children === "string" ? /* @__PURE__ */ jsx(
1375
+ Text,
1376
+ {
1377
+ style: [
1378
+ {
1379
+ fontSize: sizeStyles.fontSize,
1380
+ color: t.entropixColorTextPrimary
1381
+ },
1382
+ textStyle
1383
+ ],
1384
+ children
1385
+ }
1386
+ ) : children != null ? children : label ? /* @__PURE__ */ jsx(
1387
+ Text,
1388
+ {
1389
+ style: [
1390
+ {
1391
+ fontSize: sizeStyles.fontSize,
1392
+ color: t.entropixColorTextPrimary
1393
+ },
1394
+ textStyle
1395
+ ],
1396
+ children: label
1397
+ }
1398
+ ) : null
1399
+ ]
1400
+ }
1401
+ );
1402
+ }
1403
+ function getSizeStyles3(size, bt) {
1404
+ switch (size) {
1405
+ case "sm":
1406
+ return {
1407
+ boxSize: 16,
1408
+ indicatorFontSize: 10,
1409
+ fontSize: bt.entropixFontSizeXs
1410
+ };
1411
+ case "lg":
1412
+ return {
1413
+ boxSize: 24,
1414
+ indicatorFontSize: 16,
1415
+ fontSize: bt.entropixFontSizeBase
1416
+ };
1417
+ default:
1418
+ return {
1419
+ boxSize: 20,
1420
+ indicatorFontSize: 13,
1421
+ fontSize: bt.entropixFontSizeSm
1422
+ };
1423
+ }
1424
+ }
1425
+ var RadioGroupContext = createContext(null);
1426
+ function useRadioGroupContext() {
1427
+ const context = useContext(RadioGroupContext);
1428
+ if (!context) {
1429
+ throw new Error(
1430
+ "Radio compound components must be used within a <RadioGroup> provider."
1431
+ );
1432
+ }
1433
+ return context;
1434
+ }
1435
+ function RadioGroup({
1436
+ label,
1437
+ style,
1438
+ textStyle,
1439
+ children,
1440
+ testID,
1441
+ ...options
1442
+ }) {
1443
+ const { tokens: t, baseTokens: bt } = useTheme();
1444
+ const radioGroup = useRadioGroup(options);
1445
+ const propGetterReturn = radioGroup.getRadioGroupProps();
1446
+ const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
1447
+ if (label) {
1448
+ rnAccessibility.accessibilityLabel = label;
1449
+ }
1450
+ return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: radioGroup, children: /* @__PURE__ */ jsxs(
1451
+ View,
1452
+ {
1453
+ ...rnAccessibility,
1454
+ testID,
1455
+ style: [
1456
+ {
1457
+ gap: bt.entropixSpacing2
1458
+ },
1459
+ style
1460
+ ],
1461
+ children: [
1462
+ label ? /* @__PURE__ */ jsx(
1463
+ Text,
1464
+ {
1465
+ style: [
1466
+ {
1467
+ fontSize: bt.entropixFontSizeSm,
1468
+ fontWeight: "500",
1469
+ color: t.entropixColorTextPrimary
1470
+ },
1471
+ textStyle
1472
+ ],
1473
+ children: label
1474
+ }
1475
+ ) : null,
1476
+ children
1477
+ ]
1478
+ }
1479
+ ) });
1480
+ }
1481
+ function RadioItem({
1482
+ value,
1483
+ disabled,
1484
+ style,
1485
+ textStyle,
1486
+ children,
1487
+ ...rest
1488
+ }) {
1489
+ const { tokens: t, baseTokens: bt } = useTheme();
1490
+ const { getRadioProps } = useRadioGroupContext();
1491
+ const propGetterReturn = getRadioProps(value, { disabled });
1492
+ const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
1493
+ const isChecked = propGetterReturn.accessibility.checked === true;
1494
+ const isDisabled = propGetterReturn.accessibility.disabled === true;
1495
+ const handlePress = useCallback(() => {
1496
+ propGetterReturn.onAction?.();
1497
+ }, [propGetterReturn.onAction]);
1498
+ return /* @__PURE__ */ jsxs(
1499
+ Pressable,
1500
+ {
1501
+ ...rnAccessibility,
1502
+ ...rest,
1503
+ disabled: isDisabled,
1504
+ onPress: isDisabled ? void 0 : handlePress,
1505
+ style: [
1506
+ {
1507
+ flexDirection: "row",
1508
+ alignItems: "center",
1509
+ gap: bt.entropixSpacing2
1510
+ },
1511
+ isDisabled && { opacity: 0.5 },
1512
+ style
1513
+ ],
1514
+ children: [
1515
+ /* @__PURE__ */ jsx(
1516
+ View,
1517
+ {
1518
+ style: {
1519
+ width: 20,
1520
+ height: 20,
1521
+ borderRadius: 10,
1522
+ borderWidth: 2,
1523
+ borderColor: isChecked ? t.entropixColorActionPrimaryDefault : t.entropixColorBorderDefault,
1524
+ alignItems: "center",
1525
+ justifyContent: "center"
1526
+ },
1527
+ children: isChecked ? /* @__PURE__ */ jsx(
1528
+ View,
1529
+ {
1530
+ style: {
1531
+ width: 10,
1532
+ height: 10,
1533
+ borderRadius: 5,
1534
+ backgroundColor: t.entropixColorActionPrimaryDefault
1535
+ }
1536
+ }
1537
+ ) : null
1538
+ }
1539
+ ),
1540
+ typeof children === "string" ? /* @__PURE__ */ jsx(
1541
+ Text,
1542
+ {
1543
+ style: [
1544
+ {
1545
+ fontSize: bt.entropixFontSizeSm,
1546
+ color: t.entropixColorTextPrimary
1547
+ },
1548
+ textStyle
1549
+ ],
1550
+ children
1551
+ }
1552
+ ) : children
1553
+ ]
1554
+ }
1555
+ );
1556
+ }
1557
+ var SelectContext = createContext(null);
1558
+ function useSelectContext() {
1559
+ const context = useContext(SelectContext);
1560
+ if (!context) {
1561
+ throw new Error(
1562
+ "Select compound components must be used within a <Select> provider."
1563
+ );
1564
+ }
1565
+ return context;
1566
+ }
1567
+ function Select({
1568
+ label,
1569
+ style,
1570
+ textStyle,
1571
+ children,
1572
+ testID,
1573
+ ...options
1574
+ }) {
1575
+ const { tokens: t, baseTokens: bt } = useTheme();
1576
+ const select = useSelect(options);
1577
+ return /* @__PURE__ */ jsx(SelectContext.Provider, { value: select, children: /* @__PURE__ */ jsxs(
1578
+ View,
1579
+ {
1580
+ testID,
1581
+ style: [{ gap: bt.entropixSpacing1 }, style],
1582
+ children: [
1583
+ label ? /* @__PURE__ */ jsx(
1584
+ Text,
1585
+ {
1586
+ style: [
1587
+ {
1588
+ fontSize: bt.entropixFontSizeSm,
1589
+ fontWeight: "500",
1590
+ color: t.entropixColorTextPrimary
1591
+ },
1592
+ textStyle
1593
+ ],
1594
+ children: label
1595
+ }
1596
+ ) : null,
1597
+ children
1598
+ ]
1599
+ }
1600
+ ) });
1601
+ }
1602
+ function SelectTrigger({
1603
+ placeholder = "Select...",
1604
+ displayValue,
1605
+ style,
1606
+ textStyle,
1607
+ ...rest
1608
+ }) {
1609
+ const { tokens: t, baseTokens: bt } = useTheme();
1610
+ const { selectedValue, isDisabled, isOpen, getTriggerProps } = useSelectContext();
1611
+ const propGetterReturn = getTriggerProps();
1612
+ const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
1613
+ const handlePress = useCallback(() => {
1614
+ propGetterReturn.onAction?.();
1615
+ }, [propGetterReturn.onAction]);
1616
+ const hasValue = selectedValue !== "";
1617
+ const label = displayValue ?? (hasValue ? selectedValue : placeholder);
1618
+ return /* @__PURE__ */ jsxs(
1619
+ Pressable,
1620
+ {
1621
+ ...rnAccessibility,
1622
+ ...rest,
1623
+ disabled: isDisabled,
1624
+ onPress: isDisabled ? void 0 : handlePress,
1625
+ style: [
1626
+ {
1627
+ flexDirection: "row",
1628
+ alignItems: "center",
1629
+ justifyContent: "space-between",
1630
+ paddingVertical: bt.entropixSpacing2,
1631
+ paddingHorizontal: bt.entropixSpacing3,
1632
+ borderWidth: 1,
1633
+ borderColor: isOpen ? t.entropixColorActionPrimaryDefault : t.entropixColorBorderDefault,
1634
+ borderRadius: bt.entropixRadiusMd,
1635
+ backgroundColor: t.entropixColorBgPrimary
1636
+ },
1637
+ isDisabled && { opacity: 0.5 },
1638
+ style
1639
+ ],
1640
+ children: [
1641
+ /* @__PURE__ */ jsx(
1642
+ Text,
1643
+ {
1644
+ style: [
1645
+ {
1646
+ fontSize: bt.entropixFontSizeSm,
1647
+ color: hasValue ? t.entropixColorTextPrimary : t.entropixColorTextTertiary,
1648
+ flex: 1
1649
+ },
1650
+ textStyle
1651
+ ],
1652
+ numberOfLines: 1,
1653
+ children: label
1654
+ }
1655
+ ),
1656
+ /* @__PURE__ */ jsx(
1657
+ Text,
1658
+ {
1659
+ style: {
1660
+ fontSize: bt.entropixFontSizeXs,
1661
+ color: t.entropixColorTextSecondary,
1662
+ marginLeft: bt.entropixSpacing2
1663
+ },
1664
+ children: "\u25BC"
1665
+ }
1666
+ )
1667
+ ]
1668
+ }
1669
+ );
1670
+ }
1671
+ function SelectContent({ children, style, testID }) {
1672
+ const { tokens: t, baseTokens: bt } = useTheme();
1673
+ const { isOpen, close, getListboxProps } = useSelectContext();
1674
+ const propGetterReturn = getListboxProps();
1675
+ const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
1676
+ if (!isOpen) return null;
1677
+ return /* @__PURE__ */ jsx(
1678
+ Modal,
1679
+ {
1680
+ visible: isOpen,
1681
+ transparent: true,
1682
+ animationType: "fade",
1683
+ onRequestClose: close,
1684
+ children: /* @__PURE__ */ jsx(
1685
+ Pressable,
1686
+ {
1687
+ style: {
1688
+ flex: 1,
1689
+ justifyContent: "center",
1690
+ alignItems: "center",
1691
+ backgroundColor: "rgba(0,0,0,0.3)"
1692
+ },
1693
+ onPress: close,
1694
+ children: /* @__PURE__ */ jsx(
1695
+ Pressable,
1696
+ {
1697
+ onPress: () => {
1698
+ },
1699
+ children: /* @__PURE__ */ jsx(
1700
+ View,
1701
+ {
1702
+ ...rnAccessibility,
1703
+ testID,
1704
+ style: [
1705
+ {
1706
+ minWidth: 240,
1707
+ maxHeight: 300,
1708
+ padding: bt.entropixSpacing1,
1709
+ backgroundColor: t.entropixColorBgPrimary,
1710
+ borderWidth: 1,
1711
+ borderColor: t.entropixColorBorderDefault,
1712
+ borderRadius: bt.entropixRadiusMd,
1713
+ shadowColor: "#000",
1714
+ shadowOffset: { width: 0, height: 4 },
1715
+ shadowOpacity: 0.15,
1716
+ shadowRadius: 12,
1717
+ elevation: 8
1718
+ },
1719
+ style
1720
+ ],
1721
+ children
1722
+ }
1723
+ )
1724
+ }
1725
+ )
1726
+ }
1727
+ )
1728
+ }
1729
+ );
1730
+ }
1731
+ function SelectOption({
1732
+ value,
1733
+ index,
1734
+ disabled,
1735
+ style,
1736
+ textStyle,
1737
+ children,
1738
+ ...rest
1739
+ }) {
1740
+ const { tokens: t, baseTokens: bt } = useTheme();
1741
+ const { getOptionProps } = useSelectContext();
1742
+ const propGetterReturn = getOptionProps(value, index ?? 0, { disabled });
1743
+ const rnAccessibility = mapAccessibilityToRN(propGetterReturn.accessibility);
1744
+ const isSelected = propGetterReturn.accessibility.selected === true;
1745
+ const handlePress = useCallback(() => {
1746
+ propGetterReturn.onAction?.();
1747
+ }, [propGetterReturn.onAction]);
1748
+ return /* @__PURE__ */ jsx(
1749
+ Pressable,
1750
+ {
1751
+ ...rnAccessibility,
1752
+ ...rest,
1753
+ disabled,
1754
+ onPress: propGetterReturn.onAction ? handlePress : void 0,
1755
+ style: [
1756
+ {
1757
+ flexDirection: "row",
1758
+ alignItems: "center",
1759
+ paddingVertical: bt.entropixSpacing2,
1760
+ paddingHorizontal: bt.entropixSpacing3,
1761
+ borderRadius: bt.entropixRadiusSm,
1762
+ backgroundColor: isSelected ? t.entropixColorBgSecondary : "transparent"
1763
+ },
1764
+ disabled && { opacity: 0.5 },
1765
+ style
1766
+ ],
1767
+ children: typeof children === "string" ? /* @__PURE__ */ jsx(
1768
+ Text,
1769
+ {
1770
+ style: [
1771
+ {
1772
+ fontSize: bt.entropixFontSizeSm,
1773
+ fontWeight: isSelected ? "600" : "400",
1774
+ color: t.entropixColorTextPrimary
1775
+ },
1776
+ textStyle
1777
+ ],
1778
+ children
1779
+ }
1780
+ ) : children
1781
+ }
1782
+ );
1783
+ }
969
1784
  var BREAKPOINTS = {
970
1785
  sm: 640,
971
1786
  md: 768,
@@ -1207,6 +2022,6 @@ function Divider({
1207
2022
  );
1208
2023
  }
1209
2024
 
1210
- export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, BREAKPOINTS, Button, Container, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogTitle, DialogTrigger, Divider, EntropixProvider, Inline, Menu, MenuContent, MenuItem, MenuTrigger, Stack, Switch, Tab, TabList, TabPanel, Tabs, Toggle, mapAccessibilityToRN, useBreakpoint, useBreakpointValue, useScreenDimensions, useTheme };
2025
+ export { Accordion, AccordionItem, AccordionPanel, AccordionTrigger, BREAKPOINTS, Button, Checkbox, Container, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogTitle, DialogTrigger, Divider, EntropixProvider, Inline, Input, Menu, MenuContent, MenuItem, MenuTrigger, RadioGroup, RadioItem, Select, SelectContent, SelectOption, SelectTrigger, Stack, Switch, Tab, TabList, TabPanel, Tabs, Textarea, Toggle, mapAccessibilityToRN, useBreakpoint, useBreakpointValue, useScreenDimensions, useTheme };
1211
2026
  //# sourceMappingURL=index.js.map
1212
2027
  //# sourceMappingURL=index.js.map