@tecsinapse/react-native-kit 1.12.4 → 1.12.8

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.12.8](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.7...@tecsinapse/react-native-kit@1.12.8) (2022-01-05)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+## [1.12.7](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.6...@tecsinapse/react-native-kit@1.12.7) (2022-01-04)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+## [1.12.6](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.5...@tecsinapse/react-native-kit@1.12.6) (2021-12-29)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
+## [1.12.5](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.4...@tecsinapse/react-native-kit@1.12.5) (2021-12-29)
+
+**Note:** Version bump only for package @tecsinapse/react-native-kit
+
+
+
+
+
 ## [1.12.4](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-native-kit@1.12.3...@tecsinapse/react-native-kit@1.12.4) (2021-12-23)
 
 **Note:** Version bump only for package @tecsinapse/react-native-kit

package/dist/components/atoms/BottomNavigator/styled.js

@@ -7,6 +7,8 @@ exports.CustomTabContent = exports.TabContent = exports.TabContainer = exports.S
 
 var _native = _interopRequireDefault(require("@emotion/native"));
 
+var _reactCore = require("@tecsinapse/react-core");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledView = _native.default.View`
@@ -33,7 +35,7 @@ const TabContainer = _native.default.Pressable`
 }) => theme.spacing.deca};
   border-top-width: ${({
   selected
-}) => selected ? '2px' : 0};
+}) => selected ? (0, _reactCore.RFValueStr)('2px') : 0};
   border-color: ${({
   theme
 }) => theme.color.primary.medium};
