@tecsinapse/react-web-kit 1.12.8 → 1.12.9

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.12.9](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.8...@tecsinapse/react-web-kit@1.12.9) (2022-01-18)
+
+**Note:** Version bump only for package @tecsinapse/react-web-kit
+
+
+
+
+
 ## [1.12.8](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.7...@tecsinapse/react-web-kit@1.12.8) (2022-01-17)
 
 **Note:** Version bump only for package @tecsinapse/react-web-kit

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

@@ -0,0 +1,2 @@
+import { DatePickerProps } from '@tecsinapse/react-core';
+export declare const DatePicker: <T extends any>({ ...rest }: Omit<any, "CalendarComponent" | "renderCalendar" | "requestCloseCalendar" | "requestShowCalendar">) => JSX.Element;

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

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatePicker = void 0;
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Modal = require("./Modal");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const DatePicker = ({ ...rest
+}) => {
+  const [visible, setVisible] = (0, _react.useState)(false);
+  const show = (0, _react.useCallback)(() => setVisible(true), []);
+  const close = (0, _react.useCallback)(() => setVisible(false), []);
+  return _react.default.createElement(_reactCore.DatePicker, _extends({}, rest, {
+    CalendarComponent: _reactCore.Calendar,
+    requestShowCalendar: show,
+    requestCloseCalendar: close,
+    renderCalendar: calendar => _react.default.createElement(_Modal.Modal, {
+      animationType: "fade",
+      visible: visible,
+      onRequestClose: close
+    }, calendar)
+  }));
+};
+
+exports.DatePicker = DatePicker;
+//# sourceMappingURL=DatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/DatePicker.tsx"],"names":["DatePicker","rest","visible","setVisible","show","close","Calendar","calendar"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;;;;;;;AAEO,MAAMA,UAAU,GAAG,CAA0B,EAAE,GAAGC;AAAL,CAA1B,KAA0K;AAElM,QAAM,CAAEC,OAAF,EAAWC,UAAX,IAA0B,qBAAS,KAAT,CAAhC;AACA,QAAMC,IAAI,GAAG,wBAAY,MAAMD,UAAU,CAAC,IAAD,CAA5B,EAAoC,EAApC,CAAb;AACA,QAAME,KAAK,GAAG,wBAAY,MAAMF,UAAU,CAAC,KAAD,CAA5B,EAAqC,EAArC,CAAd;AAEA,SACE,6BAAC,qBAAD,eACMF,IADN;AAEE,IAAA,iBAAiB,EAAEK,mBAFrB;AAGE,IAAA,mBAAmB,EAAEF,IAHvB;AAIE,IAAA,oBAAoB,EAAEC,KAJxB;AAKE,IAAA,cAAc,EAAGE,QAAD,IACd,6BAAC,YAAD;AAAO,MAAA,aAAa,EAAC,MAArB;AAA4B,MAAA,OAAO,EAAEL,OAArC;AAA8C,MAAA,cAAc,EAAEG;AAA9D,OACGE,QADH;AANJ,KADF;AAaD,CAnBM","sourcesContent":["import {\n  Calendar,\n  DatePicker as DatePickerCore, DatePickerProps, SelectionType\n} from '@tecsinapse/react-core';\nimport React, { useCallback, useState } from 'react';\nimport { Modal } from './Modal';\n\nexport const DatePicker = <T extends SelectionType>({ ...rest }: Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>): JSX.Element => {\n\n  const [ visible, setVisible ] = useState(false)\n  const show = useCallback(() => setVisible(true), [])\n  const close = useCallback(() => setVisible(false), [])\n  \n  return (\n    <DatePickerCore\n      {...rest}\n      CalendarComponent={Calendar}\n      requestShowCalendar={show}\n      requestCloseCalendar={close}\n      renderCalendar={(calendar) => (\n        <Modal animationType='fade' visible={visible} onRequestClose={close}>\n          {calendar}\n        </Modal>\n      )}\n    />\n  );\n};"],"file":"DatePicker.js"}

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

