@tecsinapse/react-web-kit 1.12.8 → 1.12.12

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.12.12](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.11...@tecsinapse/react-web-kit@1.12.12) (2022-01-19)
+
+
+### Bug Fixes
+
+* fix DataGrid pagination buttons ([c9d40cf](https://github.com/tecsinapse/design-system/commit/c9d40cf9a0655338a6d35d42dbc399768d8cf58d))
+
+
+
+
+
+## [1.12.11](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.10...@tecsinapse/react-web-kit@1.12.11) (2022-01-19)
+
+**Note:** Version bump only for package @tecsinapse/react-web-kit
+
+
+
+
+
+## [1.12.10](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.12.9...@tecsinapse/react-web-kit@1.12.10) (2022-01-18)
+
+
+### Bug Fixes
+
+* remove StyledMenuBar zIndex ([2b7941f](https://github.com/tecsinapse/design-system/commit/2b7941fe6aec2fbc91495e909bb448e98f1cd8ac))
+
+
+
+
+
+## [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,3 @@
+import { DatePickerProps, SelectionType } from '@tecsinapse/react-core';
+export declare type WebDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>;
+export declare const DatePicker: <T extends any>({ ...rest }: WebDatePickerProps<T>) => 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;;;;;;;;AAIO,MAAMA,UAAU,GAAG,CAA0B,EAAE,GAAGC;AAAL,CAA1B,KAA8E;AAEtG,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 type WebDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>\n\nexport const DatePicker = <T extends SelectionType>({ ...rest }: WebDatePickerProps<T>): 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 { DatePicker, WebDatePickerProps } from './DatePicker';

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePicker;
+  }
+});
+Object.defineProperty(exports, "WebDatePickerProps", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.WebDatePickerProps;
+  }
+});
+
+var _DatePicker = require("./DatePicker");
+//# 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","sourcesContent":["export { DatePicker, WebDatePickerProps } 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,4 @@
+import { DateTimePickerProps } from '@tecsinapse/react-core';
+import { FC } from 'react';
+export declare type WebDateTimePickerProps = Omit<DateTimePickerProps, 'renderSelector' | 'requestShowSelector' | 'requestCloseSelector'>;
+export declare const DateTimePicker: FC<WebDateTimePickerProps>;

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;;;;;;;;AAKO,MAAMA,cAA0C,GAAG,CAAC,EAAE,GAAGC;AAAL,CAAD,KAAiB;AAEvE,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\n\nexport type WebDateTimePickerProps = Omit<DateTimePickerProps, 'renderSelector' | 'requestShowSelector' | 'requestCloseSelector'>\n\nexport const DateTimePicker: FC<WebDateTimePickerProps> = ({ ...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 { DateTimePicker, WebDateTimePickerProps } from './DateTimePicker';

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "DateTimePicker", {
+  enumerable: true,
+  get: function () {
+    return _DateTimePicker.DateTimePicker;
+  }
+});
+Object.defineProperty(exports, "WebDateTimePickerProps", {
+  enumerable: true,
+  get: function () {
+    return _DateTimePicker.WebDateTimePickerProps;
+  }
+});
+
+var _DateTimePicker = require("./DateTimePicker");
+//# 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","sourcesContent":["export { DateTimePicker, WebDateTimePickerProps } from './DateTimePicker';\n"],"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/components/molecules/Menubar/styled.js

@@ -34,9 +34,6 @@ const StyledIconInput = (0, _styled.default)('div')`
 exports.StyledIconInput = StyledIconInput;
 const StyledMenuBar = (0, _styled.default)('div')`
     position: relative;
-    z-index: ${({
-  theme
-}) => theme.zIndex.header};
     background-color: ${({
   theme
 }) => theme.miscellaneous.surfaceColor};

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/molecules/Menubar/styled.ts"],"names":["StyledIconInput","theme","spacing","centi","StyledMenuBar","zIndex","header","miscellaneous","surfaceColor","deca","kilo","shadow","StyledMenuButton","Button","StyledContainerOpenMenu","borderWidth","pico","borderRadius","mili","mega","StyledInput","Input","StyledInputContainer","StyledSearchResultsContainer","StyledSearchTextContainer"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;AAEO,MAAMA,eAAe,GAAG,qBAAU,KAAV,CAAsC;AACrE,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AACzD,kBAAkB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AACrD,yBAAyB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAC5D,mBAAmB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AACtD,CALO;;AAOA,MAAMC,aAAa,GAAG,qBAAU,KAAV,CAAsC;AACnE;AACA,eAAe,CAAC;AAAEH,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACI,MAAN,CAAaC,MAAO;AAClD,wBAAwB,CAAC;AAAEL,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACM,aAAN,CAAoBC,YAAa;AACxE;AACA;AACA;AACA,eAAe,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAgB,GAAEA,KAAK,CAACC,OAAN,CAAcO,IAAK,IAAGR,KAAK,CAACC,OAAN,CAAcQ,IAAK,EAAE;AAC5E,8BAA8B,CAAC;AAAET,EAAAA;AAAF,CAAD,KACxB,yBAASA,KAAK,CAACM,aAAN,CAAoBI,MAA7B,EAAqC,IAArC,CAA2C;AACjD,CAVO;;AAYA,MAAMC,gBAAgB,GAAG,qBAAaC,cAAb,CAA0C;AAC1E,wBAAwB,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAC3D,0BAA0B,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAC7D,2BAA2B,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAC9D,yBAAyB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAC5D,oBAAoB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcQ,IAAK;AACtD;AACA;AACA;AACA,CATO;;AAWA,MAAMI,uBAAuB,GAAG,qBAAU,KAAV,CAAsC;AAC7E,kBAAkB,CAAC;AAAEb,EAAAA;AAAF,CAAD,KACX,GAAEA,KAAK,CAACc,WAAN,CAAkBC,IAAK,UAAS,yBACjCf,KAAK,CAACM,aAAN,CAAoBI,MADa,EAEjC,IAFiC,CAGjC,EAAE;AACV,wBAAwB,CAAC;AAAEV,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACM,aAAN,CAAoBC,YAAa;AACxE,iCAAiC,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACgB,YAAN,CAAmBC,IAAK;AACxE,kCAAkC,CAAC;AAAEjB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACgB,YAAN,CAAmBC,IAAK;AACzE,8BAA8B,CAAC;AAAEjB,EAAAA;AAAF,CAAD,KACxB,yBAASA,KAAK,CAACM,aAAN,CAAoBI,MAA7B,EAAqC,IAArC,CAA2C;AACjD;AACA;AACA,mBAAmB,CAAC;AAAEV,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcQ,IAAK;AACrD,sBAAsB,CAAC;AAAET,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAciB,IAAK;AACxD;AACA,eAAe,CAAC;AAAElB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACI,MAAN,CAAaC,MAAb,GAAsB,CAAE;AACtD;AACA;AACA,CAnBO;;AAqBA,MAAMc,WAAW,GAAG,qBAAaC,YAAb,CAAyC;AACpE;AACA,CAFO;;AAIA,MAAMC,oBAAoB,GAAG,qBAAU,KAAV,CAAiB;AACrD;AACA;AACA,CAHO;;AAKA,MAAMC,4BAA4B,GAAG,qBAAU,KAAV,CAAiB;AAC7D;AACA;AACA,CAHO;;AAKA,MAAMC,yBAAyB,GAAG,qBAAU,KAAV,CAAsC;AAC/E,qBAAqB,CAAC;AAAEvB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcgB,IAAK;AACvD,CAFO","sourcesContent":["import { default as webStyled } from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { Button } from '../../atoms/Button';\nimport { Input } from '../../atoms/Input';\n\nexport const StyledIconInput = webStyled('div')<Partial<StyleProps>>`\n  padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n  padding-left: ${({ theme }) => theme.spacing.centi};\n  padding-bottom: calc(${({ theme }) => theme.spacing.centi} - 2px);\n  padding-right: ${({ theme }) => theme.spacing.centi};\n`;\n\nexport const StyledMenuBar = webStyled('div')<Partial<StyleProps>>`\n    position: relative;\n    z-index: ${({ theme }) => theme.zIndex.header};\n    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: ${({ theme }) => `${theme.spacing.deca} ${theme.spacing.kilo}`};\n    box-shadow: 0px 2px 8px ${({ theme }) =>\n      hex2rgba(theme.miscellaneous.shadow, 0.05)};\n`;\n\nexport const StyledMenuButton = nativeStyled(Button)<Partial<StyleProps>>`\n    padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-right: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-bottom: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-left: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    margin-right: ${({ theme }) => theme.spacing.kilo};\n    & * {\n      user-select: none;\n    }\n`;\n\nexport const StyledContainerOpenMenu = webStyled('div')<Partial<StyleProps>>`\n    border-top: ${({ theme }) =>\n      `${theme.borderWidth.pico} solid ${hex2rgba(\n        theme.miscellaneous.shadow,\n        0.05\n      )}`};\n    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor}; \n    border-bottom-left-radius: ${({ theme }) => theme.borderRadius.mili}; \n    border-bottom-right-radius: ${({ theme }) => theme.borderRadius.mili};\n    box-shadow: 0px 2px 8px ${({ theme }) =>\n      hex2rgba(theme.miscellaneous.shadow, 0.05)};\n    padding-right: 8vw;\n    padding-left: 8vw;\n    padding-top: ${({ theme }) => theme.spacing.kilo};\n    padding-bottom: ${({ theme }) => theme.spacing.mega};\n    position: absolute;\n    z-index: ${({ theme }) => theme.zIndex.header + 1};\n    width: -webkit-fill-available;\n    width: -moz-available;\n`;\n\nexport const StyledInput = nativeStyled(Input)<Partial<StyleProps>>`\n     width: 100%;\n`;\n\nexport const StyledInputContainer = webStyled('div')`\n    display: flex;\n    flex: 1;\n`;\n\nexport const StyledSearchResultsContainer = webStyled('div')`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const StyledSearchTextContainer = webStyled('div')<Partial<StyleProps>>`\n    margin-bottom: ${({ theme }) => theme.spacing.mili};\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/molecules/Menubar/styled.ts"],"names":["StyledIconInput","theme","spacing","centi","StyledMenuBar","miscellaneous","surfaceColor","deca","kilo","shadow","StyledMenuButton","Button","StyledContainerOpenMenu","borderWidth","pico","borderRadius","mili","mega","zIndex","header","StyledInput","Input","StyledInputContainer","StyledSearchResultsContainer","StyledSearchTextContainer"],"mappings":"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","sourcesContent":["import { default as webStyled } from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { hex2rgba, StyleProps } from '@tecsinapse/react-core';\nimport { Button } from '../../atoms/Button';\nimport { Input } from '../../atoms/Input';\n\nexport const StyledIconInput = webStyled('div')<Partial<StyleProps>>`\n  padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n  padding-left: ${({ theme }) => theme.spacing.centi};\n  padding-bottom: calc(${({ theme }) => theme.spacing.centi} - 2px);\n  padding-right: ${({ theme }) => theme.spacing.centi};\n`;\n\nexport const StyledMenuBar = webStyled('div')<Partial<StyleProps>>`\n    position: relative;\n    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    padding: ${({ theme }) => `${theme.spacing.deca} ${theme.spacing.kilo}`};\n    box-shadow: 0px 2px 8px ${({ theme }) =>\n      hex2rgba(theme.miscellaneous.shadow, 0.05)};\n`;\n\nexport const StyledMenuButton = nativeStyled(Button)<Partial<StyleProps>>`\n    padding-top: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-right: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-bottom: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    padding-left: calc(${({ theme }) => theme.spacing.centi} + 2px);\n    margin-right: ${({ theme }) => theme.spacing.kilo};\n    & * {\n      user-select: none;\n    }\n`;\n\nexport const StyledContainerOpenMenu = webStyled('div')<Partial<StyleProps>>`\n    border-top: ${({ theme }) =>\n      `${theme.borderWidth.pico} solid ${hex2rgba(\n        theme.miscellaneous.shadow,\n        0.05\n      )}`};\n    background-color: ${({ theme }) => theme.miscellaneous.surfaceColor}; \n    border-bottom-left-radius: ${({ theme }) => theme.borderRadius.mili}; \n    border-bottom-right-radius: ${({ theme }) => theme.borderRadius.mili};\n    box-shadow: 0px 2px 8px ${({ theme }) =>\n      hex2rgba(theme.miscellaneous.shadow, 0.05)};\n    padding-right: 8vw;\n    padding-left: 8vw;\n    padding-top: ${({ theme }) => theme.spacing.kilo};\n    padding-bottom: ${({ theme }) => theme.spacing.mega};\n    position: absolute;\n    z-index: ${({ theme }) => theme.zIndex.header + 1};\n    width: -webkit-fill-available;\n    width: -moz-available;\n`;\n\nexport const StyledInput = nativeStyled(Input)<Partial<StyleProps>>`\n     width: 100%;\n`;\n\nexport const StyledInputContainer = webStyled('div')`\n    display: flex;\n    flex: 1;\n`;\n\nexport const StyledSearchResultsContainer = webStyled('div')`\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const StyledSearchTextContainer = webStyled('div')<Partial<StyleProps>>`\n    margin-bottom: ${({ theme }) => theme.spacing.mili};\n`;\n"],"file":"styled.js"}

