@tecsinapse/react-core 1.12.3 → 1.12.7

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.3",
+  "version": "1.12.7",
   "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": "70d4f967e058d9d50acaf752273a9063d64c6074"
+  "gitHead": "cdb61cb619e5098670792c47729e0aae373749fc"
 }

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,10 +3,8 @@ 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;
 `;
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -17,10 +15,10 @@ export const elevatedStyles = ({
   elevated && [
     css({
       shadowColor: theme.miscellaneous.shadow,
-      shadowOffset: { width: 0, height: 1 },
-      shadowOpacity: 0.2,
-      shadowRadius: 1.4,
-      elevation: 2,
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.05,
+      shadowRadius: 5,
+      elevation: 2
     }),
   ];
 /* eslint-enable @typescript-eslint/no-explicit-any */

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};
     `
       : `

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

@@ -1,5 +1,6 @@
 import styled from '@emotion/native';
 import { StyleProps } from '../../../types/defaults';
+import { RFValueStr } from '../../../utils';
 import { PressableSurface } from '../../atoms/PressableSurface';
 
 export const Root = styled.View<Partial<StyleProps>>`
@@ -14,7 +15,7 @@ export const Content = styled.View<Partial<StyleProps>>`
 `;
 
 export const SelectorRoot = styled.View<Partial<StyleProps>>`
-  border-width: 1px;
+  border-width: ${RFValueStr('1px')};
   border-color: ${({ theme }) => theme.color.secondary.xlight};
   border-radius: ${({ theme }) => theme.borderRadius.mili};
 `;

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

@@ -1,10 +1,11 @@
-import { View } from 'react-native';
 import styled, { css } from '@emotion/native';
-import { SnackbarProps } from './Snackbar';
+import { View } from 'react-native';
 import { StyleProps } from '../../../types/defaults';
-import { ProgressBar } from '../../atoms/ProgressBar';
+import { RFValue } from '../../../utils';
 import { Paper } from '../../atoms/Paper';
 import { PressableSurface } from '../../atoms/PressableSurface';
+import { ProgressBar } from '../../atoms/ProgressBar';
+import { SnackbarProps } from './Snackbar';
 
 const baseStyles = ({
   theme,
@@ -31,7 +32,7 @@ const anchorTop = ({
   return (
     anchor === 'top' &&
     css`
-      top: ${anchorDistance ? `${anchorDistance}px` : theme.spacing.deca};
+      top: ${anchorDistance ? `${RFValue(anchorDistance)}px` : theme.spacing.deca};
     `
   );
 };
@@ -44,7 +45,7 @@ const anchorBottom = ({
   return (
     anchor === 'bottom' &&
     css`
-      bottom: ${anchorDistance ? `${anchorDistance}px` : theme.spacing.deca};
+      bottom: ${anchorDistance ? `${RFValue(anchorDistance)}px` : theme.spacing.deca};
     `
   );
 };

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

@@ -1,25 +1,19 @@
 import styled from '@emotion/native';
-import {
-  extractNumbersFromString,
-  InputContainer,
-  InputElement,
-  StyleProps,
-} from '@tecsinapse/react-core';
+import { StyleProps } from '../../../types/defaults';
+import { extractNumbersFromString, RFValue, RFValueStr } from '../../../utils';
+import { InputContainer, InputElement } from '../../atoms/Input';
 import { TextAreaProps } from './TextArea';
 
 export const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`
-  min-height: 50px;
+  min-height: ${RFValueStr('50px')};
 `;
 
 export const TextAreaInputBase = styled(InputElement)<
   Partial<TextAreaProps> & Partial<StyleProps>
 >`
   max-height: ${({ theme, numberOfLines }) =>
-    `${
-      extractNumbersFromString(theme.typography.h5.lineHeight) *
-      (numberOfLines || 1)
-    }px`};
+    `${RFValue(extractNumbersFromString(theme.typography.h5.lineHeight) * (numberOfLines || 1))}px`};
   width: 100%;
   padding: 0;
-  margin: 3px 0;
+  margin: ${RFValueStr('3px')} 0;
 `;