sapo-components-ui-rn 1.1.7 → 1.1.9
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.esm.js +45 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +45 -1
- package/dist/index.js.map +1 -1
- package/dist/styles/themes/tokens.d.ts +24 -0
- package/dist/types.d.ts +6 -0
- package/package.json +1 -1
- package/src/components/Badge/index.tsx +23 -1
- package/src/styles/themes/DarkTheme.tsx +6 -0
- package/src/styles/themes/LightTheme.tsx +6 -0
- package/src/styles/themes/tokens.tsx +12 -0
- package/src/types.ts +6 -0
- package/src/types.tsx +6 -0
package/dist/index.esm.js
CHANGED
|
@@ -243,7 +243,13 @@ var ref = {
|
|
|
243
243
|
borderSuccessDefault: green.GREEN100,
|
|
244
244
|
borderWarningDefault: yellow.YELLOW100,
|
|
245
245
|
iconBrandDefault: blue.BLUE100,
|
|
246
|
+
iconBrandHover: blue.BLUE80,
|
|
247
|
+
iconBrandPressed: blue.BLUE120,
|
|
248
|
+
iconBrandDisabled: ink.INK20,
|
|
246
249
|
iconCriticalDefault: red.RED100,
|
|
250
|
+
iconCriticalHover: red.RED80,
|
|
251
|
+
iconCriticalPressed: red.RED_STATUS,
|
|
252
|
+
iconCriticalDisabled: ink.INK20,
|
|
247
253
|
iconErrorDefault: red.RED100,
|
|
248
254
|
iconInfoDefault: blue.BLUE100,
|
|
249
255
|
iconPrimaryDefault: ink.INK40,
|
|
@@ -388,7 +394,13 @@ var ref = {
|
|
|
388
394
|
borderSuccessDefault: green.GREEN100,
|
|
389
395
|
borderWarningDefault: yellow.YELLOW100,
|
|
390
396
|
iconBrandDefault: blue.BLUE100,
|
|
397
|
+
iconBrandHover: blue.BLUE80,
|
|
398
|
+
iconBrandPressed: blue.BLUE120,
|
|
399
|
+
iconBrandDisabled: ink.INK20,
|
|
391
400
|
iconCriticalDefault: red.RED100,
|
|
401
|
+
iconCriticalHover: red.RED80,
|
|
402
|
+
iconCriticalPressed: red.RED_STATUS,
|
|
403
|
+
iconCriticalDisabled: ink.INK20,
|
|
392
404
|
iconErrorDefault: red.RED100,
|
|
393
405
|
iconInfoDefault: blue.BLUE100,
|
|
394
406
|
iconPrimaryDefault: ink.INK40,
|
|
@@ -1294,7 +1306,13 @@ var LightTheme = {
|
|
|
1294
1306
|
borderSuccessDefault: green.GREEN100,
|
|
1295
1307
|
borderWarningDefault: yellow.YELLOW100,
|
|
1296
1308
|
iconBrandDefault: blue.BLUE100,
|
|
1309
|
+
iconBrandHover: blue.BLUE80,
|
|
1310
|
+
iconBrandPressed: blue.BLUE120,
|
|
1311
|
+
iconBrandDisabled: ink.INK20,
|
|
1297
1312
|
iconCriticalDefault: red.RED100,
|
|
1313
|
+
iconCriticalHover: red.RED80,
|
|
1314
|
+
iconCriticalPressed: red.RED_STATUS,
|
|
1315
|
+
iconCriticalDisabled: ink.INK20,
|
|
1298
1316
|
iconErrorDefault: red.RED100,
|
|
1299
1317
|
iconInfoDefault: blue.BLUE100,
|
|
1300
1318
|
iconPrimaryDefault: ink.INK40,
|
|
@@ -1443,7 +1461,13 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
|
|
|
1443
1461
|
borderSuccessDefault: green.GREEN100,
|
|
1444
1462
|
borderWarningDefault: yellow.YELLOW100,
|
|
1445
1463
|
iconBrandDefault: blue.BLUE100,
|
|
1464
|
+
iconBrandHover: blue.BLUE80,
|
|
1465
|
+
iconBrandPressed: blue.BLUE120,
|
|
1466
|
+
iconBrandDisabled: ink.INK20,
|
|
1446
1467
|
iconCriticalDefault: red.RED100,
|
|
1468
|
+
iconCriticalHover: red.RED80,
|
|
1469
|
+
iconCriticalPressed: red.RED_STATUS,
|
|
1470
|
+
iconCriticalDisabled: ink.INK20,
|
|
1447
1471
|
iconErrorDefault: red.RED100,
|
|
1448
1472
|
iconInfoDefault: blue.BLUE100,
|
|
1449
1473
|
iconPrimaryDefault: ink.INK40,
|
|
@@ -6846,6 +6870,26 @@ var Badge = React__default.memo(function (_a) {
|
|
|
6846
6870
|
return null;
|
|
6847
6871
|
return BADGE_CONFIGS.sizes[badgeSize];
|
|
6848
6872
|
}, [badgeSize]);
|
|
6873
|
+
var getColorProgress = useMemo(function () {
|
|
6874
|
+
var configs = {
|
|
6875
|
+
success: {
|
|
6876
|
+
color: colors.borderSuccessDefault,
|
|
6877
|
+
},
|
|
6878
|
+
error: {
|
|
6879
|
+
color: colors.borderErrorDefault,
|
|
6880
|
+
},
|
|
6881
|
+
info: {
|
|
6882
|
+
color: colors.iconPrimaryDefault,
|
|
6883
|
+
},
|
|
6884
|
+
warning: {
|
|
6885
|
+
color: colors.borderWarningDefault,
|
|
6886
|
+
},
|
|
6887
|
+
default: {
|
|
6888
|
+
color: colors.borderInfoDefault,
|
|
6889
|
+
},
|
|
6890
|
+
};
|
|
6891
|
+
return configs[type];
|
|
6892
|
+
}, [colors, type]);
|
|
6849
6893
|
var typeStyles = useMemo(function () {
|
|
6850
6894
|
var configs = {
|
|
6851
6895
|
success: {
|
|
@@ -6944,7 +6988,7 @@ var Badge = React__default.memo(function (_a) {
|
|
|
6944
6988
|
return (React__default.createElement(View, { row: true },
|
|
6945
6989
|
React__default.createElement(View, { row: true, center: true, borderRadius: 999, borderWidth: CONSTANTS.BORDER_WIDTH_1, style: [sizeStyles, typeStyles, style] },
|
|
6946
6990
|
leftIcon && React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_4 }, leftIcon),
|
|
6947
|
-
progressType !== "none" && (React__default.createElement(ProgressCircle, { progress: progressType, color:
|
|
6991
|
+
progressType !== "none" && (React__default.createElement(ProgressCircle, { progress: progressType, color: getColorProgress.color })),
|
|
6948
6992
|
React__default.createElement(View, { paddingLeft: progressType !== "none" ? CONSTANTS.SPACE_4 : 0 },
|
|
6949
6993
|
React__default.createElement(Text$1, { size: finalTextSize, color: textColor || textColorStyle, style: [styles$8.textMedium, textStyle] }, value)))));
|
|
6950
6994
|
});
|