@tecsinapse/react-native-kit 1.20.0 → 1.22.0-beta.13

package/esm/components/atoms/InputMask/InputMask.js

@@ -0,0 +1,134 @@
+import { useInputFocus, Hint } from '@tecsinapse/react-core';
+import React__default from 'react';
+import { View } from 'react-native';
+import { StyledInputContainer, StyledNativeInputMask } from './styled.js';
+import Text from '../Text/Text.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const InputMask = React__default.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      label,
+      labelColor,
+      labelColorVariant,
+      labelColorTone,
+      labelTypography,
+      labelStack,
+      labelWeight,
+      leftComponent,
+      rightComponent,
+      disabled,
+      style,
+      borderColor,
+      borderColorGradation,
+      inputFontStack = "default",
+      inputFontWeight = "bold",
+      inputContainerStyle,
+      variant = "default",
+      hintComponent,
+      hint,
+      onFocus,
+      onBlur,
+      value,
+      placeholder
+    } = _b, rest = __objRest(_b, [
+      "label",
+      "labelColor",
+      "labelColorVariant",
+      "labelColorTone",
+      "labelTypography",
+      "labelStack",
+      "labelWeight",
+      "leftComponent",
+      "rightComponent",
+      "disabled",
+      "style",
+      "borderColor",
+      "borderColorGradation",
+      "inputFontStack",
+      "inputFontWeight",
+      "inputContainerStyle",
+      "variant",
+      "hintComponent",
+      "hint",
+      "onFocus",
+      "onBlur",
+      "value",
+      "placeholder"
+    ]);
+    const _hint = hintComponent || /* @__PURE__ */ React__default.createElement(Hint, {
+      TextComponent: Text,
+      text: hint,
+      variant
+    });
+    const { focused, handleBlur, handleFocus } = useInputFocus(
+      onFocus,
+      onBlur,
+      !disabled
+    );
+    const onlyLabel = label && !placeholder;
+    return /* @__PURE__ */ React__default.createElement(View, {
+      style
+    }, /* @__PURE__ */ React__default.createElement(StyledInputContainer, {
+      label: String(value) ? label : void 0,
+      labelColor,
+      labelColorVariant,
+      labelColorTone,
+      labelTypography,
+      labelStack,
+      labelWeight,
+      LabelComponent: Text,
+      leftComponent,
+      rightComponent,
+      borderColor,
+      borderColorGradation,
+      inputContainerStyle,
+      focused,
+      disabled,
+      variant
+    }, /* @__PURE__ */ React__default.createElement(StyledNativeInputMask, __spreadProps(__spreadValues({}, rest), {
+      placeholder: onlyLabel ? label : placeholder,
+      value,
+      ref,
+      fontStack: inputFontStack,
+      fontWeight: inputFontWeight,
+      disabled,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    }))), hint && _hint);
+  }
+);
+InputMask.displayName = "InputMask";
+
+export { InputMask as default };
+//# sourceMappingURL=InputMask.js.map

