josenanodev-react-components-library 1.0.3 → 1.0.4

package/dist/cjs/components/ExportToExcelButton/ExportToExcelButtonOwnFunctions.js

@@ -0,0 +1,75 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.downloadExcel = void 0;
+//Librerias de terceros
+const XLSX = __importStar(require("xlsx-js-style"));
+function styleObjectParser(styleObject) {
+    let restultantStyleObject = {
+        v: styleObject.value,
+        s: {},
+    };
+    if (styleObject.allign)
+        restultantStyleObject.s.alignment = Object.assign({}, styleObject.allign);
+    if (styleObject.fontSize)
+        restultantStyleObject.s.font = Object.assign(Object.assign({}, restultantStyleObject.s.font), { sz: styleObject.fontSize });
+    if (styleObject.fontColor)
+        restultantStyleObject.s.font = Object.assign(Object.assign({}, restultantStyleObject.s.font), { color: { rgb: styleObject.fontColor } });
+    if (styleObject.bold)
+        restultantStyleObject.s.font = Object.assign(Object.assign({}, restultantStyleObject.s.font), { bold: styleObject.bold });
+    if (styleObject.backgroundColor)
+        restultantStyleObject.s.fill = Object.assign(Object.assign({}, restultantStyleObject.s.fill), { bgColor: { rgb: styleObject.backgroundColor } });
+    if (styleObject.foregroundColor)
+        restultantStyleObject.s.fill = Object.assign(Object.assign({}, restultantStyleObject.s.fill), { fgColor: { rgb: styleObject.foregroundColor } });
+    if (styleObject.borders)
+        restultantStyleObject.s.border = Object.assign({}, styleObject.borders);
+    return restultantStyleObject;
+}
+function downloadExcel(fileName, data, headers) {
+    if (data !== undefined) {
+        const workbook = XLSX.utils.book_new();
+        for (const sheetName in data) {
+            if (Object.prototype.hasOwnProperty.call(data, sheetName)) {
+                let dataXlsxJs = [];
+                if (headers !== undefined &&
+                    Object.prototype.hasOwnProperty.call(headers, sheetName)) {
+                    dataXlsxJs = [
+                        headers[sheetName].map((header) => styleObjectParser(header)),
+                        ...data[sheetName].map((row) => row.map((cell) => styleObjectParser(cell))),
+                    ];
+                }
+                else {
+                    dataXlsxJs = [
+                        ...data[sheetName].map((row) => row.map((cell) => styleObjectParser(cell))),
+                    ];
+                }
+                const worksheet = XLSX.utils.aoa_to_sheet(dataXlsxJs);
+                XLSX.utils.book_append_sheet(workbook, worksheet, sheetName);
+            }
+        }
+        XLSX.writeFile(workbook, `${fileName}.xlsx`);
+    }
+}
+exports.downloadExcel = downloadExcel;

package/dist/cjs/components/ExportToExcelButton/types.d.ts

@@ -0,0 +1,44 @@
+export interface ExportToExcelButtonPropsType {
+  customButtonText?: string;
+  customClass?: string;
+  fileName?: string;
+  headers?: { [key: string]: DataObjectXlsxType[] };
+  data?: { [key: string]: DataObjectXlsxType[][] };
+  onAfterExport?: Function;
+  disabled?: boolean;
+}
+
+export interface StyleObjectXlsxType {
+  allign?: {
+    vertical: "top" | "center" | "bottom";
+    horizontal: "left" | "center" | "right";
+  };
+  fontSize?: number;
+  fontColor?: string;
+  bold?: boolean;
+  backgroundColor?: string;
+  foregroundColor?: string;
+  borders?: {
+    top?: { style: BorderStyleType; color: string };
+    bottom?: { style: BorderStyleType; color: string };
+    left?: { style: BorderStyleType; color: string };
+    right?: { style: BorderStyleType; color: string };
+  };
+}
+export interface DataObjectXlsxType extends StyleObjectXlsxType {
+  value: string | number;
+}
+
+type BorderStyleType =
+  | "dashDotDot"
+  | "dashDot"
+  | "dashed"
+  | "dotted"
+  | "hair"
+  | "mediumDashDotDot"
+  | "mediumDashDot"
+  | "mediumDashed"
+  | "medium"
+  | "slantDashDot"
+  | "thick"
+  | "thin";

