@tecsinapse/react-core 1.12.7 → 1.13.0

package/dist/index.js.map

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

package/dist/utils/ResponsiveFontSize.js

@@ -11,7 +11,7 @@ var _extractNumbersFromString = require("./extractNumbersFromString");
 
 var _IPhoneXHelper = require("./IPhoneXHelper");
 
-const STANDARD_SCREEN_HEIGHT = 640;
+const STANDARD_SCREEN_HEIGHT = 680;
 
 const RFPercentage = percent => {
   if (_reactNative.Platform.OS === 'web') return percent;

package/dist/utils/ResponsiveFontSize.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/ResponsiveFontSize.ts"],"names":["STANDARD_SCREEN_HEIGHT","RFPercentage","percent","Platform","OS","height","width","Dimensions","get","standardLength","offset","StatusBar","currentHeight","deviceHeight","heightPercent","Math","round","RFValue","fontSize","standardScreenHeight","RFValueStr","_fontSize"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA,MAAMA,sBAAsB,GAAG,GAA/B;;AASO,MAAMC,YAAY,GAAIC,OAAD,IAAqB;AAC7C,MAAIC,sBAASC,EAAT,KAAgB,KAApB,EAA2B,OAAOF,OAAP;;AAC3B,QAAM;AAAEG,IAAAA,MAAF;AAAUC,IAAAA;AAAV,MAAoBC,wBAAWC,GAAX,CAAe,QAAf,CAA1B;;AACA,QAAMC,cAAc,GAAGH,KAAK,GAAGD,MAAR,GAAiBC,KAAjB,GAAyBD,MAAhD;AACA,QAAMK,MAAM,GAAGJ,KAAK,GAAGD,MAAR,GAAiB,CAAjB,GAAqBF,sBAASC,EAAT,KAAgB,KAAhB,GAAwB,EAAxB,GAA6BO,uBAAUC,aAAV,IAA2B,CAA5F;AACA,QAAMC,YAAY,GAAG,mCAAeV,sBAASC,EAAT,KAAgB,SAA/B,GAA2CK,cAAc,GAAGC,MAA5D,GAAqED,cAA1F;AACA,QAAMK,aAAa,GAAIZ,OAAO,GAAGW,YAAX,GAA2B,GAAjD;AACA,SAAOE,IAAI,CAACC,KAAL,CAAWF,aAAX,CAAP;AACH,CARM;;;;AAkBA,MAAMG,OAAO,GAAG,CAACC,QAAD,EAAmBC,oBAA4B,GAAGnB,sBAAlD,KAA6E;AAChG,MAAIG,sBAASC,EAAT,KAAgB,KAApB,EAA2B,OAAOc,QAAP;;AAC3B,QAAM;AAAEb,IAAAA,MAAF;AAAUC,IAAAA;AAAV,MAAoBC,wBAAWC,GAAX,CAAe,QAAf,CAA1B;;AACA,QAAMC,cAAc,GAAGH,KAAK,GAAGD,MAAR,GAAiBC,KAAjB,GAAyBD,MAAhD;AACA,QAAMK,MAAM,GAAGJ,KAAK,GAAGD,MAAR,GAAiB,CAAjB,GAAqBF,sBAASC,EAAT,KAAgB,KAAhB,GAAwB,EAAxB,GAA6BO,uBAAUC,aAAV,IAA2B,CAA5F;AACA,QAAMC,YAAY,GAAG,mCAAeV,sBAASC,EAAT,KAAgB,SAA/B,GAA2CK,cAAc,GAAGC,MAA5D,GAAqED,cAA1F;AACA,QAAMK,aAAa,GAAII,QAAQ,GAAGL,YAAZ,GAA4BM,oBAAlD;AACA,SAAOJ,IAAI,CAACC,KAAL,CAAWF,aAAX,CAAP;AACH,CARM;;;;AAiBA,MAAMM,UAAU,GAAG,CAACF,QAAD,EAAmBC,oBAAnB,KAAqD;AAC3E,QAAME,SAAS,GAAG,wDAAyBH,QAAzB,CAAlB;;AACA,SAAQ,GAAED,OAAO,CAACI,SAAD,EAAYF,oBAAZ,CAAkC,IAAnD;AACH,CAHM","sourcesContent":["import { Dimensions, Platform, StatusBar } from \"react-native\";\nimport { extractNumbersFromString } from \"./extractNumbersFromString\";\nimport { isIphoneX } from \"./IPhoneXHelper\";\n\nconst STANDARD_SCREEN_HEIGHT = 640\n\n/**\n * Use this function when you want to scale a percentage number\n * to a reasonable value that will fit better on most of devices.\n * \n * @param percent \n * @returns \n */\nexport const RFPercentage = (percent: number) => {\n    if (Platform.OS === 'web') return percent\n    const { height, width } = Dimensions.get(\"window\");\n    const standardLength = width > height ? width : height;\n    const offset = width > height ? 0 : Platform.OS === \"ios\" ? 78 : StatusBar.currentHeight || 0 // iPhone X style SafeAreaView size in portrait\n    const deviceHeight = isIphoneX() || Platform.OS === \"android\" ? standardLength - offset : standardLength;\n    const heightPercent = (percent * deviceHeight) / 100;\n    return Math.round(heightPercent);\n}\n\n/**\n * Use this function when you want to scale a font size based on pixel unit \n * to a reasonable value that will fit better on most of devices.\n * \n * @param fontSize \n * @param standardScreenHeight \n * @returns \n */\nexport const RFValue = (fontSize: number, standardScreenHeight: number = STANDARD_SCREEN_HEIGHT) => {\n    if (Platform.OS === 'web') return fontSize\n    const { height, width } = Dimensions.get(\"window\");\n    const standardLength = width > height ? width : height;\n    const offset = width > height ? 0 : Platform.OS === \"ios\" ? 78 : StatusBar.currentHeight || 0 // iPhone X style SafeAreaView size in portrait\n    const deviceHeight = isIphoneX() || Platform.OS === \"android\" ? standardLength - offset : standardLength;\n    const heightPercent = (fontSize * deviceHeight) / standardScreenHeight;\n    return Math.round(heightPercent);\n}\n\n/**\n * Same of RFValue, however you can provide string values. E.g: '10px', '-5px'.\n * \n * @param fontSize \n * @param standardScreenHeight \n * @returns \n */\nexport const RFValueStr = (fontSize: string, standardScreenHeight?: number) => {\n    const _fontSize = extractNumbersFromString(fontSize)\n    return `${RFValue(_fontSize, standardScreenHeight)}px`\n}"],"file":"ResponsiveFontSize.js"}
+{"version":3,"sources":["../../src/utils/ResponsiveFontSize.ts"],"names":["STANDARD_SCREEN_HEIGHT","RFPercentage","percent","Platform","OS","height","width","Dimensions","get","standardLength","offset","StatusBar","currentHeight","deviceHeight","heightPercent","Math","round","RFValue","fontSize","standardScreenHeight","RFValueStr","_fontSize"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA,MAAMA,sBAAsB,GAAG,GAA/B;;AASO,MAAMC,YAAY,GAAIC,OAAD,IAAqB;AAC7C,MAAIC,sBAASC,EAAT,KAAgB,KAApB,EAA2B,OAAOF,OAAP;;AAC3B,QAAM;AAAEG,IAAAA,MAAF;AAAUC,IAAAA;AAAV,MAAoBC,wBAAWC,GAAX,CAAe,QAAf,CAA1B;;AACA,QAAMC,cAAc,GAAGH,KAAK,GAAGD,MAAR,GAAiBC,KAAjB,GAAyBD,MAAhD;AACA,QAAMK,MAAM,GAAGJ,KAAK,GAAGD,MAAR,GAAiB,CAAjB,GAAqBF,sBAASC,EAAT,KAAgB,KAAhB,GAAwB,EAAxB,GAA6BO,uBAAUC,aAAV,IAA2B,CAA5F;AACA,QAAMC,YAAY,GAAG,mCAAeV,sBAASC,EAAT,KAAgB,SAA/B,GAA2CK,cAAc,GAAGC,MAA5D,GAAqED,cAA1F;AACA,QAAMK,aAAa,GAAIZ,OAAO,GAAGW,YAAX,GAA2B,GAAjD;AACA,SAAOE,IAAI,CAACC,KAAL,CAAWF,aAAX,CAAP;AACH,CARM;;;;AAkBA,MAAMG,OAAO,GAAG,CAACC,QAAD,EAAmBC,oBAA4B,GAAGnB,sBAAlD,KAA6E;AAChG,MAAIG,sBAASC,EAAT,KAAgB,KAApB,EAA2B,OAAOc,QAAP;;AAC3B,QAAM;AAAEb,IAAAA,MAAF;AAAUC,IAAAA;AAAV,MAAoBC,wBAAWC,GAAX,CAAe,QAAf,CAA1B;;AACA,QAAMC,cAAc,GAAGH,KAAK,GAAGD,MAAR,GAAiBC,KAAjB,GAAyBD,MAAhD;AACA,QAAMK,MAAM,GAAGJ,KAAK,GAAGD,MAAR,GAAiB,CAAjB,GAAqBF,sBAASC,EAAT,KAAgB,KAAhB,GAAwB,EAAxB,GAA6BO,uBAAUC,aAAV,IAA2B,CAA5F;AACA,QAAMC,YAAY,GAAG,mCAAeV,sBAASC,EAAT,KAAgB,SAA/B,GAA2CK,cAAc,GAAGC,MAA5D,GAAqED,cAA1F;AACA,QAAMK,aAAa,GAAII,QAAQ,GAAGL,YAAZ,GAA4BM,oBAAlD;AACA,SAAOJ,IAAI,CAACC,KAAL,CAAWF,aAAX,CAAP;AACH,CARM;;;;AAiBA,MAAMM,UAAU,GAAG,CAACF,QAAD,EAAmBC,oBAAnB,KAAqD;AAC3E,QAAME,SAAS,GAAG,wDAAyBH,QAAzB,CAAlB;;AACA,SAAQ,GAAED,OAAO,CAACI,SAAD,EAAYF,oBAAZ,CAAkC,IAAnD;AACH,CAHM","sourcesContent":["import { Dimensions, Platform, StatusBar } from \"react-native\";\nimport { extractNumbersFromString } from \"./extractNumbersFromString\";\nimport { isIphoneX } from \"./IPhoneXHelper\";\n\nconst STANDARD_SCREEN_HEIGHT = 680\n\n/**\n * Use this function when you want to scale a percentage number\n * to a reasonable value that will fit better on most of devices.\n * \n * @param percent \n * @returns \n */\nexport const RFPercentage = (percent: number) => {\n    if (Platform.OS === 'web') return percent\n    const { height, width } = Dimensions.get(\"window\");\n    const standardLength = width > height ? width : height;\n    const offset = width > height ? 0 : Platform.OS === \"ios\" ? 78 : StatusBar.currentHeight || 0 // iPhone X style SafeAreaView size in portrait\n    const deviceHeight = isIphoneX() || Platform.OS === \"android\" ? standardLength - offset : standardLength;\n    const heightPercent = (percent * deviceHeight) / 100;\n    return Math.round(heightPercent);\n}\n\n/**\n * Use this function when you want to scale a font size based on pixel unit \n * to a reasonable value that will fit better on most of devices.\n * \n * @param fontSize \n * @param standardScreenHeight \n * @returns \n */\nexport const RFValue = (fontSize: number, standardScreenHeight: number = STANDARD_SCREEN_HEIGHT) => {\n    if (Platform.OS === 'web') return fontSize\n    const { height, width } = Dimensions.get(\"window\");\n    const standardLength = width > height ? width : height;\n    const offset = width > height ? 0 : Platform.OS === \"ios\" ? 78 : StatusBar.currentHeight || 0 // iPhone X style SafeAreaView size in portrait\n    const deviceHeight = isIphoneX() || Platform.OS === \"android\" ? standardLength - offset : standardLength;\n    const heightPercent = (fontSize * deviceHeight) / standardScreenHeight;\n    return Math.round(heightPercent);\n}\n\n/**\n * Same as RFValue, however you can provide string values. E.g: '10px', '-5px'.\n * \n * @param fontSize \n * @param standardScreenHeight \n * @returns \n */\nexport const RFValueStr = (fontSize: string, standardScreenHeight?: number) => {\n    const _fontSize = extractNumbersFromString(fontSize)\n    return `${RFValue(_fontSize, standardScreenHeight)}px`\n}"],"file":"ResponsiveFontSize.js"}

