@symply.io/basic-components 1.0.0-alpha.1

package/FormSelector/MultipleSelector.js

@@ -0,0 +1,34 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Select from "@mui/material/Select";
+import Tooltip from "@mui/material/Tooltip";
+import MenuItem from "@mui/material/MenuItem";
+import InputLabel from "@mui/material/InputLabel";
+import FormControl from "@mui/material/FormControl";
+import FormHelperText from "@mui/material/FormHelperText";
+import useInteractions from "./useInteractions";
+function MultipleSelector(props) {
+    var name = props.name, label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, tooltip = props.tooltip, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.multiple, multiple = _c === void 0 ? false : _c, _d = props.showHelperText, showHelperText = _d === void 0 ? false : _d, helperText = props.helperText, _e = props.error, error = _e === void 0 ? false : _e, _f = props.options, options = _f === void 0 ? [] : _f, onChange = props.onChange;
+    var _g = useInteractions(), tooltipOpen = _g.tooltipOpen, onOpenTooltip = _g.onOpenTooltip, onCloseTooltip = _g.onCloseTooltip;
+    return (_jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, error: error }, { children: [label && _jsx(InputLabel, __assign({ id: "symply-multiple-select" }, { children: label }), void 0), _jsx(Select, __assign({ value: value, name: name, disabled: disabled, multiple: true, onChange: function (event) {
+                        var _a;
+                        onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
+                    }, inputProps: {
+                        onFocus: onOpenTooltip,
+                        onBlur: onCloseTooltip,
+                    }, label: label, renderValue: multiple ? function (selected) { return selected.join("; "); } : undefined }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
+                        var _a = option, label = _a.label, value = _a.value;
+                        return (_jsx(MenuItem, __assign({ value: value }, { children: label }), value));
+                    })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }), void 0)) }), void 0), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }, void 0))] }), void 0) }), void 0));
+}
+export default MultipleSelector;

package/FormSelector/SimpleSelector.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SimpleSelectorProps } from "./types";
+declare function SimpleSelector(props: SimpleSelectorProps): JSX.Element;
+export default SimpleSelector;

package/FormSelector/SimpleSelector.js

@@ -0,0 +1,34 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Select from "@mui/material/Select";
+import Tooltip from "@mui/material/Tooltip";
+import MenuItem from "@mui/material/MenuItem";
+import InputLabel from "@mui/material/InputLabel";
+import FormControl from "@mui/material/FormControl";
+import FormHelperText from "@mui/material/FormHelperText";
+import useInteractions from "./useInteractions";
+function SimpleSelector(props) {
+    var name = props.name, label = props.label, _a = props.variant, variant = _a === void 0 ? "outlined" : _a, value = props.value, tooltip = props.tooltip, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.showHelperText, showHelperText = _c === void 0 ? false : _c, helperText = props.helperText, _d = props.error, error = _d === void 0 ? false : _d, _e = props.options, options = _e === void 0 ? [] : _e, onChange = props.onChange;
+    var _f = useInteractions(), tooltipOpen = _f.tooltipOpen, onOpenTooltip = _f.onOpenTooltip, onCloseTooltip = _f.onCloseTooltip;
+    return (_jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsxs(FormControl, __assign({ variant: variant, disabled: disabled, error: error }, { children: [label && _jsx(InputLabel, __assign({ id: "symply-simple-selector" }, { children: label }), void 0), _jsx(Select, __assign({ value: value, name: name, disabled: disabled, onChange: function (event) {
+                        var _a;
+                        onChange((_a = event === null || event === void 0 ? void 0 : event.target) === null || _a === void 0 ? void 0 : _a.value);
+                    }, inputProps: {
+                        onFocus: onOpenTooltip,
+                        onBlur: onCloseTooltip,
+                    }, label: label }, { children: (options === null || options === void 0 ? void 0 : options.length) > 0 ? (options.map(function (option) {
+                        var label = option.label, value = option.value, disabled = option.disabled;
+                        return (_jsx(MenuItem, __assign({ value: value, disabled: disabled }, { children: label }), value));
+                    })) : (_jsx(MenuItem, __assign({ value: "", disabled: true }, { children: "No Options" }), void 0)) }), void 0), !!helperText && showHelperText && (_jsx(FormHelperText, { children: showHelperText }, void 0))] }), void 0) }), void 0));
+}
+export default SimpleSelector;

