@tecsinapse/react-core 1.12.6 → 1.12.10

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.10](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.12.9...@tecsinapse/react-core@1.12.10) (2022-01-19)
+
+**Note:** Version bump only for package @tecsinapse/react-core
+
+
+
+
+
+## [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

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":";;;;;;;AAAA;;AACA;;AACA;;AAMA;;AACA;;;;;;AAqBA,MAAMA,WAAuC,GAAG,CAAC;AAC/CC,EAAAA,QAAQ,EAAEC,SAAS,GAAG,CADyB;AAE/CC,EAAAA,QAAQ,GAAG,CAFoC;AAG/CC,EAAAA,QAAQ,EAAEC,SAHqC;AAI/CC,EAAAA,QAAQ,GAAG,GAJoC;AAK/CC,EAAAA,KAAK,GAAG,SALuC;AAM/CC,EAAAA,SAAS,GAAG,QANmC;AAO/CC,EAAAA,OAP+C;AAQ/CC,EAAAA,mBAR+C;AAS/C,KAAGC;AAT4C,CAAD,KAU1C;AACJ,QAAMC,KAAK,GAAG,sBAAd;AAEA,QAAMR,QAAQ,GACZ,OAAOC,SAAP,KAAqB,QAArB,GACI,qCAAyBA,SAAzB,CADJ,GAEIA,SAHN;AAKA,QAAMQ,aAAa,GAAI,CAACT,QAAQ,GAAGD,QAAZ,KAAyBG,QAAQ,GAAGH,QAApC,CAAD,GAAkD,GAAxE;AACA,QAAMF,QAAQ,GAAGa,IAAI,CAACC,GAAL,CAAS,CAAT,EAAYb,SAAZ,CAAjB;AACA,QAAMc,YAAY,GAAG,MAAMF,IAAI,CAACC,GAAL,CAASd,QAAT,CAA3B;AAEA,QAAMgB,KAAK,GAAG,CAAC,GAAGC,KAAK,CAACjB,QAAD,CAAL,CAAgBkB,IAAhB,EAAJ,CAAd;AAEA,QAAMC,cAAc,GAAGH,KAAK,CAACI,GAAN,CAAUC,KAAK,IAAI;AACxC,UAAMC,cAAc,GAAGC,KAAK,CAACC,MAAN,CAAa,IAAIC,sBAASC,KAAb,CAAmB,CAAnB,CAAb,EAAoCC,OAA3D;AAEA,UAAMb,GAAG,GAAGC,YAAY,IAAIM,KAAK,GAAG,CAAZ,CAAxB;AACA,UAAMO,GAAG,GAAGb,YAAY,GAAGM,KAA3B;AACA,UAAMQ,MAAM,GAAG,CAACjB,aAAa,GAAGgB,GAAjB,KAAyBd,GAAG,GAAGc,GAA/B,CAAf;AACA,UAAME,KAAK,GAAG,CAACD,MAAM,GAAG,CAAT,GAAa,CAAb,GAAiBA,MAAM,GAAG,CAAT,GAAa,CAAb,GAAiBA,MAAnC,IAA6C,GAA3D;AAEA,QAAIE,eAAwD,GAAI,GAAED,KAAM,GAAxE;;AAEA,QAAItB,OAAO,IAAIC,mBAAf,EAAoC;AAAA;;AAClCgB,4BAASO,MAAT,CAAgBV,cAAhB,EAAgC;AAC9BW,QAAAA,OAAO,EAAE,CADqB;AAE9BC,QAAAA,QAAQ,EAAEzB,mBAAmB,CAACyB,QAApB,GAA+BlB,KAAK,CAACmB,MAFjB;AAG9BC,QAAAA,eAAe,EAAE,KAHa;AAI9BC,QAAAA,KAAK,EACH5B,mBAAmB,CAAC6B,SAApB,KAAkC,OAAlC,GACIjB,KAAK,IAAIZ,mBAAmB,CAACyB,QAApB,GAA+BlB,KAAK,CAACmB,MAAzC,CADT,GAEI,CAACnB,KAAK,CAACmB,MAAN,GAAed,KAAf,GAAuB,CAAxB,KACCZ,mBAAmB,CAACyB,QAApB,GAA+BlB,KAAK,CAACmB,MADtC;AAPwB,OAAhC,EASGI,KATH;;AAWA,YAAMC,cAAc,GAClB,CAAA/B,mBAAmB,SAAnB,IAAAA,mBAAmB,WAAnB,YAAAA,mBAAmB,CAAE6B,SAArB,MAAmC,OAAnC,GACI,CAAE,GAAEpC,QAAQ,GAAG,CAAX,GAAe,CAAf,GAAmBA,QAAS,GAAhC,EAAqC,GAAE4B,KAAM,GAA7C,CADJ,GAEI,CAAE,GAAEzB,QAAS,GAAb,EAAkB,GAAEyB,KAAM,GAA1B,CAHN;AAKAC,MAAAA,eAAe,4BAAGT,cAAc,CAACmB,WAAlB,0DAAG,2BAAAnB,cAAc,EAAe;AAC7CoB,QAAAA,UAAU,EAAE,CAAC,CAAD,EAAI,CAAJ,CADiC;AAE7CC,QAAAA,WAAW,EAAEH;AAFgC,OAAf,CAAhC;AAID;;AAED,WACE,oBAAC,eAAD;AACE,MAAA,GAAG,EAAEnB,KADP;AAEE,MAAA,KAAK,EAAE;AACLuB,QAAAA,gBAAgB,EAAEvB,KAAK,IAAIrB,QAAQ,GAAG,CAApB,GAAwB,CAAxB,GAA4B;AADzC;AAFT,OAME,oBAAC,gBAAD;AACE,MAAA,KAAK,EAAE;AACL8B,QAAAA,KAAK,EAAEC,eADF;AAELc,QAAAA,eAAe,EAAElC,KAAK,CAACL,KAAN,CAAYA,KAAZ,EAAmBC,SAAnB,CAFZ;AAGLqC,QAAAA,gBAAgB,EAAEd,KAAK,GAAG,CAAR,IAAaA,KAAK,GAAG,GAArB,GAA2B,CAA3B,GAA+B;AAH5C;AADT,MANF,CADF;AAgBD,GAjDsB,CAAvB;AAmDA,SAAO,oBAAC,iBAAD,EAAepB,IAAf,EAAsBS,cAAtB,CAAP;AACD,CA5ED;;eA8EepB,W","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/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"}