package/dist/utils/extractNumbersFromString.js

@@ -9,7 +9,7 @@ const extractNumbersFromString = value => Number(extractDigitsFromString(value))
 
 exports.extractNumbersFromString = extractNumbersFromString;
 
-const extractDigitsFromString = value => value.replace(/[^-0-9]/g, '');
+const extractDigitsFromString = value => value.replace(/[^0-9]/g, '');
 
 exports.extractDigitsFromString = extractDigitsFromString;
 //# sourceMappingURL=extractNumbersFromString.js.map

package/dist/utils/extractNumbersFromString.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/extractNumbersFromString.ts"],"names":["extractNumbersFromString","value","Number","extractDigitsFromString","replace"],"mappings":";;;;;;;AAAO,MAAMA,wBAAwB,GAAIC,KAAD,IAA2BC,MAAM,CAACC,uBAAuB,CAACF,KAAD,CAAxB,CAAlE;;;;AAKA,MAAME,uBAAuB,GAAIF,KAAD,IAA2BA,KAAK,CAACG,OAAN,CAAc,UAAd,EAA0B,EAA1B,CAA3D","sourcesContent":["export const extractNumbersFromString = (value: string): number => Number(extractDigitsFromString(value));\n\n/*\n * implemented for the case: string numbers start with 0. Example: 012.345.678-91 Example: 012.345.678-91\n * */\nexport const extractDigitsFromString = (value: string): string => value.replace(/[^-0-9]/g, '');\n"],"file":"extractNumbersFromString.js"}
+{"version":3,"sources":["../../src/utils/extractNumbersFromString.ts"],"names":["extractNumbersFromString","value","Number","extractDigitsFromString","replace"],"mappings":";;;;;;;AAAO,MAAMA,wBAAwB,GAAIC,KAAD,IACtCC,MAAM,CAACC,uBAAuB,CAACF,KAAD,CAAxB,CADD;;;;AAGA,MAAME,uBAAuB,GAAIF,KAAD,IACrCA,KAAK,CAACG,OAAN,CAAc,SAAd,EAAyB,EAAzB,CADK","sourcesContent":["export const extractNumbersFromString = (value: string): number =>\n  Number(extractDigitsFromString(value));\n\nexport const extractDigitsFromString = (value: string): string =>\n  value.replace(/[^0-9]/g, '');\n"],"file":"extractNumbersFromString.js"}

