@tecsinapse/react-core 1.13.0 → 1.14.3

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAUA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AAkBA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AAKA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { Avatar, AvatarProps } from './components/atoms/Avatar';\nexport { Badge, BadgeProps } from './components/atoms/Badge';\nexport { BoxContent, BoxContentProps } from './components/atoms/BoxContent';\nexport {\n  Button,\n  ButtonProps,\n  ButtonSizeType,\n  ButtonStateProps,\n  ButtonStateType,\n  Error,\n  Loading,\n  Success,\n} from './components/atoms/Button';\nexport { Card, CardProps } from './components/atoms/Card';\nexport { Footer, FooterProps } from './components/atoms/Card/Footer';\nexport { Header, HeaderProps } from './components/atoms/Card/Header';\nexport { Checkbox, CheckboxProps } from './components/atoms/Checkbox';\nexport { Divider, DividerProps } from './components/atoms/Divider';\nexport {\n  GroupButton,\n  GroupButtonOption,\n  GroupButtonOptionProps,\n  GroupButtonProps,\n  GroupButtonValue,\n} from './components/atoms/GroupButton';\nexport { Icon, IconProps } from './components/atoms/Icon';\nexport {\n  Hint,\n  InputContainer,\n  InputContainerProps,\n  InputElement,\n  InputElementProps,\n  InputVariantType,\n  Masks,\n  PressableInputContainer,\n  PressableInputContainerProps,\n  StyledBorderKeeper,\n  useCurrencyMask,\n  useInputFocus,\n  useMask,\n  disabledInputStyles,\n  IMask,\n  IMaskValue,\n} from './components/atoms/Input';\nexport { Paper, PaperProps } from './components/atoms/Paper';\nexport {\n  PressableSurface,\n  PressableSurfaceProps,\n} from './components/atoms/PressableSurface';\nexport { ProgressBar, ProgressBarProps } from './components/atoms/ProgressBar';\nexport { RadioButton, RadioButtonProps } from './components/atoms/RadioButton';\nexport { Switch, SwitchProps } from './components/atoms/Switch';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport { Text, TextProps } from './components/atoms/Text';\nexport {\n  Calendar,\n  CalendarProps,\n  DateRange,\n  SelectionType,\n  Value\n} from './components/molecules/Calendar';\nexport { DatePicker, DatePickerProps } from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  DateTimePickerProps,\n} from './components/molecules/DateTimePicker';\nexport {\n  DateTimeSelector,\n  DateTimeSelectorMode,\n  DateTimeSelectorProps,\n} from './components/molecules/DateTimeSelector';\nexport { InputPasswordIcon } from './components/molecules/InputPassword';\nexport { Snackbar, SnackbarProps } from './components/molecules/Snackbar';\nexport {\n  HintInputContainer,\n  HintInputContainerProps,\n} from './components/molecules/HintInputContainer';\nexport {\n  TextArea,\n  TextAreaProps,\n  TextAreaInputBase,\n} from './components/molecules/TextArea';\nexport { GridItem, Grid, IGridItem, IGrid } from './components/molecules/Grid';\nexport * from './styles/definitions';\nexport * from './styles/light';\nexport { default as ThemeProvider } from './styles/ThemeProvider';\nexport * from './types/defaults';\nexport * from './utils';\nexport * from './hooks';\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAUA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AAeA;;AACA;;AAIA;;AACA;;AACA;;AACA;;AACA;;AACA;;AAOA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AAKA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { Avatar, AvatarProps } from './components/atoms/Avatar';\nexport { Badge, BadgeProps } from './components/atoms/Badge';\nexport { BoxContent, BoxContentProps } from './components/atoms/BoxContent';\nexport {\n  Button,\n  ButtonProps,\n  ButtonSizeType,\n  ButtonStateProps,\n  ButtonStateType,\n  Error,\n  Loading,\n  Success,\n} from './components/atoms/Button';\nexport { Card, CardProps } from './components/atoms/Card';\nexport { Footer, FooterProps } from './components/atoms/Card/Footer';\nexport { Header, HeaderProps } from './components/atoms/Card/Header';\nexport { Checkbox, CheckboxProps } from './components/atoms/Checkbox';\nexport { Divider, DividerProps } from './components/atoms/Divider';\nexport {\n  GroupButton,\n  GroupButtonOption,\n  GroupButtonOptionProps,\n  GroupButtonProps,\n  GroupButtonValue,\n} from './components/atoms/GroupButton';\nexport { Icon, IconProps } from './components/atoms/Icon';\nexport {\n  Hint,\n  InputContainer,\n  InputContainerProps,\n  InputElement,\n  InputElementProps,\n  InputVariantType,\n  PressableInputContainer,\n  PressableInputContainerProps,\n  StyledBorderKeeper,\n  useInputFocus,\n  useNumberMask,\n  useStringMask,\n  disabledInputStyles,\n} from './components/atoms/Input';\nexport { Paper, PaperProps } from './components/atoms/Paper';\nexport {\n  PressableSurface,\n  PressableSurfaceProps,\n} from './components/atoms/PressableSurface';\nexport { ProgressBar, ProgressBarProps } from './components/atoms/ProgressBar';\nexport { RadioButton, RadioButtonProps } from './components/atoms/RadioButton';\nexport { Switch, SwitchProps } from './components/atoms/Switch';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport { Text, TextProps } from './components/atoms/Text';\nexport {\n  Calendar,\n  CalendarProps,\n  DateRange,\n  SelectionType,\n  Value,\n} from './components/molecules/Calendar';\nexport { DatePicker, DatePickerProps } from './components/molecules/DatePicker';\nexport {\n  DateTimePicker,\n  DateTimePickerProps,\n} from './components/molecules/DateTimePicker';\nexport {\n  DateTimeSelector,\n  DateTimeSelectorMode,\n  DateTimeSelectorProps,\n} from './components/molecules/DateTimeSelector';\nexport { InputPasswordIcon } from './components/molecules/InputPassword';\nexport { Snackbar, SnackbarProps } from './components/molecules/Snackbar';\nexport {\n  HintInputContainer,\n  HintInputContainerProps,\n} from './components/molecules/HintInputContainer';\nexport {\n  TextArea,\n  TextAreaProps,\n  TextAreaInputBase,\n} from './components/molecules/TextArea';\nexport { GridItem, Grid, IGridItem, IGrid } from './components/molecules/Grid';\nexport * from './styles/definitions';\nexport * from './styles/light';\nexport { default as ThemeProvider } from './styles/ThemeProvider';\nexport * from './types/defaults';\nexport * from './utils';\nexport * from './hooks';\n"],"file":"index.js"}

