@symply.io/basic-components 1.0.0-beta.1 → 1.0.0-beta.11

package/BasicTable/useTable.js

@@ -0,0 +1,94 @@
+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 { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useState, useMemo, useCallback } from "react";
+function useTable(props) {
+    var data = props.data, columns = props.columns, initialState = props.initialState, disableSortBy = props.disableSortBy, onSort = props.onSort, rest = __rest(props, ["data", "columns", "initialState", "disableSortBy", "onSort"]);
+    if (!data) {
+        throw new Error('"data" is required but got null or undefined');
+    }
+    if (!columns) {
+        throw new Error('"columns" is required but got null or undefined');
+    }
+    var sortBy = (initialState || {}).sortBy;
+    var _a = sortBy || {}, id = _a.id, desc = _a.desc;
+    var _b = useState({
+        field: id || "",
+        isSorted: !!id,
+        descending: desc || false
+    }), sortingProps = _b[0], setSortingProps = _b[1];
+    var handleSort = useCallback(function (_a) {
+        var field = _a.field;
+        if (!disableSortBy) {
+            var newSortingProps = __assign({}, sortingProps);
+            if (field !== sortingProps.field || !sortingProps.isSorted) {
+                newSortingProps = { field: field, isSorted: true, descending: false };
+            }
+            else if (!sortingProps.descending) {
+                newSortingProps = __assign(__assign({}, sortingProps), { descending: true });
+            }
+            else {
+                newSortingProps = __assign(__assign({}, sortingProps), { isSorted: false });
+            }
+            if (onSort) {
+                onSort(__assign({}, newSortingProps));
+            }
+            setSortingProps(__assign({}, newSortingProps));
+        }
+    }, [disableSortBy, onSort, sortingProps]);
+    var renderSortingSymbol = useCallback(function (accessor) {
+        var field = sortingProps.field, isSorted = sortingProps.isSorted, descending = sortingProps.descending;
+        if (accessor !== field || !isSorted) {
+            return "";
+        }
+        if (!descending) {
+            return "↑";
+        }
+        return "↓";
+    }, [sortingProps]);
+    var rows = useMemo(function () { return data.map(function (d) { return d; }); }, [data]);
+    var cols = useMemo(function () {
+        return columns.map(function (col) {
+            var Body = col.Body;
+            return __assign(__assign({ Cell: cloneElement(Body || _jsx(_Fragment, {}), { column: col }) }, col), rest);
+        });
+    }, [columns, rest]);
+    var headers = useMemo(function () {
+        return columns.map(function (col) {
+            var Header = col.Header, accessor = col.accessor, canSort = col.canSort, headerTip = col.headerTip;
+            var canSortBy = canSort && !disableSortBy;
+            return __assign(__assign({ Cell: (_jsxs(_Fragment, { children: [cloneElement(Header || _jsx(_Fragment, {}), { column: col }), canSortBy && renderSortingSymbol(accessor)] })), title: "".concat(headerTip || "").concat(canSortBy ? " (Click to sort)" : ""), canSort: canSortBy, onSort: canSortBy ? handleSort : function () { } }, col), rest);
+        });
+    }, [columns, disableSortBy, handleSort, renderSortingSymbol, rest]);
+    var footers = useMemo(function () {
+        return columns.map(function (col) {
+            var Footer = col.Footer;
+            return __assign(__assign({ Cell: cloneElement(Footer || _jsx(_Fragment, {}), {
+                    column: col,
+                    rows: rows
+                }) }, col), rest);
+        });
+    }, [columns, rest, rows]);
+    return { headers: headers, footers: footers, columns: cols, rows: rows };
+}
+export default useTable;

package/DateInput/FullDateInput/index.d.ts

@@ -1,5 +1,5 @@
 import { DateInputprops } from "./types";
 export declare function MonthDayYearFormat(str: string): string;
-export declare function verifyDate(dateString: string): boolean;
+export declare function onValidateDate(dateString: string): boolean;
 declare function FullDateInput(props: DateInputprops): JSX.Element;
 export default FullDateInput;

package/DateInput/FullDateInput/index.js

@@ -9,6 +9,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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 { useRifm } from "rifm";
 import TextField from "@mui/material/TextField";
@@ -30,7 +41,7 @@ export function MonthDayYearFormat(str) {
         }
     }, "");
 }
