sapo-components-ui-rn 1.0.63 → 1.0.65

package/dist/index.esm.js

@@ -1,8 +1,9 @@
-import { Platform, Dimensions, StyleSheet, useColorScheme, Animated, Easing, View as View$1, I18nManager, TouchableOpacity, NativeModules, Switch as Switch$1, Text as Text$2, Pressable, useWindowDimensions, TextInput as TextInput$1, Modal, ActivityIndicator as ActivityIndicator$1, ImageBackground, Image as Image$2 } from 'react-native';
+import { Platform, Dimensions, StyleSheet, useColorScheme, Animated, Easing, View as View$1, I18nManager, TouchableOpacity, Text as Text$2, Pressable, useWindowDimensions, TextInput as TextInput$1, Modal, ActivityIndicator as ActivityIndicator$1, ImageBackground, Image as Image$2 } from 'react-native';
 import * as React$3 from 'react';
-import React__default, { memo, forwardRef as forwardRef$1, useMemo, useState, useEffect, useRef, useImperativeHandle, useCallback } from 'react';
+import React__default, { memo, useCallback, forwardRef as forwardRef$1, useMemo, useState, useEffect, useRef, useImperativeHandle } from 'react';
 import require$$1 from 'deepmerge';
 import color from 'color';
+import Animated$1, { useSharedValue, withSequence, withTiming, withSpring, useAnimatedStyle, interpolateColor, useAnimatedReaction } from 'react-native-reanimated';
 import FontAwesome from 'react-native-vector-icons/FontAwesome';
 import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -1708,7 +1709,7 @@ var ActivityIndicator = function (_a) {
         height: size / 2,
         overflow: "hidden",
     };