package/esm/components/atoms/InputMask/InputMask.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputMask.js","sources":["../../../../src/components/atoms/InputMask/InputMask.tsx"],"sourcesContent":["import {\n  FontStackType,\n  FontWeightType,\n  Hint,\n  InputContainerProps,\n  InputMaskElementProps,\n  useInputFocus,\n} from '@tecsinapse/react-core';\nimport React, { FC } from 'react';\nimport { View } from 'react-native';\nimport { StyledInputContainer, StyledNativeInputMask } from './styled';\nimport { Text } from '../Text';\n\nexport interface InputMaskNativeProps\n  extends Omit<InputMaskElementProps, 'style'>,\n    InputContainerProps {\n  inputFontStack?: FontStackType;\n  inputFontWeight?: FontWeightType;\n}\n\nconst InputMask: FC<InputMaskNativeProps> = React.forwardRef(\n  (\n    {\n      label,\n      labelColor,\n      labelColorVariant,\n      labelColorTone,\n      labelTypography,\n      labelStack,\n      labelWeight,\n      leftComponent,\n      rightComponent,\n      disabled,\n      style,\n      borderColor,\n      borderColorGradation,\n      inputFontStack = 'default',\n      inputFontWeight = 'bold',\n      inputContainerStyle,\n      variant = 'default',\n      hintComponent,\n      hint,\n      onFocus,\n      onBlur,\n      value,\n      placeholder,\n      ...rest\n    },\n    ref\n  ) => {\n    const _hint = hintComponent || (\n      <Hint TextComponent={Text} text={hint} variant={variant} />\n    );\n    const { focused, handleBlur, handleFocus } = useInputFocus(\n      onFocus,\n      onBlur,\n      !disabled\n    );\n\n    const onlyLabel = label && !placeholder;\n\n    return (\n      <View style={style}>\n        <StyledInputContainer\n          label={String(value) ? label : undefined}\n          labelColor={labelColor}\n          labelColorVariant={labelColorVariant}\n          labelColorTone={labelColorTone}\n          labelTypography={labelTypography}\n          labelStack={labelStack}\n          labelWeight={labelWeight}\n          LabelComponent={Text}\n          leftComponent={leftComponent}\n          rightComponent={rightComponent}\n          borderColor={borderColor}\n          borderColorGradation={borderColorGradation}\n          inputContainerStyle={inputContainerStyle}\n          focused={focused}\n          disabled={disabled}\n          variant={variant}\n        >\n          <StyledNativeInputMask\n            {...rest}\n            placeholder={onlyLabel ? label : placeholder}\n            value={value}\n            ref={ref}\n            fontStack={inputFontStack}\n            fontWeight={inputFontWeight}\n            disabled={disabled}\n            onFocus={handleFocus}\n            onBlur={handleBlur}\n          />\n        </StyledInputContainer>\n        {hint && _hint}\n      </View>\n    );\n  }\n);\n\nInputMask.displayName = 'InputMask';\n\nexport default InputMask;\n"],"names":["React"],"mappings":"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"}

package/esm/components/atoms/InputMask/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InputMask } from './InputMask';
+export type { InputMaskNativeProps } from './InputMask';

package/esm/components/atoms/InputMask/styled.d.ts

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

package/esm/components/atoms/InputMask/styled.js

@@ -0,0 +1,16 @@
+import styled from '@emotion/native';
+import { InputContainer, RFValueStr, InputMaskElement } from '@tecsinapse/react-core';
+import { fontStyles } from '../Text/styled.js';
+
+const StyledInputContainer = styled(InputContainer)`
+  min-height: ${RFValueStr("50px")};
+`;
+const StyledNativeInputMaskBase = styled(InputMaskElement)`
+  height: ${({ theme }) => theme.typography.h5.lineHeight};
+  width: 100%;
+  padding: 0;
+`;
+const StyledNativeInputMask = styled(StyledNativeInputMaskBase)(fontStyles);
+
+export { StyledInputContainer, StyledNativeInputMask };
+//# sourceMappingURL=styled.js.map