-export function verifyDate(dateString) {
+export function onValidateDate(dateString) {
     var reg = /^((((0[1,3,5,7,8]{1})|(1[0,2]{1}))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(3[0-1]{1})))|(((0[4,6,9]{1})|(11))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(30)))|((02)\s?\/\s?(0[1-9]{1}|[1-2]{1}\d{1})))\s?\/\s?\d{4}$/g;
     if (reg.test(dateString)) {
         var tmpArr = dateString.split("/");
@@ -46,7 +57,7 @@ export function verifyDate(dateString) {
     return false;
 }
 function FullDateInput(props) {
-    var name = props.name, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, verifyFn = props.verifyFn, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
     var rifm = useRifm({
@@ -56,11 +67,13 @@ function FullDateInput(props) {
         replace: addMask,
         format: MonthDayYearFormat
     });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, { placeholder: "MM / DD / YYYY", error: error ||
-                (valLength > 0 && (verifyFn ? !verifyFn(value) : !verifyDate(value))), margin: margin, name: name, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 && (verifyFn ? !verifyFn(value) : !verifyDate(value))
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ placeholder: "MM / DD / YYYY", error: error ||
+                (valLength > 0 &&
+                    (onValidate ? !onValidate(value) : !onValidateDate(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
+                (onValidate ? !onValidate(value) : !onValidateDate(value))
                 ? helperText
-                : "", onFocus: onFocus, onBlur: onBlur, InputLabelProps: {
+                : "", InputLabelProps: {
                 shrink: true
-            } }) })));
+            } }, rest)) })));
 }
 export default FullDateInput;

package/DateInput/FullDateInput/types.d.ts

@@ -1,13 +1,8 @@
 import { CSSProperties } from "react";
-export interface DateInputprops {
-    name: string;
+import { TextFieldProps } from "@mui/material/TextField";
+export interface DateInputprops extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    verifyFn?: (value?: string) => boolean;
-    helperText?: string;
-    margin?: "none" | "normal" | "dense" | undefined;
-    error?: boolean;
+    onValidate?: (value?: string) => boolean;
     value: string;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];

package/DateInput/MonthDayInput/index.d.ts

@@ -1,5 +1,5 @@
 import { DateInputprops } from "./types";
 export declare function MonthDayFormat(str: string): string;
-export declare function verifyMonthDayDate(monthDayString: string): boolean;
+export declare function onValidateMonthDay(monthDayString: string): boolean;
 declare function MonthDayInput(props: DateInputprops): JSX.Element;
 export default MonthDayInput;

package/DateInput/MonthDayInput/index.js

@@ -9,6 +9,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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 { useRifm } from "rifm";
 import TextField from "@mui/material/TextField";
@@ -27,12 +38,12 @@ export function MonthDayFormat(str) {
         }
     }, "");
 }
-export function verifyMonthDayDate(monthDayString) {
+export function onValidateMonthDay(monthDayString) {
     var reg = /^((((0[1,3,5,7,8]{1})|(1[0,2]{1}))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(3[0-1]{1})))|(((0[4,6,9]{1})|(11))\s?\/\s?((0[1-9]{1})|([1-2]{1}\d{1})|(30)))|((02)\s?\/\s?(0[1-9]{1})|([1-2]{1}\d{1})))$/g;
     return reg.test(monthDayString);
 }
 function MonthDayInput(props) {
-    var name = props.name, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, verifyFn = props.verifyFn, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
     var rifm = useRifm({
@@ -42,13 +53,13 @@ function MonthDayInput(props) {
         replace: addMask,
         format: MonthDayFormat
     });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, { placeholder: "MM / DD", error: error ||
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ placeholder: "MM / DD", error: error ||
                 (valLength > 0 &&
-                    (verifyFn ? !verifyFn(value) : !verifyMonthDayDate(value))), margin: margin, name: name, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
-                (verifyFn ? !verifyFn(value) : !verifyMonthDayDate(value))
+                    (onValidate ? !onValidate(value) : !onValidateMonthDay(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
+                (onValidate ? !onValidate(value) : !onValidateMonthDay(value))
                 ? helperText
-                : "", onFocus: onFocus, onBlur: onBlur, InputLabelProps: {
+                : "", InputLabelProps: {
                 shrink: true
-            } }) })));
+            } }, rest)) })));
 }
 export default MonthDayInput;

