@symply.io/basic-components 1.4.0-alpha.5 → 1.4.0-alpha.7

package/AlertDialog/index.d.ts

@@ -1,4 +1,4 @@
-import { AlertDialogProps } from "./types";
+import type { AlertDialogProps } from "./types";
 declare const AlertDialog: (props: AlertDialogProps) => JSX.Element;
 export default AlertDialog;
-export * from "./types";
+export type { AlertDialogProps };

package/AlertDialog/index.js

@@ -45,4 +45,3 @@ var AlertDialog = function (props) {
             }, "aria-labelledby": "alert-dialog-title", "aria-describedby": "alert-dialog-description" }, rest, { children: [_jsx(DialogTitle, __assign({ id: "alert-dialog-title" }, { children: title })), _jsx(DialogContent, { children: children }), _jsx(DialogActions, { children: DialogButtons ? (cloneElement(DialogButtons)) : (_jsx(Button, __assign({ onClick: onClose, color: "primary" }, { children: "OK" }))) })] })) })));
 };
 export default AlertDialog;
-export * from "./types";

package/AlertDialog/types.d.ts

@@ -1,6 +1,6 @@
-import { ReactElement, CSSProperties } from "react";
-import { DialogProps } from "@mui/material/Dialog";
-import { DialogContentProps } from "@mui/material/DialogContent";
+import type { ReactElement, CSSProperties } from "react";
+import type { DialogProps } from "@mui/material/Dialog";
+import type { DialogContentProps } from "@mui/material/DialogContent";
 export interface AlertDialogProps {
     title?: string;
     maxWidth?: DialogProps["maxWidth"];

package/Autocomplete/index.d.ts

@@ -1,4 +1,4 @@
-import { AutocompleteProps } from "./types";
+import type { AutocompleteProps, AutocompleteValueType, AutocompleteOptionType } from "./types";
 declare function CustomAutocomplete<T, multiple extends boolean | undefined = false>(props: AutocompleteProps<T, multiple>): JSX.Element;
 export default CustomAutocomplete;
-export * from "./types";
+export type { AutocompleteProps, AutocompleteValueType, AutocompleteOptionType };

package/Autocomplete/index.js

@@ -49,4 +49,3 @@ function CustomAutocomplete(props) {
             }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { required: required, size: size, inputProps: __assign(__assign({}, params.inputProps), { required: required && (Array.isArray(value) ? value.length === 0 : !value) }) }))); } }) })));
 }
 export default CustomAutocomplete;
-export * from "./types";

package/Autocomplete/types.d.ts

@@ -1,5 +1,5 @@
-import { CSSProperties } from "react";
-import { TextFieldProps } from "@mui/material/TextField";
+import type { CSSProperties } from "react";
+import type { TextFieldProps } from "@mui/material/TextField";
 export declare type AutocompleteOptionType<T = {
     [name: string]: unknown;
 }> = T & {

package/AutocompleteWithFilter/index.d.ts

@@ -1,4 +1,4 @@
-import { AutocompleteWithFilterProps } from "./types";
+import type { AutocompleteWithFilterProps, AutocompleteWithFilterValueType, AutocompleteWithFilterOptionType } from "./types";
 declare function AutocompleteWithFilter<T, multiple extends boolean | undefined = false>(props: AutocompleteWithFilterProps<T, multiple>): JSX.Element;
 export default AutocompleteWithFilter;
-export * from "./types";
+export type { AutocompleteWithFilterProps, AutocompleteWithFilterValueType, AutocompleteWithFilterOptionType };

package/AutocompleteWithFilter/index.js

@@ -57,4 +57,3 @@ function AutocompleteWithFilter(props) {
             }, renderInput: function (params) { return (_jsx(TextField, __assign({}, params, rest, { variant: "outlined", required: required, inputProps: __assign(__assign({}, params.inputProps), { required: required && (Array.isArray(value) ? value.length === 0 : !value) }) }))); } }) })));
 }
 export default AutocompleteWithFilter;
-export * from "./types";

package/AutocompleteWithFilter/types.d.ts

@@ -1,12 +1,12 @@
-import { CSSProperties } from "react";
-import { TextFieldProps } from "@mui/material/TextField";
+import type { CSSProperties } from "react";
+import type { TextFieldProps } from "@mui/material/TextField";
 export declare type AutocompleteWithFilterOptionType<T> = T & {
     label: string;
     value?: string | number;
 };