package/dist/components/organisms/DataGrid/Footer/styled.js

@@ -45,14 +45,16 @@ const SelectContainer = (0, _styled.default)('div')`
 }) => theme.spacing.deca};
 `;
 exports.SelectContainer = SelectContainer;
-const NavigationButton = (0, _native.default)(_Button.Button)`
-    padding: ${({
-  theme
-}) => theme.spacing.centi};
+const NavigationButton = (0, _native.default)(_Button.Button)`    
     border-radius: ${({
   theme
 }) => theme.borderRadius.mili};
+    height: 44px;
     justify-content: center;
+    padding: ${({
+  theme
+}) => theme.spacing.centi};
+    width: 44px;  
 `;
 exports.NavigationButton = NavigationButton;
 const PageButton = (0, _native.default)(NavigationButton)`

package/dist/components/organisms/DataGrid/Footer/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/organisms/DataGrid/Footer/styled.ts"],"names":["TdFooterStyled","Td","theme","spacing","centi","FlexContainer","FooterContainer","FooterContainerStart","FooterContainerEnd","SelectContainer","deca","NavigationButton","Button","borderRadius","mili","PageButton","micro","PagesContainer","HoveredText","font","color","light"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAEO,MAAMA,cAAc,GAAG,qBAAOC,SAAP,CAAgC;AAC9D,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAChD,CAFO;;AAIA,MAAMC,aAAa,GAAG,qBAAO,KAAP,CAAc;AAC3C;AACA;AACA,CAHO;;AAKA,MAAMC,eAAe,GAAG,qBAAOD,aAAP,CAAsB;AACrD;AACA;AACA,CAHO;;AAKA,MAAME,oBAAoB,GAAG,qBAAOF,aAAP,CAAsB;AAC1D;AACA,CAFO;;AAIA,MAAMG,kBAAkB,GAAG,qBAAOH,aAAP,CAAsB;AACxD;AACA,CAFO;;AAIA,MAAMI,eAAe,GAAG,qBAAO,KAAP,CAAmC;AAClE,kBAAkB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACpD,CAFO;;AAIA,MAAMC,gBAAgB,GAAG,qBAAaC,cAAb,CAA0C;AAC1E,eAAe,CAAC;AAAEV,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAClD,qBAAqB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACW,YAAN,CAAmBC,IAAK;AAC5D;AACA,CAJO;;AAOA,MAAMC,UAAU,GAAG,qBAAaJ,gBAAb,CAAoD;AAC9E,qBAAqB,CAAC;AAAET,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACvD,oBAAoB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACtD,qBAAqB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACW,YAAN,CAAmBC,IAAK;AAC5D;AACA,mBAAmB,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAca,KAAM;AACtD,oBAAoB,CAAC;AAAEd,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAca,KAAM;AACvD,CAPO;;AASA,MAAMC,cAAc,GAAG,qBAAO,KAAP,CAAmC;AACjE;AACA;AACA,CAHO;;AAKA,MAAMC,WAAW,GAAG,qBAAO,KAAP,CAAmC;AAC9D;AACA;AACA,aAAa,CAAC;AAAEhB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACiB,IAAN,CAAWC,KAAX,CAAiBC,KAAM;AACnD;AACA,CALO","sourcesContent":["import styled from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { Td } from '../../../atoms/Table';\nimport { Button } from '../../../atoms/Button';\n\nexport const TdFooterStyled = styled(Td)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi} 0 0 0;\n`;\n\nexport const FlexContainer = styled('div')`\n  display: flex;\n  flex-grow: 1;\n`;\n\nexport const FooterContainer = styled(FlexContainer)`\n  justify-content: space-between;\n  align-items: center;\n`;\n\nexport const FooterContainerStart = styled(FlexContainer)`\n  justify-content: flex-start;\n`;\n\nexport const FooterContainerEnd = styled(FlexContainer)`\n  justify-content: flex-end;\n`;\n\nexport const SelectContainer = styled('div')<Partial<StyleProps>>`\n  margin-right: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>`\n    padding: ${({ theme }) => theme.spacing.centi};\n    border-radius: ${({ theme }) => theme.borderRadius.mili};\n    justify-content: center;\n`;\n\n// Se o botão estiver ativo, renderizar outlined, caso contrario o botão é text\nexport const PageButton = nativeStyled(NavigationButton)<Partial<StyleProps>>`\n    padding-right: ${({ theme }) => theme.spacing.deca};\n    padding-left: ${({ theme }) => theme.spacing.deca};\n    border-radius: ${({ theme }) => theme.borderRadius.mili};\n    justify-content: center;\n    margin-left: ${({ theme }) => theme.spacing.micro};\n    margin-right: ${({ theme }) => theme.spacing.micro};\n`;\n\nexport const PagesContainer = styled('div')<Partial<StyleProps>>`\n  margin: 0 20px;\n  display: flex;\n`;\n\nexport const HoveredText = styled('div')<Partial<StyleProps>>`\n  user-select: none;\n  &:hover * {\n    color: ${({ theme }) => theme.font.color.light};\n  }\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../../src/components/organisms/DataGrid/Footer/styled.ts"],"names":["TdFooterStyled","Td","theme","spacing","centi","FlexContainer","FooterContainer","FooterContainerStart","FooterContainerEnd","SelectContainer","deca","NavigationButton","Button","borderRadius","mili","PageButton","micro","PagesContainer","HoveredText","font","color","light"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;;;AAEO,MAAMA,cAAc,GAAG,qBAAOC,SAAP,CAAgC;AAC9D,aAAa,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAChD,CAFO;;AAIA,MAAMC,aAAa,GAAG,qBAAO,KAAP,CAAc;AAC3C;AACA;AACA,CAHO;;AAKA,MAAMC,eAAe,GAAG,qBAAOD,aAAP,CAAsB;AACrD;AACA;AACA,CAHO;;AAKA,MAAME,oBAAoB,GAAG,qBAAOF,aAAP,CAAsB;AAC1D;AACA,CAFO;;AAIA,MAAMG,kBAAkB,GAAG,qBAAOH,aAAP,CAAsB;AACxD;AACA,CAFO;;AAIA,MAAMI,eAAe,GAAG,qBAAO,KAAP,CAAmC;AAClE,kBAAkB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACpD,CAFO;;AAIA,MAAMC,gBAAgB,GAAG,qBAAaC,cAAb,CAA0C;AAC1E,qBAAqB,CAAC;AAAEV,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACW,YAAN,CAAmBC,IAAK;AAC5D;AACA;AACA,eAAe,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,KAAM;AAClD;AACA,CANO;;AASA,MAAMW,UAAU,GAAG,qBAAaJ,gBAAb,CAAoD;AAC9E,qBAAqB,CAAC;AAAET,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACvD,oBAAoB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACtD,qBAAqB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACW,YAAN,CAAmBC,IAAK;AAC5D;AACA,mBAAmB,CAAC;AAAEZ,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAca,KAAM;AACtD,oBAAoB,CAAC;AAAEd,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAca,KAAM;AACvD,CAPO;;AASA,MAAMC,cAAc,GAAG,qBAAO,KAAP,CAAmC;AACjE;AACA;AACA,CAHO;;AAKA,MAAMC,WAAW,GAAG,qBAAO,KAAP,CAAmC;AAC9D;AACA;AACA,aAAa,CAAC;AAAEhB,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACiB,IAAN,CAAWC,KAAX,CAAiBC,KAAM;AACnD;AACA,CALO","sourcesContent":["import styled from '@emotion/styled';\nimport { default as nativeStyled } from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { Td } from '../../../atoms/Table';\nimport { Button } from '../../../atoms/Button';\n\nexport const TdFooterStyled = styled(Td)<Partial<StyleProps>>`\n  padding: ${({ theme }) => theme.spacing.centi} 0 0 0;\n`;\n\nexport const FlexContainer = styled('div')`\n  display: flex;\n  flex-grow: 1;\n`;\n\nexport const FooterContainer = styled(FlexContainer)`\n  justify-content: space-between;\n  align-items: center;\n`;\n\nexport const FooterContainerStart = styled(FlexContainer)`\n  justify-content: flex-start;\n`;\n\nexport const FooterContainerEnd = styled(FlexContainer)`\n  justify-content: flex-end;\n`;\n\nexport const SelectContainer = styled('div')<Partial<StyleProps>>`\n  margin-right: ${({ theme }) => theme.spacing.deca};\n`;\n\nexport const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>`    \n    border-radius: ${({ theme }) => theme.borderRadius.mili};\n    height: 44px;\n    justify-content: center;\n    padding: ${({ theme }) => theme.spacing.centi};\n    width: 44px;  \n`;\n\n// Se o botão estiver ativo, renderizar outlined, caso contrario o botão é text\nexport const PageButton = nativeStyled(NavigationButton)<Partial<StyleProps>>`\n    padding-right: ${({ theme }) => theme.spacing.deca};\n    padding-left: ${({ theme }) => theme.spacing.deca};\n    border-radius: ${({ theme }) => theme.borderRadius.mili};\n    justify-content: center;\n    margin-left: ${({ theme }) => theme.spacing.micro};\n    margin-right: ${({ theme }) => theme.spacing.micro};\n`;\n\nexport const PagesContainer = styled('div')<Partial<StyleProps>>`\n  margin: 0 20px;\n  display: flex;\n`;\n\nexport const HoveredText = styled('div')<Partial<StyleProps>>`\n  user-select: none;\n  &:hover * {\n    color: ${({ theme }) => theme.font.color.light};\n  }\n`;\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, WebDatePickerProps } from './components/molecules/DatePicker';
+export { DateTimePicker, WebDateTimePickerProps } from './components/molecules/DateTimePicker';

package/dist/index.js

@@ -41,7 +41,11 @@ var _exportNames = {
   TextArea: true,
   TextAreaProps: true,
   Tooltip: true,
-  ITooltip: true
+  ITooltip: true,
+  DatePicker: true,
+  WebDatePickerProps: true,
+  DateTimePicker: true,
+  WebDateTimePickerProps: true
 };
 Object.defineProperty(exports, "Badge", {
   enumerable: true,
@@ -271,6 +275,30 @@ Object.defineProperty(exports, "ITooltip", {
     return _Tooltip.ITooltip;
   }
 });
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.DatePicker;
+  }
+});
+Object.defineProperty(exports, "WebDatePickerProps", {
+  enumerable: true,
+  get: function () {
+    return _DatePicker.WebDatePickerProps;
+  }
+});
+Object.defineProperty(exports, "DateTimePicker", {
+  enumerable: true,
+  get: function () {
+    return _DateTimePicker.DateTimePicker;
+  }
+});
+Object.defineProperty(exports, "WebDateTimePickerProps", {
+  enumerable: true,
+  get: function () {
+    return _DateTimePicker.WebDateTimePickerProps;
+  }
+});
 
 var _reactCore = require("@tecsinapse/react-core");
 