@@ -0,0 +1,3 @@
+import { CalendarProps } from '@tecsinapse/react-core';
+import { ModalProps } from 'react-native';
+export declare const Modal: <T extends any>({ onRequestClose, children, ...modalProps }: any) => JSX.Element;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Modal = void 0;
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactNativeWeb = require("react-native-web");
+
+var _styled = require("./styled");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const Component = ({
+  onRequestClose,
+  children,
+  ...modalProps
+}) => {
+  return React.createElement(_reactNativeWeb.Modal, _extends({
+    transparent: true,
+    hardwareAccelerated: true,
+    statusBarTranslucent: true
+  }, modalProps, {
+    onRequestClose: onRequestClose
+  }), React.createElement(_styled.Backdrop, {
+    onPress: onRequestClose,
+    effect: "none"
+  }, React.createElement(_reactCore.PressableSurface, null, React.createElement(_styled.ModalContent, null, children))));
+};
+
+const Modal = Component;
+exports.Modal = Modal;
+//# sourceMappingURL=Modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/Modal.tsx"],"names":["Component","onRequestClose","children","modalProps","Modal"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,SAAS,GAAG,CAA0B;AAAEC,EAAAA,cAAF;AAAkBC,EAAAA,QAAlB;AAA4B,KAAGC;AAA/B,CAA1B,KAAkJ;AAClK,SACE,oBAAC,qBAAD;AACE,IAAA,WAAW,MADb;AAEE,IAAA,mBAAmB,MAFrB;AAGE,IAAA,oBAAoB;AAHtB,KAIMA,UAJN;AAKE,IAAA,cAAc,EAAEF;AALlB,MAOE,oBAAC,gBAAD;AAAU,IAAA,OAAO,EAAEA,cAAnB;AAAmC,IAAA,MAAM,EAAC;AAA1C,KACE,oBAAC,2BAAD,QACE,oBAAC,oBAAD,QACGC,QADH,CADF,CADF,CAPF,CADF;AAiBD,CAlBD;;AAoBO,MAAME,KAAK,GAAGJ,SAAd","sourcesContent":["import { CalendarProps, PressableSurface, SelectionType } from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { Backdrop, ModalContent } from './styled';\n\nconst Component = <T extends SelectionType>({ onRequestClose, children, ...modalProps }: CalendarProps<T> & ModalProps & { children: JSX.Element }): JSX.Element => {\n  return (\n    <RNModal\n      transparent\n      hardwareAccelerated\n      statusBarTranslucent\n      {...modalProps}\n      onRequestClose={onRequestClose}\n    >\n      <Backdrop onPress={onRequestClose} effect=\"none\">\n        <PressableSurface>\n          <ModalContent>\n            {children}\n          </ModalContent>\n        </PressableSurface>\n      </Backdrop>\n    </RNModal>\n  );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.js"}

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