package/FormSelector/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SimpleSelector } from "./SimpleSelector";
+export { default as MultipleSelector } from "./MultipleSelector";
+export * from "./types";

package/FormSelector/index.js

@@ -0,0 +1,3 @@
+export { default as SimpleSelector } from "./SimpleSelector";
+export { default as MultipleSelector } from "./MultipleSelector";
+export * from "./types";

package/FormSelector/types.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+import { SelectProps } from "@mui/material/Select";
+interface SelectorBaseProps {
+    name?: string;
+    label?: string;
+    tooltip?: ReactNode;
+    variant?: SelectProps["variant"];
+    disabled?: SelectProps["disabled"];
+    showHelperText?: boolean;
+    helperText?: string;
+    error?: boolean;
+    multiple?: SelectProps["multiple"];
+    options: Array<{
+        label: string;
+        value: string | number;
+        disabled?: boolean;
+    }>;
+}
+export interface SimpleSelectorProps extends SelectorBaseProps {
+    value: number | string;
+    onChange: (value: string | number) => void;
+}
+export interface MultipleSelectorProps extends SelectorBaseProps {
+    value: Array<number> | Array<string>;
+    onChange: (value: string | Array<number> | Array<string>) => void;
+}
+export {};

package/FormSelector/types.js

@@ -0,0 +1 @@
+export {};

package/FormSelector/useInteractions.d.ts

@@ -0,0 +1,6 @@
+declare function useInteractions(): {
+    tooltipOpen: boolean;
+    onOpenTooltip: () => void;
+    onCloseTooltip: () => void;
+};
+export default useInteractions;

package/FormSelector/useInteractions.js

@@ -0,0 +1,12 @@
+import { useState, useCallback } from 'react';
+function useInteractions() {
+    var _a = useState(false), tooltipOpen = _a[0], setTooltipOpen = _a[1];
+    var onOpenTooltip = useCallback(function () {
+        setTooltipOpen(true);
+    }, []);
+    var onCloseTooltip = useCallback(function () {
+        setTooltipOpen(false);
+    }, []);
+    return { tooltipOpen: tooltipOpen, onOpenTooltip: onOpenTooltip, onCloseTooltip: onCloseTooltip };
+}
+export default useInteractions;

package/HelpCaption/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface HelpCaptionProps {
+    mainCaption: string;
+    subCaption?: string;
+    linkUrl?: string;
+    linkText?: string;
+    linkType?: "WEBPAGE" | "VIDEO";
+}
+declare function HelpCaption(props: HelpCaptionProps): JSX.Element;
+export default HelpCaption;

package/HelpCaption/index.js

@@ -0,0 +1,34 @@
+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);
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import Grid from "@mui/material/Grid";
+import Typography from "@mui/material/Typography";
+import useTheme from "@mui/material/styles/useTheme";
+import VideoPlayerModal from "../VideoPlayerModal";
+import useInteractions from "./useInteractions";
+function HelpCaption(props) {
+    var mainCaption = props.mainCaption, subCaption = props.subCaption, linkUrl = props.linkUrl, _a = props.linkText, linkText = _a === void 0 ? "Watch Demo" : _a, _b = props.linkType, linkType = _b === void 0 ? "WEBPAGE" : _b;
+    var theme = useTheme();
+    var _c = useInteractions(), videoModalOpen = _c.videoModalOpen, onOpenVideoModal = _c.onOpenVideoModal, onCloseVideoModal = _c.onCloseVideoModal;
+    return (_jsxs(Grid, __assign({ container: true, spacing: 1, direction: subCaption ? "column" : "row" }, { children: [_jsx(Grid, __assign({ item: true }, { children: _jsx(Typography, __assign({ align: "left", component: "span" }, { children: mainCaption }), void 0) }), void 0), _jsxs(Grid, __assign({ item: true }, { children: [subCaption && (_jsxs(_Fragment, { children: [_jsx(Typography, __assign({ align: "left", component: "span" }, { children: subCaption }), void 0), "\u00A0"] }, void 0)), linkUrl && (_jsx(Typography, __assign({ onClick: linkType === "WEBPAGE"
+                            ? function () {
+                                window.open(linkUrl);
+                            }
+                            : onOpenVideoModal, align: "left", color: "primary", component: "span", sx: {
+                            cursor: "pointer",
+                            "&:hover": {
+                                color: theme.palette.primary.dark,
+                                textDecoration: "underline",
+                            },
+                        } }, { children: _jsx("b", { children: linkText }, void 0) }), void 0))] }), void 0), linkUrl && (_jsx(VideoPlayerModal, { open: videoModalOpen, url: linkUrl, onClose: onCloseVideoModal }, void 0))] }), void 0));
+}
+export default HelpCaption;

