@tecsinapse/react-core 1.13.0 → 1.14.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.14.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.13.0...@tecsinapse/react-core@1.14.0) (2022-02-14)
+
+
+### Bug Fixes
+
+* formatWithMask util. Refactoring on useNumberMask and useStringMask hooks. ([76920f6](https://github.com/tecsinapse/design-system/commit/76920f62fb8cf9070b9b2e477dc720e9b7b24077))
+
+
+
+
+
 # [1.13.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.10...@tecsinapse/react-core@1.13.0) (2022-02-09)
 
 **Note:** Version bump only for package @tecsinapse/react-core

package/dist/components/atoms/Input/InputElement/InputElement.d.ts

@@ -1,12 +1,14 @@
 import React, { FC } from 'react';
 import { StyleProp, TextInputProps, TextStyle } from 'react-native';
-import { IMask } from '../hooks/useMask';
+import { MaskType } from '../hooks/useStringMask';
+import { CurrencyOptions } from '../hooks/useNumberMask';
 export interface InputElementProps extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {
     style?: StyleProp<TextStyle>;
-    value?: string | IMask;
+    value: string | number;
     placeholder?: string;
     disabled?: boolean;
-    onChange?: (value: string) => void;
+    onChange?: (value: any) => void;
+    mask?: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions;
     onFocus?: () => void;
     onBlur?: () => void;
     ref?: React.Ref<any>;

package/dist/components/atoms/Input/InputElement/InputElement.js

@@ -7,11 +7,17 @@ exports.default = void 0;
 
 var _react = require("@emotion/react");
 
-var _react2 = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireWildcard(require("react"));
 
 var _styled = require("../styled");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _useStringMask = require("../hooks/useStringMask");
+
+var _useNumberMask = require("../hooks/useNumberMask");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -21,20 +27,28 @@ const InputElement = _react2.default.forwardRef(({
   value,
   disabled = false,
   placeholderTextColor,
+  mask,
   ...rest
 }, ref) => {
-  var _value$maskValue;
-
   const theme = (0, _react.useTheme)();
 
-  const _value = typeof value === 'string' ? value : value === null || value === void 0 ? void 0 : (_value$maskValue = value.maskValue) === null || _value$maskValue === void 0 ? void 0 : _value$maskValue.formatted;
-
   const _placeholderColor = placeholderTextColor || theme.font.color.dark;
 
+  const [maskValue, setMaskValue] = mask === undefined ? (0, _react2.useState)(String(value)) : Array.isArray(mask) || typeof mask === 'function' ? (0, _useStringMask.useStringMask)(mask, String(value)) : (0, _useNumberMask.useNumberMask)(mask, value);
+  (0, _react2.useEffect)(() => {
+    if (onChange) {
+      if (typeof maskValue === 'string') onChange(maskValue);else onChange(maskValue === null || maskValue === void 0 ? void 0 : maskValue.raw);
+    }
+  }, [maskValue]);
+
+  const onChangeValue = value => {
+    setMaskValue(value);
+  };
+
   return _react2.default.createElement(_styled.StyledInputElement, _extends({}, rest, {
     ref: ref,
-    onChangeText: onChange,
-    value: _value,
+    onChangeText: onChangeValue,
+    value: typeof maskValue === 'string' ? maskValue : (maskValue === null || maskValue === void 0 ? void 0 : maskValue.formatted) ?? '',
     placeholder: placeholder,
     placeholderTextColor: _placeholderColor,
     disabled: disabled,

package/dist/components/atoms/Input/InputElement/InputElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/atoms/Input/InputElement/InputElement.tsx"],"names":["InputElement","React","forwardRef","onChange","placeholder","value","disabled","placeholderTextColor","rest","ref","theme","_value","maskValue","formatted","_placeholderColor","font","color","dark","displayName"],"mappings":";;;;;;;AAAA;;AAEA;;AAGA;;;;;;AAiBA,MAAMA,YAAmC,GAAGC,gBAAMC,UAAN,CAC1C,CACE;AACEC,EAAAA,QADF;AAEEC,EAAAA,WAFF;AAGEC,EAAAA,KAHF;AAIEC,EAAAA,QAAQ,GAAG,KAJb;AAKEC,EAAAA,oBALF;AAME,KAAGC;AANL,CADF,EASEC,GATF,KAUkB;AAAA;;AAChB,QAAMC,KAAK,GAAG,sBAAd;;AACA,QAAMC,MAAM,GACV,OAAON,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCA,KAApC,aAAoCA,KAApC,2CAAoCA,KAAK,CAAEO,SAA3C,qDAAoC,iBAAkBC,SADxD;;AAEA,QAAMC,iBAAiB,GAAGP,oBAAoB,IAAIG,KAAK,CAACK,IAAN,CAAWC,KAAX,CAAiBC,IAAnE;;AAEA,SACE,8BAAC,0BAAD,eACMT,IADN;AAEE,IAAA,GAAG,EAAEC,GAFP;AAGE,IAAA,YAAY,EAAEN,QAHhB;AAIE,IAAA,KAAK,EAAEQ,MAJT;AAKE,IAAA,WAAW,EAAEP,WALf;AAME,IAAA,oBAAoB,EAAEU,iBANxB;AAOE,IAAA,QAAQ,EAAER,QAPZ;AAQE,IAAA,QAAQ,EAAE,CAACA;AARb,KADF;AAYD,CA7ByC,CAA5C;;AAgCAN,YAAY,CAACkB,WAAb,GAA2B,cAA3B;eAEelB,Y","sourcesContent":["import { useTheme } from '@emotion/react';\nimport { ThemeProp } from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { StyleProp, TextInputProps, TextStyle } from 'react-native';\nimport { IMask } from '../hooks/useMask';\nimport { StyledInputElement } from '../styled';\n\nexport interface InputElementProps\n  extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {\n  style?: StyleProp<TextStyle>;\n  /**\n   * TODO:\n   */\n  value?: string | IMask;\n  placeholder?: string;\n  disabled?: boolean;\n  onChange?: (value: string) => void;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  ref?: React.Ref<any>;\n}\n\nconst InputElement: FC<InputElementProps> = React.forwardRef(\n  (\n    {\n      onChange,\n      placeholder,\n      value,\n      disabled = false,\n      placeholderTextColor,\n      ...rest\n    },\n    ref: React.Ref<any>\n  ): JSX.Element => {\n    const theme = useTheme() as ThemeProp;\n    const _value =\n      typeof value === 'string' ? value : value?.maskValue?.formatted;\n    const _placeholderColor = placeholderTextColor || theme.font.color.dark;\n\n    return (\n      <StyledInputElement\n        {...rest}\n        ref={ref}\n        onChangeText={onChange}\n        value={_value}\n        placeholder={placeholder}\n        placeholderTextColor={_placeholderColor}\n        disabled={disabled}\n        editable={!disabled}\n      />\n    );\n  }\n);\n\nInputElement.displayName = 'InputElement';\n\nexport default InputElement;\n"],"file":"InputElement.js"}
+{"version":3,"sources":["../../../../../src/components/atoms/Input/InputElement/InputElement.tsx"],"names":["InputElement","React","forwardRef","onChange","placeholder","value","disabled","placeholderTextColor","mask","rest","ref","theme","_placeholderColor","font","color","dark","maskValue","setMaskValue","undefined","String","Array","isArray","raw","onChangeValue","formatted","displayName"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;AACA;;AACA;;;;;;;;AAuBA,MAAMA,YAAmC,GAAGC,gBAAMC,UAAN,CAC1C,CACE;AACEC,EAAAA,QADF;AAEEC,EAAAA,WAFF;AAGEC,EAAAA,KAHF;AAIEC,EAAAA,QAAQ,GAAG,KAJb;AAKEC,EAAAA,oBALF;AAMEC,EAAAA,IANF;AAOE,KAAGC;AAPL,CADF,EAUEC,GAVF,KAWkB;AAChB,QAAMC,KAAK,GAAG,sBAAd;;AACA,QAAMC,iBAAiB,GAAGL,oBAAoB,IAAII,KAAK,CAACE,IAAN,CAAWC,KAAX,CAAiBC,IAAnE;;AAEA,QAAM,CAACC,SAAD,EAAYC,YAAZ,IACJT,IAAI,KAAKU,SAAT,GACI,sBAAiBC,MAAM,CAACd,KAAD,CAAvB,CADJ,GAEIe,KAAK,CAACC,OAAN,CAAcb,IAAd,KAAuB,OAAOA,IAAP,KAAgB,UAAvC,GACA,kCAAcA,IAAd,EAAoBW,MAAM,CAACd,KAAD,CAA1B,CADA,GAEA,kCAAcG,IAAd,EAAoBH,KAApB,CALN;AAOA,yBAAU,MAAM;AACd,QAAIF,QAAJ,EAAc;AACZ,UAAI,OAAOa,SAAP,KAAqB,QAAzB,EAAmCb,QAAQ,CAACa,SAAD,CAAR,CAAnC,KACKb,QAAQ,CAACa,SAAD,aAACA,SAAD,uBAACA,SAAS,CAAEM,GAAZ,CAAR;AACN;AACF,GALD,EAKG,CAACN,SAAD,CALH;;AAOA,QAAMO,aAAa,GAAIlB,KAAD,IAAmB;AACvCY,IAAAA,YAAY,CAACZ,KAAD,CAAZ;AACD,GAFD;;AAIA,SACE,8BAAC,0BAAD,eACMI,IADN;AAEE,IAAA,GAAG,EAAEC,GAFP;AAGE,IAAA,YAAY,EAAEa,aAHhB;AAIE,IAAA,KAAK,EACH,OAAOP,SAAP,KAAqB,QAArB,GAAgCA,SAAhC,GAA4C,CAAAA,SAAS,SAAT,IAAAA,SAAS,WAAT,YAAAA,SAAS,CAAEQ,SAAX,KAAwB,EALxE;AAOE,IAAA,WAAW,EAAEpB,WAPf;AAQE,IAAA,oBAAoB,EAAEQ,iBARxB;AASE,IAAA,QAAQ,EAAEN,QATZ;AAUE,IAAA,QAAQ,EAAE,CAACA;AAVb,KADF;AAcD,CAhDyC,CAA5C;;AAmDAN,YAAY,CAACyB,WAAb,GAA2B,cAA3B;eAEezB,Y","sourcesContent":["import { useTheme } from '@emotion/react';\nimport { ThemeProp } from '@tecsinapse/react-core';\nimport React, { FC, useEffect, useState } from 'react';\nimport { StyleProp, TextInputProps, TextStyle } from 'react-native';\nimport { StyledInputElement } from '../styled';\nimport { MaskType, useStringMask } from '../hooks/useStringMask';\nimport { CurrencyOptions, useNumberMask } from '../hooks/useNumberMask';\n\nexport interface InputElementProps\n  extends Omit<TextInputProps, 'onChange' | 'value' | 'ref'> {\n  style?: StyleProp<TextStyle>;\n  value: string | number;\n  placeholder?: string;\n  disabled?: boolean;\n  onChange?: (value: any) => void;\n  /**\n   To use mask for strings you have to pass a MaskType[] or ((value: string) => MaskType[])\n   A MaskType can be a string, RegExp, or Array<RegExp>.\n   In case we have a string, '9' represents digits, 'a' represents alphabet characters, and any other character represents fixed characters in the mask.\n   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.\n   To use mask for numbers you have to pass a CurrencyOptions object\n   A CurrencyOptions object contains symbol, separator, decimal, precision. For example {symbol: 'R$ ', separator: '.', decimal: ',', precision: 2,}.\n   **/\n  mask?: (MaskType[] | ((value: string) => MaskType[])) | CurrencyOptions;\n  onFocus?: () => void;\n  onBlur?: () => void;\n  ref?: React.Ref<any>;\n}\n\nconst InputElement: FC<InputElementProps> = React.forwardRef(\n  (\n    {\n      onChange,\n      placeholder,\n      value,\n      disabled = false,\n      placeholderTextColor,\n      mask,\n      ...rest\n    },\n    ref: React.Ref<any>\n  ): JSX.Element => {\n    const theme = useTheme() as ThemeProp;\n    const _placeholderColor = placeholderTextColor || theme.font.color.dark;\n\n    const [maskValue, setMaskValue] =\n      mask === undefined\n        ? useState<string>(String(value))\n        : Array.isArray(mask) || typeof mask === 'function'\n        ? useStringMask(mask, String(value))\n        : useNumberMask(mask, value);\n\n    useEffect(() => {\n      if (onChange) {\n        if (typeof maskValue === 'string') onChange(maskValue);\n        else onChange(maskValue?.raw);\n      }\n    }, [maskValue]);\n\n    const onChangeValue = (value: string) => {\n      setMaskValue(value);\n    };\n\n    return (\n      <StyledInputElement\n        {...rest}\n        ref={ref}\n        onChangeText={onChangeValue}\n        value={\n          typeof maskValue === 'string' ? maskValue : maskValue?.formatted ?? ''\n        }\n        placeholder={placeholder}\n        placeholderTextColor={_placeholderColor}\n        disabled={disabled}\n        editable={!disabled}\n      />\n    );\n  }\n);\n\nInputElement.displayName = 'InputElement';\n\nexport default InputElement;\n"],"file":"InputElement.js"}

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

@@ -0,0 +1,8 @@
+import currency from 'currency.js';
+import { MaskValue } from './useStringMask';
+export declare type CurrencyOptions = currency.Options;
+export declare const getInternalNumberAndMask: (value: string | number, options?: currency.Options | undefined) => {
+    internalNumber: number;
+    mergedOptions: CurrencyOptions;
+};
+export declare const useNumberMask: (options?: currency.Options | undefined, defaultValue?: string | number | undefined) => [MaskValue, (value: string) => void];

package/dist/components/atoms/Input/hooks/useNumberMask.js

@@ -0,0 +1,98 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNumberMask = exports.getInternalNumberAndMask = void 0;
+
+var _currency = _interopRequireDefault(require("currency.js"));
+
+var _react = require("react");
+
+var _utils = require("../../../../utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const DEFAULT_OPTIONS = {
+  symbol: 'R$ ',
+  separator: '.',
+  decimal: ',',
+  precision: 2
+};
+
+const getRegex = precision => new RegExp(`\\B(?=(\\d{${precision}})(?!\\d))`, 'g');
+
+const getInternalNumberAndMask = (value, options) => {
+  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((0, _utils.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
+  };
+};
+
+exports.getInternalNumberAndMask = getInternalNumberAndMask;
+
+const useNumberMask = (options, defaultValue) => {
+  const applyMask = (0, _react.useCallback)((value = 0) => {
+    const {
+      internalNumber,
+      mergedOptions
+    } = getInternalNumberAndMask(value, options);
+    return {
+      raw: internalNumber,
+      formatted: (0, _currency.default)(internalNumber).format(mergedOptions)
+    };
+  }, [options, getRegex]);
+  const [value, setValue] = (0, _react.useState)(applyMask(defaultValue));
+  const handleChangeValue = (0, _react.useCallback)(formattedValue => {
+    const {
+      raw,
+      formatted
+    } = applyMask(formattedValue);
+    setValue({
+      raw,
+      formatted
+    });
+  }, [applyMask, setValue]);
+  return [value, handleChangeValue];
+};
+
+exports.useNumberMask = useNumberMask;
+//# sourceMappingURL=useNumberMask.js.map

package/dist/components/atoms/Input/hooks/useNumberMask.js.map

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

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

@@ -0,0 +1,8 @@
+export interface MaskValue {
+    formatted?: string;
+    raw?: any;
+}
+export declare type MaskType = string | RegExp | Array<RegExp>;
+export declare const mergeMask: (value: string | undefined, mask: MaskType[]) => MaskValue;
+export declare const getMask: (mask: MaskType[] | ((value: string) => MaskType[]), newValue: string) => MaskType[];
+export declare const useStringMask: (mask: MaskType[] | ((value: string) => MaskType[]), defaultValue?: string | undefined) => [MaskValue, (text: string) => void];

package/dist/components/atoms/Input/hooks/useStringMask.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStringMask = exports.getMask = exports.mergeMask = void 0;
+
+var _react = require("react");
+
+const mergeMask = (value = '', mask) => {
+  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
+  };
+};
+
+exports.mergeMask = mergeMask;
+
+const getMask = (mask, newValue) => {
+  let maskArray;
+  const regexArray = [];
+
+  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;
+};
+
+exports.getMask = getMask;
+
+const useStringMask = (mask, defaultValue) => {
+  const applyMask = (0, _react.useCallback)((value = '') => {
+    const selectedMask = getMask(mask, value);
+    const {
+      formatted,
+      raw
+    } = mergeMask(value, selectedMask);
+    return {
+      raw,
+      formatted
+    };
+  }, [mask]);
+  const [value, setValue] = (0, _react.useState)(applyMask(defaultValue));
+  const handleChangeValue = (0, _react.useCallback)(formattedValue => {
+    const {
+      raw,
+      formatted
+    } = applyMask(formattedValue);
+    setValue({
+      raw,
+      formatted
+    });
+  }, [applyMask, setValue]);
+  return [value, handleChangeValue];
+};
+
+exports.useStringMask = useStringMask;
+//# sourceMappingURL=useStringMask.js.map

package/dist/components/atoms/Input/hooks/useStringMask.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useStringMask.ts"],"names":["mergeMask","value","mask","formatted","raw","iMask","iChars","length","maskChar","valueChar","rawValueChar","maskCharRegex","Array","isArray","matchRegex","RegExp","test","getMask","newValue","maskArray","regexArray","forEach","exp","push","i","useStringMask","defaultValue","applyMask","selectedMask","setValue","handleChangeValue","formattedValue"],"mappings":"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","sourcesContent":["import { useCallback, useState } from 'react';\n\nexport interface MaskValue {\n  formatted?: string;\n  raw?: any;\n}\n\nexport type MaskType = string | RegExp | Array<RegExp>;\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nexport const mergeMask = (value = '', mask: MaskType[]): MaskValue => {\n  let formatted = '';\n  let raw = '';\n  let iMask = 0;\n  let iChars = 0;\n\n  while (!(iMask === mask.length || iChars === value.length)) {\n    const maskChar = mask[iMask];\n    const valueChar = value[iChars];\n\n    if (maskChar === valueChar) {\n      formatted += maskChar;\n      iChars++;\n      iMask++;\n      continue;\n    }\n\n    const rawValueChar = value[iChars];\n\n    if (typeof maskChar === 'object') {\n      iChars++;\n\n      const maskCharRegex = Array.isArray(maskChar) ? maskChar[0] : maskChar;\n      const matchRegex = RegExp(maskCharRegex).test(valueChar);\n\n      if (matchRegex) {\n        formatted += valueChar;\n        raw += rawValueChar;\n        iMask++;\n      }\n    } else {\n      formatted += maskChar;\n      iMask++;\n    }\n  }\n\n  return { raw, formatted };\n};\n\nexport const getMask = (\n  mask: MaskType[] | ((value: string) => MaskType[]),\n  newValue: string\n): MaskType[] => {\n  let maskArray: MaskType[];\n  const regexArray: MaskType[] = [];\n\n  if (typeof mask === 'function') {\n    maskArray = mask(newValue);\n  } else {\n    maskArray = mask;\n  }\n\n  maskArray.forEach(exp => {\n    if (typeof exp !== 'string') {\n      if (Array.isArray(exp)) regexArray.push(exp);\n      else regexArray.push(exp);\n    } else {\n      for (let i = 0; i < exp.length; i++) {\n        if (exp[i] === '\\\\') {\n          regexArray.push(exp[i + 1]);\n          i++;\n        } else {\n          if (exp[i] === '9') regexArray.push(/\\d/);\n          else if (exp[i] === 'a') regexArray.push(/[a-zA-Z]/);\n          else regexArray.push(exp[i]);\n        }\n      }\n    }\n  });\n\n  return regexArray;\n};\n\n/**\n * TODO:\n * @param mask\n * @param defaultValue\n * @returns\n */\nexport const useStringMask = (\n  mask: MaskType[] | ((value: string) => MaskType[]),\n  defaultValue?: string\n): [MaskValue, (text: string) => void] => {\n  const applyMask = useCallback(\n    (value = ''): MaskValue => {\n      const selectedMask = getMask(mask, value);\n      const { formatted, raw } = mergeMask(value, selectedMask);\n\n      return {\n        raw,\n        formatted,\n      };\n    },\n    [mask]\n  );\n\n  const [value, setValue] = useState<MaskValue>(applyMask(defaultValue));\n\n  const handleChangeValue = useCallback(\n    (formattedValue: string) => {\n      const { raw, formatted } = applyMask(formattedValue);\n      setValue({\n        raw,\n        formatted,\n      });\n    },\n    [applyMask, setValue]\n  );\n\n  return [value, handleChangeValue];\n};\n"],"file":"useStringMask.js"}

package/dist/components/atoms/Input/index.d.ts

@@ -1,9 +1,8 @@
 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, InputVariantType, } from './InputContainer/InputContainer';
 export { default as InputElement, InputElementProps, } from './InputElement/InputElement';
-export * from './masks';
 export { PressableInputContainer, PressableInputContainerProps, } from './PressableInputContainer';
 export { StyledBorderKeeper, disabledInputStyles } from './styled';

package/dist/components/atoms/Input/index.js

@@ -78,20 +78,6 @@ Object.defineProperty(exports, "disabledInputStyles", {
 
 var _Hint = _interopRequireDefault(require("./Hint"));
 
-var _useCurrencyMask = require("./hooks/useCurrencyMask");
-
-Object.keys(_useCurrencyMask).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useCurrencyMask[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _useCurrencyMask[key];
-    }
-  });
-});
-
 var _useInputFocus = require("./hooks/useInputFocus");
 
 Object.keys(_useInputFocus).forEach(function (key) {
@@ -106,38 +92,38 @@ Object.keys(_useInputFocus).forEach(function (key) {
   });
 });
 
-var _useMask = require("./hooks/useMask");
+var _useNumberMask = require("./hooks/useNumberMask");
 
-Object.keys(_useMask).forEach(function (key) {
+Object.keys(_useNumberMask).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _useMask[key]) return;
+  if (key in exports && exports[key] === _useNumberMask[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _useMask[key];
+      return _useNumberMask[key];
     }
   });
 });
 
-var _InputContainer = _interopRequireWildcard(require("./InputContainer/InputContainer"));
-
-var _InputElement = _interopRequireWildcard(require("./InputElement/InputElement"));
-
-var _masks = require("./masks");
+var _useStringMask = require("./hooks/useStringMask");
 
-Object.keys(_masks).forEach(function (key) {
+Object.keys(_useStringMask).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;
+  if (key in exports && exports[key] === _useStringMask[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function () {
-      return _masks[key];
+      return _useStringMask[key];
     }
   });
 });
 
+var _InputContainer = _interopRequireWildcard(require("./InputContainer/InputContainer"));
+
+var _InputElement = _interopRequireWildcard(require("./InputElement/InputElement"));
+
 var _PressableInputContainer = require("./PressableInputContainer");
 
 var _styled = require("./styled");

package/dist/components/atoms/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Input/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;;AACA;;AAKA;;AAIA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA","sourcesContent":["export { default as Hint } from './Hint';\nexport * from './hooks/useCurrencyMask';\nexport * from './hooks/useInputFocus';\nexport * from './hooks/useMask';\nexport {\n  default as InputContainer,\n  InputContainerProps,\n  InputVariantType,\n} from './InputContainer/InputContainer';\nexport {\n  default as InputElement,\n  InputElementProps,\n} from './InputElement/InputElement';\nexport * from './masks';\nexport {\n  PressableInputContainer,\n  PressableInputContainerProps,\n} from './PressableInputContainer';\nexport { StyledBorderKeeper, disabledInputStyles } from './styled';\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Input/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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;;AACA;;AAKA;;AAIA;;AAIA","sourcesContent":["export { default as Hint } from './Hint';\nexport * from './hooks/useInputFocus';\nexport * from './hooks/useNumberMask';\nexport * from './hooks/useStringMask';\nexport {\n  default as InputContainer,\n  InputContainerProps,\n  InputVariantType,\n} from './InputContainer/InputContainer';\nexport {\n  default as InputElement,\n  InputElementProps,\n} from './InputElement/InputElement';\nexport {\n  PressableInputContainer,\n  PressableInputContainerProps,\n} from './PressableInputContainer';\nexport { StyledBorderKeeper, disabledInputStyles } from './styled';\n"],"file":"index.js"}

package/dist/index.d.ts

@@ -9,7 +9,7 @@ export { Checkbox, CheckboxProps } from './components/atoms/Checkbox';
 export { Divider, DividerProps } from './components/atoms/Divider';
 export { GroupButton, GroupButtonOption, GroupButtonOptionProps, GroupButtonProps, GroupButtonValue, } from './components/atoms/GroupButton';
 export { Icon, IconProps } from './components/atoms/Icon';
-export { Hint, InputContainer, InputContainerProps, InputElement, InputElementProps, InputVariantType, Masks, PressableInputContainer, PressableInputContainerProps, StyledBorderKeeper, useCurrencyMask, useInputFocus, useMask, disabledInputStyles, IMask, IMaskValue, } from './components/atoms/Input';
+export { Hint, InputContainer, InputContainerProps, InputElement, InputElementProps, InputVariantType, PressableInputContainer, PressableInputContainerProps, StyledBorderKeeper, useInputFocus, useNumberMask, useStringMask, disabledInputStyles, } from './components/atoms/Input';
 export { Paper, PaperProps } from './components/atoms/Paper';
 export { PressableSurface, PressableSurfaceProps, } from './components/atoms/PressableSurface';
 export { ProgressBar, ProgressBarProps } from './components/atoms/ProgressBar';
@@ -17,7 +17,7 @@ export { RadioButton, RadioButtonProps } from './components/atoms/RadioButton';
 export { Switch, SwitchProps } from './components/atoms/Switch';
 export { Tag, TagProps } from './components/atoms/Tag';
 export { Text, TextProps } from './components/atoms/Text';
-export { Calendar, CalendarProps, DateRange, SelectionType, Value } from './components/molecules/Calendar';
+export { Calendar, CalendarProps, DateRange, SelectionType, Value, } from './components/molecules/Calendar';
 export { DatePicker, DatePickerProps } from './components/molecules/DatePicker';
 export { DateTimePicker, DateTimePickerProps, } from './components/molecules/DateTimePicker';
 export { DateTimeSelector, DateTimeSelectorMode, DateTimeSelectorProps, } from './components/molecules/DateTimeSelector';

package/dist/index.js

@@ -41,16 +41,13 @@ var _exportNames = {
   InputElement: true,
   InputElementProps: true,
   InputVariantType: true,
-  Masks: true,
   PressableInputContainer: true,
   PressableInputContainerProps: true,
   StyledBorderKeeper: true,
-  useCurrencyMask: true,
   useInputFocus: true,
-  useMask: true,
+  useNumberMask: true,
+  useStringMask: true,
   disabledInputStyles: true,
-  IMask: true,
-  IMaskValue: true,
   Paper: true,
   PaperProps: true,
   PressableSurface: true,
@@ -313,12 +310,6 @@ Object.defineProperty(exports, "InputVariantType", {
     return _Input.InputVariantType;
   }
 });
-Object.defineProperty(exports, "Masks", {
-  enumerable: true,
-  get: function () {
-    return _Input.Masks;
-  }
-});
 Object.defineProperty(exports, "PressableInputContainer", {
   enumerable: true,
   get: function () {
@@ -337,40 +328,28 @@ Object.defineProperty(exports, "StyledBorderKeeper", {
     return _Input.StyledBorderKeeper;
   }
 });
-Object.defineProperty(exports, "useCurrencyMask", {
-  enumerable: true,
-  get: function () {
-    return _Input.useCurrencyMask;
-  }
-});
 Object.defineProperty(exports, "useInputFocus", {
   enumerable: true,
   get: function () {
     return _Input.useInputFocus;
   }
 });
-Object.defineProperty(exports, "useMask", {
+Object.defineProperty(exports, "useNumberMask", {
   enumerable: true,
   get: function () {
-    return _Input.useMask;
+    return _Input.useNumberMask;
   }
 });
-Object.defineProperty(exports, "disabledInputStyles", {
-  enumerable: true,
-  get: function () {
-    return _Input.disabledInputStyles;
-  }
-});
-Object.defineProperty(exports, "IMask", {
+Object.defineProperty(exports, "useStringMask", {
   enumerable: true,
   get: function () {
-    return _Input.IMask;
+    return _Input.useStringMask;
   }
 });
-Object.defineProperty(exports, "IMaskValue", {
+Object.defineProperty(exports, "disabledInputStyles", {
   enumerable: true,
   get: function () {
-    return _Input.IMaskValue;
+    return _Input.disabledInputStyles;
   }
 });
 Object.defineProperty(exports, "Paper", {

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';