sapo-components-ui-rn 1.0.46 → 1.0.47
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/components/Spacer/index.d.ts +2 -1
- package/dist/components/TextInput/TextInput.d.ts +2 -2
- package/dist/index.esm.js +51 -51
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +51 -51
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/Checkbox/index.tsx +1 -1
- package/src/components/Spacer/index.tsx +10 -1
- package/src/components/TextInput/TextInput.tsx +2 -2
- package/src/styles/themes/DarkTheme.tsx +12 -12
- package/src/styles/themes/LightTheme.tsx +12 -12
- package/src/styles/themes/tokens.tsx +24 -24
|
@@ -4,6 +4,7 @@ interface SpacerProps {
|
|
|
4
4
|
width?: number;
|
|
5
5
|
height?: number;
|
|
6
6
|
style?: StyleProp<ViewStyle>;
|
|
7
|
+
backgroundColor?: string;
|
|
7
8
|
}
|
|
8
|
-
declare const Spacer: ({ style, width, height, }: SpacerProps) => React.JSX.Element;
|
|
9
|
+
declare const Spacer: ({ style, width, height, backgroundColor, }: SpacerProps) => React.JSX.Element;
|
|
9
10
|
export default Spacer;
|
|
@@ -14,11 +14,11 @@ export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
|
|
|
14
14
|
/**
|
|
15
15
|
* The text or component to use for the floating label.
|
|
16
16
|
*/
|
|
17
|
-
label
|
|
17
|
+
label?: TextInputLabelProp;
|
|
18
18
|
/**
|
|
19
19
|
* Placeholder for the input.
|
|
20
20
|
*/
|
|
21
|
-
placeholder
|
|
21
|
+
placeholder?: string;
|
|
22
22
|
/**
|
|
23
23
|
* Whether to style the TextInput with error style.
|
|
24
24
|
*/
|
package/dist/index.esm.js
CHANGED
|
@@ -258,8 +258,8 @@ var ref = {
|
|
|
258
258
|
surfaceBrandDisabled: ink.INK10,
|
|
259
259
|
surfaceBrandHover: blue.BLUE80,
|
|
260
260
|
surfaceBrandInverseDefault: blue.BLUE5,
|
|
261
|
-
surfaceBrandInverseHover: blue.
|
|
262
|
-
surfaceBrandInversePressed: blue.
|
|
261
|
+
surfaceBrandInverseHover: blue.BLUE10,
|
|
262
|
+
surfaceBrandInversePressed: blue.BLUE20,
|
|
263
263
|
surfaceBrandPressed: blue.BLUE120,
|
|
264
264
|
surfaceCriticalDefault: red.RED100,
|
|
265
265
|
surfaceCriticalDisabled: ink.INK10,
|
|
@@ -296,9 +296,9 @@ var ref = {
|
|
|
296
296
|
surfaceSuccessDefault: green.GREEN100,
|
|
297
297
|
surfaceSuccessDisabled: ink.INK10,
|
|
298
298
|
surfaceSuccessHover: green.GREEN80,
|
|
299
|
-
surfaceSuccessInverseDefault: green.
|
|
300
|
-
surfaceSuccessInverseHover: green.
|
|
301
|
-
surfaceSuccessInversePressed: green.
|
|
299
|
+
surfaceSuccessInverseDefault: green.GREEN5,
|
|
300
|
+
surfaceSuccessInverseHover: green.GREEN10,
|
|
301
|
+
surfaceSuccessInversePressed: green.GREEN20,
|
|
302
302
|
surfaceSuccessPressed: green.GREEN_STATUS,
|
|
303
303
|
surfaceWarningDefault: yellow.YELLOW100,
|
|
304
304
|
surfaceWarningDisabled: ink.INK10,
|
|
@@ -308,19 +308,19 @@ var ref = {
|
|
|
308
308
|
surfaceWarningInversePressed: yellow.YELLOW40,
|
|
309
309
|
surfaceWarningPressed: yellow.YELLOW120,
|
|
310
310
|
textDefault: ink.INK100,
|
|
311
|
-
textDisabled: ink.
|
|
311
|
+
textDisabled: ink.INK40,
|
|
312
312
|
textPlaceholder: ink.INK40,
|
|
313
313
|
textSecondary: ink.INK60,
|
|
314
314
|
textBrandDefault: blue.BLUE100,
|
|
315
|
-
textBrandDisabled: ink.
|
|
315
|
+
textBrandDisabled: ink.INK40,
|
|
316
316
|
textBrandHovered: blue.BLUE80,
|
|
317
317
|
textBrandPressed: blue.BLUE120,
|
|
318
318
|
textCriticalDefault: red.RED100,
|
|
319
|
-
textCriticalDisabled: ink.
|
|
319
|
+
textCriticalDisabled: ink.INK40,
|
|
320
320
|
textCriticalHovered: red.RED80,
|
|
321
321
|
textCriticalPressed: red.RED_STATUS,
|
|
322
322
|
textErrorDefault: red.RED100,
|
|
323
|
-
textErrorDisabled: ink.
|
|
323
|
+
textErrorDisabled: ink.INK40,
|
|
324
324
|
textErrorHovered: red.RED80,
|
|
325
325
|
textErrorPressed: red.RED_STATUS,
|
|
326
326
|
textInfoDefault: blue.BLUE100,
|
|
@@ -328,7 +328,7 @@ var ref = {
|
|
|
328
328
|
textInfoHovered: blue.BLUE80,
|
|
329
329
|
textInfoPressed: blue.BLUE120,
|
|
330
330
|
textLinkDefault: blue.BLUE100,
|
|
331
|
-
textLinkDisabled: ink.
|
|
331
|
+
textLinkDisabled: ink.INK40,
|
|
332
332
|
textLinkHovered: blue.BLUE80,
|
|
333
333
|
textLinkPressed: blue.BLUE120,
|
|
334
334
|
textLinkVisitedDefault: purple.PURPLE100,
|
|
@@ -340,11 +340,11 @@ var ref = {
|
|
|
340
340
|
textOnFillHovered: white.WHITE80,
|
|
341
341
|
textOnFillPressed: white.WHITE80,
|
|
342
342
|
textSuccessDefault: green.GREEN100,
|
|
343
|
-
textSuccessDisabled: ink.
|
|
343
|
+
textSuccessDisabled: ink.INK40,
|
|
344
344
|
textSuccessHovered: green.GREEN80,
|
|
345
345
|
textSuccessPressed: green.GREEN_STATUS,
|
|
346
346
|
textWarningDefault: yellow.YELLOW100,
|
|
347
|
-
textWarningDisabled: ink.
|
|
347
|
+
textWarningDisabled: ink.INK40,
|
|
348
348
|
textWarningHovered: yellow.YELLOW80,
|
|
349
349
|
textWarningPressed: yellow.YELLOW_STATUS,
|
|
350
350
|
selectBackgroundDisabled: white.WHITE40,
|
|
@@ -400,8 +400,8 @@ var ref = {
|
|
|
400
400
|
surfaceBrandDisabled: ink.INK10,
|
|
401
401
|
surfaceBrandHover: blue.BLUE80,
|
|
402
402
|
surfaceBrandInverseDefault: blue.BLUE5,
|
|
403
|
-
surfaceBrandInverseHover: blue.
|
|
404
|
-
surfaceBrandInversePressed: blue.
|
|
403
|
+
surfaceBrandInverseHover: blue.BLUE10,
|
|
404
|
+
surfaceBrandInversePressed: blue.BLUE20,
|
|
405
405
|
surfaceBrandPressed: blue.BLUE120,
|
|
406
406
|
surfaceCriticalDefault: red.RED100,
|
|
407
407
|
surfaceCriticalDisabled: ink.INK10,
|
|
@@ -438,9 +438,9 @@ var ref = {
|
|
|
438
438
|
surfaceSuccessDefault: green.GREEN100,
|
|
439
439
|
surfaceSuccessDisabled: ink.INK10,
|
|
440
440
|
surfaceSuccessHover: green.GREEN80,
|
|
441
|
-
surfaceSuccessInverseDefault: green.
|
|
442
|
-
surfaceSuccessInverseHover: green.
|
|
443
|
-
surfaceSuccessInversePressed: green.
|
|
441
|
+
surfaceSuccessInverseDefault: green.GREEN5,
|
|
442
|
+
surfaceSuccessInverseHover: green.GREEN10,
|
|
443
|
+
surfaceSuccessInversePressed: green.GREEN20,
|
|
444
444
|
surfaceSuccessPressed: green.GREEN_STATUS,
|
|
445
445
|
surfaceWarningDefault: yellow.YELLOW100,
|
|
446
446
|
surfaceWarningDisabled: ink.INK10,
|
|
@@ -450,19 +450,19 @@ var ref = {
|
|
|
450
450
|
surfaceWarningInversePressed: yellow.YELLOW40,
|
|
451
451
|
surfaceWarningPressed: yellow.YELLOW120,
|
|
452
452
|
textDefault: ink.INK100,
|
|
453
|
-
textDisabled: ink.
|
|
453
|
+
textDisabled: ink.INK40,
|
|
454
454
|
textPlaceholder: ink.INK40,
|
|
455
455
|
textSecondary: ink.INK60,
|
|
456
456
|
textBrandDefault: blue.BLUE100,
|
|
457
|
-
textBrandDisabled: ink.
|
|
457
|
+
textBrandDisabled: ink.INK40,
|
|
458
458
|
textBrandHovered: blue.BLUE80,
|
|
459
459
|
textBrandPressed: blue.BLUE120,
|
|
460
460
|
textCriticalDefault: red.RED100,
|
|
461
|
-
textCriticalDisabled: ink.
|
|
461
|
+
textCriticalDisabled: ink.INK40,
|
|
462
462
|
textCriticalHovered: red.RED80,
|
|
463
463
|
textCriticalPressed: red.RED_STATUS,
|
|
464
464
|
textErrorDefault: red.RED100,
|
|
465
|
-
textErrorDisabled: ink.
|
|
465
|
+
textErrorDisabled: ink.INK40,
|
|
466
466
|
textErrorHovered: red.RED80,
|
|
467
467
|
textErrorPressed: red.RED_STATUS,
|
|
468
468
|
textInfoDefault: blue.BLUE100,
|
|
@@ -470,7 +470,7 @@ var ref = {
|
|
|
470
470
|
textInfoHovered: blue.BLUE80,
|
|
471
471
|
textInfoPressed: blue.BLUE120,
|
|
472
472
|
textLinkDefault: blue.BLUE100,
|
|
473
|
-
textLinkDisabled: ink.
|
|
473
|
+
textLinkDisabled: ink.INK40,
|
|
474
474
|
textLinkHovered: blue.BLUE80,
|
|
475
475
|
textLinkPressed: blue.BLUE120,
|
|
476
476
|
textLinkVisitedDefault: purple.PURPLE100,
|
|
@@ -482,11 +482,11 @@ var ref = {
|
|
|
482
482
|
textOnFillHovered: white.WHITE80,
|
|
483
483
|
textOnFillPressed: white.WHITE80,
|
|
484
484
|
textSuccessDefault: green.GREEN100,
|
|
485
|
-
textSuccessDisabled: ink.
|
|
485
|
+
textSuccessDisabled: ink.INK40,
|
|
486
486
|
textSuccessHovered: green.GREEN80,
|
|
487
487
|
textSuccessPressed: green.GREEN_STATUS,
|
|
488
488
|
textWarningDefault: yellow.YELLOW100,
|
|
489
|
-
textWarningDisabled: ink.
|
|
489
|
+
textWarningDisabled: ink.INK40,
|
|
490
490
|
textWarningHovered: yellow.YELLOW80,
|
|
491
491
|
textWarningPressed: yellow.YELLOW_STATUS,
|
|
492
492
|
selectBackgroundDisabled: white.WHITE40,
|
|
@@ -1167,8 +1167,8 @@ var LightTheme = {
|
|
|
1167
1167
|
surfaceBrandDisabled: ink.INK10,
|
|
1168
1168
|
surfaceBrandHover: blue.BLUE80,
|
|
1169
1169
|
surfaceBrandInverseDefault: blue.BLUE5,
|
|
1170
|
-
surfaceBrandInverseHover: blue.
|
|
1171
|
-
surfaceBrandInversePressed: blue.
|
|
1170
|
+
surfaceBrandInverseHover: blue.BLUE10,
|
|
1171
|
+
surfaceBrandInversePressed: blue.BLUE20,
|
|
1172
1172
|
surfaceBrandPressed: blue.BLUE120,
|
|
1173
1173
|
surfaceCriticalDefault: red.RED100,
|
|
1174
1174
|
surfaceCriticalDisabled: ink.INK10,
|
|
@@ -1205,9 +1205,9 @@ var LightTheme = {
|
|
|
1205
1205
|
surfaceSuccessDefault: green.GREEN100,
|
|
1206
1206
|
surfaceSuccessDisabled: ink.INK10,
|
|
1207
1207
|
surfaceSuccessHover: green.GREEN80,
|
|
1208
|
-
surfaceSuccessInverseDefault: green.
|
|
1209
|
-
surfaceSuccessInverseHover: green.
|
|
1210
|
-
surfaceSuccessInversePressed: green.
|
|
1208
|
+
surfaceSuccessInverseDefault: green.GREEN5,
|
|
1209
|
+
surfaceSuccessInverseHover: green.GREEN10,
|
|
1210
|
+
surfaceSuccessInversePressed: green.GREEN20,
|
|
1211
1211
|
surfaceSuccessPressed: green.GREEN_STATUS,
|
|
1212
1212
|
surfaceWarningDefault: yellow.YELLOW100,
|
|
1213
1213
|
surfaceWarningDisabled: ink.INK10,
|
|
@@ -1217,19 +1217,19 @@ var LightTheme = {
|
|
|
1217
1217
|
surfaceWarningInversePressed: yellow.YELLOW40,
|
|
1218
1218
|
surfaceWarningPressed: yellow.YELLOW120,
|
|
1219
1219
|
textDefault: ink.INK100,
|
|
1220
|
-
textDisabled: ink.
|
|
1220
|
+
textDisabled: ink.INK40,
|
|
1221
1221
|
textPlaceholder: ink.INK40,
|
|
1222
1222
|
textSecondary: ink.INK60,
|
|
1223
1223
|
textBrandDefault: blue.BLUE100,
|
|
1224
|
-
textBrandDisabled: ink.
|
|
1224
|
+
textBrandDisabled: ink.INK40,
|
|
1225
1225
|
textBrandHovered: blue.BLUE80,
|
|
1226
1226
|
textBrandPressed: blue.BLUE120,
|
|
1227
1227
|
textCriticalDefault: red.RED100,
|
|
1228
|
-
textCriticalDisabled: ink.
|
|
1228
|
+
textCriticalDisabled: ink.INK40,
|
|
1229
1229
|
textCriticalHovered: red.RED80,
|
|
1230
1230
|
textCriticalPressed: red.RED_STATUS,
|
|
1231
1231
|
textErrorDefault: red.RED100,
|
|
1232
|
-
textErrorDisabled: ink.
|
|
1232
|
+
textErrorDisabled: ink.INK40,
|
|
1233
1233
|
textErrorHovered: red.RED80,
|
|
1234
1234
|
textErrorPressed: red.RED_STATUS,
|
|
1235
1235
|
textInfoDefault: blue.BLUE100,
|
|
@@ -1237,7 +1237,7 @@ var LightTheme = {
|
|
|
1237
1237
|
textInfoHovered: blue.BLUE80,
|
|
1238
1238
|
textInfoPressed: blue.BLUE120,
|
|
1239
1239
|
textLinkDefault: blue.BLUE100,
|
|
1240
|
-
textLinkDisabled: ink.
|
|
1240
|
+
textLinkDisabled: ink.INK40,
|
|
1241
1241
|
textLinkHovered: blue.BLUE80,
|
|
1242
1242
|
textLinkPressed: blue.BLUE120,
|
|
1243
1243
|
textLinkVisitedDefault: purple.PURPLE100,
|
|
@@ -1249,11 +1249,11 @@ var LightTheme = {
|
|
|
1249
1249
|
textOnFillHovered: white.WHITE80,
|
|
1250
1250
|
textOnFillPressed: white.WHITE80,
|
|
1251
1251
|
textSuccessDefault: green.GREEN100,
|
|
1252
|
-
textSuccessDisabled: ink.
|
|
1252
|
+
textSuccessDisabled: ink.INK40,
|
|
1253
1253
|
textSuccessHovered: green.GREEN80,
|
|
1254
1254
|
textSuccessPressed: green.GREEN_STATUS,
|
|
1255
1255
|
textWarningDefault: yellow.YELLOW100,
|
|
1256
|
-
textWarningDisabled: ink.
|
|
1256
|
+
textWarningDisabled: ink.INK40,
|
|
1257
1257
|
textWarningHovered: yellow.YELLOW80,
|
|
1258
1258
|
textWarningPressed: yellow.YELLOW_STATUS,
|
|
1259
1259
|
selectBackgroundDisabled: white.WHITE40,
|
|
@@ -1313,8 +1313,8 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
|
|
|
1313
1313
|
surfaceBrandDisabled: ink.INK10,
|
|
1314
1314
|
surfaceBrandHover: blue.BLUE80,
|
|
1315
1315
|
surfaceBrandInverseDefault: blue.BLUE5,
|
|
1316
|
-
surfaceBrandInverseHover: blue.
|
|
1317
|
-
surfaceBrandInversePressed: blue.
|
|
1316
|
+
surfaceBrandInverseHover: blue.BLUE10,
|
|
1317
|
+
surfaceBrandInversePressed: blue.BLUE20,
|
|
1318
1318
|
surfaceBrandPressed: blue.BLUE120,
|
|
1319
1319
|
surfaceCriticalDefault: red.RED100,
|
|
1320
1320
|
surfaceCriticalDisabled: ink.INK10,
|
|
@@ -1351,9 +1351,9 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
|
|
|
1351
1351
|
surfaceSuccessDefault: green.GREEN100,
|
|
1352
1352
|
surfaceSuccessDisabled: ink.INK10,
|
|
1353
1353
|
surfaceSuccessHover: green.GREEN80,
|
|
1354
|
-
surfaceSuccessInverseDefault: green.
|
|
1355
|
-
surfaceSuccessInverseHover: green.
|
|
1356
|
-
surfaceSuccessInversePressed: green.
|
|
1354
|
+
surfaceSuccessInverseDefault: green.GREEN5,
|
|
1355
|
+
surfaceSuccessInverseHover: green.GREEN10,
|
|
1356
|
+
surfaceSuccessInversePressed: green.GREEN20,
|
|
1357
1357
|
surfaceSuccessPressed: green.GREEN_STATUS,
|
|
1358
1358
|
surfaceWarningDefault: yellow.YELLOW100,
|
|
1359
1359
|
surfaceWarningDisabled: ink.INK10,
|
|
@@ -1363,19 +1363,19 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
|
|
|
1363
1363
|
surfaceWarningInversePressed: yellow.YELLOW40,
|
|
1364
1364
|
surfaceWarningPressed: yellow.YELLOW120,
|
|
1365
1365
|
textDefault: ink.INK100,
|
|
1366
|
-
textDisabled: ink.
|
|
1366
|
+
textDisabled: ink.INK40,
|
|
1367
1367
|
textPlaceholder: ink.INK40,
|
|
1368
1368
|
textSecondary: ink.INK60,
|
|
1369
1369
|
textBrandDefault: blue.BLUE100,
|
|
1370
|
-
textBrandDisabled: ink.
|
|
1370
|
+
textBrandDisabled: ink.INK40,
|
|
1371
1371
|
textBrandHovered: blue.BLUE80,
|
|
1372
1372
|
textBrandPressed: blue.BLUE120,
|
|
1373
1373
|
textCriticalDefault: red.RED100,
|
|
1374
|
-
textCriticalDisabled: ink.
|
|
1374
|
+
textCriticalDisabled: ink.INK40,
|
|
1375
1375
|
textCriticalHovered: red.RED80,
|
|
1376
1376
|
textCriticalPressed: red.RED_STATUS,
|
|
1377
1377
|
textErrorDefault: red.RED100,
|
|
1378
|
-
textErrorDisabled: ink.
|
|
1378
|
+
textErrorDisabled: ink.INK40,
|
|
1379
1379
|
textErrorHovered: red.RED80,
|
|
1380
1380
|
textErrorPressed: red.RED_STATUS,
|
|
1381
1381
|
textInfoDefault: blue.BLUE100,
|
|
@@ -1383,7 +1383,7 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
|
|
|
1383
1383
|
textInfoHovered: blue.BLUE80,
|
|
1384
1384
|
textInfoPressed: blue.BLUE120,
|
|
1385
1385
|
textLinkDefault: blue.BLUE100,
|
|
1386
|
-
textLinkDisabled: ink.
|
|
1386
|
+
textLinkDisabled: ink.INK40,
|
|
1387
1387
|
textLinkHovered: blue.BLUE80,
|
|
1388
1388
|
textLinkPressed: blue.BLUE120,
|
|
1389
1389
|
textLinkVisitedDefault: purple.PURPLE100,
|
|
@@ -1395,11 +1395,11 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
|
|
|
1395
1395
|
textOnFillHovered: white.WHITE80,
|
|
1396
1396
|
textOnFillPressed: white.WHITE80,
|
|
1397
1397
|
textSuccessDefault: green.GREEN100,
|
|
1398
|
-
textSuccessDisabled: ink.
|
|
1398
|
+
textSuccessDisabled: ink.INK40,
|
|
1399
1399
|
textSuccessHovered: green.GREEN80,
|
|
1400
1400
|
textSuccessPressed: green.GREEN_STATUS,
|
|
1401
1401
|
textWarningDefault: yellow.YELLOW100,
|
|
1402
|
-
textWarningDisabled: ink.
|
|
1402
|
+
textWarningDisabled: ink.INK40,
|
|
1403
1403
|
textWarningHovered: yellow.YELLOW80,
|
|
1404
1404
|
textWarningPressed: yellow.YELLOW_STATUS,
|
|
1405
1405
|
selectBackgroundDisabled: white.WHITE40,
|
|
@@ -2712,8 +2712,8 @@ var styles$d = StyleSheet.create({
|
|
|
2712
2712
|
});
|
|
2713
2713
|
|
|
2714
2714
|
var Spacer = function (_a) {
|
|
2715
|
-
var style = _a.style, _b = _a.width, width = _b === void 0 ? CONSTANTS.SPACE_16 : _b, _c = _a.height, height = _c === void 0 ? CONSTANTS.SPACE_12 : _c;
|
|
2716
|
-
return React__default.createElement(View, { width: width, height: height, style: [style] });
|
|
2715
|
+
var style = _a.style, _b = _a.width, width = _b === void 0 ? CONSTANTS.SPACE_16 : _b, _c = _a.height, height = _c === void 0 ? CONSTANTS.SPACE_12 : _c, backgroundColor = _a.backgroundColor;
|
|
2716
|
+
return (React__default.createElement(View, { backgroundColor: backgroundColor || "transparent", width: width, height: height, style: [style] }));
|
|
2717
2717
|
};
|
|
2718
2718
|
|
|
2719
2719
|
Dimensions.get("window").height;
|
|
@@ -6680,7 +6680,7 @@ var Checkbox = function (_a) {
|
|
|
6680
6680
|
React__default.createElement(Text$1, { color: colors.textDefault, style: [
|
|
6681
6681
|
styles$4.text14,
|
|
6682
6682
|
disabled && {
|
|
6683
|
-
color: colors.
|
|
6683
|
+
color: colors.textDisabled,
|
|
6684
6684
|
},
|
|
6685
6685
|
textStyle,
|
|
6686
6686
|
] }, content))));
|