package/esm/components/atoms/InputMask/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../src/components/atoms/InputMask/styled.ts"],"sourcesContent":["import styled from '@emotion/native';\nimport {\n  InputContainer,\n  InputMaskElement,\n  RFValueStr,\n  StyleProps,\n} from '@tecsinapse/react-core';\nimport { Font, fontStyles } from '../Text/styled';\nimport { InputMaskNativeProps } from './InputMask';\n\nexport const StyledInputContainer = styled(InputContainer)<Partial<StyleProps>>`\n  min-height: ${RFValueStr('50px')};\n`;\n\nconst StyledNativeInputMaskBase = styled(InputMaskElement)<\n  Partial<InputMaskNativeProps> & Partial<StyleProps>\n>`\n  height: ${({ theme }) => theme.typography.h5.lineHeight};\n  width: 100%;\n  padding: 0;\n`;\n\nexport const StyledNativeInputMask = styled(StyledNativeInputMaskBase)<\n  Font & Partial<InputMaskNativeProps> & Partial<StyleProps>\n>(fontStyles);\n"],"names":[],"mappings":";;;;AAUa,MAAA,oBAAA,GAAuB,OAAO,cAAc,CAAA,CAAA;AAAA,cAAA,EACzC,WAAW,MAAM,CAAA,CAAA;AAAA,EAAA;AAGjC,MAAM,yBAAA,GAA4B,OAAO,gBAAgB,CAAA,CAAA;AAAA,UAAA,EAG7C,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,WAAW,EAAG,CAAA,UAAA,CAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAKxC,MAAM,qBAAwB,GAAA,MAAA,CAAO,yBAAyB,CAAA,CAEnE,UAAU;;;;"}

package/esm/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/esm/components/atoms/Modal/ModalGroupManager.js

@@ -0,0 +1,48 @@
+import React__default, { useState } from 'react';
+import { Modal } from 'react-native';
+import { createModalLifecycleHandler } from './ModalLifecycleHandler.js';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const modalLifecycle = createModalLifecycleHandler();
+const ModalGroupManager = (_a) => {
+  var _b = _a, { children } = _b, others = __objRest(_b, ["children"]);
+  modalLifecycle.attach(useState([]));
+  const _render = modalLifecycle.render();
+  const hasModals = _render.length > 0;
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children, /* @__PURE__ */ React__default.createElement(Modal, __spreadValues({
+    transparent: true,
+    statusBarTranslucent: true,
+    animationType: "none",
+    visible: hasModals
+  }, others), _render));
+};
+
+export { ModalGroupManager, modalLifecycle };
+//# sourceMappingURL=ModalGroupManager.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalGroupManager.js","sources":["../../../../src/components/atoms/Modal/ModalGroupManager.tsx"],"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  modalLifecycle.attach(useState<ReactElement<IBaseModal>[]>([]));\n  const _render = modalLifecycle.render();\n  const hasModals = _render.length > 0;\n\n  return (\n    <>\n      {children}\n      <RNModal\n        transparent\n        statusBarTranslucent\n        animationType=\"none\"\n        visible={hasModals}\n        {...others}\n      >\n        {_render}\n      </RNModal>\n    </>\n  );\n};\n"],"names":["React","RNModal"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,iBAAiB,2BAA4B,GAAA;AAQ7C,MAAA,iBAAA,GAAoC,CAAC,EAA4B,KAAA;AAA5B,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAbpD,QAAA,EAAA,GAakD,EAAe,EAAA,MAAA,GAAA,SAAA,CAAf,IAAe,CAAb,UAAA,CAAA,CAAA,CAAA;AAClD,EAAA,cAAA,CAAe,MAAO,CAAA,QAAA,CAAqC,EAAE,CAAC,CAAA,CAAA;AAC9D,EAAM,MAAA,OAAA,GAAU,eAAe,MAAO,EAAA,CAAA;AACtC,EAAM,MAAA,SAAA,GAAY,QAAQ,MAAS,GAAA,CAAA,CAAA;AAEnC,EACE,uBAAAA,cAAA,CAAA,aAAA,CAAAA,cAAA,CAAA,QAAA,EAAA,IAAA,EACG,0BACAA,cAAA,CAAA,aAAA,CAAAC,KAAA,EAAA,cAAA,CAAA;AAAA,IACC,WAAW,EAAA,IAAA;AAAA,IACX,oBAAoB,EAAA,IAAA;AAAA,IACpB,aAAc,EAAA,MAAA;AAAA,IACd,OAAS,EAAA,SAAA;AAAA,GACL,EAAA,MAAA,CAAA,EAEH,OACH,CACF,CAAA,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,24 @@
+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;
+    private findNode;
+    show: (id: string) => void;
+    close: (id: string) => void;
+}
+export declare const createModalLifecycleHandler: () => ModalLifecycleHandler;
+export {};

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