package/DateInput/MonthDayInput/types.d.ts

@@ -1,13 +1,8 @@
 import { CSSProperties } from "react";
-export interface DateInputprops {
-    name: string;
+import { TextFieldProps } from "@mui/material/TextField";
+export interface DateInputprops extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    verifyFn?: (value?: string) => boolean;
-    helperText?: string;
-    margin?: "none" | "normal" | "dense" | undefined;
-    error?: boolean;
+    onValidate?: (value?: string) => boolean;
     value: string;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];

package/DateInput/MonthYearInput/index.d.ts

@@ -1,5 +1,5 @@
 import { DateInputprops } from "./types";
 export declare function MonthYearFormat(str: string): string;
-export declare function verifyMonthYearDate(monthYearString: string): boolean;
+export declare function onValidateMonthYear(monthYearString: string): boolean;
 declare function MonthYearInput(props: DateInputprops): JSX.Element;
 export default MonthYearInput;

package/DateInput/MonthYearInput/index.js

@@ -9,6 +9,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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 { useRifm } from "rifm";
 import TextField from "@mui/material/TextField";
@@ -27,13 +38,13 @@ export function MonthYearFormat(str) {
         }
     }, "");
 }
-export function verifyMonthYearDate(monthYearString) {
+export function onValidateMonthYear(monthYearString) {
     var reg = /^(((0[1-9]{1})|(1[0-2]{1}))\s?\/\s?([1-2]{1}\d{3}))$/g;
     reg.lastIndex = 0;
     return reg.test(monthYearString);
 }
 function MonthYearInput(props) {
-    var name = props.name, onChange = props.onChange, onFocus = props.onFocus, onBlur = props.onBlur, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, verifyFn = props.verifyFn, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var onChange = props.onChange, value = props.value, _a = props.margin, margin = _a === void 0 ? "normal" : _a, error = props.error, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid date" : _b, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["onChange", "value", "margin", "error", "helperText", "onValidate", "primaryColor", "secondaryColor"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
     var rifm = useRifm({
@@ -43,13 +54,13 @@ function MonthYearInput(props) {
         replace: addMask,
         format: MonthYearFormat
     });
-    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, { placeholder: "MM / YYYY", error: error ||
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ placeholder: "MM / YYYY", error: error ||
                 (valLength > 0 &&
-                    (verifyFn ? !verifyFn(value) : !verifyMonthYearDate(value))), margin: margin, name: name, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
-                (verifyFn ? !verifyFn(value) : !verifyMonthYearDate(value))
+                    (onValidate ? !onValidate(value) : !onValidateMonthYear(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
+                (onValidate ? !onValidate(value) : !onValidateMonthYear(value))
                 ? helperText
-                : "", onFocus: onFocus, onBlur: onBlur, InputLabelProps: {
+                : "", InputLabelProps: {
                 shrink: true
-            } }) })));
+            } }, rest)) })));
 }
 export default MonthYearInput;

package/DateInput/MonthYearInput/types.d.ts

@@ -1,13 +1,8 @@
 import { CSSProperties } from "react";
-export interface DateInputprops {
-    name: string;
+import { TextFieldProps } from "@mui/material/TextField";
+export interface DateInputprops extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
-    onFocus?: () => void;
-    onBlur?: () => void;
-    verifyFn?: (value?: string) => boolean;
-    helperText?: string;
-    margin?: "none" | "normal" | "dense" | undefined;
-    error?: boolean;
+    onValidate?: (value?: string) => boolean;
     value: string;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];

package/DynamicHeaderBar/HeaderButtons.js

