sapo-components-ui-rn 1.0.22 → 1.0.24

package/dist/assets/icon-close.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 6.40958L13.4102 12.0004L19 17.5902L17.5898 19.0004L12 13.4096L6.41016 19.0004L5 17.5902L10.5898 12.0004L5 6.40958L6.41016 5.0004L12 10.5902L17.5898 5.0004L19 6.40958Z" fill="#0088FF"/>
+</svg>

package/dist/assets/svg/icon-close.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 6.40958L13.4102 12.0004L19 17.5902L17.5898 19.0004L12 13.4096L6.41016 19.0004L5 17.5902L10.5898 12.0004L5 6.40958L6.41016 5.0004L12 10.5902L17.5898 5.0004L19 6.40958Z" fill="#0088FF"/>
+</svg>

package/dist/components/ChipBar/index.d.ts

@@ -11,6 +11,8 @@ interface ChipBarProps {
     rightIcon?: React.ReactNode;
     badge?: number;
     isActive?: boolean;
+    ellipsizeMode?: "head" | "middle" | "tail" | "clip";
+    numberOfLines?: number;
 }
-declare const ChipBar: ({ style, borderRadius, title, textStyle, onPress, disabled, leftIcon, rightIcon, badge, isActive, }: ChipBarProps) => React.JSX.Element;
+declare const ChipBar: ({ style, borderRadius, title, textStyle, onPress, disabled, leftIcon, rightIcon, badge, isActive, ellipsizeMode, numberOfLines, }: ChipBarProps) => React.JSX.Element;
 export default ChipBar;

package/dist/components/FloatingButton/index.d.ts

@@ -12,6 +12,8 @@ export interface FloatingButtonProps {
     backgroundColor?: string;
     top?: number;
     right?: number;
+    left?: number;
+    bottom?: number;
 }
 declare const _default: React.MemoExoticComponent<React.ComponentType<FloatingButtonProps>>;
 export default _default;

