@tecsinapse/react-core 1.12.2 → 1.12.6

package/dist/styles/definitions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/definitions.ts"],"names":["statusColor","error","xlight","light","medium","dark","xdark","warning","success","info","hex2rgba","hex","alpha","r","g","b","match","map","x","parseInt","miscellaneous","shadow","overlay","bodyColor","surfaceColor","spacing","nano","micro","mili","centi","deca","kilo","mega","giga","tera","peta","hexa","iconSize","borderRadius","pill","borderWidth","pico","typography","h5","fontSize","lineHeight","h4","h3","h2","h1","base","sub","label","fontStack","default","mono","fontWeight","regular","bold","black","fontFiles","fontColor","orange","zIndex","absolute","select","input","popover","tooltip","header","backdrop","drawer","sidebar","modal"],"mappings":"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","sourcesContent":["import {\n  BorderRadius,\n  BorderWidth,\n  FontColor,\n  FontStack,\n  FontWeight,\n  IconSize,\n  Miscellaneous,\n  Spacing,\n  TypographyVariation,\n  ZIndex,\n} from '../types/defaults';\n\nexport const statusColor = {\n  error: {\n    xlight: '#fdf3f2',\n    light: '#ee9891',\n    medium: '#e04638',\n    dark: '#9b2318',\n    xdark: '#58240e',\n  },\n  warning: {\n    xlight: '#fffcf0',\n    light: '#ffe380',\n    medium: '#ffc700',\n    dark: '#cc9f00',\n    xdark: '#665000',\n  },\n  success: {\n    xlight: '#f3fcf8',\n    light: '#99e6c9',\n    medium: '#2db783',\n    dark: '#238f67',\n    xdark: '#14523b',\n  },\n  info: {\n    xlight: '#f0f8fe',\n    light: '#85c7fa',\n    medium: '#239bf6',\n    dark: '#0873c4',\n    xdark: '#043962',\n  },\n};\n\nexport const hex2rgba: (hex, alpha?: number) => string = (hex, alpha = 1) => {\n  const [r, g, b] = hex.match(/\\w\\w/g).map(x => parseInt(x, 16));\n  return `rgba(${r},${g},${b},${alpha})`;\n};\n\nexport const miscellaneous: Miscellaneous = {\n  shadow: '#85807a', // rgba(133, 128, 122, 0.08)\n  overlay: '#282625', // rgba(40, 38, 37, 0.5)\n  bodyColor: '#f8f7f7',\n  surfaceColor: '#ffffff', //input, group button, cards\n};\n\nexport const spacing: Spacing = {\n  nano: '2px',\n  micro: '4px',\n  mili: '8px',\n  centi: '12px',\n  deca: '16px',\n  kilo: '24px',\n  mega: '32px',\n  giga: '40px',\n  tera: '48px',\n  peta: '56px',\n  hexa: '64px',\n};\n\nexport const iconSize: IconSize = {\n  micro: '12px',\n  mili: '14px',\n  centi: '16px', // '1rem'\n  deca: '18px', // '1.5rem'\n  kilo: '24px', // '1.6rem'\n  mega: '32px', // '2rem'\n};\n\nexport const borderRadius: BorderRadius = {\n  nano: '2px',\n  micro: '4px',\n  mili: '8px',\n  centi: '16px',\n  deca: '24px',\n  pill: '999999px', // also circle\n};\n\nexport const borderWidth: BorderWidth = {\n  pico: '1px',\n  nano: '2px',\n};\n\nexport const typography: TypographyVariation = {\n  h5: {\n    fontSize: '16px', // '1rem'\n    lineHeight: '24px', // '1.5rem'\n  },\n  h4: {\n    fontSize: '18px', // '1.125rem'\n    lineHeight: '27px', // '1.688rem'\n  },\n  h3: {\n    fontSize: '20px', // '1.25rem'\n    lineHeight: '32px', // '2rem'\n  },\n  h2: {\n    fontSize: '26px', // '1.625rem'\n    lineHeight: '38px', // '2.375rem'\n  },\n  h1: {\n    fontSize: '32px', // '2rem'\n    lineHeight: '42px', // '2.625rem'\n  },\n  base: {\n    fontSize: '14px', // '0.875rem'\n    lineHeight: '21px', // '1.313rem'\n  },\n  sub: {\n    fontSize: '12px', // '0.75rem'\n    lineHeight: '18px', // '1.125rem'\n  },\n  label: {\n    fontSize: '10px',\n    lineHeight: '12px',\n  },\n};\n\nexport const fontStack: FontStack = {\n  default: 'Lato',\n  mono: 'Consolas, monaco, monospace',\n};\n\nexport const fontWeight: FontWeight = {\n  regular: '400',\n  bold: '700',\n  black: '900',\n};\n\nexport const fontFiles: FontWeight = {\n  black: '{0}-Black',\n  bold: '{0}-Bold',\n  regular: '{0}-Regular',\n};\n\nexport const fontColor: FontColor = {\n  light: '#fff',\n  medium: '#85807a',\n  dark: '#353231', // default\n  orange: '#f89907',\n};\n\nexport const zIndex: ZIndex = {\n  default: 0,\n  absolute: 1,\n  select: 20,\n  input: 20,\n  popover: 30,\n  tooltip: 40,\n  header: 600,\n  backdrop: 700,\n  drawer: 700,\n  sidebar: 800,\n  modal: 1000,\n};\n\nexport type IconType =\n  | 'material'\n  | 'material-community'\n  | 'simple-line-icon'\n  | 'zocial'\n  | 'font-awesome'\n  | 'octicon'\n  | 'ionicon'\n  | 'foundation'\n  | 'evilicon'\n  | 'entypo'\n  | 'antdesign'\n  | 'font-awesome-5'\n  | string;\n"],"file":"definitions.js"}
+{"version":3,"sources":["../../src/styles/definitions.ts"],"names":["statusColor","error","xlight","light","medium","dark","xdark","warning","success","info","hex2rgba","hex","alpha","r","g","b","match","map","x","parseInt","miscellaneous","shadow","overlay","bodyColor","surfaceColor","spacing","nano","micro","mili","centi","deca","kilo","mega","giga","tera","peta","hexa","iconSize","borderRadius","pill","borderWidth","pico","typography","h5","fontSize","lineHeight","h4","h3","h2","h1","base","sub","label","fontStack","default","mono","fontWeight","regular","bold","black","fontFiles","fontColor","orange","zIndex","absolute","select","input","popover","tooltip","header","backdrop","drawer","sidebar","modal"],"mappings":"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","sourcesContent":["import {\n  BorderRadius,\n  BorderWidth,\n  FontColor,\n  FontStack,\n  FontWeight,\n  IconSize,\n  Miscellaneous,\n  Spacing,\n  TypographyVariation,\n  ZIndex\n} from '../types/defaults';\nimport { RFValueStr } from '../utils';\n\nexport const statusColor = {\n  error: {\n    xlight: '#fdf3f2',\n    light: '#ee9891',\n    medium: '#e04638',\n    dark: '#9b2318',\n    xdark: '#58240e',\n  },\n  warning: {\n    xlight: '#fffcf0',\n    light: '#ffe380',\n    medium: '#ffc700',\n    dark: '#cc9f00',\n    xdark: '#665000',\n  },\n  success: {\n    xlight: '#f3fcf8',\n    light: '#99e6c9',\n    medium: '#2db783',\n    dark: '#238f67',\n    xdark: '#14523b',\n  },\n  info: {\n    xlight: '#f0f8fe',\n    light: '#85c7fa',\n    medium: '#239bf6',\n    dark: '#0873c4',\n    xdark: '#043962',\n  },\n};\n\nexport const hex2rgba: (hex, alpha?: number) => string = (hex, alpha = 1) => {\n  const [r, g, b] = hex.match(/\\w\\w/g).map(x => parseInt(x, 16));\n  return `rgba(${r},${g},${b},${alpha})`;\n};\n\nexport const miscellaneous: Miscellaneous = {\n  shadow: '#85807a', // rgba(133, 128, 122, 0.08)\n  overlay: '#282625', // rgba(40, 38, 37, 0.5)\n  bodyColor: '#f8f7f7',\n  surfaceColor: '#ffffff', //input, group button, cards\n};\n\nexport const spacing: Spacing = {\n  nano: RFValueStr('2px'),\n  micro: RFValueStr('4px'),\n  mili: RFValueStr('8px'),\n  centi: RFValueStr('12px'),\n  deca: RFValueStr('16px'),\n  kilo: RFValueStr('24px'),\n  mega: RFValueStr('32px'),\n  giga: RFValueStr('40px'),\n  tera: RFValueStr('48px'),\n  peta: RFValueStr('56px'),\n  hexa: RFValueStr('64px'),\n};\n\nexport const iconSize: IconSize = {\n  micro: RFValueStr('12px'),\n  mili: RFValueStr('14px'),\n  centi: RFValueStr('16px'), // '1rem'\n  deca: RFValueStr('18px'), // '1.5rem'\n  kilo: RFValueStr('24px'), // '1.6rem'\n  mega: RFValueStr('32px'), // '2rem'\n};\n\nexport const borderRadius: BorderRadius = {\n  nano: RFValueStr('2px'),\n  micro: RFValueStr('4px'),\n  mili: RFValueStr('8px'),\n  centi: RFValueStr('16px'),\n  deca: RFValueStr('24px'),\n  pill: RFValueStr('999999px'), // also circle\n};\n\nexport const borderWidth: BorderWidth = {\n  pico: RFValueStr('1px'),\n  nano: RFValueStr('2px'),\n};\n\nexport const typography: TypographyVariation = {\n  h5: {\n    fontSize: RFValueStr('16px'), // '1rem'\n    lineHeight: RFValueStr('24px'), // '1.5rem'\n  },\n  h4: {\n    fontSize: RFValueStr('18px'), // '1.125rem'\n    lineHeight: RFValueStr('27px'), // '1.688rem'\n  },\n  h3: {\n    fontSize: RFValueStr('20px'), // '1.25rem'\n    lineHeight: RFValueStr('32px'), // '2rem'\n  },\n  h2: {\n    fontSize: RFValueStr('26px'), // '1.625rem'\n    lineHeight: RFValueStr('38px'), // '2.375rem'\n  },\n  h1: {\n    fontSize: RFValueStr('32px'), // '2rem'\n    lineHeight: RFValueStr('42px'), // '2.625rem'\n  },\n  base: {\n    fontSize: RFValueStr('14px'), // '0.875rem'\n    lineHeight: RFValueStr('21px'), // '1.313rem'\n  },\n  sub: {\n    fontSize: RFValueStr('12px'), // '0.75rem'\n    lineHeight: RFValueStr('18px'), // '1.125rem'\n  },\n  label: {\n    fontSize: RFValueStr('10px'),\n    lineHeight: RFValueStr('12px'),\n  },\n};\n\nexport const fontStack: FontStack = {\n  default: 'Lato',\n  mono: 'Consolas, monaco, monospace',\n};\n\nexport const fontWeight: FontWeight = {\n  regular: '400',\n  bold: '700',\n  black: '900',\n};\n\nexport const fontFiles: FontWeight = {\n  black: '{0}-Black',\n  bold: '{0}-Bold',\n  regular: '{0}-Regular',\n};\n\nexport const fontColor: FontColor = {\n  light: '#fff',\n  medium: '#85807a',\n  dark: '#353231', // default\n  orange: '#f89907',\n};\n\nexport const zIndex: ZIndex = {\n  default: 0,\n  absolute: 1,\n  select: 20,\n  input: 20,\n  popover: 30,\n  tooltip: 40,\n  header: 600,\n  backdrop: 700,\n  drawer: 700,\n  sidebar: 800,\n  modal: 1000,\n};\n\nexport type IconType =\n  | 'material'\n  | 'material-community'\n  | 'simple-line-icon'\n  | 'zocial'\n  | 'font-awesome'\n  | 'octicon'\n  | 'ionicon'\n  | 'foundation'\n  | 'evilicon'\n  | 'entypo'\n  | 'antdesign'\n  | 'font-awesome-5'\n  | string;\n"],"file":"definitions.js"}

package/dist/utils/IPhoneXHelper.d.ts

@@ -0,0 +1,4 @@
+export declare function isIphoneX(): boolean;
+export declare function ifIphoneX(iphoneXStyle: any, regularStyle: any): any;
+export declare function getStatusBarHeight(safe: any): any;
+export declare function getBottomSpace(): 0 | 34;

package/dist/utils/IPhoneXHelper.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isIphoneX = isIphoneX;
+exports.ifIphoneX = ifIphoneX;
+exports.getStatusBarHeight = getStatusBarHeight;
+exports.getBottomSpace = getBottomSpace;
+
+var _reactNative = require("react-native");
+
+function isIphoneX() {
+  const dimen = _reactNative.Dimensions.get('window');
+
+  return _reactNative.Platform.OS === 'ios' && !_reactNative.Platform.isPad && !_reactNative.Platform.isTVOS && (dimen.height === 780 || dimen.width === 780 || dimen.height === 812 || dimen.width === 812 || dimen.height === 844 || dimen.width === 844 || dimen.height === 896 || dimen.width === 896 || dimen.height === 926 || dimen.width === 926);
+}
+
+function ifIphoneX(iphoneXStyle, regularStyle) {
+  if (isIphoneX()) {
+    return iphoneXStyle;
+  }
+
+  return regularStyle;
+}
+
+function getStatusBarHeight(safe) {
+  return _reactNative.Platform.select({
+    ios: ifIphoneX(safe ? 44 : 30, 20),
+    android: _reactNative.StatusBar.currentHeight,
+    default: 0
+  });
+}
+
+function getBottomSpace() {
+  return isIphoneX() ? 34 : 0;
+}
+//# sourceMappingURL=IPhoneXHelper.js.map

package/dist/utils/IPhoneXHelper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/utils/IPhoneXHelper.ts"],"names":["isIphoneX","dimen","Dimensions","get","Platform","OS","isPad","isTVOS","height","width","ifIphoneX","iphoneXStyle","regularStyle","getStatusBarHeight","safe","select","ios","android","StatusBar","currentHeight","default","getBottomSpace"],"mappings":";;;;;;;;;;AAAA;;AAEO,SAASA,SAAT,GAAqB;AACxB,QAAMC,KAAK,GAAGC,wBAAWC,GAAX,CAAe,QAAf,CAAd;;AACA,SACIC,sBAASC,EAAT,KAAgB,KAAhB,IACA,CAACD,sBAASE,KADV,IAEA,CAACF,sBAASG,MAFV,KAGEN,KAAK,CAACO,MAAN,KAAiB,GAAjB,IAAwBP,KAAK,CAACQ,KAAN,KAAgB,GAAzC,IACKR,KAAK,CAACO,MAAN,KAAiB,GAAjB,IAAwBP,KAAK,CAACQ,KAAN,KAAgB,GAD7C,IAEKR,KAAK,CAACO,MAAN,KAAiB,GAAjB,IAAwBP,KAAK,CAACQ,KAAN,KAAgB,GAF7C,IAGKR,KAAK,CAACO,MAAN,KAAiB,GAAjB,IAAwBP,KAAK,CAACQ,KAAN,KAAgB,GAH7C,IAIKR,KAAK,CAACO,MAAN,KAAiB,GAAjB,IAAwBP,KAAK,CAACQ,KAAN,KAAgB,GAP9C,CADJ;AAUH;;AAEM,SAASC,SAAT,CAAmBC,YAAnB,EAAiCC,YAAjC,EAA+C;AAClD,MAAIZ,SAAS,EAAb,EAAiB;AACb,WAAOW,YAAP;AACH;;AACD,SAAOC,YAAP;AACH;;AAEM,SAASC,kBAAT,CAA4BC,IAA5B,EAAkC;AACrC,SAAOV,sBAASW,MAAT,CAAgB;AACnBC,IAAAA,GAAG,EAAEN,SAAS,CAACI,IAAI,GAAG,EAAH,GAAQ,EAAb,EAAiB,EAAjB,CADK;AAEnBG,IAAAA,OAAO,EAAEC,uBAAUC,aAFA;AAGnBC,IAAAA,OAAO,EAAE;AAHU,GAAhB,CAAP;AAKH;;AAEM,SAASC,cAAT,GAA0B;AAC7B,SAAOrB,SAAS,KAAK,EAAL,GAAU,CAA1B;AACH","sourcesContent":["import { Dimensions, Platform, StatusBar } from 'react-native';\n\nexport function isIphoneX() {\n    const dimen = Dimensions.get('window');\n    return (\n        Platform.OS === 'ios' &&\n        !Platform.isPad &&\n        !Platform.isTVOS &&\n        ((dimen.height === 780 || dimen.width === 780)\n          || (dimen.height === 812 || dimen.width === 812)\n          || (dimen.height === 844 || dimen.width === 844)\n          || (dimen.height === 896 || dimen.width === 896)\n          || (dimen.height === 926 || dimen.width === 926))\n    );\n}\n\nexport function ifIphoneX(iphoneXStyle, regularStyle) {\n    if (isIphoneX()) {\n        return iphoneXStyle;\n    }\n    return regularStyle;\n}\n\nexport function getStatusBarHeight(safe) {\n    return Platform.select({\n        ios: ifIphoneX(safe ? 44 : 30, 20),\n        android: StatusBar.currentHeight,\n        default: 0\n    });\n}\n\nexport function getBottomSpace() {\n    return isIphoneX() ? 34 : 0;\n}"],"file":"IPhoneXHelper.js"}

package/dist/utils/ResponsiveFontSize.d.ts

@@ -0,0 +1,3 @@
+export declare const RFPercentage: (percent: number) => number;
+export declare const RFValue: (fontSize: number, standardScreenHeight?: number) => number;
+export declare const RFValueStr: (fontSize: string, standardScreenHeight?: number | undefined) => string;

package/dist/utils/ResponsiveFontSize.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RFValueStr = exports.RFValue = exports.RFPercentage = void 0;
+
+var _reactNative = require("react-native");
+
+var _extractNumbersFromString = require("./extractNumbersFromString");
+
+var _IPhoneXHelper = require("./IPhoneXHelper");
+
+const STANDARD_SCREEN_HEIGHT = 640;
+
+const RFPercentage = percent => {
+  if (_reactNative.Platform.OS === 'web') return percent;
+
+  const {
+    height,
+    width
+  } = _reactNative.Dimensions.get("window");
+
+  const standardLength = width > height ? width : height;
+  const offset = width > height ? 0 : _reactNative.Platform.OS === "ios" ? 78 : _reactNative.StatusBar.currentHeight || 0;
+  const deviceHeight = (0, _IPhoneXHelper.isIphoneX)() || _reactNative.Platform.OS === "android" ? standardLength - offset : standardLength;
+  const heightPercent = percent * deviceHeight / 100;
+  return Math.round(heightPercent);
+};
+
+exports.RFPercentage = RFPercentage;
+
+const RFValue = (fontSize, standardScreenHeight = STANDARD_SCREEN_HEIGHT) => {
+  if (_reactNative.Platform.OS === 'web') return fontSize;
+
+  const {
+    height,
+    width
+  } = _reactNative.Dimensions.get("window");
+
+  const standardLength = width > height ? width : height;
+  const offset = width > height ? 0 : _reactNative.Platform.OS === "ios" ? 78 : _reactNative.StatusBar.currentHeight || 0;
+  const deviceHeight = (0, _IPhoneXHelper.isIphoneX)() || _reactNative.Platform.OS === "android" ? standardLength - offset : standardLength;
+  const heightPercent = fontSize * deviceHeight / standardScreenHeight;
+  return Math.round(heightPercent);
+};
+
+exports.RFValue = RFValue;
+
+const RFValueStr = (fontSize, standardScreenHeight) => {
+  const _fontSize = (0, _extractNumbersFromString.extractNumbersFromString)(fontSize);
+
+  return `${RFValue(_fontSize, standardScreenHeight)}px`;
+};
+
+exports.RFValueStr = RFValueStr;
+//# sourceMappingURL=ResponsiveFontSize.js.map

package/dist/utils/ResponsiveFontSize.js.map

@@ -0,0 +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"}

package/dist/utils/extractNumbersFromString.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractDigitsFromString = exports.extractNumbersFromString = void 0;
 
-const extractNumbersFromString = value => Number(value.replace(/[^0-9]/g, ''));
+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","replace","extractDigitsFromString"],"mappings":";;;;;;;AAAO,MAAMA,wBAAwB,GAAIC,KAAD,IACtCC,MAAM,CAACD,KAAK,CAACE,OAAN,CAAc,SAAd,EAAyB,EAAzB,CAAD,CADD;;;;AAMA,MAAMC,uBAAuB,GAAIH,KAAD,IACrCA,KAAK,CAACE,OAAN,CAAc,SAAd,EAAyB,EAAzB,CADK","sourcesContent":["export const extractNumbersFromString = (value: string): number =>\n  Number(value.replace(/[^0-9]/g, ''));\n\n/*\n * implemented for the case: string numbers start with 0. Example: 012.345.678-91 Example: 012.345.678-91\n * */\nexport const extractDigitsFromString = (value: string): string =>\n  value.replace(/[^0-9]/g, '');\n"],"file":"extractNumbersFromString.js"}
+{"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"}

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

@@ -3,6 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  lightenDarkenColor: true,
+  extractNumbersFromString: true,
+  extractDigitsFromString: true
+};
 Object.defineProperty(exports, "lightenDarkenColor", {
   enumerable: true,
   get: function () {
@@ -25,4 +30,32 @@ Object.defineProperty(exports, "extractDigitsFromString", {
 var _lightenDarkenColor = require("./lightenDarkenColor");
 
 var _extractNumbersFromString = require("./extractNumbersFromString");
+
+var _IPhoneXHelper = require("./IPhoneXHelper");
+
+Object.keys(_IPhoneXHelper).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _IPhoneXHelper[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _IPhoneXHelper[key];
+    }
+  });
+});
+
+var _ResponsiveFontSize = require("./ResponsiveFontSize");
+
+Object.keys(_ResponsiveFontSize).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ResponsiveFontSize[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ResponsiveFontSize[key];
+    }
+  });
+});
 //# sourceMappingURL=index.js.map