package/HelpCaption/useInteractions.d.ts

@@ -0,0 +1,6 @@
+declare function useInteractions(): {
+    videoModalOpen: boolean;
+    onOpenVideoModal: () => void;
+    onCloseVideoModal: () => void;
+};
+export default useInteractions;

package/HelpCaption/useInteractions.js

@@ -0,0 +1,12 @@
+import { useState } from 'react';
+function useInteractions() {
+    var _a = useState(false), videoModalOpen = _a[0], setVideoModalOpen = _a[1];
+    function onOpenVideoModal() {
+        setVideoModalOpen(true);
+    }
+    function onCloseVideoModal() {
+        setVideoModalOpen(false);
+    }
+    return { videoModalOpen: videoModalOpen, onOpenVideoModal: onOpenVideoModal, onCloseVideoModal: onCloseVideoModal };
+}
+export default useInteractions;

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Symply Software Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/LoadingModal/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { LoadingModalProps } from "./types";
+declare function LoadingModal(props: LoadingModalProps): JSX.Element;
+export default LoadingModal;
+export * from "./types";

package/LoadingModal/index.js

@@ -0,0 +1,27 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import Typography from "@mui/material/Typography";
+import CircularProgress from "@mui/material/CircularProgress";
+function LoadingModal(props) {
+    var open = props.open, _a = props.text, text = _a === void 0 ? "Loading..." : _a, _b = props.direction, direction = _b === void 0 ? "column" : _b, _c = props.showProgess, showProgess = _c === void 0 ? false : _c, _d = props.percent, percent = _d === void 0 ? 0 : _d;
+    return (_jsx(Dialog, __assign({ maxWidth: "xs", open: open, sx: { backgroundColor: "#7A7A7A97" }, PaperProps: { sx: { backgroundColor: "#F2F2F2CF" } }, onClose: function (_, reason) {
+            if (reason === "backdropClick")
+                return;
+        }, disableEscapeKeyDown: true }, { children: _jsx(DialogContent, { children: _jsxs(Grid, __assign({ container: true, direction: direction, justifyContent: "space-between", alignItems: "center", "data-testid": "loading-grid" }, { children: [_jsxs(Box, __assign({ position: "relative", display: "inline-flex", sx: { mt: 1.25 } }, { children: [_jsx(CircularProgress, { size: showProgess ? 56 : 40, value: percent, variant: showProgess ? "determinate" : "indeterminate" }, void 0), showProgess && percent >= 0 && (_jsx(Box, __assign({ top: 0, left: 0, bottom: 0, right: 0, position: "absolute", display: "flex", alignItems: "center", justifyContent: "center" }, { children: _jsxs(Typography, __assign({ variant: "caption" }, { children: [Math.round(percent), "%"] }), void 0) }), void 0))] }), void 0), _jsx(Typography, __assign({ variant: "subtitle1", component: "span", sx: { mt: 1 } }, { children: text }), void 0)] }), void 0) }, void 0) }), void 0));
+}
+export default LoadingModal;
+export * from "./types";

package/LoadingModal/types.d.ts