package/dist/cjs/components/InputBoxWithConfirmation/InputBoxWithConfirmation.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+type InputBoxWithConfirmationPropsType = {
+    onConfirmAction: (inputCurrentValue: string) => void;
+    inputType?: "text" | "number";
+    minimumValue?: HTMLInputElement["min"];
+    maximumValue?: HTMLInputElement["max"];
+    maxLength?: HTMLInputElement["maxLength"];
+    placeholder?: HTMLInputElement["placeholder"];
+    divWrapperCustomStyle?: React.CSSProperties;
+    inputBoxCustomStyle?: React.CSSProperties;
+    defaultValue?: string | number;
+    overrideCurrentValue?: string | number | null;
+    showConfirmationButton?: boolean;
+    disabled?: boolean;
+};
+declare const InputBoxWithConfirmation: ({ onConfirmAction, inputType, minimumValue, maximumValue, maxLength, placeholder, divWrapperCustomStyle, inputBoxCustomStyle, defaultValue, overrideCurrentValue, showConfirmationButton, disabled, }: InputBoxWithConfirmationPropsType) => React.JSX.Element;
+export default InputBoxWithConfirmation;

package/dist/cjs/components/InputBoxWithConfirmation/InputBoxWithConfirmation.js

@@ -0,0 +1,137 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const InputBoxWithConfirmation_module_scss_1 = __importDefault(require("./InputBoxWithConfirmation.module.scss"));
+//Hooks
+const useOutsideClick_1 = __importDefault(require("../../hooks/useOutsideClick"));
+//Icons
+const bs_1 = require("react-icons/bs");
+const InputBoxWithConfirmation = ({ onConfirmAction, inputType = "text", minimumValue = "", maximumValue = "", maxLength, placeholder = "", divWrapperCustomStyle, inputBoxCustomStyle, defaultValue, overrideCurrentValue, showConfirmationButton, disabled, }) => {
+    //Refs
+    const inputRef = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    //States
+    const [cachedValue, setCachedValue] = (0, react_1.useState)(defaultValue !== undefined ? String(defaultValue) : "");
+    const [currentValue, setCurrentValue] = (0, react_1.useState)(defaultValue !== undefined ? String(defaultValue) : "");
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    //Functions
+    const currentValueValueValidated = () => {
+        if (!currentValue) {
+            return cachedValue;
+        }
+        if (inputType === "number") {
+            let numericValue = Number(currentValue);
+            if (minimumValue !== "" && numericValue < Number(minimumValue)) {
+                numericValue = Number(minimumValue);
+            }
+            else if (maximumValue !== "" && numericValue > Number(maximumValue)) {
+                numericValue = Number(maximumValue);
+            }
+            return String(numericValue);
+        }
+        else {
+            return currentValue;
+        }
+    };
+    const onConfirmActionHandler = () => {
+        setCurrentValue(currentValueValueValidated());
+        if (currentValueValueValidated()) {
+            onConfirmAction(currentValueValueValidated());
+            setCachedValue(currentValueValueValidated());
+        }
+    };
+    //Hooks
+    (0, useOutsideClick_1.default)(containerRef, () => {
+        if (focused) {
+            if (showConfirmationButton) {
+                setCurrentValue(cachedValue);
+            }
+            else {
+                onConfirmActionHandler();
+            }
+            setFocused(false);
+        }
+    });
+    //Effects
+    (0, react_1.useEffect)(() => {
+        if (overrideCurrentValue !== undefined) {
+            setCurrentValue(String(overrideCurrentValue));
+            setCachedValue(String(overrideCurrentValue));
+        }
+        else if (overrideCurrentValue === null) {
+            setCurrentValue("");
+            setCachedValue("");
+        }
+    }, [overrideCurrentValue]);
+    return (react_1.default.createElement("div", { ref: containerRef, style: divWrapperCustomStyle, className: `${InputBoxWithConfirmation_module_scss_1.default["div-wrapper"]} ${focused ? InputBoxWithConfirmation_module_scss_1.default["focused"] : ""}` },
+        react_1.default.createElement("input", { ref: inputRef, disabled: disabled, className: InputBoxWithConfirmation_module_scss_1.default["input-box-with-confirmation"], type: inputType, style: Object.assign({ width: `${((currentValue === null || currentValue === void 0 ? void 0 : currentValue.length) ? currentValue.length : 0) + 7}ch` }, inputBoxCustomStyle), min: minimumValue, max: maximumValue, maxLength: maxLength, placeholder: placeholder, value: focused ? currentValue : cachedValue, onChange: (event) => {
+                let value = event.target.value;
+                if (maxLength && value.length > maxLength) {
+                    value = value.slice(0, maxLength);
+                }
+                setCurrentValue(value);
+            }, onFocus: (event) => {
+                setCachedValue(event.target.value);
+                setCurrentValue(event.target.value);
+                setFocused(true);
+            }, onKeyDown: (event) => {
+                if (event.key === "Enter") {
+                    onConfirmActionHandler();
+                    setFocused(false);
+                    if (inputRef.current) {
+                        inputRef.current.blur();
+                    }
+                }
+                else if (event.key === "Tab") {
+                    onConfirmActionHandler();
+                    setFocused(false);
+                    if (inputRef.current) {
+                        inputRef.current.blur();
+                    }
+                }
+                else if (event.key === "Escape") {
+                    setCurrentValue(cachedValue);
+                    setFocused(false);
+                    if (inputRef.current) {
+                        inputRef.current.blur();
+                    }
+                }
+            } }),
+        !disabled && showConfirmationButton && (react_1.default.createElement(react_1.Fragment, null, focused ? (react_1.default.createElement("button", { className: InputBoxWithConfirmation_module_scss_1.default["button-for-input-box-with-confirmation"], onClick: () => {
+                onConfirmActionHandler();
+                setFocused(false);
+            } },
+            react_1.default.createElement(bs_1.BsCheckLg, null))) : (react_1.default.createElement("button", { className: InputBoxWithConfirmation_module_scss_1.default["button-for-input-box-with-confirmation"], onClick: () => {
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                }
+            } },
+            react_1.default.createElement(bs_1.BsPencil, null)))))));
+};
+exports.default = InputBoxWithConfirmation;