package/dist/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA","sourcesContent":["export { lightenDarkenColor } from './lightenDarkenColor';\nexport {\n  extractNumbersFromString,\n  extractDigitsFromString,\n} from './extractNumbersFromString';\n"],"file":"index.js"}
+{"version":3,"sources":["../../src/utils/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAIA;;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 { lightenDarkenColor } from './lightenDarkenColor';\nexport {\n  extractNumbersFromString,\n  extractDigitsFromString,\n} from './extractNumbersFromString';\nexport * from './IPhoneXHelper'\nexport * from './ResponsiveFontSize'"],"file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "1.12.2",
+  "version": "1.12.6",
   "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": "b7e0f13351b82b8687b03ab059f7dc90ff975a10"
+  "gitHead": "5005537c38efef79cdd69a324563821e01e81f99"
 }

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

@@ -1,6 +1,7 @@
-import { View } from 'react-native';
 import styled, { css } from '@emotion/native';
-import { StyleProps } from '@tecsinapse/react-core';
+import { View } from 'react-native';
+import { StyleProps } from '../../../types/defaults';
+import { RFValueStr } from '../../../utils';
 import { BadgeProps } from './Badge';
 
 const baseStyle = ({
@@ -17,8 +18,8 @@ const baseStyle = ({
     justify-content: center;
     height: ${theme.iconSize.centi};
     width: ${theme.iconSize.centi};
-    top: -4px;
-    right: -4px;
+    top: ${RFValueStr('-4px')};
+    right: ${RFValueStr('-4px')};
   `;
 };
 

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

@@ -1,5 +1,6 @@
 import styled, { css } from '@emotion/native';
 import { StyleProps } from '../../../types/defaults';
+import { RFValueStr } from '../../../utils';
 import { PressableSurface } from '../PressableSurface';
 import { ButtonProps } from './Button';
 
@@ -20,12 +21,12 @@ const sizeStyles = ({ theme, size = 'default' }: StyleProps & ButtonProps) => {
     case 'small':
       return css`
         padding: ${theme.spacing.mili} ${theme.spacing.deca};
-        min-height: 34px;
+        min-height: ${RFValueStr('34px')};
       `;
     default:
       return css`
         padding: ${theme.spacing.mili} ${theme.spacing.kilo};
-        min-height: 44px;
+        min-height: ${RFValueStr('44px')};
       `;
   }
 };

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

@@ -1,6 +1,7 @@
 import styled, { css } from '@emotion/native';
 import { FC } from 'react';
 import { StyleProps } from '../../../types/defaults';
+import { RFValueStr } from '../../../utils';
 import { ButtonSizeType } from '../Button';
 import { PressableSurface } from '../PressableSurface';
 import { TextProps } from '../Text';
@@ -104,12 +105,12 @@ const sizeStyles = ({
     case 'small':
       return css`
         padding: ${theme?.spacing.mili} ${theme?.spacing.deca};
-        min-height: 34px;
+        min-height: ${RFValueStr('34px')};
       `;
     default:
       return css`
         padding: ${theme?.spacing.mili} ${theme?.spacing.kilo};
-        min-height: 44px;
+        min-height: ${RFValueStr('44px')};
       `;
   }
 };

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

@@ -2,6 +2,7 @@ import styled, { css } from '@emotion/native';
 import { TextInput } from 'react-native';
 import { InputElementProps } from '.';
 import { StyleProps } from '../../../types/defaults';
+import { RFValueStr } from '../../../utils';
 import { Icon } from '../Icon';
 import { InputContainerProps } from './InputContainer/InputContainer';
 
@@ -62,7 +63,7 @@ export const StyledInputContainer = styled.View<
 >`
   flex-direction: row;
   align-items: center;
-  min-height: 44px;
+  min-height: ${RFValueStr('44px')};
 `;
 
 export const StyledInputElementBase = styled(TextInput)<

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

@@ -1,6 +1,7 @@
 import styled from '@emotion/native';
-import { StyleProps } from '@tecsinapse/react-core';
 import { Animated } from 'react-native';
+import { StyleProps } from '../../../types/defaults';
+import { RFValueStr } from '../../../utils';
 
 export const Container = styled.View<Partial<StyleProps>>`
   display: flex;
@@ -14,7 +15,7 @@ export const Container = styled.View<Partial<StyleProps>>`
 export const Segment = styled.View<Partial<StyleProps>>`
   flex: 1;
   background-color: ${({ theme }) => theme.color.secondary.light};
-  border-right-width: 2px;
+  border-right-width: ${RFValueStr('2px')};
   border-color: ${({ theme }) => theme.color.secondary.xlight};
 `;
 

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

@@ -1,15 +1,15 @@
 import { useTheme } from '@emotion/react';
 import React, { FC, useCallback, useEffect } from 'react';
-import { Animated, StyleProp, ViewStyle, Text } from 'react-native';
+import { Animated, LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native';
 import {
   ColorGradationType,
   ColorType,
-  ThemeProp,
+  ThemeProp
 } from '../../../types/defaults';
+import { extractNumbersFromString, lightenDarkenColor, RFValueStr } from '../../../utils';
 import { PressableSurface } from '../PressableSurface';
-import { StyledSwitch } from './styled';
 import { transitionSwitch } from './animation';
-import { extractNumbersFromString, lightenDarkenColor } from '../../../utils';
+import { StyledSwitch, StyledSwitchContent, SWITCH_PIN_WIDTH } from './styled';
 
 export interface SwitchProps {
   onChange: (active: boolean) => void;
@@ -36,44 +36,43 @@ const Switch: FC<SwitchProps> = ({
 }): JSX.Element => {
   const theme = useTheme() as ThemeProp;
 
-  const transitionValue = React.useRef(new Animated.Value(active ? 16.5 : 0))
-    .current;
+  const width = React.useRef(0)
+  const transitionValue = React.useRef(new Animated.Value(0)).current
+  const animatedColor = React.useRef(new Animated.Value(0)).current
+  
+  const calculateTranslate = () => {
+    if (width.current > 0) {
+      return width.current - (extractNumbersFromString(theme.spacing.micro) * 2) - (extractNumbersFromString(RFValueStr(SWITCH_PIN_WIDTH)))
+    }
+    return 0
+  }
 
-  const animatedColor = React.useRef(new Animated.Value(active ? 1 : 0))
-    .current;
-
-  const getBackgroundColor = (color: string, variation: number) => {
-    return disabled ? lightenDarkenColor(color, variation) : color;
+  const getBackgroundColor = (color: string) => {
+    return disabled ? lightenDarkenColor(theme.color[inactiveColor][inactiveColorTone], 20) : color;
   };
 
   const interpolateColor = animatedColor.interpolate({
     inputRange: [0, 1],
     outputRange: [
-      getBackgroundColor(theme.color[inactiveColor][inactiveColorTone], 25),
-      getBackgroundColor(theme.color[activeColor][activeColorTone], 50),
-    ],
+      getBackgroundColor(theme.color[inactiveColor][inactiveColorTone]),
+      getBackgroundColor(theme.color[activeColor][activeColorTone]),
+    ]
   });
 
-  const animatedStyle = {
-    backgroundColor: interpolateColor,
-  };
-
   useEffect(() => {
-    transitionSwitch(!active, transitionValue, animatedColor);
+    const translate = calculateTranslate()
+    transitionSwitch(active, translate, transitionValue, animatedColor);
   }, [active]);
 
   const handleChange = useCallback(() => {
     onChange(!active);
   }, [active, onChange]);
 
-  const stylesDefault: ViewStyle = {
-    borderRadius: extractNumbersFromString(theme.borderRadius.pill),
-    paddingHorizontal: extractNumbersFromString(theme.spacing.micro),
-    paddingVertical: 0,
-    justifyContent: 'center',
-    width: 40,
-    height: 22,
-  };
+  const handleSwitchLayout = (lce: LayoutChangeEvent) => {
+    width.current = lce.nativeEvent.layout.width
+    const translate = calculateTranslate()
+    transitionSwitch(active, translate, transitionValue, animatedColor);
+  }
 
   return (
     <PressableSurface
@@ -82,11 +81,9 @@ const Switch: FC<SwitchProps> = ({
       effect="none"
       disabled={disabled}
     >
-      <Animated.View style={{ ...animatedStyle, ...stylesDefault }}>
-        <StyledSwitch
-          style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}
-        />
-      </Animated.View>
+      <StyledSwitchContent onLayout={handleSwitchLayout} style={{ backgroundColor: interpolateColor }}>
+        <StyledSwitch style={[dotStyle, { transform: [{ translateX: transitionValue }] }]}/>
+      </StyledSwitchContent>
     </PressableSurface>
   );
 };

package/src/components/atoms/Switch/animation.ts

@@ -1,31 +1,41 @@
-import { Animated } from 'react-native';
+import { Animated, Easing } from 'react-native';
+
+const ANIMATION_SPEED = 140
 
 export const transitionSwitch = (
   active: boolean,
+  translate: number,
   transitionValue: Animated.Value,
   animatedColor: Animated.Value
 ): void => {
+
+  if (translate <= 0) return
+  
   if (active) {
     Animated.timing(transitionValue, {
-      toValue: 0,
-      duration: 150,
-      useNativeDriver: true,
-    }).start();
-    Animated.timing(animatedColor, {
-      toValue: 0,
-      duration: 150,
-      useNativeDriver: false,
-    }).start();
-  } else {
-    Animated.timing(transitionValue, {
-      toValue: 16.5,
-      duration: 150,
+      toValue: translate,
+      duration: ANIMATION_SPEED,
+      easing: Easing.out(Easing.ease),
       useNativeDriver: true,
     }).start();
     Animated.timing(animatedColor, {
       toValue: 1,
-      duration: 150,
+      duration: ANIMATION_SPEED,
       useNativeDriver: false,
     }).start();
-  }
+    return
+  } 
+
+  Animated.timing(transitionValue, {
+    toValue: 0,
+    duration: ANIMATION_SPEED,
+    easing: Easing.out(Easing.ease),
+    useNativeDriver: true,
+  }).start();
+  Animated.timing(animatedColor, {
+    toValue: 0,
+    duration: ANIMATION_SPEED,
+    useNativeDriver: false,
+  }).start();
+
 };

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

@@ -1,20 +1,24 @@
 import styled from '@emotion/native';
-import { StyleProps, SwitchProps } from '@tecsinapse/react-core';
 import { Animated } from 'react-native';
+import { StyleProps } from '../../../types/defaults';
+import { RFValueStr } from '../../../utils';
+
+export const SWITCH_BODY_WIDTH = '40px'
+export const SWITCH_PIN_WIDTH = '16px'
 
 export const StyledSwitchContent = styled(Animated.View)<
-  Partial<SwitchProps> & Partial<StyleProps>
+  Partial<StyleProps>
 >`
   border-radius: ${({ theme }) => theme.borderRadius.pill};
   padding: 0 ${({ theme }) => theme.spacing.micro};
   justify-content: center;
-  width: 40px;
-  height: 22px;
+  width: ${RFValueStr(SWITCH_BODY_WIDTH)};
+  height: ${RFValueStr('22px')};
 `;
 
 export const StyledSwitch = styled(Animated.View)<Partial<StyleProps>>`
   border-radius: ${({ theme }) => theme.borderRadius.pill};
   background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
-  width: 16px;
-  height: 16px;
+  width: ${RFValueStr(SWITCH_PIN_WIDTH)};
+  height: ${RFValueStr('16px')};
 `;

package/src/components/atoms/shared/PaperAndCard.ts

@@ -3,7 +3,6 @@ import { StyleProps } from '@tecsinapse/react-core';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const baseStyles = ({ theme }: StyleProps): any => css`
-  padding: ${theme.spacing.deca};
   border-radius: ${theme.borderRadius.mili};
   background-color: ${theme.miscellaneous.surfaceColor};
   overflow: hidden;

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

@@ -1,11 +1,13 @@
 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';
-import { hex2rgba, StyleProps } from '@tecsinapse/react-core';
 
 const isWeb = Platform.OS === 'web';
 
@@ -29,7 +31,7 @@ export const ModalContent = styled.View<
   { offset: number } & Partial<StyleProps>
 >`
   background-color: transparent;
-  padding-bottom: ${({ offset }) => `${offset}px`};
+  padding-bottom: ${({ offset }) => `${RFValue(offset)}px`};
   ${({ theme: { borderRadius } }) => css`
     ${isWeb
       ? `

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

@@ -2,9 +2,10 @@ import styled, { css } 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,
+  PressableSurfaceProps
 } from '../../atoms/PressableSurface';
 import { DateTimeSelectorProps } from '../DateTimeSelector';
 
@@ -35,11 +36,11 @@ export const ModalContent = styled.View<
   { offset: number } & Partial<StyleProps>
 >`
   background-color: transparent;
-  padding-bottom: ${({ offset }) => `${offset}px`};
+  padding-bottom: ${({ offset }) => `${RFValue(offset)}px`};
   ${({ theme: { borderRadius } }) => css`
     ${isWeb
       ? `
-      width: 375px;
+      width: ${RFValueStr('375px')};
       border-radius: ${borderRadius.micro};
     `
       : `