@@ -0,0 +1 @@
+export * from './DatePicker';

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

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _DatePicker = require("./DatePicker");
+
+Object.keys(_DatePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DatePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DatePicker[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './DatePicker'"],"file":"index.js"}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Backdrop: import("@emotion/native").StyledComponent<any, {}, {
+    ref?: import("react").Ref<any> | undefined;
+}>;
+export declare const ModalContent: import("@emotion/native").StyledComponent<any, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
+}>;

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalContent = exports.Backdrop = void 0;
+
+var _native = _interopRequireWildcard(require("@emotion/native"));
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _reactNativeWeb = require("react-native-web");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const isWeb = _reactNativeWeb.Platform.OS === 'web';
+const Backdrop = (0, _native.default)(_reactCore.PressableSurface)`
+  ${({
+  theme
+}) => isWeb ? (0, _native.css)`
+          justify-content: center;
+          align-items: center;
+          background-color: ${(0, _reactCore.hex2rgba)(theme.miscellaneous.overlay, 0.5)};
+          height: 100vh;
+        ` : (0, _native.css)`
+          justify-content: flex-end;
+          background-color: ${(0, _reactCore.hex2rgba)(theme.miscellaneous.overlay, 0.5)};
+          height: 100%;
+        `}
+`;
+exports.Backdrop = Backdrop;
+const ModalContent = _native.default.View`
+  background-color: transparent;
+  ${({
+  theme: {
+    borderRadius
+  }
+}) => (0, _native.css)`
+    ${isWeb ? `
+      border-radius: ${borderRadius.micro};
+    ` : `
+      border-top-left-radius: ${borderRadius.deca};
+      border-top-right-radius: ${borderRadius.deca};
+    `}
+  `}
+  overflow: hidden;
+`;
+exports.ModalContent = ModalContent;
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/DatePicker/styled.ts"],"names":["isWeb","Platform","OS","Backdrop","PressableSurface","theme","miscellaneous","overlay","ModalContent","styled","View","borderRadius","micro","deca"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;AAEA,MAAMA,KAAK,GAAGC,yBAASC,EAAT,KAAgB,KAA9B;AAEO,MAAMC,QAAQ,GAAG,qBAAOC,2BAAP,CAA8C;AACtE,IAAI,CAAC;AAAEC,EAAAA;AAAF,CAAD,KACAL,KAAK,GACD,gBAAI;AACZ;AACA;AACA,8BAA8B,yBAASK,KAAK,CAACC,aAAN,CAAoBC,OAA7B,EAAsC,GAAtC,CAA2C;AACzE;AACA,SANS,GAOD,gBAAI;AACZ;AACA,8BAA8B,yBAASF,KAAK,CAACC,aAAN,CAAoBC,OAA7B,EAAsC,GAAtC,CAA2C;AACzE;AACA,SAAU;AACV,CAdO;;AAgBA,MAAMC,YAAY,GAAGC,gBAAOC,IAA0B;AAC7D;AACA,IAAI,CAAC;AAAEL,EAAAA,KAAK,EAAE;AAAEM,IAAAA;AAAF;AAAT,CAAD,KAAiC,gBAAI;AACzC,MAAMX,KAAK,GACF;AACT,uBAAuBW,YAAY,CAACC,KAAM;AAC1C,KAHW,GAIF;AACT,gCAAgCD,YAAY,CAACE,IAAK;AAClD,iCAAiCF,YAAY,CAACE,IAAK;AACnD,KAAM;AACN,GAAI;AACJ;AACA,CAbO","sourcesContent":["import styled, { css } from \"@emotion/native\";\nimport { hex2rgba, PressableSurface, StyleProps } from \"@tecsinapse/react-core\";\nimport { Platform } from \"react-native\";\n\nconst isWeb = Platform.OS === 'web';\n\nexport const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`\n  ${({ theme }) =>\n    isWeb\n      ? css`\n          justify-content: center;\n          align-items: center;\n          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};\n          height: 100vh;\n        `\n      : css`\n          justify-content: flex-end;\n          background-color: ${hex2rgba(theme.miscellaneous.overlay, 0.5)};\n          height: 100%;\n        `}\n`;\n\nexport const ModalContent = styled.View<Partial<StyleProps>>`\n  background-color: transparent;\n  ${({ theme: { borderRadius } }) => css`\n    ${isWeb\n      ? `\n      border-radius: ${borderRadius.micro};\n    `\n      : `\n      border-top-left-radius: ${borderRadius.deca};\n      border-top-right-radius: ${borderRadius.deca};\n    `}\n  `}\n  overflow: hidden;\n`;\n"],"file":"styled.js"}

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

@@ -0,0 +1,3 @@
+import { DateTimePickerProps } from '@tecsinapse/react-core';
+import { FC } from 'react';
+export declare const DateTimePicker: FC<DateTimePickerProps>;