@@ -332,6 +360,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, WebDatePickerProps } from './components/molecules/DatePicker'\nexport { DateTimePicker, WebDateTimePickerProps } 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.12",
   "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.10",
     "@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": "f21c412d30fbdc01f41a44295fc1b408601f1149"
 }

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,29 @@
+import {
+  Calendar,
+  DatePicker as DatePickerCore, DatePickerProps, SelectionType
+} from '@tecsinapse/react-core';
+import React, { useCallback, useState } from 'react';
+import { Modal } from './Modal';
+
+export type WebDatePickerProps<T extends SelectionType> = Omit<DatePickerProps<T>, 'CalendarComponent' | 'renderCalendar' | 'requestCloseCalendar' | 'requestShowCalendar'>
+
+export const DatePicker = <T extends SelectionType>({ ...rest }: WebDatePickerProps<T>): 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 { DatePicker, WebDatePickerProps } 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,29 @@
+import {
+    DateTimePicker as DateTimePickerCore,
+    DateTimePickerProps
+} from '@tecsinapse/react-core';
+import React, { FC, useCallback, useState } from 'react';
+import { Modal } from './Modal';
+
+
+export type WebDateTimePickerProps = Omit<DateTimePickerProps, 'renderSelector' | 'requestShowSelector' | 'requestCloseSelector'>
+
+export const DateTimePicker: FC<WebDateTimePickerProps> = ({ ...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 { DateTimePicker, WebDateTimePickerProps } 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/components/molecules/Menubar/styled.ts

@@ -13,7 +13,6 @@ export const StyledIconInput = webStyled('div')<Partial<StyleProps>>`
 
 export const StyledMenuBar = webStyled('div')<Partial<StyleProps>>`
     position: relative;
-    z-index: ${({ theme }) => theme.zIndex.header};
     background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};
     display: flex;
     flex-direction: row;

package/src/components/organisms/DataGrid/Footer/styled.ts

@@ -30,10 +30,12 @@ export const SelectContainer = styled('div')<Partial<StyleProps>>`
   margin-right: ${({ theme }) => theme.spacing.deca};
 `;
 
-export const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>`
-    padding: ${({ theme }) => theme.spacing.centi};
+export const NavigationButton = nativeStyled(Button)<Partial<StyleProps>>`    
     border-radius: ${({ theme }) => theme.borderRadius.mili};
+    height: 44px;
     justify-content: center;
+    padding: ${({ theme }) => theme.spacing.centi};
+    width: 44px;  
 `;
 
 // Se o botão estiver ativo, renderizar outlined, caso contrario o botão é text

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, WebDatePickerProps } from './components/molecules/DatePicker'
+export { DateTimePicker, WebDateTimePickerProps } from './components/molecules/DateTimePicker'