package/dist/cjs/components/InputBoxWithConfirmation/InputBoxWithConfirmation.module.scss

@@ -0,0 +1,52 @@
+.div-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: solid 1px rgb(184, 184, 184);
+  background-color: rgb(250, 250, 250);
+  border-radius: 8px;
+  transition: border 0.3s;
+  &.focused {
+    border-color: #218dec;
+  }
+  .input-box-with-confirmation {
+    box-sizing: border-box;
+    padding: 10px 2ch;
+    min-width: 10ch;
+    text-align: center;
+    border: none;
+    background-color: transparent;
+    font-size: 16px;
+    font-weight: 600;
+    color: dimgray;
+    transition: all 0.2s;
+    &::-webkit-inner-spin-button {
+      display: none;
+    }
+    &:focus {
+      outline: none;
+    }
+  }
+  .button-for-input-box-with-confirmation {
+    position: absolute;
+    right: 0px;
+    background-color: transparent;
+    color: rgb(158, 158, 158);
+    width: 32px;
+    height: 32px;
+    border-radius: 16px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s;
+    &:focus {
+      outline: none;
+    }
+    &:hover {
+      background-color: rgb(241, 241, 241);
+      color: var(--primary-color);
+    }
+  }
+}
+

package/dist/cjs/components/IntegerControl/IntegerControl.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type IntegerControlProps = {
+    onChange: (value: number) => void;
+    defaultValue?: number;
+    minimumValue?: number;
+    maximumValue?: number;
+    customStyle?: React.CSSProperties;
+};
+declare const IntegerControl: ({ onChange, defaultValue, minimumValue, maximumValue, customStyle, }: IntegerControlProps) => React.JSX.Element;
+export default IntegerControl;

