@tecsinapse/react-core 1.12.5 → 1.12.9

package/CHANGELOG.md

@@ -3,6 +3,41 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.12.9](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.8...@tecsinapse/react-core@1.12.9) (2022-01-18)
+
+**Note:** Version bump only for package @tecsinapse/react-core
+
+
+
+
+
+## [1.12.8](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.7...@tecsinapse/react-core@1.12.8) (2022-01-17)
+
+
+### Bug Fixes
+
+* regex method extractDigitsFromString ([99eb01a](https://github.com/tecsinapse/design-system/commit/99eb01a694d013129e4c08b633af003791bc6e9b))
+
+
+
+
+
+## [1.12.7](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.6...@tecsinapse/react-core@1.12.7) (2022-01-11)
+
+**Note:** Version bump only for package @tecsinapse/react-core
+
+
+
+
+
+## [1.12.6](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.5...@tecsinapse/react-core@1.12.6) (2022-01-06)
+
+**Note:** Version bump only for package @tecsinapse/react-core
+
+
+
+
+
 ## [1.12.5](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.4...@tecsinapse/react-core@1.12.5) (2022-01-05)
 
 **Note:** Version bump only for package @tecsinapse/react-core

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

@@ -9,7 +9,7 @@ var _currency = _interopRequireDefault(require("currency.js"));
 
 var _react = require("react");
 
-var _reactCore = require("@tecsinapse/react-core");
+var _utils = require("../../../../utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -29,7 +29,7 @@ const useCurrencyMask = (options, defaultValue) => {
     const {
       precision = -1
     } = mergedOptions;
-    const onlyNumbers = String((0, _reactCore.extractNumbersFromString)(value));
+    const onlyNumbers = String((0, _utils.extractNumbersFromString)(value));
     const padZeros = String(onlyNumbers).padStart(precision + 1, '0');
     let internalNumber = Number(padZeros.replace(getRegex(precision), '.'));
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useCurrencyMask.ts"],"names":["DEFAULT_OPTIONS","symbol","separator","decimal","precision","useCurrencyMask","options","defaultValue","getRegex","RegExp","applyMask","value","mergedOptions","onlyNumbers","String","padZeros","padStart","internalNumber","Number","replace","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","raw","formatted","format","setValue","converter","maskValue","handleChangeValue","formattedValue","oldValue"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAIA,MAAMA,eAAgC,GAAG;AACvCC,EAAAA,MAAM,EAAE,KAD+B;AAEvCC,EAAAA,SAAS,EAAE,GAF4B;AAGvCC,EAAAA,OAAO,EAAE,GAH8B;AAIvCC,EAAAA,SAAS,EAAE;AAJ4B,CAAzC;;AAaO,MAAMC,eAAe,GAAG,CAC7BC,OAD6B,EAE7BC,YAF6B,KAGQ;AACrC,QAAMC,QAAQ,GAAG,wBACdJ,SAAD,IAAuB,IAAIK,MAAJ,CAAY,cAAaL,SAAU,YAAnC,EAAgD,GAAhD,CADR,EAEf,CAACE,OAAD,CAFe,CAAjB;AAKA,QAAMI,SAAS,GAAG,wBAChB,CAACC,KAAK,GAAG,EAAT,KAA4B;AAC1B,UAAMC,aAAa,GAAG,EAAE,GAAGZ,eAAL;AAAsB,SAAGM;AAAzB,KAAtB;AACA,UAAM;AAAEF,MAAAA,SAAS,GAAG,CAAC;AAAf,QAAqBQ,aAA3B;AACA,UAAMC,WAAW,GAAGC,MAAM,CAAC,yCAAyBH,KAAzB,CAAD,CAA1B;AACA,UAAMI,QAAQ,GAAGD,MAAM,CAACD,WAAD,CAAN,CAAoBG,QAApB,CAA6BZ,SAAS,GAAG,CAAzC,EAA4C,GAA5C,CAAjB;AACA,QAAIa,cAAc,GAAGC,MAAM,CAACH,QAAQ,CAACI,OAAT,CAAiBX,QAAQ,CAACJ,SAAD,CAAzB,EAAsC,GAAtC,CAAD,CAA3B;;AAEA,QAAIa,cAAc,GAAGC,MAAM,CAACE,gBAA5B,EAA8C;AAC5CH,MAAAA,cAAc,GAAGC,MAAM,CAACE,gBAAxB;AACD;;AAED,QAAIH,cAAc,GAAGC,MAAM,CAACG,gBAA5B,EAA8C;AAC5CJ,MAAAA,cAAc,GAAGC,MAAM,CAACG,gBAAxB;AACD;;AAED,WAAO;AACLC,MAAAA,GAAG,EAAEL,cADA;AAELM,MAAAA,SAAS,EAAE,uBAASN,cAAT,EAAyBO,MAAzB,CAAgCZ,aAAhC;AAFN,KAAP;AAID,GApBe,EAqBhB,CAACN,OAAD,EAAUE,QAAV,CArBgB,CAAlB;AAwBA,QAAM,CAACG,KAAD,EAAQc,QAAR,IAAoB,qBAAgB;AACxCC,IAAAA,SAAS,EAAEhB,SAD6B;AAExCiB,IAAAA,SAAS,EAAEjB,SAAS,CAACH,YAAD;AAFoB,GAAhB,CAA1B;AAKA,QAAMqB,iBAAiB,GAAG,wBACvBC,cAAD,IAA4B;AAC1B,UAAM;AAAEP,MAAAA,GAAF;AAAOC,MAAAA;AAAP,QAAqBb,SAAS,CAACmB,cAAD,CAApC;AACAJ,IAAAA,QAAQ,CAACK,QAAQ,KAAK,EACpB,GAAGA,QADiB;AAEpBH,MAAAA,SAAS,EAAE;AACTL,QAAAA,GADS;AAETC,QAAAA;AAFS;AAFS,KAAL,CAAT,CAAR;AAOD,GAVuB,EAWxB,CAACb,SAAD,EAAYe,QAAZ,CAXwB,CAA1B;AAcA,SAAO,CAACd,KAAD,EAAQiB,iBAAR,CAAP;AACD,CArDM","sourcesContent":["import currency from 'currency.js';\nimport { useCallback, useState } from 'react';\nimport { IMaskValue, IMask } from './useMask';\nimport { extractNumbersFromString } from '@tecsinapse/react-core';\n\ntype CurrencyOptions = currency.Options;\n\nconst DEFAULT_OPTIONS: CurrencyOptions = {\n  symbol: 'R$ ',\n  separator: '.',\n  decimal: ',',\n  precision: 2,\n};\n\n/**\n * TODO:\n * @param options\n * @param defaultValue\n * @returns\n */\nexport const useCurrencyMask = (\n  options?: CurrencyOptions,\n  defaultValue?: string\n): [IMask, (value: string) => void] => {\n  const getRegex = useCallback(\n    (precision: number) => new RegExp(`\\\\B(?=(\\\\d{${precision}})(?!\\\\d))`, 'g'),\n    [options]\n  );\n\n  const applyMask = useCallback(\n    (value = ''): IMaskValue => {\n      const mergedOptions = { ...DEFAULT_OPTIONS, ...options };\n      const { precision = -1 } = mergedOptions;\n      const onlyNumbers = String(extractNumbersFromString(value));\n      const padZeros = String(onlyNumbers).padStart(precision + 1, '0');\n      let internalNumber = Number(padZeros.replace(getRegex(precision), '.'));\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        raw: internalNumber,\n        formatted: currency(internalNumber).format(mergedOptions),\n      };\n    },\n    [options, getRegex]\n  );\n\n  const [value, setValue] = useState<IMask>({\n    converter: applyMask,\n    maskValue: applyMask(defaultValue),\n  });\n\n  const handleChangeValue = useCallback(\n    (formattedValue: string) => {\n      const { raw, formatted } = applyMask(formattedValue);\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":"useCurrencyMask.js"}
+{"version":3,"sources":["../../../../../src/components/atoms/Input/hooks/useCurrencyMask.ts"],"names":["DEFAULT_OPTIONS","symbol","separator","decimal","precision","useCurrencyMask","options","defaultValue","getRegex","RegExp","applyMask","value","mergedOptions","onlyNumbers","String","padZeros","padStart","internalNumber","Number","replace","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","raw","formatted","format","setValue","converter","maskValue","handleChangeValue","formattedValue","oldValue"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAKA,MAAMA,eAAgC,GAAG;AACvCC,EAAAA,MAAM,EAAE,KAD+B;AAEvCC,EAAAA,SAAS,EAAE,GAF4B;AAGvCC,EAAAA,OAAO,EAAE,GAH8B;AAIvCC,EAAAA,SAAS,EAAE;AAJ4B,CAAzC;;AAaO,MAAMC,eAAe,GAAG,CAC7BC,OAD6B,EAE7BC,YAF6B,KAGQ;AACrC,QAAMC,QAAQ,GAAG,wBACdJ,SAAD,IAAuB,IAAIK,MAAJ,CAAY,cAAaL,SAAU,YAAnC,EAAgD,GAAhD,CADR,EAEf,CAACE,OAAD,CAFe,CAAjB;AAKA,QAAMI,SAAS,GAAG,wBAChB,CAACC,KAAK,GAAG,EAAT,KAA4B;AAC1B,UAAMC,aAAa,GAAG,EAAE,GAAGZ,eAAL;AAAsB,SAAGM;AAAzB,KAAtB;AACA,UAAM;AAAEF,MAAAA,SAAS,GAAG,CAAC;AAAf,QAAqBQ,aAA3B;AACA,UAAMC,WAAW,GAAGC,MAAM,CAAC,qCAAyBH,KAAzB,CAAD,CAA1B;AACA,UAAMI,QAAQ,GAAGD,MAAM,CAACD,WAAD,CAAN,CAAoBG,QAApB,CAA6BZ,SAAS,GAAG,CAAzC,EAA4C,GAA5C,CAAjB;AACA,QAAIa,cAAc,GAAGC,MAAM,CAACH,QAAQ,CAACI,OAAT,CAAiBX,QAAQ,CAACJ,SAAD,CAAzB,EAAsC,GAAtC,CAAD,CAA3B;;AAEA,QAAIa,cAAc,GAAGC,MAAM,CAACE,gBAA5B,EAA8C;AAC5CH,MAAAA,cAAc,GAAGC,MAAM,CAACE,gBAAxB;AACD;;AAED,QAAIH,cAAc,GAAGC,MAAM,CAACG,gBAA5B,EAA8C;AAC5CJ,MAAAA,cAAc,GAAGC,MAAM,CAACG,gBAAxB;AACD;;AAED,WAAO;AACLC,MAAAA,GAAG,EAAEL,cADA;AAELM,MAAAA,SAAS,EAAE,uBAASN,cAAT,EAAyBO,MAAzB,CAAgCZ,aAAhC;AAFN,KAAP;AAID,GApBe,EAqBhB,CAACN,OAAD,EAAUE,QAAV,CArBgB,CAAlB;AAwBA,QAAM,CAACG,KAAD,EAAQc,QAAR,IAAoB,qBAAgB;AACxCC,IAAAA,SAAS,EAAEhB,SAD6B;AAExCiB,IAAAA,SAAS,EAAEjB,SAAS,CAACH,YAAD;AAFoB,GAAhB,CAA1B;AAKA,QAAMqB,iBAAiB,GAAG,wBACvBC,cAAD,IAA4B;AAC1B,UAAM;AAAEP,MAAAA,GAAF;AAAOC,MAAAA;AAAP,QAAqBb,SAAS,CAACmB,cAAD,CAApC;AACAJ,IAAAA,QAAQ,CAACK,QAAQ,KAAK,EACpB,GAAGA,QADiB;AAEpBH,MAAAA,SAAS,EAAE;AACTL,QAAAA,GADS;AAETC,QAAAA;AAFS;AAFS,KAAL,CAAT,CAAR;AAOD,GAVuB,EAWxB,CAACb,SAAD,EAAYe,QAAZ,CAXwB,CAA1B;AAcA,SAAO,CAACd,KAAD,EAAQiB,iBAAR,CAAP;AACD,CArDM","sourcesContent":["import currency from 'currency.js';\nimport { useCallback, useState } from 'react';\nimport { extractNumbersFromString } from '../../../../utils';\nimport { IMask, IMaskValue } from './useMask';\n\ntype CurrencyOptions = currency.Options;\n\nconst DEFAULT_OPTIONS: CurrencyOptions = {\n  symbol: 'R$ ',\n  separator: '.',\n  decimal: ',',\n  precision: 2,\n};\n\n/**\n * TODO:\n * @param options\n * @param defaultValue\n * @returns\n */\nexport const useCurrencyMask = (\n  options?: CurrencyOptions,\n  defaultValue?: string\n): [IMask, (value: string) => void] => {\n  const getRegex = useCallback(\n    (precision: number) => new RegExp(`\\\\B(?=(\\\\d{${precision}})(?!\\\\d))`, 'g'),\n    [options]\n  );\n\n  const applyMask = useCallback(\n    (value = ''): IMaskValue => {\n      const mergedOptions = { ...DEFAULT_OPTIONS, ...options };\n      const { precision = -1 } = mergedOptions;\n      const onlyNumbers = String(extractNumbersFromString(value));\n      const padZeros = String(onlyNumbers).padStart(precision + 1, '0');\n      let internalNumber = Number(padZeros.replace(getRegex(precision), '.'));\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        raw: internalNumber,\n        formatted: currency(internalNumber).format(mergedOptions),\n      };\n    },\n    [options, getRegex]\n  );\n\n  const [value, setValue] = useState<IMask>({\n    converter: applyMask,\n    maskValue: applyMask(defaultValue),\n  });\n\n  const handleChangeValue = useCallback(\n    (formattedValue: string) => {\n      const { raw, formatted } = applyMask(formattedValue);\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":"useCurrencyMask.js"}

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

@@ -7,7 +7,7 @@ exports.useMask = void 0;
 
 var _react = require("react");
 
-var _reactCore = require("@tecsinapse/react-core");
+var _utils = require("../../../../utils");
 
 const mergeMask = (value = '', mask) => {
   const chars = '' + value;
@@ -30,7 +30,7 @@ const getMask = (value = '', mask) => {
 
 const useMask = (mask, defaultValue) => {
   const applyMask = (0, _react.useCallback)((value = '') => {
-    const onlyNumbers = value ? (0, _reactCore.extractDigitsFromString)(value) : value;
+    const onlyNumbers = value ? (0, _utils.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","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"}
+{"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,oCAAwBA,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 '../../../../utils';\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/ProgressBar/ProgressBar.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ViewProps } from 'react-native';
-import { ColorGradationType, ColorType } from '@tecsinapse/react-core';
+import { ColorGradationType, ColorType } from '../../../types/defaults';
 export interface ProgressBarProps extends ViewProps {
     segments?: number;
     valueMin?: number;

package/dist/components/atoms/ProgressBar/ProgressBar.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _react = require("@emotion/react");
+
 var React = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var _styled = require("./styled");
-
-var _react2 = require("@emotion/react");
+var _utils = require("../../../utils");
 
-var _reactCore = require("@tecsinapse/react-core");
+var _styled = require("./styled");
 
 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); }
 
@@ -30,8 +30,8 @@ const ProgressBar = ({
   animationParameters,
   ...rest
 }) => {
-  const theme = (0, _react2.useTheme)();
-  const valueNow = typeof _valueNow === 'string' ? (0, _reactCore.extractNumbersFromString)(_valueNow) : _valueNow;
+  const theme = (0, _react.useTheme)();
+  const valueNow = typeof _valueNow === 'string' ? (0, _utils.extractNumbersFromString)(_valueNow) : _valueNow;
   const totalProgress = (valueNow - valueMin) / (valueMax - valueMin) * 100;
   const segments = Math.max(1, _segments);
   const segmentWidth = 100 / Math.max(segments);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/ProgressBar/ProgressBar.tsx"],"names":["ProgressBar","segments","_segments","valueMin","valueNow","_valueNow","valueMax","color","colorTone","animate","animationParameters","rest","theme","totalProgress","Math","max","segmentWidth","items","Array","keys","segmentsRender","map","index","animationValue","React","useRef","Animated","Value","current","min","minmax","width","progressPercent","timing","toValue","duration","length","useNativeDriver","delay","direction","start","rangeAnimation","interpolate","inputRange","outputRange","borderRightWidth","backgroundColor"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Animated, ViewProps } from 'react-native';\nimport { Container, Progress, Segment } from './styled';\nimport { useTheme } from '@emotion/react';\nimport {\n  ColorGradationType,\n  ColorType,\n  extractNumbersFromString,\n  ThemeProp,\n} from '@tecsinapse/react-core';\n\nexport interface ProgressBarProps extends ViewProps {\n  /** Number of segments. Defaults to 1. Set to 1 when 0 or less */\n  segments?: number;\n  /** Minimum possible value (0% of the bar). Defaults to 0 */\n  valueMin?: number;\n  /** Maximum possible value (100% of the bar). Defaults to 100 */\n  valueMax?: number;\n  /** Current value */\n  valueNow: number | string;\n  /** Filled partition color. Defaults to 'primary' */\n  color?: ColorType;\n  /** Filled partition color tone. Defaults to 'medium' */\n  colorTone?: ColorGradationType;\n  /** Animation */\n  animate: boolean;\n  /** Parameters animation  */\n  animationParameters?: { direction: 'left' | 'right'; duration: number };\n}\n\nconst ProgressBar: React.FC<ProgressBarProps> = ({\n  segments: _segments = 1,\n  valueMin = 0,\n  valueNow: _valueNow,\n  valueMax = 100,\n  color = 'primary',\n  colorTone = 'medium',\n  animate,\n  animationParameters,\n  ...rest\n}) => {\n  const theme = useTheme() as ThemeProp;\n\n  const valueNow =\n    typeof _valueNow === 'string'\n      ? extractNumbersFromString(_valueNow)\n      : _valueNow;\n\n  const totalProgress = ((valueNow - valueMin) / (valueMax - valueMin)) * 100;\n  const segments = Math.max(1, _segments);\n  const segmentWidth = 100 / Math.max(segments);\n\n  const items = [...Array(segments).keys()];\n\n  const segmentsRender = items.map(index => {\n    const animationValue = React.useRef(new Animated.Value(0)).current;\n\n    const max = segmentWidth * (index + 1);\n    const min = segmentWidth * index;\n    const minmax = (totalProgress - min) / (max - min);\n    const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;\n\n    let progressPercent: string | Animated.AnimatedInterpolation = `${width}%`;\n\n    if (animate && animationParameters) {\n      Animated.timing(animationValue, {\n        toValue: 1,\n        duration: animationParameters.duration / items.length,\n        useNativeDriver: false,\n        delay:\n          animationParameters.direction === 'right'\n            ? index * (animationParameters.duration / items.length)\n            : (items.length - index - 1) *\n              (animationParameters.duration / items.length),\n      }).start();\n\n      const rangeAnimation =\n        animationParameters?.direction === 'right'\n          ? [`${valueMin < 0 ? 0 : valueMin}%`, `${width}%`]\n          : [`${valueMax}%`, `${width}%`];\n\n      progressPercent = animationValue.interpolate?.({\n        inputRange: [0, 1],\n        outputRange: rangeAnimation,\n      });\n    }\n\n    return (\n      <Segment\n        key={index}\n        style={{\n          borderRightWidth: index == segments - 1 ? 0 : 2,\n        }}\n      >\n        <Progress\n          style={{\n            width: progressPercent,\n            backgroundColor: theme.color[color][colorTone],\n            borderRightWidth: width > 0 && width < 100 ? 2 : 0,\n          }}\n        />\n      </Segment>\n    );\n  });\n\n  return <Container {...rest}>{segmentsRender}</Container>;\n};\n\nexport default ProgressBar;\n"],"file":"ProgressBar.js"}
+{"version":3,"sources":["../../../../src/components/atoms/ProgressBar/ProgressBar.tsx"],"names":["ProgressBar","segments","_segments","valueMin","valueNow","_valueNow","valueMax","color","colorTone","animate","animationParameters","rest","theme","totalProgress","Math","max","segmentWidth","items","Array","keys","segmentsRender","map","index","animationValue","React","useRef","Animated","Value","current","min","minmax","width","progressPercent","timing","toValue","duration","length","useNativeDriver","delay","direction","start","rangeAnimation","interpolate","inputRange","outputRange","borderRightWidth","backgroundColor"],"mappings":"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","sourcesContent":["import { useTheme } from '@emotion/react';\nimport * as React from 'react';\nimport { Animated, ViewProps } from 'react-native';\nimport {\n  ColorGradationType,\n  ColorType,\n  ThemeProp\n} from '../../../types/defaults';\nimport { extractNumbersFromString } from '../../../utils';\nimport { Container, Progress, Segment } from './styled';\n\nexport interface ProgressBarProps extends ViewProps {\n  /** Number of segments. Defaults to 1. Set to 1 when 0 or less */\n  segments?: number;\n  /** Minimum possible value (0% of the bar). Defaults to 0 */\n  valueMin?: number;\n  /** Maximum possible value (100% of the bar). Defaults to 100 */\n  valueMax?: number;\n  /** Current value */\n  valueNow: number | string;\n  /** Filled partition color. Defaults to 'primary' */\n  color?: ColorType;\n  /** Filled partition color tone. Defaults to 'medium' */\n  colorTone?: ColorGradationType;\n  /** Animation */\n  animate: boolean;\n  /** Parameters animation  */\n  animationParameters?: { direction: 'left' | 'right'; duration: number };\n}\n\nconst ProgressBar: React.FC<ProgressBarProps> = ({\n  segments: _segments = 1,\n  valueMin = 0,\n  valueNow: _valueNow,\n  valueMax = 100,\n  color = 'primary',\n  colorTone = 'medium',\n  animate,\n  animationParameters,\n  ...rest\n}) => {\n  const theme = useTheme() as ThemeProp;\n\n  const valueNow =\n    typeof _valueNow === 'string'\n      ? extractNumbersFromString(_valueNow)\n      : _valueNow;\n\n  const totalProgress = ((valueNow - valueMin) / (valueMax - valueMin)) * 100;\n  const segments = Math.max(1, _segments);\n  const segmentWidth = 100 / Math.max(segments);\n\n  const items = [...Array(segments).keys()];\n\n  const segmentsRender = items.map(index => {\n    const animationValue = React.useRef(new Animated.Value(0)).current;\n\n    const max = segmentWidth * (index + 1);\n    const min = segmentWidth * index;\n    const minmax = (totalProgress - min) / (max - min);\n    const width = (minmax > 1 ? 1 : minmax < 0 ? 0 : minmax) * 100;\n\n    let progressPercent: string | Animated.AnimatedInterpolation = `${width}%`;\n\n    if (animate && animationParameters) {\n      Animated.timing(animationValue, {\n        toValue: 1,\n        duration: animationParameters.duration / items.length,\n        useNativeDriver: false,\n        delay:\n          animationParameters.direction === 'right'\n            ? index * (animationParameters.duration / items.length)\n            : (items.length - index - 1) *\n              (animationParameters.duration / items.length),\n      }).start();\n\n      const rangeAnimation =\n        animationParameters?.direction === 'right'\n          ? [`${valueMin < 0 ? 0 : valueMin}%`, `${width}%`]\n          : [`${valueMax}%`, `${width}%`];\n\n      progressPercent = animationValue.interpolate?.({\n        inputRange: [0, 1],\n        outputRange: rangeAnimation,\n      });\n    }\n\n    return (\n      <Segment\n        key={index}\n        style={{\n          borderRightWidth: index == segments - 1 ? 0 : 2,\n        }}\n      >\n        <Progress\n          style={{\n            width: progressPercent,\n            backgroundColor: theme.color[color][colorTone],\n            borderRightWidth: width > 0 && width < 100 ? 2 : 0,\n          }}\n        />\n      </Segment>\n    );\n  });\n\n  return <Container {...rest}>{segmentsRender}</Container>;\n};\n\nexport default ProgressBar;\n"],"file":"ProgressBar.js"}

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

@@ -11,13 +11,13 @@ var _react2 = _interopRequireWildcard(require("react"));
 
 var _reactNative = require("react-native");
 
-var _PressableSurface = require("../PressableSurface");
+var _utils = require("../../../utils");
 
-var _styled = require("./styled");
+var _PressableSurface = require("../PressableSurface");
 
 var _animation = require("./animation");
 
-var _utils = require("../../../utils");
+var _styled = require("./styled");
 
 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); }
 
@@ -38,42 +38,50 @@ const Switch = ({
 }) => {
   const theme = (0, _react.useTheme)();
 
-  const transitionValue = _react2.default.useRef(new _reactNative.Animated.Value(active ? 16.5 : 0)).current;
+  const width = _react2.default.useRef(0);
+
+  const transitionValue = _react2.default.useRef(new _reactNative.Animated.Value(0)).current;
 
-  const animatedColor = _react2.default.useRef(new _reactNative.Animated.Value(active ? 1 : 0)).current;
+  const animatedColor = _react2.default.useRef(new _reactNative.Animated.Value(0)).current;
 
-  const getBackgroundColor = (color, variation) => {
-    return disabled ? (0, _utils.lightenDarkenColor)(color, variation) : color;
+  const calculateTranslate = () => {
+    if (width.current > 0) {
+      return width.current - (0, _utils.extractNumbersFromString)(theme.spacing.micro) * 2 - (0, _utils.extractNumbersFromString)((0, _utils.RFValueStr)(_styled.SWITCH_PIN_WIDTH));
+    }
+
+    return 0;
+  };
+
+  const getBackgroundColor = color => {
+    return disabled ? (0, _utils.lightenDarkenColor)(theme.color[inactiveColor][inactiveColorTone], 20) : color;
   };
 
   const interpolateColor = animatedColor.interpolate({
     inputRange: [0, 1],
-    outputRange: [getBackgroundColor(theme.color[inactiveColor][inactiveColorTone], 25), getBackgroundColor(theme.color[activeColor][activeColorTone], 50)]
+    outputRange: [getBackgroundColor(theme.color[inactiveColor][inactiveColorTone]), getBackgroundColor(theme.color[activeColor][activeColorTone])]
   });
-  const animatedStyle = {
-    backgroundColor: interpolateColor
-  };
   (0, _react2.useEffect)(() => {
-    (0, _animation.transitionSwitch)(!active, transitionValue, animatedColor);
+    const translate = calculateTranslate();
+    (0, _animation.transitionSwitch)(active, translate, transitionValue, animatedColor);
   }, [active]);
   const handleChange = (0, _react2.useCallback)(() => {
     onChange(!active);
   }, [active, onChange]);
-  const stylesDefault = {
-    borderRadius: (0, _utils.extractNumbersFromString)(theme.borderRadius.pill),
-    paddingHorizontal: (0, _utils.extractNumbersFromString)(theme.spacing.micro),
-    paddingVertical: 0,
-    justifyContent: 'center',
-    width: 40,
-    height: 22
+
+  const handleSwitchLayout = lce => {
+    width.current = lce.nativeEvent.layout.width;
+    const translate = calculateTranslate();
+    (0, _animation.transitionSwitch)(active, translate, transitionValue, animatedColor);
   };
+
   return _react2.default.createElement(_PressableSurface.PressableSurface, _extends({}, rest, {
     onPress: handleChange,
     effect: "none",
     disabled: disabled
-  }), _react2.default.createElement(_reactNative.Animated.View, {
-    style: { ...animatedStyle,
-      ...stylesDefault
+  }), _react2.default.createElement(_styled.StyledSwitchContent, {
+    onLayout: handleSwitchLayout,
+    style: {
+      backgroundColor: interpolateColor
     }
   }, _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","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,yBAAU,MAAM;AACd,qCAAiB,CAACf,MAAlB,EAA0BK,eAA1B,EAA2CM,aAA3C;AACD,GAFD,EAEG,CAACX,MAAD,CAFH;AAIA,QAAMqB,YAAY,GAAG,yBAAY,MAAM;AACrC1B,IAAAA,QAAQ,CAAC,CAACK,MAAF,CAAR;AACD,GAFoB,EAElB,CAACA,MAAD,EAASL,QAAT,CAFkB,CAArB;AAIA,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,CAlED;;eAoEeX,M","sourcesContent":["import { useTheme } from '@emotion/react';\nimport React, { FC, useCallback, useEffect } from 'react';\nimport { Animated, StyleProp, ViewStyle, Text } 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  useEffect(() => {\n    transitionSwitch(!active, transitionValue, animatedColor);\n  }, [active]);\n\n  const handleChange = useCallback(() => {\n    onChange(!active);\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"}
+{"version":3,"sources":["../../../../src/components/atoms/Switch/Switch.tsx"],"names":["Switch","onChange","activeColor","activeColorTone","inactiveColor","inactiveColorTone","active","dotStyle","disabled","rest","theme","width","React","useRef","transitionValue","Animated","Value","current","animatedColor","calculateTranslate","spacing","micro","SWITCH_PIN_WIDTH","getBackgroundColor","color","interpolateColor","interpolate","inputRange","outputRange","translate","handleChange","handleSwitchLayout","lce","nativeEvent","layout","backgroundColor","transform","translateX"],"mappings":"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","sourcesContent":["import { useTheme } from '@emotion/react';\nimport React, { FC, useCallback, useEffect } from 'react';\nimport { Animated, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';\nimport {\n  ColorGradationType,\n  ColorType,\n  ThemeProp\n} from '../../../types/defaults';\nimport { extractNumbersFromString, lightenDarkenColor, RFValueStr } from '../../../utils';\nimport { PressableSurface } from '../PressableSurface';\nimport { transitionSwitch } from './animation';\nimport { StyledSwitch, StyledSwitchContent, SWITCH_PIN_WIDTH } from './styled';\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 width = React.useRef(0)\n  const transitionValue = React.useRef(new Animated.Value(0)).current\n  const animatedColor = React.useRef(new Animated.Value(0)).current\n  \n  const calculateTranslate = () => {\n    if (width.current > 0) {\n      return width.current - (extractNumbersFromString(theme.spacing.micro) * 2) - (extractNumbersFromString(RFValueStr(SWITCH_PIN_WIDTH)))\n    }\n    return 0\n  }\n\n  const getBackgroundColor = (color: string) => {\n    return disabled ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20) : color;\n  };\n\n  const interpolateColor = animatedColor.interpolate({\n    inputRange: [0, 1],\n    outputRange: [\n      getBackgroundColor(theme.color[inactiveColor][inactiveColorTone]),\n      getBackgroundColor(theme.color[activeColor][activeColorTone]),\n    ]\n  });\n\n  useEffect(() => {\n    const translate = calculateTranslate()\n    transitionSwitch(active, translate, transitionValue, animatedColor);\n  }, [active]);\n\n  const handleChange = useCallback(() => {\n    onChange(!active);\n  }, [active, onChange]);\n\n  const handleSwitchLayout = (lce: LayoutChangeEvent) => {\n    width.current = lce.nativeEvent.layout.width\n    const translate = calculateTranslate()\n    transitionSwitch(active, translate, transitionValue, animatedColor);\n  }\n\n  return (\n    <PressableSurface\n      {...rest}\n      onPress={handleChange}\n      effect=\"none\"\n      disabled={disabled}\n    >\n      <StyledSwitchContent onLayout={handleSwitchLayout} style={{ backgroundColor: interpolateColor }}>\n        <StyledSwitch style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}/>\n      </StyledSwitchContent>\n    </PressableSurface>\n  );\n};\n\nexport default Switch;\n"],"file":"Switch.js"}

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

@@ -1,2 +1,2 @@
 import { Animated } from 'react-native';
-export declare const transitionSwitch: (active: boolean, transitionValue: Animated.Value, animatedColor: Animated.Value) => void;
+export declare const transitionSwitch: (active: boolean, translate: number, transitionValue: Animated.Value, animatedColor: Animated.Value) => void;

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

@@ -7,32 +7,40 @@ exports.transitionSwitch = void 0;
 
 var _reactNative = require("react-native");
 
-const transitionSwitch = (active, transitionValue, animatedColor) => {
-  if (active) {
-    _reactNative.Animated.timing(transitionValue, {
-      toValue: 0,
-      duration: 150,
-      useNativeDriver: true
-    }).start();
+const ANIMATION_SPEED = 140;
 
-    _reactNative.Animated.timing(animatedColor, {
-      toValue: 0,
-      duration: 150,
-      useNativeDriver: false
-    }).start();
-  } else {
+const transitionSwitch = (active, translate, transitionValue, animatedColor) => {
+  if (translate <= 0) return;
+
+  if (active) {
     _reactNative.Animated.timing(transitionValue, {
-      toValue: 16.5,
-      duration: 150,
+      toValue: translate,
+      duration: ANIMATION_SPEED,
+      easing: _reactNative.Easing.out(_reactNative.Easing.ease),
       useNativeDriver: true
     }).start();
 
     _reactNative.Animated.timing(animatedColor, {
       toValue: 1,
-      duration: 150,
+      duration: ANIMATION_SPEED,
       useNativeDriver: false
     }).start();
+
+    return;
   }
+
+  _reactNative.Animated.timing(transitionValue, {
+    toValue: 0,
+    duration: ANIMATION_SPEED,
+    easing: _reactNative.Easing.out(_reactNative.Easing.ease),
+    useNativeDriver: true
+  }).start();
+
+  _reactNative.Animated.timing(animatedColor, {
+    toValue: 0,
+    duration: ANIMATION_SPEED,
+    useNativeDriver: false
+  }).start();
 };
 
 exports.transitionSwitch = transitionSwitch;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Switch/animation.ts"],"names":["transitionSwitch","active","transitionValue","animatedColor","Animated","timing","toValue","duration","useNativeDriver","start"],"mappings":";;;;;;;AAAA;;AAEO,MAAMA,gBAAgB,GAAG,CAC9BC,MAD8B,EAE9BC,eAF8B,EAG9BC,aAH8B,KAIrB;AACT,MAAIF,MAAJ,EAAY;AACVG,0BAASC,MAAT,CAAgBH,eAAhB,EAAiC;AAC/BI,MAAAA,OAAO,EAAE,CADsB;AAE/BC,MAAAA,QAAQ,EAAE,GAFqB;AAG/BC,MAAAA,eAAe,EAAE;AAHc,KAAjC,EAIGC,KAJH;;AAKAL,0BAASC,MAAT,CAAgBF,aAAhB,EAA+B;AAC7BG,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,GAFmB;AAG7BC,MAAAA,eAAe,EAAE;AAHY,KAA/B,EAIGC,KAJH;AAKD,GAXD,MAWO;AACLL,0BAASC,MAAT,CAAgBH,eAAhB,EAAiC;AAC/BI,MAAAA,OAAO,EAAE,IADsB;AAE/BC,MAAAA,QAAQ,EAAE,GAFqB;AAG/BC,MAAAA,eAAe,EAAE;AAHc,KAAjC,EAIGC,KAJH;;AAKAL,0BAASC,MAAT,CAAgBF,aAAhB,EAA+B;AAC7BG,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAE,GAFmB;AAG7BC,MAAAA,eAAe,EAAE;AAHY,KAA/B,EAIGC,KAJH;AAKD;AACF,CA5BM","sourcesContent":["import { Animated } from 'react-native';\n\nexport const transitionSwitch = (\n  active: boolean,\n  transitionValue: Animated.Value,\n  animatedColor: Animated.Value\n): void => {\n  if (active) {\n    Animated.timing(transitionValue, {\n      toValue: 0,\n      duration: 150,\n      useNativeDriver: true,\n    }).start();\n    Animated.timing(animatedColor, {\n      toValue: 0,\n      duration: 150,\n      useNativeDriver: false,\n    }).start();\n  } else {\n    Animated.timing(transitionValue, {\n      toValue: 16.5,\n      duration: 150,\n      useNativeDriver: true,\n    }).start();\n    Animated.timing(animatedColor, {\n      toValue: 1,\n      duration: 150,\n      useNativeDriver: false,\n    }).start();\n  }\n};\n"],"file":"animation.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Switch/animation.ts"],"names":["ANIMATION_SPEED","transitionSwitch","active","translate","transitionValue","animatedColor","Animated","timing","toValue","duration","easing","Easing","out","ease","useNativeDriver","start"],"mappings":";;;;;;;AAAA;;AAEA,MAAMA,eAAe,GAAG,GAAxB;;AAEO,MAAMC,gBAAgB,GAAG,CAC9BC,MAD8B,EAE9BC,SAF8B,EAG9BC,eAH8B,EAI9BC,aAJ8B,KAKrB;AAET,MAAIF,SAAS,IAAI,CAAjB,EAAoB;;AAEpB,MAAID,MAAJ,EAAY;AACVI,0BAASC,MAAT,CAAgBH,eAAhB,EAAiC;AAC/BI,MAAAA,OAAO,EAAEL,SADsB;AAE/BM,MAAAA,QAAQ,EAAET,eAFqB;AAG/BU,MAAAA,MAAM,EAAEC,oBAAOC,GAAP,CAAWD,oBAAOE,IAAlB,CAHuB;AAI/BC,MAAAA,eAAe,EAAE;AAJc,KAAjC,EAKGC,KALH;;AAMAT,0BAASC,MAAT,CAAgBF,aAAhB,EAA+B;AAC7BG,MAAAA,OAAO,EAAE,CADoB;AAE7BC,MAAAA,QAAQ,EAAET,eAFmB;AAG7Bc,MAAAA,eAAe,EAAE;AAHY,KAA/B,EAIGC,KAJH;;AAKA;AACD;;AAEDT,wBAASC,MAAT,CAAgBH,eAAhB,EAAiC;AAC/BI,IAAAA,OAAO,EAAE,CADsB;AAE/BC,IAAAA,QAAQ,EAAET,eAFqB;AAG/BU,IAAAA,MAAM,EAAEC,oBAAOC,GAAP,CAAWD,oBAAOE,IAAlB,CAHuB;AAI/BC,IAAAA,eAAe,EAAE;AAJc,GAAjC,EAKGC,KALH;;AAMAT,wBAASC,MAAT,CAAgBF,aAAhB,EAA+B;AAC7BG,IAAAA,OAAO,EAAE,CADoB;AAE7BC,IAAAA,QAAQ,EAAET,eAFmB;AAG7Bc,IAAAA,eAAe,EAAE;AAHY,GAA/B,EAIGC,KAJH;AAMD,CApCM","sourcesContent":["import { Animated, Easing } from 'react-native';\n\nconst ANIMATION_SPEED = 140\n\nexport const transitionSwitch = (\n  active: boolean,\n  translate: number,\n  transitionValue: Animated.Value,\n  animatedColor: Animated.Value\n): void => {\n\n  if (translate <= 0) return\n  \n  if (active) {\n    Animated.timing(transitionValue, {\n      toValue: translate,\n      duration: ANIMATION_SPEED,\n      easing: Easing.out(Easing.ease),\n      useNativeDriver: true,\n    }).start();\n    Animated.timing(animatedColor, {\n      toValue: 1,\n      duration: ANIMATION_SPEED,\n      useNativeDriver: false,\n    }).start();\n    return\n  } \n\n  Animated.timing(transitionValue, {\n    toValue: 0,\n    duration: ANIMATION_SPEED,\n    easing: Easing.out(Easing.ease),\n    useNativeDriver: true,\n  }).start();\n  Animated.timing(animatedColor, {\n    toValue: 0,\n    duration: ANIMATION_SPEED,\n    useNativeDriver: false,\n  }).start();\n\n};\n"],"file":"animation.js"}

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

@@ -1,12 +1,13 @@
 /// <reference types="react" />
 import { Animated } from 'react-native';
-import { SwitchProps } from './Switch';
+export declare const SWITCH_BODY_WIDTH = "40px";
+export declare const SWITCH_PIN_WIDTH = "16px";
 export declare const StyledSwitchContent: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
     children?: import("react").ReactNode;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & Partial<SwitchProps> & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {}>;
+} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {}>;
 export declare const StyledSwitch: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").ViewProps & import("react").RefAttributes<import("react-native").View>> & {
     children?: import("react").ReactNode;
 } & {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSwitch = exports.StyledSwitchContent = void 0;
+exports.StyledSwitch = exports.StyledSwitchContent = exports.SWITCH_PIN_WIDTH = exports.SWITCH_BODY_WIDTH = void 0;
 
 var _native = _interopRequireDefault(require("@emotion/native"));
 
@@ -13,6 +13,10 @@ var _utils = require("../../../utils");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const SWITCH_BODY_WIDTH = '40px';
+exports.SWITCH_BODY_WIDTH = SWITCH_BODY_WIDTH;
+const SWITCH_PIN_WIDTH = '16px';
+exports.SWITCH_PIN_WIDTH = SWITCH_PIN_WIDTH;
 const StyledSwitchContent = (0, _native.default)(_reactNative.Animated.View)`
   border-radius: ${({
   theme
@@ -21,7 +25,7 @@ const StyledSwitchContent = (0, _native.default)(_reactNative.Animated.View)`
   theme
 }) => theme.spacing.micro};
   justify-content: center;
-  width: ${(0, _utils.RFValueStr)('40px')};
+  width: ${(0, _utils.RFValueStr)(SWITCH_BODY_WIDTH)};
   height: ${(0, _utils.RFValueStr)('22px')};
 `;
 exports.StyledSwitchContent = StyledSwitchContent;
@@ -32,7 +36,7 @@ const StyledSwitch = (0, _native.default)(_reactNative.Animated.View)`
   background-color: ${({
   theme
 }) => theme.miscellaneous.surfaceColor};
-  width: ${(0, _utils.RFValueStr)('16px')};
+  width: ${(0, _utils.RFValueStr)(SWITCH_PIN_WIDTH)};
   height: ${(0, _utils.RFValueStr)('16px')};
 `;
 exports.StyledSwitch = StyledSwitch;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Switch/styled.ts"],"names":["StyledSwitchContent","Animated","View","theme","borderRadius","pill","spacing","micro","StyledSwitch","miscellaneous","surfaceColor"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAGO,MAAMA,mBAAmB,GAAG,qBAAOC,sBAASC,IAAhB,CAEjC;AACF,mBAAmB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,YAAN,CAAmBC,IAAK;AAC1D,eAAe,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACG,OAAN,CAAcC,KAAM;AAClD;AACA,WAAW,uBAAW,MAAX,CAAmB;AAC9B,YAAY,uBAAW,MAAX,CAAmB;AAC/B,CARO;;AAUA,MAAMC,YAAY,GAAG,qBAAOP,sBAASC,IAAhB,CAA2C;AACvE,mBAAmB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,YAAN,CAAmBC,IAAK;AAC1D,sBAAsB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACM,aAAN,CAAoBC,YAAa;AACtE,WAAW,uBAAW,MAAX,CAAmB;AAC9B,YAAY,uBAAW,MAAX,CAAmB;AAC/B,CALO","sourcesContent":["import styled from '@emotion/native';\nimport { Animated } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValueStr } from '../../../utils';\nimport { SwitchProps } from './Switch';\n\nexport const StyledSwitchContent = styled(Animated.View)<\n  Partial<SwitchProps> & Partial<StyleProps>\n>`\n  border-radius: ${({ theme }) => theme.borderRadius.pill};\n  padding: 0 ${({ theme }) => theme.spacing.micro};\n  justify-content: center;\n  width: ${RFValueStr('40px')};\n  height: ${RFValueStr('22px')};\n`;\n\nexport const StyledSwitch = styled(Animated.View)<Partial<StyleProps>>`\n  border-radius: ${({ theme }) => theme.borderRadius.pill};\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n  width: ${RFValueStr('16px')};\n  height: ${RFValueStr('16px')};\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Switch/styled.ts"],"names":["SWITCH_BODY_WIDTH","SWITCH_PIN_WIDTH","StyledSwitchContent","Animated","View","theme","borderRadius","pill","spacing","micro","StyledSwitch","miscellaneous","surfaceColor"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;AAEO,MAAMA,iBAAiB,GAAG,MAA1B;;AACA,MAAMC,gBAAgB,GAAG,MAAzB;;AAEA,MAAMC,mBAAmB,GAAG,qBAAOC,sBAASC,IAAhB,CAEjC;AACF,mBAAmB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,YAAN,CAAmBC,IAAK;AAC1D,eAAe,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACG,OAAN,CAAcC,KAAM;AAClD;AACA,WAAW,uBAAWT,iBAAX,CAA8B;AACzC,YAAY,uBAAW,MAAX,CAAmB;AAC/B,CARO;;AAUA,MAAMU,YAAY,GAAG,qBAAOP,sBAASC,IAAhB,CAA2C;AACvE,mBAAmB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,YAAN,CAAmBC,IAAK;AAC1D,sBAAsB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACM,aAAN,CAAoBC,YAAa;AACtE,WAAW,uBAAWX,gBAAX,CAA6B;AACxC,YAAY,uBAAW,MAAX,CAAmB;AAC/B,CALO","sourcesContent":["import styled from '@emotion/native';\nimport { Animated } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValueStr } from '../../../utils';\n\nexport const SWITCH_BODY_WIDTH = '40px'\nexport const SWITCH_PIN_WIDTH = '16px'\n\nexport const StyledSwitchContent = styled(Animated.View)<\n  Partial<StyleProps>\n>`\n  border-radius: ${({ theme }) => theme.borderRadius.pill};\n  padding: 0 ${({ theme }) => theme.spacing.micro};\n  justify-content: center;\n  width: ${RFValueStr(SWITCH_BODY_WIDTH)};\n  height: ${RFValueStr('22px')};\n`;\n\nexport const StyledSwitch = styled(Animated.View)<Partial<StyleProps>>`\n  border-radius: ${({ theme }) => theme.borderRadius.pill};\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n  width: ${RFValueStr(SWITCH_PIN_WIDTH)};\n  height: ${RFValueStr('16px')};\n`;\n"],"file":"styled.js"}

package/dist/components/atoms/shared/PaperAndCard.js

@@ -12,7 +12,6 @@ const baseStyles = ({
 }) => (0, _native.css)`
   border-radius: ${theme.borderRadius.mili};
   background-color: ${theme.miscellaneous.surfaceColor};
-  overflow: hidden;
 `;
 
 exports.baseStyles = baseStyles;
@@ -24,10 +23,10 @@ const elevatedStyles = ({
   shadowColor: theme.miscellaneous.shadow,
   shadowOffset: {
     width: 0,
-    height: 1
+    height: 2
   },
-  shadowOpacity: 0.2,
-  shadowRadius: 1.4,
+  shadowOpacity: 0.05,
+  shadowRadius: 5,
   elevation: 2
 })];
 

package/dist/components/atoms/shared/PaperAndCard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/shared/PaperAndCard.ts"],"names":["baseStyles","theme","borderRadius","mili","miscellaneous","surfaceColor","elevatedStyles","elevated","shadowColor","shadow","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation"],"mappings":";;;;;;;AAAA;;AAIO,MAAMA,UAAU,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAgC,gBAAI;AAC9D,mBAAmBA,KAAK,CAACC,YAAN,CAAmBC,IAAK;AAC3C,sBAAsBF,KAAK,CAACG,aAAN,CAAoBC,YAAa;AACvD;AACA,CAJO;;;;AAOA,MAAMC,cAAc,GAAG,CAAC;AAC7BL,EAAAA,KAD6B;AAE7BM,EAAAA,QAAQ,GAAG;AAFkB,CAAD,KAI5BA,QAAQ,IAAI,CACV,iBAAI;AACFC,EAAAA,WAAW,EAAEP,KAAK,CAACG,aAAN,CAAoBK,MAD/B;AAEFC,EAAAA,YAAY,EAAE;AAAEC,IAAAA,KAAK,EAAE,CAAT;AAAYC,IAAAA,MAAM,EAAE;AAApB,GAFZ;AAGFC,EAAAA,aAAa,EAAE,GAHb;AAIFC,EAAAA,YAAY,EAAE,GAJZ;AAKFC,EAAAA,SAAS,EAAE;AALT,CAAJ,CADU,CAJP","sourcesContent":["import { css } from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const baseStyles = ({ theme }: StyleProps): any => css`\n  border-radius: ${theme.borderRadius.mili};\n  background-color: ${theme.miscellaneous.surfaceColor};\n  overflow: hidden;\n`;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const elevatedStyles = ({\n  theme,\n  elevated = false,\n}: { elevated?: boolean } & StyleProps): any =>\n  elevated && [\n    css({\n      shadowColor: theme.miscellaneous.shadow,\n      shadowOffset: { width: 0, height: 1 },\n      shadowOpacity: 0.2,\n      shadowRadius: 1.4,\n      elevation: 2,\n    }),\n  ];\n/* eslint-enable @typescript-eslint/no-explicit-any */\n"],"file":"PaperAndCard.js"}
+{"version":3,"sources":["../../../../src/components/atoms/shared/PaperAndCard.ts"],"names":["baseStyles","theme","borderRadius","mili","miscellaneous","surfaceColor","elevatedStyles","elevated","shadowColor","shadow","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation"],"mappings":";;;;;;;AAAA;;AAIO,MAAMA,UAAU,GAAG,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAgC,gBAAI;AAC9D,mBAAmBA,KAAK,CAACC,YAAN,CAAmBC,IAAK;AAC3C,sBAAsBF,KAAK,CAACG,aAAN,CAAoBC,YAAa;AACvD,CAHO;;;;AAMA,MAAMC,cAAc,GAAG,CAAC;AAC7BL,EAAAA,KAD6B;AAE7BM,EAAAA,QAAQ,GAAG;AAFkB,CAAD,KAI5BA,QAAQ,IAAI,CACV,iBAAI;AACFC,EAAAA,WAAW,EAAEP,KAAK,CAACG,aAAN,CAAoBK,MAD/B;AAEFC,EAAAA,YAAY,EAAE;AAAEC,IAAAA,KAAK,EAAE,CAAT;AAAYC,IAAAA,MAAM,EAAE;AAApB,GAFZ;AAGFC,EAAAA,aAAa,EAAE,IAHb;AAIFC,EAAAA,YAAY,EAAE,CAJZ;AAKFC,EAAAA,SAAS,EAAE;AALT,CAAJ,CADU,CAJP","sourcesContent":["import { css } from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const baseStyles = ({ theme }: StyleProps): any => css`\n  border-radius: ${theme.borderRadius.mili};\n  background-color: ${theme.miscellaneous.surfaceColor};\n`;\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\nexport const elevatedStyles = ({\n  theme,\n  elevated = false,\n}: { elevated?: boolean } & StyleProps): any =>\n  elevated && [\n    css({\n      shadowColor: theme.miscellaneous.shadow,\n      shadowOffset: { width: 0, height: 2 },\n      shadowOpacity: 0.05,\n      shadowRadius: 5,\n      elevation: 2\n    }),\n  ];\n/* eslint-enable @typescript-eslint/no-explicit-any */\n"],"file":"PaperAndCard.js"}

package/dist/components/molecules/Calendar/index.d.ts

@@ -1 +1 @@
-export { default as Calendar, CalendarProps, SelectionType, DateRange, } from './Calendar';
+export { default as Calendar, CalendarProps, SelectionType, DateRange, Value } from './Calendar';

package/dist/components/molecules/Calendar/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "DateRange", {
     return _Calendar.DateRange;
   }
 });
+Object.defineProperty(exports, "Value", {
+  enumerable: true,
+  get: function () {
+    return _Calendar.Value;
+  }
+});
 
 var _Calendar = _interopRequireWildcard(require("./Calendar"));
 

package/dist/components/molecules/Calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Calendar/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export {\n  default as Calendar,\n  CalendarProps,\n  SelectionType,\n  DateRange,\n} from './Calendar';\n"],"file":"index.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Calendar/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA","sourcesContent":["export {\n  default as Calendar,\n  CalendarProps,\n  SelectionType,\n  DateRange,\n  Value\n} from './Calendar';\n"],"file":"index.js"}

package/dist/components/molecules/Calendar/styled.js

@@ -25,21 +25,6 @@ const TitleContainer = _native.default.View`
 }) => theme.color.secondary.xlight};
 `;
 exports.TitleContainer = TitleContainer;
-
-const surfaceBorderRight = ({
-  isRright,
-  theme
-}) => !isWeb && isRright && (0, _native.css)`
-    border-top-right-radius: ${theme === null || theme === void 0 ? void 0 : theme.borderRadius.deca};
-  `;
-
-const surfaceBorderLeft = ({
-  isLeft,
-  theme
-}) => !isWeb && isLeft && (0, _native.css)`
-    border-top-left-radius: ${theme === null || theme === void 0 ? void 0 : theme.borderRadius.deca};
-  `;
-
 const Control = (0, _native.default)(_PressableSurface.PressableSurface)(props => {
   var _props$theme, _props$theme2, _props$theme3;
 
@@ -48,8 +33,6 @@ const Control = (0, _native.default)(_PressableSurface.PressableSurface)(props =
     padding: ${(_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : _props$theme.spacing.centi};
     border-radius: ${(_props$theme2 = props.theme) === null || _props$theme2 === void 0 ? void 0 : _props$theme2.borderRadius.mili};
     margin: ${(_props$theme3 = props.theme) === null || _props$theme3 === void 0 ? void 0 : _props$theme3.spacing.mili};
-    ${surfaceBorderRight(props)}
-    ${surfaceBorderLeft(props)}
   `;
 });
 exports.Control = Control;

package/dist/components/molecules/Calendar/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Calendar/styled.ts"],"names":["isWeb","Platform","OS","TitleContainer","styled","View","theme","color","secondary","xlight","surfaceBorderRight","isRright","borderRadius","deca","surfaceBorderLeft","isLeft","Control","PressableSurface","props","align","spacing","centi","mili","getCapitalizedTextComponent","component","Content","miscellaneous","surfaceColor","Week","Selected","selected","primary","medium","Cell","highlighted","isLineEnd","isLineStart","isRangeStart","isRangeEnd","borderRadiusSize","rightBorderRadius","leftBorderRadius","borderEffect","backgroundColor","light"],"mappings":"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","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { Platform, PressableProps, ViewProps } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { PressableSurface } from '../../atoms/PressableSurface';\nimport { TextProps } from '../../atoms/Text';\n\nconst isWeb = Platform.OS === 'web';\n\ninterface ButtonBorders {\n  isLeft?: boolean;\n  isRright?: boolean;\n}\n\nexport const TitleContainer = styled.View<Partial<StyleProps>>`\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ${({ theme }) => theme.color.secondary.xlight};\n`;\n\nconst surfaceBorderRight = ({\n  isRright,\n  theme,\n}: ButtonBorders & Partial<StyleProps>) =>\n  !isWeb &&\n  isRright &&\n  css`\n    border-top-right-radius: ${theme?.borderRadius.deca};\n  `;\n\nconst surfaceBorderLeft = ({\n  isLeft,\n  theme,\n}: ButtonBorders & Partial<StyleProps>) =>\n  !isWeb &&\n  isLeft &&\n  css`\n    border-top-left-radius: ${theme?.borderRadius.deca};\n  `;\n\nexport const Control = styled(PressableSurface)(\n  (\n    props: Partial<StyleProps> & ButtonBorders & { align: 'start' | 'end' }\n  ) => css`\n    align-items: flex-${props.align};\n    padding: ${props.theme?.spacing.centi};\n    border-radius: ${props.theme?.borderRadius.mili};\n    margin: ${props.theme?.spacing.mili};\n    ${surfaceBorderRight(props)}\n    ${surfaceBorderLeft(props)}\n  `\n);\n\nexport const getCapitalizedTextComponent = (component: FC<TextProps>) => {\n  return styled(component)`\n    text-transform: capitalize;\n  `;\n};\n\nexport const Content = styled.View<ViewProps & Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.deca};\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n`;\n\nexport const Week = styled.View<Partial<StyleProps>>`\n  flex-direction: row;\n`;\n\nexport const Selected = styled.View<\n  Partial<StyleProps> & { selected: boolean }\n>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: ${({ theme, selected }) =>\n    selected ? theme.color.primary.medium : 'transparent'};\n  border-radius: ${({ theme }) => theme.borderRadius.mili};\n  width: 100%;\n  height: 100%;\n`;\n\nexport const Cell = styled(PressableSurface)<\n  PressableProps &\n    Partial<StyleProps> & {\n      selected: boolean;\n      highlighted: boolean;\n      isLineEnd: boolean;\n      isLineStart: boolean;\n      isRangeStart: boolean;\n      isRangeEnd: boolean;\n    }\n>(\n  ({\n    theme,\n    selected,\n    highlighted,\n    isLineEnd,\n    isLineStart,\n    isRangeStart,\n    isRangeEnd,\n  }) => {\n    const borderRadiusSize = theme.borderRadius.mili;\n\n    const { rightBorderRadius, leftBorderRadius } = {\n      rightBorderRadius:\n        (selected && !isRangeStart) || isLineEnd ? borderRadiusSize : 0,\n      leftBorderRadius:\n        (selected && !isRangeEnd) || isLineStart ? borderRadiusSize : 0,\n    };\n\n    const borderEffect = highlighted ? 0 : borderRadiusSize;\n\n    const backgroundColor = highlighted\n      ? theme.color.primary.light\n      : 'transparent';\n\n    return css`\n      ${isWeb\n        ? css`\n            width: 32px;\n            height: 32px;\n          `\n        : css`\n            aspect-ratio: 1;\n            flex: 1;\n          `}\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: ${borderEffect};\n      border-top-left-radius: ${leftBorderRadius};\n      border-bottom-left-radius: ${leftBorderRadius};\n      border-top-right-radius: ${rightBorderRadius};\n      border-bottom-right-radius: ${rightBorderRadius};\n      background-color: ${backgroundColor};\n    `;\n  }\n);\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Calendar/styled.ts"],"names":["isWeb","Platform","OS","TitleContainer","styled","View","theme","color","secondary","xlight","Control","PressableSurface","props","align","spacing","centi","borderRadius","mili","getCapitalizedTextComponent","component","Content","deca","miscellaneous","surfaceColor","Week","Selected","selected","primary","medium","Cell","highlighted","isLineEnd","isLineStart","isRangeStart","isRangeEnd","borderRadiusSize","rightBorderRadius","leftBorderRadius","borderEffect","backgroundColor","light"],"mappings":"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","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { Platform, PressableProps, ViewProps } from 'react-native';\nimport { StyleProps } from '../../../types/defaults';\nimport { PressableSurface } from '../../atoms/PressableSurface';\nimport { TextProps } from '../../atoms/Text';\n\nconst isWeb = Platform.OS === 'web';\n\ninterface ButtonBorders {\n  isLeft?: boolean;\n  isRright?: boolean;\n}\n\nexport const TitleContainer = styled.View<Partial<StyleProps>>`\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  background-color: ${({ theme }) => theme.color.secondary.xlight};\n`;\n\nexport const Control = styled(PressableSurface)(\n  (\n    props: Partial<StyleProps> & ButtonBorders & { align: 'start' | 'end' }\n  ) => css`\n    align-items: flex-${props.align};\n    padding: ${props.theme?.spacing.centi};\n    border-radius: ${props.theme?.borderRadius.mili};\n    margin: ${props.theme?.spacing.mili};\n  `\n);\n\nexport const getCapitalizedTextComponent = (component: FC<TextProps>) => {\n  return styled(component)`\n    text-transform: capitalize;\n  `;\n};\n\nexport const Content = styled.View<ViewProps & Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.deca};\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n`;\n\nexport const Week = styled.View<Partial<StyleProps>>`\n  flex-direction: row;\n`;\n\nexport const Selected = styled.View<\n  Partial<StyleProps> & { selected: boolean }\n>`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: ${({ theme, selected }) =>\n    selected ? theme.color.primary.medium : 'transparent'};\n  border-radius: ${({ theme }) => theme.borderRadius.mili};\n  width: 100%;\n  height: 100%;\n`;\n\nexport const Cell = styled(PressableSurface)<\n  PressableProps &\n    Partial<StyleProps> & {\n      selected: boolean;\n      highlighted: boolean;\n      isLineEnd: boolean;\n      isLineStart: boolean;\n      isRangeStart: boolean;\n      isRangeEnd: boolean;\n    }\n>(\n  ({\n    theme,\n    selected,\n    highlighted,\n    isLineEnd,\n    isLineStart,\n    isRangeStart,\n    isRangeEnd,\n  }) => {\n    const borderRadiusSize = theme.borderRadius.mili;\n\n    const { rightBorderRadius, leftBorderRadius } = {\n      rightBorderRadius:\n        (selected && !isRangeStart) || isLineEnd ? borderRadiusSize : 0,\n      leftBorderRadius:\n        (selected && !isRangeEnd) || isLineStart ? borderRadiusSize : 0,\n    };\n\n    const borderEffect = highlighted ? 0 : borderRadiusSize;\n\n    const backgroundColor = highlighted\n      ? theme.color.primary.light\n      : 'transparent';\n\n    return css`\n      ${isWeb\n        ? css`\n            width: 32px;\n            height: 32px;\n          `\n        : css`\n            aspect-ratio: 1;\n            flex: 1;\n          `}\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      border-radius: ${borderEffect};\n      border-top-left-radius: ${leftBorderRadius};\n      border-bottom-left-radius: ${leftBorderRadius};\n      border-top-right-radius: ${rightBorderRadius};\n      border-bottom-right-radius: ${rightBorderRadius};\n      background-color: ${backgroundColor};\n    `;\n  }\n);\n"],"file":"styled.js"}