package/dist/components/molecules/DateTimePicker/DateTimePicker.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DateTimePicker = void 0;
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Modal = require("./Modal");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const DateTimePicker = ({ ...rest
+}) => {
+  const [visible, setVisible] = (0, _react.useState)(false);
+  const show = (0, _react.useCallback)(() => setVisible(true), []);
+  const close = (0, _react.useCallback)(() => setVisible(false), []);
+  return _react.default.createElement(_reactCore.DateTimePicker, _extends({}, rest, {
+    requestShowSelector: show,
+    requestCloseSelector: close,
+    renderSelector: selector => _react.default.createElement(_Modal.Modal, {
+      animationType: "fade",
+      visible: visible,
+      onRequestClose: close
+    }, selector)
+  }));
+};
+
+exports.DateTimePicker = DateTimePicker;
+//# sourceMappingURL=DateTimePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/DateTimePicker.tsx"],"names":["DateTimePicker","rest","visible","setVisible","show","close","selector"],"mappings":";;;;;;;AAAA;;AAIA;;AACA;;;;;;;;AAEO,MAAMA,cAAuC,GAAG,CAAC,EAAE,GAAGC;AAAL,CAAD,KAAiB;AAEpE,QAAM,CAAEC,OAAF,EAAWC,UAAX,IAA0B,qBAAS,KAAT,CAAhC;AACA,QAAMC,IAAI,GAAG,wBAAY,MAAMD,UAAU,CAAC,IAAD,CAA5B,EAAoC,EAApC,CAAb;AACA,QAAME,KAAK,GAAG,wBAAY,MAAMF,UAAU,CAAC,KAAD,CAA5B,EAAqC,EAArC,CAAd;AAEA,SACI,6BAAC,yBAAD,eACQF,IADR;AAEI,IAAA,mBAAmB,EAAEG,IAFzB;AAGI,IAAA,oBAAoB,EAAEC,KAH1B;AAII,IAAA,cAAc,EAAGC,QAAD,IACZ,6BAAC,YAAD;AAAO,MAAA,aAAa,EAAC,MAArB;AAA4B,MAAA,OAAO,EAAEJ,OAArC;AAA8C,MAAA,cAAc,EAAEG;AAA9D,OACKC,QADL;AALR,KADJ;AAYH,CAlBM","sourcesContent":["import {\n    DateTimePicker as DateTimePickerCore,\n    DateTimePickerProps\n} from '@tecsinapse/react-core';\nimport React, { FC, useCallback, useState } from 'react';\nimport { Modal } from './Modal';\n\nexport const DateTimePicker: FC<DateTimePickerProps> = ({ ...rest }) => {\n\n    const [ visible, setVisible ] = useState(false)\n    const show = useCallback(() => setVisible(true), [])\n    const close = useCallback(() => setVisible(false), [])\n\n    return (\n        <DateTimePickerCore\n            {...rest}\n            requestShowSelector={show}\n            requestCloseSelector={close}\n            renderSelector={(selector) => (\n                <Modal animationType='fade' visible={visible} onRequestClose={close}>\n                    {selector}\n                </Modal>\n            )}\n        />\n    );\n};\n"],"file":"DateTimePicker.js"}

package/dist/components/molecules/DateTimePicker/Modal.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const Modal: React.FC<any>;

package/dist/components/molecules/DateTimePicker/Modal.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Modal = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactNativeWeb = require("react-native-web");
+
+var _styled = require("./styled");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const Component = ({
+  onRequestClose,
+  onChange,
+  children,
+  ...rest
+}) => {
+  return React.createElement(_reactNativeWeb.Modal, _extends({
+    transparent: true,
+    hardwareAccelerated: true,
+    statusBarTranslucent: true
+  }, rest, {
+    onRequestClose: onRequestClose
+  }), React.createElement(_styled.Backdrop, {
+    onPress: onRequestClose,
+    effect: "none"
+  }, React.createElement(_styled.ModalContent, null, children)));
+};
+
+const Modal = Component;
+exports.Modal = Modal;
+//# sourceMappingURL=Modal.js.map

package/dist/components/molecules/DateTimePicker/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/Modal.tsx"],"names":["Component","onRequestClose","onChange","children","rest","Modal"],"mappings":";;;;;;;AACA;;AACA;;AACA;;;;;;;;AAEA,MAAMA,SAAuD,GAAG,CAAC;AAC/DC,EAAAA,cAD+D;AAE/DC,EAAAA,QAF+D;AAG/DC,EAAAA,QAH+D;AAI/D,KAAGC;AAJ4D,CAAD,KAK1D;AAEJ,SACE,oBAAC,qBAAD;AACE,IAAA,WAAW,MADb;AAEE,IAAA,mBAAmB,MAFrB;AAGE,IAAA,oBAAoB;AAHtB,KAIMA,IAJN;AAKE,IAAA,cAAc,EAAEH;AALlB,MAOE,oBAAC,gBAAD;AAAU,IAAA,OAAO,EAAEA,cAAnB;AAAmC,IAAA,MAAM,EAAC;AAA1C,KACE,oBAAC,oBAAD,QACGE,QADH,CADF,CAPF,CADF;AAeD,CAtBD;;AAwBO,MAAME,KAAK,GAAGL,SAAd","sourcesContent":["import { DateTimeSelectorProps } from '@tecsinapse/react-core';\nimport * as React from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { Backdrop, ModalContent } from './styled';\n\nconst Component: React.FC<DateTimeSelectorProps & ModalProps> = ({\n  onRequestClose,\n  onChange,\n  children,\n  ...rest\n}) => {\n\n  return (\n    <RNModal\n      transparent\n      hardwareAccelerated\n      statusBarTranslucent\n      {...rest}\n      onRequestClose={onRequestClose}\n    >\n      <Backdrop onPress={onRequestClose} effect=\"none\">\n        <ModalContent>\n          {children}\n        </ModalContent>\n      </Backdrop>\n    </RNModal>\n  );\n};\n\nexport const Modal = Component;\n"],"file":"Modal.js"}

