sapo-components-ui-rn 1.1.97 → 1.1.99

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

@@ -26,6 +26,7 @@ export interface ButtonProps extends TouchableOpacityProps {
     type?: 'default' | 'text';
     critical?: boolean;
     width?: number;
+    testID?: string;
 }
-declare const _default: React.MemoExoticComponent<({ style, title, border, borderColor, isLoading, left, right, margin, textStyle, textProps, onPress, disabled, backgroundColor, textColor, textBold, mode, transparent, full, theme: themeOverrides, buttonSize, textSize, critical, width, type, ...props }: ButtonProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ style, title, border, borderColor, isLoading, left, right, margin, textStyle, textProps, onPress, disabled, backgroundColor, textColor, textBold, mode, transparent, full, theme: themeOverrides, buttonSize, textSize, critical, width, type, testID, accessibilityLabel, ...props }: ButtonProps) => React.JSX.Element>;
 export default _default;

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

@@ -14,6 +14,8 @@ export interface ButtonIconProps {
     borderColor?: string;
     mode?: "normal" | "small";
     testID?: string;
+    accessible?: boolean;
+    accessibilityLabel?: string;
 }
 declare const _default: React.MemoExoticComponent<React.ComponentType<ButtonIconProps>>;
 export default _default;

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

@@ -10,6 +10,8 @@ interface CheckboxProps {
     leftIcon?: React.ReactNode;
     checked?: boolean | "indeterminate";
     iconSize?: number;
+    accessible?: boolean;
+    accessibilityLabel?: string;
 }
-declare const Checkbox: ({ testID, style, content, textStyle, onPress, disabled, leftIcon, checked, iconSize, }: CheckboxProps) => React.JSX.Element;
+declare const Checkbox: ({ testID, style, content, textStyle, onPress, disabled, leftIcon, checked, iconSize, accessible, accessibilityLabel, }: CheckboxProps) => React.JSX.Element;
 export default Checkbox;

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

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

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

@@ -15,6 +15,8 @@ export interface FloatingButtonProps {
     left?: number;
     bottom?: number;
     testID?: string;
+    accessible?: boolean;
+    accessibilityLabel?: string;
 }
 declare const _default: React.MemoExoticComponent<React.ComponentType<FloatingButtonProps>>;
 export default _default;

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

@@ -11,6 +11,8 @@ export interface IconProps {
     tintColor?: string;
     animatedProps?: Record<string, unknown>;
     testID?: string;
+    accessible?: boolean;
+    accessibilityLabel?: string;
 }
 declare const _default: React.NamedExoticComponent<IconProps>;
 export default _default;

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

@@ -20,6 +20,7 @@ export interface NumberKeyboardProps {
     /** Callback khi đóng modal */
     onClose: () => void;
     keyboardStyle?: StyleProp<ViewStyle>;
+    testID?: string;
 }
 declare const _default: React.NamedExoticComponent<NumberKeyboardProps>;
 export default _default;

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

@@ -9,6 +9,8 @@ interface RadioButtonProps {
     disabled?: boolean;
     leftIcon?: React.ReactNode;
     checked?: boolean;
+    accessible?: boolean;
+    accessibilityLabel?: string;
 }
-declare const RadioButton: ({ testID, style, content, textStyle, onPress, disabled, leftIcon, checked, }: RadioButtonProps) => React.JSX.Element;
+declare const RadioButton: ({ testID, style, content, textStyle, onPress, disabled, leftIcon, checked, accessible, accessibilityLabel, }: RadioButtonProps) => React.JSX.Element;
 export default RadioButton;

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

@@ -1,4 +1,4 @@
 import React from "react";
 import { TouchableOpacityProps } from "react-native";
-declare const _default: React.MemoExoticComponent<({ children, style, onPress, ...rest }: TouchableOpacityProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ children, style, onPress, accessible, accessibilityRole, ...rest }: TouchableOpacityProps) => React.JSX.Element>;
 export default _default;

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

@@ -20,6 +20,9 @@ export interface SelectionFieldProps extends TouchableOpacityProps {
     theme?: ThemeProp;
     required?: boolean;
     height?: number;
+    testID?: string;
+    accessible?: boolean;
+    accessibilityLabel?: string;
 }
-declare const _default: React.MemoExoticComponent<({ style, content, label, error, borderColor, left, right, textStyle, labelStyle, textProps, onPress, disabled, textColor, labelColor, theme: themeOverrides, required, height, testID, ...props }: SelectionFieldProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ style, content, label, error, borderColor, left, right, textStyle, labelStyle, textProps, onPress, disabled, textColor, labelColor, theme: themeOverrides, required, height, testID, accessible, accessibilityLabel, ...props }: SelectionFieldProps) => React.JSX.Element>;
 export default _default;

package/dist/components/Switch/Switch.d.ts

@@ -14,6 +14,8 @@ export type Props = {
      */
     onValueChange?: (value: boolean) => void;
     testID?: string;
+    accessible?: boolean;
+    accessibilityLabel?: string;
 };
