@symply.io/basic-components 1.0.0-alpha.8 → 1.0.0-bata.7

package/BasicTable/useScroll.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { UseScrollProps } from "./types";
+declare function useScroll(props: UseScrollProps): {
+    frozenWidth: number;
+    setFrozenWidth: import("react").Dispatch<import("react").SetStateAction<number>>;
+    fixedRef: import("react").RefObject<HTMLDivElement>;
+    dynamicRef: import("react").RefObject<HTMLDivElement>;
+};
+export default useScroll;

package/BasicTable/useScroll.js

@@ -0,0 +1,76 @@
+import { useState, useCallback, useEffect, useRef } from "react";
+import useTheme from "@mui/material/styles/useTheme";
+import useMediaQuery from "@mui/material/useMediaQuery";
+function useScroll(props) {
+    var canFreeze = props.canFreeze;
+    var theme = useTheme();
+    var isUpMd = useMediaQuery(theme.breakpoints.up("md"));
+    var _a = useState(370), frozenWidth = _a[0], setFrozenWidth = _a[1];
+    var fixedRef = useRef(null);
+    var dynamicRef = useRef(null);
+    var resetFrozenWidth = useCallback(function () {
+        setFrozenWidth(function (fw) {
+            var _a, _b;
+            if (fw !== ((_a = fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth)) {
+                return ((_b = fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) === null || _b === void 0 ? void 0 : _b.clientWidth) || fw;
+            }
+            return fw;
+        });
+    }, [fixedRef]);
+    var onFixedScroll = useCallback(function (event) {
+        if (isUpMd && (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current)) {
+            var targetDiv = event.target;
+            dynamicRef.current.scrollTop = targetDiv.scrollTop;
+            resetFrozenWidth();
+        }
+    }, [dynamicRef, isUpMd, resetFrozenWidth]);
+    var onDynamicScroll = useCallback(function (event) {
+        if (isUpMd && (fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current)) {
+            var targetDiv = event.target;
+            fixedRef.current.scrollTop = targetDiv.scrollTop;
+            resetFrozenWidth();
+        }
+    }, [fixedRef, isUpMd, resetFrozenWidth]);
+    var removeEventFixed = useCallback(function () {
+        if (fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) {
+            fixedRef.current.removeEventListener("scroll", onFixedScroll);
+        }
+    }, [fixedRef, onFixedScroll]);
+    var removeEventDynamic = useCallback(function () {
+        if (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current) {
+            dynamicRef.current.removeEventListener("scroll", onDynamicScroll);
+        }
+    }, [dynamicRef, onDynamicScroll]);
+    var bindEventFixed = useCallback(function () {
+        removeEventDynamic();
+        if (fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) {
+            fixedRef.current.addEventListener("scroll", onFixedScroll);
+        }
+    }, [fixedRef, onFixedScroll, removeEventDynamic]);
+    var bindEventDynamic = useCallback(function () {
+        removeEventFixed();
+        if (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current) {
+            dynamicRef.current.addEventListener("scroll", onDynamicScroll);
+        }
+    }, [dynamicRef, onDynamicScroll, removeEventFixed]);
+    useEffect(function () {
+        if (canFreeze) {
+            if (fixedRef === null || fixedRef === void 0 ? void 0 : fixedRef.current) {
+                fixedRef.current.addEventListener("mouseover", bindEventFixed);
+            }
+            if (dynamicRef === null || dynamicRef === void 0 ? void 0 : dynamicRef.current) {
+                dynamicRef.current.addEventListener("mouseover", bindEventDynamic);
+            }
+        }
+    }, [
+        bindEventDynamic,
+        bindEventFixed,
+        canFreeze,
+        dynamicRef,
+        fixedRef,
+        onDynamicScroll,
+        onFixedScroll
+    ]);
+    return { frozenWidth: frozenWidth, setFrozenWidth: setFrozenWidth, fixedRef: fixedRef, dynamicRef: dynamicRef };
+}
+export default useScroll;

package/BasicTable/useTable.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { UseTableProps, SortingProps } from "./types";
+declare function useTable(props: UseTableProps): {
+    headers: {
+        Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        align?: "left" | "right" | "center" | undefined;
+        accessor: string;
+        canSort: boolean | undefined;
+        canBeFrozen?: boolean | undefined;
+        Cell: JSX.Element;
+        title: string;
+        onSort: ({ field }: Pick<SortingProps, "field">) => void;
+    }[];
+    footers: {
+        Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        align?: "left" | "right" | "center" | undefined;
+        accessor: string;
+        canSort?: boolean | undefined;
+        canBeFrozen?: boolean | undefined;
+        Cell: import("react").FunctionComponentElement<any>;
+    }[];
+    columns: {
+        Header: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        Body: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+        Footer?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+        align?: "left" | "right" | "center" | undefined;
+        accessor: string;
+        canSort?: boolean | undefined;
+        canBeFrozen?: boolean | undefined;
+        Cell: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+    }[];
+    rows: import("./types").IRow[];
+};
+export default useTable;

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;
+            var canSortBy = canSort && !disableSortBy;
+            return __assign(__assign({ Cell: (_jsxs(_Fragment, { children: [cloneElement(Header || _jsx(_Fragment, {}), { column: col }), canSortBy && renderSortingSymbol(accessor)] })), title: "".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/BreadCrumbs/index.d.ts

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

package/BreadCrumbs/index.js

@@ -0,0 +1,37 @@
+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 { useCallback } from "react";
+import { navigate } from "@reach/router";
+import Breadcrumbs from "@mui/material/Breadcrumbs";
+import Typography from "@mui/material/Typography";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import NavigateNextIcon from "@mui/icons-material/NavigateNext";
+import useCustomTheme from "../useCustomTheme";
+function Crumbs(props) {
+    var routes = props.routes, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    var onNavigateTo = useCallback(function (url) {
+        navigate(url, { replace: true });
+    }, []);
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Breadcrumbs, __assign({ "aria-label": "breadcrumb", separator: _jsx(NavigateNextIcon, { fontSize: "small" }) }, { children: [_jsx(Typography, {}), routes.map(function (route) {
+                    var href = route.href, label = route.label;
+                    return href ? (_jsx(Typography, __assign({ variant: "body2", color: "inherit", sx: {
+                            "&:hover": {
+                                cursor: "pointer",
+                                color: theme.palette.primary.light,
+                            },
+                        }, onClick: function () { return onNavigateTo(href); } }, { children: label }), label)) : (_jsx(Typography, __assign({ variant: "body2", color: "primary" }, { children: label }), label));
+                })] })) })));
+}
+export default Crumbs;
+export * from "./types";