package/dist/utils/formatWithMask.d.ts

@@ -0,0 +1,3 @@
+import { MaskType, CurrencyOptions } from '../components/atoms/Input';
+import currency from 'currency.js';
+export declare const formatWithMask: (mask: MaskType[] | currency.Options | ((value: string) => MaskType[]), value: string | number) => string | number;

package/dist/utils/formatWithMask.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatWithMask = void 0;
+
+var _Input = require("../components/atoms/Input");
+
+var _currency = _interopRequireDefault(require("currency.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const formatWithMask = (mask, value) => {
+  if (Array.isArray(mask) || typeof mask === 'function') {
+    const selectedMask = (0, _Input.getMask)(mask, String(value));
+    const {
+      formatted
+    } = (0, _Input.mergeMask)(String(value), selectedMask);
+    return formatted || '';
+  } else {
+    const {
+      internalNumber,
+      mergedOptions
+    } = (0, _Input.getInternalNumberAndMask)(value, mask);
+    return (0, _currency.default)(internalNumber).format(mergedOptions);
+  }
+};
+
+exports.formatWithMask = formatWithMask;
+//# sourceMappingURL=formatWithMask.js.map

package/dist/utils/formatWithMask.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/formatWithMask.ts"],"names":["formatWithMask","mask","value","Array","isArray","selectedMask","String","formatted","internalNumber","mergedOptions","format"],"mappings":";;;;;;;AAAA;;AAOA;;;;AAEO,MAAMA,cAAc,GAAG,CAC5BC,IAD4B,EAE5BC,KAF4B,KAGR;AACpB,MAAIC,KAAK,CAACC,OAAN,CAAcH,IAAd,KAAuB,OAAOA,IAAP,KAAgB,UAA3C,EAAuD;AACrD,UAAMI,YAAY,GAAG,oBAAQJ,IAAR,EAAcK,MAAM,CAACJ,KAAD,CAApB,CAArB;AACA,UAAM;AAAEK,MAAAA;AAAF,QAAgB,sBAAUD,MAAM,CAACJ,KAAD,CAAhB,EAAyBG,YAAzB,CAAtB;AACA,WAAOE,SAAS,IAAI,EAApB;AACD,GAJD,MAIO;AACL,UAAM;AAAEC,MAAAA,cAAF;AAAkBC,MAAAA;AAAlB,QAAoC,qCACxCP,KADwC,EAExCD,IAFwC,CAA1C;AAIA,WAAO,uBAASO,cAAT,EAAyBE,MAAzB,CAAgCD,aAAhC,CAAP;AACD;AACF,CAfM","sourcesContent":["import {\n  MaskType,\n  CurrencyOptions,\n  getMask,\n  mergeMask,\n  getInternalNumberAndMask,\n} from '../components/atoms/Input';\nimport currency from 'currency.js';\n\nexport const formatWithMask = (\n  mask: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions,\n  value: string | number\n): string | number => {\n  if (Array.isArray(mask) || typeof mask === 'function') {\n    const selectedMask = getMask(mask, String(value));\n    const { formatted } = mergeMask(String(value), selectedMask);\n    return formatted || '';\n  } else {\n    const { internalNumber, mergedOptions } = getInternalNumberAndMask(\n      value,\n      mask\n    );\n    return currency(internalNumber).format(mergedOptions);\n  }\n};\n"],"file":"formatWithMask.js"}

package/dist/utils/index.d.ts

@@ -2,3 +2,5 @@ export { lightenDarkenColor } from './lightenDarkenColor';
 export { extractNumbersFromString, extractDigitsFromString, } from './extractNumbersFromString';
 export * from './IPhoneXHelper';
 export * from './ResponsiveFontSize';
+export * from './masks';
+export * from './formatWithMask';

package/dist/utils/index.js

@@ -58,4 +58,32 @@ Object.keys(_ResponsiveFontSize).forEach(function (key) {
     }
   });
 });