@@ -0,0 +1,8 @@
+import { GridProps } from "@mui/material/Grid";
+export interface LoadingModalProps {
+    open: boolean;
+    text?: string;
+    direction?: GridProps["direction"];
+    showProgess?: boolean;
+    percent?: number;
+}

package/LoadingModal/types.js

@@ -0,0 +1 @@
+export {};

package/MenuButtonGroup/MenuItem.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { MenuItemProps } from "@mui/material/MenuItem";
+import { ListItemIconProps } from "@mui/material/ListItemIcon";
+export interface ButtonItemProps {
+    buttonText: string;
+    buttonIcon?: ListItemIconProps["children"];
+    disabled?: boolean;
+    onClick: MenuItemProps["onClick"];
+}
+declare function ButtonMenuItem(props: ButtonItemProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof ButtonMenuItem>;
+export default _default;

package/MenuButtonGroup/MenuItem.js

@@ -0,0 +1,21 @@
+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);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import MenuItem from "@mui/material/MenuItem";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+function ButtonMenuItem(props) {
+    var buttonText = props.buttonText, buttonIcon = props.buttonIcon, _a = props.disabled, disabled = _a === void 0 ? false : _a, onClick = props.onClick;
+    return (_jsxs(MenuItem, __assign({ onClick: onClick, disabled: disabled }, { children: [buttonIcon && _jsx(ListItemIcon, { children: buttonIcon }, void 0), _jsx(ListItemText, { primary: buttonText }, void 0)] }), void 0));
+}
+export default memo(ButtonMenuItem);

package/MenuButtonGroup/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ButtonProps } from "@mui/material/Button";
+import { ButtonItemProps } from "./MenuItem";
+export interface MenuButtonGroupProps {
+    buttonText: string;
+    disabled?: boolean;
+    size?: ButtonProps["size"];
+    variant?: ButtonProps["variant"];
+    color?: ButtonProps["color"];
+    buttons: Array<ButtonItemProps>;
+}
+declare function MenuButtonGroup(props: MenuButtonGroupProps): JSX.Element;
+export default MenuButtonGroup;

package/MenuButtonGroup/index.js

@@ -0,0 +1,100 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+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;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import Menu from "@mui/material/Menu";
+import Button from "@mui/material/Button";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import ButtonItem from "./MenuItem";
+function MenuButtonGroup(props) {
+    var _this = this;
+    var buttonText = props.buttonText, buttons = props.buttons, size = props.size, _a = props.color, color = _a === void 0 ? "primary" : _a, _b = props.disabled, disabled = _b === void 0 ? false : _b, _c = props.variant, variant = _c === void 0 ? "outlined" : _c;
+    var _d = useState(null), anchorEl = _d[0], setAnchorEl = _d[1];
+    function onClick(event) {
+        setAnchorEl(event.currentTarget);
+    }
+    var onClose = function () {
+        setAnchorEl(null);
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(Button, __assign({ "aria-controls": "customized-menu", "data-nw": "download-button", "aria-haspopup": "true", variant: variant, color: color, onClick: onClick, fullWidth: true, size: size, endIcon: _jsx(ArrowDropDownIcon, { fontSize: "small" }, void 0), disabled: disabled }, { children: buttonText }), void 0), _jsx(Menu, __assign({ id: "button-menu", anchorEl: anchorEl, keepMounted: true, elevation: 2, anchorOrigin: {
+                    vertical: "bottom",
+                    horizontal: "center",
+                }, transformOrigin: {
+                    vertical: "top",
+                    horizontal: "center",
+                }, open: Boolean(anchorEl), onClose: onClose }, { children: buttons.map(function (button) {
+                    var onClick = button.onClick, buttonText = button.buttonText, rest = __rest(button, ["onClick", "buttonText"]);
+                    return (_jsx(ButtonItem, __assign({ buttonText: buttonText }, rest, { onClick: function (event) { return __awaiter(_this, void 0, void 0, function () {
+                            return __generator(this, function (_a) {
+                                switch (_a.label) {
+                                    case 0:
+                                        if (!onClick) return [3, 2];
+                                        return [4, onClick(event)];
+                                    case 1:
+                                        _a.sent();
+                                        _a.label = 2;
+                                    case 2:
+                                        onClose();
+                                        return [2];
+                                }
+                            });
+                        }); } }), buttonText));
+                }) }), void 0)] }, void 0));
+}
+export default MenuButtonGroup;