@@ -0,0 +1,101 @@
+import React__default from 'react';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+class ModalLifecycleHandler {
+  constructor() {
+    this.attach = (state) => {
+      this.state = state;
+    };
+    this.update = () => {
+      requestAnimationFrame(() => {
+        const nodes = Array.from(this.nodeGroup.values()).filter((node) => node.visible || !!node.lastVisualization).sort(
+          (nodeA, nodeB) => {
+            var _a, _b;
+            return (((_a = nodeA.lastVisualization) == null ? void 0 : _a.getTime()) || 0) - (((_b = nodeB.lastVisualization) == null ? void 0 : _b.getTime()) || 0);
+          }
+        ).map((node, index, filteredNodes) => {
+          const modalElement = node.modal();
+          const { props } = modalElement;
+          return React__default.cloneElement(modalElement, __spreadProps(__spreadValues({}, props), {
+            key: node.id,
+            visible: node.visible,
+            isLastShown: filteredNodes.length - 1 === index,
+            close: () => this.close(node.id),
+            onClose: () => {
+              var _a;
+              this.remove(node.id);
+              (_a = props.onClose) == null ? void 0 : _a.call(props);
+            }
+          }));
+        });
+        const [, updateState] = this.state || [];
+        updateState == null ? void 0 : updateState(nodes);
+      });
+    };
+    this.render = () => {
+      const [modals] = this.state || [];
+      return modals || [];
+    };
+    this.sync = (id, modal) => {
+      if (this.nodeGroup.has(id)) {
+        const savedNode = this.findNode(id);
+        savedNode && this.nodeGroup.set(id, __spreadProps(__spreadValues({}, savedNode), { modal }));
+        return;
+      }
+      this.nodeGroup.set(id, { id, modal });
+    };
+    this.destroy = (id) => {
+      this.nodeGroup.delete(id);
+      this.update();
+    };
+    this.remove = (id) => {
+      const savedNode = this.findNode(id);
+      savedNode && this.nodeGroup.set(id, __spreadProps(__spreadValues({}, savedNode), { lastVisualization: void 0 }));
+      this.update();
+    };
+    this.findNode = (id) => {
+      const node = this.nodeGroup.get(id);
+      !node && console.warn(`No modal was found with the id "${id}"`);
+      return node;
+    };
+    this.show = (id) => {
+      const savedNode = this.findNode(id);
+      savedNode && this.nodeGroup.set(id, __spreadProps(__spreadValues({}, savedNode), {
+        visible: true,
+        lastVisualization: new Date()
+      }));
+      this.update();
+    };
+    this.close = (id) => {
+      const savedNode = this.findNode(id);
+      savedNode && this.nodeGroup.set(id, __spreadProps(__spreadValues({}, savedNode), { visible: false }));
+      this.update();
+    };
+    this.nodeGroup = /* @__PURE__ */ new Map();
+    this.state = void 0;
+  }
+}
+const createModalLifecycleHandler = () => {
+  return new ModalLifecycleHandler();
+};
+
+export { ModalLifecycleHandler, createModalLifecycleHandler };
+//# sourceMappingURL=ModalLifecycleHandler.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalLifecycleHandler.js","sources":["../../../../src/components/atoms/Modal/ModalLifecycleHandler.ts"],"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  nodeGroup: Map<string, ModalNode>;\n  state:\n    | [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]\n    | 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 = (\n    state: [ReactElement<IBaseModal>[], Dispatch<ReactElement<IBaseModal>[]>]\n  ) => {\n    this.state = state;\n  };\n\n  /**\n   * Updates all the modal components.\n   */\n  public update = () => {\n    requestAnimationFrame(() => {\n      const nodes = Array.from(this.nodeGroup.values())\n        .filter(node => node.visible || !!node.lastVisualization)\n        .sort(\n          (nodeA, nodeB) =>\n            (nodeA.lastVisualization?.getTime() || 0) -\n            (nodeB.lastVisualization?.getTime() || 0)\n        )\n        .map((node, index, filteredNodes) => {\n          const modalElement = node.modal();\n          const { 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  /**\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.findNode(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.findNode(id);\n    savedNode &&\n      this.nodeGroup.set(id, { ...savedNode, lastVisualization: undefined });\n    this.update();\n  };\n\n  /**\n   * Find a modal node by id.\n   *\n   * @param id\n   */\n  private findNode = (id: string) => {\n    const node = this.nodeGroup.get(id);\n    !node && console.warn(`No modal was found with the id \"${id}\"`);\n    return node;\n  };\n\n  /**\n   * Makes a modal appears.\n   *\n   * @param id\n   */\n  public show = (id: string) => {\n    const savedNode = this.findNode(id);\n    savedNode &&\n      this.nodeGroup.set(id, {\n        ...savedNode,\n        visible: true,\n        lastVisualization: new Date(),\n      });\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.findNode(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"],"names":["React"],"mappings":"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"}

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

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