@@ -45,7 +47,7 @@ const TabContent = _native.default.View`
   aspect-ratio: 1;
   justify-content: center;
   align-items: center;
-  min-height: 48px;
+  min-height: ${(0, _reactCore.RFValueStr)('48px')};
   background-color: ${({
   theme
 }) => theme.color.primary.xlight};

package/dist/components/atoms/BottomNavigator/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/BottomNavigator/styled.ts"],"names":["StyledView","styled","View","theme","spacing","deca","kilo","miscellaneous","surfaceColor","TabContainer","Pressable","mili","selected","color","primary","medium","TabContent","xlight","borderRadius","CustomTabContent"],"mappings":";;;;;;;AAAA;;;;AAIO,MAAMA,UAAU,GAAGC,gBAAOC,IAAsC;AACvE;AACA;AACA,wBAAwB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AAC1D,oBAAoB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcE,IAAK;AACtD,sBAAsB,CAAC;AAAEH,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACI,aAAN,CAAoBC,YAAa;AACtE,CANO;;AAQA,MAAMC,YAAY,GAAGR,gBAAOS,SAEjC;AACF;AACA,uBAAuB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACzD,iBAAiB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACnD,sBAAsB,CAAC;AAAEO,EAAAA;AAAF,CAAD,KAAmBA,QAAQ,GAAG,KAAH,GAAW,CAAG;AAC/D,kBAAkB,CAAC;AAAET,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACU,KAAN,CAAYC,OAAZ,CAAoBC,MAAO;AAC5D;AACA;AACA,CAVO;;AAYA,MAAMC,UAAU,GAAGf,gBAAOC,IAAsC;AACvE;AACA;AACA;AACA;AACA,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACU,KAAN,CAAYC,OAAZ,CAAoBG,MAAO;AAChE,mBAAmB,CAAC;AAAEd,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACe,YAAN,CAAmB,MAAnB,CAA2B;AAC7D,CAPO;;AASA,MAAMC,gBAAgB,GAAGlB,gBAAOC,IAAsC,EAAtE","sourcesContent":["import styled from '@emotion/native';\nimport { StyleProps } from '@tecsinapse/react-core';\nimport { PressableProps, ViewProps } from 'react-native';\n\nexport const StyledView = styled.View<ViewProps & Partial<StyleProps>>`\n  flex-direction: row;\n  justify-content: space-between;\n  padding-horizontal: ${({ theme }) => theme.spacing.deca};\n  padding-bottom: ${({ theme }) => theme.spacing.kilo};\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n`;\n\nexport const TabContainer = styled.Pressable<\n  { selected: boolean } & PressableProps & Partial<StyleProps>\n>`\n  flex: 1;\n  margin-horizontal: ${({ theme }) => theme.spacing.mili};\n  padding-top: ${({ theme }) => theme.spacing.deca};\n  border-top-width: ${({ selected }) => (selected ? '2px' : 0)};\n  border-color: ${({ theme }) => theme.color.primary.medium};\n  align-items: center;\n  justify-content: flex-end;\n`;\n\nexport const TabContent = styled.View<ViewProps & Partial<StyleProps>>`\n  aspect-ratio: 1;\n  justify-content: center;\n  align-items: center;\n  min-height: 48px;\n  background-color: ${({ theme }) => theme.color.primary.xlight};\n  border-radius: ${({ theme }) => theme.borderRadius['mili']};\n`;\n\nexport const CustomTabContent = styled.View<ViewProps & Partial<StyleProps>>``;\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/BottomNavigator/styled.ts"],"names":["StyledView","styled","View","theme","spacing","deca","kilo","miscellaneous","surfaceColor","TabContainer","Pressable","mili","selected","color","primary","medium","TabContent","xlight","borderRadius","CustomTabContent"],"mappings":";;;;;;;AAAA;;AACA;;;;AAGO,MAAMA,UAAU,GAAGC,gBAAOC,IAAsC;AACvE;AACA;AACA,wBAAwB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AAC1D,oBAAoB,CAAC;AAAEF,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcE,IAAK;AACtD,sBAAsB,CAAC;AAAEH,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACI,aAAN,CAAoBC,YAAa;AACtE,CANO;;AAQA,MAAMC,YAAY,GAAGR,gBAAOS,SAEjC;AACF;AACA,uBAAuB,CAAC;AAAEP,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcO,IAAK;AACzD,iBAAiB,CAAC;AAAER,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,OAAN,CAAcC,IAAK;AACnD,sBAAsB,CAAC;AAAEO,EAAAA;AAAF,CAAD,KAAmBA,QAAQ,GAAG,2BAAW,KAAX,CAAH,GAAuB,CAAG;AAC3E,kBAAkB,CAAC;AAAET,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACU,KAAN,CAAYC,OAAZ,CAAoBC,MAAO;AAC5D;AACA;AACA,CAVO;;AAYA,MAAMC,UAAU,GAAGf,gBAAOC,IAAsC;AACvE;AACA;AACA;AACA,gBAAgB,2BAAW,MAAX,CAAmB;AACnC,sBAAsB,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACU,KAAN,CAAYC,OAAZ,CAAoBG,MAAO;AAChE,mBAAmB,CAAC;AAAEd,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACe,YAAN,CAAmB,MAAnB,CAA2B;AAC7D,CAPO;;AASA,MAAMC,gBAAgB,GAAGlB,gBAAOC,IAAsC,EAAtE","sourcesContent":["import styled from '@emotion/native';\nimport { RFValueStr, StyleProps } from '@tecsinapse/react-core';\nimport { PressableProps, ViewProps } from 'react-native';\n\nexport const StyledView = styled.View<ViewProps & Partial<StyleProps>>`\n  flex-direction: row;\n  justify-content: space-between;\n  padding-horizontal: ${({ theme }) => theme.spacing.deca};\n  padding-bottom: ${({ theme }) => theme.spacing.kilo};\n  background-color: ${({ theme }) => theme.miscellaneous.surfaceColor};\n`;\n\nexport const TabContainer = styled.Pressable<\n  { selected: boolean } & PressableProps & Partial<StyleProps>\n>`\n  flex: 1;\n  margin-horizontal: ${({ theme }) => theme.spacing.mili};\n  padding-top: ${({ theme }) => theme.spacing.deca};\n  border-top-width: ${({ selected }) => (selected ? RFValueStr('2px') : 0)};\n  border-color: ${({ theme }) => theme.color.primary.medium};\n  align-items: center;\n  justify-content: flex-end;\n`;\n\nexport const TabContent = styled.View<ViewProps & Partial<StyleProps>>`\n  aspect-ratio: 1;\n  justify-content: center;\n  align-items: center;\n  min-height: ${RFValueStr('48px')};\n  background-color: ${({ theme }) => theme.color.primary.xlight};\n  border-radius: ${({ theme }) => theme.borderRadius['mili']};\n`;\n\nexport const CustomTabContent = styled.View<ViewProps & Partial<StyleProps>>``;\n"],"file":"styled.js"}

package/dist/components/atoms/Input/styled.js

@@ -14,7 +14,7 @@ var _styled = require("../Text/styled");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledInputContainer = (0, _native.default)(_reactCore.InputContainer)`
-  min-height: 50px;
+  min-height: ${(0, _reactCore.RFValueStr)('50px')};
 `;
 exports.StyledInputContainer = StyledInputContainer;
 const StyledNativeInputBase = (0, _native.default)(_reactCore.InputElement)`