package/package.json

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

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

@@ -1,7 +1,7 @@
 import currency from 'currency.js';
 import { useCallback, useState } from 'react';
-import { IMaskValue, IMask } from './useMask';
-import { extractNumbersFromString } from '@tecsinapse/react-core';
+import { extractNumbersFromString } from '../../../../utils';
+import { IMask, IMaskValue } from './useMask';
 
 type CurrencyOptions = currency.Options;
 

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

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { extractDigitsFromString } from '@tecsinapse/react-core';
+import { extractDigitsFromString } from '../../../../utils';
 
 export interface IMaskValue {
   formatted?: string;

package/src/components/atoms/ProgressBar/ProgressBar.tsx

@@ -1,13 +1,13 @@
+import { useTheme } from '@emotion/react';
 import * as React from 'react';
 import { Animated, ViewProps } from 'react-native';
-import { Container, Progress, Segment } from './styled';
-import { useTheme } from '@emotion/react';
 import {
   ColorGradationType,
   ColorType,
-  extractNumbersFromString,
-  ThemeProp,
-} from '@tecsinapse/react-core';
+  ThemeProp
+} from '../../../types/defaults';
+import { extractNumbersFromString } from '../../../utils';
+import { Container, Progress, Segment } from './styled';
 
 export interface ProgressBarProps extends ViewProps {
   /** Number of segments. Defaults to 1. Set to 1 when 0 or less */

package/src/components/molecules/Calendar/components/MonthWeek.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { compareAsc as compare, differenceInDays, isSameDay } from 'date-fns';
+import { compareAsc as compare, isSameDay } from 'date-fns';
 import { Cell, Selected, Week } from '../styled';
 import { Value, DateRange, SelectionType } from '../Calendar';
 import { TextProps } from '@tecsinapse/react-core';
@@ -62,7 +62,7 @@ const MonthWeek = <T extends SelectionType>({
 
         if (!highest) {
           if (compare(date, lowest) === -1) {
-            newValue = { lowest: date, highest: lowest };
+            newValue = { lowest: date, highest: undefined };
           } else if (compare(date, lowest) === 0) {
             newValue = undefined;
           } else {
@@ -70,17 +70,12 @@ const MonthWeek = <T extends SelectionType>({
           }
         } else {
           if (compare(date, lowest) === -1) {
-            newValue = { lowest: date, highest: highest };
+            newValue = { lowest: date, highest: undefined };
           } else if (compare(date, lowest) === 0) {
-            newValue = { lowest: highest, highest: undefined };
+            newValue = undefined;
           } else {
             if (compare(date, highest) === -1) {
-              const lowestDiff = Math.abs(differenceInDays(date, lowest));
-              const highestDiff = Math.abs(differenceInDays(date, highest));
-              newValue = {
-                lowest: lowestDiff < highestDiff ? date : lowest,
-                highest: highestDiff <= lowestDiff ? date : highest,
-              };
+              newValue = { lowest: lowest, highest: date };
             } else if (compare(date, highest) === 0) {
               newValue = { lowest: lowest, highest: undefined };
             } else {

package/src/components/molecules/Calendar/index.ts

@@ -3,4 +3,5 @@ export {
   CalendarProps,
   SelectionType,
   DateRange,
+  Value
 } from './Calendar';

package/src/components/molecules/Calendar/styled.ts

@@ -19,26 +19,6 @@ export const TitleContainer = styled.View<Partial<StyleProps>>`
   background-color: ${({ theme }) => theme.color.secondary.xlight};
 `;
 
-const surfaceBorderRight = ({
-  isRright,
-  theme,
-}: ButtonBorders & Partial<StyleProps>) =>
-  !isWeb &&
-  isRright &&
-  css`
-    border-top-right-radius: ${theme?.borderRadius.deca};
-  `;
-
-const surfaceBorderLeft = ({
-  isLeft,
-  theme,
-}: ButtonBorders & Partial<StyleProps>) =>
-  !isWeb &&
-  isLeft &&
-  css`
-    border-top-left-radius: ${theme?.borderRadius.deca};
-  `;
-
 export const Control = styled(PressableSurface)(
   (
     props: Partial<StyleProps> & ButtonBorders & { align: 'start' | 'end' }
@@ -47,8 +27,6 @@ export const Control = styled(PressableSurface)(
     padding: ${props.theme?.spacing.centi};
     border-radius: ${props.theme?.borderRadius.mili};
     margin: ${props.theme?.spacing.mili};
-    ${surfaceBorderRight(props)}
-    ${surfaceBorderLeft(props)}
   `
 );
 

package/src/components/molecules/DatePicker/DatePicker.tsx

@@ -1,29 +1,27 @@
 import { format as formatDate } from 'date-fns';
 import * as React from 'react';
-import { ModalBaseProps } from 'react-native';
+import { useEffect } from 'react';
 import { InputContainerProps, useInputFocus } from '../../atoms/Input';
 import { Text, TextProps } from '../../atoms/Text';
 import { CalendarProps, DateRange, SelectionType } from '../Calendar';
-import { DatePickerModalProps, Modal } from './Modal';
-import { CalendarIcon, getStyledTextComponent } from './styled';
 import { HintInputContainer } from '../HintInputContainer';
-import { useEffect } from 'react';
+import { CalendarIcon, getStyledTextComponent } from './styled';
 
-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
 }
 
 function DatePicker<T extends SelectionType>({
@@ -34,7 +32,6 @@ function DatePicker<T extends SelectionType>({
   value,
   type,
   format = 'yyyy-MM-dd',
-
   placeholder,
   onFocus,
   onBlur,
@@ -45,31 +42,26 @@ function DatePicker<T extends SelectionType>({
   variant,
   TextComponent = Text,
   CalendarComponent,
-  bottomOffset,
   rightComponent,
-  animationType = 'fade',
   style,
   locale,
   closeOnPick = false,
+  renderCalendar,
+  requestShowCalendar,
+  requestCloseCalendar,
   ...rest
 }: DatePickerProps<T>): JSX.Element {
+  
   const { focused, handleBlur, handleFocus } = 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;
@@ -89,23 +81,35 @@ function DatePicker<T extends SelectionType>({
 
   useEffect(() => {
     if (closeOnPick && value && type === 'day') {
-      setTimeout(handleCloseModal, 200);
+      setTimeout(requestCloseCalendar, 200);
     }
     if (closeOnPick && value && type === 'range') {
       const { lowest, highest } = value as DateRange;
-      lowest && highest && setTimeout(handleCloseModal, 200);
+      lowest && highest && setTimeout(requestCloseCalendar, 200);
     }
-  }, [value, closeOnPick, type, handleCloseModal]);
+  }, [value, closeOnPick, type, requestCloseCalendar]);
+
+  const calendar = (
+    <CalendarComponent
+      pointerEvents={'box-none'}
+      type={type}
+      value={value}
+      month={month}
+      year={year}
+      onChange={onChange}
+      locale={locale}
+    />
+  )
 
   return (
     <>
       {controlComponent ? (
-        controlComponent(handlePressInput, getDisplayValue())
+        controlComponent(handleShowCalendar, getDisplayValue())
       ) : (
         <HintInputContainer
           focused={focused}
           viewStyle={style}
-          onPress={handlePressInput}
+          onPress={handleShowCalendar}
           disabled={disabled}
           hintComponent={hintComponent}
           LabelComponent={TextComponent}
@@ -124,20 +128,7 @@ function DatePicker<T extends SelectionType>({
           </StyledText>
         </HintInputContainer>
       )}
-      <Modal
-        CalendarComponent={CalendarComponent}
-        bottomOffset={bottomOffset}
-        visible={modalVisible}
-        onRequestClose={handleCloseModal}
-        animated
-        animationType={animationType}
-        month={month}
-        year={year}
-        onChange={onChange}
-        value={value}
-        type={type}
-        locale={locale}
-      />
+      {renderCalendar(calendar, handleBlur)}
     </>
   );
 }

package/src/components/molecules/DatePicker/styled.ts

@@ -1,50 +1,10 @@
 import styled, { css } from '@emotion/native';
 import { FC } from 'react';
-import { Platform } from 'react-native';
-import { hex2rgba } from '../../../styles/definitions';
 import { StyleProps } from '../../../types/defaults';
-import { RFValue } from '../../../utils';
 import { Icon } from '../../atoms/Icon';
 import { disabledInputStyles, InputContainerProps } from '../../atoms/Input';
-import { PressableSurface } from '../../atoms/PressableSurface';
 import { TextProps } from '../../atoms/Text';
 
-const isWeb = Platform.OS === 'web';
-
-export const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`
-  ${({ theme }) =>
-    isWeb
-      ? css`
-          justify-content: center;
-          align-items: center;
-          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};
-          height: 100vh;
-        `
-      : css`
-          justify-content: flex-end;
-          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};
-          height: 100%;
-        `}
-`;
-
-export const ModalContent = styled.View<
-  { offset: number } & Partial<StyleProps>
->`
-  background-color: transparent;
-  padding-bottom: ${({ offset }) => `${RFValue(offset)}px`};
-  ${({ theme: { borderRadius } }) => css`
-    ${isWeb
-      ? `
-      border-radius: ${borderRadius.micro};
-    `
-      : `
-      border-top-left-radius: ${borderRadius.deca};
-      border-top-right-radius: ${borderRadius.deca};
-    `}
-  `}
-  overflow: hidden;
-`;
-
 export const getStyledTextComponent = (component: FC<TextProps>) => {
   return styled(component)(
     (props: Partial<InputContainerProps> & Partial<StyleProps>) => css`

package/src/components/molecules/DateTimePicker/DateTimePicker.tsx

@@ -1,26 +1,25 @@
 import { format as formatDate } from 'date-fns';
 import * as React from 'react';
-import { ModalBaseProps } from 'react-native';
 import { InputContainerProps, useInputFocus } from '../../atoms/Input';
 import { Text, TextProps } from '../../atoms/Text';
 import { CalendarIcon, getStyledTextComponent } from '../DatePicker/styled';
-import { DateTimeSelectorProps } from '../DateTimeSelector';
-import { DateTimePickerModalProps, Modal } from './Modal';
+import { DateTimeSelector, DateTimeSelectorProps } from '../DateTimeSelector';
 import { HintInputContainer } from '../HintInputContainer';
+import { getStyledDateTimeSelector } from './styled';
 
-export interface DateTimePickerProps
-  extends InputContainerProps,
-    DateTimePickerModalProps,
-    Omit<DateTimeSelectorProps, 'style'> {
+export interface DateTimePickerProps extends InputContainerProps, Omit<DateTimeSelectorProps, 'style'> {
   controlComponent?: (
     onPress: () => void,
     displayValue?: string
   ) => JSX.Element;
   TextComponent?: React.FC<TextProps>;
-  animationType?: ModalBaseProps['animationType'];
+  DateTimeSelectorComponent: React.FC<DateTimeSelectorProps>;
   placeholder?: string;
   onFocus?: () => void | never;
   onBlur?: () => void | never;
+  renderSelector: (selector: React.ReactElement, blur?: () => void) => JSX.Element|null
+  requestShowSelector: () => void
+  requestCloseSelector: () => void
 }
 
 const DateTimePicker: React.FC<DateTimePickerProps> = ({
@@ -34,7 +33,6 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   offsetThreshold,
   upperOffsetThreshold,
   lowerOffsetThreshold,
-
   dateModalTitle,
   timeModalTitle,
   dateConfirmButtonText,
@@ -44,7 +42,6 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   yearLabel,
   hourLabel,
   minuteLabel,
-
   placeholder,
   onFocus,
   onBlur,
@@ -54,45 +51,68 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
   hint,
   variant = 'default',
   TextComponent = Text,
-  DateTimeSelectorComponent,
-  bottomOffset,
+  DateTimeSelectorComponent = DateTimeSelector,
   rightComponent,
-  animationType = 'fade',
   style,
+  renderSelector,
+  requestShowSelector,
+  requestCloseSelector,
   ...rest
 }) => {
+  
   const { focused, handleBlur, handleFocus } = useInputFocus(
     onFocus,
     onBlur,
     !disabled
   );
 
-  const [modalVisible, setModalVisible] = React.useState(false);
-
-  const handlePressInput = () => {
-    setModalVisible(true);
+  const handleShowSelector = () => {
+    requestShowSelector()
     handleFocus();
   };
 
-  const handleCloseModal = () => {
-    setModalVisible(false);
-    handleBlur();
+  const handleChoosing = (value: Date) => {
+    onChange?.(value)
+    requestCloseSelector()
   };
 
   const StyledText = getStyledTextComponent(TextComponent);
-  const displayValue =
-    (value ? formatDate(value, format, { locale: locale }) : placeholder) ||
-    ' ';
+  const displayValue = (value ? formatDate(value, format, { locale: locale }) : placeholder) || ' ';
+  const StyledDateTimeSelector = getStyledDateTimeSelector(DateTimeSelectorComponent)
+
+  const dateTimeSelector = (
+    <StyledDateTimeSelector
+      value={value}
+      mode={mode}
+      format={format}
+      locale={locale}
+      upperDateThreshold={upperDateThreshold}
+      lowerDateThreshold={lowerDateThreshold}
+      offsetThreshold={offsetThreshold}
+      upperOffsetThreshold={upperOffsetThreshold}
+      lowerOffsetThreshold={lowerOffsetThreshold}
+      dateModalTitle={dateModalTitle}
+      timeModalTitle={timeModalTitle}
+      dateConfirmButtonText={dateConfirmButtonText}
+      timeConfirmButtonText={timeConfirmButtonText}
+      dayLabel={dayLabel}
+      monthLabel={monthLabel}
+      yearLabel={yearLabel}
+      hourLabel={hourLabel}
+      minuteLabel={minuteLabel}
+      onChange={handleChoosing}
+    />
+  )
 
   return (
     <>
       {controlComponent ? (
-        controlComponent(handlePressInput, displayValue)
+        controlComponent(handleShowSelector, displayValue)
       ) : (
         <HintInputContainer
           focused={focused}
           viewStyle={style}
-          onPress={handlePressInput}
+          onPress={handleShowSelector}
           disabled={disabled}
           LabelComponent={TextComponent}
           variant={variant}
@@ -111,33 +131,7 @@ const DateTimePicker: React.FC<DateTimePickerProps> = ({
           </StyledText>
         </HintInputContainer>
       )}
-      <Modal
-        DateTimeSelectorComponent={DateTimeSelectorComponent}
-        bottomOffset={bottomOffset}
-        visible={modalVisible}
-        onRequestClose={handleCloseModal}
-        animated
-        animationType={animationType}
-        onChange={onChange}
-        value={value}
-        mode={mode}
-        format={format}
-        locale={locale}
-        upperDateThreshold={upperDateThreshold}
-        lowerDateThreshold={lowerDateThreshold}
-        offsetThreshold={offsetThreshold}
-        upperOffsetThreshold={upperOffsetThreshold}
-        lowerOffsetThreshold={lowerOffsetThreshold}
-        dateModalTitle={dateModalTitle}
-        timeModalTitle={timeModalTitle}
-        dateConfirmButtonText={dateConfirmButtonText}
-        timeConfirmButtonText={timeConfirmButtonText}
-        dayLabel={dayLabel}
-        monthLabel={monthLabel}
-        yearLabel={yearLabel}
-        hourLabel={hourLabel}
-        minuteLabel={minuteLabel}
-      />
+      {renderSelector(dateTimeSelector, handleBlur)}
     </>
   );
 };

package/src/components/molecules/DateTimePicker/styled.ts

@@ -1,56 +1,8 @@
-import styled, { css } from '@emotion/native';
+import styled from '@emotion/native';
 import { FC } from 'react';
-import { Platform } from 'react-native';
 import { StyleProps } from '../../../types/defaults';
-import { RFValue, RFValueStr } from '../../../utils';
-import {
-  PressableSurface,
-  PressableSurfaceProps
-} from '../../atoms/PressableSurface';
 import { DateTimeSelectorProps } from '../DateTimeSelector';
 
-const isWeb = Platform.OS === 'web';
-
-export const StyledPressableSurface = styled(
-  PressableSurface
-)<PressableSurfaceProps>`
-  width: 100%;
-`;
-
-export const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`
-  ${isWeb
-    ? css`
-        justify-content: center;
-        align-items: center;
-        background-color: rgba(0, 0, 0, 0.5);
-        height: 100vh;
-      `
-    : css`
-        justify-content: flex-end;
-        background-color: rgba(0, 0, 0, 0.5);
-        height: 100%;
-      `}
-`;
-
-export const ModalContent = styled.View<
-  { offset: number } & Partial<StyleProps>
->`
-  background-color: transparent;
-  padding-bottom: ${({ offset }) => `${RFValue(offset)}px`};
-  ${({ theme: { borderRadius } }) => css`
-    ${isWeb
-      ? `
-      width: ${RFValueStr('375px')};
-      border-radius: ${borderRadius.micro};
-    `
-      : `
-      border-top-left-radius: ${borderRadius.deca};
-      border-top-right-radius: ${borderRadius.deca};
-    `}
-  `}
-  overflow: hidden;
-`;
-
 export const getStyledDateTimeSelector = (
   component: FC<DateTimeSelectorProps>
 ) => {

package/src/components/molecules/Grid/Item/Item.tsx

@@ -1,10 +1,8 @@
 import React from 'react';
-import {
-  extractNumbersFromString,
-  SpacingType,
-  useTheme,
-} from '@tecsinapse/react-core';
 import { View } from 'react-native';
+import { useTheme } from '../../../../hooks';
+import { SpacingType } from '../../../../types/defaults';
+import { extractNumbersFromString } from '../../../../utils';
 
 type FlexPositioning = 'flex-start' | 'flex-end' | 'center';
 type FlexAlignBase = FlexPositioning | 'stretch';

package/src/components/molecules/HintInputContainer/HintInputContainer.tsx

@@ -1,12 +1,7 @@
-import {
-  Hint,
-  InputVariantType,
-  PressableInputContainer,
-  PressableInputContainerProps,
-  TextProps,
-} from '@tecsinapse/react-core';
-import { StyleProp, View, ViewStyle } from 'react-native';
 import * as React from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+import { Hint, InputVariantType, PressableInputContainer, PressableInputContainerProps } from '../../atoms/Input';
+import { TextProps } from '../../atoms/Text';
 
 export interface HintInputContainerProps extends PressableInputContainerProps {
   viewStyle?: StyleProp<ViewStyle>;