@addev-be/ui 0.3.2 → 0.3.3

package/dist/components/forms/index.js

@@ -0,0 +1,23 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Input = void 0;
+__exportStar(require("./Button"), exports);
+__exportStar(require("./Select"), exports);
+__exportStar(require("./IconButton"), exports);
+__exportStar(require("./IndeterminateCheckbox"), exports);
+var styles_1 = require("./styles");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return styles_1.Input; } });

package/dist/components/forms/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const inputStyle: import("styled-components").RuleSet<object>;
+export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;

package/dist/components/forms/styles.js

@@ -0,0 +1,34 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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.Input = exports.inputStyle = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+exports.inputStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: inherit;\n  font-size: inherit;\n  color: inherit;\n  border: 1px solid var(--color-gray-300);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1);\n  width: 100%;\n  box-sizing: border-box;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-500);\n  }\n"], ["\n  font-family: inherit;\n  font-size: inherit;\n  color: inherit;\n  border: 1px solid var(--color-gray-300);\n  border-radius: var(--rounded-md);\n  padding: var(--space-1);\n  width: 100%;\n  box-sizing: border-box;\n\n  &:focus {\n    outline: 2px solid var(--color-primary-500);\n  }\n"])));
+exports.Input = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), exports.inputStyle);
+var templateObject_1, templateObject_2;

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from './data';
+export * from './forms';
+export * from './layout';

package/dist/components/index.js

@@ -0,0 +1,19 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./data"), exports);
+__exportStar(require("./forms"), exports);
+__exportStar(require("./layout"), exports);

package/dist/components/layout/Dropdown/index.d.ts

@@ -0,0 +1,11 @@
+import * as styles from './styles';
+import { CSSProperties, FC, PropsWithChildren } from 'react';
+type DropdownProps = PropsWithChildren<styles.DropdownContainerProps & {
+    $sourceRect: DOMRect;
+    $autoPositionX?: boolean;
+    $autoPositionY?: boolean;
+    onClose?: () => void;
+    style?: CSSProperties;
+}>;
+export declare const Dropdown: FC<DropdownProps>;
+export {};

package/dist/components/layout/Dropdown/index.js

@@ -0,0 +1,85 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Dropdown = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles = __importStar(require("./styles"));
+var react_1 = require("react");
+var providers_1 = require("../../../providers");
+var getDropdownStyle = function (dropdown) {
+    var minHeight = Array.isArray(dropdown.$height)
+        ? dropdown.$height[0]
+        : dropdown.$height;
+    var maxHeight = Array.isArray(dropdown.$height)
+        ? dropdown.$height[1]
+        : dropdown.$height;
+    var bottomSpace = document.body.scrollHeight - dropdown.$sourceRect.bottom;
+    var topSpace = dropdown.$sourceRect.top;
+    var isDropdownBelow = !dropdown.$autoPositionY ||
+        bottomSpace > topSpace ||
+        bottomSpace >= minHeight;
+    var height = Math.max(Math.min(maxHeight, isDropdownBelow ? bottomSpace : topSpace), minHeight);
+    var rightSpace = document.body.scrollWidth - dropdown.$sourceRect.right;
+    var leftSpace = dropdown.$sourceRect.left;
+    var isDropdownRight = !dropdown.$autoPositionX ||
+        rightSpace > leftSpace ||
+        rightSpace >= dropdown.$width;
+    var dropdownStyle = __assign(__assign(__assign(__assign({}, (isDropdownBelow
+        ? { top: topSpace + dropdown.$sourceRect.height }
+        : { bottom: bottomSpace + dropdown.$sourceRect.height })), (isDropdownRight ? { left: leftSpace } : { right: rightSpace })), { width: dropdown.$width, height: height, minHeight: minHeight, maxHeight: maxHeight, boxSizing: 'border-box' }), dropdown.style);
+    return dropdownStyle;
+};
+var Dropdown = function (_a) {
+    var children = _a.children, onClose = _a.onClose, props = __rest(_a, ["children", "onClose"]);
+    var createPortal = (0, providers_1.usePortals)().createPortal;
+    var style = (0, react_1.useMemo)(function () { return getDropdownStyle(props); }, [props]);
+    var modalPortal = (0, react_1.useMemo)(function () {
+        return createPortal((0, jsx_runtime_1.jsx)(styles.DropdownBackdrop, { onClick: onClose, children: (0, jsx_runtime_1.jsx)(styles.DropdownContainer, __assign({}, props, { style: style, children: children })) }));
+    }, [children, createPortal, onClose, props, style]);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: modalPortal });
+};
+exports.Dropdown = Dropdown;