package/dist/components/molecules/DateTimePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './DateTimePicker';

package/dist/components/molecules/DateTimePicker/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _DateTimePicker = require("./DateTimePicker");
+
+Object.keys(_DateTimePicker).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DateTimePicker[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DateTimePicker[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/DateTimePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './DateTimePicker'"],"file":"index.js"}

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Backdrop: import("@emotion/native").StyledComponent<any, {}, {
+    ref?: import("react").Ref<any> | undefined;
+}>;
+export declare const ModalContent: import("@emotion/native").StyledComponent<any, {}, {
+    ref?: import("react").Ref<import("react-native").View> | undefined;
+}>;

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

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalContent = exports.Backdrop = void 0;
+
+var _native = _interopRequireWildcard(require("@emotion/native"));
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _reactNativeWeb = require("react-native-web");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const isWeb = _reactNativeWeb.Platform.OS === 'web';
+const Backdrop = (0, _native.default)(_reactCore.PressableSurface)`
+  ${isWeb ? (0, _native.css)`
+        justify-content: center;
+        align-items: center;
+        background-color: rgba(0, 0, 0, 0.5);
+        height: 100vh;
+      ` : (0, _native.css)`
+        justify-content: flex-end;
+        background-color: rgba(0, 0, 0, 0.5);
+        height: 100%;
+      `}
+`;
+exports.Backdrop = Backdrop;
+const ModalContent = _native.default.View`
+  background-color: transparent;
+  ${({
+  theme: {
+    borderRadius
+  }
+}) => (0, _native.css)`
+    ${isWeb ? `
+      width: ${(0, _reactCore.RFValueStr)('375px')};
+      border-radius: ${borderRadius.micro};
+    ` : `
+      border-top-left-radius: ${borderRadius.deca};
+      border-top-right-radius: ${borderRadius.deca};
+    `}
+  `}
+  overflow: hidden;
+`;
+exports.ModalContent = ModalContent;
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/molecules/DateTimePicker/styled.ts"],"names":["isWeb","Platform","OS","Backdrop","PressableSurface","ModalContent","styled","View","theme","borderRadius","micro","deca"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;;;;;AAEA,MAAMA,KAAK,GAAGC,yBAASC,EAAT,KAAgB,KAA9B;AAEO,MAAMC,QAAQ,GAAG,qBAAOC,2BAAP,CAA8C;AACtE,IAAIJ,KAAK,GACH,gBAAI;AACV;AACA;AACA;AACA;AACA,OANS,GAOH,gBAAI;AACV;AACA;AACA;AACA,OAAQ;AACR,CAbO;;AAeA,MAAMK,YAAY,GAAGC,gBAAOC,IAA0B;AAC7D;AACA,IAAI,CAAC;AAAEC,EAAAA,KAAK,EAAE;AAAEC,IAAAA;AAAF;AAAT,CAAD,KAAiC,gBAAI;AACzC,MAAMT,KAAK,GACF;AACT,eAAe,2BAAW,OAAX,CAAoB;AACnC,uBAAuBS,YAAY,CAACC,KAAM;AAC1C,KAJW,GAKF;AACT,gCAAgCD,YAAY,CAACE,IAAK;AAClD,iCAAiCF,YAAY,CAACE,IAAK;AACnD,KAAM;AACN,GAAI;AACJ;AACA,CAdO","sourcesContent":["import styled, { css } from \"@emotion/native\";\nimport { DateTimeSelectorProps, PressableSurface, RFValueStr, StyleProps } from \"@tecsinapse/react-core\";\nimport { FC } from \"react\";\nimport { Platform } from \"react-native\";\n\nconst isWeb = Platform.OS === 'web';\n\nexport const Backdrop = styled(PressableSurface)<Partial<StyleProps>>`\n  ${isWeb\n    ? css`\n        justify-content: center;\n        align-items: center;\n        background-color: rgba(0, 0, 0, 0.5);\n        height: 100vh;\n      `\n    : css`\n        justify-content: flex-end;\n        background-color: rgba(0, 0, 0, 0.5);\n        height: 100%;\n      `}\n`;\n\nexport const ModalContent = styled.View<Partial<StyleProps>>`\n  background-color: transparent;\n  ${({ theme: { borderRadius } }) => css`\n    ${isWeb\n      ? `\n      width: ${RFValueStr('375px')};\n      border-radius: ${borderRadius.micro};\n    `\n      : `\n      border-top-left-radius: ${borderRadius.deca};\n      border-top-right-radius: ${borderRadius.deca};\n    `}\n  `}\n  overflow: hidden;\n`;"],"file":"styled.js"}

package/dist/index.d.ts

@@ -16,3 +16,5 @@ export { Modal, ModalProps } from './components/atoms/Modal';
 export { TextArea, TextAreaProps } from './components/molecules/TextArea';
 export { Tooltip, ITooltip } from './components/atoms/Tooltip';
 export * from './hooks';
+export { DatePicker } from './components/molecules/DatePicker';
+export { DateTimePicker } from './components/molecules/DateTimePicker';

package/dist/index.js

@@ -41,7 +41,9 @@ var _exportNames = {
   TextArea: true,
   TextAreaProps: true,
   Tooltip: true,
-  ITooltip: true
+  ITooltip: true,
+  DatePicker: true,
+  DateTimePicker: true
 };
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
@@ -271,6 +273,18 @@ Object.defineProperty(exports, "ITooltip", {
     return _Tooltip.ITooltip;
   }
 });
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePicker;
+  }
+});
+Object.defineProperty(exports, "DateTimePicker", {
+  enumerable: true,
+  get: function () {
+    return _DateTimePicker.DateTimePicker;
+  }
+});
 
 var _reactCore = require("@tecsinapse/react-core");
 