-    return (React$3.createElement(View$1, __assign({ style: [styles$i.container, style] }, rest, { accessible: true, accessibilityRole: "progressbar", accessibilityState: { busy: animating } }),
+    return (React$3.createElement(View$1, __assign({ style: [styles$k.container, style] }, rest, { accessible: true, accessibilityRole: "progressbar", accessibilityState: { busy: animating } }),
         React$3.createElement(Animated.View, { style: [{ width: size, height: size, opacity: fade }], collapsable: false }, [0, 1].map(function (index) {
             // Thanks to https://github.com/n4kz/react-native-indicators for the great work
             var inputRange = Array.from(new Array(frames), function (_, frameIndex) { return frameIndex / (frames - 1); });
@@ -1753,7 +1754,7 @@ var ActivityIndicator = function (_a) {
                 borderWidth: size / 10,
                 borderRadius: size / 2,
             };
-            return (React$3.createElement(Animated.View, { key: index, style: [styles$i.layer] },
+            return (React$3.createElement(Animated.View, { key: index, style: [styles$k.layer] },
                 React$3.createElement(Animated.View, { style: layerStyle },
                     React$3.createElement(Animated.View, { style: [containerStyle, offsetStyle], collapsable: false },
                         React$3.createElement(Animated.View, { style: viewportStyle },
@@ -1761,7 +1762,7 @@ var ActivityIndicator = function (_a) {
                                 React$3.createElement(Animated.View, { style: lineStyle })))))));
         }))));
 };
-var styles$i = StyleSheet.create({
+var styles$k = StyleSheet.create({
     container: {
         justifyContent: "center",
         alignItems: "center",
@@ -1869,11 +1870,11 @@ var ProgressBar = function (_a) {
             ? {}
             : { min: 0, max: 100, now: Math.round(progress * 100) }, testID: testID }),
         React$3.createElement(Animated.View, { style: [
-                styles$h.container,
+                styles$j.container,
                 { backgroundColor: trackTintColor, opacity: fade },
                 style,
             ] }, width ? (React$3.createElement(Animated.View, { testID: "".concat(testID, "-fill"), style: [
-                styles$h.progressBar,
+                styles$j.progressBar,
                 {
                     width: width,
                     backgroundColor: tintColor,
@@ -1917,7 +1918,7 @@ var ProgressBar = function (_a) {
                 fillStyle,
             ] })) : null)));
 };
-var styles$h = StyleSheet.create({
+var styles$j = StyleSheet.create({
     container: {
         height: 4,
         overflow: "hidden",
@@ -2055,109 +2056,86 @@ var ViewCustom = function (_a) {
 };
 var View = React__default.memo(ViewCustom);
 
-var getCheckedColor = function (_a) {
-    var theme = _a.theme, color = _a.color;
-    if (color) {
-        return color;
-    }
-    return theme.colors.toggleBackgroundActive;
-};
-var getThumbTintColor = function (_a) {
-    var theme = _a.theme, disabled = _a.disabled, value = _a.value, checkedColor = _a.checkedColor;
-    var isIOS = Platform.OS === "ios";
-    if (isIOS) {
-        return undefined;
-    }
-    if (disabled) {
-        if (theme.dark) {
-            return theme.colors.toggleBackgroundDefault;
-        }
-        return theme.colors.toggleBackgroundDefault;
-    }
-    if (value) {
-        return checkedColor;
-    }
-    if (theme.dark) {
-        return theme.colors.toggleBackgroundDefault;
-    }
-    return theme.colors.toggleBackgroundDefault;
-};
-var getOnTintColor = function (_a) {
-    var theme = _a.theme, disabled = _a.disabled, value = _a.value, checkedColor = _a.checkedColor;
-    var isIOS = Platform.OS === "ios";
-    if (isIOS) {
-        return checkedColor;
-    }
-    if (disabled) {
-        if (theme.dark) {
-            return theme.colors.toggleBackgroundDefault;
-        }
-        return theme.colors.toggleBackgroundDefault;
-    }
-    if (value) {
-        return checkedColor;
-    }
-    if (theme.dark) {
-        return theme.colors.toggleBackgroundDefault;
-    }
-    return theme.colors.toggleBackgroundDefault;
-};
-var getSwitchColor = function (_a) {
-    var theme = _a.theme, disabled = _a.disabled, value = _a.value, color = _a.color;
-    var checkedColor = getCheckedColor({ theme: theme, color: color });
-    return {
-        onTintColor: getOnTintColor({ theme: theme, disabled: disabled, value: value, checkedColor: checkedColor }),
-        thumbTintColor: getThumbTintColor({ theme: theme, disabled: disabled, value: value, checkedColor: checkedColor }),
-        checkedColor: checkedColor,
-    };
-};
-
-var version = NativeModules.PlatformConstants
-    ? NativeModules.PlatformConstants.reactNativeVersion
-    : undefined;
-/**
- * Switch is a visual toggle between two mutually exclusive states — on and off.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Switch } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [isSwitchOn, setIsSwitchOn] = React.useState(false);
- *
- *   const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);
- *
- *   return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />;
- * };
- *
- * export default MyComponent;
- * ```
- */
-var Switch = function (_a) {
-    var value = _a.value, disabled = _a.disabled, onValueChange = _a.onValueChange, color = _a.color; _a.theme; var rest = __rest(_a, ["value", "disabled", "onValueChange", "color", "theme"]);
+var Switch = memo(function (_a) {
+    var value = _a.value, disabled = _a.disabled, onValueChange = _a.onValueChange;
     var theme = useInternalTheme();
-    var _b = getSwitchColor({
-        theme: theme,
-        disabled: disabled,
-        value: value,
-        color: color,
-    }), onTintColor = _b.onTintColor, thumbTintColor = _b.thumbTintColor;
-    var props = version && version.major === 0 && version.minor <= 56
-        ? {
-            onTintColor: onTintColor,
-            thumbTintColor: thumbTintColor,
-        }
-        : {
-            thumbColor: thumbTintColor,
-            trackColor: {
-                true: onTintColor,
-                false: onTintColor,
-            },
+    var colors = theme.colors;
+    var progress = useSharedValue(value ? 1 : 0);
+    var handleSwitch = useCallback(function () {
+        if (disabled)
+            return;
+        var newValue = !value;
+        progress.value = withSequence(withTiming(newValue ? 1 : 0, {
+            duration: 150,
+        }), withSpring(newValue ? 1 : 0, {
+            damping: 20,
+            stiffness: 200,
+            mass: 0.5,
+            velocity: 0.5,
+        }));
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(newValue);
+    }, [disabled, value, onValueChange]);
+    var animatedStyle = useAnimatedStyle(function () {
+        return {
+            transform: [{ translateX: progress.value * 20 }],
+        };
+    });
+    var backgroundColor = useAnimatedStyle(function () {
+        return {
+            backgroundColor: interpolateColor(progress.value, [0, 1], [colors.toggleBackgroundDefault, colors.toggleBackgroundActive]),
         };
+    });
+    useAnimatedReaction(function () { return value; }, function (currentValue) {
+        if (currentValue !== undefined) {
+            progress.value = withSequence(withTiming(currentValue ? 1 : 0, {
+                duration: 150,
+            }), withSpring(currentValue ? 1 : 0, {
+                damping: 20,
+                stiffness: 200,
+                mass: 0.5,
+                velocity: 0.5,
+            }));
+        }
+    }, [value]);
     return (React$3.createElement(View, { row: true },
-        React$3.createElement(Switch$1, __assign({ value: value, disabled: disabled, onValueChange: disabled ? undefined : onValueChange }, props, rest))));
-};
+        React$3.createElement(TouchableOpacity, { activeOpacity: 1, onPress: handleSwitch, disabled: disabled, style: disabled ? { opacity: 0.6 } : {} },
+            React$3.createElement(Animated$1.View, { style: [
+                    styles$i.vSegment,
+                    backgroundColor,
+                    {
+                        width: 52,
+                        height: 32,
+                    },
+                ] },
+                React$3.createElement(Animated$1.View, { style: [
+                        styles$i.animated,
+                        animatedStyle,
+                        {
+                            width: 28,
+                            height: 28,
+                            borderRadius: 14,
+                            backgroundColor: colors.surfacePrimaryDefault,
+                        },
+                    ] })))));
+});
+var styles$i = StyleSheet.create({
+    vSegment: {
+        overflow: "hidden",
+        borderRadius: 100,
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    animated: {
+        position: "absolute",
+        // shadowColor: "#000000",
+        // shadowOffset: { width: 0, height: 0 },
+        // shadowOpacity: 0.15,
+        // shadowRadius: BORDER_RADIUS_6,
+        // elevation: 5,
+        marginHorizontal: 2,
+    },
+});
+Switch.displayName = "Switch";
 
 var AdornmentType;
 (function (AdornmentType) {
@@ -2516,7 +2494,7 @@ var TextInputAffix = function (_a) {
     var textColor = getTextColor({ theme: theme, disabled: disabled });
     var content = (React__default.createElement(Text$2, { maxFontSizeMultiplier: maxFontSizeMultiplier, style: [{ color: textColor }, textStyle, labelStyle], onLayout: onTextLayout, testID: "".concat(testID, "-text") }, text));
     return (React__default.createElement(Animated.View, { style: [
-            styles$g.container,
+            styles$h.container,
             style,
             {
                 opacity: (visible === null || visible === void 0 ? void 0 : visible.interpolate({
@@ -2527,7 +2505,7 @@ var TextInputAffix = function (_a) {
         ], onLayout: onLayout, testID: testID }, onPress ? (React__default.createElement(Pressable, { onPress: onPress, accessibilityRole: "button", accessibilityLabel: accessibilityLabel }, content)) : (content)));
 };
 TextInputAffix.displayName = "TextInput.Affix";
-var styles$g = StyleSheet.create({
+var styles$h = StyleSheet.create({
     container: {
         position: "absolute",
         justifyContent: "center",
@@ -2585,13 +2563,13 @@ var AnimatedText = forwardRef(function AnimatedText(_a, ref) {
         }
         return (React$3.createElement(Animated.Text, __assign({ ref: ref }, rest, { style: [
                 font,
-                styles$f.text,
+                styles$g.text,
                 { writingDirection: writingDirection, color: theme.colors.backgroundPrimary },
                 style,
             ] })));
     }
 });
-var styles$f = StyleSheet.create({
+var styles$g = StyleSheet.create({
     text: {
         textAlign: "left",
     },
@@ -5167,7 +5145,7 @@ var InputLabel = function (props) {
     return (
     // Position colored placeholder and gray placeholder on top of each other and crossfade them
     // This gives the effect of animating the color, but allows us to use native driver
-    React__default.createElement(View$1, { pointerEvents: "none", style: [StyleSheet.absoluteFill, styles$e.overflow, styles$e.labelContainer] },
+    React__default.createElement(View$1, { pointerEvents: "none", style: [StyleSheet.absoluteFill, styles$f.overflow, styles$f.labelContainer] },
         React__default.createElement(Animated.View, { pointerEvents: "none", style: [
                 StyleSheet.absoluteFill,
                 Platform.OS !== "web" && { width: width },
@@ -5209,7 +5187,7 @@ var InputLabel = function (props) {
                     label,
                     required && React__default.createElement(Text$1, { color: theme.colors.textErrorDefault }, " *"))))));
 };
-var styles$e = StyleSheet.create({
+var styles$f = StyleSheet.create({
     overflow: {
         overflow: "hidden",
     },
@@ -5222,8 +5200,8 @@ var InputLabel$1 = React__default.memo(InputLabel);
 var Outline = function (_a) {
     var label = _a.label; _a.activeColor; _a.backgroundColor; _a.hasActiveOutline; _a.focused; _a.outlineColor; _a.roundness; var style = _a.style;
     return (React$3.createElement(View$1, { testID: "text-input-outline", pointerEvents: "none", style: [
-            styles$d.outline,
-            !label && styles$d.noLabelOutline,
+            styles$e.outline,
+            !label && styles$e.noLabelOutline,
             // eslint-disable-next-line react-native/no-inline-styles
             {
             // backgroundColor,
@@ -5234,7 +5212,7 @@ var Outline = function (_a) {
             style,
         ] }));
 };
-var styles$d = StyleSheet.create({
+var styles$e = StyleSheet.create({
     outline: {
         position: "absolute",
         left: 0,
@@ -5480,7 +5458,7 @@ var TextInputFlat = function (_a) {
         label: label,
         scale: fontScale,
         isAndroid: isAndroid,
-        styles: StyleSheet.flatten(dense ? styles$c.inputFlatDense : styles$c.inputFlat),
+        styles: StyleSheet.flatten(dense ? styles$d.inputFlatDense : styles$d.inputFlat),
     };
     var pad = calculatePadding(paddingSettings);
     adjustPaddingFlat(__assign(__assign({}, paddingSettings), { pad: pad }));
@@ -5506,7 +5484,7 @@ var TextInputFlat = function (_a) {
         onLabelTextLayout: onLabelTextLayout,
         placeholderOpacity: placeholderOpacity,
         labelError: error,
-        placeholderStyle: styles$c.placeholder,
+        placeholderStyle: styles$d.placeholder,
         baseLabelTranslateY: baseLabelTranslateY,
         baseLabelTranslateX: baseLabelTranslateX,
         font: font,
@@ -5592,7 +5570,7 @@ var TextInputFlat = function (_a) {
                 left ? React$3.createElement(Spacer, { width: SPACE_8 }) : React$3.createElement(Spacer, { width: SPACE_12 })),
             React$3.createElement(Outline, { style: outlineStyle, label: label, roundness: roundness, hasActiveOutline: hasActiveOutline, focused: parentState.focused, activeColor: activeColor, outlineColor: outlineColor, backgroundColor: backgroundColor }),
             React$3.createElement(View$1, { onLayout: onInputLayout, style: [
-                    styles$c.labelContainer,
+                    styles$d.labelContainer,
                     {
                         minHeight: minHeight,
                         flex: 1,
@@ -5602,7 +5580,7 @@ var TextInputFlat = function (_a) {
                 React$3.createElement(View$1, { style: { flexDirection: "row", alignItems: "flex-end" } },
                     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$c.input,
+                            styles$d.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", textAlign: textAlign
                                     ? textAlign
                                     : I18nManager.getConstants().isRTL
@@ -5610,7 +5588,7 @@ var TextInputFlat = function (_a) {
                                         : "left", marginTop: Platform.OS === "android" ? SPACE_8 : SPACE_2 }),
                             contentStyle,
                         ] })))),
-            !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$c.clearButton },
+            !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: styles$d.clearButton },
                 React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: SPACE_12 })),
             React$3.createElement(View$1, { style: {
                     flexDirection: "row",
@@ -5621,10 +5599,10 @@ var TextInputFlat = function (_a) {
                 right && (React$3.createElement(View$1, { style: {
                         paddingRight: SPACE_12,
                     } }, right)))),
-        error && (textError === null || textError === void 0 ? void 0 : textError.toString()) !== "" && (React$3.createElement(View$1, { style: styles$c.vError },
+        error && (textError === null || textError === void 0 ? void 0 : textError.toString()) !== "" && (React$3.createElement(View$1, { style: styles$d.vError },
             React$3.createElement(Text$1, { size: 12, numberOfLines: 1, color: theme.colors.textErrorDefault }, textError)))));
 };
-var styles$c = StyleSheet.create({
+var styles$d = StyleSheet.create({
     placeholder: {
         position: "absolute",
         left: 0,
@@ -5780,7 +5758,7 @@ var TextInputDefault = function (_a) {
                             ? 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$b.input,
+                        styles$c.input,
                         __assign(__assign({}, font), { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight, color: inputTextColor, textAlignVertical: multiline ? "top" : "center", textAlign: textAlign
                                 ? textAlign
                                 : I18nManager.getConstants().isRTL
@@ -5788,17 +5766,17 @@ var TextInputDefault = function (_a) {
                                     : "left", height: height ? height : 48, paddingTop: getPaddingTopValue(), paddingBottom: multiline ? CONSTANTS.SPACE_4 : 0 }),
                         contentStyle,
                     ] }))),
-            !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: multiline ? styles$b.clearButtonMultiline : styles$b.clearButton },
+            !disabled && clearButton && inputValue ? (React$3.createElement(TouchableOpacity, { onPress: handleClear, style: multiline ? styles$c.clearButtonMultiline : styles$c.clearButton },
                 React$3.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))) : (React$3.createElement(Spacer, { width: CONSTANTS.SPACE_12 })),
             right && !clearButton && React$3.createElement(Spacer, { width: CONSTANTS.SPACE_2 }),
             right && (React$3.createElement(View, { style: {
                     height: "100%",
                     paddingRight: CONSTANTS.SPACE_12,
                 } }, right))),
-        error && (textError === null || textError === void 0 ? void 0 : textError.toString()) !== "" && (React$3.createElement(View, { style: styles$b.vError },
+        error && (textError === null || textError === void 0 ? void 0 : textError.toString()) !== "" && (React$3.createElement(View, { style: styles$c.vError },
             React$3.createElement(Text$1, { size: 12, numberOfLines: 1, color: theme.colors.textErrorDefault }, textError)))));
 };
-var styles$b = StyleSheet.create({
+var styles$c = StyleSheet.create({
     input: {
         margin: 0,
         flex: 1,
@@ -5949,7 +5927,7 @@ var containerStyles = StyleSheet.create({
     },
 });
 
-function formatNumberInput(value, formatDecimal) {
+function formatNumberInput$1(value, formatDecimal) {
     if (!value)
         return "0";
     // Xử lý số âm
@@ -6069,11 +6047,11 @@ var TextInputNumber = function (_a) {
     return (React__default.createElement(View, null,
         React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onShowModalKeyboard }, props, { disabled: disabled || false }),
             React__default.createElement(View, { style: [
-                    styles$a.container,
+                    styles$b.container,
                     {
                         borderRadius: BORDER_RADIUS_6,
                     },
-                    [styles$a.border, { borderColor: colors.borderPrimaryDefault }],
+                    [styles$b.border, { borderColor: colors.borderPrimaryDefault }],
                     textError.length > 0 && [
                         {
                             borderColor: colors.borderErrorDefault,
@@ -6081,7 +6059,7 @@ var TextInputNumber = function (_a) {
                         },
                     ],
                     disabled && [
-                        styles$a.disabled,
+                        styles$b.disabled,
                         {
                             borderColor: colors.borderPrimaryDisabled,
                             backgroundColor: colors.surfacePrimaryDisabled,
@@ -6109,7 +6087,7 @@ var TextInputNumber = function (_a) {
                             React__default.createElement(Text$1, { numberOfLines: 1, color: getColorValue, style: [disabled && disabledTextStyle] },
                                 checkValueEmpty()
                                     ? label
-                                    : formatNumberInput(numberValue, formatDecimal),
+                                    : formatNumberInput$1(numberValue, formatDecimal),
                                 checkValueEmpty() && required && (React__default.createElement(Text$1, { color: colors.textErrorDefault }, " *")))))),
                 clearButton && !checkValueEmpty() && (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, onPress: handleClearInput },
                     React__default.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24 }))),
@@ -6118,41 +6096,41 @@ var TextInputNumber = function (_a) {
         !disabled && textError.length > 0 && (React__default.createElement(View, { paddingHorizontal: SPACE_12, paddingVertical: SPACE_4 },
             React__default.createElement(Text$1, { size: 12, numberOfLines: 1, color: theme.colors.textErrorDefault }, textError))),
         React__default.createElement(Modal, { visible: isShowModalKeyboard, transparent: true, animationType: "fade", onRequestClose: onCloseModalKeyboard },
-            React__default.createElement(TouchableOpacity, { style: styles$a.modalOverlay, activeOpacity: 1, onPress: onCloseModalKeyboard },
-                React__default.createElement(View, { onPress: function () { }, activeOpacity: 1, backgroundColor: colors.surfacePrimaryDefault, style: styles$a.modalContent },
-                    React__default.createElement(Text$1, { style: styles$a.modalTitle }, label),
+            React__default.createElement(TouchableOpacity, { style: styles$b.modalOverlay, activeOpacity: 1, onPress: onCloseModalKeyboard },
+                React__default.createElement(View, { onPress: function () { }, activeOpacity: 1, backgroundColor: colors.surfacePrimaryDefault, style: styles$b.modalContent },
+                    React__default.createElement(Text$1, { style: styles$b.modalTitle }, label),
                     React__default.createElement(View, { width: "100%" },
                         React__default.createElement(View, { paddingHorizontal: SPACE_40 },
-                            React__default.createElement(Text$1, { numberOfLines: 1, style: styles$a.valueText }, formatNumberInput(inputValue, formatDecimal) || "0")),
-                        React__default.createElement(TouchableOpacity, { onPress: handleClear, style: styles$a.clearButton },
+                            React__default.createElement(Text$1, { numberOfLines: 1, style: styles$b.valueText }, formatNumberInput$1(inputValue, formatDecimal) || "0")),
+                        React__default.createElement(TouchableOpacity, { onPress: handleClear, style: styles$b.clearButton },
                             React__default.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24, color: colors.textSecondary }))),
-                    React__default.createElement(View, { style: styles$a.keyboardGrid }, [
+                    React__default.createElement(View, { style: styles$b.keyboardGrid }, [
                         ["1", "2", "3"],
                         ["4", "5", "6"],
                         ["7", "8", "9"],
                         [".", "0", "del"],
-                    ].map(function (row, rowIndex) { return (React__default.createElement(View, { key: rowIndex, style: styles$a.keyboardRow }, row.map(function (key) { return (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, key: key, style: [
-                            styles$a.keyButton,
-                            key === "." && type === "integer" && styles$a.disabledKey,
+                    ].map(function (row, rowIndex) { return (React__default.createElement(View, { key: rowIndex, style: styles$b.keyboardRow }, row.map(function (key) { return (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, key: key, style: [
+                            styles$b.keyButton,
+                            key === "." && type === "integer" && styles$b.disabledKey,
                         ], onPress: function () { return handleKeyPress(key); }, disabled: key === "." && type === "integer" }, key === "del" ? (React__default.createElement(Icon$1, { name: "IconDelNumber", type: "Svg", size: 24 })) : (React__default.createElement(Text$1, { style: [
-                            styles$a.keyText,
+                            styles$b.keyText,
                             key === "." &&
                                 type === "integer" &&
-                                styles$a.disabledKeyText,
+                                styles$b.disabledKeyText,
                         ] }, key)))); }))); })),
-                    React__default.createElement(View, { style: styles$a.actionRow },
-                        React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: styles$a.actionButton, onPress: onCloseModalKeyboard },
-                            React__default.createElement(Text$1, { style: styles$a.actionText }, "\u0110\u00F3ng")),
+                    React__default.createElement(View, { style: styles$b.actionRow },
+                        React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: styles$b.actionButton, onPress: onCloseModalKeyboard },
+                            React__default.createElement(Text$1, { style: styles$b.actionText }, "\u0110\u00F3ng")),
                         React__default.createElement(Spacer, { style: {
                                 height: "100%",
                             }, width: 1, backgroundColor: colors.borderPrimaryDefault }),
-                        React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: styles$a.actionButton, onPress: handleSave },
+                        React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: styles$b.actionButton, onPress: handleSave },
                             React__default.createElement(Text$1, { style: [
-                                    styles$a.actionText,
+                                    styles$b.actionText,
                                     { color: colors.textBrandDefault },
                                 ] }, "L\u01B0u"))))))));
 };
-var styles$a = StyleSheet.create(__assign(__assign({}, containerStyles), { disabled: { opacity: 0.6 }, container: {
+var styles$b = StyleSheet.create(__assign(__assign({}, containerStyles), { disabled: { opacity: 0.6 }, container: {
         height: 48,
         flexDirection: "row",
         alignItems: "center",
@@ -6486,7 +6464,7 @@ var Button = function (_a) {
         switch (mode) {
             case "outlined":
                 return [
-                    styles$9.border,
+                    styles$a.border,
                     { borderColor: colors.borderBrandDefault },
                     critical && {
                         backgroundColor: colors.surfacePrimaryDefault,
@@ -6528,7 +6506,7 @@ var Button = function (_a) {
     return (React__default.createElement(View, { row: !full },
         React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || false }),
             React__default.createElement(View, { style: [
-                    styles$9.button,
+                    styles$a.button,
                     {
                         borderRadius: CONSTANTS.BORDER_RADIUS_6,
                     },
@@ -6538,9 +6516,9 @@ var Button = function (_a) {
                     borderColor && { borderColor: borderColor },
                     backgroundColor && { backgroundColor: backgroundColor },
                     renderButtonStyle(),
-                    buttonSize === "small" && styles$9.small,
+                    buttonSize === "small" && styles$a.small,
                     disabled && [
-                        styles$9.disabled,
+                        styles$a.disabled,
                         {
                             borderColor: colors.borderPrimaryDisabled,
                             backgroundColor: colors.surfacePrimaryDisabled,
@@ -6557,7 +6535,7 @@ var Button = function (_a) {
                 !isLoading && right,
                 React__default.createElement(Spacer, { width: right ? CONSTANTS.SPACE_12 : CONSTANTS.SPACE_16 })))));
 };
-var styles$9 = StyleSheet.create({
+var styles$a = StyleSheet.create({
     disabled: { opacity: 0.6 },
     button: {
         height: CONSTANTS.BUTTON_HEIGHT,
@@ -6574,13 +6552,13 @@ var styles$9 = StyleSheet.create({
         height: CONSTANTS.BUTTON_HEIGHT_SMALL,
     },
 });
-var index$2 = React__default.memo(Button);
+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;
     var colors = useInternalTheme().colors;
     return (React__default.createElement(TouchableOpacity, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || isLoading, style: [
-            styles$8.btn,
+            styles$9.btn,
             top > 0 && { top: top },
             right > 0 && { right: right },
             left > 0 && { left: left },
@@ -6606,12 +6584,12 @@ var FloatingButton = function (_a) {
                 style,
             ] }, props), isLoading ? React__default.createElement(ActivityIndicator$1, { size: "small" }) : children)));
 };
-var styles$8 = StyleSheet.create({
+var styles$9 = StyleSheet.create({
     btn: {
         position: "absolute",
     },
 });
-var index$1 = memoDeepEqual(FloatingButton);
+var index$2 = memoDeepEqual(FloatingButton);
 
 var ViewVisibleAnimated = React__default.memo(React__default.forwardRef(function (_a, ref) {
     var onShowStart = _a.onShowStart, onShowDone = _a.onShowDone, onDone = _a.onDone, style = _a.style, children = _a.children, _b = _a.autoHide, autoHide = _b === void 0 ? false : _b, _c = _a.scaleEnable, scaleEnable = _c === void 0 ? true : _c, _d = _a.translateEnable, translateEnable = _d === void 0 ? true : _d, _e = _a.delay, delay = _e === void 0 ? 100 : _e, _f = _a.duration, duration = _f === void 0 ? 250 : _f, _g = _a.timeout, timeout = _g === void 0 ? 1000 : _g, _h = _a.autoShow, autoShow = _h === void 0 ? true : _h, _j = _a.pointerEvents, pointerEvents = _j === void 0 ? "auto" : _j, _k = _a.scaleType, scaleType = _k === void 0 ? "in" : _k, _l = _a.renderHiddenContent, renderHiddenContent = _l === void 0 ? null : _l, _m = _a.disableHiddenContent, disableHiddenContent = _m === void 0 ? false : _m;
@@ -6846,7 +6824,7 @@ var Toast = memoWithRef(function (_props, ref) {
         }
     };
     return (React__default.createElement(ViewVisibleAnimated, { ref: viewVisibleAnimatedRef, autoShow: false, scaleEnable: true, style: [
-            styles$7.container,
+            styles$8.container,
             options.position === POSITION.BOTTOM && {
                 bottom: bottom
                     ? bottom + handleToastBottomHeight()
@@ -6857,7 +6835,7 @@ var Toast = memoWithRef(function (_props, ref) {
             },
         ] },
         React__default.createElement(View, { row: !options.title, center: !options.title, full: true, onPress: onPressToast, style: [
-                styles$7.wrapContent,
+                styles$8.wrapContent,
                 {
                     shadowColor: "black",
                     shadowOffset: {
@@ -6874,9 +6852,9 @@ var Toast = memoWithRef(function (_props, ref) {
                     React__default.createElement(Icon$1, { name: getSourceIcon(), type: "Svg", size: 20 })),
                 React__default.createElement(View, { full: true, paddingLeft: CONSTANTS.SPACE_8 },
                     React__default.createElement(Text$1, { bold: true, color: colors.textOnFillDefault }, options.title),
-                    message.toString().length > 0 && (React__default.createElement(Text$1, { color: colors.textOnFillDefault, numberOfLines: 4, style: !options.title && styles$7.wrapMess }, message)))))));
+                    message.toString().length > 0 && (React__default.createElement(Text$1, { color: colors.textOnFillDefault, numberOfLines: 4, style: !options.title && styles$8.wrapMess }, message)))))));
 });
-var styles$7 = StyleSheet.create({
+var styles$8 = StyleSheet.create({
     wrapMess: { marginLeft: CONSTANTS.SPACE_8, flex: 1 },
     wrapContent: {
         borderRadius: CONSTANTS.BORDER_RADIUS_12,
@@ -6977,10 +6955,10 @@ var CountingDot = function (_a) {
         return React__default.createElement(View, { style: style }, children);
     }
     return (React__default.createElement(View, { row: true },
-        React__default.createElement(View, { center: true, borderRadius: CONSTANTS.BORDER_RADIUS_12, backgroundColor: backgroundColor || colors.surfaceCriticalDefault, paddingHorizontal: CONSTANTS.SPACE_4, paddingVertical: CONSTANTS.SPACE_2, style: [styles$6.container, style] },
-            React__default.createElement(Text$1, { size: 10, style: [styles$6.textMedium, textStyle], color: textColor || colors.textOnFillDefault }, value))));
+        React__default.createElement(View, { center: true, borderRadius: CONSTANTS.BORDER_RADIUS_12, backgroundColor: backgroundColor || colors.surfaceCriticalDefault, paddingHorizontal: CONSTANTS.SPACE_4, paddingVertical: CONSTANTS.SPACE_2, style: [styles$7.container, style] },
+            React__default.createElement(Text$1, { size: 10, style: [styles$7.textMedium, textStyle], color: textColor || colors.textOnFillDefault }, value))));
 };
-var styles$6 = StyleSheet.create(__assign(__assign({}, containerStyles), { container: {
+var styles$7 = StyleSheet.create(__assign(__assign({}, containerStyles), { container: {
         minWidth: 16,
         minHeight: 16,
     } }));
@@ -7010,18 +6988,18 @@ var ChipBar = function (_a) {
             leftIcon && React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_4 }, leftIcon),
             React__default.createElement(View, null,
                 React__default.createElement(Text$1, { numberOfLines: numberOfLines, ellipsizeMode: ellipsizeMode, color: active ? colors.textBrandDefault : colors.textDefault, style: [
-                        styles$5.text14,
-                        styles$5.textMedium,
+                        styles$6.text14,
+                        styles$6.textMedium,
                         disabled && {
                             color: colors.textSecondary,
                         },
                         textStyle,
                     ] }, title)),
             rightIcon && React__default.createElement(View, { paddingLeft: CONSTANTS.SPACE_4 }, rightIcon)),
-        badge > 0 && (React__default.createElement(View, { style: styles$5.badgeContainer },
+        badge > 0 && (React__default.createElement(View, { style: styles$6.badgeContainer },
             React__default.createElement(CountingDot, { value: badge })))));
 };
-var styles$5 = StyleSheet.create(__assign(__assign({}, containerStyles), { badgeContainer: {
+var styles$6 = StyleSheet.create(__assign(__assign({}, containerStyles), { badgeContainer: {
         position: "absolute",
         right: 0,
         top: -4,
@@ -7059,14 +7037,14 @@ var Checkbox = function (_a) {
             React__default.createElement(Icon$1, { name: isActive ? "IconCheckboxActive" : "IconCheckbox", type: "Svg", size: iconSize, color: checkboxColor }))),
         React__default.createElement(View, null,
             React__default.createElement(Text$1, { color: colors.textDefault, style: [
-                    styles$4.text14,
+                    styles$5.text14,
                     disabled && {
                         color: colors.textDisabled,
                     },
                     textStyle,
                 ] }, content))));
 };
-var styles$4 = StyleSheet.create(__assign(__assign({}, containerStyles), { icon: {
+var styles$5 = StyleSheet.create(__assign(__assign({}, containerStyles), { icon: {
         width: 24,
         height: 24,
     } }));
@@ -7101,14 +7079,14 @@ var RadioButton = function (_a) {
                         : "IconRadio", type: "Svg", size: 24, color: getColorCheckbox }))),
         React__default.createElement(View, null,
             React__default.createElement(Text$1, { color: colors.textDefault, style: [
-                    styles$3.text14,
+                    styles$4.text14,
                     disabled && {
                         color: colors.textSecondary,
                     },
                     textStyle,
                 ] }, content))));
 };
-var styles$3 = StyleSheet.create(__assign(__assign({}, containerStyles), { icon: {
+var styles$4 = StyleSheet.create(__assign(__assign({}, containerStyles), { icon: {
         width: 24,
         height: 24,
     } }));
@@ -7139,9 +7117,9 @@ var Avatar = function (_a) {
                 return 16;
         }
     };
-    return (React__default.createElement(View, { onPress: onPress, width: size, height: size, borderRadius: size / 2, center: true, backgroundColor: backgroundColor || colors.surfaceSecondaryDefault, style: [styles$2.container, style] }, source ? (React__default.createElement(Image$1, { useFastImage: true, resizeMode: "cover", source: source, style: [{ width: size, height: size }, imageStyle] })) : (React__default.createElement(Text$1, { size: getSize(size), color: textColor || colors.textSecondary, style: textStyle || { fontWeight: "500" } }, getInitials(name)))));
+    return (React__default.createElement(View, { onPress: onPress, width: size, height: size, borderRadius: size / 2, center: true, backgroundColor: backgroundColor || colors.surfaceSecondaryDefault, style: [styles$3.container, style] }, source ? (React__default.createElement(Image$1, { useFastImage: true, resizeMode: "cover", source: source, style: [{ width: size, height: size }, imageStyle] })) : (React__default.createElement(Text$1, { size: getSize(size), color: textColor || colors.textSecondary, style: textStyle || { fontWeight: "500" } }, getInitials(name)))));
 };
-var styles$2 = StyleSheet.create({
+var styles$3 = StyleSheet.create({
     container: {
         overflow: "hidden",
     },
@@ -7167,14 +7145,14 @@ var SelectionField = function (_a) {
     return (React__default.createElement(View, null,
         React__default.createElement(ScaleButton$1, __assign({ activeOpacity: 0.8, onPress: onPress }, props, { disabled: disabled || false }),
             React__default.createElement(View, { style: [
-                    styles$1.container,
+                    styles$2.container,
                     {
                         borderRadius: BORDER_RADIUS_6,
                     },
-                    [styles$1.border, { borderColor: colors.borderPrimaryDefault }],
+                    [styles$2.border, { borderColor: colors.borderPrimaryDefault }],
                     borderColor && { borderColor: borderColor },
                     disabled && [
-                        styles$1.disabled,
+                        styles$2.disabled,
                         {
                             borderColor: colors.borderPrimaryDisabled,
                             backgroundColor: colors.surfacePrimaryDisabled,
@@ -7191,7 +7169,7 @@ var SelectionField = function (_a) {
                 React__default.createElement(Spacer, { width: SPACE_12 }),
                 React__default.createElement(View, { full: true },
                     content.toString() !== "" && label.toString() !== "" && (React__default.createElement(Text$1, { color: labelColor || colors.textSecondary, style: [
-                            styles$1.text12,
+                            styles$2.text12,
                             disabled && {
                                 color: colors.textPlaceholder,
                             },
@@ -7207,9 +7185,9 @@ var SelectionField = function (_a) {
                 right || React__default.createElement(Icon$1, { name: "IconArrowDown", type: "Svg", size: 24 }),
                 React__default.createElement(Spacer, { width: SPACE_12 }))),
         error.length > 0 && (React__default.createElement(View, { paddingHorizontal: SPACE_12, paddingVertical: SPACE_4 },
-            React__default.createElement(Text$1, { style: styles$1.text12, color: colors.textErrorDefault }, error)))));
+            React__default.createElement(Text$1, { style: styles$2.text12, color: colors.textErrorDefault }, error)))));
 };
-var styles$1 = StyleSheet.create(__assign(__assign({}, containerStyles), { disabled: { opacity: 0.6 }, container: {
+var styles$2 = StyleSheet.create(__assign(__assign({}, containerStyles), { disabled: { opacity: 0.6 }, container: {
         height: 48,
         flexDirection: "row",
         alignItems: "center",
@@ -7220,7 +7198,7 @@ var styles$1 = StyleSheet.create(__assign(__assign({}, containerStyles), { disab
     }, small: {
         height: BUTTON_HEIGHT_SMALL,
     } }));
-var index = React__default.memo(SelectionField);
+var index$1 = React__default.memo(SelectionField);
 
 var SearchInput = function (_a) {
     var _b = _a.value, value = _b === void 0 ? "" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, rightIcon = _a.rightIcon, _d = _a.clearButton, clearButton = _d === void 0 ? false : _d, _e = _a.placeholder, placeholder = _e === void 0 ? "Tìm kiếm" : _e, onFocus = _a.onFocus, onBlur = _a.onBlur, onChangeText = _a.onChangeText, style = _a.style, height = _a.height, textStyle = _a.textStyle;
@@ -7266,7 +7244,7 @@ var Tag = function (_a) {
             leftIcon && React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_4 }, leftIcon),
             React__default.createElement(View, null,
                 React__default.createElement(Text$1, { size: 14, numberOfLines: numberOfLines, ellipsizeMode: ellipsizeMode, style: [
-                        styles.textMedium,
+                        styles$1.textMedium,
                         {
                             lineHeight: 16,
                         },
@@ -7278,7 +7256,172 @@ var Tag = function (_a) {
             rightIcon ? (React__default.createElement(View, { paddingLeft: CONSTANTS.SPACE_4 }, rightIcon)) : hideRightIcon ? (React__default.createElement(View, null)) : (React__default.createElement(View, { paddingLeft: CONSTANTS.SPACE_4 },
                 React__default.createElement(Icon$1, { name: "IconClose", type: "Svg", size: 20, color: colors.iconBrandDefault }))))));
 };
-var styles = StyleSheet.create(__assign({}, containerStyles));
+var styles$1 = StyleSheet.create(__assign({}, containerStyles));
+
+var formatNumberInput = function (value, formatDecimal) {
+    if (!value)
+        return "0";
+    var isNegative = value.startsWith("-");
+    var _a = value.replace(/[^0-9.]/g, "").split("."), intPart = _a[0], decimalPart = _a[1];
+    intPart = intPart.replace(/^0+(?=\d)/, "");
+    intPart = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    if (decimalPart)
+        decimalPart = decimalPart.slice(0, formatDecimal);
+    var result = intPart;
+    if (decimalPart !== undefined)
+        result += "." + decimalPart;
+    if (isNegative)
+        result = "-" + result;
+    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 ? 999999999 : _d, _e = _a.type, type = _e === void 0 ? "integer" : _e, _f = _a.formatDecimal, formatDecimal = _f === void 0 ? 3 : _f, visible = _a.visible, onClose = _a.onClose;
+    var theme = useInternalTheme();
+    var colors = theme.colors;
+    var _g = useState((value === null || value === void 0 ? void 0 : value.toString()) || ""), inputValue = _g[0], setInputValue = _g[1];
+    useEffect(function () {
+        setInputValue((value === null || value === void 0 ? void 0 : value.toString()) || "");
+    }, [value]);
+    var handleKeyPress = useCallback(function (key) {
+        if (key === "del") {
+            setInputValue(function (prev) { return prev.slice(0, -1); });
+            return;
+        }
+        if (key === ".") {
+            if (type === "float" &&
+                !inputValue.includes(".") &&
+                inputValue.length > 0) {
+                setInputValue(function (prev) { return prev + key; });
+            }
+            return;
+        }
+        var newInputValue = inputValue === "0" ? key : inputValue + key;
+        var newValue = Number(newInputValue);
+        var maxValueNumber = Number(maxValue);
+        if (!isNaN(newValue) &&
+            !isNaN(maxValueNumber) &&
+            newValue <= maxValueNumber) {
+            if (inputValue.includes(".")) {
+                var _a = inputValue.split("."), intPart = _a[0], _b = _a[1], decimalPart = _b === void 0 ? "" : _b;
+                if (intPart.length < 10 && decimalPart.length === 0) {
+                    setInputValue(function (prev) { return prev + key; });
+                }
+                else if (decimalPart.length < formatDecimal) {
+                    setInputValue(function (prev) { return prev + key; });
+                }
+            }
+            else {
+                if (inputValue.length < 10) {
+                    setInputValue(function (prev) { return (prev === "0" ? key : prev + key); });
+                }
+            }
+        }
+    }, [inputValue, maxValue, type, formatDecimal]);
+    var handleClear = useCallback(function () {
+        setInputValue("");
+    }, []);
+    var handleSave = useCallback(function () {
+        var finalValue = inputValue;
+        if (inputValue.endsWith(".")) {
+            finalValue = inputValue.slice(0, -1);
+        }
+        onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(finalValue);
+        onClose();
+    }, [inputValue, onChangeText, onClose]);
+    var handleClose = useCallback(function () {
+        onClose();
+        setTimeout(function () {
+            setInputValue((value === null || value === void 0 ? void 0 : value.toString()) || "");
+        }, 300);
+    }, [onClose, value]);
+    var renderKeyboardRow = useCallback(function (row) { return (React__default.createElement(View, { key: row.join(""), style: styles.keyboardRow }, row.map(function (key) { return (React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, key: key, style: [
+            styles.keyButton,
+            key === "." && type === "integer" && styles.disabledKey,
+        ], onPress: function () { return handleKeyPress(key); }, disabled: key === "." && type === "integer" }, key === "del" ? (React__default.createElement(Icon$1, { name: "IconDelNumber", type: "Svg", size: 24 })) : (React__default.createElement(Text$1, { style: [
+            styles.keyText,
+            key === "." && type === "integer" && styles.disabledKeyText,
+        ] }, key)))); }))); }, [handleKeyPress, type]);
+    return (React__default.createElement(Modal, { visible: visible, transparent: true, animationType: "fade", onRequestClose: handleClose },
+        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 },
+                React__default.createElement(Text$1, { style: styles.modalTitle }, label),
+                React__default.createElement(View, { width: "100%" },
+                    React__default.createElement(View, { paddingHorizontal: SPACE_40 },
+                        React__default.createElement(Text$1, { numberOfLines: 1, style: styles.valueText }, formatNumberInput(inputValue, formatDecimal) || "0")),
+                    React__default.createElement(TouchableOpacity, { onPress: handleClear, style: styles.clearButton },
+                        React__default.createElement(Icon$1, { name: "IconClearText", type: "Svg", size: 24, color: colors.textSecondary }))),
+                React__default.createElement(View, { style: styles.keyboardGrid }, [
+                    ["1", "2", "3"],
+                    ["4", "5", "6"],
+                    ["7", "8", "9"],
+                    [".", "0", "del"],
+                ].map(renderKeyboardRow)),
+                React__default.createElement(View, { style: styles.actionRow },
+                    React__default.createElement(TouchableOpacity, { activeOpacity: 0.8, style: styles.actionButton, onPress: handleClose },
+                        React__default.createElement(Text$1, { style: styles.actionText }, "\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(Text$1, { style: [styles.actionText, { color: colors.textBrandDefault }] }, "L\u01B0u")))))));
+};
+var styles = StyleSheet.create(__assign(__assign({}, containerStyles), { modalOverlay: {
+        flex: 1,
+        backgroundColor: "rgba(0, 0, 0, 0.5)",
+        justifyContent: "center",
+        alignItems: "center",
+    }, modalContent: {
+        borderRadius: 20,
+        width: "90%",
+        paddingBottom: 20,
+        alignItems: "center",
+    }, modalTitle: {
+        fontSize: 18,
+        textAlign: "center",
+        marginTop: 16,
+        marginBottom: 8,
+    }, valueText: {
+        fontSize: 30,
+        textAlign: "center",
+    }, clearButton: {
+        padding: 8,
+        position: "absolute",
+        right: SPACE_12,
+    }, keyboardGrid: {
+        marginVertical: 8,
+        width: "90%",
+    }, keyboardRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        marginBottom: 8,
+    }, keyButton: {
+        flex: 1,
+        marginHorizontal: 6,
+        backgroundColor: "#F5F5F5",
+        borderRadius: 8,
+        alignItems: "center",
+        justifyContent: "center",
+        height: 48,
+    }, keyText: {
+        fontSize: 22,
+        fontWeight: "500",
+    }, actionRow: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        marginTop: 12,
+        width: "90%",
+        paddingHorizontal: 16,
+    }, actionButton: {
+        flex: 1,
+        alignItems: "center",
+        paddingVertical: 12,
+    }, actionText: {
+        fontSize: 16,
+        fontWeight: "600",
+    }, disabledKey: {
+        opacity: 0.5,
+    }, disabledKeyText: {
+        opacity: 0.5,
+    } }));
+var index = React__default.memo(NumberKeyboard);
 
 var toastRef = React__default.createRef();
 var showToast = function (_a) {
@@ -7330,5 +7473,5 @@ var ToastProvider = forwardRef$1(function (_a, ref) {
         renderToast()));
 });
 
-export { ActivityIndicator, Avatar, Badge, index$2 as Button, CONSTANTS, Checkbox, ChipBar, CountingDot, DarkTheme, DefaultTheme, index$1 as FloatingButton, Image$1 as Image, LightTheme, ProgressBar, RadioButton, SearchInput, index as SelectionField, Spacer, Switch, Tag, Text$1 as Text, TextInput, ThemeColors, ThemeProvider, Toast, ToastProvider, View, adaptNavigationTheme, configureFonts, overlay, shadow, showToast, toastRef, useTheme };
+export { ActivityIndicator, Avatar, Badge, index$3 as Button, CONSTANTS, Checkbox, ChipBar, CountingDot, DarkTheme, DefaultTheme, index$2 as FloatingButton, Image$1 as Image, LightTheme, index as NumberKeyboard, ProgressBar, RadioButton, SearchInput, index$1 as SelectionField, Spacer, Switch, Tag, Text$1 as Text, TextInput, ThemeColors, ThemeProvider, Toast, ToastProvider, View, adaptNavigationTheme, configureFonts, overlay, shadow, showToast, toastRef, useTheme };
 //# sourceMappingURL=index.esm.js.map