package/dist/cjs/components/IntegerControl/IntegerControl.js

@@ -0,0 +1,52 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const IntegerControl_module_scss_1 = __importDefault(require("./IntegerControl.module.scss"));
+//icons
+const ai_1 = require("react-icons/ai");
+const IntegerControl = ({ onChange = () => { }, defaultValue = 0, minimumValue, maximumValue, customStyle, }) => {
+    const [currentValue, setCurrentValue] = (0, react_1.useState)(defaultValue);
+    return (react_1.default.createElement("div", { className: `${IntegerControl_module_scss_1.default["integer-control"]} ${currentValue === defaultValue ? IntegerControl_module_scss_1.default["default"] : ""}`, style: customStyle },
+        react_1.default.createElement("button", { onClick: () => {
+                setCurrentValue(currentValue - 1);
+                onChange(currentValue - 1);
+            } },
+            react_1.default.createElement(ai_1.AiFillMinusCircle, null)),
+        react_1.default.createElement("input", { onChange: (event) => {
+                const numericValue = Number(event.target.value);
+                setCurrentValue(numericValue);
+                onChange(numericValue);
+            }, value: currentValue, type: "number", defaultValue: String(defaultValue), min: String(minimumValue), max: String(maximumValue), style: { width: currentValue.toString().length + 1 + "ch" } }),
+        react_1.default.createElement("button", { onClick: () => {
+                setCurrentValue(currentValue + 1);
+                onChange(currentValue + 1);
+            } },
+            react_1.default.createElement(ai_1.AiFillPlusCircle, null))));
+};
+exports.default = IntegerControl;

package/dist/cjs/components/IntegerControl/IntegerControl.module.scss

@@ -0,0 +1,46 @@
+.integer-control {
+  display: flex;
+  align-items: center;
+  button {
+    border: none;
+    background: none;
+    padding: 0;
+    margin: 0;
+    svg {
+      height: 44px;
+      width: 44px;
+      fill: #c9c9c9;
+      transition: fill 100ms ease-in-out;
+      cursor: pointer;
+      &:active {
+        fill: #787878;
+      }
+    }
+  }
+  input {
+    border: none;
+    background: none;
+    padding: 0;
+    color: #414141;
+    text-align: center;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 32px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: normal;
+    min-width: 84px;
+    transition: color 300ms ease-in-out;
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    &:focus {
+      outline: transparent;
+    }
+  }
+  &.default {
+    input {
+      color: #787878;
+    }
+  }
+}

package/dist/cjs/components/LabeledInput/LabeledInput.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+type LabeledInputProps = {
+    label: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    width?: string;
+    height?: string;
+    backgroundColor?: string;
+    textAlign?: "left" | "center" | "right";
+    highlightError?: boolean;
+    errorMessage?: string;
+    inputProps?: React.ComponentProps<"input">;
+};
+declare const LabeledInput: ({ label, defaultValue, onChange, width, height, backgroundColor, textAlign, highlightError, errorMessage, inputProps, }: LabeledInputProps) => React.JSX.Element;
+export default LabeledInput;

package/dist/cjs/components/LabeledInput/LabeledInput.js