package/dist/components/molecules/DatePicker/DatePicker.d.ts

@@ -1,18 +1,19 @@
 import * as React from 'react';
-import { ModalBaseProps } from 'react-native';
 import { InputContainerProps } from '../../atoms/Input';
 import { TextProps } from '../../atoms/Text';
 import { CalendarProps, SelectionType } from '../Calendar';
-import { DatePickerModalProps } from './Modal';
-export interface DatePickerProps<T extends SelectionType> extends InputContainerProps, DatePickerModalProps<T>, Omit<CalendarProps<T>, 'style'> {
+export interface DatePickerProps<T extends SelectionType> extends InputContainerProps, Omit<CalendarProps<T>, 'style'> {
     controlComponent?: (onPress: () => void, displayValue?: string) => JSX.Element;
     TextComponent?: React.FC<TextProps>;
-    animationType?: ModalBaseProps['animationType'];
+    CalendarComponent: React.FC<CalendarProps<T>>;
     placeholder?: string;
     onFocus?: () => void | never;
     onBlur?: () => void | never;
     format?: string;
     closeOnPick?: boolean;
+    renderCalendar: (calendar: React.ReactElement, blur?: () => void) => JSX.Element | null;
+    requestShowCalendar: () => void;
+    requestCloseCalendar: () => void;
 }
-declare function DatePicker<T extends SelectionType>({ month, year, onChange, value, type, format, placeholder, onFocus, onBlur, disabled, controlComponent, hintComponent, hint, variant, TextComponent, CalendarComponent, bottomOffset, rightComponent, animationType, style, locale, closeOnPick, ...rest }: DatePickerProps<T>): JSX.Element;
+declare function DatePicker<T extends SelectionType>({ month, year, onChange, value, type, format, placeholder, onFocus, onBlur, disabled, controlComponent, hintComponent, hint, variant, TextComponent, CalendarComponent, rightComponent, style, locale, closeOnPick, renderCalendar, requestShowCalendar, requestCloseCalendar, ...rest }: DatePickerProps<T>): JSX.Element;
 export default DatePicker;

package/dist/components/molecules/DatePicker/DatePicker.js

@@ -13,12 +13,10 @@ var _Input = require("../../atoms/Input");
 
 var _Text = require("../../atoms/Text");
 
-var _Modal = require("./Modal");
+var _HintInputContainer = require("../HintInputContainer");
 
 var _styled = require("./styled");
 
-var _HintInputContainer = require("../HintInputContainer");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -42,12 +40,13 @@ function DatePicker({
   variant,
   TextComponent = _Text.Text,
   CalendarComponent,
-  bottomOffset,
   rightComponent,
-  animationType = 'fade',
   style,
   locale,
   closeOnPick = false,
+  renderCalendar,
+  requestShowCalendar,
+  requestCloseCalendar,
   ...rest
 }) {
   const {
@@ -55,15 +54,10 @@ function DatePicker({
     handleBlur,
     handleFocus
   } = (0, _Input.useInputFocus)(onFocus, onBlur, !disabled);
-  const [modalVisible, setModalVisible] = React.useState(false);
-  const handlePressInput = React.useCallback(() => {
-    setModalVisible(true);
+  const handleShowCalendar = React.useCallback(() => {
+    requestShowCalendar();
     handleFocus();
-  }, [handleFocus, setModalVisible]);
-  const handleCloseModal = React.useCallback(() => {
-    setModalVisible(false);
-    handleBlur();
-  }, [handleBlur, setModalVisible]);
+  }, [handleFocus, requestShowCalendar]);
 
   const getDisplayValue = () => {
     if (!value) return placeholder;
@@ -90,7 +84,7 @@ function DatePicker({
   const StyledText = (0, _styled.getStyledTextComponent)(TextComponent);
   (0, React.useEffect)(() => {
     if (closeOnPick && value && type === 'day') {
-      setTimeout(handleCloseModal, 200);
+      setTimeout(requestCloseCalendar, 200);
     }
 
     if (closeOnPick && value && type === 'range') {
@@ -98,13 +92,22 @@ function DatePicker({
         lowest,
         highest
       } = value;
-      lowest && highest && setTimeout(handleCloseModal, 200);
+      lowest && highest && setTimeout(requestCloseCalendar, 200);
     }
-  }, [value, closeOnPick, type, handleCloseModal]);
-  return React.createElement(React.Fragment, null, controlComponent ? controlComponent(handlePressInput, getDisplayValue()) : React.createElement(_HintInputContainer.HintInputContainer, _extends({
+  }, [value, closeOnPick, type, requestCloseCalendar]);
+  const calendar = React.createElement(CalendarComponent, {
+    pointerEvents: 'box-none',
+    type: type,
+    value: value,
+    month: month,
+    year: year,
+    onChange: onChange,
+    locale: locale
+  });
+  return React.createElement(React.Fragment, null, controlComponent ? controlComponent(handleShowCalendar, getDisplayValue()) : React.createElement(_HintInputContainer.HintInputContainer, _extends({
     focused: focused,
     viewStyle: style,
-    onPress: handlePressInput,
+    onPress: handleShowCalendar,
     disabled: disabled,
     hintComponent: hintComponent,
     LabelComponent: TextComponent,
@@ -118,20 +121,7 @@ function DatePicker({
   }, rest), React.createElement(StyledText, {
     fontWeight: "bold",
     disabled: disabled
-  }, getDisplayValue() || ' ')), React.createElement(_Modal.Modal, {
-    CalendarComponent: CalendarComponent,
-    bottomOffset: bottomOffset,
-    visible: modalVisible,
-    onRequestClose: handleCloseModal,
-    animated: true,
-    animationType: animationType,
-    month: month,
-    year: year,
-    onChange: onChange,
-    value: value,
-    type: type,
-    locale: locale
-  }));
+  }, getDisplayValue() || ' ')), renderCalendar(calendar, handleBlur));
 }
 
 var _default = DatePicker;

package/dist/components/molecules/DatePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","month","year","onChange","value","type","format","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","Text","CalendarComponent","bottomOffset","rightComponent","animationType","style","locale","closeOnPick","rest","focused","handleBlur","handleFocus","modalVisible","setModalVisible","React","useState","handlePressInput","useCallback","handleCloseModal","getDisplayValue","lowest","highest","StyledText","setTimeout"],"mappings":"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","sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { ModalBaseProps } from 'react-native';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarProps, DateRange, SelectionType } from '../Calendar';\nimport { DatePickerModalProps, Modal } from './Modal';\nimport { CalendarIcon, getStyledTextComponent } from './styled';\nimport { HintInputContainer } from '../HintInputContainer';\nimport { useEffect } from 'react';\n\nexport interface DatePickerProps<T extends SelectionType>\n  extends InputContainerProps,\n    DatePickerModalProps<T>,\n    Omit<CalendarProps<T>, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  animationType?: ModalBaseProps['animationType'];\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  format?: string;\n  closeOnPick?: boolean;\n}\n\nfunction DatePicker<T extends SelectionType>({\n  /** DatePicker props */\n  month,\n  year,\n  onChange,\n  value,\n  type,\n  format = 'yyyy-MM-dd',\n\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant,\n  TextComponent = Text,\n  CalendarComponent,\n  bottomOffset,\n  rightComponent,\n  animationType = 'fade',\n  style,\n  locale,\n  closeOnPick = false,\n  ...rest\n}: DatePickerProps<T>): JSX.Element {\n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const [modalVisible, setModalVisible] = React.useState(false);\n\n  const handlePressInput = React.useCallback(() => {\n    setModalVisible(true);\n    handleFocus();\n  }, [handleFocus, setModalVisible]);\n\n  const handleCloseModal = React.useCallback(() => {\n    setModalVisible(false);\n    handleBlur();\n  }, [handleBlur, setModalVisible]);\n\n  const getDisplayValue = () => {\n    if (!value) return placeholder;\n    if (type === 'day') {\n      return formatDate(value as Date, format, { locale: locale });\n    } else {\n      const { lowest, highest } = value as DateRange;\n      if (highest)\n        return `${formatDate(lowest, format, {\n          locale: locale,\n        })} - ${formatDate(highest, format, { locale: locale })}`;\n      else return formatDate(lowest, format, { locale: locale });\n    }\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n\n  useEffect(() => {\n    if (closeOnPick && value && type === 'day') {\n      setTimeout(handleCloseModal, 200);\n    }\n    if (closeOnPick && value && type === 'range') {\n      const { lowest, highest } = value as DateRange;\n      lowest && highest && setTimeout(handleCloseModal, 200);\n    }\n  }, [value, closeOnPick, type, handleCloseModal]);\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handlePressInput, getDisplayValue())\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handlePressInput}\n          disabled={disabled}\n          hintComponent={hintComponent}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {getDisplayValue() || ' '}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      <Modal\n        CalendarComponent={CalendarComponent}\n        bottomOffset={bottomOffset}\n        visible={modalVisible}\n        onRequestClose={handleCloseModal}\n        animated\n        animationType={animationType}\n        month={month}\n        year={year}\n        onChange={onChange}\n        value={value}\n        type={type}\n        locale={locale}\n      />\n    </>\n  );\n}\n\nexport default DatePicker;\n"],"file":"DatePicker.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","month","year","onChange","value","type","format","placeholder","onFocus","onBlur","disabled","controlComponent","hintComponent","hint","variant","TextComponent","Text","CalendarComponent","rightComponent","style","locale","closeOnPick","renderCalendar","requestShowCalendar","requestCloseCalendar","rest","focused","handleBlur","handleFocus","handleShowCalendar","React","useCallback","getDisplayValue","lowest","highest","StyledText","setTimeout","calendar"],"mappings":"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","sourcesContent":["import { format as formatDate } from 'date-fns';\nimport * as React from 'react';\nimport { useEffect } from 'react';\nimport { InputContainerProps, useInputFocus } from '../../atoms/Input';\nimport { Text, TextProps } from '../../atoms/Text';\nimport { CalendarProps, DateRange, SelectionType } from '../Calendar';\nimport { HintInputContainer } from '../HintInputContainer';\nimport { CalendarIcon, getStyledTextComponent } from './styled';\n\nexport interface DatePickerProps<T extends SelectionType> extends InputContainerProps, Omit<CalendarProps<T>, 'style'> {\n  controlComponent?: (\n    onPress: () => void,\n    displayValue?: string\n  ) => JSX.Element;\n  TextComponent?: React.FC<TextProps>;\n  CalendarComponent: React.FC<CalendarProps<T>>\n  placeholder?: string;\n  onFocus?: () => void | never;\n  onBlur?: () => void | never;\n  format?: string;\n  closeOnPick?: boolean;\n  renderCalendar: (calendar: React.ReactElement, blur?: () => void) => JSX.Element|null\n  requestShowCalendar: () => void\n  requestCloseCalendar: () => void\n}\n\nfunction DatePicker<T extends SelectionType>({\n  /** DatePicker props */\n  month,\n  year,\n  onChange,\n  value,\n  type,\n  format = 'yyyy-MM-dd',\n  placeholder,\n  onFocus,\n  onBlur,\n  disabled,\n  controlComponent,\n  hintComponent,\n  hint,\n  variant,\n  TextComponent = Text,\n  CalendarComponent,\n  rightComponent,\n  style,\n  locale,\n  closeOnPick = false,\n  renderCalendar,\n  requestShowCalendar,\n  requestCloseCalendar,\n  ...rest\n}: DatePickerProps<T>): JSX.Element {\n  \n  const { focused, handleBlur, handleFocus } = useInputFocus(\n    onFocus,\n    onBlur,\n    !disabled\n  );\n\n  const handleShowCalendar = React.useCallback(() => {\n    requestShowCalendar()\n    handleFocus();\n  }, [handleFocus, requestShowCalendar]);\n\n  const getDisplayValue = () => {\n    if (!value) return placeholder;\n    if (type === 'day') {\n      return formatDate(value as Date, format, { locale: locale });\n    } else {\n      const { lowest, highest } = value as DateRange;\n      if (highest)\n        return `${formatDate(lowest, format, {\n          locale: locale,\n        })} - ${formatDate(highest, format, { locale: locale })}`;\n      else return formatDate(lowest, format, { locale: locale });\n    }\n  };\n\n  const StyledText = getStyledTextComponent(TextComponent);\n\n  useEffect(() => {\n    if (closeOnPick && value && type === 'day') {\n      setTimeout(requestCloseCalendar, 200);\n    }\n    if (closeOnPick && value && type === 'range') {\n      const { lowest, highest } = value as DateRange;\n      lowest && highest && setTimeout(requestCloseCalendar, 200);\n    }\n  }, [value, closeOnPick, type, requestCloseCalendar]);\n\n  const calendar = (\n    <CalendarComponent\n      pointerEvents={'box-none'}\n      type={type}\n      value={value}\n      month={month}\n      year={year}\n      onChange={onChange}\n      locale={locale}\n    />\n  )\n\n  return (\n    <>\n      {controlComponent ? (\n        controlComponent(handleShowCalendar, getDisplayValue())\n      ) : (\n        <HintInputContainer\n          focused={focused}\n          viewStyle={style}\n          onPress={handleShowCalendar}\n          disabled={disabled}\n          hintComponent={hintComponent}\n          LabelComponent={TextComponent}\n          variant={variant}\n          hint={hint}\n          rightComponent={\n            <>\n              <CalendarIcon name=\"calendar-sharp\" type=\"ionicon\" size=\"centi\" />\n              {rightComponent}\n            </>\n          }\n          {...rest}\n        >\n          <StyledText fontWeight=\"bold\" disabled={disabled}>\n            {getDisplayValue() || ' '}\n          </StyledText>\n        </HintInputContainer>\n      )}\n      {renderCalendar(calendar, handleBlur)}\n    </>\n  );\n}\n\nexport default DatePicker;\n"],"file":"DatePicker.js"}

package/dist/components/molecules/DatePicker/styled.d.ts

@@ -1,20 +1,6 @@
 import { FC } from 'react';
 import { InputContainerProps } from '../../atoms/Input';
 import { TextProps } from '../../atoms/Text';
-export declare const Backdrop: import("@emotion/native").StyledComponent<import("../../atoms/PressableSurface").PressableSurfaceProps & {
-    children?: import("react").ReactNode;
-} & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {}>;
-export declare const ModalContent: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & {
-    offset: number;
-} & Partial<import("../../../types/defaults").ThemeProviderProps>, {}, {
-    ref?: import("react").Ref<import("react-native").View> | undefined;
-}>;
 export declare const getStyledTextComponent: (component: FC<TextProps>) => import("@emotion/native").StyledComponent<TextProps & {
     children?: import("react").ReactNode;
 } & {

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

@@ -3,63 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CalendarIcon = exports.getStyledTextComponent = exports.ModalContent = exports.Backdrop = void 0;
+exports.CalendarIcon = exports.getStyledTextComponent = void 0;
 
 var _native = _interopRequireWildcard(require("@emotion/native"));
 
-var _reactNative = require("react-native");
-
-var _definitions = require("../../../styles/definitions");
-
-var _utils = require("../../../utils");
-
 var _Icon = require("../../atoms/Icon");
 
 var _Input = require("../../atoms/Input");
 
-var _PressableSurface = require("../../atoms/PressableSurface");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-const isWeb = _reactNative.Platform.OS === 'web';
-const Backdrop = (0, _native.default)(_PressableSurface.PressableSurface)`
-  ${({
-  theme
-}) => isWeb ? (0, _native.css)`
-          justify-content: center;
-          align-items: center;
-          background-color: ${(0, _definitions.hex2rgba)(theme.miscellaneous.overlay, 0.5)};
-          height: 100vh;
-        ` : (0, _native.css)`
-          justify-content: flex-end;
-          background-color: ${(0, _definitions.hex2rgba)(theme.miscellaneous.overlay, 0.5)};
-          height: 100%;
-        `}
-`;
-exports.Backdrop = Backdrop;
-const ModalContent = _native.default.View`
-  background-color: transparent;
-  padding-bottom: ${({
-  offset
-}) => `${(0, _utils.RFValue)(offset)}px`};
-  ${({
-  theme: {
-    borderRadius
-  }
-}) => (0, _native.css)`
-    ${isWeb ? `
-      border-radius: ${borderRadius.micro};
-    ` : `
-      border-top-left-radius: ${borderRadius.deca};
-      border-top-right-radius: ${borderRadius.deca};
-    `}
-  `}
-  overflow: hidden;
-`;
-exports.ModalContent = ModalContent;
-
 const getStyledTextComponent = component => {
   return (0, _native.default)(component)(props => {
     var _props$theme;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/DatePicker/styled.ts"],"names":["isWeb","Platform","OS","Backdrop","PressableSurface","theme","miscellaneous","overlay","ModalContent","styled","View","offset","borderRadius","micro","deca","getStyledTextComponent","component","props","typography","h5","lineHeight","CalendarIcon","Icon","spacing","centi","color","secondary","medium"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;AAGA,MAAMA,KAAK,GAAGC,sBAASC,EAAT,KAAgB,KAA9B;AAEO,MAAMC,QAAQ,GAAG,qBAAOC,kCAAP,CAA8C;AACtE,IAAI,CAAC;AAAEC,EAAAA;AAAF,CAAD,KACAL,KAAK,GACD,gBAAI;AACZ;AACA;AACA,8BAA8B,2BAASK,KAAK,CAACC,aAAN,CAAoBC,OAA7B,EAAsC,GAAtC,CAA2C;AACzE;AACA,SANS,GAOD,gBAAI;AACZ;AACA,8BAA8B,2BAASF,KAAK,CAACC,aAAN,CAAoBC,OAA7B,EAAsC,GAAtC,CAA2C;AACzE;AACA,SAAU;AACV,CAdO;;AAgBA,MAAMC,YAAY,GAAGC,gBAAOC,IAEjC;AACF;AACA,oBAAoB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAiB,GAAE,oBAAQA,MAAR,CAAgB,IAAI;AAC3D,IAAI,CAAC;AAAEN,EAAAA,KAAK,EAAE;AAAEO,IAAAA;AAAF;AAAT,CAAD,KAAiC,gBAAI;AACzC,MAAMZ,KAAK,GACF;AACT,uBAAuBY,YAAY,CAACC,KAAM;AAC1C,KAHW,GAIF;AACT,gCAAgCD,YAAY,CAACE,IAAK;AAClD,iCAAiCF,YAAY,CAACE,IAAK;AACnD,KAAM;AACN,GAAI;AACJ;AACA,CAhBO;;;AAkBA,MAAMC,sBAAsB,GAAIC,SAAD,IAA8B;AAClE,SAAO,qBAAOA,SAAP,EACJC,KAAD;AAAA;;AAAA,WAA+D,gBAAI;AACvE,qBADsE,gBACjDA,KAAK,CAACZ,KAD2C,iDACjD,aAAaa,UAAb,CAAwBC,EAAxB,CAA2BC,UAAW;AAC3D,QAAQ,gCAAoBH,KAApB,CAA2B;AACnC,KAHI;AAAA,GADK,CAAP;AAMD,CAPM;;;AASA,MAAMI,YAAY,GAAG,qBAAOC,UAAP,CAAkC;AAC9D,aAAa,CAAC;AAAEjB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACkB,OAAN,CAAcC,KAAM;AAChD,WAAW,CAAC;AAAEnB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACoB,KAAN,CAAYC,SAAZ,CAAsBC,MAAO;AACvD,CAHO","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { Platform } from 'react-native';\nimport { hex2rgba } from '../../../styles/definitions';\nimport { StyleProps } from '../../../types/defaults';\nimport { RFValue } from '../../../utils';\nimport { Icon } from '../../atoms/Icon';\nimport { disabledInputStyles, InputContainerProps } from '../../atoms/Input';\nimport { PressableSurface } from '../../atoms/PressableSurface';\nimport { TextProps } from '../../atoms/Text';\n\nconst isWeb = Platform.OS === 'web';\n\nexport const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`\n  ${({ theme }) =>\n    isWeb\n      ? css`\n          justify-content: center;\n          align-items: center;\n          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};\n          height: 100vh;\n        `\n      : css`\n          justify-content: flex-end;\n          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};\n          height: 100%;\n        `}\n`;\n\nexport const ModalContent = styled.View<\n  { offset: number } & Partial<StyleProps>\n>`\n  background-color: transparent;\n  padding-bottom: ${({ offset }) => `${RFValue(offset)}px`};\n  ${({ theme: { borderRadius } }) => css`\n    ${isWeb\n      ? `\n      border-radius: ${borderRadius.micro};\n    `\n      : `\n      border-top-left-radius: ${borderRadius.deca};\n      border-top-right-radius: ${borderRadius.deca};\n    `}\n  `}\n  overflow: hidden;\n`;\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n  return styled(component)(\n    (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n      line-height: ${props.theme?.typography.h5.lineHeight};\n      ${disabledInputStyles(props)}\n    `\n  );\n};\n\nexport const CalendarIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/styled.ts"],"names":["getStyledTextComponent","component","props","theme","typography","h5","lineHeight","CalendarIcon","Icon","spacing","centi","color","secondary","medium"],"mappings":";;;;;;;AAAA;;AAGA;;AACA;;;;;;AAGO,MAAMA,sBAAsB,GAAIC,SAAD,IAA8B;AAClE,SAAO,qBAAOA,SAAP,EACJC,KAAD;AAAA;;AAAA,WAA+D,gBAAI;AACvE,qBADsE,gBACjDA,KAAK,CAACC,KAD2C,iDACjD,aAAaC,UAAb,CAAwBC,EAAxB,CAA2BC,UAAW;AAC3D,QAAQ,gCAAoBJ,KAApB,CAA2B;AACnC,KAHI;AAAA,GADK,CAAP;AAMD,CAPM;;;AASA,MAAMK,YAAY,GAAG,qBAAOC,UAAP,CAAkC;AAC9D,aAAa,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACM,OAAN,CAAcC,KAAM;AAChD,WAAW,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACQ,KAAN,CAAYC,SAAZ,CAAsBC,MAAO;AACvD,CAHO","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { FC } from 'react';\nimport { StyleProps } from '../../../types/defaults';\nimport { Icon } from '../../atoms/Icon';\nimport { disabledInputStyles, InputContainerProps } from '../../atoms/Input';\nimport { TextProps } from '../../atoms/Text';\n\nexport const getStyledTextComponent = (component: FC<TextProps>) => {\n  return styled(component)(\n    (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`\n      line-height: ${props.theme?.typography.h5.lineHeight};\n      ${disabledInputStyles(props)}\n    `\n  );\n};\n\nexport const CalendarIcon = styled(Icon)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi};\n  color: ${({ theme }) => theme.color.secondary.medium};\n`;\n"],"file":"styled.js"}