package/esm/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/esm/components/atoms/Modal/ui/BaseModalView.js

@@ -0,0 +1,143 @@
+import { BoxContent } from '@tecsinapse/react-core';
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import { Animated, Easing, Keyboard, Pressable, Dimensions, StatusBar } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { StyledPressableBackDrop, BackDropView, CloseBar } from './styled.js';
+
+const BACKDROP_ALPHA = 0.65;
+const INTERPOLATION_STEPS = 10;
+const INTERPOLATION_DURATION = 195;
+const OPACITY_DURATION = 25;
+const ModalView = ({
+  children,
+  visible,
+  BoxComponent = BoxContent,
+  frozen,
+  isLastShown,
+  showCloseBar = true,
+  close,
+  onClose
+}) => {
+  const { bottom } = useSafeAreaInsets();
+  const [ready, setReady] = useState(false);
+  const [keyboardOpened, setKeyboardOpened] = useState(0);
+  const [boxHeight, setBoxHeight] = useState(0);
+  const backgroundCarrier = useRef(new Animated.Value(0)).current;
+  const translationCarrier = useRef(new Animated.Value(0)).current;
+  const opacityCarrier = useRef(new Animated.Value(0)).current;
+  const offset = isLastShown && keyboardOpened > 0 ? 0 : bottom;
+  const getKeyboardHeight = (keyboard) => {
+    if (keyboard === 0)
+      return 0;
+    const wHeight = Math.ceil(Dimensions.get("window").height);
+    const sHeight = Math.ceil(Dimensions.get("screen").height);
+    if (wHeight !== sHeight) {
+      return keyboard + (sHeight - wHeight - (StatusBar.currentHeight || 0));
+    }
+    return keyboard;
+  };
+  const show = useCallback(() => {
+    Animated.sequence([
+      Animated.timing(backgroundCarrier, {
+        toValue: INTERPOLATION_STEPS,
+        duration: INTERPOLATION_DURATION,
+        easing: Easing.out(Easing.circle),
+        useNativeDriver: false
+      }),
+      Animated.timing(opacityCarrier, {
+        toValue: 1,
+        duration: OPACITY_DURATION,
+        useNativeDriver: true
+      }),
+      Animated.timing(translationCarrier, {
+        toValue: 0,
+        duration: INTERPOLATION_DURATION,
+        easing: Easing.out(Easing.circle),
+        useNativeDriver: true
+      })
+    ]).start();
+  }, []);
+  const hide = useCallback(
+    (to) => {
+      Animated.sequence([
+        Animated.parallel([
+          Animated.timing(translationCarrier, {
+            toValue: to,
+            duration: INTERPOLATION_DURATION,
+            easing: Easing.out(Easing.circle),
+            useNativeDriver: true
+          }),
+          Animated.timing(opacityCarrier, {
+            toValue: 0,
+            duration: INTERPOLATION_DURATION,
+            useNativeDriver: true
+          })
+        ]),
+        Animated.timing(backgroundCarrier, {
+          toValue: 0,
+          duration: INTERPOLATION_DURATION,
+          easing: Easing.out(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 = useCallback(
+    (lce) => {
+      const boxHeightEvent = lce.nativeEvent.layout.height;
+      setBoxHeight(boxHeightEvent);
+      if (visible && !ready) {
+        translationCarrier.setValue(boxHeightEvent);
+        setReady(true);
+      }
+    },
+    [show, ready, visible, setReady]
+  );
+  useEffect(() => {
+    if (visible && ready)
+      requestAnimationFrame(() => show());
+    if (!visible && !ready) {
+      Keyboard.dismiss();
+      requestAnimationFrame(() => hide(boxHeight));
+    }
+    if (!visible && ready)
+      setReady(false);
+  }, [ready, visible]);
+  useEffect(() => {
+    const showEvent = Keyboard.addListener(
+      "keyboardDidShow",
+      (e) => setKeyboardOpened(e.endCoordinates.height)
+    );
+    const hideEvent = Keyboard.addListener(
+      "keyboardDidHide",
+      () => setKeyboardOpened(0)
+    );
+    return () => {
+      showEvent.remove();
+      hideEvent.remove();
+    };
+  }, []);
+  return /* @__PURE__ */ React__default.createElement(StyledPressableBackDrop, {
+    onPress: !frozen ? close : void 0
+  }, /* @__PURE__ */ React__default.createElement(BackDropView, {
+    style: { backgroundColor: backgroundInterpolation }
+  }, /* @__PURE__ */ React__default.createElement(Animated.View, {
+    style: {
+      paddingBottom: isLastShown ? getKeyboardHeight(keyboardOpened) : 0,
+      opacity: opacityCarrier,
+      transform: [{ translateY: translationCarrier }]
+    }
+  }, /* @__PURE__ */ React__default.createElement(Pressable, null, /* @__PURE__ */ React__default.createElement(BoxComponent, {
+    onLayout: handleBoxLayoutChanges,
+    style: { paddingBottom: offset },
+    variant: "bottom"
+  }, showCloseBar && /* @__PURE__ */ React__default.createElement(CloseBar, null), children)))));
+};
+
+export { ModalView };
+//# sourceMappingURL=BaseModalView.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseModalView.js","sources":["../../../../../src/components/atoms/Modal/ui/BaseModalView.tsx"],"sourcesContent":["import { BoxContent } from '@tecsinapse/react-core';\nimport React, { FC, useCallback, useEffect, useRef, useState } from 'react';\nimport {\n  Animated,\n  Dimensions,\n  Easing,\n  Keyboard,\n  LayoutChangeEvent,\n  Pressable,\n  StatusBar,\n} 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 = 0.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  showCloseBar = true,\n  close,\n  onClose,\n}) => {\n  const { bottom } = useSafeAreaInsets();\n  const [ready, setReady] = useState(false);\n  const [keyboardOpened, setKeyboardOpened] = useState(0);\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 ? 0 : bottom;\n\n  const getKeyboardHeight = (keyboard: number) => {\n    if (keyboard === 0) return 0;\n\n    const wHeight = Math.ceil(Dimensions.get('window').height);\n    const sHeight = Math.ceil(Dimensions.get('screen').height);\n    if (wHeight !== sHeight) {\n      return keyboard + (sHeight - wHeight - (StatusBar.currentHeight || 0));\n    }\n    return keyboard;\n  };\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(\n    (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    },\n    [onClose]\n  );\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(\n    (lce: LayoutChangeEvent) => {\n      const boxHeightEvent = lce.nativeEvent.layout.height;\n      setBoxHeight(boxHeightEvent);\n\n      if (visible && !ready) {\n        translationCarrier.setValue(boxHeightEvent);\n        setReady(true);\n      }\n    },\n    [show, ready, visible, setReady]\n  );\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', e =>\n      setKeyboardOpened(e.endCoordinates.height)\n    );\n    const hideEvent = Keyboard.addListener('keyboardDidHide', () =>\n      setKeyboardOpened(0)\n    );\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        <Animated.View\n          style={{\n            paddingBottom: isLastShown ? getKeyboardHeight(keyboardOpened) : 0,\n            opacity: opacityCarrier,\n            transform: [{ translateY: translationCarrier }],\n          }}\n        >\n          <Pressable>\n            <BoxComponent\n              onLayout={handleBoxLayoutChanges}\n              style={{ paddingBottom: offset }}\n              variant=\"bottom\"\n            >\n              {showCloseBar && <CloseBar />}\n              {children}\n            </BoxComponent>\n          </Pressable>\n        </Animated.View>\n      </BackDropView>\n    </StyledPressableBackDrop>\n  );\n};\n"],"names":["React"],"mappings":"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"}

package/esm/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/esm/components/atoms/Modal/ui/styled.js

@@ -0,0 +1,24 @@
+import styled from '@emotion/native';
+import { RFValueStr } from '@tecsinapse/react-core';
+import { Animated } from 'react-native';
+
+const StyledPressableBackDrop = styled.Pressable`
+  flex: 1;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+`;
+const BackDropView = styled(Animated.View)`
+  justify-content: flex-end;
+  flex: 1;
+`;
+const CloseBar = styled.View`
+  background-color: ${({ theme }) => theme.color.secondary.light};
+  border-radius: ${RFValueStr("10px")};
+  margin: ${`${RFValueStr("5px")} auto`};
+  width: ${RFValueStr("42px")};
+  height: ${RFValueStr("5px")};
+`;
+
+export { BackDropView, CloseBar, StyledPressableBackDrop };
+//# sourceMappingURL=styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","sources":["../../../../../src/components/atoms/Modal/ui/styled.ts"],"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`;\n"],"names":[],"mappings":";;;;AAIO,MAAM,0BAA0B,MAAO,CAAA,SAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAOjC,MAAA,YAAA,GAAe,MAAO,CAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA,EAAA;AAKzC,MAAM,WAAW,MAAO,CAAA,IAAA,CAAA;AAAA,oBAAA,EACT,CAAC,EAAE,KAAA,EAAY,KAAA,KAAA,CAAM,MAAM,SAAU,CAAA,KAAA,CAAA;AAAA,iBAAA,EACxC,WAAW,MAAM,CAAA,CAAA;AAAA,UACxB,EAAA,CAAA,EAAG,WAAW,KAAK,CAAA,CAAA,KAAA,CAAA,CAAA;AAAA,SAAA,EACpB,WAAW,MAAM,CAAA,CAAA;AAAA,UAAA,EAChB,WAAW,KAAK,CAAA,CAAA;AAAA;;;;"}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface IBaseModal {
+    visible?: boolean;
+    BoxComponent?: React.FC<any>;
+    frozen?: boolean;
+    isLastShown?: boolean;
+    showCloseBar?: boolean;
+    close?: () => void;
+    onClose?: () => void;
+}

package/esm/components/atoms/Modal/useLazyModalManager.d.ts

@@ -0,0 +1,8 @@
+import { ReactElement } from 'react';
+import { IBaseModal } from './ui/types';
+export declare const useLazyModalManager: (modalId?: string | undefined) => {
+    requestUpdate: () => void;
+    sync: (modal: ReactElement<IBaseModal>) => null;
+    show: () => void;
+    close: () => void;
+};