-export declare type AutocompleteWithFilterlValueType<T, multiple extends boolean | undefined> = multiple extends false | undefined ? AutocompleteWithFilterOptionType<T> | null : Array<AutocompleteWithFilterOptionType<T>>;
+export declare type AutocompleteWithFilterValueType<T, multiple extends boolean | undefined> = multiple extends false | undefined ? AutocompleteWithFilterOptionType<T> | null : Array<AutocompleteWithFilterOptionType<T>>;
 export interface AutocompleteWithFilterProps<T, multiple extends boolean | undefined> extends Omit<TextFieldProps, "onChange" | "value" | "disabled"> {
-    value: AutocompleteWithFilterlValueType<T, multiple>;
+    value: AutocompleteWithFilterValueType<T, multiple>;
     options: Array<AutocompleteWithFilterOptionType<T>>;
     disableCloseOnSelect?: boolean;
     limitTags?: number;
@@ -15,5 +15,5 @@ export interface AutocompleteWithFilterProps<T, multiple extends boolean | undef
     loading?: boolean;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
-    onChange: (value: AutocompleteWithFilterlValueType<T, multiple>) => void;
+    onChange: (value: AutocompleteWithFilterValueType<T, multiple>) => void;
 }

package/BasicModal/index.d.ts

@@ -1,4 +1,4 @@
-import { BasicModalProps } from "./types";
+import type { BasicModalProps } from "./types";
 declare function BasicModal(props: BasicModalProps): JSX.Element;
 export default BasicModal;
-export * from "./types";
+export type { BasicModalProps };

package/BasicModal/index.js

@@ -49,4 +49,3 @@ function BasicModal(props) {
                     } }, { children: _jsx(Content, __assign({}, rest, { noForm: noForm, onClose: onClose, onSubmit: onSubmit })) })) })) })));
 }
 export default BasicModal;
-export * from "./types";

package/BasicModal/types.d.ts

@@ -1,5 +1,5 @@
-import { ReactNode, CSSProperties } from "react";
-import { ButtonProps } from "@mui/material/Button";
+import type { ReactNode, CSSProperties } from "react";
+import type { ButtonProps } from "@mui/material/Button";
 export interface BasicModalContentProps {
     children: ReactNode;
     color?: ButtonProps["color"];

package/BreadCrumbs/index.d.ts

@@ -1,4 +1,4 @@
-import { BreadCrumbsProps } from "./types";
+import type { BreadCrumbsProps } from "./types";
 declare function Crumbs(props: BreadCrumbsProps): JSX.Element;
 export default Crumbs;
-export * from "./types";
+export type { BreadCrumbsProps };

package/BreadCrumbs/index.js

@@ -36,4 +36,3 @@ function Crumbs(props) {
                 })] })) })));
 }
 export default Crumbs;
-export * from "./types";

package/BreadCrumbs/types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 export interface BreadCrumbsProps {
     routes: Array<{
         href?: string;

package/CheckBox/index.d.ts

@@ -0,0 +1,4 @@
+import { CheckBoxProps } from "./types";
+declare function CheckBox(props: CheckBoxProps): JSX.Element;
+export default CheckBox;
+export type { CheckBoxProps };

package/CheckBox/index.js

@@ -0,0 +1,36 @@
+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 Checkbox from "@mui/material/Checkbox";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+function CheckBox(props) {
+    var label = props.label, onChange = props.onChange, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["label", "onChange", "primaryColor", "secondaryColor"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, __assign({ onChange: function (event) {
+                    event.stopPropagation();
+                    onChange(event.target.checked);
+                } }, rest)), label: label }) })));
+}
+export default CheckBox;

package/CheckBox/types.d.ts

@@ -1,12 +1,8 @@
-import { CSSProperties, ReactElement } from "react";
-import { CheckboxProps } from "@mui/material/Checkbox";
-import { FormGroupProps } from "@mui/material/FormGroup";
+import type { CSSProperties, ReactElement } from "react";
+import type { CheckboxProps } from "@mui/material/Checkbox";
 export interface CheckBoxProps extends Omit<CheckboxProps, "onChange"> {
     label: string | ReactElement;
     onChange: (val: boolean) => void;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
 }
-export interface CheckBoxGroupProps extends FormGroupProps {
-    checkboxes: Array<CheckBoxProps>;
-}

package/CheckBoxGroup/index.d.ts