package/dist/components/layout/Dropdown/styles.d.ts

@@ -0,0 +1,11 @@
+export declare const DropdownBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;
+export type DropdownContainerProps = {
+    $width: number;
+    $height: number | number[];
+    $zIndex?: number;
+};
+export declare const DropdownContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, DropdownContainerProps>> & string;

package/dist/components/layout/Dropdown/styles.js

@@ -0,0 +1,45 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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.DropdownContainer = exports.DropdownBackdrop = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+exports.DropdownBackdrop = styled_components_1.default.div.attrs({
+    className: 'DropdownBackdrop',
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+exports.DropdownContainer = styled_components_1.default.div.attrs({
+    className: 'DropdownContainer',
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: var(--color-neutral-0);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-lg);\n  outline: 1px solid var(--color-neutral-200);\n\n  position: absolute;\n  z-index: 1001;\n  ", ";\n  ", "\n"], ["\n  background: var(--color-neutral-0);\n  border-radius: var(--rounded-md);\n  box-shadow: var(--shadow-lg);\n  outline: 1px solid var(--color-neutral-200);\n\n  position: absolute;\n  z-index: 1001;\n  ", ";\n  ", "\n"])), function (_a) {
+    var $width = _a.$width;
+    return ($width ? "".concat($width, "px") : 'auto');
+}, function (_a) {
+    var $height = _a.$height;
+    return Array.isArray($height)
+        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          min-height: ", "px;\n          max-height: ", "px;\n        "], ["\n          min-height: ", "px;\n          max-height: ", "px;\n        "])), $height[0], $height[1]) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          height: ", ";\n        "], ["\n          height: ", ";\n        "])), $height ? "".concat($height, "px") : 'auto');
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/components/layout/Loading/index.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+type LoadingProps = PropsWithChildren<{
+    visible?: boolean;
+}>;
+export declare const Loading: FC<LoadingProps>;
+export {};

package/dist/components/layout/Loading/index.js

@@ -0,0 +1,42 @@
+"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.Loading = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles = __importStar(require("./styles"));
+var react_1 = require("react");
+var Icons_1 = require("../../../Icons");
+var providers_1 = require("../../../providers");
+var Loading = function (_a) {
+    var visible = _a.visible, children = _a.children;
+    var createPortal = (0, providers_1.usePortals)().createPortal;
+    var loadingPortal = (0, react_1.useMemo)(function () {
+        return visible
+            ? createPortal((0, jsx_runtime_1.jsxs)(styles.LoadingBackdrop, { children: [(0, jsx_runtime_1.jsx)(Icons_1.LoadingIcon, {}), (0, jsx_runtime_1.jsx)(styles.LoadingContainer, { children: children || 'Loading ...' })] }))
+            : null;
+    }, [children, createPortal, visible]);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: loadingPortal });
+};
+exports.Loading = Loading;

package/dist/components/layout/Loading/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const LoadingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const LoadingBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;

package/dist/components/layout/Loading/styles.js