package/BreadCrumbs/types.d.ts

@@ -0,0 +1,9 @@
+import { CSSProperties } from "react";
+export interface BreadCrumbsProps {
+    routes: Array<{
+        href?: string;
+        label: string;
+    }>;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
+}

package/BreadCrumbs/types.js

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

package/CheckBox/CheckBox.d.ts

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

package/CheckBox/CheckBox.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";
+export 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/CheckBoxGroup.d.ts

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

package/CheckBox/CheckBoxGroup.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";
+export 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/CheckBox/index.d.ts

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

package/CheckBox/index.js

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

package/CheckBox/types.d.ts

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

package/CheckBox/types.js

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

package/Copyright/index.d.ts

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

package/Copyright/index.js

@@ -0,0 +1,25 @@
+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 Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useCustomTheme from "../useCustomTheme";
+function Copyright(props) {
+    var primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Typography, __assign({ variant: "body2", color: "textSecondary", align: "center" }, { children: ["Copyright © ", _jsx(Link, __assign({ color: "inherit", href: "https://symply.io/" }, { children: "Symply Software Inc" })), "\u00A0", new Date().getFullYear() > 2020
+                    ? "2020-".concat(new Date().getFullYear())
+                    : new Date().getFullYear(), "."] })) })));
+}
+export default Copyright;
+export * from "./types";

package/Copyright/types.d.ts

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

package/Copyright/types.js

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

package/DateInput/FullDateInput/index.d.ts

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

package/DateInput/FullDateInput/index.js