@@ -0,0 +1,4 @@
+import type { CheckBoxGroupProps } from "./types";
+declare function CheckBoxGroup(props: CheckBoxGroupProps): JSX.Element;
+export default CheckBoxGroup;
+export type { CheckBoxGroupProps };

package/CheckBoxGroup/index.js

@@ -0,0 +1,30 @@
+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 FormGroup from "@mui/material/FormGroup";
+import CheckBox from "../CheckBox";
+function CheckBoxGroup(props) {
+    var checkboxes = props.checkboxes, rest = __rest(props, ["checkboxes"]);
+    return (_jsx(FormGroup, __assign({}, rest, { children: checkboxes.map(function (checkbox, index) { return (_jsx(CheckBox, __assign({}, checkbox), index)); }) })));
+}
+export default CheckBoxGroup;

package/CheckBoxGroup/types.d.ts

@@ -1,12 +1,5 @@
-import { CSSProperties, ReactElement } from "react";
-import { CheckboxProps } from "@mui/material/Checkbox";
-import { FormGroupProps } from "@mui/material/FormGroup";
-export interface CheckBoxProps extends Omit<CheckboxProps, "onChange"> {
-    label: string | ReactElement;
-    onChange: (val: boolean) => void;
-    primaryColor?: CSSProperties["color"];
-    secondaryColor?: CSSProperties["color"];
-}
+import type { FormGroupProps } from "@mui/material/FormGroup";
+import type { CheckBoxProps } from "../CheckBox";
 export interface CheckBoxGroupProps extends FormGroupProps {
     checkboxes: Array<CheckBoxProps>;
 }

package/ConfirmPasswordInput/index.d.ts

@@ -0,0 +1,4 @@
+import type { ConfirmPasswordInputProps } from "./types";
+declare function ConfirmPasswordInput(props: ConfirmPasswordInputProps): JSX.Element;
+export default ConfirmPasswordInput;
+export type { ConfirmPasswordInputProps };

package/{PasswordInput/ConfirmPassword.js → ConfirmPasswordInput/index.js}

@@ -25,7 +25,7 @@ import { useMemo } from "react";
 import TextField from "@mui/material/TextField";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
-function ConfirmPassword(props) {
+function ConfirmPasswordInput(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, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["password", "helperText", "value", "label", "name", "variant", "margin", "disabled", "primaryColor", "secondaryColor", "onChange"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var isMatched = useMemo(function () {
@@ -39,4 +39,4 @@ function ConfirmPassword(props) {
                 onChange(event.target.value);
             }, fullWidth: true, required: true }, rest)) })));
 }
-export default ConfirmPassword;
+export default ConfirmPasswordInput;

package/ConfirmPasswordInput/types.d.ts

@@ -0,0 +1,9 @@
+import type { CSSProperties } from "react";
+import type { TextFieldProps } from "@mui/material/TextField";
+export interface ConfirmPasswordInputProps extends Omit<TextFieldProps, "onChange"> {
+    password: string;
+    value: string;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+    onChange: (value: string) => void;
+}

package/ConfirmPasswordInput/types.js

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

package/Copyright/index.d.ts

@@ -1,4 +1,4 @@
-import { CopyrightProps } from "./types";
+import type { CopyrightProps } from "./types";
 declare function Copyright(props: CopyrightProps): JSX.Element;
 export default Copyright;
-export * from "./types";
+export type { CopyrightProps };

package/Copyright/index.js

@@ -20,4 +20,3 @@ function Copyright(props) {
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Typography, __assign({ sx: { fontSize: 16, fontWeight: 400 }, color: "textSecondary", align: "center" }, { children: ["Copyright © ", _jsx(Link, __assign({ color: "inherit", href: "https://symply.io/" }, { children: "Symply Software Inc" })), "\u00A0", new Date().getFullYear(), "."] })) })));
 }
 export default Copyright;
-export * from "./types";

package/Copyright/types.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties } from "react";
+import type { CSSProperties } from "react";
 export interface CopyrightProps {
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];

package/DataTable/index.d.ts

@@ -1,6 +1,6 @@
-import useTable from "./useTable";
+import useDataTable from "./useTable";
 import { DataTableProps, KvProps } from "./types";
 declare function DataTable<RowProps extends KvProps, ExtendedProps extends KvProps>(props: DataTableProps<RowProps, ExtendedProps>): JSX.Element;
 export default DataTable;
 export * from "./types";