-declare const Switch: React.MemoExoticComponent<({ testID, value, disabled, onValueChange, size }: Props) => React.JSX.Element>;
+declare const Switch: React.MemoExoticComponent<({ testID, value, disabled, onValueChange, size, accessible, accessibilityLabel, }: Props) => React.JSX.Element>;
 export default Switch;

package/dist/components/TextInput/TextInputNumber.d.ts

@@ -24,6 +24,7 @@ export interface TextInputNumberProps extends TouchableOpacityProps {
     contentStyle?: StyleProp<TextStyle>;
     textErrorStyle?: StyleProp<TextStyle>;
     height?: number;
+    testID?: string;
 }
-declare const _default: React.MemoExoticComponent<({ style, value, label, textError, left, right, onChangeText, disabled, theme: themeOverrides, prefix, suffix, clearButton, maxValue, minValue, type, formatDecimal, required, labelStyle, contentStyle, textErrorStyle, height, keyboardStyle, ...props }: TextInputNumberProps) => React.JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ style, value, label, textError, left, right, onChangeText, disabled, theme: themeOverrides, prefix, suffix, clearButton, maxValue, minValue, type, formatDecimal, required, labelStyle, contentStyle, textErrorStyle, height, keyboardStyle, testID, ...props }: TextInputNumberProps) => React.JSX.Element>;
 export default _default;

package/dist/index.esm.js