@@ -332,6 +346,10 @@ Object.keys(_hooks).forEach(function (key) {
   });
 });
 
+var _DatePicker = require("./components/molecules/DatePicker");
+
+var _DateTimePicker = require("./components/molecules/DateTimePicker");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AAOA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport {\n  default as Badge,\n  BadgeWebProps,\n} from './components/atoms/Badge/Badge';\nexport {\n  Button,\n  useMouseHover,\n  WebButtonProps,\n} from './components/atoms/Button';\nexport { Input, InputWebProps } from './components/atoms/Input';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  InputPassword,\n  InputPasswordWebProps,\n} from './components/molecules/InputPassword';\nexport {\n  Menubar,\n  MenubarProps,\n  MenubarOptionsType,\n  MenubarItemsOptions,\n  MenubarMostUsedType,\n} from './components/molecules/Menubar';\nexport { Drawer, DrawerProps } from './components/molecules/Drawer';\nexport { Select, SelectProps } from './components/molecules/Select';\nexport { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';\nexport {\n  Breadcrumbs,\n  BreadcrumbsProps,\n  BreadcrumbType,\n} from './components/molecules/Breadcrumbs';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\nexport { Accordion, AccordionProps } from './components/atoms/Accordion';\nexport {\n  DataGrid,\n  DataGridProps,\n  HeadersType,\n} from './components/organisms/DataGrid';\nexport { Modal, ModalProps } from './components/atoms/Modal';\nexport { TextArea, TextAreaProps } from './components/molecules/TextArea';\nexport { Tooltip, ITooltip } from './components/atoms/Tooltip';\nexport * from './hooks';\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAIA;;AAKA;;AACA;;AACA;;AAIA;;AAOA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AACA","sourcesContent":["export * from '@tecsinapse/react-core';\nexport {\n  default as Badge,\n  BadgeWebProps,\n} from './components/atoms/Badge/Badge';\nexport {\n  Button,\n  useMouseHover,\n  WebButtonProps,\n} from './components/atoms/Button';\nexport { Input, InputWebProps } from './components/atoms/Input';\nexport { Tag, TagProps } from './components/atoms/Tag';\nexport {\n  InputPassword,\n  InputPasswordWebProps,\n} from './components/molecules/InputPassword';\nexport {\n  Menubar,\n  MenubarProps,\n  MenubarOptionsType,\n  MenubarItemsOptions,\n  MenubarMostUsedType,\n} from './components/molecules/Menubar';\nexport { Drawer, DrawerProps } from './components/molecules/Drawer';\nexport { Select, SelectProps } from './components/molecules/Select';\nexport { Snackbar, SnackbarWebProps } from './components/molecules/Snackbar';\nexport {\n  Breadcrumbs,\n  BreadcrumbsProps,\n  BreadcrumbType,\n} from './components/molecules/Breadcrumbs';\nexport { Skeleton, SkeletonProps } from './components/atoms/Skeleton';\nexport { Accordion, AccordionProps } from './components/atoms/Accordion';\nexport {\n  DataGrid,\n  DataGridProps,\n  HeadersType,\n} from './components/organisms/DataGrid';\nexport { Modal, ModalProps } from './components/atoms/Modal';\nexport { TextArea, TextAreaProps } from './components/molecules/TextArea';\nexport { Tooltip, ITooltip } from './components/atoms/Tooltip';\nexport * from './hooks';\nexport { DatePicker } from './components/molecules/DatePicker'\nexport { DateTimePicker } from './components/molecules/DateTimePicker'"],"file":"index.js"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-web-kit",
   "description": "TecSinapse React components",
-  "version": "1.12.8",
+  "version": "1.12.9",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "MIT",
@@ -14,7 +14,7 @@
     "@emotion/native": "^11.0.0",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@tecsinapse/react-core": "^1.12.8",
+    "@tecsinapse/react-core": "^1.12.9",
     "@types/react-native": "^0.64.4",
     "react-native-vector-icons": "^8.1.0",
     "react-transition-group": "^4.4.2"
@@ -33,5 +33,5 @@
     "react-dom": ">=16.8.0",
     "react-native-web": "^0.17.1"
   },