package/NumberInput/index.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { TextFieldProps } from "@mui/material/TextField";
+declare type TextProps = Omit<TextFieldProps, "onChange">;
+export interface NumberInputProps {
+    onChange: (value: string) => void;
+    value: string;
+    integerOnly?: boolean;
+    tooltip?: string;
+    maxValue?: number;
+    minValue?: number;
+}
+declare function NumberInput(props: NumberInputProps & TextProps): JSX.Element;
+export default NumberInput;

package/NumberInput/index.js

@@ -0,0 +1,38 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Tooltip from "@mui/material/Tooltip";
+import Field from "@mui/material/TextField";
+import useInteractions from "./useInteractions";
+function NumberInput(props) {
+    var onChange = props.onChange, value = props.value, _a = props.size, size = _a === void 0 ? "small" : _a, tooltip = props.tooltip, _b = props.integerOnly, integerOnly = _b === void 0 ? false : _b, _c = props.minValue, minValue = _c === void 0 ? Number.MIN_SAFE_INTEGER : _c, _d = props.maxValue, maxValue = _d === void 0 ? Number.MAX_SAFE_INTEGER : _d, error = props.error, helperText = props.helperText, rest = __rest(props, ["onChange", "value", "size", "tooltip", "integerOnly", "minValue", "maxValue", "error", "helperText"]);
+    var EXCEED_ERROR = "Your value exceeds the exceptable input range";
+    if (maxValue < minValue)
+        throw new Error("Max should be bigger than min!");
+    var _e = useInteractions({ maxValue: maxValue, minValue: minValue, value: value, onChange: onChange }), exceedError = _e.exceedError, tooltipOpen = _e.tooltipOpen, handleBlur = _e.handleBlur, handleChange = _e.handleChange, onOpenTooltip = _e.onOpenTooltip, onCloseTooltip = _e.onCloseTooltip;
+    return (_jsx(Tooltip, __assign({ title: tooltip !== null && tooltip !== void 0 ? tooltip : "", open: !!tooltip && tooltipOpen }, { children: _jsx(Field, __assign({ size: size, margin: "dense", type: "number", value: value === undefined || value === null ? "" : value, onFocus: onOpenTooltip, onBlur: function () {
+                onCloseTooltip();
+                handleBlur();
+            }, onChange: handleChange, error: error || exceedError, helperText: helperText || (exceedError ? EXCEED_ERROR : "") }, rest), void 0) }), void 0));
+}
+export default NumberInput;

package/NumberInput/useInteractions.d.ts

@@ -0,0 +1,17 @@
+import { ChangeEvent } from "react";
+interface InteractionProps {
+    value: string;
+    integerOnly?: boolean;
+    maxValue?: number;
+    minValue?: number;
+    onChange: (value: string) => void;
+}
+declare function useInteractions(props: InteractionProps): {
+    exceedError: boolean;
+    tooltipOpen: boolean;
+    handleBlur: () => void;
+    handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onOpenTooltip: () => void;
+    onCloseTooltip: () => void;
+};
+export default useInteractions;

package/NumberInput/useInteractions.js