@@ -0,0 +1,18 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingBackdrop = exports.LoadingContainer = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.LoadingContainer = styled_components_1.default.div.attrs({
+    className: 'LoadingContent',
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: var(--space-4);\n"], ["\n  padding: var(--space-4);\n"])));
+exports.LoadingBackdrop = styled_components_1.default.div.attrs({
+    className: 'LoadingBackdrop',
+})(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 1100;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  color: var(--color-gray-50);\n  fill: var(--color-gray-50);\n  & > svg {\n    width: var(--space-8);\n    height: var(--space-8);\n  }\n"], ["\n  position: fixed;\n  z-index: 1100;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  color: var(--color-gray-50);\n  fill: var(--color-gray-50);\n  & > svg {\n    width: var(--space-8);\n    height: var(--space-8);\n  }\n"])));
+var templateObject_1, templateObject_2;

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

@@ -0,0 +1,16 @@
+import * as styles from './styles';
+import { FC, PropsWithChildren } from 'react';
+type ModalProps = PropsWithChildren<styles.ModalContainerProps & {
+    closeOnBackdropClick?: boolean;
+    onClose?: () => void;
+}>;
+type ModalFC = FC<ModalProps> & {
+    Header: typeof styles.ModalHeader;
+    Message: typeof styles.ModalMessage;
+    Content: typeof styles.ModalContent;
+    ContentWithIcon: typeof styles.ModalContentWithIcon;
+    Footer: typeof styles.ModalFooter;
+    Buttons: typeof styles.ModalButtons;
+};
+export declare const Modal: ModalFC;
+export {};

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

@@ -0,0 +1,67 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Modal = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles = __importStar(require("./styles"));
+var react_1 = require("react");
+var providers_1 = require("../../../providers");
+var Modal = function (_a) {
+    var children = _a.children, closeOnBackdropClick = _a.closeOnBackdropClick, onClose = _a.onClose, props = __rest(_a, ["children", "closeOnBackdropClick", "onClose"]);
+    var createPortal = (0, providers_1.usePortals)().createPortal;
+    var modalPortal = (0, react_1.useMemo)(function () {
+        return createPortal((0, jsx_runtime_1.jsx)(styles.ModalBackdrop, { onClick: closeOnBackdropClick ? onClose : undefined, children: (0, jsx_runtime_1.jsx)(styles.ModalContainer, __assign({}, props, { children: children })) }));
+    }, [children, closeOnBackdropClick, createPortal, onClose, props]);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: modalPortal });
+};
+exports.Modal = Modal;
+exports.Modal.Header = styles.ModalHeader;
+exports.Modal.Message = styles.ModalMessage;
+exports.Modal.Content = styles.ModalContent;
+exports.Modal.ContentWithIcon = styles.ModalContentWithIcon;
+exports.Modal.Footer = styles.ModalFooter;
+exports.Modal.Buttons = styles.ModalButtons;

package/dist/components/layout/Modal/styles.d.ts

@@ -0,0 +1,32 @@
+export declare const ModalBackdrop: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;
+export type ModalContainerProps = {
+    $width?: number;
+    $height?: number;
+    $zIndex?: number;
+    $fullscreen?: boolean;
+};
+export declare const ModalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, ModalContainerProps>> & string;
+export declare const ModalHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const ModalMessage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & {
+    ref?: ((instance: HTMLParagraphElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLParagraphElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const ModalContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const ModalContentWithIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const ModalFooter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>> & string;
+export declare const ModalButtons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>, import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}>, never>, never>>, never>, never>> & string;

package/dist/components/layout/Modal/styles.js

@@ -0,0 +1,52 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+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.ModalButtons = exports.ModalFooter = exports.ModalContentWithIcon = exports.ModalContent = exports.ModalMessage = exports.ModalHeader = exports.ModalContainer = exports.ModalBackdrop = void 0;
+var styled_components_1 = __importStar(require("styled-components"));
+exports.ModalBackdrop = styled_components_1.default.div.attrs({
+    className: 'ModalBackdrop',
+})(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: fixed;\n  z-index: 1000;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+exports.ModalContainer = styled_components_1.default.div.attrs({
+    className: 'ModalContainer',
+})(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: var(--color-neutral-100);\n  border-radius: var(--rounded-lg);\n  box-shadow: var(--shadow-lg);\n  display: flex;\n  flex-direction: column;\n  max-height: 100vh;\n  overflow: hidden;\n\n  position: fixed;\n  z-index: 1001;\n  ", "\n"], ["\n  background: var(--color-neutral-100);\n  border-radius: var(--rounded-lg);\n  box-shadow: var(--shadow-lg);\n  display: flex;\n  flex-direction: column;\n  max-height: 100vh;\n  overflow: hidden;\n\n  position: fixed;\n  z-index: 1001;\n  ", "\n"])), function (_a) {
+    var $fullscreen = _a.$fullscreen, $width = _a.$width, $height = _a.$height;
+    return $fullscreen
+        ? (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          margin: var(--space-4);\n        "], ["\n          top: 0;\n          left: 0;\n          right: 0;\n          bottom: 0;\n          margin: var(--space-4);\n        "]))) : (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          width: ", ";\n          height: ", ";\n        "], ["\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          width: ", ";\n          height: ", ";\n        "])), $width ? "".concat($width, "px") : 'auto', $height ? "".concat($height, "px") : 'auto');
+});
+exports.ModalHeader = styled_components_1.default.div.attrs({ className: 'ModalHeader' })(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  font-weight: bold;\n  font-size: var(--text-lg);\n  padding: var(--space-2);\n  background-color: var(--color-neutral-200);\n  padding: var(--space-4);\n"], ["\n  font-weight: bold;\n  font-size: var(--text-lg);\n  padding: var(--space-2);\n  background-color: var(--color-neutral-200);\n  padding: var(--space-4);\n"])));
+exports.ModalMessage = styled_components_1.default.p.attrs({ className: 'ModalMessage' })(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  margin-bottom: 1rem;\n"], ["\n  margin-bottom: 1rem;\n"])));
+exports.ModalContent = styled_components_1.default.div.attrs({ className: 'ModalContent' })(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: auto;\n  padding: var(--space-4);\n"], ["\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  overflow: auto;\n  padding: var(--space-4);\n"])));
+exports.ModalContentWithIcon = styled_components_1.default.div.attrs({
+    className: 'ModalContentWithIcon',
+})(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  padding: var(--space-4);\n  gap: var(--space-2);\n\n  & > svg {\n    margin: var(--space-2);\n    width: var(--space-8);\n    height: var(--space-8);\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  padding: var(--space-4);\n  gap: var(--space-2);\n\n  & > svg {\n    margin: var(--space-2);\n    width: var(--space-8);\n    height: var(--space-8);\n  }\n"])));
+exports.ModalFooter = styled_components_1.default.div.attrs({ className: 'ModalFooter' })(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: var(--space-2);\n  background-color: var(--color-neutral-200);\n  padding: var(--space-4);\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  padding: var(--space-2);\n  background-color: var(--color-neutral-200);\n  padding: var(--space-4);\n"])));
+exports.ModalButtons = (0, styled_components_1.default)(exports.ModalFooter).attrs({
+    className: 'ModalButtons',
+})(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-2);\n\n  button.right:first-of-type {\n    margin-left: auto;\n  }\n"], ["\n  display: flex;\n  flex-direction: row;\n  gap: var(--space-2);\n\n  button.right:first-of-type {\n    margin-left: auto;\n  }\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;

package/dist/components/layout/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Dropdown';
+export * from './Modal';
+export * from './Loading';

package/dist/components/layout/index.js

@@ -0,0 +1,19 @@
+"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Dropdown"), exports);
+__exportStar(require("./Modal"), exports);
+__exportStar(require("./Loading"), exports);

package/dist/components/ui/ContextMenu/index.d.ts

@@ -0,0 +1,11 @@
+import { Divider, MenuItemContainer, SubMenu } from './styles';
+import { FC, HTMLAttributes, PropsWithChildren } from 'react';
+type ContextMenuFC = FC<PropsWithChildren<HTMLAttributes<HTMLDivElement>>> & {
+    Item: typeof MenuItemContainer;
+    ParentItem: typeof ParentMenuItem;
+    Divider: typeof Divider;
+    SubMenu: typeof SubMenu;
+};
+export declare const ContextMenu: ContextMenuFC;
+export declare const ParentMenuItem: FC<HTMLAttributes<HTMLDivElement>>;
+export {};

package/dist/components/ui/ContextMenu/index.js

@@ -0,0 +1,58 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParentMenuItem = exports.ContextMenu = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styles_1 = require("./styles");
+var react_1 = require("react");
+var ContextMenu = function (_a) {
+    var children = _a.children;
+    return ((0, jsx_runtime_1.jsx)(styles_1.MenuContainer, { onClick: function (e) { return e.stopPropagation(); }, children: children }));
+};
+exports.ContextMenu = ContextMenu;
+var ParentMenuItem = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    var _b = (0, react_1.useState)(false), isOpened = _b[0], setIsOpened = _b[1];
+    var _c = (0, react_1.useState)(null), currentTimeout = _c[0], setCurrentTimeout = _c[1];
+    var stopTimeout = (0, react_1.useCallback)(function () {
+        if (currentTimeout) {
+            clearTimeout(currentTimeout);
+        }
+        setCurrentTimeout(null);
+    }, [currentTimeout]);
+    var startTimeout = (0, react_1.useCallback)(function (open) {
+        stopTimeout();
+        setCurrentTimeout(window.setTimeout(function () {
+            setIsOpened(open);
+        }, open ? 100 : 300));
+    }, [stopTimeout]);
+    var open = (0, react_1.useCallback)(function () { return startTimeout(true); }, [startTimeout]);
+    var close = (0, react_1.useCallback)(function () { return startTimeout(false); }, [startTimeout]);
+    return ((0, jsx_runtime_1.jsx)(styles_1.MenuItemContainer, __assign({}, props, { className: isOpened ? 'opened' : '', onMouseEnter: open, onMouseLeave: close, "$withArrow": true, children: children })));
+};
+exports.ParentMenuItem = ParentMenuItem;
+exports.ContextMenu.Item = styles_1.MenuItemContainer;
+exports.ContextMenu.ParentItem = exports.ParentMenuItem;
+exports.ContextMenu.Divider = styles_1.Divider;
+exports.ContextMenu.SubMenu = styles_1.SubMenu;