@@ -1532,7 +1532,7 @@ var ViewCustom = forwardRef$1(function (_a, ref) {
 var View = React__default.memo(ViewCustom);
 
 var Switch = memo(function (_a) {
-    var testID = _a.testID, value = _a.value, disabled = _a.disabled, onValueChange = _a.onValueChange, _b = _a.size, size = _b === void 0 ? "normal" : _b;
+    var testID = _a.testID, value = _a.value, disabled = _a.disabled, onValueChange = _a.onValueChange, _b = _a.size, size = _b === void 0 ? "normal" : _b, _c = _a.accessible, accessible = _c === void 0 ? true : _c, accessibilityLabel = _a.accessibilityLabel;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var progress = useSharedValue(value ? 1 : 0);
@@ -1605,7 +1605,7 @@ var Switch = memo(function (_a) {
         }
     }, [size, colors]);
     return (React$3.createElement(View, { row: true },
-        React$3.createElement(TouchableOpacity, { testID: testID, activeOpacity: 1, onPress: handleSwitch, disabled: disabled, style: disabled ? { opacity: 0.6 } : {} },
+        React$3.createElement(TouchableOpacity, { testID: testID, accessible: accessible, accessibilityRole: "switch", accessibilityState: { checked: !!value, disabled: !!disabled }, accessibilityLabel: accessibilityLabel || testID || "switch", activeOpacity: 1, onPress: handleSwitch, disabled: disabled, style: disabled ? { opacity: 0.6 } : {} },
             React$3.createElement(Animated.View, { style: [styles$j.vSegment, backgroundColor, getSizeSwitch()] },
                 React$3.createElement(Animated.View, { style: [styles$j.animated, animatedStyle, getSizeCircle()] })))));
 });
@@ -5369,8 +5369,8 @@ var roundLayoutSize = function (size) {
 };
 
 var ScaleButton = function (_a) {
-    var children = _a.children; _a.style; var _b = _a.onPress, onPress = _b === void 0 ? function () { } : _b, rest = __rest(_a, ["children", "style", "onPress"]);
-    return (React__default.createElement(TouchableOpacity, __assign({}, rest, { onPress: onPress }), children));
+    var children = _a.children; _a.style; var _b = _a.onPress, onPress = _b === void 0 ? function () { } : _b, _c = _a.accessible, accessible = _c === void 0 ? true : _c, _d = _a.accessibilityRole, accessibilityRole = _d === void 0 ? "button" : _d, rest = __rest(_a, ["children", "style", "onPress", "accessible", "accessibilityRole"]);
+    return (React__default.createElement(TouchableOpacity, __assign({ accessible: accessible, accessibilityRole: accessibilityRole }, rest, { onPress: onPress }), children));
 };
 var ScaleButton$1 = React__default.memo(ScaleButton);
 
@@ -5415,7 +5415,7 @@ function formatShowInput$1(value, formatDecimal) {
     return result;
 }
 var TextInputNumber = function (_a) {
-    var style = _a.style, _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, _d = _a.textError, textError = _d === void 0 ? "" : _d, left = _a.left, right = _a.right, onChangeText = _a.onChangeText, _e = _a.disabled, disabled = _e === void 0 ? false : _e; _a.theme; var _f = _a.prefix, prefix = _f === void 0 ? "" : _f, _g = _a.suffix, suffix = _g === void 0 ? "" : _g, _h = _a.clearButton, clearButton = _h === void 0 ? false : _h, _j = _a.maxValue, maxValue = _j === void 0 ? 999999999999 : _j, _k = _a.minValue, minValue = _k === void 0 ? 0 : _k, _l = _a.type, type = _l === void 0 ? "integer" : _l, _m = _a.formatDecimal, formatDecimal = _m === void 0 ? 3 : _m, _o = _a.required, required = _o === void 0 ? false : _o, labelStyle = _a.labelStyle, contentStyle = _a.contentStyle, textErrorStyle = _a.textErrorStyle, height = _a.height, _p = _a.keyboardStyle, keyboardStyle = _p === void 0 ? {} : _p, props = __rest(_a, ["style", "value", "label", "textError", "left", "right", "onChangeText", "disabled", "theme", "prefix", "suffix", "clearButton", "maxValue", "minValue", "type", "formatDecimal", "required", "labelStyle", "contentStyle", "textErrorStyle", "height", "keyboardStyle"]);
+    var style = _a.style, _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, _d = _a.textError, textError = _d === void 0 ? "" : _d, left = _a.left, right = _a.right, onChangeText = _a.onChangeText, _e = _a.disabled, disabled = _e === void 0 ? false : _e; _a.theme; var _f = _a.prefix, prefix = _f === void 0 ? "" : _f, _g = _a.suffix, suffix = _g === void 0 ? "" : _g, _h = _a.clearButton, clearButton = _h === void 0 ? false : _h, _j = _a.maxValue, maxValue = _j === void 0 ? 999999999999 : _j, _k = _a.minValue, minValue = _k === void 0 ? 0 : _k, _l = _a.type, type = _l === void 0 ? "integer" : _l, _m = _a.formatDecimal, formatDecimal = _m === void 0 ? 3 : _m, _o = _a.required, required = _o === void 0 ? false : _o, labelStyle = _a.labelStyle, contentStyle = _a.contentStyle, textErrorStyle = _a.textErrorStyle, height = _a.height, _p = _a.keyboardStyle, keyboardStyle = _p === void 0 ? {} : _p, testID = _a.testID, props = __rest(_a, ["style", "value", "label", "textError", "left", "right", "onChangeText", "disabled", "theme", "prefix", "suffix", "clearButton", "maxValue", "minValue", "type", "formatDecimal", "required", "labelStyle", "contentStyle", "textErrorStyle", "height", "keyboardStyle", "testID"]);
     var theme = useInternalTheme();
     var colors = theme.colors;
     var _q = useState(false), isShowModalKeyboard = _q[0], setIsShowModalKeyboard = _q[1];
@@ -5797,7 +5797,7 @@ var TextInputNumber = function (_a) {
         }, 300);
     };
     return (React__default.createElement(View, null,
-        React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onShowModalKeyboard }, props, { disabled: disabled || false }),
+        React__default.createElement(ScaleButton$1, __assign({ testID: testID, activeOpacity: 0.8, onPress: onShowModalKeyboard }, props, { disabled: disabled || false }),
             React__default.createElement(View, { style: [
                     styles$c.container,
                     {
@@ -5882,42 +5882,43 @@ var TextInputNumber = function (_a) {
                     React__default.createElement(View, { width: "100%", style: styles$c.valueRow },
                         React__default.createElement(View, { style: styles$c.valueTextContainer },
                             React__default.createElement(Text$1, { numberOfLines: 1, style: [styles$c.text30, styles$c.valueText] }, formatNumberInput$1(inputValue, formatDecimal) || "\u00A0")),
-                        React__default.createElement(TouchableOpacity, { onPress: handleClear, style: styles$c.clearButton },
+                        React__default.createElement(TouchableOpacity, { testID: testID ? "".concat(testID, "_modal_btn_clear") : 'number_input_btn_clear', accessible: true, accessibilityRole: "button", accessibilityLabel: "X\u00F3a h\u1EBFt", onPress: handleClear, style: styles$c.clearButton },
                             React__default.createElement(SvgIcon, { name: "IconClearText", width: 24, height: 24, color: colors.textSecondary }))),
                     React__default.createElement(View, { style: styles$c.keyboardGrid }, [
                         ["1", "2", "3"],
                         ["4", "5", "6"],
                         ["7", "8", "9"],
                         [type === "integer" ? "000" : ".", "0", "del"],
-                    ].map(function (row, rowIndex) { return (React__default.createElement(View, { key: rowIndex, style: styles$c.keyboardRow }, row.map(function (key) { return (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, key: key, style: [
-                            styles$c.keyButton,
-                            key === "000" && is000Disabled && styles$c.disabledKey,
-                            key === "0" && is0Disabled && styles$c.disabledKey,
-                            key === "." &&
-                                inputValue.includes(".") &&
-                                styles$c.disabledKey,
-                        ], onPress: function () { return handleKeyPress(key); }, disabled: (key === "000" && is000Disabled) ||
-                            (key === "0" && is0Disabled) ||
-                            (key === "." && inputValue.includes(".")) }, key === "del" ? (React__default.createElement(SvgIcon, { name: "IconDelNumber", width: 24, height: 24, color: colors.textSecondary })) : (React__default.createElement(Text$1, { style: [
-                            styles$c.keyText,
-                            styles$c.text22,
-                            key === "000" &&
-                                is000Disabled &&
-                                styles$c.disabledKeyText,
-                            key === "0" &&
-                                is0Disabled &&
-                                styles$c.disabledKeyText,
-                            key === "." &&
-                                inputValue.includes(".") &&
-                                styles$c.disabledKeyText,
-                        ] }, key)))); }))); })),
+                    ].map(function (row, rowIndex) { return (React__default.createElement(View, { key: rowIndex, style: styles$c.keyboardRow }, row.map(function (key) {
+                        var keyId = key === 'del' ? 'del' : key === '.' ? 'dot' : key;
+                        return (React__default.createElement(TouchableOpacity, { testID: testID ? "".concat(testID, "_modal_key_").concat(keyId) : "number_input_key_".concat(keyId), accessible: true, accessibilityRole: "button", accessibilityLabel: key === 'del' ? 'Xóa' : key, activeOpacity: 0.8, key: key, style: [
+                                styles$c.keyButton,
+                                key === "000" && is000Disabled && styles$c.disabledKey,
+                                key === "0" && is0Disabled && styles$c.disabledKey,
+                                key === "." &&
+                                    inputValue.includes(".") &&
+                                    styles$c.disabledKey,
+                            ], onPress: function () { return handleKeyPress(key); }, disabled: (key === "000" && is000Disabled) ||
+                                (key === "0" && is0Disabled) ||
+                                (key === "." && inputValue.includes(".")) }, key === "del" ? (React__default.createElement(SvgIcon, { name: "IconDelNumber", width: 24, height: 24, color: colors.textSecondary })) : (React__default.createElement(Text$1, { style: [
+                                styles$c.keyText,
+                                styles$c.text22,
+                                key === "000" &&
+                                    is000Disabled &&
+                                    styles$c.disabledKeyText,
+                                key === "0" && is0Disabled && styles$c.disabledKeyText,
+                                key === "." &&
+                                    inputValue.includes(".") &&
+                                    styles$c.disabledKeyText,
+                            ] }, key))));
+                    }))); })),
                     React__default.createElement(View, { style: styles$c.actionRow },
-                        React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: styles$c.actionButton, onPress: onCloseModalKeyboard },
+                        React__default.createElement(TouchableOpacity, { testID: testID ? "".concat(testID, "_modal_btn_close") : 'number_input_btn_close', accessible: true, accessibilityRole: "button", accessibilityLabel: "\u0110\u00F3ng", activeOpacity: 0.8, style: styles$c.actionButton, onPress: onCloseModalKeyboard },
                             React__default.createElement(Text$1, { style: [styles$c.actionText, styles$c.text16] }, "\u0110\u00F3ng")),
                         React__default.createElement(Spacer, { style: {
                                 height: "100%",
                             }, width: 1, backgroundColor: colors.borderPrimaryDefault }),
-                        React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: [styles$c.actionButton, !canSave && { opacity: 0.5 }], onPress: handleSave, disabled: !canSave },
+                        React__default.createElement(TouchableOpacity, { testID: testID ? "".concat(testID, "_modal_btn_save") : 'number_input_btn_save', accessible: true, accessibilityRole: "button", accessibilityLabel: "L\u01B0u", activeOpacity: 0.8, style: [styles$c.actionButton, !canSave && { opacity: 0.5 }], onPress: handleSave, disabled: !canSave },
                             React__default.createElement(Text$1, { style: [
                                     styles$c.actionText,
                                     styles$c.text16,
@@ -6263,7 +6264,7 @@ var TextInput = forwardRef(function (_a, ref) {
 TextInput.Affix = TextInputAffix;
 
 var Button = function (_a) {
-    var style = _a.style, title = _a.title; _a.border; var borderColor = _a.borderColor, isLoading = _a.isLoading, left = _a.left, right = _a.right, margin = _a.margin, textStyle = _a.textStyle, textProps = _a.textProps, onPress = _a.onPress, disabled = _a.disabled, backgroundColor = _a.backgroundColor, textColor = _a.textColor, _b = _a.textBold, textBold = _b === void 0 ? true : _b, _c = _a.mode, mode = _c === void 0 ? 'contained' : _c; _a.transparent; var _e = _a.full, full = _e === void 0 ? false : _e; _a.theme; var _f = _a.buttonSize, buttonSize = _f === void 0 ? 'normal' : _f, _g = _a.textSize, textSize = _g === void 0 ? buttonSize === 'small' ? 14 : 16 : _g, _h = _a.critical, critical = _h === void 0 ? false : _h, width = _a.width, _j = _a.type, type = _j === void 0 ? 'default' : _j, props = __rest(_a, ["style", "title", "border", "borderColor", "isLoading", "left", "right", "margin", "textStyle", "textProps", "onPress", "disabled", "backgroundColor", "textColor", "textBold", "mode", "transparent", "full", "theme", "buttonSize", "textSize", "critical", "width", "type"]);
+    var style = _a.style, title = _a.title; _a.border; var borderColor = _a.borderColor, isLoading = _a.isLoading, left = _a.left, right = _a.right, margin = _a.margin, textStyle = _a.textStyle, textProps = _a.textProps, onPress = _a.onPress, disabled = _a.disabled, backgroundColor = _a.backgroundColor, textColor = _a.textColor, _b = _a.textBold, textBold = _b === void 0 ? true : _b, _c = _a.mode, mode = _c === void 0 ? 'contained' : _c; _a.transparent; var _e = _a.full, full = _e === void 0 ? false : _e; _a.theme; var _f = _a.buttonSize, buttonSize = _f === void 0 ? 'normal' : _f, _g = _a.textSize, textSize = _g === void 0 ? buttonSize === 'small' ? 14 : 16 : _g, _h = _a.critical, critical = _h === void 0 ? false : _h, width = _a.width, _j = _a.type, type = _j === void 0 ? 'default' : _j, testID = _a.testID, accessibilityLabel = _a.accessibilityLabel, props = __rest(_a, ["style", "title", "border", "borderColor", "isLoading", "left", "right", "margin", "textStyle", "textProps", "onPress", "disabled", "backgroundColor", "textColor", "textBold", "mode", "transparent", "full", "theme", "buttonSize", "textSize", "critical", "width", "type", "testID", "accessibilityLabel"]);
     var theme = useInternalTheme();
     var colors = theme.colors;
     var disabledTextStyle = {
@@ -6333,7 +6334,7 @@ var Button = function (_a) {
         }
     };
     if (type === 'text') {
-        return (React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || isLoading }),
+        return (React__default.createElement(ScaleButton$1, __assign({ testID: testID, accessibilityLabel: accessibilityLabel || title || testID, activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || isLoading }),
             React__default.createElement(View, { width: width, margin: margin, style: [
                     {
                         height: CONSTANTS.BUTTON_HEIGHT,
@@ -6360,7 +6361,7 @@ var Button = function (_a) {
                 !isLoading && right)))));
     }
     return (React__default.createElement(View, { row: !full },
-        React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || isLoading }),
+        React__default.createElement(ScaleButton$1, __assign({ testID: testID, accessibilityLabel: accessibilityLabel || title || testID, activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || isLoading }),
             React__default.createElement(View, { width: width, margin: margin, style: [
                     styles$b.button,
                     {
@@ -6415,10 +6416,11 @@ var styles$b = StyleSheet.create(__assign(__assign({}, containerStyles), { disab
 var index$3 = React__default.memo(Button);
 
 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 ? 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, testID = _a.testID;
+    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, testID = _a.testID, _h = _a.accessible, accessible = _h === void 0 ? true : _h, accessibilityLabel = _a.accessibilityLabel;
     var colors = useInternalTheme().colors;
-    return (React__default.createElement(TouchableOpacity, __assign({ testID: testID, activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || isLoading, style: [
+    return (React__default.createElement(TouchableOpacity, __assign({ testID: testID, accessible: accessible, accessibilityRole: "button", accessibilityLabel: accessibilityLabel || testID || "floating-button", activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || isLoading, style: [
             styles$a.btn,
+            { width: size, height: size },
             top > 0 && { top: top },
             right > 0 && { right: right },
             left > 0 && { left: left },
@@ -7032,7 +7034,7 @@ var styles$7 = StyleSheet.create(__assign(__assign({}, containerStyles), { conta
     } }));
 
 var ChipBar = function (_a) {
-    var testID = _a.testID, 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.checked, checked = _f === void 0 ? false : _f, _g = _a.ellipsizeMode, ellipsizeMode = _g === void 0 ? "tail" : _g, _h = _a.numberOfLines, numberOfLines = _h === void 0 ? 1 : _h;
+    var testID = _a.testID, 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.checked, checked = _f === void 0 ? false : _f, _g = _a.ellipsizeMode, ellipsizeMode = _g === void 0 ? "tail" : _g, _h = _a.numberOfLines, numberOfLines = _h === void 0 ? 1 : _h, _j = _a.accessible, accessible = _j === void 0 ? true : _j, accessibilityLabel = _a.accessibilityLabel;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var handlePressChipBar = function () {
@@ -7040,8 +7042,8 @@ var ChipBar = function (_a) {
             onPress === null || onPress === void 0 ? void 0 : onPress(!checked);
         }
     };
-    return (React__default.createElement(View, { testID: testID, row: true },
-        React__default.createElement(View, { row: true, disabled: disabled, paddingHorizontal: CONSTANTS.SPACE_12, paddingVertical: CONSTANTS.SPACE_8, borderRadius: borderRadius, borderWidth: 1, alignCenter: true, style: [
+    return (React__default.createElement(View, { row: true },
+        React__default.createElement(View, { testID: testID, accessible: accessible, accessibilityRole: "button", accessibilityLabel: accessibilityLabel || title || testID, accessibilityState: { checked: checked, disabled: disabled }, row: true, disabled: disabled, paddingHorizontal: CONSTANTS.SPACE_12, paddingVertical: CONSTANTS.SPACE_8, borderRadius: borderRadius, borderWidth: 1, alignCenter: true, style: [
                 disabled && {
                     backgroundColor: colors.surfaceSecondaryDefault,
                     borderColor: colors.surfaceSecondaryDefault,
@@ -7085,10 +7087,10 @@ var useCheckboxColor = function (isActive, disabled) {
     }, [isActive, disabled, colors]);
 };
 var Checkbox = function (_a) {
-    var testID = _a.testID, style = _a.style, _b = _a.content, content = _b === void 0 ? "content" : _b, textStyle = _a.textStyle, onPress = _a.onPress, _c = _a.disabled, disabled = _c === void 0 ? false : _c, leftIcon = _a.leftIcon, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e;
+    var testID = _a.testID, style = _a.style, _b = _a.content, content = _b === void 0 ? "content" : _b, textStyle = _a.textStyle, onPress = _a.onPress, _c = _a.disabled, disabled = _c === void 0 ? false : _c, leftIcon = _a.leftIcon, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.iconSize, iconSize = _e === void 0 ? 24 : _e, _f = _a.accessible, accessible = _f === void 0 ? true : _f, accessibilityLabel = _a.accessibilityLabel;
     var theme = useInternalTheme();
     var colors = theme.colors;
-    var _f = useState(checked), isActive = _f[0], setActive = _f[1];
+    var _g = useState(checked), isActive = _g[0], setActive = _g[1];
     var checkboxColor = useCheckboxColor(isActive, disabled);
     var checkboxIconName = "IconCheckbox";
     if (isActive === "indeterminate") {
@@ -7103,7 +7105,7 @@ var Checkbox = function (_a) {
     useEffect(function () {
         setActive(checked);
     }, [checked]);
-    return (React__default.createElement(View, { testID: testID, row: true, disabled: disabled, alignCenter: true, style: [style], onPress: handlePress },
+    return (React__default.createElement(View, { testID: testID, accessible: accessible, accessibilityRole: "checkbox", accessibilityState: { checked: isActive, disabled: disabled }, accessibilityLabel: accessibilityLabel || content || testID, row: true, disabled: disabled, alignCenter: true, style: [style], onPress: handlePress },
         leftIcon ? (React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_8 }, leftIcon)) : (React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_8 },
             React__default.createElement(SvgIcon, { name: checkboxIconName, width: iconSize, height: iconSize, color: checkboxColor }))),
         React__default.createElement(View, { full: true },
@@ -7118,7 +7120,7 @@ var Checkbox = function (_a) {
 var styles$5 = StyleSheet.create(__assign({}, containerStyles));
 
 var RadioButton = function (_a) {
-    var testID = _a.testID, style = _a.style, _b = _a.content, content = _b === void 0 ? "content" : _b, textStyle = _a.textStyle, onPress = _a.onPress, _c = _a.disabled, disabled = _c === void 0 ? false : _c, leftIcon = _a.leftIcon, _d = _a.checked, checked = _d === void 0 ? false : _d;
+    var testID = _a.testID, style = _a.style, _b = _a.content, content = _b === void 0 ? "content" : _b, textStyle = _a.textStyle, onPress = _a.onPress, _c = _a.disabled, disabled = _c === void 0 ? false : _c, leftIcon = _a.leftIcon, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.accessible, accessible = _e === void 0 ? true : _e, accessibilityLabel = _a.accessibilityLabel;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var handlePress = useCallback(function () {
@@ -7133,7 +7135,7 @@ var RadioButton = function (_a) {
         }
         return colors.surfacePrimaryDefault;
     }, [checked, disabled]);
-    return (React__default.createElement(View, { testID: testID, row: true, disabled: disabled, alignCenter: true, style: [style], onPress: handlePress },
+    return (React__default.createElement(View, { testID: testID, accessible: accessible, accessibilityRole: "radio", accessibilityState: { checked: checked, disabled: disabled }, accessibilityLabel: accessibilityLabel || content || testID, row: true, disabled: disabled, alignCenter: true, style: [style], onPress: handlePress },
         leftIcon ? (React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_8 }, leftIcon)) : (React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_8 },
             React__default.createElement(SvgIcon, { name: checked ? "IconRadioActive" : "IconRadio", width: 24, height: 24, color: getColorCheckbox }))),
         React__default.createElement(View, { full: true },
@@ -7197,7 +7199,7 @@ var styles$3 = StyleSheet.create({
 });
 
 var SelectionField = function (_a) {
-    var style = _a.style, _b = _a.content, content = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.error, error = _d === void 0 ? '' : _d, borderColor = _a.borderColor; _a.left; var right = _a.right, textStyle = _a.textStyle, labelStyle = _a.labelStyle, textProps = _a.textProps, onPress = _a.onPress, _e = _a.disabled, disabled = _e === void 0 ? false : _e, textColor = _a.textColor, labelColor = _a.labelColor; _a.theme; var _f = _a.required, required = _f === void 0 ? false : _f, _g = _a.height, height = _g === void 0 ? 48 : _g, testID = _a.testID, props = __rest(_a, ["style", "content", "label", "error", "borderColor", "left", "right", "textStyle", "labelStyle", "textProps", "onPress", "disabled", "textColor", "labelColor", "theme", "required", "height", "testID"]);
+    var style = _a.style, _b = _a.content, content = _b === void 0 ? '' : _b, _c = _a.label, label = _c === void 0 ? '' : _c, _d = _a.error, error = _d === void 0 ? '' : _d, borderColor = _a.borderColor; _a.left; var right = _a.right, textStyle = _a.textStyle, labelStyle = _a.labelStyle, textProps = _a.textProps, onPress = _a.onPress, _e = _a.disabled, disabled = _e === void 0 ? false : _e, textColor = _a.textColor, labelColor = _a.labelColor; _a.theme; var _f = _a.required, required = _f === void 0 ? false : _f, _g = _a.height, height = _g === void 0 ? 48 : _g, testID = _a.testID, _h = _a.accessible, accessible = _h === void 0 ? true : _h, accessibilityLabel = _a.accessibilityLabel, props = __rest(_a, ["style", "content", "label", "error", "borderColor", "left", "right", "textStyle", "labelStyle", "textProps", "onPress", "disabled", "textColor", "labelColor", "theme", "required", "height", "testID", "accessible", "accessibilityLabel"]);
     var theme = useInternalTheme();
     var colors = theme.colors;
     var disabledTextStyle = {
@@ -7213,8 +7215,8 @@ var SelectionField = function (_a) {
         }
         return textColor || colors.textDefault;
     };
-    return (React__default.createElement(View, { testID: testID },
-        React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || false }),
+    return (React__default.createElement(View, null,
+        React__default.createElement(ScaleButton$1, __assign({ testID: testID, accessible: accessible, accessibilityRole: "button", accessibilityLabel: accessibilityLabel || label || (content === null || content === void 0 ? void 0 : content.toString()) || testID, activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || false }),
             React__default.createElement(View, { style: [
                     styles$2.container,
                     {
@@ -7369,7 +7371,7 @@ var formatShowInput = function (value, formatDecimal) {
     return result;
 };
 var NumberKeyboard = function (_a) {
-    var _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, onChangeText = _a.onChangeText, _d = _a.maxValue, maxValue = _d === void 0 ? 999999999999 : _d, _e = _a.minValue, minValue = _e === void 0 ? 0 : _e, _f = _a.type, type = _f === void 0 ? "integer" : _f, _g = _a.formatDecimal, formatDecimal = _g === void 0 ? 3 : _g, visible = _a.visible, onClose = _a.onClose, keyboardStyle = _a.keyboardStyle;
+    var _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.label, label = _c === void 0 ? "" : _c, onChangeText = _a.onChangeText, _d = _a.maxValue, maxValue = _d === void 0 ? 999999999999 : _d, _e = _a.minValue, minValue = _e === void 0 ? 0 : _e, _f = _a.type, type = _f === void 0 ? "integer" : _f, _g = _a.formatDecimal, formatDecimal = _g === void 0 ? 3 : _g, visible = _a.visible, onClose = _a.onClose, keyboardStyle = _a.keyboardStyle, testID = _a.testID;
     var theme = useInternalTheme();
     var colors = theme.colors;
     var _h = useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), inputValue = _h[0], setInputValue = _h[1];
@@ -7651,45 +7653,47 @@ var NumberKeyboard = function (_a) {
         }, 300);
     }, [onClose, value]);
     return (React__default.createElement(Modal, { visible: visible, transparent: true, animationType: "fade", statusBarTranslucent: true, onRequestClose: handleClose },
-        React__default.createElement(View, { style: styles.modalOverlay },
-            React__default.createElement(TouchableOpacity, { style: styles.modalBackdrop, activeOpacity: 1, onPress: handleClose }),
-            React__default.createElement(View, { backgroundColor: colors.surfacePrimaryDefault, style: [styles.modalContent, keyboardStyle] },
+        React__default.createElement(TouchableOpacity, { style: styles.modalOverlay, activeOpacity: 1, onPress: handleClose },
+            React__default.createElement(View, { onPress: function () { }, activeOpacity: 1, backgroundColor: colors.surfacePrimaryDefault, style: [styles.modalContent, keyboardStyle] },
                 React__default.createElement(Text$1, { style: [styles.text18, styles.modalTitle] }, label),
                 React__default.createElement(View, { width: "100%", style: styles.valueRow },
                     React__default.createElement(View, { style: styles.valueTextContainer },
                         React__default.createElement(Text$1, { numberOfLines: 1, style: [styles.text30, styles.valueText] }, formatNumberInput(inputValue, formatDecimal) || "\u00A0")),
-                    React__default.createElement(TouchableOpacity, { onPress: handleClear, style: styles.clearButton },
+                    React__default.createElement(TouchableOpacity, { testID: testID ? "".concat(testID, "_btn_clear") : 'keyboard_btn_clear', accessible: true, accessibilityRole: "button", accessibilityLabel: "X\u00F3a h\u1EBFt", onPress: handleClear, style: styles.clearButton },
                         React__default.createElement(SvgIcon, { name: "IconClearText", width: 24, height: 24, color: colors.textSecondary }))),
                 React__default.createElement(View, { style: styles.keyboardGrid }, [
                     ["1", "2", "3"],
                     ["4", "5", "6"],
                     ["7", "8", "9"],
                     [type === "integer" ? "000" : ".", "0", "del"],
-                ].map(function (row, rowIndex) { return (React__default.createElement(View, { key: rowIndex, style: styles.keyboardRow }, row.map(function (key) { return (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, key: key, style: [
-                        styles.keyButton,
-                        key === "000" && is000Disabled && styles.disabledKey,
-                        key === "0" && is0Disabled && styles.disabledKey,
-                        key === "." &&
-                            inputValue.includes(".") &&
-                            styles.disabledKey,
-                    ], onPress: function () { return handleKeyPress(key); }, disabled: (key === "000" && is000Disabled) ||
-                        (key === "0" && is0Disabled) ||
-                        (key === "." && inputValue.includes(".")) }, key === "del" ? (React__default.createElement(SvgIcon, { name: "IconDelNumber", width: 24, height: 24, color: colors.textSecondary })) : (React__default.createElement(Text$1, { style: [
-                        styles.keyText,
-                        styles.text22,
-                        key === "000" &&
-                            is000Disabled &&
-                            styles.disabledKeyText,
-                        key === "0" && is0Disabled && styles.disabledKeyText,
-                        key === "." &&
-                            inputValue.includes(".") &&
-                            styles.disabledKeyText,
-                    ] }, key)))); }))); })),
+                ].map(function (row, rowIndex) { return (React__default.createElement(View, { key: rowIndex, style: styles.keyboardRow }, row.map(function (key) {
+                    var keyId = key === 'del' ? 'del' : key === '.' ? 'dot' : key;
+                    return (React__default.createElement(TouchableOpacity, { testID: testID ? "".concat(testID, "_key_").concat(keyId) : "keyboard_key_".concat(keyId), accessible: true, accessibilityRole: "button", accessibilityLabel: key === 'del' ? 'Xóa' : key, activeOpacity: 0.8, key: key, style: [
+                            styles.keyButton,
+                            key === "000" && is000Disabled && styles.disabledKey,
+                            key === "0" && is0Disabled && styles.disabledKey,
+                            key === "." &&
+                                inputValue.includes(".") &&
+                                styles.disabledKey,
+                        ], onPress: function () { return handleKeyPress(key); }, disabled: (key === "000" && is000Disabled) ||
+                            (key === "0" && is0Disabled) ||
+                            (key === "." && inputValue.includes(".")) }, key === "del" ? (React__default.createElement(SvgIcon, { name: "IconDelNumber", width: 24, height: 24, color: colors.textSecondary })) : (React__default.createElement(Text$1, { style: [
+                            styles.keyText,
+                            styles.text22,
+                            key === "000" &&
+                                is000Disabled &&
+                                styles.disabledKeyText,
+                            key === "0" && is0Disabled && styles.disabledKeyText,
+                            key === "." &&
+                                inputValue.includes(".") &&
+                                styles.disabledKeyText,
+                        ] }, key))));
+                }))); })),
                 React__default.createElement(View, { style: styles.actionRow },
-                    React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: styles.actionButton, onPress: handleClose },
+                    React__default.createElement(TouchableOpacity, { testID: testID ? "".concat(testID, "_btn_close") : 'keyboard_btn_close', accessible: true, accessibilityRole: "button", accessibilityLabel: "\u0110\u00F3ng", activeOpacity: 0.8, style: styles.actionButton, onPress: handleClose },
                         React__default.createElement(Text$1, { style: [styles.actionText, styles.text16] }, "\u0110\u00F3ng")),
                     React__default.createElement(Spacer, { style: { height: "100%" }, width: 1, backgroundColor: colors.borderPrimaryDefault }),
-                    React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: [styles.actionButton, !canSave && { opacity: 0.5 }], onPress: handleSave, disabled: !canSave },
+                    React__default.createElement(TouchableOpacity, { testID: testID ? "".concat(testID, "_btn_save") : 'keyboard_btn_save', accessible: true, accessibilityRole: "button", accessibilityLabel: "L\u01B0u", activeOpacity: 0.8, style: [styles.actionButton, !canSave && { opacity: 0.5 }], onPress: handleSave, disabled: !canSave },
                         React__default.createElement(Text$1, { style: [
                                 styles.actionText,
                                 styles.text16,
@@ -7699,11 +7703,10 @@ var NumberKeyboard = function (_a) {
 };
 var styles = StyleSheet.create(__assign(__assign({}, containerStyles), { modalOverlay: {
         flex: 1,
-        width: "100%",
-        height: "100%",
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
         justifyContent: "center",
         alignItems: "center",
-    }, modalBackdrop: __assign(__assign({}, StyleSheet.absoluteFillObject), { backgroundColor: "rgba(0, 0, 0, 0.5)" }), modalContent: {
+    }, modalContent: {
         borderRadius: 20,
         width: "90%",
         paddingBottom: 20,