package/dist/components/atoms/Input/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Input/styled.ts"],"names":["StyledInputContainer","InputContainer","StyledNativeInputBase","InputElement","theme","typography","h5","lineHeight","StyledNativeInput","fontStyles"],"mappings":";;;;;;;AAAA;;AACA;;AAKA;;;;AAGO,MAAMA,oBAAoB,GAAG,qBAAOC,yBAAP,CAA4C;AAChF;AACA,CAFO;;AAIP,MAAMC,qBAAqB,GAAG,qBAAOC,uBAAP,CAE5B;AACF,YAAY,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,UAAN,CAAiBC,EAAjB,CAAoBC,UAAW;AAC1D;AACA;AACA,CANA;AAQO,MAAMC,iBAAiB,GAAG,qBAAON,qBAAP,EAE/BO,kBAF+B,CAA1B","sourcesContent":["import styled from '@emotion/native';\nimport {\n  InputContainer,\n  InputElement,\n  StyleProps,\n} from '@tecsinapse/react-core';\nimport { Font, fontStyles } from '../Text/styled';\nimport { InputNativeProps } from './Input';\n\nexport const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`\n  min-height: 50px;\n`;\n\nconst StyledNativeInputBase = styled(InputElement)<\n  Partial<InputNativeProps> & Partial<StyleProps>\n>`\n  height: ${({ theme }) => theme.typography.h5.lineHeight};\n  width: 100%;\n  padding: 0;\n`;\n\nexport const StyledNativeInput = styled(StyledNativeInputBase)<\n  Font & Partial<InputNativeProps> & Partial<StyleProps>\n>(fontStyles);\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Input/styled.ts"],"names":["StyledInputContainer","InputContainer","StyledNativeInputBase","InputElement","theme","typography","h5","lineHeight","StyledNativeInput","fontStyles"],"mappings":";;;;;;;AAAA;;AACA;;AAMA;;;;AAGO,MAAMA,oBAAoB,GAAG,qBAAOC,yBAAP,CAA4C;AAChF,gBAAgB,2BAAW,MAAX,CAAmB;AACnC,CAFO;;AAIP,MAAMC,qBAAqB,GAAG,qBAAOC,uBAAP,CAE5B;AACF,YAAY,CAAC;AAAEC,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,UAAN,CAAiBC,EAAjB,CAAoBC,UAAW;AAC1D;AACA;AACA,CANA;AAQO,MAAMC,iBAAiB,GAAG,qBAAON,qBAAP,EAE/BO,kBAF+B,CAA1B","sourcesContent":["import styled from '@emotion/native';\nimport {\n  InputContainer,\n  InputElement,\n  RFValueStr,\n  StyleProps\n} from '@tecsinapse/react-core';\nimport { Font, fontStyles } from '../Text/styled';\nimport { InputNativeProps } from './Input';\n\nexport const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`\n  min-height: ${RFValueStr('50px')};\n`;\n\nconst StyledNativeInputBase = styled(InputElement)<\n  Partial<InputNativeProps> & Partial<StyleProps>\n>`\n  height: ${({ theme }) => theme.typography.h5.lineHeight};\n  width: 100%;\n  padding: 0;\n`;\n\nexport const StyledNativeInput = styled(StyledNativeInputBase)<\n  Font & Partial<InputNativeProps> & Partial<StyleProps>\n>(fontStyles);\n"],"file":"styled.js"}

package/dist/components/atoms/Modal/ModalGroupManager.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { ModalProps } from 'react-native';
+export declare const modalLifecycle: import("./ModalLifecycleHandler").ModalLifecycleHandler;
+export declare const ModalGroupManager: FC<ModalProps>;

package/dist/components/atoms/Modal/ModalGroupManager.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalGroupManager = exports.modalLifecycle = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _ModalLifecycleHandler = require("./ModalLifecycleHandler");
+
+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 modalLifecycle = (0, _ModalLifecycleHandler.createModalLifecycleHandler)();
+exports.modalLifecycle = modalLifecycle;
+
+const ModalGroupManager = ({
+  children,
+  ...others
+}) => {
+  modalLifecycle.attach((0, _react.useState)([]));
+
+  const _render = modalLifecycle.render();
+
+  const hasModals = _render.length > 0;
+  return _react.default.createElement(_react.default.Fragment, null, children, _react.default.createElement(_reactNative.Modal, _extends({
+    transparent: true,
+    statusBarTranslucent: true,
+    animationType: "none",
+    visible: hasModals
+  }, others), _render));
+};
+
+exports.ModalGroupManager = ModalGroupManager;
+//# sourceMappingURL=ModalGroupManager.js.map

package/dist/components/atoms/Modal/ModalGroupManager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Modal/ModalGroupManager.tsx"],"names":["modalLifecycle","ModalGroupManager","children","others","attach","_render","render","hasModals","length"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAGO,MAAMA,cAAc,GAAG,yDAAvB;;;AAQA,MAAMC,iBAAiC,GAAG,CAAC;AAAEC,EAAAA,QAAF;AAAY,KAAGC;AAAf,CAAD,KAA6B;AAE1EH,EAAAA,cAAc,CAACI,MAAf,CAAsB,qBAAqC,EAArC,CAAtB;;AACA,QAAMC,OAAO,GAAGL,cAAc,CAACM,MAAf,EAAhB;;AACA,QAAMC,SAAS,GAAGF,OAAO,CAACG,MAAR,GAAiB,CAAnC;AAEA,SACI,4DACKN,QADL,EAEI,6BAAC,kBAAD;AAAS,IAAA,WAAW,MAApB;AAAqB,IAAA,oBAAoB,MAAzC;AAA0C,IAAA,aAAa,EAAC,MAAxD;AAA+D,IAAA,OAAO,EAAEK;AAAxE,KAAuFJ,MAAvF,GACKE,OADL,CAFJ,CADJ;AAQH,CAdM","sourcesContent":["import React, { FC, ReactElement, useState } from 'react';\nimport { Modal as RNModal, ModalProps } from 'react-native';\nimport { createModalLifecycleHandler } from './ModalLifecycleHandler';\nimport { IBaseModal } from './ui/types';\n\nexport const modalLifecycle = createModalLifecycleHandler()\n\n/**\n * It's responsable for rendering all the modal components.\n * \n * @param param0 \n * @returns \n */\nexport const ModalGroupManager: FC<ModalProps> = ({ children, ...others }) => {\n\n    modalLifecycle.attach(useState<ReactElement<IBaseModal>[]>([]))\n    const _render = modalLifecycle.render()\n    const hasModals = _render.length > 0\n    \n    return (\n        <>\n            {children}\n            <RNModal transparent statusBarTranslucent animationType='none' visible={hasModals} {...others}>\n                {_render}\n            </RNModal>\n        </>\n    )\n}\n"],"file":"ModalGroupManager.js"}