@@ -29,8 +29,8 @@ function HeaderButtons(props) {
                         return (_jsx(Grid, __assign({ item: true, xs: isLessThanSm ? 12 : undefined, style: { textAlign: "end" } }, { children: _jsx(Button, __assign({ fullWidth: isLessThanSm, variant: variant, onClick: onClick, color: color, size: isLessThanSm ? "small" : size, startIcon: startIcon, endIcon: endIcon, disabled: disabled }, { children: text })) }), text));
                     }
                     case HeaderButtonCategory.IconButton: {
-                        var title = button.title, onClick = button.onClick, color = button.color, _b = button.size, size = _b === void 0 ? "medium" : _b, icon = button.icon;
-                        return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(Fab, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size }, { children: icon })) }), title));
+                        var title = button.title, onClick = button.onClick, color = button.color, _b = button.size, size = _b === void 0 ? "medium" : _b, icon = button.icon, disabled = button.disabled, variant = button.variant;
+                        return (_jsx(Grid, __assign({ item: true, style: { textAlign: "end" } }, { children: _jsx(Fab, __assign({ onClick: onClick, color: color, title: title, size: isLessThanSm ? "small" : size, disabled: disabled, variant: variant }, { children: icon })) }), title));
                     }
                     case HeaderButtonCategory.MenuButton: {
                         var btns = button.buttons, buttonText = button.buttonText, disabled = button.disabled, variant = button.variant, size = button.size;

package/DynamicHeaderBar/types.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement } from "react";
 import { ButtonProps } from "@mui/material/Button";
 import { IconButtonProps } from "@mui/material/IconButton";
+import { FabProps } from "@mui/material/Fab";
 import { MenuButtonGroupProps } from "../MenuButtonGroup";
 export declare enum HeaderButtonCategory {
     IconButton = "icon",
@@ -21,7 +22,9 @@ interface HeaderTextButtonProps {
 interface HeaderIconButtonProps {
     title: string;
     icon: ReactElement;
+    disabled?: boolean;
     type: HeaderButtonCategory.IconButton;
+    variant?: FabProps["variant"];
     color?: IconButtonProps["color"];
     size?: IconButtonProps["size"];
     onClick: IconButtonProps["onClick"];

package/FeinInput/index.d.ts

@@ -1,6 +1,6 @@
 import { FeinInputProps } from "./types";
 export declare function FeinInputFormat(str: string): string;
-export declare function verifyFein(feinString: string): boolean;
+export declare function onValidateFein(feinString: string): boolean;
 declare function FeinInput(props: FeinInputProps): JSX.Element;
 export default FeinInput;
 export * from "./types";

package/FeinInput/index.js

@@ -38,12 +38,12 @@ export function FeinInputFormat(str) {
         }
     }, "");
 }