-export { useTable };
+export { useDataTable };

package/DataTable/index.js

@@ -15,7 +15,7 @@ import Table from "@mui/material/Table";
 import TableContainer from "@mui/material/TableContainer";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useCustomTheme from "../useCustomTheme";
-import useTable from "./useTable";
+import useDataTable from "./useTable";
 import TableBody from "./TableBody";
 import TableHeader from "./TableHeader";
 import TableFooter from "./TableFooter";
@@ -59,4 +59,4 @@ function DataTable(props) {
 }
 export default DataTable;
 export * from "./types";
-export { useTable };
+export { useDataTable };

package/DigitInput/index.d.ts

@@ -1,4 +1,4 @@
-import { DigitInputProps } from "./types";
+import type { DigitInputProps } from "./types";
 declare function DigitInput(props: DigitInputProps): JSX.Element;
 export default DigitInput;
-export * from "./types";
+export type { DigitInputProps };

package/DigitInput/index.js

@@ -35,4 +35,3 @@ function DigitInput(props) {
                 }, onChange: handleChange }, rest)) })) })));
 }
 export default DigitInput;
-export * from "./types";

package/DigitInput/types.d.ts

@@ -1,6 +1,6 @@
-import { CSSProperties } from "react";
-import { InputProps } from "@mui/material/Input";
-import { TextFieldProps } from "@mui/material/TextField";
+import type { CSSProperties } from "react";
+import type { InputProps } from "@mui/material/Input";
+import type { TextFieldProps } from "@mui/material/TextField";
 export interface DigitInputProps extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
     value: string;

package/LoadingModal/index.d.ts

@@ -1,4 +1,5 @@
-export { default } from "./Modal";
-export { default as useLoadingModal } from "./useLoadingModal";
-export * from "./useLoadingModal";
+import LoadingModal from "./Modal";
+import useLoadingModal, { LoadingModalProvider } from "./useLoadingModal";
+export default LoadingModal;
+export { useLoadingModal, LoadingModalProvider };
 export * from "./types";

package/LoadingModal/index.js

@@ -1,5 +1,6 @@
 "use client";
-export { default } from "./Modal";
-export { default as useLoadingModal } from "./useLoadingModal";
-export * from "./useLoadingModal";
+import LoadingModal from "./Modal";
+import useLoadingModal, { LoadingModalProvider } from "./useLoadingModal";
+export default LoadingModal;
+export { useLoadingModal, LoadingModalProvider };
 export * from "./types";

package/PasswordInput/index.d.ts

@@ -1,4 +1,6 @@
-export { default as Password } from "./Password";
-export * from "./Password";
-export { default as ConfirmPassword } from "./ConfirmPassword";
-export * from "./ConfirmPassword";
+import type { PasswordInputProps, PasswordStrategyProps } from "./types";
+declare function onValidatePassword(password: string): boolean;
+declare function PasswordInput(props: PasswordInputProps): JSX.Element;
+export default PasswordInput;
+export { onValidatePassword };
+export type { PasswordInputProps, PasswordStrategyProps };

package/PasswordInput/index.js