-  "gitHead": "5ae217bb1d1226eb9d83e1b7d7630ccc177df104"
+  "gitHead": "7b090c696311b6aa4d412b8839fba00ccf5f7fd6"
 }

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

@@ -0,0 +1,44 @@
+import { Story } from '@storybook/react';
+import { DatePickerProps, DateRange } from '@tecsinapse/react-core';
+import { ptBR } from 'date-fns/locale';
+import React from 'react';
+import { DatePicker } from './DatePicker';
+
+export default {
+  title: 'Web/Date Picker',
+  component: DatePicker,
+};
+
+const Template: Story<DatePickerProps<'range'>> = args => {
+  const [value, setValue] = React.useState<DateRange>();
+
+  return (
+    <DatePicker {...args} value={value} onChange={setValue} locale={ptBR} />
+  );
+};
+
+export const Range = Template.bind({});
+
+Range.args = {
+  label: 'Select date',
+  placeholder: 'Select date',
+  type: 'range',
+  closeOnPick: true,
+};
+
+const TemplateDay: Story<DatePickerProps<'day'>> = args => {
+  const [value, setValue] = React.useState<Date>();
+
+  return (
+    <DatePicker {...args} value={value} onChange={setValue} locale={ptBR} />
+  );
+};
+
+export const Day = TemplateDay.bind({});
+
+Day.args = {
+  label: 'Select date',
+  placeholder: 'Select date',
+  type: 'day',
+  closeOnPick: true,
+};

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

@@ -0,0 +1,27 @@
+import {
+  Calendar,
+  DatePicker as DatePickerCore, DatePickerProps, SelectionType
+} from '@tecsinapse/react-core';
+import React, { useCallback, useState } from 'react';
+import { Modal } from './Modal';
+
+export const DatePicker = <T extends SelectionType>({ ...rest }: Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>): JSX.Element => {
+
+  const [ visible, setVisible ] = useState(false)
+  const show = useCallback(() => setVisible(true), [])
+  const close = useCallback(() => setVisible(false), [])
+  
+  return (
+    <DatePickerCore
+      {...rest}
+      CalendarComponent={Calendar}
+      requestShowCalendar={show}
+      requestCloseCalendar={close}
+      renderCalendar={(calendar) => (
+        <Modal animationType='fade' visible={visible} onRequestClose={close}>
+          {calendar}
+        </Modal>
+      )}
+    />
+  );
+};

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

@@ -0,0 +1,26 @@
+import { CalendarProps, PressableSurface, SelectionType } from '@tecsinapse/react-core';
+import * as React from 'react';
+import { Modal as RNModal, ModalProps } from 'react-native';
+import { Backdrop, ModalContent } from './styled';
+
+const Component = <T extends SelectionType>({ onRequestClose, children, ...modalProps }: CalendarProps<T> & ModalProps & { children: JSX.Element }): JSX.Element => {
+  return (
+    <RNModal
+      transparent
+      hardwareAccelerated
+      statusBarTranslucent
+      {...modalProps}
+      onRequestClose={onRequestClose}
+    >
+      <Backdrop onPress={onRequestClose} effect="none">
+        <PressableSurface>
+          <ModalContent>
+            {children}
+          </ModalContent>
+        </PressableSurface>
+      </Backdrop>
+    </RNModal>
+  );
+};
+
+export const Modal = Component;

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