-export function verifyFein(feinString) {
+export function onValidateFein(feinString) {
     var reg = /^\d{2}\s?-\s?\d{7}$/g;
     return reg.test(feinString);
 }
 function FeinInput(props) {
-    var value = props.value, _a = props.error, error = _a === void 0 ? false : _a, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid FEIN" : _b, onChange = props.onChange, verifyFn = props.verifyFn, onFocus = props.onFocus, onBlur = props.onBlur, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["value", "error", "helperText", "onChange", "verifyFn", "onFocus", "onBlur", "primaryColor", "secondaryColor"]);
+    var value = props.value, _a = props.error, error = _a === void 0 ? false : _a, _b = props.helperText, helperText = _b === void 0 ? "Please enter a valid FEIN" : _b, onBlur = props.onBlur, onFocus = props.onFocus, onChange = props.onChange, onValidate = props.onValidate, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, rest = __rest(props, ["value", "error", "helperText", "onBlur", "onFocus", "onChange", "onValidate", "primaryColor", "secondaryColor"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var _c = useInteractions({ value: value }), valLength = _c.valLength, addMask = _c.addMask;
     var rifm = useRifm({
@@ -54,7 +54,9 @@ function FeinInput(props) {
         format: FeinInputFormat
     });
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ value: rifm.value, onChange: rifm.onChange, error: error ||
-                (valLength > 0 && (verifyFn ? !verifyFn(value) : verifyFein(value))), helperText: valLength > 0 && (verifyFn ? !verifyFn(value) : verifyFein(value))
+                (valLength > 0 &&
+                    (onValidate ? !onValidate(value) : !onValidateFein(value))), helperText: valLength > 0 &&
+                (onValidate ? !onValidate(value) : !onValidateFein(value))
                 ? helperText
                 : "", onFocus: function (event) {
                 if (onFocus) {

package/FeinInput/types.d.ts

@@ -2,7 +2,7 @@ import { CSSProperties } from "react";
 import { TextFieldProps } from "@mui/material/TextField";
 export interface FeinInputProps extends Omit<TextFieldProps, "onChange"> {
     onChange: (value: string) => void;
-    verifyFn?: (value?: string) => boolean;
+    onValidate?: (value?: string) => boolean;
     value: string;
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];

package/PasswordInput/Password.d.ts

@@ -13,7 +13,8 @@ export interface PasswordProps extends Omit<TextFieldProps, "onChange"> {
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
     onChange: (value: string) => void;
-    onVerify?: (value: string) => boolean;
+    onValidate?: (value: string) => boolean;
 }
+export declare function onValidatePassword(password: string): boolean;
 declare function Password(props: PasswordProps): JSX.Element;
 export default Password;

package/PasswordInput/Password.js

@@ -26,6 +26,10 @@ 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]+/ },
@@ -36,17 +40,14 @@ function Password(props) {
         },
         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, _c = props.onVerify, onVerify = _c === void 0 ? function (password) {
-        var reg = /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~])([!"#$%&'()*+,-./:;<=>?@[\]^_`{|}~a-zA-z0-9]{8,})$/;
-        return reg.test(password);
-    } : _c, onChange = props.onChange, rest = __rest(props, ["strategies", "successColor", "value", "error", "primaryColor", "secondaryColor", "onVerify", "onChange"]);
+    } : _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 onVerify(value);
+            return onValidate ? onValidate(value) : onValidatePassword(value);
         }
         return true;
-    }, [value, onVerify]);
+    }, [value, onValidate, onValidatePassword]);
     var helperTextColor = useMemo(function () {
         var textColors = Object.keys(strategies).reduce(function (temp, key) {
             var regex = strategies[key].regex;

package/PhoneNumberInput/index.d.ts

@@ -7,7 +7,9 @@ export interface PhoneInputProps extends Omit<TextFieldProps, "onChange"> {
     primaryColor?: CSSProperties["color"];
     secondaryColor?: CSSProperties["color"];
     onChange: (val: string) => void;
+    onValidate?: (val: string) => boolean;
 }
+export declare function onValidatePhone(str: string): boolean;
 export declare function phoneFormat(str: string): string;
 declare function PhoneInput(props: PhoneInputProps): JSX.Element;
 export default PhoneInput;

package/PhoneNumberInput/index.js

@@ -28,6 +28,10 @@ import TextField from "@mui/material/TextField";
 import ThemeProvider from "@mui/material/styles/ThemeProvider";
 import useInteractions from "./useInteractions";
 import useCustomTheme from "../useCustomTheme";
+export function onValidatePhone(str) {
+    var reg = /^\(\d{3}\)\s?\d{3}\s?-\s?\d{4}$/g;
+    return reg.test(str);
+}
 export function phoneFormat(str) {
     var digits = (str.match(/\d+/g) || []).join("");
     var chars = digits.split("");
@@ -44,9 +48,9 @@ export function phoneFormat(str) {
     }, "(");
 }
 function PhoneInput(props) {
-    var value = props.value, endAdornment = props.endAdornment, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onChange = props.onChange, rest = __rest(props, ["value", "endAdornment", "primaryColor", "secondaryColor", "onChange"]);
+    var value = props.value, error = props.error, endAdornment = props.endAdornment, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _a = props.helperText, helperText = _a === void 0 ? "Please enter a valid phone number" : _a, onChange = props.onChange, onValidate = props.onValidate, rest = __rest(props, ["value", "error", "endAdornment", "primaryColor", "secondaryColor", "helperText", "onChange", "onValidate"]);
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
-    var addMask = useInteractions({ value: value }).addMask;
+    var _b = useInteractions({ value: value }), valLength = _b.valLength, addMask = _b.addMask;
     var rifm = useRifm({
         mask: true,
         value: String(value),
@@ -57,6 +61,13 @@ function PhoneInput(props) {
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ value: rifm.value, InputProps: {
                 startAdornment: (_jsx(InputAdornment, __assign({ position: "start" }, { children: _jsx(Typography, __assign({ variant: "body2" }, { children: "+1" })) }))),
                 endAdornment: endAdornment
-            }, onChange: rifm.onChange }, rest)) })));
+            }, onChange: rifm.onChange, helperText: valLength > 0 &&
+                (onValidate ? !onValidate(rifm.value) : !onValidatePhone(rifm.value))
+                ? helperText
+                : "", error: error ||
+                (valLength > 0 &&
+                    (onValidate
+                        ? !onValidate(rifm.value)
+                        : !onValidatePhone(rifm.value))) }, rest)) })));
 }
 export default PhoneInput;