package/dist/components/atoms/Modal/ModalLifecycleHandler.d.ts

@@ -0,0 +1,23 @@
+import { Dispatch, ReactElement } from "react";
+import { IBaseModal } from "./ui/types";
+interface ModalNode {
+    id: string;
+    visible?: boolean;
+    lastVisualization?: Date;
+    modal: () => ReactElement<IBaseModal>;
+}
+export declare class ModalLifecycleHandler {
+    nodeGroup: Map<string, ModalNode>;
+    state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>] | undefined;
+    constructor();
+    attach: (state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]) => void;
+    update: () => void;
+    render: () => ReactElement<IBaseModal>[];
+    sync: (id: string, modal: () => ReactElement<IBaseModal>) => void;
+    destroy: (id: string) => void;
+    private remove;
+    show: (id: string) => void;
+    close: (id: string) => void;
+}
+export declare const createModalLifecycleHandler: () => ModalLifecycleHandler;
+export {};

package/dist/components/atoms/Modal/ModalLifecycleHandler.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createModalLifecycleHandler = exports.ModalLifecycleHandler = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+class ModalLifecycleHandler {
+  constructor() {
+    _defineProperty(this, "attach", state => {
+      this.state = state;
+    });
+
+    _defineProperty(this, "update", () => {
+      const nodes = Array.from(this.nodeGroup.values()).filter(node => node.visible || !!node.lastVisualization).sort((nodeA, nodeB) => {
+        var _nodeA$lastVisualizat, _nodeB$lastVisualizat;
+
+        return (((_nodeA$lastVisualizat = nodeA.lastVisualization) === null || _nodeA$lastVisualizat === void 0 ? void 0 : _nodeA$lastVisualizat.getTime()) || 0) - (((_nodeB$lastVisualizat = nodeB.lastVisualization) === null || _nodeB$lastVisualizat === void 0 ? void 0 : _nodeB$lastVisualizat.getTime()) || 0);
+      }).map((node, index, filteredNodes) => {
+        let modalElement = node.modal();
+        let {
+          props
+        } = modalElement;
+        return _react.default.cloneElement(modalElement, { ...props,
+          key: node.id,
+          visible: node.visible,
+          isLastShown: filteredNodes.length - 1 === index,
+          close: () => this.close(node.id),
+          onClose: () => {
+            var _props$onClose;
+
+            this.remove(node.id);
+            (_props$onClose = props.onClose) === null || _props$onClose === void 0 ? void 0 : _props$onClose.call(props);
+          }
+        });
+      });
+      const [, updateState] = this.state || [];
+      updateState === null || updateState === void 0 ? void 0 : updateState(nodes);
+    });
+
+    _defineProperty(this, "render", () => {
+      const [modals] = this.state || [];
+      return modals || [];
+    });
+
+    _defineProperty(this, "sync", (id, modal) => {
+      if (this.nodeGroup.has(id)) {
+        const savedNode = this.nodeGroup.get(id);
+        savedNode && this.nodeGroup.set(id, { ...savedNode,
+          modal
+        });
+        return;
+      }
+
+      this.nodeGroup.set(id, {
+        id,
+        modal
+      });
+    });
+
+    _defineProperty(this, "destroy", id => {
+      this.nodeGroup.delete(id);
+      this.update();
+    });
+
+    _defineProperty(this, "remove", id => {
+      const savedNode = this.nodeGroup.get(id);
+      savedNode && this.nodeGroup.set(id, { ...savedNode,
+        lastVisualization: undefined
+      });
+      this.update();
+    });
+
+    _defineProperty(this, "show", id => {
+      const savedNode = this.nodeGroup.get(id);
+      savedNode && this.nodeGroup.set(id, { ...savedNode,
+        visible: true,
+        lastVisualization: new Date()
+      });
+      this.update();
+    });
+
+    _defineProperty(this, "close", id => {
+      const savedNode = this.nodeGroup.get(id);
+      savedNode && this.nodeGroup.set(id, { ...savedNode,
+        visible: false
+      });
+      this.update();
+    });
+
+    this.nodeGroup = new Map();
+    this.state = undefined;
+  }
+
+}
+
+exports.ModalLifecycleHandler = ModalLifecycleHandler;
+
+const createModalLifecycleHandler = () => {
+  return new ModalLifecycleHandler();
+};
+
+exports.createModalLifecycleHandler = createModalLifecycleHandler;
+//# sourceMappingURL=ModalLifecycleHandler.js.map