@@ -0,0 +1 @@
+export * from './DatePicker'

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

@@ -0,0 +1,36 @@
+import styled, { css } from "@emotion/native";
+import { hex2rgba, PressableSurface, StyleProps } from "@tecsinapse/react-core";
+import { Platform } from "react-native";
+
+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<Partial<StyleProps>>`
+  background-color: transparent;
+  ${({ theme: { borderRadius } }) => css`
+    ${isWeb
+      ? `
+      border-radius: ${borderRadius.micro};
+    `
+      : `
+      border-top-left-radius: ${borderRadius.deca};
+      border-top-right-radius: ${borderRadius.deca};
+    `}
+  `}
+  overflow: hidden;
+`;

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

@@ -0,0 +1,27 @@
+import { Story } from '@storybook/react';
+import { DateTimePickerProps } from '@tecsinapse/react-core';
+import { ptBR } from 'date-fns/locale';
+import React from 'react';
+import { DateTimePicker } from './DateTimePicker';
+
+export default {
+  title: 'Web/Date Time Picker',
+  component: DateTimePicker,
+};
+
+const Template: Story<DateTimePickerProps> = ({ ...args }) => {
+  const [value, setValue] = React.useState<Date>();
+
+  return (
+    <DateTimePicker
+      label={'Select date and time'}
+      placeholder={'Select date and time'}
+      mode={'datetime'}
+      value={value}
+      onChange={setValue}
+      locale={ptBR}
+    />
+  );
+};
+
+export const Base = Template.bind({});

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

@@ -0,0 +1,26 @@
+import {
+    DateTimePicker as DateTimePickerCore,
+    DateTimePickerProps
+} from '@tecsinapse/react-core';
+import React, { FC, useCallback, useState } from 'react';
+import { Modal } from './Modal';
+
+export const DateTimePicker: FC<DateTimePickerProps> = ({ ...rest }) => {
+
+    const [ visible, setVisible ] = useState(false)
+    const show = useCallback(() => setVisible(true), [])
+    const close = useCallback(() => setVisible(false), [])
+
+    return (
+        <DateTimePickerCore
+            {...rest}
+            requestShowSelector={show}
+            requestCloseSelector={close}
+            renderSelector={(selector) => (
+                <Modal animationType='fade' visible={visible} onRequestClose={close}>
+                    {selector}
+                </Modal>
+            )}
+        />
+    );
+};

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

@@ -0,0 +1,30 @@
+import { DateTimeSelectorProps } from '@tecsinapse/react-core';
+import * as React from 'react';
+import { Modal as RNModal, ModalProps } from 'react-native';
+import { Backdrop, ModalContent } from './styled';
+
+const Component: React.FC<DateTimeSelectorProps & ModalProps> = ({
+  onRequestClose,
+  onChange,
+  children,
+  ...rest
+}) => {
+
+  return (
+    <RNModal
+      transparent
+      hardwareAccelerated
+      statusBarTranslucent
+      {...rest}
+      onRequestClose={onRequestClose}
+    >
+      <Backdrop onPress={onRequestClose} effect="none">
+        <ModalContent>
+          {children}
+        </ModalContent>
+      </Backdrop>
+    </RNModal>
+  );
+};
+
+export const Modal = Component;

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

@@ -0,0 +1 @@
+export * from './DateTimePicker'

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

@@ -0,0 +1,37 @@
+import styled, { css } from "@emotion/native";
+import { DateTimeSelectorProps, PressableSurface, RFValueStr, StyleProps } from "@tecsinapse/react-core";
+import { FC } from "react";
+import { Platform } from "react-native";
+
+const isWeb = Platform.OS === 'web';
+
+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<Partial<StyleProps>>`
+  background-color: transparent;
+  ${({ 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;
+`;

package/src/index.ts

@@ -40,3 +40,5 @@ export { Modal, ModalProps } from './components/atoms/Modal';
 export { TextArea, TextAreaProps } from './components/molecules/TextArea';
 export { Tooltip, ITooltip } from './components/atoms/Tooltip';
 export * from './hooks';
+export { DatePicker } from './components/molecules/DatePicker'
+export { DateTimePicker } from './components/molecules/DateTimePicker'