@tecsinapse/react-core 1.10.2 → 1.10.3

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.10.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.10.2...@tecsinapse/react-core@1.10.3) (2021-11-29)
+
+
+### Bug Fixes
+
+* added method extractDigitsFromString ([76daa94](https://github.com/tecsinapse/design-system/commit/76daa943cc1be981b587830d0024c4a01c4df6e2))
+* remove cursor css prop from avatar ([2f9ed15](https://github.com/tecsinapse/design-system/commit/2f9ed15bafb6697e2aee883b417574b4ee3275d5))
+
+
+
+
+
 ## [1.10.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.10.1...@tecsinapse/react-core@1.10.2) (2021-11-16)
 
 

package/dist/components/atoms/Avatar/styled.js

@@ -22,9 +22,6 @@ const ContainerButtonAvatar = (0, _native.default)(_PressableSurface.PressableSu
   theme,
   size = 'mega'
 }) => theme.iconSize[size]};
-  cursor: ${({
-  onPress
-}) => onPress ? 'pointer' : 'default'};
 `;
 exports.ContainerButtonAvatar = ContainerButtonAvatar;
 const StyledAvatar = (0, _native.default)(_reactNative.Image)`

package/dist/components/atoms/Avatar/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Avatar/styled.ts"],"names":["ContainerButtonAvatar","PressableSurface","theme","size","iconSize","onPress","StyledAvatar","Image","borderRadius","pill","StyledBackground","View","color","secondary","dark","getStyledTextComponent","component"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;;;AAIO,MAAMA,qBAAqB,GAAG,qBAAOC,kCAAP,CAEnC;AACF,WAAW,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,IAAI,GAAG;AAAhB,CAAD,KACPD,KAAK,CAACE,QAAN,CAAeD,IAAf,CAAqB;AACzB,YAAY,CAAC;AAAED,EAAAA,KAAF;AAASC,EAAAA,IAAI,GAAG;AAAhB,CAAD,KACRD,KAAK,CAACE,QAAN,CAAeD,IAAf,CAAqB;AACzB,YAAY,CAAC;AAAEE,EAAAA;AAAF,CAAD,KAAkBA,OAAO,GAAG,SAAH,GAAe,SAAW;AAC/D,CARO;;AAUA,MAAMC,YAAY,GAAG,qBAAOC,kBAAP,CAAmC;AAC/D,mBAAmB,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACM,YAAN,CAAmBC,IAAK;AACtE;AACA;AACA;AACA,CALO;;AAOA,MAAMC,gBAAgB,GAAG,qBAAOC,iBAAP,CAAkC;AAClE,mBAAmB,CAAC;AAAET,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACM,YAAN,CAAmBC,IAAK;AACtE,sBAAsB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACU,KAAN,CAAYC,SAAZ,CAAsBC,IAAK;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA,CATO;;;AAWA,MAAMC,sBAAsB,GAAIC,SAAD,IAA8B;AAClE,SAAO,qBAAOA,SAAP,CAAkB;AAC3B;AACA;AACA;AACA;AACA,GALE;AAMD,CAPM","sourcesContent":["import styled from '@emotion/native';\nimport { FC } from 'react';\nimport { Image, View } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { TextProps } from '../Text';\nimport { AvatarProps } from './Avatar';\n\nexport const ContainerButtonAvatar = styled(PressableSurface)<\n  Partial<StyleProps & AvatarProps>\n>`\n  width: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>\n    theme.iconSize[size]};\n  height: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>\n    theme.iconSize[size]};\n  cursor: ${({ onPress }) => (onPress ? 'pointer' : 'default')};\n`;\n\nexport const StyledAvatar = styled(Image)<Partial<StyleProps>>`\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const StyledBackground = styled(View)<Partial<StyleProps>>`\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n  background-color: ${({ theme }: StyleProps) => theme.color.secondary.dark};\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n`;\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n  return styled(component)`\n    text-transform: uppercase;\n    text-align: center;\n    align-self: center;\n    flex: 1;\n  `;\n};\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Avatar/styled.ts"],"names":["ContainerButtonAvatar","PressableSurface","theme","size","iconSize","StyledAvatar","Image","borderRadius","pill","StyledBackground","View","color","secondary","dark","getStyledTextComponent","component"],"mappings":";;;;;;;AAAA;;AAEA;;AAEA;;;;AAIO,MAAMA,qBAAqB,GAAG,qBAAOC,kCAAP,CAEnC;AACF,WAAW,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,IAAI,GAAG;AAAhB,CAAD,KACPD,KAAK,CAACE,QAAN,CAAeD,IAAf,CAAqB;AACzB,YAAY,CAAC;AAAED,EAAAA,KAAF;AAASC,EAAAA,IAAI,GAAG;AAAhB,CAAD,KACRD,KAAK,CAACE,QAAN,CAAeD,IAAf,CAAqB;AACzB,CAPO;;AASA,MAAME,YAAY,GAAG,qBAAOC,kBAAP,CAAmC;AAC/D,mBAAmB,CAAC;AAAEJ,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACK,YAAN,CAAmBC,IAAK;AACtE;AACA;AACA;AACA,CALO;;AAOA,MAAMC,gBAAgB,GAAG,qBAAOC,iBAAP,CAAkC;AAClE,mBAAmB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACK,YAAN,CAAmBC,IAAK;AACtE,sBAAsB,CAAC;AAAEN,EAAAA;AAAF,CAAD,KAA2BA,KAAK,CAACS,KAAN,CAAYC,SAAZ,CAAsBC,IAAK;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA,CATO;;;AAWA,MAAMC,sBAAsB,GAAIC,SAAD,IAA8B;AAClE,SAAO,qBAAOA,SAAP,CAAkB;AAC3B;AACA;AACA;AACA;AACA,GALE;AAMD,CAPM","sourcesContent":["import styled from '@emotion/native';\nimport { FC } from 'react';\nimport { Image, View } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { TextProps } from '../Text';\nimport { AvatarProps } from './Avatar';\n\nexport const ContainerButtonAvatar = styled(PressableSurface)<\n  Partial<StyleProps & AvatarProps>\n>`\n  width: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>\n    theme.iconSize[size]};\n  height: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>\n    theme.iconSize[size]};\n`;\n\nexport const StyledAvatar = styled(Image)<Partial<StyleProps>>`\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n  overflow: hidden;\n  width: 100%;\n  height: 100%;\n`;\n\nexport const StyledBackground = styled(View)<Partial<StyleProps>>`\n  border-radius: ${({ theme }: StyleProps) => theme.borderRadius.pill};\n  background-color: ${({ theme }: StyleProps) => theme.color.secondary.dark};\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-direction: row;\n`;\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n  return styled(component)`\n    text-transform: uppercase;\n    text-align: center;\n    align-self: center;\n    flex: 1;\n  `;\n};\n"],"file":"styled.js"}

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

@@ -30,7 +30,7 @@ const getMask = (value = '', mask) => {
 
 const useMask = (mask, defaultValue) => {
   const applyMask = (0, _react.useCallback)((value = '') => {
-    const onlyNumbers = value ? String((0, _reactCore.extractNumbersFromString)(value)) : value;
+    const onlyNumbers = value ? (0, _reactCore.extractDigitsFromString)(value) : value;
     const selectedMask = getMask(onlyNumbers, mask);
     const formattedValue = mergeMask(onlyNumbers, selectedMask);
     return {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useMask.ts"],"names":["mergeMask","value","mask","chars","formattedValue","iMask","iChars","length","charAt","getMask","useMask","defaultValue","applyMask","onlyNumbers","String","selectedMask","raw","formatted","setValue","converter","maskValue","handleChangeValue","oldValue"],"mappings":";;;;;;;AAAA;;AACA;;AAkBA,MAAMA,SAAS,GAAG,CAACC,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA8B;AAC9C,QAAMC,KAAK,GAAG,KAAKF,KAAnB;AACA,MAAIG,cAAc,GAAG,EAArB;;AAEA,OACE,IAAIC,KAAK,GAAG,CAAZ,EAAeC,MAAM,GAAG,CAD1B,EAEED,KAAK,GAAGH,IAAI,CAACK,MAAb,IAAuBD,MAAM,GAAGH,KAAK,CAACI,MAFxC,EAGEF,KAAK,EAHP,EAIE;AACAD,IAAAA,cAAc,IACZF,IAAI,CAACM,MAAL,CAAYH,KAAZ,MAAuB,GAAvB,GAA6BF,KAAK,CAACK,MAAN,CAAaF,MAAM,EAAnB,CAA7B,GAAsDJ,IAAI,CAACM,MAAL,CAAYH,KAAZ,CADxD;AAED;;AACD,SAAOD,cAAP;AACD,CAbD;;AAqBA,MAAMK,OAAO,GAAG,CAACR,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA+D;AAC7E,MAAI,OAAOA,IAAP,KAAgB,UAApB,EAAgC;AAC9B,WAAOA,IAAI,CAACD,KAAD,CAAX;AACD;;AACD,SAAOC,IAAP;AACD,CALD;;AAaO,MAAMQ,OAAO,GAAG,CACrBR,IADqB,EAErBS,YAFqB,KAGe;AACpC,QAAMC,SAAS,GAAG,wBAChB,CAACX,KAAK,GAAG,EAAT,KAA4B;AAC1B,UAAMY,WAAW,GAAGZ,KAAK,GACrBa,MAAM,CAAC,yCAAyBb,KAAzB,CAAD,CADe,GAErBA,KAFJ;AAGA,UAAMc,YAAY,GAAGN,OAAO,CAACI,WAAD,EAAcX,IAAd,CAA5B;AACA,UAAME,cAAc,GAAGJ,SAAS,CAACa,WAAD,EAAcE,YAAd,CAAhC;AAEA,WAAO;AACLC,MAAAA,GAAG,EAAEH,WADA;AAELI,MAAAA,SAAS,EAAEb;AAFN,KAAP;AAID,GAZe,EAahB,CAACF,IAAD,CAbgB,CAAlB;AAgBA,QAAM,CAACD,KAAD,EAAQiB,QAAR,IAAoB,qBAAgB;AACxCC,IAAAA,SAAS,EAAEP,SAD6B;AAExCQ,IAAAA,SAAS,EAAER,SAAS,CAACD,YAAD;AAFoB,GAAhB,CAA1B;AAKA,QAAMU,iBAAiB,GAAG,wBACvBpB,KAAD,IAAmB;AACjB,UAAM;AAAEe,MAAAA,GAAF;AAAOC,MAAAA;AAAP,QAAqBL,SAAS,CAACX,KAAD,CAApC;AACAiB,IAAAA,QAAQ,CAACI,QAAQ,KAAK,EACpB,GAAGA,QADiB;AAEpBF,MAAAA,SAAS,EAAE;AACTJ,QAAAA,GADS;AAETC,QAAAA;AAFS;AAFS,KAAL,CAAT,CAAR;AAOD,GAVuB,EAWxB,CAACL,SAAD,EAAYM,QAAZ,CAXwB,CAA1B;AAcA,SAAO,CAACjB,KAAD,EAAQoB,iBAAR,CAAP;AACD,CAxCM","sourcesContent":["import { useCallback, useState } from 'react';\nimport { extractNumbersFromString } from '@tecsinapse/react-core';\n\nexport interface IMaskValue {\n  formatted?: string;\n  raw?: any;\n}\n\nexport interface IMask {\n  converter?: (raw?: string) => IMaskValue;\n  maskValue?: IMaskValue;\n}\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nconst mergeMask = (value = '', mask: string) => {\n  const chars = '' + value;\n  let formattedValue = '';\n\n  for (\n    let iMask = 0, iChars = 0;\n    iMask < mask.length && iChars < chars.length;\n    iMask++\n  ) {\n    formattedValue +=\n      mask.charAt(iMask) === '9' ? chars.charAt(iChars++) : mask.charAt(iMask);\n  }\n  return formattedValue;\n};\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nconst getMask = (value = '', mask: ((raw: any) => string) | string): string => {\n  if (typeof mask === 'function') {\n    return mask(value);\n  }\n  return mask;\n};\n\n/**\n * TODO:\n * @param mask\n * @param defaultValue\n * @returns\n */\nexport const useMask = (\n  mask: ((raw: any) => string) | string,\n  defaultValue?: string\n): [IMask, (text: string) => void] => {\n  const applyMask = useCallback(\n    (value = ''): IMaskValue => {\n      const onlyNumbers = value\n        ? String(extractNumbersFromString(value))\n        : value;\n      const selectedMask = getMask(onlyNumbers, mask);\n      const formattedValue = mergeMask(onlyNumbers, selectedMask);\n\n      return {\n        raw: onlyNumbers,\n        formatted: formattedValue,\n      };\n    },\n    [mask]\n  );\n\n  const [value, setValue] = useState<IMask>({\n    converter: applyMask,\n    maskValue: applyMask(defaultValue),\n  });\n\n  const handleChangeValue = useCallback(\n    (value: string) => {\n      const { raw, formatted } = applyMask(value);\n      setValue(oldValue => ({\n        ...oldValue,\n        maskValue: {\n          raw,\n          formatted,\n        },\n      }));\n    },\n    [applyMask, setValue]\n  );\n\n  return [value, handleChangeValue];\n};\n"],"file":"useMask.js"}
+{"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useMask.ts"],"names":["mergeMask","value","mask","chars","formattedValue","iMask","iChars","length","charAt","getMask","useMask","defaultValue","applyMask","onlyNumbers","selectedMask","raw","formatted","setValue","converter","maskValue","handleChangeValue","oldValue"],"mappings":";;;;;;;AAAA;;AACA;;AAkBA,MAAMA,SAAS,GAAG,CAACC,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA8B;AAC9C,QAAMC,KAAK,GAAG,KAAKF,KAAnB;AACA,MAAIG,cAAc,GAAG,EAArB;;AAEA,OACE,IAAIC,KAAK,GAAG,CAAZ,EAAeC,MAAM,GAAG,CAD1B,EAEED,KAAK,GAAGH,IAAI,CAACK,MAAb,IAAuBD,MAAM,GAAGH,KAAK,CAACI,MAFxC,EAGEF,KAAK,EAHP,EAIE;AACAD,IAAAA,cAAc,IACZF,IAAI,CAACM,MAAL,CAAYH,KAAZ,MAAuB,GAAvB,GAA6BF,KAAK,CAACK,MAAN,CAAaF,MAAM,EAAnB,CAA7B,GAAsDJ,IAAI,CAACM,MAAL,CAAYH,KAAZ,CADxD;AAED;;AACD,SAAOD,cAAP;AACD,CAbD;;AAqBA,MAAMK,OAAO,GAAG,CAACR,KAAK,GAAG,EAAT,EAAaC,IAAb,KAA+D;AAC7E,MAAI,OAAOA,IAAP,KAAgB,UAApB,EAAgC;AAC9B,WAAOA,IAAI,CAACD,KAAD,CAAX;AACD;;AACD,SAAOC,IAAP;AACD,CALD;;AAaO,MAAMQ,OAAO,GAAG,CACrBR,IADqB,EAErBS,YAFqB,KAGe;AACpC,QAAMC,SAAS,GAAG,wBAChB,CAACX,KAAK,GAAG,EAAT,KAA4B;AAC1B,UAAMY,WAAW,GAAGZ,KAAK,GAAG,wCAAwBA,KAAxB,CAAH,GAAoCA,KAA7D;AACA,UAAMa,YAAY,GAAGL,OAAO,CAACI,WAAD,EAAcX,IAAd,CAA5B;AACA,UAAME,cAAc,GAAGJ,SAAS,CAACa,WAAD,EAAcC,YAAd,CAAhC;AAEA,WAAO;AACLC,MAAAA,GAAG,EAAEF,WADA;AAELG,MAAAA,SAAS,EAAEZ;AAFN,KAAP;AAID,GAVe,EAWhB,CAACF,IAAD,CAXgB,CAAlB;AAcA,QAAM,CAACD,KAAD,EAAQgB,QAAR,IAAoB,qBAAgB;AACxCC,IAAAA,SAAS,EAAEN,SAD6B;AAExCO,IAAAA,SAAS,EAAEP,SAAS,CAACD,YAAD;AAFoB,GAAhB,CAA1B;AAKA,QAAMS,iBAAiB,GAAG,wBACvBnB,KAAD,IAAmB;AACjB,UAAM;AAAEc,MAAAA,GAAF;AAAOC,MAAAA;AAAP,QAAqBJ,SAAS,CAACX,KAAD,CAApC;AACAgB,IAAAA,QAAQ,CAACI,QAAQ,KAAK,EACpB,GAAGA,QADiB;AAEpBF,MAAAA,SAAS,EAAE;AACTJ,QAAAA,GADS;AAETC,QAAAA;AAFS;AAFS,KAAL,CAAT,CAAR;AAOD,GAVuB,EAWxB,CAACJ,SAAD,EAAYK,QAAZ,CAXwB,CAA1B;AAcA,SAAO,CAAChB,KAAD,EAAQmB,iBAAR,CAAP;AACD,CAtCM","sourcesContent":["import { useCallback, useState } from 'react';\nimport { extractDigitsFromString } from '@tecsinapse/react-core';\n\nexport interface IMaskValue {\n  formatted?: string;\n  raw?: any;\n}\n\nexport interface IMask {\n  converter?: (raw?: string) => IMaskValue;\n  maskValue?: IMaskValue;\n}\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nconst mergeMask = (value = '', mask: string) => {\n  const chars = '' + value;\n  let formattedValue = '';\n\n  for (\n    let iMask = 0, iChars = 0;\n    iMask < mask.length && iChars < chars.length;\n    iMask++\n  ) {\n    formattedValue +=\n      mask.charAt(iMask) === '9' ? chars.charAt(iChars++) : mask.charAt(iMask);\n  }\n  return formattedValue;\n};\n\n/**\n * TODO:\n * @param value\n * @param mask\n * @returns\n */\nconst getMask = (value = '', mask: ((raw: any) => string) | string): string => {\n  if (typeof mask === 'function') {\n    return mask(value);\n  }\n  return mask;\n};\n\n/**\n * TODO:\n * @param mask\n * @param defaultValue\n * @returns\n */\nexport const useMask = (\n  mask: ((raw: any) => string) | string,\n  defaultValue?: string\n): [IMask, (text: string) => void] => {\n  const applyMask = useCallback(\n    (value = ''): IMaskValue => {\n      const onlyNumbers = value ? extractDigitsFromString(value) : value;\n      const selectedMask = getMask(onlyNumbers, mask);\n      const formattedValue = mergeMask(onlyNumbers, selectedMask);\n\n      return {\n        raw: onlyNumbers,\n        formatted: formattedValue,\n      };\n    },\n    [mask]\n  );\n\n  const [value, setValue] = useState<IMask>({\n    converter: applyMask,\n    maskValue: applyMask(defaultValue),\n  });\n\n  const handleChangeValue = useCallback(\n    (value: string) => {\n      const { raw, formatted } = applyMask(value);\n      setValue(oldValue => ({\n        ...oldValue,\n        maskValue: {\n          raw,\n          formatted,\n        },\n      }));\n    },\n    [applyMask, setValue]\n  );\n\n  return [value, handleChangeValue];\n};\n"],"file":"useMask.js"}

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

@@ -12,7 +12,7 @@ const Masks = {
   CEP: '99999-999',
   PHONE: '(99) 9999-9999',
   PHONE_EXTENDED: '(99) 99999-9999',
-  COMBINED_PHONE: value => value.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED
+  COMBINED_PHONE: value => (value === null || value === void 0 ? void 0 : value.length) <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED
 };
 exports.Masks = Masks;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/atoms/Input/masks/index.ts"],"names":["Masks","CPF","CNPJ","DATE","MONTH_YEAR","CEP","PHONE","PHONE_EXTENDED","COMBINED_PHONE","value","length"],"mappings":";;;;;;AACO,MAAMA,KAAK,GAAG;AACnBC,EAAAA,GAAG,EAAE,gBADc;AAEnBC,EAAAA,IAAI,EAAE,oBAFa;AAGnBC,EAAAA,IAAI,EAAE,YAHa;AAInBC,EAAAA,UAAU,EAAE,SAJO;AAKnBC,EAAAA,GAAG,EAAE,WALc;AAMnBC,EAAAA,KAAK,EAAE,gBANY;AAOnBC,EAAAA,cAAc,EAAE,iBAPG;AAQnBC,EAAAA,cAAc,EAAGC,KAAD,IACdA,KAAK,CAACC,MAAN,IAAgB,EAAhB,GAAqBV,KAAK,CAACM,KAA3B,GAAmCN,KAAK,CAACO;AATxB,CAAd","sourcesContent":["// NOTE: Add here all individually masks, 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.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED,\n};\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../../src/components/atoms/Input/masks/index.ts"],"names":["Masks","CPF","CNPJ","DATE","MONTH_YEAR","CEP","PHONE","PHONE_EXTENDED","COMBINED_PHONE","value","length"],"mappings":";;;;;;AACO,MAAMA,KAAK,GAAG;AACnBC,EAAAA,GAAG,EAAE,gBADc;AAEnBC,EAAAA,IAAI,EAAE,oBAFa;AAGnBC,EAAAA,IAAI,EAAE,YAHa;AAInBC,EAAAA,UAAU,EAAE,SAJO;AAKnBC,EAAAA,GAAG,EAAE,WALc;AAMnBC,EAAAA,KAAK,EAAE,gBANY;AAOnBC,EAAAA,cAAc,EAAE,iBAPG;AAQnBC,EAAAA,cAAc,EAAGC,KAAD,IACd,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEC,MAAP,KAAiB,EAAjB,GAAsBV,KAAK,CAACM,KAA5B,GAAoCN,KAAK,CAACO;AATzB,CAAd","sourcesContent":["// NOTE: Add here all individually masks, 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?.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED,\n};\n"],"file":"index.js"}

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

@@ -10,6 +10,7 @@ export interface SwitchProps {
     inactiveColorTone?: ColorGradationType;
     style?: StyleProp<ViewStyle>;
     dotStyle?: StyleProp<ViewStyle>;
+    disabled?: boolean;
 }
 declare const Switch: FC<SwitchProps>;
 export default Switch;

package/dist/components/atoms/Switch/Switch.js

@@ -33,6 +33,7 @@ const Switch = ({
   inactiveColorTone = 'light',
   active,
   dotStyle,
+  disabled = false,
   ...rest
 }) => {
   const theme = (0, _react.useTheme)();
@@ -41,9 +42,13 @@ const Switch = ({
 
   const animatedColor = _react2.default.useRef(new _reactNative.Animated.Value(active ? 1 : 0)).current;
 
+  const getBackgroundColor = (color, variation) => {
+    return disabled ? (0, _utils.lightenDarkenColor)(color, variation) : color;
+  };
+
   const interpolateColor = animatedColor.interpolate({
     inputRange: [0, 1],
-    outputRange: [theme.color[inactiveColor][inactiveColorTone], theme.color[activeColor][activeColorTone]]
+    outputRange: [getBackgroundColor(theme.color[inactiveColor][inactiveColorTone], 25), getBackgroundColor(theme.color[activeColor][activeColorTone], 50)]
   });
   const animatedStyle = {
     backgroundColor: interpolateColor
@@ -52,7 +57,7 @@ const Switch = ({
     onChange(!active);
     (0, _animation.transitionSwitch)(active, transitionValue, animatedColor);
   }, [active, onChange]);
-  const stylesDefaut = {
+  const stylesDefault = {
     borderRadius: (0, _utils.extractNumbersFromString)(theme.borderRadius.pill),
     paddingHorizontal: (0, _utils.extractNumbersFromString)(theme.spacing.micro),
     paddingVertical: 0,
@@ -62,10 +67,11 @@ const Switch = ({
   };
   return _react2.default.createElement(_PressableSurface.PressableSurface, _extends({}, rest, {
     onPress: handleChange,
-    effect: "none"
+    effect: "none",
+    disabled: disabled
   }), _react2.default.createElement(_reactNative.Animated.View, {
     style: { ...animatedStyle,
-      ...stylesDefaut
+      ...stylesDefault
     }
   }, _react2.default.createElement(_styled.StyledSwitch, {
     style: [dotStyle, {

package/dist/components/atoms/Switch/Switch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Switch/Switch.tsx"],"names":["Switch","onChange","activeColor","activeColorTone","inactiveColor","inactiveColorTone","active","dotStyle","rest","theme","transitionValue","React","useRef","Animated","Value","current","animatedColor","interpolateColor","interpolate","inputRange","outputRange","color","animatedStyle","backgroundColor","handleChange","stylesDefaut","borderRadius","pill","paddingHorizontal","spacing","micro","paddingVertical","justifyContent","width","height","transform","translateX"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;;;;;;;AAaA,MAAMA,MAAuB,GAAG,CAAC;AAC/BC,EAAAA,QAD+B;AAE/BC,EAAAA,WAAW,GAAG,SAFiB;AAG/BC,EAAAA,eAAe,GAAG,QAHa;AAI/BC,EAAAA,aAAa,GAAG,WAJe;AAK/BC,EAAAA,iBAAiB,GAAG,OALW;AAM/BC,EAAAA,MAN+B;AAO/BC,EAAAA,QAP+B;AAQ/B,KAAGC;AAR4B,CAAD,KASb;AACjB,QAAMC,KAAK,GAAG,sBAAd;;AAEA,QAAMC,eAAe,GAAGC,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBR,MAAM,GAAG,IAAH,GAAU,CAAnC,CAAb,EACrBS,OADH;;AAGA,QAAMC,aAAa,GAAGL,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBR,MAAM,GAAG,CAAH,GAAO,CAAhC,CAAb,EACnBS,OADH;;AAGA,QAAME,gBAAgB,GAAGD,aAAa,CAACE,WAAd,CAA0B;AACjDC,IAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADqC;AAEjDC,IAAAA,WAAW,EAAE,CACXX,KAAK,CAACY,KAAN,CAAYjB,aAAZ,EAA2BC,iBAA3B,CADW,EAEXI,KAAK,CAACY,KAAN,CAAYnB,WAAZ,EAAyBC,eAAzB,CAFW;AAFoC,GAA1B,CAAzB;AAQA,QAAMmB,aAAa,GAAG;AACpBC,IAAAA,eAAe,EAAEN;AADG,GAAtB;AAIA,QAAMO,YAAY,GAAG,yBAAY,MAAM;AACrCvB,IAAAA,QAAQ,CAAC,CAACK,MAAF,CAAR;AACA,qCAAiBA,MAAjB,EAAyBI,eAAzB,EAA0CM,aAA1C;AACD,GAHoB,EAGlB,CAACV,MAAD,EAASL,QAAT,CAHkB,CAArB;AAKA,QAAMwB,YAAuB,GAAG;AAC9BC,IAAAA,YAAY,EAAE,qCAAyBjB,KAAK,CAACiB,YAAN,CAAmBC,IAA5C,CADgB;AAE9BC,IAAAA,iBAAiB,EAAE,qCAAyBnB,KAAK,CAACoB,OAAN,CAAcC,KAAvC,CAFW;AAG9BC,IAAAA,eAAe,EAAE,CAHa;AAI9BC,IAAAA,cAAc,EAAE,QAJc;AAK9BC,IAAAA,KAAK,EAAE,EALuB;AAM9BC,IAAAA,MAAM,EAAE;AANsB,GAAhC;AASA,SACE,8BAAC,kCAAD,eAAsB1B,IAAtB;AAA4B,IAAA,OAAO,EAAEgB,YAArC;AAAmD,IAAA,MAAM,EAAC;AAA1D,MACE,8BAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,EAAE,GAAGF,aAAL;AAAoB,SAAGG;AAAvB;AAAtB,KACE,8BAAC,oBAAD;AACE,IAAA,KAAK,EAAE,CAAClB,QAAD,EAAW;AAAE4B,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAE1B;AAAd,OAAD;AAAb,KAAX;AADT,IADF,CADF,CADF;AASD,CArDD;;eAuDeV,M","sourcesContent":["import { useTheme } from '@emotion/react';\nimport React, { FC, useCallback } from 'react';\nimport { Animated, StyleProp, ViewStyle } from 'react-native';\nimport {\n  ColorGradationType,\n  ColorType,\n  ThemeProp,\n} from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { StyledSwitch } from './styled';\nimport { transitionSwitch } from './animation';\nimport { extractNumbersFromString } from '../../../utils';\n\nexport interface SwitchProps {\n  onChange: (active: boolean) => void;\n  active: boolean;\n  activeColor?: ColorType;\n  activeColorTone?: ColorGradationType;\n  inactiveColor?: ColorType;\n  inactiveColorTone?: ColorGradationType;\n  style?: StyleProp<ViewStyle>;\n  dotStyle?: StyleProp<ViewStyle>;\n}\n\nconst Switch: FC<SwitchProps> = ({\n  onChange,\n  activeColor = 'primary',\n  activeColorTone = 'medium',\n  inactiveColor = 'secondary',\n  inactiveColorTone = 'light',\n  active,\n  dotStyle,\n  ...rest\n}): JSX.Element => {\n  const theme = useTheme() as ThemeProp;\n\n  const transitionValue = React.useRef(new Animated.Value(active ? 16.5 : 0))\n    .current;\n\n  const animatedColor = React.useRef(new Animated.Value(active ? 1 : 0))\n    .current;\n\n  const interpolateColor = animatedColor.interpolate({\n    inputRange: [0, 1],\n    outputRange: [\n      theme.color[inactiveColor][inactiveColorTone],\n      theme.color[activeColor][activeColorTone],\n    ],\n  });\n\n  const animatedStyle = {\n    backgroundColor: interpolateColor,\n  };\n\n  const handleChange = useCallback(() => {\n    onChange(!active);\n    transitionSwitch(active, transitionValue, animatedColor);\n  }, [active, onChange]);\n\n  const stylesDefaut: ViewStyle = {\n    borderRadius: extractNumbersFromString(theme.borderRadius.pill),\n    paddingHorizontal: extractNumbersFromString(theme.spacing.micro),\n    paddingVertical: 0,\n    justifyContent: 'center',\n    width: 40,\n    height: 22,\n  };\n\n  return (\n    <PressableSurface {...rest} onPress={handleChange} effect=\"none\">\n      <Animated.View style={{ ...animatedStyle, ...stylesDefaut }}>\n        <StyledSwitch\n          style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}\n        />\n      </Animated.View>\n    </PressableSurface>\n  );\n};\n\nexport default Switch;\n"],"file":"Switch.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Switch/Switch.tsx"],"names":["Switch","onChange","activeColor","activeColorTone","inactiveColor","inactiveColorTone","active","dotStyle","disabled","rest","theme","transitionValue","React","useRef","Animated","Value","current","animatedColor","getBackgroundColor","color","variation","interpolateColor","interpolate","inputRange","outputRange","animatedStyle","backgroundColor","handleChange","stylesDefault","borderRadius","pill","paddingHorizontal","spacing","micro","paddingVertical","justifyContent","width","height","transform","translateX"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAMA;;AACA;;AACA;;AACA;;;;;;;;AAcA,MAAMA,MAAuB,GAAG,CAAC;AAC/BC,EAAAA,QAD+B;AAE/BC,EAAAA,WAAW,GAAG,SAFiB;AAG/BC,EAAAA,eAAe,GAAG,QAHa;AAI/BC,EAAAA,aAAa,GAAG,WAJe;AAK/BC,EAAAA,iBAAiB,GAAG,OALW;AAM/BC,EAAAA,MAN+B;AAO/BC,EAAAA,QAP+B;AAQ/BC,EAAAA,QAAQ,GAAG,KARoB;AAS/B,KAAGC;AAT4B,CAAD,KAUb;AACjB,QAAMC,KAAK,GAAG,sBAAd;;AAEA,QAAMC,eAAe,GAAGC,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBT,MAAM,GAAG,IAAH,GAAU,CAAnC,CAAb,EACrBU,OADH;;AAGA,QAAMC,aAAa,GAAGL,gBAAMC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmBT,MAAM,GAAG,CAAH,GAAO,CAAhC,CAAb,EACnBU,OADH;;AAGA,QAAME,kBAAkB,GAAG,CAACC,KAAD,EAAgBC,SAAhB,KAAsC;AAC/D,WAAOZ,QAAQ,GAAG,+BAAmBW,KAAnB,EAA0BC,SAA1B,CAAH,GAA0CD,KAAzD;AACD,GAFD;;AAIA,QAAME,gBAAgB,GAAGJ,aAAa,CAACK,WAAd,CAA0B;AACjDC,IAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADqC;AAEjDC,IAAAA,WAAW,EAAE,CACXN,kBAAkB,CAACR,KAAK,CAACS,KAAN,CAAYf,aAAZ,EAA2BC,iBAA3B,CAAD,EAAgD,EAAhD,CADP,EAEXa,kBAAkB,CAACR,KAAK,CAACS,KAAN,CAAYjB,WAAZ,EAAyBC,eAAzB,CAAD,EAA4C,EAA5C,CAFP;AAFoC,GAA1B,CAAzB;AAQA,QAAMsB,aAAa,GAAG;AACpBC,IAAAA,eAAe,EAAEL;AADG,GAAtB;AAIA,QAAMM,YAAY,GAAG,yBAAY,MAAM;AACrC1B,IAAAA,QAAQ,CAAC,CAACK,MAAF,CAAR;AACA,qCAAiBA,MAAjB,EAAyBK,eAAzB,EAA0CM,aAA1C;AACD,GAHoB,EAGlB,CAACX,MAAD,EAASL,QAAT,CAHkB,CAArB;AAKA,QAAM2B,aAAwB,GAAG;AAC/BC,IAAAA,YAAY,EAAE,qCAAyBnB,KAAK,CAACmB,YAAN,CAAmBC,IAA5C,CADiB;AAE/BC,IAAAA,iBAAiB,EAAE,qCAAyBrB,KAAK,CAACsB,OAAN,CAAcC,KAAvC,CAFY;AAG/BC,IAAAA,eAAe,EAAE,CAHc;AAI/BC,IAAAA,cAAc,EAAE,QAJe;AAK/BC,IAAAA,KAAK,EAAE,EALwB;AAM/BC,IAAAA,MAAM,EAAE;AANuB,GAAjC;AASA,SACE,8BAAC,kCAAD,eACM5B,IADN;AAEE,IAAA,OAAO,EAAEkB,YAFX;AAGE,IAAA,MAAM,EAAC,MAHT;AAIE,IAAA,QAAQ,EAAEnB;AAJZ,MAME,8BAAC,qBAAD,CAAU,IAAV;AAAe,IAAA,KAAK,EAAE,EAAE,GAAGiB,aAAL;AAAoB,SAAGG;AAAvB;AAAtB,KACE,8BAAC,oBAAD;AACE,IAAA,KAAK,EAAE,CAACrB,QAAD,EAAW;AAAE+B,MAAAA,SAAS,EAAE,CAAC;AAAEC,QAAAA,UAAU,EAAE5B;AAAd,OAAD;AAAb,KAAX;AADT,IADF,CANF,CADF;AAcD,CA/DD;;eAiEeX,M","sourcesContent":["import { useTheme } from '@emotion/react';\nimport React, { FC, useCallback } from 'react';\nimport { Animated, StyleProp, ViewStyle } from 'react-native';\nimport {\n  ColorGradationType,\n  ColorType,\n  ThemeProp,\n} from '../../../types/defaults';\nimport { PressableSurface } from '../PressableSurface';\nimport { StyledSwitch } from './styled';\nimport { transitionSwitch } from './animation';\nimport { extractNumbersFromString, lightenDarkenColor } from '../../../utils';\n\nexport interface SwitchProps {\n  onChange: (active: boolean) => void;\n  active: boolean;\n  activeColor?: ColorType;\n  activeColorTone?: ColorGradationType;\n  inactiveColor?: ColorType;\n  inactiveColorTone?: ColorGradationType;\n  style?: StyleProp<ViewStyle>;\n  dotStyle?: StyleProp<ViewStyle>;\n  disabled?: boolean;\n}\n\nconst Switch: FC<SwitchProps> = ({\n  onChange,\n  activeColor = 'primary',\n  activeColorTone = 'medium',\n  inactiveColor = 'secondary',\n  inactiveColorTone = 'light',\n  active,\n  dotStyle,\n  disabled = false,\n  ...rest\n}): JSX.Element => {\n  const theme = useTheme() as ThemeProp;\n\n  const transitionValue = React.useRef(new Animated.Value(active ? 16.5 : 0))\n    .current;\n\n  const animatedColor = React.useRef(new Animated.Value(active ? 1 : 0))\n    .current;\n\n  const getBackgroundColor = (color: string, variation: number) => {\n    return disabled ? lightenDarkenColor(color, variation) : color;\n  };\n\n  const interpolateColor = animatedColor.interpolate({\n    inputRange: [0, 1],\n    outputRange: [\n      getBackgroundColor(theme.color[inactiveColor][inactiveColorTone], 25),\n      getBackgroundColor(theme.color[activeColor][activeColorTone], 50),\n    ],\n  });\n\n  const animatedStyle = {\n    backgroundColor: interpolateColor,\n  };\n\n  const handleChange = useCallback(() => {\n    onChange(!active);\n    transitionSwitch(active, transitionValue, animatedColor);\n  }, [active, onChange]);\n\n  const stylesDefault: ViewStyle = {\n    borderRadius: extractNumbersFromString(theme.borderRadius.pill),\n    paddingHorizontal: extractNumbersFromString(theme.spacing.micro),\n    paddingVertical: 0,\n    justifyContent: 'center',\n    width: 40,\n    height: 22,\n  };\n\n  return (\n    <PressableSurface\n      {...rest}\n      onPress={handleChange}\n      effect=\"none\"\n      disabled={disabled}\n    >\n      <Animated.View style={{ ...animatedStyle, ...stylesDefault }}>\n        <StyledSwitch\n          style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}\n        />\n      </Animated.View>\n    </PressableSurface>\n  );\n};\n\nexport default Switch;\n"],"file":"Switch.js"}

package/dist/utils/extractNumbersFromString.d.ts

@@ -1 +1,2 @@
 export declare const extractNumbersFromString: (value: string) => number;
+export declare const extractDigitsFromString: (value: string) => string;

package/dist/utils/extractNumbersFromString.js

@@ -3,9 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.extractNumbersFromString = void 0;
+exports.extractDigitsFromString = exports.extractNumbersFromString = void 0;
 
 const extractNumbersFromString = value => Number(value.replace(/[^0-9]/g, ''));
 
 exports.extractNumbersFromString = extractNumbersFromString;
+
+const extractDigitsFromString = value => value.replace(/[^0-9]/g, '');
+
+exports.extractDigitsFromString = extractDigitsFromString;
 //# sourceMappingURL=extractNumbersFromString.js.map

package/dist/utils/extractNumbersFromString.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/extractNumbersFromString.ts"],"names":["extractNumbersFromString","value","Number","replace"],"mappings":";;;;;;;AAAO,MAAMA,wBAAwB,GAAIC,KAAD,IACtCC,MAAM,CAACD,KAAK,CAACE,OAAN,CAAc,SAAd,EAAyB,EAAzB,CAAD,CADD","sourcesContent":["export const extractNumbersFromString = (value: string): number =>\n  Number(value.replace(/[^0-9]/g, ''));\n"],"file":"extractNumbersFromString.js"}
+{"version":3,"sources":["../../src/utils/extractNumbersFromString.ts"],"names":["extractNumbersFromString","value","Number","replace","extractDigitsFromString"],"mappings":";;;;;;;AAAO,MAAMA,wBAAwB,GAAIC,KAAD,IACtCC,MAAM,CAACD,KAAK,CAACE,OAAN,CAAc,SAAd,EAAyB,EAAzB,CAAD,CADD;;;;AAMA,MAAMC,uBAAuB,GAAIH,KAAD,IACrCA,KAAK,CAACE,OAAN,CAAc,SAAd,EAAyB,EAAzB,CADK","sourcesContent":["export const extractNumbersFromString = (value: string): number =>\n  Number(value.replace(/[^0-9]/g, ''));\n\n/*\n * implemented for the case: string numbers start with 0. Example: 012.345.678-91 Example: 012.345.678-91\n * */\nexport const extractDigitsFromString = (value: string): string =>\n  value.replace(/[^0-9]/g, '');\n"],"file":"extractNumbersFromString.js"}

package/dist/utils/index.d.ts

@@ -1,2 +1,2 @@
 export { lightenDarkenColor } from './lightenDarkenColor';
-export { extractNumbersFromString } from './extractNumbersFromString';
+export { extractNumbersFromString, extractDigitsFromString, } from './extractNumbersFromString';

package/dist/utils/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "extractNumbersFromString", {
     return _extractNumbersFromString.extractNumbersFromString;
   }
 });
+Object.defineProperty(exports, "extractDigitsFromString", {
+  enumerable: true,
+  get: function () {
+    return _extractNumbersFromString.extractDigitsFromString;
+  }
+});
 
 var _lightenDarkenColor = require("./lightenDarkenColor");
 

package/dist/utils/index.js.map

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "1.10.2",
+  "version": "1.10.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": "fb3e15d84dc2e9d529dc3a00343751302c325c39"
+  "gitHead": "2608df0807f22cca02b657a64b3bfef334daf0e9"
 }

package/src/components/atoms/Avatar/styled.ts

@@ -13,7 +13,6 @@ export const ContainerButtonAvatar = styled(PressableSurface)<
     theme.iconSize[size]};
   height: ${({ theme, size = 'mega' }: StyleProps & Partial<AvatarProps>) =>
     theme.iconSize[size]};
-  cursor: ${({ onPress }) => (onPress ? 'pointer' : 'default')};
 `;
 
 export const StyledAvatar = styled(Image)<Partial<StyleProps>>`

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

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { extractNumbersFromString } from '@tecsinapse/react-core';
+import { extractDigitsFromString } from '@tecsinapse/react-core';
 
 export interface IMaskValue {
   formatted?: string;
@@ -57,9 +57,7 @@ export const useMask = (
 ): [IMask, (text: string) => void] => {
   const applyMask = useCallback(
     (value = ''): IMaskValue => {
-      const onlyNumbers = value
-        ? String(extractNumbersFromString(value))
-        : value;
+      const onlyNumbers = value ? extractDigitsFromString(value) : value;
       const selectedMask = getMask(onlyNumbers, mask);
       const formattedValue = mergeMask(onlyNumbers, selectedMask);
 

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

@@ -8,5 +8,5 @@ export const Masks = {
   PHONE: '(99) 9999-9999',
   PHONE_EXTENDED: '(99) 99999-9999',
   COMBINED_PHONE: (value: string) =>
-    value.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED,
+    value?.length <= 10 ? Masks.PHONE : Masks.PHONE_EXTENDED,
 };

package/src/components/atoms/Switch/Switch.stories.tsx

@@ -15,7 +15,7 @@ const Template: Story<SwitchProps> = args => {
     args.onChange(arg);
   };
 
-  return <Switch active={active} onChange={onChange} />;
+  return <Switch active={active} onChange={onChange} disabled={args.disabled}/>;
 };
 
 export const Base = Template.bind({});
@@ -23,4 +23,5 @@ export const Base = Template.bind({});
 Base.args = {
   active: true,
   onChange: value => action('Cicked')(value),
+  disabled: false,
 };

package/src/components/atoms/Switch/Switch.tsx

@@ -9,7 +9,7 @@ import {
 import { PressableSurface } from '../PressableSurface';
 import { StyledSwitch } from './styled';
 import { transitionSwitch } from './animation';
-import { extractNumbersFromString } from '../../../utils';
+import { extractNumbersFromString, lightenDarkenColor } from '../../../utils';
 
 export interface SwitchProps {
   onChange: (active: boolean) => void;
@@ -20,6 +20,7 @@ export interface SwitchProps {
   inactiveColorTone?: ColorGradationType;
   style?: StyleProp<ViewStyle>;
   dotStyle?: StyleProp<ViewStyle>;
+  disabled?: boolean;
 }
 
 const Switch: FC<SwitchProps> = ({
@@ -30,6 +31,7 @@ const Switch: FC<SwitchProps> = ({
   inactiveColorTone = 'light',
   active,
   dotStyle,
+  disabled = false,
   ...rest
 }): JSX.Element => {
   const theme = useTheme() as ThemeProp;
@@ -40,11 +42,15 @@ const Switch: FC<SwitchProps> = ({
   const animatedColor = React.useRef(new Animated.Value(active ? 1 : 0))
     .current;
 
+  const getBackgroundColor = (color: string, variation: number) => {
+    return disabled ? lightenDarkenColor(color, variation) : color;
+  };
+
   const interpolateColor = animatedColor.interpolate({
     inputRange: [0, 1],
     outputRange: [
-      theme.color[inactiveColor][inactiveColorTone],
-      theme.color[activeColor][activeColorTone],
+      getBackgroundColor(theme.color[inactiveColor][inactiveColorTone], 25),
+      getBackgroundColor(theme.color[activeColor][activeColorTone], 50),
     ],
   });
 
@@ -57,7 +63,7 @@ const Switch: FC<SwitchProps> = ({
     transitionSwitch(active, transitionValue, animatedColor);
   }, [active, onChange]);
 
-  const stylesDefaut: ViewStyle = {
+  const stylesDefault: ViewStyle = {
     borderRadius: extractNumbersFromString(theme.borderRadius.pill),
     paddingHorizontal: extractNumbersFromString(theme.spacing.micro),
     paddingVertical: 0,
@@ -67,8 +73,13 @@ const Switch: FC<SwitchProps> = ({
   };
 
   return (
-    <PressableSurface {...rest} onPress={handleChange} effect="none">
-      <Animated.View style={{ ...animatedStyle, ...stylesDefaut }}>
+    <PressableSurface
+      {...rest}
+      onPress={handleChange}
+      effect="none"
+      disabled={disabled}
+    >
+      <Animated.View style={{ ...animatedStyle, ...stylesDefault }}>
         <StyledSwitch
           style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}
         />

package/src/utils/extractNumbersFromString.ts

@@ -1,2 +1,8 @@
 export const extractNumbersFromString = (value: string): number =>
   Number(value.replace(/[^0-9]/g, ''));
+
+/*
+ * implemented for the case: string numbers start with 0. Example: 012.345.678-91 Example: 012.345.678-91
+ * */
+export const extractDigitsFromString = (value: string): string =>
+  value.replace(/[^0-9]/g, '');

package/src/utils/index.ts

@@ -1,2 +1,5 @@
 export { lightenDarkenColor } from './lightenDarkenColor';
-export { extractNumbersFromString } from './extractNumbersFromString';
+export {
+  extractNumbersFromString,
+  extractDigitsFromString,
+} from './extractNumbersFromString';