package/dist/components/atoms/Modal/ModalLifecycleHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Modal/ModalLifecycleHandler.ts"],"names":["ModalLifecycleHandler","constructor","state","nodes","Array","from","nodeGroup","values","filter","node","visible","lastVisualization","sort","nodeA","nodeB","getTime","map","index","filteredNodes","modalElement","modal","props","React","cloneElement","key","id","isLastShown","length","close","onClose","remove","updateState","modals","has","savedNode","get","set","delete","update","undefined","Date","Map","createModalLifecycleHandler"],"mappings":"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","sourcesContent":["import React, { Dispatch, ReactElement } from \"react\"\nimport { IBaseModal } from \"./ui/types\"\n\n/**\n * It Represents a node (usually a modal component) in the modal's lifecycle handler.\n */\ninterface ModalNode {\n    id: string\n    visible?: boolean\n    lastVisualization?: Date\n    modal: () => ReactElement<IBaseModal>\n}\n\n/**\n * Manage all modal's lifecycle.\n */\nexport class ModalLifecycleHandler {\n    \n    nodeGroup: Map<string, ModalNode>\n    state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>] | undefined\n\n    constructor() {\n        this.nodeGroup = new Map()\n        this.state = undefined\n    }\n\n    /**\n     * Holds the ModalGroupManager state.\n     * \n     * @param state \n     */\n    public attach = (state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]) => {\n        this.state = state\n    }\n\n    /**\n     * Updates all the modal components.\n     */\n    public update = () => {\n        const nodes = Array.from(this.nodeGroup.values())\n            .filter(node => node.visible || !!node.lastVisualization)\n            .sort((nodeA, nodeB) => (nodeA.lastVisualization?.getTime() || 0) - (nodeB.lastVisualization?.getTime() || 0))\n            .map((node, index, filteredNodes) => {\n                let modalElement = node.modal()\n                let { props } = modalElement\n                return React.cloneElement(modalElement, {\n                    ...props,\n                    key: node.id,\n                    visible: node.visible,\n                    isLastShown: filteredNodes.length - 1 === index,\n                    close: () => this.close(node.id),\n                    onClose: () => {\n                        this.remove(node.id)\n                        props.onClose?.()\n                    }\n                })\n            })\n            \n        const [, updateState ] = this.state || []\n        updateState?.(nodes)\n    }\n\n    /**\n     * Renders all selected modals.\n     * \n     * @returns \n     */\n    public render = (): ReactElement<IBaseModal>[] => {\n        const [ modals ] = this.state || []\n        return modals || []\n    }\n\n    /**\n     * Tells to the lifecycle handler that a modal component needs to be handled.\n     * \n     * @param id \n     * @param modal \n     * @returns \n     */\n    public sync = (id: string, modal: () => ReactElement<IBaseModal>) => {\n        if (this.nodeGroup.has(id)) {\n            const savedNode = this.nodeGroup.get(id)\n            savedNode && this.nodeGroup.set(id, { ...savedNode, modal })\n            return\n        }\n        this.nodeGroup.set(id, { id, modal })\n    }\n\n    /**\n     * Destroy a modal from the lifecycle handler.\n     * \n     * @param id \n     */\n    public destroy = (id: string) => {\n        this.nodeGroup.delete(id)\n        this.update()\n    }\n\n    /**\n     * Removes a modal from the rendering stack. It tells to the lifecycle handler that a modal \n     * component is no longer used by the application.\n     * \n     * @param id \n     */\n    private remove = (id: string) => {\n        const savedNode = this.nodeGroup.get(id)\n        savedNode && this.nodeGroup.set(id, { ...savedNode, lastVisualization: undefined })\n        this.update()\n    }\n\n    /**\n     * Makes a modal appears.\n     * \n     * @param id \n     */\n    public show = (id: string) => {\n        const savedNode = this.nodeGroup.get(id)\n        savedNode && this.nodeGroup.set(id, { ...savedNode, visible: true, lastVisualization: new Date() })\n        this.update()\n    }\n\n    /**\n     * Makes a modal disappears.\n     * \n     * @param id \n     */\n    public close = (id: string) => {\n        const savedNode = this.nodeGroup.get(id)\n        savedNode && this.nodeGroup.set(id, { ...savedNode, visible: false })\n        this.update()\n    }\n}\n\n/**\n * Creates a new ModalLifecycleHandlere instance.\n * \n * @returns \n */\nexport const createModalLifecycleHandler = () => {\n    return new ModalLifecycleHandler()\n}\n"],"file":"ModalLifecycleHandler.js"}

package/dist/components/atoms/Modal/index.d.ts

@@ -0,0 +1,5 @@
+export * from './ModalGroupManager';
+export * from './ModalLifecycleHandler';
+export * from './ui/BaseModalView';
+export * from './ui/types';
+export * from './useModalManager';

package/dist/components/atoms/Modal/index.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _ModalGroupManager = require("./ModalGroupManager");
+
+Object.keys(_ModalGroupManager).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ModalGroupManager[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ModalGroupManager[key];
+    }
+  });
+});
+
+var _ModalLifecycleHandler = require("./ModalLifecycleHandler");
+
+Object.keys(_ModalLifecycleHandler).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ModalLifecycleHandler[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ModalLifecycleHandler[key];
+    }
+  });
+});
+
+var _BaseModalView = require("./ui/BaseModalView");
+
+Object.keys(_BaseModalView).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _BaseModalView[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _BaseModalView[key];
+    }
+  });
+});
+
+var _types = require("./ui/types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+
+var _useModalManager = require("./useModalManager");
+
+Object.keys(_useModalManager).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useModalManager[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useModalManager[key];
+    }
+  });
+});
+//# sourceMappingURL=index.js.map