@@ -1,4 +1,79 @@
-export { default as Password } from "./Password";
-export * from "./Password";
-export { default as ConfirmPassword } from "./ConfirmPassword";
-export * from "./ConfirmPassword";
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from "react";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+function onValidatePassword(password) {
+    var reg = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])([!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~a-zA-z0-9]{8,})$/;
+    return reg.test(password);
+}
+function PasswordInput(props) {
+    var _a = props.strategies, strategies = _a === void 0 ? {
+        uppercaseLetter: { label: "1 Uppercase Letter", regex: /[A-Z]+/ },
+        lowercaseLetter: { label: "1 Lowercase Letter", regex: /[a-z]+/ },
+        specialCharacter: {
+            label: "1 Special Character",
+            regex: /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/
+        },
+        number: { label: "1 Number", regex: /\d+/ },
+        minimum8: { label: "Minimum 8 characters", regex: /.{8,}/ }
+    } : _a, _b = props.successColor, successColor = _b === void 0 ? "green" : _b, value = props.value, error = props.error, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onValidate = props.onValidate, onChange = props.onChange, rest = __rest(props, ["strategies", "successColor", "value", "error", "primaryColor", "secondaryColor", "onValidate", "onChange"]);
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var isValidPassword = useMemo(function () {
+        if ((value === null || value === void 0 ? void 0 : value.length) > 0) {
+            return onValidate ? onValidate(value) : onValidatePassword(value);
+        }
+        return true;
+    }, [value, onValidate, onValidatePassword]);
+    var helperTextColor = useMemo(function () {
+        var textColors = Object.keys(strategies).reduce(function (temp, key) {
+            var regex = strategies[key].regex;
+            if (value === "") {
+                temp[key] = undefined;
+            }
+            else if (regex.test(value)) {
+                temp[key] = successColor;
+            }
+            else {
+                temp[key] = "red";
+            }
+            return temp;
+        }, {});
+        return textColors;
+    }, [value, strategies]);
+    var helperText = useMemo(function () {
+        return (_jsx(_Fragment, { children: Object.keys(strategies).map(function (key) {
+                var label = strategies[key].label;
+                return (_jsx(Typography, __assign({ component: "li", variant: "caption", style: { color: helperTextColor[key] } }, { children: label }), key));
+            }) }));
+    }, [helperTextColor, strategies]);
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isValidPassword || error, helperText: helperText, type: "password", label: "Password", size: "small", margin: "dense", value: value, onChange: function (event) {
+                event.preventDefault();
+                onChange(event.target.value);
+            }, fullWidth: true, required: true }, rest)) })));
+}
+export default PasswordInput;
+export { onValidatePassword };

package/PasswordInput/{Password.d.ts → types.d.ts}

@@ -1,12 +1,12 @@
-import { CSSProperties } from "react";
-import { TextFieldProps } from "@mui/material/TextField";
+import type { CSSProperties } from "react";
+import type { TextFieldProps } from "@mui/material/TextField";
 export interface PasswordStrategyProps {
     [key: string]: {
         label: string;
         regex: RegExp;
     };
 }