@@ -0,0 +1,54 @@
+import { useState, useCallback, useMemo } from "react";
+function useInteractions(props) {
+    var value = props.value, integerOnly = props.integerOnly, _a = props.minValue, minValue = _a === void 0 ? Number.MIN_SAFE_INTEGER : _a, _b = props.maxValue, maxValue = _b === void 0 ? Number.MAX_SAFE_INTEGER : _b, onChange = props.onChange;
+    var _c = useState(false), tooltipOpen = _c[0], setTooltipOpen = _c[1];
+    var exceedError = useMemo(function () { return !!value && (Number(value) < minValue || Number(value) > maxValue); }, []);
+    var handleChange = useCallback(function (event) {
+        event.preventDefault();
+        var val = event.currentTarget.value;
+        if (val !== "" && minValue >= 0 && val.includes("-"))
+            return;
+        if (integerOnly) {
+            if (val !== "" && val !== "-" && !/^\d+$/g.test(val))
+                return;
+        }
+        else if (val !== "" && val !== "-" && !/^(-?\d*)(\.\d*)?$/g.test(val))
+            return;
+        onChange(val);
+    }, []);
+    var handleBlur = useCallback(function () {
+        var excludedValue = [
+            null,
+            undefined,
+            ".",
+            "",
+            "-",
+            "-.",
+            "null",
+            "undefined",
+        ];
+        var strVal = String(value).trim();
+        if (strVal !== null && strVal.lastIndexOf(".") === strVal.length - 1) {
+            var newValue = strVal.substring(0, String(value).length - 1);
+            onChange(newValue);
+        }
+        else if (excludedValue.includes(strVal)) {
+            onChange("");
+        }
+    }, []);
+    var onOpenTooltip = useCallback(function () {
+        setTooltipOpen(true);
+    }, []);
+    var onCloseTooltip = useCallback(function () {
+        setTooltipOpen(false);
+    }, []);
+    return {
+        exceedError: exceedError,
+        tooltipOpen: tooltipOpen,
+        handleBlur: handleBlur,
+        handleChange: handleChange,
+        onOpenTooltip: onOpenTooltip,
+        onCloseTooltip: onCloseTooltip,
+    };
+}
+export default useInteractions;

package/PasswordInput/ConfirmPassword.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TextFieldProps } from "@mui/material/TextField";
+declare type TextInputProps = Omit<TextFieldProps, "onChange">;
+export interface ConfirmPasswordProps {
+    password: string;
+    value: string;
+    onChange: (value: string) => void;
+}
+declare function ConfirmPassword(props: ConfirmPasswordProps & TextInputProps): JSX.Element;
+export default ConfirmPassword;

package/PasswordInput/ConfirmPassword.js

@@ -0,0 +1,38 @@
+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;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import TextField from "@mui/material/TextField";
+function ConfirmPassword(props) {
+    var password = props.password, _a = props.helperText, helperText = _a === void 0 ? "Passwords do not match" : _a, value = props.value, _b = props.label, label = _b === void 0 ? "Confirm Password" : _b, _c = props.name, name = _c === void 0 ? "confirmPassword" : _c, _d = props.variant, variant = _d === void 0 ? "outlined" : _d, _e = props.margin, margin = _e === void 0 ? "dense" : _e, disabled = props.disabled, onChange = props.onChange, rest = __rest(props, ["password", "helperText", "value", "label", "name", "variant", "margin", "disabled", "onChange"]);
+    var isMatched = useMemo(function () {
+        if ((value === null || value === void 0 ? void 0 : value.length) > 0 && password === value) {
+            return true;
+        }
+        return false;
+    }, [value, password]);
+    return (_jsx(TextField, __assign({ error: !isMatched, label: label, value: value, variant: variant, margin: margin, disabled: disabled, type: "password", size: "small", helperText: !isMatched && helperText, onChange: function (event) {
+            onChange(event.target.value);
+        }, fullWidth: true, required: true }, rest), void 0));
+}
+export default ConfirmPassword;

package/PasswordInput/Password.d.ts

@@ -0,0 +1,18 @@
+import { CSSProperties } from "react";
+import { TextFieldProps } from "@mui/material/TextField";
+declare type TextInputProps = Omit<TextFieldProps, "onChange">;
+export interface PasswordStrategyProps {
+    [key: string]: {
+        label: string;
+        regex: RegExp;
+    };
+}
+export interface PasswordProps {
+    strategies: PasswordStrategyProps;
+    value: string;
+    successColor?: CSSProperties["color"];
+    onChange: (value: string) => void;
+    onVerify?: (value: string) => boolean;
+}
+declare function Password(props: PasswordProps & TextInputProps): JSX.Element;
+export default Password;