@@ -0,0 +1,79 @@
+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 { useRifm } from "rifm";
+import TextField from "@mui/material/TextField";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useInteractions from "./useInteractions";
+import useCustomTheme from "../../useCustomTheme";
+export function MonthDayYearFormat(str) {
+    var digits = (str.match(/\d+/g) || []).join("");
+    var chars = digits.split("");
+    return chars.reduce(function (prev, curr, index) {
+        if (index === 2) {
+            return "".concat(prev, " / ").concat(curr);
+        }
+        else if (index === 4) {
+            return "".concat(prev, " / ").concat(curr);
+        }
+        else {
+            return "".concat(prev).concat(curr);
+        }
+    }, "");
+}
+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("/");
+        var month = parseInt(tmpArr[0].trim(), 10);
+        var day = parseInt(tmpArr[1].trim(), 10);
+        var year = parseInt(tmpArr[2].trim(), 10);
+        var verifyLeapYear = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+        if (month === 2 && !verifyLeapYear) {
+            return day < 29;
+        }
+        return true;
+    }
+    return false;
+}
+function FullDateInput(props) {
+    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({
+        mask: true,
+        value: String(value),
+        onChange: onChange,
+        replace: addMask,
+        format: MonthDayYearFormat
+    });
+    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
+                : "", InputLabelProps: {
+                shrink: true
+            } }, rest)) })));
+}
+export default FullDateInput;

package/DateInput/FullDateInput/types.d.ts

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

package/DateInput/FullDateInput/types.js

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

package/DateInput/FullDateInput/useInteractions.d.ts

@@ -0,0 +1,8 @@
+interface InteractionProps {
+    value: string;
+}
+declare function useInteractions(props: InteractionProps): {
+    valLength: number;
+    addMask: (str: string) => string;
+};
+export default useInteractions;

package/DateInput/FullDateInput/useInteractions.js

@@ -0,0 +1,20 @@
+import { useCallback, useMemo } from "react";
+function useInteractions(props) {
+    var value = props.value;
+    var addMask = useCallback(function (str) {
+        var digits = (str.match(/\d+/g) || []).join("");
+        var month = digits.slice(0, 2).padEnd(2, "_");
+        var day = digits.slice(2, 4).padEnd(2, "_");
+        var Year = digits.slice(4, 8).padEnd(4, "_");
+        if (digits) {
+            return "".concat(month, " / ").concat(day, " / ").concat(Year);
+        }
+        return "";
+    }, []);
+    var valLength = useMemo(function () {
+        var digitsArr = String(value).match(/\d/g);
+        return digitsArr ? digitsArr.length : 0;
+    }, [value]);
+    return { valLength: valLength, addMask: addMask };
+}
+export default useInteractions;

package/DateInput/MonthDayInput/index.d.ts

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

package/DateInput/MonthDayInput/index.js

@@ -0,0 +1,65 @@
+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 { useRifm } from "rifm";
+import TextField from "@mui/material/TextField";
+import ThemeProvider from "@mui/material/styles/ThemeProvider";
+import useInteractions from "./useInteractions";
+import useCustomTheme from "../../useCustomTheme";
+export function MonthDayFormat(str) {
+    var digits = (str.match(/\d+/g) || []).join("");
+    var chars = digits.split("");
+    return chars.reduce(function (prev, curr, index) {
+        if (index === 2) {
+            return "".concat(prev, " / ").concat(curr);
+        }
+        else {
+            return "".concat(prev).concat(curr);
+        }
+    }, "");
+}
+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 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({
+        mask: true,
+        value: String(value),
+        onChange: onChange,
+        replace: addMask,
+        format: MonthDayFormat
+    });
+    return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(TextField, __assign({ placeholder: "MM / DD", error: error ||
+                (valLength > 0 &&
+                    (onValidate ? !onValidate(value) : !onValidateMonthDay(value))), margin: margin, value: rifm.value, onChange: rifm.onChange, helperText: valLength > 0 &&
+                (onValidate ? !onValidate(value) : !onValidateMonthDay(value))
+                ? helperText
+                : "", InputLabelProps: {
+                shrink: true
+            } }, rest)) })));
+}
+export default MonthDayInput;

package/DateInput/MonthDayInput/types.d.ts

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

package/DateInput/MonthDayInput/types.js

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