@@ -0,0 +1,47 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const LabeledInput_module_scss_1 = __importDefault(require("./LabeledInput.module.scss"));
+const LabeledInput = ({ label, defaultValue, onChange = () => { }, width = "328px", height = "66px", backgroundColor = "white", textAlign = "left", highlightError = false, errorMessage, inputProps, }) => {
+    const inputRef = (0, react_1.useRef)(null);
+    const [shrinkLabel, setShrinkLabel] = (0, react_1.useState)(defaultValue ? true : false);
+    return (react_1.default.createElement("div", { className: LabeledInput_module_scss_1.default["labeled-input"] + (highlightError ? ` ${LabeledInput_module_scss_1.default["error"]}` : ""), onClick: () => {
+            if (inputRef.current) {
+                inputRef.current.focus();
+            }
+        }, style: { width, height, backgroundColor } },
+        react_1.default.createElement("label", { className: shrinkLabel ? LabeledInput_module_scss_1.default["focused"] : "" }, label),
+        react_1.default.createElement("input", Object.assign({ ref: inputRef }, inputProps, { onFocus: () => setShrinkLabel(true), onBlur: (event) => {
+                if (!event.target.value) {
+                    setShrinkLabel(false);
+                }
+            }, defaultValue: defaultValue, onChange: (event) => onChange(event.target.value), style: { textAlign } })),
+        highlightError && errorMessage && (react_1.default.createElement("p", { className: LabeledInput_module_scss_1.default["error-message"] }, errorMessage))));
+};
+exports.default = LabeledInput;

package/dist/cjs/components/LabeledInput/LabeledInput.module.scss

@@ -0,0 +1,74 @@
+.labeled-input {
+  position: relative;
+  border-radius: 8px;
+  border: 2px solid #959595;
+  padding: 0px 28px;
+  background: #fff;
+  box-sizing: border-box;
+  transition: all 200ms ease-in-out;
+  cursor: pointer;
+  label {
+    z-index: 1;
+    position: absolute;
+    color: #959595;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    top: calc(50% - 10px);
+    left: 28px;
+    padding: 0;
+    transition: all 200ms ease-in-out;
+    user-select: none;
+    &.focused {
+      top: 2px;
+      left: 10px;
+      font-weight: 600;
+      font-size: 12px;
+      padding: 0px 5px;
+    }
+  }
+  input {
+    z-index: 2;
+    position: absolute;
+    top: calc(50% - 12px);
+    height: 24px;
+    width: calc(100% - 56px);
+    border: none;
+    outline: transparent;
+    background: transparent;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    color: #959595;
+    padding: 0;
+    cursor: pointer;
+    &:focus {
+      outline: transparent;
+      cursor: text;
+    }
+  }
+  &.error {
+    border-color: #f34d1b;
+    label {
+      color: #e17959;
+    }
+  }
+  .error-message {
+    position: absolute;
+    margin: 0;
+    top: calc(100% + 5px);
+    left: 5px;
+    color: #f34d1b;
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    padding: 0;
+    transition: all 200ms ease-in-out;
+  }
+}

package/dist/cjs/components/Modal/Modal.css

@@ -0,0 +1,43 @@
+.trc-modal,
+.trc-close-modal {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  backdrop-filter: blur(10px);
+  top: 0;
+  left: 0;
+  z-index: 1010;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation-name: trc-open-modal-animation;
+  animation-duration: 500ms;
+}
+
+.trc-close-modal {
+  animation-name: trc-close-modal-animation;
+  animation-duration: 500ms;
+}
+
+@keyframes trc-open-modal-animation {
+  from {
+    backdrop-filter: none;
+    opacity: 0;
+  }
+  to {
+    backdrop-filter: blur(10px);
+    opacity: 1;
+  }
+}
+
+@keyframes trc-close-modal-animation {
+  from {
+    backdrop-filter: blur(10px);
+    opacity: 1;
+  }
+  to {
+    backdrop-filter: none;
+    opacity: 0;
+    display: none;
+  }
+}

package/dist/cjs/components/Modal/Modal.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "./Modal.css";
+import { ModalPropsType } from "./types";
+declare const Modal: ({ children, visibility, forced, onOpen, onClose, transitionTime, }: ModalPropsType) => React.JSX.Element;
+export default Modal;