package/dist/components/atoms/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Modal/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './ModalGroupManager'\nexport * from './ModalLifecycleHandler'\nexport * from './ui/BaseModalView'\nexport * from './ui/types'\nexport * from './useModalManager'"],"file":"index.js"}

package/dist/components/atoms/Modal/ui/BaseModalView.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { IBaseModal } from "./types";
+export declare const ModalView: FC<IBaseModal>;

package/dist/components/atoms/Modal/ui/BaseModalView.js

@@ -0,0 +1,140 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModalView = void 0;
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactNative = require("react-native");
+
+var _reactNativeSafeAreaContext = require("react-native-safe-area-context");
+
+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; }
+
+const BACKDROP_ALPHA = .65;
+const INTERPOLATION_STEPS = 10;
+const INTERPOLATION_DURATION = 195;
+const OPACITY_DURATION = 25;
+
+const ModalView = ({
+  children,
+  visible,
+  BoxComponent = _reactCore.BoxContent,
+  frozen,
+  isLastShown,
+  close,
+  onClose
+}) => {
+  const {
+    bottom
+  } = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
+  const [ready, setReady] = (0, _react.useState)(false);
+  const [keyboardOpened, setKeyboardOpened] = (0, _react.useState)(false);
+  const [boxHeight, setBoxHeight] = (0, _react.useState)(0);
+  const backgroundCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const translationCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const opacityCarrier = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
+  const offset = isLastShown && keyboardOpened ? 0 : bottom;
+  const show = (0, _react.useCallback)(() => {
+    _reactNative.Animated.sequence([_reactNative.Animated.timing(backgroundCarrier, {
+      toValue: INTERPOLATION_STEPS,
+      duration: INTERPOLATION_DURATION,
+      easing: _reactNative.Easing.out(_reactNative.Easing.circle),
+      useNativeDriver: false
+    }), _reactNative.Animated.timing(opacityCarrier, {
+      toValue: 1,
+      duration: OPACITY_DURATION,
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(translationCarrier, {
+      toValue: 0,
+      duration: INTERPOLATION_DURATION,
+      easing: _reactNative.Easing.out(_reactNative.Easing.circle),
+      useNativeDriver: true
+    })]).start();
+  }, []);
+  const hide = (0, _react.useCallback)(to => {
+    _reactNative.Animated.sequence([_reactNative.Animated.parallel([_reactNative.Animated.timing(translationCarrier, {
+      toValue: to,
+      duration: INTERPOLATION_DURATION,
+      easing: _reactNative.Easing.out(_reactNative.Easing.circle),
+      useNativeDriver: true
+    }), _reactNative.Animated.timing(opacityCarrier, {
+      toValue: 0,
+      duration: INTERPOLATION_DURATION,
+      useNativeDriver: true
+    })]), _reactNative.Animated.timing(backgroundCarrier, {
+      toValue: 0,
+      duration: INTERPOLATION_DURATION,
+      easing: _reactNative.Easing.out(_reactNative.Easing.circle),
+      useNativeDriver: false
+    })]).start(onClose);
+  }, [onClose]);
+  const backgroundInterpolation = backgroundCarrier.interpolate({
+    inputRange: [0, INTERPOLATION_STEPS],
+    outputRange: ['rgba(0, 0, 0, 0)', `rgba(0, 0, 0, ${BACKDROP_ALPHA})`]
+  });
+  const handleBoxLayoutChanges = (0, _react.useCallback)(lce => {
+    let boxHeightEvent = lce.nativeEvent.layout.height;
+    setBoxHeight(boxHeightEvent);
+
+    if (visible && !ready) {
+      translationCarrier.setValue(boxHeightEvent);
+      setReady(true);
+    }
+  }, [show, ready, visible, setReady]);
+  (0, _react.useEffect)(() => {
+    if (visible && ready) requestAnimationFrame(() => show());
+
+    if (!visible && !ready) {
+      _reactNative.Keyboard.dismiss();
+
+      requestAnimationFrame(() => hide(boxHeight));
+    }
+
+    if (!visible && ready) setReady(false);
+  }, [ready, visible]);
+  (0, _react.useEffect)(() => {
+    const showEvent = _reactNative.Keyboard.addListener('keyboardDidShow', () => setKeyboardOpened(true));
+
+    const hideEvent = _reactNative.Keyboard.addListener('keyboardDidHide', () => setKeyboardOpened(false));
+
+    return () => {
+      showEvent.remove();
+      hideEvent.remove();
+    };
+  }, []);
+  return _react.default.createElement(_styled.StyledPressableBackDrop, {
+    onPress: !frozen ? close : undefined
+  }, _react.default.createElement(_styled.BackDropView, {
+    style: {
+      backgroundColor: backgroundInterpolation
+    }
+  }, _react.default.createElement(_reactNative.KeyboardAvoidingView, {
+    enabled: isLastShown,
+    behavior: "padding"
+  }, _react.default.createElement(_reactNative.Animated.View, {
+    style: {
+      opacity: opacityCarrier,
+      transform: [{
+        translateY: translationCarrier
+      }]
+    }
+  }, _react.default.createElement(_reactNative.Pressable, null, _react.default.createElement(BoxComponent, {
+    onLayout: handleBoxLayoutChanges,
+    style: {
+      paddingBottom: offset
+    },
+    variant: "bottom"
+  }, _react.default.createElement(_styled.CloseBar, null), children))))));
+};
+
+exports.ModalView = ModalView;
+//# sourceMappingURL=BaseModalView.js.map

package/dist/components/atoms/Modal/ui/BaseModalView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/atoms/Modal/ui/BaseModalView.tsx"],"names":["BACKDROP_ALPHA","INTERPOLATION_STEPS","INTERPOLATION_DURATION","OPACITY_DURATION","ModalView","children","visible","BoxComponent","BoxContent","frozen","isLastShown","close","onClose","bottom","ready","setReady","keyboardOpened","setKeyboardOpened","boxHeight","setBoxHeight","backgroundCarrier","Animated","Value","current","translationCarrier","opacityCarrier","offset","show","sequence","timing","toValue","duration","easing","Easing","out","circle","useNativeDriver","start","hide","to","parallel","backgroundInterpolation","interpolate","inputRange","outputRange","handleBoxLayoutChanges","lce","boxHeightEvent","nativeEvent","layout","height","setValue","requestAnimationFrame","Keyboard","dismiss","showEvent","addListener","hideEvent","remove","undefined","backgroundColor","opacity","transform","translateY","paddingBottom"],"mappings":"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","sourcesContent":["import { BoxContent } from \"@tecsinapse/react-core\";\nimport React, { FC, useCallback, useEffect, useRef, useState } from \"react\";\nimport { Animated, Easing, Keyboard, KeyboardAvoidingView, LayoutChangeEvent, Pressable } from \"react-native\";\nimport { useSafeAreaInsets } from 'react-native-safe-area-context';\nimport { BackDropView, CloseBar, StyledPressableBackDrop } from \"./styled\";\nimport { IBaseModal } from \"./types\";\n\nconst BACKDROP_ALPHA = .65\nconst INTERPOLATION_STEPS = 10\nconst INTERPOLATION_DURATION = 195 //ms\nconst OPACITY_DURATION = 25 //ms\n\nexport const ModalView: FC<IBaseModal> = ({\n    children,\n    visible,\n    BoxComponent = BoxContent,\n    frozen,\n    isLastShown,\n    close,\n    onClose\n}) => {\n    \n    const { bottom } = useSafeAreaInsets()\n    const [ ready, setReady ] = useState(false)\n    const [ keyboardOpened, setKeyboardOpened ] = useState(false)\n    const [ boxHeight, setBoxHeight ] = useState(0)\n    const backgroundCarrier = useRef(new Animated.Value(0)).current\n    const translationCarrier = useRef(new Animated.Value(0)).current\n    const opacityCarrier = useRef(new Animated.Value(0)).current\n    const offset = isLastShown && keyboardOpened ? 0 : bottom\n\n    const show = useCallback(() => {\n        Animated.sequence([\n            Animated.timing(backgroundCarrier, {\n                toValue: INTERPOLATION_STEPS,\n                duration: INTERPOLATION_DURATION,\n                easing: Easing.out(Easing.circle),\n                useNativeDriver: false\n            }),\n            Animated.timing(opacityCarrier, {\n                toValue: 1,\n                duration: OPACITY_DURATION,\n                useNativeDriver: true\n            }),\n            Animated.timing(translationCarrier, {\n                toValue: 0,\n                duration: INTERPOLATION_DURATION,\n                easing: Easing.out(Easing.circle),\n                useNativeDriver: true\n            })\n        ]).start()\n    }, [])\n\n    const hide = useCallback((to: number) => {\n        Animated.sequence([\n            Animated.parallel([\n                Animated.timing(translationCarrier, {\n                    toValue: to,\n                    duration: INTERPOLATION_DURATION,\n                    easing: Easing.out(Easing.circle),\n                    useNativeDriver: true\n                }),\n                Animated.timing(opacityCarrier, {\n                    toValue: 0,\n                    duration: INTERPOLATION_DURATION,\n                    useNativeDriver: true\n                })    \n            ]),\n            Animated.timing(backgroundCarrier, {\n                toValue: 0,\n                duration: INTERPOLATION_DURATION,\n                easing: Easing.out(Easing.circle),\n                useNativeDriver: false\n            }),\n        ]).start(onClose)\n    }, [onClose])\n\n    const backgroundInterpolation = backgroundCarrier.interpolate({\n        inputRange: [0, INTERPOLATION_STEPS],\n        outputRange: ['rgba(0, 0, 0, 0)', `rgba(0, 0, 0, ${BACKDROP_ALPHA})`]\n    })\n\n    const handleBoxLayoutChanges = useCallback((lce: LayoutChangeEvent) => {\n        let boxHeightEvent = lce.nativeEvent.layout.height\n        setBoxHeight(boxHeightEvent)\n        \n        if (visible && !ready) {\n            translationCarrier.setValue(boxHeightEvent)\n            setReady(true)\n        }\n    }, [show, ready, visible, setReady])\n\n    useEffect(() => {\n        if (visible && ready) requestAnimationFrame(() => show())\n        if (!visible && !ready) {\n            Keyboard.dismiss()\n            requestAnimationFrame(() => hide(boxHeight))\n        }\n        if (!visible && ready) setReady(false)\n    }, [ready, visible])\n\n    useEffect(() => {\n        const showEvent = Keyboard.addListener('keyboardDidShow', () => setKeyboardOpened(true))\n        const hideEvent = Keyboard.addListener('keyboardDidHide', () => setKeyboardOpened(false))\n        return () => {\n            showEvent.remove()\n            hideEvent.remove()\n        }\n    }, [])\n\n    return (\n        <StyledPressableBackDrop onPress={!frozen ? close : undefined}>\n            <BackDropView style={{ backgroundColor: backgroundInterpolation }}>\n                <KeyboardAvoidingView enabled={isLastShown} behavior=\"padding\">\n                    <Animated.View style={{ opacity: opacityCarrier, transform: [{ translateY: translationCarrier }]}}>\n                        <Pressable>\n                            <BoxComponent onLayout={handleBoxLayoutChanges} style={{ paddingBottom: offset }} variant=\"bottom\">\n                                <CloseBar/>\n                                {children}\n                            </BoxComponent>\n                        </Pressable>\n                    </Animated.View>\n                </KeyboardAvoidingView>\n            </BackDropView>\n        </StyledPressableBackDrop>\n    )\n}"],"file":"BaseModalView.js"}

