@tecsinapse/react-core 1.12.6 → 1.12.10

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.6",
+  "version": "1.12.10",
   "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": "5005537c38efef79cdd69a324563821e01e81f99"
+  "gitHead": "5a75d80ba78335d9dba890b4b75c6bc76954c380"
 }

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/atoms/shared/PaperAndCard.ts

@@ -5,7 +5,6 @@ import { StyleProps } from '@tecsinapse/react-core';
 export const baseStyles = ({ theme }: StyleProps): any => css`
   border-radius: ${theme.borderRadius.mili};
   background-color: ${theme.miscellaneous.surfaceColor};
-  overflow: hidden;
 `;
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -16,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/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>;

package/src/components/molecules/TextArea/TextArea.tsx

@@ -1,15 +1,9 @@
 import React, { FC } from 'react';
-import {
-  FontStackType,
-  FontWeightType,
-  Hint,
-  InputContainerProps,
-  InputElementProps,
-  TextProps,
-} from '@tecsinapse/react-core';
 import { View } from 'react-native';
+import { FontStackType, FontWeightType } from '../../../types/defaults';
+import { Hint, InputContainerProps, InputElementProps } from '../../atoms/Input';
+import { Text, TextProps } from '../../atoms/Text';
 import { StyledInputContainer } from './styled';
-import { Text } from '../../atoms/Text';
 
 export interface TextAreaProps
   extends Omit<InputElementProps, 'style' | 'multiline' | 'value'>,

package/src/index.ts

@@ -57,6 +57,7 @@ export {
   CalendarProps,
   DateRange,
   SelectionType,
+  Value
 } from './components/molecules/Calendar';
 export { DatePicker, DatePickerProps } from './components/molecules/DatePicker';
 export {

package/src/styles/definitions.ts

@@ -49,7 +49,7 @@ export const hex2rgba: (hex, alpha?: number) => string = (hex, alpha = 1) => {
 };
 
 export const miscellaneous: Miscellaneous = {
-  shadow: '#85807a', // rgba(133, 128, 122, 0.08)
+  shadow: '#000000', // black
   overlay: '#282625', // rgba(40, 38, 37, 0.5)
   bodyColor: '#f8f7f7',
   surfaceColor: '#ffffff', //input, group button, cards