+
+var _masks = require("./masks");
+
+Object.keys(_masks).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _masks[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _masks[key];
+    }
+  });
+});
+
+var _formatWithMask = require("./formatWithMask");
+
+Object.keys(_formatWithMask).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _formatWithMask[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _formatWithMask[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAIA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { lightenDarkenColor } from './lightenDarkenColor';\nexport {\n  extractNumbersFromString,\n  extractDigitsFromString,\n} from './extractNumbersFromString';\nexport * from './IPhoneXHelper'\nexport * from './ResponsiveFontSize'"],"file":"index.js"}
+{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAIA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export { lightenDarkenColor } from './lightenDarkenColor';\nexport {\n  extractNumbersFromString,\n  extractDigitsFromString,\n} from './extractNumbersFromString';\nexport * from './IPhoneXHelper';\nexport * from './ResponsiveFontSize';\nexport * from './masks';\nexport * from './formatWithMask';\n"],"file":"index.js"}

package/dist/utils/masks.d.ts

@@ -0,0 +1,11 @@
+export declare const Masks: {
+    CPF: string[];
+    CNPJ: string[];
+    DATE: string[];
+    MONTH_YEAR: string[];
+    CEP: string[];
+    PHONE: string[];
+    PHONE_EXTENDED: string[];
+    COMBINED_PHONE: (value: string) => string[];
+    COMBINED_CPF_CNPJ: (value: string) => string[];
+};

package/dist/utils/masks.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Masks = void 0;
+const Masks = {
+  CPF: ['999.999.999-99'],
+  CNPJ: ['99.999.999/9999-99'],
+  DATE: ['99/99/9999'],
+  MONTH_YEAR: ['99/9999'],
+  CEP: ['99999-999'],
+  PHONE: ['(99) 9999-9999'],
+  PHONE_EXTENDED: ['(99) 99999-9999'],
+  COMBINED_PHONE: value => (value === null || value === void 0 ? void 0 : value.length) <= 14 ? Masks.PHONE : Masks.PHONE_EXTENDED,
+  COMBINED_CPF_CNPJ: value => (value === null || value === void 0 ? void 0 : value.length) <= 14 ? Masks.CPF : Masks.CNPJ
+};
+exports.Masks = Masks;
+//# sourceMappingURL=masks.js.map

package/dist/utils/masks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/masks.ts"],"names":["Masks","CPF","CNPJ","DATE","MONTH_YEAR","CEP","PHONE","PHONE_EXTENDED","COMBINED_PHONE","value","length","COMBINED_CPF_CNPJ"],"mappings":";;;;;;AACO,MAAMA,KAAK,GAAG;AACnBC,EAAAA,GAAG,EAAE,CAAC,gBAAD,CADc;AAEnBC,EAAAA,IAAI,EAAE,CAAC,oBAAD,CAFa;AAGnBC,EAAAA,IAAI,EAAE,CAAC,YAAD,CAHa;AAInBC,EAAAA,UAAU,EAAE,CAAC,SAAD,CAJO;AAKnBC,EAAAA,GAAG,EAAE,CAAC,WAAD,CALc;AAMnBC,EAAAA,KAAK,EAAE,CAAC,gBAAD,CANY;AAOnBC,EAAAA,cAAc,EAAE,CAAC,iBAAD,CAPG;AAQnBC,EAAAA,cAAc,EAAGC,KAAD,IAEd,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEC,MAAP,KAAiB,EAAjB,GAAsBV,KAAK,CAACM,KAA5B,GAAoCN,KAAK,CAACO,cAVzB;AAWnBI,EAAAA,iBAAiB,EAAGF,KAAD,IACjB,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEC,MAAP,KAAiB,EAAjB,GAAsBV,KAAK,CAACC,GAA5B,GAAkCD,KAAK,CAACE;AAZvB,CAAd","sourcesContent":["// NOTE: Add here all individually utils, then you can use it on input components everywhere.\nexport const Masks = {\n  CPF: ['999.999.999-99'],\n  CNPJ: ['99.999.999/9999-99'],\n  DATE: ['99/99/9999'],\n  MONTH_YEAR: ['99/9999'],\n  CEP: ['99999-999'],\n  PHONE: ['(99) 9999-9999'],\n  PHONE_EXTENDED: ['(99) 99999-9999'],\n  COMBINED_PHONE: (value: string) =>\n    // Value in formatted mode\n    value?.length <= 14 ? Masks.PHONE : Masks.PHONE_EXTENDED,\n  COMBINED_CPF_CNPJ: (value: string) =>\n    value?.length <= 14 ? Masks.CPF : Masks.CNPJ,\n};\n"],"file":"masks.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "1.13.0",
+  "version": "1.14.3",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,5 +31,5 @@
     "react-native": ">=0.64.0",
     "react-native-vector-icons": ">=8.1.0"
   },
-  "gitHead": "d5d2193bf8716615751e28b7009da59520e8080c"
+  "gitHead": "66b219caf752d5f3ed2fcbf096d530fe6c1d2938"
 }

package/src/components/atoms/Input/InputElement/InputElement.tsx

@@ -1,20 +1,27 @@
 import { useTheme } from '@emotion/react';
 import { ThemeProp } from '@tecsinapse/react-core';
-import React, { FC } from 'react';
+import React, { FC, useCallback, useEffect, useState } from 'react';
 import { StyleProp, TextInputProps, TextStyle } from 'react-native';
-import { IMask } from '../hooks/useMask';
 import { StyledInputElement } from '../styled';
+import { MaskType, useStringMask } from '../hooks/useStringMask';
+import { CurrencyOptions, useNumberMask } from '../hooks/useNumberMask';
 
 export interface InputElementProps
   extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {
   style?: StyleProp<TextStyle>;
-  /**
-   * TODO:
-   */
-  value?: string | IMask;
+  value: string | number;
   placeholder?: string;
   disabled?: boolean;
-  onChange?: (value: string) => void;
+  onChange?: (value: any) => void;
+  /**
+   To use mask for strings you have to pass a MaskType[] or ((value: string) => MaskType[])
+   A MaskType can be a string, RegExp, or Array<RegExp>.
+   In case we have a string, '9' represents digits, 'a' represents alphabet characters, and any other character represents fixed characters in the mask.
+   For example a phone mask can be represented as ['(99) \\99999-9999'], or ['(99) ', '/[9]/', '9999-9999'], or ['(', /[0-9]/, /[0-9]/, ') ', '/[9]/', '9999-9999'] and many others.
+   To use mask for numbers you have to pass a CurrencyOptions object
+   A CurrencyOptions object contains symbol, separator, decimal, precision. For example {symbol: 'R$ ', separator: '.', decimal: ',', precision: 2,}.
+   **/
+  mask?: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions;
   onFocus?: () => void;
   onBlur?: () => void;
   ref?: React.Ref<any>;
@@ -28,20 +35,78 @@ const InputElement: FC<InputElementProps> = React.forwardRef(
       value,
       disabled = false,
       placeholderTextColor,
+      mask,
       ...rest
     },
     ref: React.Ref<any>
   ): JSX.Element => {
     const theme = useTheme() as ThemeProp;
-    const _value =
-      typeof value === 'string' ? value : value?.maskValue?.formatted;
+
+    /** Check if value was reinitialized, without this state we can't total "erase" a value that was already reinitialized  **/
+    const [valueReinitialized, setValueReinitialized] = useState<boolean>(
+      false
+    );
+
     const _placeholderColor = placeholderTextColor || theme.font.color.dark;
 
+    const getInputHook = () => {
+      if (mask !== undefined) {
+        if (Array.isArray(mask) || typeof mask === 'function') {
+          return useStringMask(mask, value ?? '');
+        } else {
+          return useNumberMask(mask, value ?? '');
+        }
+      } else {
+        return [undefined, undefined];
+      }
+    };
+
+    const [maskValue, setMaskValue] = getInputHook();
+
+    const _value =
+      maskValue !== undefined
+        ? maskValue?.formatted ?? ''
+        : value?.toString() ?? '';
+
+    const onChangeMaskValue = useCallback(() => {
+      if (onChange) {
+        onChange(maskValue?.raw);
+      }
+    }, [maskValue]);
+
+    const onChangeValue = useCallback(
+      async (value: string | number) => {
+        if (maskValue !== undefined && setMaskValue !== undefined) {
+          await setMaskValue(value);
+          onChangeMaskValue();
+        } else onChange && onChange(value);
+      },
+      [value]
+    );
+
+    useEffect(() => {
+      if (!valueReinitialized) {
+        /** Used to reinitialize maskValue with a value that was loaded after Input was rendered **/
+        if (
+          maskValue !== undefined &&
+          setMaskValue !== undefined &&
+          value !== undefined &&
+          typeof maskValue === 'object'
+        ) {
+          /** Case there is a mask **/
+          if (maskValue.raw !== value.toString()) {
+            setValueReinitialized(true);
+            setMaskValue(value);
+          }
+        }
+      }
+    }, [value, maskValue, valueReinitialized]);
+
     return (
       <StyledInputElement
         {...rest}
         ref={ref}
-        onChangeText={onChange}
+        onChangeText={onChangeValue}
         value={_value}
         placeholder={placeholder}
         placeholderTextColor={_placeholderColor}

package/src/components/atoms/Input/hooks/useNumberMask.ts

@@ -0,0 +1,99 @@
+import currency from 'currency.js';
+import { useCallback, useState } from 'react';
+import { extractNumbersFromString } from '../../../../utils';
+import { MaskValue } from './useStringMask';
+
+export type CurrencyOptions = currency.Options;
+
+const DEFAULT_OPTIONS: CurrencyOptions = {
+  symbol: 'R$ ',
+  separator: '.',
+  decimal: ',',
+  precision: 2,
+};
+
+const getRegex = (precision: number) =>
+  new RegExp(`\\B(?=(\\d{${precision}})(?!\\d))`, 'g');
+
+export const getInternalNumberAndMask = (
+  value: string | number,
+  options?: CurrencyOptions
+): { internalNumber: number; mergedOptions: CurrencyOptions } => {
+  const mergedOptions = { ...DEFAULT_OPTIONS, ...options };
+  const { precision = -1 } = mergedOptions;
+
+  let internalNumber;
+
+  if (typeof value === 'number') {
+    if (precision) {
+      let stringValue = String(value);
+      const decimalIndex = stringValue.indexOf('.');
+      const currentPrecision = decimalIndex + precision;
+      if (decimalIndex !== -1 && currentPrecision <= stringValue.length) {
+        const zeros = stringValue.length + 1 - currentPrecision;
+        for (let i = 0; i < zeros; i++) stringValue = stringValue + `0`;
+      }
+      internalNumber = Number(stringValue);
+    } else {
+      internalNumber = value;
+    }
+  } else {
+    const onlyNumbers = String(extractNumbersFromString(value));
+    const padZeros = String(onlyNumbers).padStart(precision + 1, '0');
+    internalNumber = Number(padZeros.replace(getRegex(precision), '.'));
+  }
+
+  if (internalNumber > Number.MAX_SAFE_INTEGER) {
+    internalNumber = Number.MAX_SAFE_INTEGER;
+  }
+
+  if (internalNumber < Number.MIN_SAFE_INTEGER) {
+    internalNumber = Number.MIN_SAFE_INTEGER;
+  }
+
+  return {
+    internalNumber,
+    mergedOptions,
+  };
+};
+
+/**
+ * TODO:
+ * @param options
+ * @param defaultValue
+ * @returns
+ */
+export const useNumberMask = (
+  options?: CurrencyOptions,
+  defaultValue?: string | number
+): [MaskValue, (value: string | number) => void] => {
+  const applyMask = useCallback(
+    (value: string | number = 0): MaskValue => {
+      const { internalNumber, mergedOptions } = getInternalNumberAndMask(
+        value,
+        options
+      );
+
+      return {
+        raw: internalNumber,
+        formatted: currency(internalNumber).format(mergedOptions),
+      };
+    },
+    [options, getRegex]
+  );
+
+  const [value, setValue] = useState<MaskValue>(applyMask(defaultValue));
+
+  const handleChangeValue = useCallback(
+    (formattedValue: string | number) => {
+      const { raw, formatted } = applyMask(formattedValue);
+      setValue({
+        raw,
+        formatted,
+      });
+    },
+    [applyMask, setValue]
+  );
+
+  return [value, handleChangeValue];
+};

package/src/components/atoms/Input/hooks/useStringMask.ts

@@ -0,0 +1,128 @@
+import { useCallback, useState } from 'react';
+
+export interface MaskValue {
+  formatted?: string;
+  raw?: string | number;
+}
+
+export type MaskType = string | RegExp | Array<RegExp>;
+
+/**
+ * TODO:
+ * @param value
+ * @param mask
+ * @returns
+ */
+export const mergeMask = (value = '', mask: MaskType[]): MaskValue => {
+  let formatted = '';
+  let raw = '';
+  let iMask = 0;
+  let iChars = 0;
+
+  while (!(iMask === mask.length || iChars === value.length)) {
+    const maskChar = mask[iMask];
+    const valueChar = value[iChars];
+
+    if (maskChar === valueChar) {
+      formatted += maskChar;
+      iChars++;
+      iMask++;
+      continue;
+    }
+
+    const rawValueChar = value[iChars];
+
+    if (typeof maskChar === 'object') {
+      iChars++;
+
+      const maskCharRegex = Array.isArray(maskChar) ? maskChar[0] : maskChar;
+      const matchRegex = RegExp(maskCharRegex).test(valueChar);
+
+      if (matchRegex) {
+        formatted += valueChar;
+        raw += rawValueChar;
+        iMask++;
+      }
+    } else {
+      formatted += maskChar;
+      iMask++;
+    }
+  }
+
+  return { raw, formatted };
+};
+
+export const getMask = (
+  mask: MaskType[] | ((value: string) => MaskType[]),
+  newValue: string
+): MaskType[] => {
+  let maskArray: MaskType[];
+  const regexArray: MaskType[] = [];
+
+  if (typeof mask === 'function') {
+    maskArray = mask(newValue);
+  } else {
+    maskArray = mask;
+  }
+
+  maskArray.forEach(exp => {
+    if (typeof exp !== 'string') {
+      if (Array.isArray(exp)) regexArray.push(exp);
+      else regexArray.push(exp);
+    } else {
+      for (let i = 0; i < exp.length; i++) {
+        if (exp[i] === '\\') {
+          regexArray.push(exp[i + 1]);
+          i++;
+        } else {
+          if (exp[i] === '9') regexArray.push(/\d/);
+          else if (exp[i] === 'a') regexArray.push(/[a-zA-Z]/);
+          else regexArray.push(exp[i]);
+        }
+      }
+    }
+  });
+
+  return regexArray;
+};
+
+/**
+ * TODO:
+ * @param mask
+ * @param defaultValue
+ * @returns
+ */
+export const useStringMask = (
+  mask: MaskType[] | ((value: string) => MaskType[]),
+  defaultValue?: string | number
+): [MaskValue, (text: string | number) => void] => {
+  const applyMask = useCallback(
+    (value = ''): MaskValue => {
+      const selectedMask = getMask(mask, value);
+      const { formatted, raw } = mergeMask(value, selectedMask);
+
+      return {
+        raw,
+        formatted,
+      };
+    },
+    [mask]
+  );
+
+  const [value, setValue] = useState<MaskValue>(
+    applyMask(defaultValue?.toString())
+  );
+
+  const handleChangeValue = useCallback(
+    (formattedValue: string | number) => {
+      const { raw, formatted } = applyMask(formattedValue.toString());
+      setValue({
+        raw,
+        formatted,
+      });
+    },
+    [applyMask, setValue]
+  );
+
+  return [value, handleChangeValue];
+};

package/src/components/atoms/Input/index.ts

@@ -1,7 +1,7 @@
 export { default as Hint } from './Hint';
-export * from './hooks/useCurrencyMask';
 export * from './hooks/useInputFocus';
-export * from './hooks/useMask';
+export * from './hooks/useNumberMask';
+export * from './hooks/useStringMask';
 export {
   default as InputContainer,
   InputContainerProps,
@@ -11,7 +11,6 @@ export {
   default as InputElement,
   InputElementProps,
 } from './InputElement/InputElement';
-export * from './masks';
 export {
   PressableInputContainer,
   PressableInputContainerProps,

package/src/index.ts

@@ -31,16 +31,13 @@ export {
   InputElement,
   InputElementProps,
   InputVariantType,
-  Masks,
   PressableInputContainer,
   PressableInputContainerProps,
   StyledBorderKeeper,
-  useCurrencyMask,
   useInputFocus,
-  useMask,
+  useNumberMask,
+  useStringMask,
   disabledInputStyles,
-  IMask,
-  IMaskValue,
 } from './components/atoms/Input';
 export { Paper, PaperProps } from './components/atoms/Paper';
 export {
@@ -57,7 +54,7 @@ export {
   CalendarProps,
   DateRange,
   SelectionType,
-  Value
+  Value,
 } from './components/molecules/Calendar';
 export { DatePicker, DatePickerProps } from './components/molecules/DatePicker';
 export {

package/src/utils/formatWithMask.ts

@@ -0,0 +1,25 @@
+import {
+  MaskType,
+  CurrencyOptions,
+  getMask,
+  mergeMask,
+  getInternalNumberAndMask,
+} from '../components/atoms/Input';
+import currency from 'currency.js';
+
+export const formatWithMask = (
+  mask: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions,
+  value: string | number
+): string | number => {
+  if (Array.isArray(mask) || typeof mask === 'function') {
+    const selectedMask = getMask(mask, String(value));
+    const { formatted } = mergeMask(String(value), selectedMask);
+    return formatted || '';
+  } else {
+    const { internalNumber, mergedOptions } = getInternalNumberAndMask(
+      value,
+      mask
+    );
+    return currency(internalNumber).format(mergedOptions);
+  }
+};

package/src/utils/index.ts

@@ -3,5 +3,7 @@ export {
   extractNumbersFromString,
   extractDigitsFromString,
 } from './extractNumbersFromString';
-export * from './IPhoneXHelper'
-export * from './ResponsiveFontSize'
+export * from './IPhoneXHelper';
+export * from './ResponsiveFontSize';
+export * from './masks';
+export * from './formatWithMask';

package/src/utils/masks.ts

@@ -0,0 +1,15 @@
+// NOTE: Add here all individually utils, then you can use it on input components everywhere.
+export const Masks = {
+  CPF: ['999.999.999-99'],
+  CNPJ: ['99.999.999/9999-99'],
+  DATE: ['99/99/9999'],
+  MONTH_YEAR: ['99/9999'],
+  CEP: ['99999-999'],
+  PHONE: ['(99) 9999-9999'],
+  PHONE_EXTENDED: ['(99) 99999-9999'],
+  COMBINED_PHONE: (value: string) =>
+    // Value in formatted mode
+    value?.length <= 14 ? Masks.PHONE : Masks.PHONE_EXTENDED,
+  COMBINED_CPF_CNPJ: (value: string) =>
+    value?.length <= 14 ? Masks.CPF : Masks.CNPJ,
+};

package/dist/components/atoms/Input/hooks/useCurrencyMask.d.ts

@@ -1,3 +0,0 @@
-import currency from 'currency.js';
-import { IMask } from './useMask';
-export declare const useCurrencyMask: (options?: currency.Options | undefined, defaultValue?: string | undefined) => [IMask, (value: string) => void];