package/dist/components/atoms/Modal/ui/styled.d.ts

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

package/dist/components/atoms/Modal/ui/styled.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CloseBar = exports.BackDropView = exports.StyledPressableBackDrop = void 0;
+
+var _native = _interopRequireDefault(require("@emotion/native"));
+
+var _reactCore = require("@tecsinapse/react-core");
+
+var _reactNative = require("react-native");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledPressableBackDrop = _native.default.Pressable`
+    flex: 1;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+`;
+exports.StyledPressableBackDrop = StyledPressableBackDrop;
+const BackDropView = (0, _native.default)(_reactNative.Animated.View)`
+    justify-content: flex-end;
+    flex: 1;
+`;
+exports.BackDropView = BackDropView;
+const CloseBar = _native.default.View`
+    background-color: ${({
+  theme
+}) => theme.color.secondary.light};
+    border-radius: ${(0, _reactCore.RFValueStr)('10px')};
+    margin: ${`${(0, _reactCore.RFValueStr)('5px')} auto`};
+    width: ${(0, _reactCore.RFValueStr)('42px')};
+    height: ${(0, _reactCore.RFValueStr)('5px')};
+`;
+exports.CloseBar = CloseBar;
+//# sourceMappingURL=styled.js.map

package/dist/components/atoms/Modal/ui/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/atoms/Modal/ui/styled.ts"],"names":["StyledPressableBackDrop","styled","Pressable","BackDropView","Animated","View","CloseBar","theme","color","secondary","light"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEO,MAAMA,uBAAuB,GAAGC,gBAAOC,SAA+B;AAC7E;AACA;AACA;AACA;AACA,CALO;;AAOA,MAAMC,YAAY,GAAG,qBAAOC,sBAASC,IAAhB,CAA2C;AACvE;AACA;AACA,CAHO;;AAKA,MAAMC,QAAQ,GAAGL,gBAAOI,IAA0B;AACzD,wBAAwB,CAAC;AAAEE,EAAAA;AAAF,CAAD,KAAeA,KAAK,CAACC,KAAN,CAAYC,SAAZ,CAAsBC,KAAM;AACnE,qBAAqB,2BAAW,MAAX,CAAmB;AACxC,cAAe,GAAE,2BAAW,KAAX,CAAkB,OAAO;AAC1C,aAAa,2BAAW,MAAX,CAAmB;AAChC,cAAc,2BAAW,KAAX,CAAkB;AAChC,CANO","sourcesContent":["import styled from \"@emotion/native\";\nimport { RFValueStr, StyleProps } from \"@tecsinapse/react-core\";\nimport { Animated } from \"react-native\";\n\nexport const StyledPressableBackDrop = styled.Pressable<Partial<StyleProps>>`\n    flex: 1;\n    position: absolute;\n    width: 100%;\n    height: 100%;\n`\n\nexport const BackDropView = styled(Animated.View)<Partial<StyleProps>>`\n    justify-content: flex-end;\n    flex: 1;\n`\n\nexport const CloseBar = styled.View<Partial<StyleProps>>`\n    background-color: ${({ theme }) => theme.color.secondary.light};\n    border-radius: ${RFValueStr('10px')};\n    margin: ${`${RFValueStr('5px')} auto`};\n    width: ${RFValueStr('42px')};\n    height: ${RFValueStr('5px')};\n`"],"file":"styled.js"}

package/dist/components/atoms/Modal/ui/types.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface IBaseModal {
+    visible?: boolean;
+    BoxComponent?: React.FC<any>;
+    frozen?: boolean;
+    isLastShown?: boolean;
+    close?: () => void;
+    onClose?: () => void;
+}

package/dist/components/atoms/Modal/ui/types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=types.js.map

package/dist/components/atoms/Modal/ui/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"types.js"}

package/dist/components/atoms/Modal/useModalManager.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement } from "react";
+import { IBaseModal } from "./ui/types";
+export declare const useModalManager: (modal: () => ReactElement<IBaseModal>) => {
+    show: () => void;
+    close: () => void;
+};