package/dist/components/Icon/index.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { StyleProp, TextStyle } from "react-native";
 export type IconType = "FontAwesome" | "Image" | "MaterialIcons" | "Feather" | "MaterialCommunityIcons" | "Svg";
 export interface IconProps {
-    name: "IconCheckboxActive" | "IconCheckbox" | "IconRadio" | "IconRadioActive" | "IconRadioDisable" | "IconArrowDown" | "IconClearText" | "IconSearch";
+    name: "IconCheckboxActive" | "IconCheckbox" | "IconRadio" | "IconRadioActive" | "IconRadioDisable" | "IconArrowDown" | "IconClearText" | "IconSearch" | "IconClose";
     backgroundColor?: string;
     size?: number;
     color?: string;

package/dist/components/Tag/index.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { StyleProp, ViewStyle, TextStyle } from "react-native";
+interface TagProps {
+    style?: StyleProp<ViewStyle>;
+    title: string;
+    borderRadius?: number;
+    onPress?: (val?: any) => void;
+    textStyle?: StyleProp<TextStyle>;
+    disabled?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    isActive?: boolean;
+    ellipsizeMode?: "head" | "middle" | "tail" | "clip";
+    numberOfLines?: number;
+    hideRightIcon?: boolean;
+}
+declare const Tag: ({ style, borderRadius, title, textStyle, onPress, disabled, leftIcon, rightIcon, isActive, ellipsizeMode, numberOfLines, hideRightIcon, }: TagProps) => React.JSX.Element;
+export default Tag;

package/dist/icons/IconClose.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { SvgProps } from "react-native-svg";
+declare const IconClose: (props: SvgProps) => React.JSX.Element;
+export default IconClose;

package/dist/index.esm.js

@@ -219,12 +219,12 @@ var ref = {
         dark: {
             colors: {
                 primary: blue.BLUE100,
-                background: ink.INK100,
-                card: white.WHITE100,
-                text: white.WHITE100,
-                border: ink.INK10,
+                background: white.WHITE100,
+                card: ink.INK100,
+                text: ink.INK100,
+                border: ink.INK40,
                 gray: ink.INK60,
-                backgroundLight: ink.INK80,
+                backgroundLight: ink.INK10,
                 //new theme colors
                 backgroundPrimary: ink.INK5,
                 backgroundSecondary: white.WHITE100,
@@ -238,7 +238,7 @@ var ref = {
                 borderPrimaryDisabled: ink.INK10,
                 borderPrimaryHovered: ink.INK20,
                 borderPrimaryInverseDefault: blue.BLUE100,
-                borderPrimaryPressed: blue.BLUE100,
+                borderPrimaryPressed: ink.INK20,
                 borderSuccessDefault: green.GREEN100,
                 borderWarningDefault: yellow.YELLOW100,
                 iconBrandDefault: blue.BLUE100,
@@ -257,7 +257,7 @@ var ref = {
                 surfaceBrandDefault: blue.BLUE100,
                 surfaceBrandDisabled: ink.INK10,
                 surfaceBrandHover: blue.BLUE80,
-                surfaceBrandInverseDefault: blue.BLUE10,
+                surfaceBrandInverseDefault: blue.BLUE5,
                 surfaceBrandInverseHover: blue.BLUE20,
                 surfaceBrandInversePressed: blue.BLUE40,
                 surfaceBrandPressed: blue.BLUE120,
@@ -283,14 +283,14 @@ var ref = {
                 surfaceInfoInversePressed: blue.BLUE40,
                 surfaceInfoPressed: blue.BLUE120,
                 surfacePrimaryDefault: white.WHITE100,
-                surfacePrimaryDisabled: ink.INK10,
+                surfacePrimaryDisabled: ink.INK5,
                 surfacePrimaryHover: ink.INK5,
                 surfacePrimaryInverseDefault: ink.INK80,
                 surfacePrimaryInverseHover: ink.INK60,
                 surfacePrimaryInversePressed: ink.INK40,
                 surfacePrimaryPressed: ink.INK10,
                 surfaceSecondaryDefault: ink.INK5,
-                surfaceSecondaryDisabled: ink.INK10,
+                surfaceSecondaryDisabled: ink.INK5,
                 surfaceSecondaryHover: ink.INK10,
                 surfaceSecondaryPressed: ink.INK20,
                 surfaceSuccessDefault: green.GREEN100,
@@ -349,6 +349,13 @@ var ref = {
                 textWarningPressed: yellow.YELLOW_STATUS,
                 selectBackgroundDisabled: white.WHITE40,
                 selectIconDisabled: white.WHITE40,
+                borderCriticalInverseDefault: red.RED40,
+                borderCriticalInverseHover: red.RED20,
+                borderCriticalInversePressed: red.RED60,
+                borderErrorInverseDefault: red.RED40,
+                borderPrimaryFocused: blue.BLUE100,
+                borderWarningInverseDefault: yellow.YELLOW40,
+                borderSuccessInverseDefault: green.GREEN40,
             },
         },
         light: {
@@ -373,7 +380,7 @@ var ref = {
                 borderPrimaryDisabled: ink.INK10,
                 borderPrimaryHovered: ink.INK20,
                 borderPrimaryInverseDefault: blue.BLUE100,
-                borderPrimaryPressed: blue.BLUE100,
+                borderPrimaryPressed: ink.INK20,
                 borderSuccessDefault: green.GREEN100,
                 borderWarningDefault: yellow.YELLOW100,
                 iconBrandDefault: blue.BLUE100,
@@ -392,7 +399,7 @@ var ref = {
                 surfaceBrandDefault: blue.BLUE100,
                 surfaceBrandDisabled: ink.INK10,
                 surfaceBrandHover: blue.BLUE80,
-                surfaceBrandInverseDefault: blue.BLUE10,
+                surfaceBrandInverseDefault: blue.BLUE5,
                 surfaceBrandInverseHover: blue.BLUE20,
                 surfaceBrandInversePressed: blue.BLUE40,
                 surfaceBrandPressed: blue.BLUE120,
@@ -484,6 +491,13 @@ var ref = {
                 textWarningPressed: yellow.YELLOW_STATUS,
                 selectBackgroundDisabled: white.WHITE40,
                 selectIconDisabled: white.WHITE40,
+                borderCriticalInverseDefault: red.RED40,
+                borderCriticalInverseHover: red.RED20,
+                borderCriticalInversePressed: red.RED60,
+                borderErrorInverseDefault: red.RED40,
+                borderPrimaryFocused: blue.BLUE100,
+                borderWarningInverseDefault: yellow.YELLOW40,
+                borderSuccessInverseDefault: green.GREEN40,
             },
         },
     },
@@ -544,6 +558,7 @@ var CONSTANTS = {
     BUTTON_HEIGHT: 48,
     BUTTON_HEIGHT_SMALL: 40,
     RADIO_BUTTON_HEIGHT: 20,
+    BUTTON_ICON: 36,
     SPACE_0: 0,
     SPACE_2: 2,
     SPACE_4: 4,
@@ -1119,14 +1134,6 @@ var LightTheme = {
         border: ink.INK40,
         gray: ink.INK60,
         backgroundLight: ink.INK10,
-        elevation: {
-            level0: "transparent",
-            level1: "rgb(247, 243, 249)",
-            level2: "rgb(243, 237, 246)",
-            level3: "rgb(238, 232, 244)",
-            level4: "rgb(236, 230, 243)",
-            level5: "rgb(233, 227, 241)",
-        },
         //new theme colors
         backgroundPrimary: ink.INK5,
         backgroundSecondary: white.WHITE100,
@@ -1159,7 +1166,7 @@ var LightTheme = {
         surfaceBrandDefault: blue.BLUE100,
         surfaceBrandDisabled: ink.INK10,
         surfaceBrandHover: blue.BLUE80,
-        surfaceBrandInverseDefault: blue.BLUE10,
+        surfaceBrandInverseDefault: blue.BLUE5,
         surfaceBrandInverseHover: blue.BLUE20,
         surfaceBrandInversePressed: blue.BLUE40,
         surfaceBrandPressed: blue.BLUE120,
@@ -1273,14 +1280,6 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
         border: ink.INK40,
         gray: ink.INK60,
         backgroundLight: ink.INK10,
-        elevation: {
-            level0: "transparent",
-            level1: "rgb(37, 35, 42)",
-            level2: "rgb(44, 40, 49)",
-            level3: "rgb(49, 44, 56)",
-            level4: "rgb(51, 46, 58)",
-            level5: "rgb(52, 49, 63)",
-        },
         //new theme colors
         backgroundPrimary: ink.INK5,
         backgroundSecondary: white.WHITE100,
@@ -1313,7 +1312,7 @@ var DarkTheme = __assign(__assign({}, LightTheme), { dark: true, mode: "adaptive
         surfaceBrandDefault: blue.BLUE100,
         surfaceBrandDisabled: ink.INK10,
         surfaceBrandHover: blue.BLUE80,
-        surfaceBrandInverseDefault: blue.BLUE10,
+        surfaceBrandInverseDefault: blue.BLUE5,
         surfaceBrandInverseHover: blue.BLUE20,
         surfaceBrandInversePressed: blue.BLUE40,
         surfaceBrandPressed: blue.BLUE120,
@@ -1921,7 +1920,9 @@ var styles$g = StyleSheet.create({
 });
 
 var ViewCustom = function (_a) {
-    var row = _a.row, full = _a.full, justifyCenter = _a.justifyCenter, justifyBetween = _a.justifyBetween, alignCenter = _a.alignCenter, center = _a.center, color = _a.color, backgroundColor = _a.backgroundColor, width = _a.width, height = _a.height, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, marginHorizontal = _a.marginHorizontal, marginVertical = _a.marginVertical, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight, paddingTop = _a.paddingTop, alignEnd = _a.alignEnd, wrap = _a.wrap, borderBottomWidth = _a.borderBottomWidth, borderBottomColor = _a.borderBottomColor, borderRadius = _a.borderRadius, borderWidth = _a.borderWidth, borderColor = _a.borderColor, style = _a.style, onPress = _a.onPress, activeOpacity = _a.activeOpacity, children = _a.children, disabled = _a.disabled, paddingBottom = _a.paddingBottom;
+    var row = _a.row, full = _a.full, justifyCenter = _a.justifyCenter, justifyBetween = _a.justifyBetween, alignCenter = _a.alignCenter, center = _a.center, color = _a.color, backgroundColor = _a.backgroundColor, width = _a.width, height = _a.height, padding = _a.padding, paddingHorizontal = _a.paddingHorizontal, paddingVertical = _a.paddingVertical, marginHorizontal = _a.marginHorizontal, marginVertical = _a.marginVertical, paddingLeft = _a.paddingLeft, paddingRight = _a.paddingRight, paddingTop = _a.paddingTop, alignEnd = _a.alignEnd, wrap = _a.wrap, borderBottomWidth = _a.borderBottomWidth, borderBottomColor = _a.borderBottomColor, borderRadius = _a.borderRadius, borderWidth = _a.borderWidth, borderColor = _a.borderColor, style = _a.style, onPress = _a.onPress, _b = _a.activeOpacity, activeOpacity = _b === void 0 ? 0.8 : _b, children = _a.children, disabled = _a.disabled, paddingBottom = _a.paddingBottom;
+    var theme = useInternalTheme();
+    var colors = theme.colors;
     var getStyle = function () {
         var styleCustom = {};
         if (row) {
@@ -2007,7 +2008,11 @@ var ViewCustom = function (_a) {
     };
     var defaultStyle = getStyle();
     var Component = onPress ? TouchableOpacity : View$1;
-    return (React__default.createElement(Component, { activeOpacity: activeOpacity, onPress: onPress, disabled: disabled, style: [defaultStyle, style] }, children));
+    return (React__default.createElement(Component, { activeOpacity: activeOpacity, onPress: onPress, disabled: disabled, style: [
+            { backgroundColor: colors.backgroundPrimary },
+            defaultStyle,
+            style,
+        ] }, children));
 };
 var View = React__default.memo(ViewCustom);
 
@@ -2743,6 +2748,9 @@ var IconClearText = function (props) { return (React$3.createElement(Svg, __assi
 var IconSearch = function (props) { return (React$3.createElement(Svg, __assign({ width: 16, height: 16, viewBox: "0 0 16 16", fill: "none" }, props),
     React$3.createElement(Path, { d: "M15.7 14.3L11.5 10.1C11.3 9.9 11 9.8 10.7 9.8C11.5 8.8 12 7.4 12 6C12 2.7 9.3 0 6 0C2.7 0 0 2.7 0 6C0 9.3 2.7 12 6 12C7.4 12 8.8 11.5 9.8 10.6C9.8 10.9 9.8 11.2 10.1 11.4L14.3 15.6C14.5 15.8 14.8 15.9 15 15.9C15.2 15.9 15.5 15.8 15.7 15.6C16.1 15.3 16.1 14.7 15.7 14.3ZM6 10.5C3.5 10.5 1.5 8.5 1.5 6C1.5 3.5 3.5 1.5 6 1.5C8.5 1.5 10.5 3.5 10.5 6C10.5 8.5 8.5 10.5 6 10.5Z", fill: "currentColor" }))); };
 
+var IconClose = function (props) { return (React$3.createElement(Svg, __assign({ width: 24, height: 24, viewBox: "0 0 24 24", fill: "none" }, props),
+    React$3.createElement(Path, { d: "M19 6.40958L13.4102 12.0004L19 17.5902L17.5898 19.0004L12 13.4096L6.41016 19.0004L5 17.5902L10.5898 12.0004L5 6.40958L6.41016 5.0004L12 10.5902L17.5898 5.0004L19 6.40958Z", fill: "currentColor" }))); };
+
 var getIconComponent = function (type) {
     switch (type) {
         case "MaterialIcons":
@@ -2777,6 +2785,8 @@ var Icon = function (_a) {
                 return IconClearText;
             case "IconSearch":
                 return IconSearch;
+            case "IconClose":
+                return IconClose;
             default:
                 return IconCheckbox;
         }
@@ -6045,12 +6055,32 @@ var styles$8 = StyleSheet.create({
 });
 var index$2 = memoDeepEqual(ButtonIcon);
 
+Dimensions.get("window").height;
+Dimensions.get("window").width;
+var BUTTON_HEIGHT = 48;
+var BUTTON_HEIGHT_SMALL = 40;
+var SPACE_4 = 4;
+var SPACE_6 = 6;
+var SPACE_8 = 8;
+var SPACE_12 = 12;
+var SPACE_16 = 16;
+//MARK: Border radius
+var BORDER_RADIUS_6 = 6;
+//MARK: Border width
+StyleSheet.hairlineWidth; //0.3-0.5
+var BORDER_WIDTH_1 = 1;
+
 var FloatingButton = function (_a) {
-    var isLoading = _a.isLoading, disabled = _a.disabled, onPress = _a.onPress, style = _a.style, _b = _a.hiddenBackground, hiddenBackground = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? CONSTANTS.BUTTON_HEIGHT : _c, children = _a.children, backgroundColor = _a.backgroundColor, props = _a.props, _d = _a.top, top = _d === void 0 ? 0 : _d, _e = _a.right, right = _e === void 0 ? 0 : _e;
+    var isLoading = _a.isLoading, disabled = _a.disabled, onPress = _a.onPress, style = _a.style, _b = _a.hiddenBackground, hiddenBackground = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? BUTTON_HEIGHT : _c, children = _a.children, backgroundColor = _a.backgroundColor, props = _a.props, _d = _a.top, top = _d === void 0 ? 0 : _d, _e = _a.right, right = _e === void 0 ? 0 : _e, _f = _a.left, left = _f === void 0 ? 0 : _f, _g = _a.bottom, bottom = _g === void 0 ? 0 : _g;
     var colors = useInternalTheme().colors;
-    return (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, disabled: disabled || isLoading || !onPress, onPress: onPress },
-        React__default.createElement(View, __assign({ style: [
-                styles$7.btn,
+    return (React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || isLoading, style: [
+            styles$7.btn,
+            top > 0 && { top: top },
+            right > 0 && { right: right },
+            left > 0 && { left: left },
+            bottom > 0 && { bottom: bottom },
+        ] }),
+        React__default.createElement(View, __assign({ center: true, style: [
                 !hiddenBackground
                     ? {
                         backgroundColor: backgroundColor || colors.surfaceBrandDefault,
@@ -6062,8 +6092,6 @@ var FloatingButton = function (_a) {
                     width: size,
                     height: size,
                     borderRadius: size / 2,
-                    top: top,
-                    right: right,
                 },
                 disabled && {
                     borderWidth: 0,
@@ -6075,17 +6103,6 @@ var FloatingButton = function (_a) {
 var styles$7 = StyleSheet.create({
     btn: {
         position: "absolute",
-        justifyContent: "center",
-        alignItems: "center",
-        shadowColor: "#000",
-        shadowOffset: {
-            width: 0,
-            height: 2,
-        },
-        shadowOpacity: 0.25,
-        shadowRadius: 3.84,
-        elevation: 5,
-        zIndex: 99,
     },
 });
 var index$1 = memoDeepEqual(FloatingButton);
@@ -6446,21 +6463,6 @@ var Badge = function (_a) {
             React__default.createElement(Text$1, { size: 12, color: textColor || colors.textSecondary, style: textStyle }, value))));
 };
 
-Dimensions.get("window").height;
-Dimensions.get("window").width;
-var BUTTON_HEIGHT = 48;
-var BUTTON_HEIGHT_SMALL = 40;
-var SPACE_4 = 4;
-var SPACE_6 = 6;
-var SPACE_8 = 8;
-var SPACE_12 = 12;
-var SPACE_16 = 16;
-//MARK: Border radius
-var BORDER_RADIUS_6 = 6;
-//MARK: Border width
-StyleSheet.hairlineWidth; //0.3-0.5
-var BORDER_WIDTH_1 = 1;
-
 var containerStyles = StyleSheet.create({
     container: { flex: 1 },
     center: {
@@ -6596,10 +6598,10 @@ var styles$5 = StyleSheet.create(__assign(__assign({}, containerStyles), { conta
     } }));
 
 var ChipBar = function (_a) {
-    var style = _a.style, _b = _a.borderRadius, borderRadius = _b === void 0 ? CONSTANTS.BORDER_RADIUS_ROUNDED : _b, _c = _a.title, title = _c === void 0 ? "content" : _c, textStyle = _a.textStyle, onPress = _a.onPress, _d = _a.disabled, disabled = _d === void 0 ? false : _d, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _e = _a.badge, badge = _e === void 0 ? 0 : _e, _f = _a.isActive, isActive = _f === void 0 ? false : _f;
+    var style = _a.style, _b = _a.borderRadius, borderRadius = _b === void 0 ? CONSTANTS.BORDER_RADIUS_ROUNDED : _b, _c = _a.title, title = _c === void 0 ? "content" : _c, textStyle = _a.textStyle, onPress = _a.onPress, _d = _a.disabled, disabled = _d === void 0 ? false : _d, leftIcon = _a.leftIcon, rightIcon = _a.rightIcon, _e = _a.badge, badge = _e === void 0 ? 0 : _e, _f = _a.isActive, isActive = _f === void 0 ? false : _f, _g = _a.ellipsizeMode, ellipsizeMode = _g === void 0 ? "tail" : _g, _h = _a.numberOfLines, numberOfLines = _h === void 0 ? 1 : _h;
     var theme = useInternalTheme();
     var colors = theme.colors;
-    var _g = useState(isActive), active = _g[0], setActive = _g[1];
+    var _j = useState(isActive), active = _j[0], setActive = _j[1];
     var handlePressChipBar = useCallback(function () {
         setActive(!active);
         onPress === null || onPress === void 0 ? void 0 : onPress();
@@ -6619,7 +6621,7 @@ var ChipBar = function (_a) {
                 : colors.backgroundSecondary },
             leftIcon && React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_4 }, leftIcon),
             React__default.createElement(View, null,
-                React__default.createElement(Text$1, { color: active ? colors.textBrandDefault : colors.textDefault, style: [
+                React__default.createElement(Text$1, { numberOfLines: numberOfLines, ellipsizeMode: ellipsizeMode, color: active ? colors.textBrandDefault : colors.textDefault, style: [
                         styles$4.text14,
                         styles$4.textMedium,
                         disabled && {