-export interface PasswordProps extends Omit<TextFieldProps, "onChange"> {
+export interface PasswordInputProps extends Omit<TextFieldProps, "onChange"> {
     strategies?: PasswordStrategyProps;
     value: string;
     successColor?: CSSProperties["color"];
@@ -15,6 +15,3 @@ export interface PasswordProps extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
     onValidate?: (value: string) => boolean;
 }
-export declare function onValidatePassword(password: string): boolean;
-declare function Password(props: PasswordProps): JSX.Element;
-export default Password;

package/PasswordInput/types.js

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

package/index.d.ts

@@ -4,6 +4,8 @@ export * from "./AutocompleteWithFilter";
 export * from "./BasicModal";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
+export * from "./CheckBoxGroup";
+export * from "./ConfirmPasswordInput";
 export * from "./Copyright";
 export * from "./DataTable";
 export * from "./DateInput";
@@ -31,6 +33,9 @@ export { default as Autocomplete } from "./Autocomplete";
 export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
 export { default as BasicModal } from "./BasicModal";
 export { default as BreadCrumbs } from "./BreadCrumbs";
+export { default as CheckBox } from "./CheckBox";
+export { default as CheckBoxGroup } from "./CheckBoxGroup";
+export { default as ConfirmPasswordInput } from "./ConfirmPasswordInput";
 export { default as Copyright } from "./Copyright";
 export { default as DataTable } from "./DataTable";
 export { default as DigitInput } from "./DigitInput";
@@ -42,6 +47,7 @@ export { default as HelpCaption } from "./HelpCaption";
 export { default as LoadingModal } from "./LoadingModal";
 export { default as MenuButtonGroup } from "./MenuButtonGroup";
 export { default as NumberInput } from "./NumberInput";
+export { default as PasswordInput } from "./PasswordInput";
 export { default as PhoneNumberInput } from "./PhoneNumberInput";
 export { default as Sidebar } from "./Sidebar";
 export { default as SocialInput } from "./SocialInput";

package/index.js

@@ -4,6 +4,8 @@ export * from "./AutocompleteWithFilter";
 export * from "./BasicModal";
 export * from "./BreadCrumbs";
 export * from "./CheckBox";
+export * from "./CheckBoxGroup";
+export * from "./ConfirmPasswordInput";
 export * from "./Copyright";
 export * from "./DataTable";
 export * from "./DateInput";
@@ -31,6 +33,9 @@ export { default as Autocomplete } from "./Autocomplete";
 export { default as AutocompleteWithFilter } from "./AutocompleteWithFilter";
 export { default as BasicModal } from "./BasicModal";
 export { default as BreadCrumbs } from "./BreadCrumbs";
+export { default as CheckBox } from "./CheckBox";
+export { default as CheckBoxGroup } from "./CheckBoxGroup";
+export { default as ConfirmPasswordInput } from "./ConfirmPasswordInput";
 export { default as Copyright } from "./Copyright";
 export { default as DataTable } from "./DataTable";
 export { default as DigitInput } from "./DigitInput";
@@ -42,6 +47,7 @@ export { default as HelpCaption } from "./HelpCaption";
 export { default as LoadingModal } from "./LoadingModal";
 export { default as MenuButtonGroup } from "./MenuButtonGroup";
 export { default as NumberInput } from "./NumberInput";
+export { default as PasswordInput } from "./PasswordInput";
 export { default as PhoneNumberInput } from "./PhoneNumberInput";
 export { default as Sidebar } from "./Sidebar";
 export { default as SocialInput } from "./SocialInput";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.4.0-alpha.5",
+  "version": "1.4.0-alpha.7",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",

package/PasswordInput/ConfirmPassword.d.ts

@@ -1,11 +0,0 @@
-import { CSSProperties } from "react";
-import { TextFieldProps } from "@mui/material/TextField";
-export interface ConfirmPasswordProps extends Omit<TextFieldProps, "onChange"> {
-    password: string;
-    value: string;
-    primaryColor?: CSSProperties["color"];
-    secondaryColor?: CSSProperties["color"];
-    onChange: (value: string) => void;
-}
-declare function ConfirmPassword(props: ConfirmPasswordProps): JSX.Element;
-export default ConfirmPassword;

package/PasswordInput/Password.js

@@ -1,78 +0,0 @@
-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, Fragment as _Fragment } from "react/jsx-runtime";
-import { useMemo } from "react";
-import TextField from "@mui/material/TextField";
-import Typography from "@mui/material/Typography";
-import ThemeProvider from "@mui/material/styles/ThemeProvider";
-import useCustomTheme from "../useCustomTheme";
-export function onValidatePassword(password) {
-    var reg = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])([!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~a-zA-z0-9]{8,})$/;
-    return reg.test(password);
-}
-function Password(props) {
-    var _a = props.strategies, strategies = _a === void 0 ? {
-        uppercaseLetter: { label: "1 Uppercase Letter", regex: /[A-Z]+/ },
-        lowercaseLetter: { label: "1 Lowercase Letter", regex: /[a-z]+/ },
-        specialCharacter: {
-            label: "1 Special Character",
-            regex: /[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~]/
-        },
-        number: { label: "1 Number", regex: /\d+/ },
-        minimum8: { label: "Minimum 8 characters", regex: /.{8,}/ }
-    } : _a, _b = props.successColor, successColor = _b === void 0 ? "green" : _b, value = props.value, error = props.error, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onValidate = props.onValidate, onChange = props.onChange, rest = __rest(props, ["strategies", "successColor", "value", "error", "primaryColor", "secondaryColor", "onValidate", "onChange"]);
-    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    var isValidPassword = useMemo(function () {
-        if ((value === null || value === void 0 ? void 0 : value.length) > 0) {
-            return onValidate ? onValidate(value) : onValidatePassword(value);
-        }
-        return true;
-    }, [value, onValidate, onValidatePassword]);
-    var helperTextColor = useMemo(function () {
-        var textColors = Object.keys(strategies).reduce(function (temp, key) {
-            var regex = strategies[key].regex;
-            if (value === "") {
-                temp[key] = undefined;
-            }
-            else if (regex.test(value)) {
-                temp[key] = successColor;
-            }
-            else {
-                temp[key] = "red";
-            }
-            return temp;
-        }, {});
-        return textColors;
-    }, [value, strategies]);
-    var helperText = useMemo(function () {
-        return (_jsx(_Fragment, { children: Object.keys(strategies).map(function (key) {
-                var label = strategies[key].label;
-                return (_jsx(Typography, __assign({ component: "li", variant: "caption", style: { color: helperTextColor[key] } }, { children: label }), key));
-            }) }));
-    }, [helperTextColor, strategies]);
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ error: !isValidPassword || error, helperText: helperText, type: "password", label: "Password", size: "small", margin: "dense", value: value, onChange: function (event) {
-                event.preventDefault();
-                onChange(event.target.value);
-            }, fullWidth: true, required: true }, rest)) })));
-}
-export default Password;