sapo-components-ui-rn 1.1.37 → 1.1.39

package/dist/index.esm.js

@@ -636,7 +636,6 @@ Dimensions.get("window").height;
 Dimensions.get("window").width;
 var BUTTON_HEIGHT = 48;
 var BUTTON_HEIGHT_SMALL = 40;
-var SPACE_2 = 2;
 var SPACE_4 = 4;
 var SPACE_6 = 6;
 var SPACE_8 = 8;
@@ -1898,7 +1897,7 @@ function getTextColor(_a) {
 }
 
 var MAXIMIZED_LABEL_FONT_SIZE = 15;
-var MINIMIZED_LABEL_FONT_SIZE = 12;
+var MINIMIZED_LABEL_FONT_SIZE = 13;
 var LABEL_WIGGLE_X_OFFSET = 4;
 var ADORNMENT_SIZE = 24;
 var MIN_WIDTH = 100;
@@ -4828,7 +4827,7 @@ var Text = function (props) {
 var Text$1 = memoDeepEqual(Text);
 
 var InputLabel = function (props) {
-    var labeled = props.labeled, wiggle = props.wiggle, error = props.error, focused = props.focused, opacity = props.opacity, labelLayoutWidth = props.labelLayoutWidth, labelLayoutHeight = props.labelLayoutHeight, labelBackground = props.labelBackground, label = props.label, labelError = props.labelError, onLayoutAnimatedText = props.onLayoutAnimatedText, onLabelTextLayout = props.onLabelTextLayout, hasActiveOutline = props.hasActiveOutline, activeColor = props.activeColor, placeholderStyle = props.placeholderStyle, baseLabelTranslateX = props.baseLabelTranslateX, baseLabelTranslateY = props.baseLabelTranslateY, font = props.font, fontSize = props.fontSize, lineHeight = props.lineHeight, fontWeight = props.fontWeight, placeholderOpacity = props.placeholderOpacity, wiggleOffsetX = props.wiggleOffsetX, labelScale = props.labelScale, topPosition = props.topPosition, paddingLeft = props.paddingLeft, paddingRight = props.paddingRight, backgroundColor = props.backgroundColor, roundness = props.roundness, placeholderColor = props.placeholderColor, errorColor = props.errorColor, labelTranslationXOffset = props.labelTranslationXOffset, maxFontSizeMultiplier = props.maxFontSizeMultiplier, testID = props.testID, inputContainerLayout = props.inputContainerLayout, scaledLabel = props.scaledLabel, required = props.required;
+    var labeled = props.labeled, wiggle = props.wiggle, error = props.error, focused = props.focused, opacity = props.opacity, labelLayoutWidth = props.labelLayoutWidth, labelLayoutHeight = props.labelLayoutHeight, labelBackground = props.labelBackground, label = props.label, labelError = props.labelError, onLayoutAnimatedText = props.onLayoutAnimatedText, onLabelTextLayout = props.onLabelTextLayout, hasActiveOutline = props.hasActiveOutline, activeColor = props.activeColor, placeholderStyle = props.placeholderStyle, baseLabelTranslateX = props.baseLabelTranslateX, baseLabelTranslateY = props.baseLabelTranslateY, font = props.font, fontSize = props.fontSize, lineHeight = props.lineHeight, fontWeight = props.fontWeight, placeholderOpacity = props.placeholderOpacity, wiggleOffsetX = props.wiggleOffsetX, labelScale = props.labelScale, topPosition = props.topPosition, paddingLeft = props.paddingLeft, paddingRight = props.paddingRight, backgroundColor = props.backgroundColor, roundness = props.roundness, placeholderColor = props.placeholderColor, errorColor = props.errorColor, labelTranslationXOffset = props.labelTranslationXOffset, maxFontSizeMultiplier = props.maxFontSizeMultiplier, testID = props.testID, inputContainerLayout = props.inputContainerLayout, scaledLabel = props.scaledLabel, required = props.required, inputValue = props.inputValue;
     var INPUT_PADDING_HORIZONTAL = getConstants().INPUT_PADDING_HORIZONTAL;
     var width = useWindowDimensions().width;
     var paddingOffset = paddingLeft && paddingRight ? { paddingLeft: paddingLeft, paddingRight: paddingRight } : {};
@@ -4880,7 +4879,7 @@ var InputLabel = function (props) {
     var commonStyles = [
         placeholderStyle,
         {
-            top: topPosition - (Platform.OS === "android" ? 3 : 2),
+            top: topPosition - (Platform.OS === "android" ? 2 : inputValue ? 0 : 2),
         },
         {
             maxWidth: labelWidth,
@@ -5285,7 +5284,7 @@ var TextInputFlat = function (_a) {
                         flex: 1,
                     },
                 ] },
-                label ? (React$3.createElement(InputLabel$1, __assign({ labeled: parentState.labeled, error: parentState.error, focused: parentState.focused, scaledLabel: scaledLabel, wiggle: Boolean(parentState.value && labelProps.labelError), labelLayoutMeasured: parentState.labelLayout.measured, labelLayoutWidth: parentState.labelLayout.width, labelLayoutHeight: parentState.labelLayout.height, required: required }, labelProps))) : null,
+                label ? (React$3.createElement(InputLabel$1, __assign({ inputValue: inputValue, labeled: parentState.labeled, error: parentState.error, focused: parentState.focused, scaledLabel: scaledLabel, wiggle: Boolean(parentState.value && labelProps.labelError), labelLayoutMeasured: parentState.labelLayout.measured, labelLayoutWidth: parentState.labelLayout.width, labelLayoutHeight: parentState.labelLayout.height, required: required }, labelProps))) : null,
                 React$3.createElement(View$1, { style: { flexDirection: "row", alignItems: "flex-end" } },
                     !multiline &&
                         prefix &&
@@ -5293,11 +5292,11 @@ var TextInputFlat = function (_a) {
                         renderPrefix(), render === null || render === void 0 ? void 0 :
                     render(__assign(__assign({}, rest), { ref: innerRef, onChangeText: handleChangeText, value: inputValue, placeholder: rest.placeholder, editable: !disabled && editable, selectionColor: selectionColor, cursorColor: typeof cursorColor === "undefined" ? activeColor : cursorColor, placeholderTextColor: placeholderTextColorBasedOnState, onFocus: onFocus, onBlur: onBlur, underlineColorAndroid: "transparent", multiline: multiline, style: [
                             styles$e.input,
-                            __assign(__assign({ paddingLeft: paddingLeft, paddingRight: paddingRight, paddingTop: parentState.focused || parentState.value ? SPACE_12 : 0 }, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", marginTop: Platform.OS === "android" ? SPACE_8 : SPACE_2 }),
+                            __assign(__assign({ paddingLeft: paddingLeft, paddingRight: paddingRight, paddingTop: parentState.focused || parentState.value ? SPACE_12 : 0 }, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", marginTop: Platform.OS === "android" ? SPACE_8 : SPACE_4 }),
                             contentStyle,
                         ] })),
                     renderSuffix())),
-            parentState.focused && !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$e.clearButton },
+            !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$e.clearButton },
                 React$3.createElement(SvgIcon, { name: "IconClearText", width: 24, height: 24 }))) : (React$3.createElement(Spacer, { width: SPACE_12 })),
             checkLineRightAction() && (React$3.createElement(Spacer, { width: 1, height: 24, backgroundColor: theme.colors.borderPrimaryDefault, style: {
                     marginRight: SPACE_8,
@@ -5420,7 +5419,7 @@ var TextInputDefault = function (_a) {
         }
     };
     var renderLabel = function () {
-        var _a;
+        var _a, _b;
         if (parentState.focused ||
             (parentState.value !== undefined && ((_a = parentState.value) === null || _a === void 0 ? void 0 : _a.toString()) !== "")) {
             return (React$3.createElement(View, { paddingTop: CONSTANTS.SPACE_6 },
@@ -5428,6 +5427,14 @@ var TextInputDefault = function (_a) {
                     label,
                     required && React$3.createElement(Text$1, { color: theme.colors.textErrorDefault }, " *"))));
         }
+        else if (((_b = parentState.value) === null || _b === void 0 ? void 0 : _b.toString()) == "") {
+            return (React$3.createElement(View, { paddingTop: CONSTANTS.SPACE_12 },
+                React$3.createElement(Text$1, { color: getLabelColor(), style: [contentStyle] },
+                    label,
+                    required && (React$3.createElement(Text$1, { style: [contentStyle], color: theme.colors.textErrorDefault },
+                        " ",
+                        "*")))));
+        }
         return React$3.createElement(View, null);
     };
     var getPaddingTopValue = function () {
@@ -5519,7 +5526,7 @@ var TextInputDefault = function (_a) {
                 multiline ? (render === null || render === void 0 ? void 0 : render(__assign(__assign({}, rest), { ref: innerRef, onChangeText: handleChangeText, value: inputValue, placeholder: ((_b = parentState.value) === null || _b === void 0 ? void 0 : _b.toString()) == ""
                         ? parentState.focused
                             ? rest.placeholder
-                            : label
+                            : ""
                         : rest.placeholder, editable: !disabled && editable, selectionColor: selectionColor, cursorColor: typeof cursorColor === "undefined" ? activeColor : cursorColor, placeholderTextColor: placeholderTextColorBasedOnState, onFocus: onFocus, onBlur: onBlur, underlineColorAndroid: "transparent", multiline: multiline, style: [
                         styles$d.input,
                         __assign(__assign({}, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", textAlign: textAlign
@@ -5547,7 +5554,7 @@ var TextInputDefault = function (_a) {
                             contentStyle,
                         ] })),
                     !multiline && renderSuffix()))),
-            parentState.focused && !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: multiline ? styles$d.clearButtonMultiline : styles$d.clearButton },
+            !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: multiline ? styles$d.clearButtonMultiline : styles$d.clearButton },
                 React$3.createElement(SvgIcon, { name: "IconClearText", width: 24, height: 24 }))) : (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_12 })),
             checkLineRightAction() && (React$3.createElement(Spacer, { width: 1, height: 24, backgroundColor: colors.borderPrimaryDefault, style: {
                     marginRight: CONSTANTS.SPACE_8,
@@ -5575,6 +5582,7 @@ var styles$d = StyleSheet.create({
     clearButton: {
         justifyContent: "center",
         paddingHorizontal: CONSTANTS.SPACE_8,
+        // alignItems: "center",
     },
     vError: {
         paddingTop: CONSTANTS.SPACE_4,
@@ -5631,10 +5639,37 @@ var TextInputNumber = function (_a) {
     useEffect(function () {
         var currentValue = Number(inputValue);
         var minValueNumber = Number(minValue);
-        setCanSave(!isNaN(currentValue) &&
+        var maxValueNumber = Number(maxValue);
+        // Kiểm tra canSave với logic mới để hỗ trợ số âm
+        // Ví dụ: value=-100, maxValue=999999999999, minValue=0
+        // -100 < 0 (minValue) nhưng |-100| = 100 <= 999999999999 (maxValue) → canSave = true
+        var isValid = false;
+        if (!isNaN(currentValue) &&
             !isNaN(minValueNumber) &&
-            currentValue >= minValueNumber);
-    }, [inputValue, minValue]);
+            !isNaN(maxValueNumber)) {
+            if (currentValue < 0) {
+                // Với số âm, kiểm tra giá trị tuyệt đối không vượt quá maxValue
+                // và giá trị không nhỏ hơn minValue (nếu minValue cũng là số âm)
+                var absCurrent = Math.abs(currentValue);
+                var absMaxValue = Math.abs(maxValueNumber);
+                if (minValueNumber < 0) {
+                    // Nếu minValue cũng là số âm, kiểm tra currentValue >= minValue
+                    isValid = currentValue >= minValueNumber && absCurrent <= absMaxValue;
+                }
+                else {
+                    // Nếu minValue là số dương hoặc 0, chỉ kiểm tra giá trị tuyệt đối
+                    // Điều này cho phép số âm luôn được lưu nếu không vượt quá maxValue
+                    isValid = absCurrent <= absMaxValue;
+                }
+            }
+            else {
+                // Với số dương, kiểm tra bình thường
+                isValid =
+                    currentValue >= minValueNumber && currentValue <= maxValueNumber;
+            }
+        }
+        setCanSave(isValid);
+    }, [inputValue, minValue, maxValue]);
     var getColorValue = useMemo(function () {
         if (disabled) {
             return colors.textPlaceholder;
@@ -5653,9 +5688,54 @@ var TextInputNumber = function (_a) {
         }
         else if (key === "000") {
             if (type === "integer") {
+                // Xử lý trường hợp nhập "000" để tạo số lớn hơn
+                // Ví dụ: "1" + "000" = "1000", "10" + "000" = "10000"
+                // Nếu vượt quá maxValue, sẽ tự động cắt bớt số 0
+                // Logic này đảm bảo người dùng có thể tiếp tục nhập số đã được khởi tạo
+                // Ví dụ: value=999, người dùng có thể nhập "000" để tạo "999000"
                 var newInputValue = inputValue + "000";
                 var newValue = Number(newInputValue);
                 var maxValueNumber = Number(maxValue);
+                // Kiểm tra nếu giá trị vượt quá maxValue, cắt bớt số 0
+                if (!isNaN(newValue) &&
+                    !isNaN(maxValueNumber) &&
+                    newValue > maxValueNumber) {
+                    // Tìm số 0 tối đa có thể thêm vào mà không vượt quá maxValue
+                    var tempValue = inputValue;
+                    var tempNewValue = Number(tempValue + "000");
+                    // Giảm dần số 0 cho đến khi không vượt quá maxValue
+                    while (tempNewValue > maxValueNumber && tempValue.endsWith("0")) {
+                        tempValue = tempValue.slice(0, -1);
+                        tempNewValue = Number(tempValue + "000");
+                    }
+                    // Nếu vẫn vượt quá, chỉ thêm số 0 có thể
+                    if (tempNewValue > maxValueNumber) {
+                        // Tìm số 0 tối đa có thể thêm
+                        var maxZeros = 0;
+                        for (var i = 1; i <= 3; i++) {
+                            var testValue = Number(inputValue + "0".repeat(i));
+                            if (testValue <= maxValueNumber) {
+                                maxZeros = i;
+                            }
+                            else {
+                                break;
+                            }
+                        }
+                        if (maxZeros > 0) {
+                            newInputValue = inputValue + "0".repeat(maxZeros);
+                            newValue = Number(newInputValue);
+                        }
+                        else {
+                            // Không thể thêm số 0 nào
+                            return;
+                        }
+                    }
+                    else {
+                        newInputValue = tempValue + "000";
+                        newValue = Number(newInputValue);
+                    }
+                }
+                // Kiểm tra xem có thể nhập được không sau khi xử lý "000"
                 if (!isNaN(newValue) &&
                     !isNaN(maxValueNumber) &&
                     newValue <= maxValueNumber) {
@@ -5671,7 +5751,12 @@ var TextInputNumber = function (_a) {
                 if (inputValue === "0" || inputValue === "") {
                     setInputValue("0.");
                 }
+                else if (inputValue === "-") {
+                    // Nếu chỉ có dấu trừ, thêm "0."
+                    setInputValue("-0.");
+                }
                 else {
+                    // Nếu đã có giá trị, thêm dấu "." vào cuối
                     setInputValue(function (prev) { return prev + key; });
                 }
                 setIsFirstInput(false);
@@ -5683,8 +5768,48 @@ var TextInputNumber = function (_a) {
                 if (type === "float" && (key === "0" || key === "000")) {
                     return;
                 }
-                setInputValue(key);
-                setIsFirstInput(false);
+                // Kiểm tra xem có thể nhập được không khi là lần đầu
+                var newValue = Number(key);
+                var maxValueNumber = Number(maxValue);
+                if (!isNaN(newValue) && !isNaN(maxValueNumber)) {
+                    var canInput = false;
+                    if (newValue < 0) {
+                        // Với số âm, kiểm tra giá trị tuyệt đối không vượt quá maxValue
+                        var absNewValue = Math.abs(newValue);
+                        var absMaxValue = Math.abs(maxValueNumber);
+                        canInput = absNewValue <= absMaxValue;
+                    }
+                    else {
+                        // Với số dương, kiểm tra bình thường
+                        canInput = newValue <= maxValueNumber;
+                    }
+                    if (canInput) {
+                        // Nếu inputValue rỗng hoặc chỉ có dấu trừ, thay thế hoàn toàn
+                        if (inputValue === "" || inputValue === "-") {
+                            setInputValue(key);
+                        }
+                        else {
+                            // Nếu đã có giá trị, thêm vào cuối
+                            setInputValue(inputValue + key);
+                        }
+                        setIsFirstInput(false);
+                    }
+                    else {
+                        // Nếu vượt quá maxValue ngay từ đầu, không cho phép nhập
+                        return;
+                    }
+                }
+                else {
+                    // Nếu inputValue rỗng hoặc chỉ có dấu trừ, thay thế hoàn toàn
+                    if (inputValue === "" || inputValue === "-") {
+                        setInputValue(key);
+                    }
+                    else {
+                        // Nếu đã có giá trị, thêm vào cuối
+                        setInputValue(inputValue + key);
+                    }
+                    setIsFirstInput(false);
+                }
             }
             else {
                 // Kiểm tra nếu input bắt đầu bằng 0 và không có dấu chấm
@@ -5704,10 +5829,65 @@ var TextInputNumber = function (_a) {
                 var newInputValue = inputValue + key;
                 var newValue = Number(newInputValue);
                 var maxValueNumber = Number(maxValue);
-                if (!isNaN(newValue) &&
-                    !isNaN(maxValueNumber) &&
-                    newValue <= maxValueNumber) {
+                // Kiểm tra xem có thể nhập được không
+                var canInput = false;
+                var shouldCheckLength = true;
+                if (!isNaN(newValue) && !isNaN(maxValueNumber)) {
+                    if (newValue < 0) {
+                        // Với số âm, kiểm tra giá trị tuyệt đối không vượt quá maxValue
+                        var absNewValue = Math.abs(newValue);
+                        var absMaxValue = Math.abs(maxValueNumber);
+                        if (absNewValue <= absMaxValue) {
+                            canInput = true;
+                        }
+                        else {
+                            // Nếu vượt quá maxValue, kiểm tra xem có thể nhập được không
+                            var maxValueStr = absMaxValue.toString();
+                            inputValue.length;
+                            var newLength = newInputValue.length;
+                            // Nếu độ dài mới lớn hơn độ dài của maxValue, không cho phép nhập
+                            if (newLength > maxValueStr.length) {
+                                return;
+                            }
+                            // Nếu độ dài bằng nhau, kiểm tra giá trị
+                            if (newLength === maxValueStr.length &&
+                                absNewValue > absMaxValue) {
+                                return;
+                            }
+                            // Nếu độ dài nhỏ hơn, có thể nhập được (sẽ kiểm tra khi nhập tiếp)
+                            canInput = true;
+                            shouldCheckLength = false;
+                        }
+                    }
+                    else {
+                        // Với số dương, kiểm tra bình thường
+                        if (newValue <= maxValueNumber) {
+                            canInput = true;
+                        }
+                        else {
+                            // Nếu vượt quá maxValue, kiểm tra xem có thể nhập được không
+                            var maxValueStr = maxValueNumber.toString();
+                            inputValue.length;
+                            var newLength = newInputValue.length;
+                            // Nếu độ dài mới lớn hơn độ dài của maxValue, không cho phép nhập
+                            if (newLength > maxValueStr.length) {
+                                return;
+                            }
+                            // Nếu độ dài bằng nhau, kiểm tra giá trị
+                            if (newLength === maxValueStr.length &&
+                                newValue > maxValueNumber) {
+                                return;
+                            }
+                            // Nếu độ dài nhỏ hơn, có thể nhập được (sẽ kiểm tra khi nhập tiếp)
+                            // Ví dụ: maxValue = 999, inputValue = "99", nhập "9" → "999" (OK)
+                            canInput = true;
+                            shouldCheckLength = false;
+                        }
+                    }
+                }
+                if (canInput) {
                     if (inputValue.includes(".")) {
+                        // Xử lý số thập phân
                         var _a = inputValue.split("."); _a[0]; var _b = _a[1], decimalPart = _b === void 0 ? "" : _b;
                         if (newInputValue.length <= 12 && decimalPart.length === 0) {
                             setInputValue(function (prev) { return prev + key; });
@@ -5717,7 +5897,12 @@ var TextInputNumber = function (_a) {
                         }
                     }
                     else {
-                        if (newInputValue.length <= 12) {
+                        // Xử lý số nguyên
+                        if (shouldCheckLength && newInputValue.length <= 12) {
+                            setInputValue(function (prev) { return prev + key; });
+                        }
+                        else if (!shouldCheckLength) {
+                            // Nếu không cần kiểm tra độ dài (đã kiểm tra maxValue ở trên)
                             setInputValue(function (prev) { return prev + key; });
                         }
                     }
@@ -5762,7 +5947,16 @@ var TextInputNumber = function (_a) {
     };
     var onShowModalKeyboard = function () {
         setIsShowModalKeyboard(true);
-        setIsFirstInput(true);
+        // Logic mới: Không reset về trạng thái nhập mới khi đã có giá trị
+        // Chỉ set isFirstInput = true khi inputValue rỗng hoặc chỉ có dấu trừ
+        // Điều này cho phép người dùng tiếp tục nhập từ giá trị hiện tại
+        // Ví dụ: value=999, người dùng có thể nhập "000" để tạo "999000"
+        if (inputValue === "" || inputValue === "-") {
+            setIsFirstInput(true);
+        }
+        else {
+            setIsFirstInput(false);
+        }
         Keyboard.dismiss();
     };
     var onCloseModalKeyboard = function () {
@@ -5786,6 +5980,9 @@ var TextInputNumber = function (_a) {
                                 : colors.borderPrimaryDefault,
                         },
                     ],
+                    checkValueEmpty() && {
+                        alignItems: "center",
+                    },
                     textError.length > 0 && [
                         {
                             borderColor: colors.borderErrorDefault,
@@ -5804,28 +6001,32 @@ var TextInputNumber = function (_a) {
                 React__default.createElement(Spacer, { width: SPACE_12 }),
                 left && (React__default.createElement(View, { center: true, paddingRight: SPACE_8, height: "100%" }, left)),
                 React__default.createElement(View, { full: true, paddingRight: SPACE_4 },
-                    !checkValueEmpty() && !checkLabelEmpty() && (React__default.createElement(Text$1, { size: 12, color: colors.textSecondary, style: [
-                            disabled && {
-                                color: colors.textPlaceholder,
-                            },
-                            textError.length > 0 && {
-                                color: colors.textErrorDefault,
-                            },
-                        ] },
-                        label,
-                        required && React__default.createElement(Text$1, { color: colors.textErrorDefault }, " *"))),
+                    !checkValueEmpty() && !checkLabelEmpty() && (React__default.createElement(View, null,
+                        React__default.createElement(Text$1, { size: 12, color: colors.textSecondary, style: [
+                                disabled && {
+                                    color: colors.textPlaceholder,
+                                },
+                                textError.length > 0 && {
+                                    color: colors.textErrorDefault,
+                                },
+                            ] },
+                            label,
+                            required && React__default.createElement(Text$1, { color: colors.textErrorDefault }, " *")))),
                     React__default.createElement(View, { row: true, alignCenter: true },
                         !checkValueEmpty() && prefix.toString() !== "" && (React__default.createElement(Text$1, { numberOfLines: 1, color: colors.textSecondary, style: [disabled && disabledTextStyle] },
                             prefix, " ")),
                         React__default.createElement(View, { full: true },
-                            React__default.createElement(Text$1, { numberOfLines: 1, color: getColorValue, style: [disabled && disabledTextStyle] },
+                            React__default.createElement(Text$1, { numberOfLines: 1, color: getColorValue, style: [styles$c.text14, disabled && disabledTextStyle] },
                                 checkValueEmpty()
                                     ? label
                                     : formatNumberInput$1(numberValue, formatDecimal),
                                 checkValueEmpty() && required && (React__default.createElement(Text$1, { color: colors.textErrorDefault }, " *")))),
                         !checkValueEmpty() && suffix.toString() !== "" && (React__default.createElement(Text$1, { numberOfLines: 1, color: colors.textSecondary, style: [disabled && disabledTextStyle] }, " ",
                             suffix)))),
-                clearButton && !checkValueEmpty() && (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, onPress: handleClearInput },
+                clearButton && !checkValueEmpty() && (React__default.createElement(TouchableOpacity, { style: {
+                        alignContent: "center",
+                        paddingTop: Platform.OS === "ios" ? 4 : 8,
+                    }, activeOpacity: 0.8, onPress: handleClearInput },
                     React__default.createElement(SvgIcon, { name: "IconClearText", width: 24, height: 24 }))),
                 right && numberValue && (React__default.createElement(Spacer, { width: 1, height: 24, backgroundColor: theme.colors.borderPrimaryDefault, style: {
                         marginLeft: SPACE_4,
@@ -5882,9 +6083,8 @@ var TextInputNumber = function (_a) {
 var styles$c = StyleSheet.create(__assign(__assign({}, containerStyles), { disabled: { opacity: 0.6 }, container: {
         height: 48,
         flexDirection: "row",
-        alignItems: "center",
         justifyContent: "space-between",
-        paddingVertical: SPACE_6,
+        paddingVertical: Platform.OS === "android" ? 3 : SPACE_6,
     }, border: {
         borderWidth: BORDER_WIDTH_1,
     }, small: {
@@ -7235,10 +7435,14 @@ var styles$1 = StyleSheet.create(__assign({}, containerStyles));
 var formatNumberInput = function (value, formatDecimal) {
     if (!value)
         return "0";
+    if (value === "")
+        return "0";
+    // Xử lý số âm
     var isNegative = value.startsWith("-");
     var _a = value.replace(/[^0-9.]/g, "").split("."), intPart = _a[0], decimalPart = _a[1];
-    intPart = intPart.replace(/^0+(?=\d)/, "");
+    // Format phần nguyên
     intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    // Giới hạn phần thập phân
     if (decimalPart)
         decimalPart = decimalPart.slice(0, formatDecimal);
     var result = intPart;
@@ -7258,16 +7462,50 @@ var NumberKeyboard = function (_a) {
     useEffect(function () {
         if (visible) {
             setInputValue((value === null || value === void 0 ? void 0 : value.toString()) || "");
-            setIsFirstInput(true);
+            // Logic mới: Không reset về trạng thái nhập mới khi đã có giá trị
+            // Chỉ set isFirstInput = true khi inputValue rỗng hoặc chỉ có dấu trừ
+            if (inputValue === "" || inputValue === "-") {
+                setIsFirstInput(true);
+            }
+            else {
+                setIsFirstInput(false);
+            }
         }
-    }, [visible, value]);
+    }, [visible, value, inputValue]);
     useEffect(function () {
         var currentValue = Number(inputValue);
         var minValueNumber = Number(minValue);
-        setCanSave(!isNaN(currentValue) &&
+        var maxValueNumber = Number(maxValue);
+        // Kiểm tra canSave với logic mới để hỗ trợ số âm
+        // Ví dụ: value=-100, maxValue=999999999999, minValue=0
+        // -100 < 0 (minValue) nhưng |-100| = 100 <= 999999999999 (maxValue) → canSave = true
+        var isValid = false;
+        if (!isNaN(currentValue) &&
             !isNaN(minValueNumber) &&
-            currentValue >= minValueNumber);
-    }, [inputValue, minValue]);
+            !isNaN(maxValueNumber)) {
+            if (currentValue < 0) {
+                // Với số âm, kiểm tra giá trị tuyệt đối không vượt quá maxValue
+                // và giá trị không nhỏ hơn minValue (nếu minValue cũng là số âm)
+                var absCurrent = Math.abs(currentValue);
+                var absMaxValue = Math.abs(maxValueNumber);
+                if (minValueNumber < 0) {
+                    // Nếu minValue cũng là số âm, kiểm tra currentValue >= minValue
+                    isValid = currentValue >= minValueNumber && absCurrent <= absMaxValue;
+                }
+                else {
+                    // Nếu minValue là số dương hoặc 0, chỉ kiểm tra giá trị tuyệt đối
+                    // Điều này cho phép số âm luôn được lưu nếu không vượt quá maxValue
+                    isValid = absCurrent <= absMaxValue;
+                }
+            }
+            else {
+                // Với số dương, kiểm tra bình thường
+                isValid =
+                    currentValue >= minValueNumber && currentValue <= maxValueNumber;
+            }
+        }
+        setCanSave(isValid);
+    }, [inputValue, minValue, maxValue]);
     var handleKeyPress = useCallback(function (key) {
         if (key === "del") {
             setInputValue(function (prev) { return prev.slice(0, -1); });
@@ -7276,9 +7514,52 @@ var NumberKeyboard = function (_a) {
         }
         if (key === "000") {
             if (type === "integer" && inputValue.length > 0) {
+                // Xử lý trường hợp nhập "000" để tạo số lớn hơn
+                // Ví dụ: "1" + "000" = "1000", "10" + "000" = "10000"
+                // Nếu vượt quá maxValue, sẽ tự động cắt bớt số 0
                 var newInputValue_1 = inputValue + "000";
                 var newValue_1 = Number(newInputValue_1);
                 var maxValueNumber_1 = Number(maxValue);
+                // Kiểm tra nếu giá trị vượt quá maxValue, cắt bớt số 0
+                if (!isNaN(newValue_1) &&
+                    !isNaN(maxValueNumber_1) &&
+                    newValue_1 > maxValueNumber_1) {
+                    // Tìm số 0 tối đa có thể thêm vào mà không vượt quá maxValue
+                    var tempValue = inputValue;
+                    var tempNewValue = Number(tempValue + "000");
+                    // Giảm dần số 0 cho đến khi không vượt quá maxValue
+                    while (tempNewValue > maxValueNumber_1 && tempValue.endsWith("0")) {
+                        tempValue = tempValue.slice(0, -1);
+                        tempNewValue = Number(tempValue + "000");
+                    }
+                    // Nếu vẫn vượt quá, chỉ thêm số 0 có thể
+                    if (tempNewValue > maxValueNumber_1) {
+                        // Tìm số 0 tối đa có thể thêm
+                        var maxZeros = 0;
+                        for (var i = 1; i <= 3; i++) {
+                            var testValue = Number(inputValue + "0".repeat(i));
+                            if (testValue <= maxValueNumber_1) {
+                                maxZeros = i;
+                            }
+                            else {
+                                break;
+                            }
+                        }
+                        if (maxZeros > 0) {
+                            newInputValue_1 = inputValue + "0".repeat(maxZeros);
+                            newValue_1 = Number(newInputValue_1);
+                        }
+                        else {
+                            // Không thể thêm số 0 nào
+                            return;
+                        }
+                    }
+                    else {
+                        newInputValue_1 = tempValue + "000";
+                        newValue_1 = Number(newInputValue_1);
+                    }
+                }
+                // Kiểm tra xem có thể nhập được không sau khi xử lý "000"
                 if (!isNaN(newValue_1) &&
                     !isNaN(maxValueNumber_1) &&
                     newValue_1 <= maxValueNumber_1) {
@@ -7293,6 +7574,10 @@ var NumberKeyboard = function (_a) {
                 if (inputValue === "0" || inputValue === "") {
                     setInputValue("0.");
                 }
+                else if (inputValue === "-") {
+                    // Nếu chỉ có dấu trừ, thêm "0."
+                    setInputValue("-0.");
+                }
                 else {
                     setInputValue(function (prev) { return prev + key; });
                 }
@@ -7301,8 +7586,52 @@ var NumberKeyboard = function (_a) {
             return;
         }
         if (isFirstInput) {
-            setInputValue(key);
-            setIsFirstInput(false);
+            // Nếu type là float và key là "0", không cho phép nhập số 0 đầu tiên
+            if (type === "float" && (key === "0" || key === "000")) {
+                return;
+            }
+            // Kiểm tra xem có thể nhập được không khi là lần đầu
+            var newValue_2 = Number(key);
+            var maxValueNumber_2 = Number(maxValue);
+            if (!isNaN(newValue_2) && !isNaN(maxValueNumber_2)) {
+                var canInput_1 = false;
+                if (newValue_2 < 0) {
+                    // Với số âm, kiểm tra giá trị tuyệt đối không vượt quá maxValue
+                    var absNewValue = Math.abs(newValue_2);
+                    var absMaxValue = Math.abs(maxValueNumber_2);
+                    canInput_1 = absNewValue <= absMaxValue;
+                }
+                else {
+                    // Với số dương, kiểm tra bình thường
+                    canInput_1 = newValue_2 <= maxValueNumber_2;
+                }
+                if (canInput_1) {
+                    // Nếu inputValue rỗng hoặc chỉ có dấu trừ, thay thế hoàn toàn
+                    if (inputValue === "" || inputValue === "-") {
+                        setInputValue(key);
+                    }
+                    else {
+                        // Nếu đã có giá trị, thêm vào cuối
+                        setInputValue(inputValue + key);
+                    }
+                    setIsFirstInput(false);
+                }
+                else {
+                    // Nếu vượt quá maxValue ngay từ đầu, không cho phép nhập
+                    return;
+                }
+            }
+            else {
+                // Nếu inputValue rỗng hoặc chỉ có dấu trừ, thay thế hoàn toàn
+                if (inputValue === "" || inputValue === "-") {
+                    setInputValue(key);
+                }
+                else {
+                    // Nếu đã có giá trị, thêm vào cuối
+                    setInputValue(inputValue + key);
+                }
+                setIsFirstInput(false);
+            }
             return;
         }
         // Kiểm tra nếu input bắt đầu bằng 0 và không có dấu chấm
@@ -7322,20 +7651,79 @@ var NumberKeyboard = function (_a) {
         var newInputValue = inputValue + key;
         var newValue = Number(newInputValue);
         var maxValueNumber = Number(maxValue);
-        if (!isNaN(newValue) &&
-            !isNaN(maxValueNumber) &&
-            newValue <= maxValueNumber) {
+        // Kiểm tra xem có thể nhập được không
+        var canInput = false;
+        var shouldCheckLength = true;
+        if (!isNaN(newValue) && !isNaN(maxValueNumber)) {
+            if (newValue < 0) {
+                // Với số âm, kiểm tra giá trị tuyệt đối không vượt quá maxValue
+                var absNewValue = Math.abs(newValue);
+                var absMaxValue = Math.abs(maxValueNumber);
+                if (absNewValue <= absMaxValue) {
+                    canInput = true;
+                }
+                else {
+                    // Nếu vượt quá maxValue, kiểm tra xem có thể nhập được không
+                    var maxValueStr = absMaxValue.toString();
+                    inputValue.length;
+                    var newLength = newInputValue.length;
+                    // Nếu độ dài mới lớn hơn độ dài của maxValue, không cho phép nhập
+                    if (newLength > maxValueStr.length) {
+                        return;
+                    }
+                    // Nếu độ dài bằng nhau, kiểm tra giá trị
+                    if (newLength === maxValueStr.length && absNewValue > absMaxValue) {
+                        return;
+                    }
+                    // Nếu độ dài nhỏ hơn, có thể nhập được (sẽ kiểm tra khi nhập tiếp)
+                    canInput = true;
+                    shouldCheckLength = false;
+                }
+            }
+            else {
+                // Với số dương, kiểm tra bình thường
+                if (newValue <= maxValueNumber) {
+                    canInput = true;
+                }
+                else {
+                    // Nếu vượt quá maxValue, kiểm tra xem có thể nhập được không
+                    var maxValueStr = maxValueNumber.toString();
+                    inputValue.length;
+                    var newLength = newInputValue.length;
+                    // Nếu độ dài mới lớn hơn độ dài của maxValue, không cho phép nhập
+                    if (newLength > maxValueStr.length) {
+                        return;
+                    }
+                    // Nếu độ dài bằng nhau, kiểm tra giá trị
+                    if (newLength === maxValueStr.length && newValue > maxValueNumber) {
+                        return;
+                    }
+                    // Nếu độ dài nhỏ hơn, có thể nhập được (sẽ kiểm tra khi nhập tiếp)
+                    // Ví dụ: maxValue = 999, inputValue = "99", nhập "9" → "999" (OK)
+                    canInput = true;
+                    shouldCheckLength = false;
+                }
+            }
+        }
+        if (canInput) {
             if (inputValue.includes(".")) {
-                var _a = inputValue.split("."), intPart = _a[0], _b = _a[1], decimalPart = _b === void 0 ? "" : _b;
-                if (intPart.length < 12 && decimalPart.length === 0) {
+                // Xử lý số thập phân
+                var _a = inputValue.split("."); _a[0]; var _b = _a[1], decimalPart = _b === void 0 ? "" : _b;
+                if (newInputValue.length <= 12 && decimalPart.length === 0) {
                     setInputValue(function (prev) { return prev + key; });
                 }
-                else if (decimalPart.length < formatDecimal) {
+                else if (newInputValue.length <= 12 &&
+                    decimalPart.length < formatDecimal) {
                     setInputValue(function (prev) { return prev + key; });
                 }
             }
             else {
-                if (inputValue.length < 12) {
+                // Xử lý số nguyên
+                if (shouldCheckLength && newInputValue.length <= 12) {
+                    setInputValue(function (prev) { return prev + key; });
+                }
+                else if (!shouldCheckLength) {
+                    // Nếu không cần kiểm tra độ dài (đã kiểm tra maxValue ở trên)
                     setInputValue(function (prev) { return prev + key; });
                 }
             }
@@ -7394,11 +7782,12 @@ var NumberKeyboard = function (_a) {
                     React__default.createElement(TouchableOpacity, { 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, onPress: handleSave },
+                    React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: [styles.actionButton, !canSave && { opacity: 0.5 }], onPress: handleSave, disabled: !canSave },
                         React__default.createElement(Text$1, { style: [
                                 styles.actionText,
                                 styles.text16,
                                 { color: colors.textBrandDefault },
+                                !canSave && { color: colors.textSecondary },
                             ] }, "L\u01B0u")))))));
 };
 var styles = StyleSheet.create(__assign(__assign({}, containerStyles), { modalOverlay: {