tp-react-elements-dev 1.12.21 → 1.12.23

package/dist/components/FormComponents/DatePicker/DateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/DatePicker/DateRangePicker.tsx"],"names":[],"mappings":"AA0IA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,4CAA4C,CAAC;AAEpD,QAAA,MAAM,wBAAwB,GAAI,uCAG/B;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAEA,CAAC;AAEF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/DatePicker/DateRangePicker.tsx"],"names":[],"mappings":"AA0IA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,sCAAsC,CAAC;AAE9C,QAAA,MAAM,wBAAwB,GAAI,uCAG/B;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAEA,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/dist/components/FormComponents/DatePicker/DatepickerWrapperV2.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 declare const DatepickerWrapperV2: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/DatePicker/DatepickerWrapperV2.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerWrapperV2.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/DatePicker/DatepickerWrapperV2.tsx"],"names":[],"mappings":"AAMA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,4CAA4C,CAAC;AAGpD,QAAA,MAAM,mBAAmB,GAAI,qBAG1B;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAmFA,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"DatepickerWrapperV2.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/DatePicker/DatepickerWrapperV2.tsx"],"names":[],"mappings":"AAMA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,sCAAsC,CAAC;AAG9C,QAAA,MAAM,mBAAmB,GAAI,qBAG1B;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAmFA,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/FormComponents/DatePicker/DatepickerWrapperV2.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs from 'dayjs';
+import { useRef, useState } from 'react';
+import { Controller } from 'react-hook-form';
+import { renderLabel } from '../../../lib/Constants/FormConstants.js';
+import FormBottomField from '../FormBottomField/FormBottomField.js';
+
+const DatepickerWrapperV2 = ({ props, variant, }) => {
+    const inputTextRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const handleToggle = () => {
+        if (!open) {
+            inputTextRef.current?.blur();
+        }
+        setOpen(!open);
+    };
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError && props.fieldError;
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [renderLabel(variant, props), jsx(DatePicker, { views: ["month", "year", "day"], label: variant !== "standard"
+                                ? `${props.item.label}${props.item.required ? " *" : ""}`
+                                : "", value: field.value
+                                ? typeof field.value === "string"
+                                    ? dayjs(field.value, "DD/MM/YYYY")
+                                    : dayjs(field.value)
+                                : null, className: "read-only", format: "DD/MM/YYYY", open: open, onOpen: handleToggle, onClose: handleToggle, minDate: props?.item?.minDate
+                                ? dayjs(props?.item?.minDate, "DD/MM/YYYY")
+                                : undefined, maxDate: props?.item?.maxDate
+                                ? dayjs(props?.item?.maxDate, "DD/MM/YYYY")
+                                : undefined, disabled: props.item.disable || false, onChange: (date) => {
+                                field.onChange(dayjs(date).format("DD/MM/YYYY"));
+                                props?.item?.onChangeFn &&
+                                    props?.item?.onChangeFn(dayjs(date).format("DD/MM/YYYY"));
+                            }, slotProps: {
+                                textField: {
+                                    onClick: () => handleToggle(),
+                                    inputRef: inputTextRef,
+                                    onBlur: (e) => {
+                                        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+                                    },
+                                    inputProps: {
+                                        input: { cursor: "pointer" },
+                                    },
+                                    error: isShowBorderError,
+                                    sx: {
+                                        "& .MuiFormLabel-root": {
+                                            top: -10,
+                                        },
+                                        "& .MuiInputLabel-shrink": {
+                                            top: 0,
+                                        },
+                                    },
+                                },
+                            } })] }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+};
+
+export { DatepickerWrapperV2 as default };

package/dist/components/FormComponents/DatePicker/MonthPicker.js

@@ -0,0 +1,48 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { Controller } from 'react-hook-form';
+import { TextField, FormGroup, FormControlLabel, Checkbox } from '@mui/material';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+const MonthPicker = ({ props }) => {
+    const [selectedMonths, setSelectedMonths] = useState([]);
+    const handleMonthChange = (date) => {
+        // Handle the selected months
+        setSelectedMonths((prevSelectedMonths) => {
+            const monthIndex = date.getMonth();
+            if (prevSelectedMonths.includes(monthIndex)) {
+                // If month is already selected, remove it
+                return prevSelectedMonths?.filter((month) => month !== monthIndex);
+            }
+            else {
+                // If month is not selected, add it
+                return [...prevSelectedMonths, monthIndex];
+            }
+        });
+    };
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: jsx(DatePicker, { value: field.value, onChange: handleMonthChange, slots: {
+                            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                            textField: (textFieldProps) => (jsx(TextField, { ...textFieldProps, fullWidth: true, disabled: props.item.disable || false, InputLabelProps: {
+                                    shrink: true,
+                                }, error: props.errors, inputProps: {
+                                    min: props.item.minDate,
+                                } })),
+                        }, slotProps: {
+                            textField: {
+                                sx: {
+                                    "& .MuiFormLabel-root": {
+                                        top: -10,
+                                    },
+                                    "& .MuiInputLabel-shrink": {
+                                        top: 0,
+                                    },
+                                },
+                            },
+                        } }) }), jsx(FormGroup, { children: Array.from({ length: 12 }).map((_, index) => (jsx(FormControlLabel, { control: jsx(Checkbox, { checked: selectedMonths.includes(index), onChange: () => handleMonthChange(new Date(2000, index, 1)), color: "primary" }), label: new Date(2000, index, 1).toLocaleDateString(undefined, {
+                            month: "short",
+                        }) }, index))) })] })) }));
+};
+
+export { MonthPicker as default };

package/dist/components/FormComponents/DatePicker/Monthpickerrender.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 declare const Monthpickerrender: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/DatePicker/Monthpickerrender.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Monthpickerrender.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/DatePicker/Monthpickerrender.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,4CAA4C,CAAC;AAGpD,QAAA,MAAM,iBAAiB,GAAI,qBAGxB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CA+FA,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"Monthpickerrender.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/DatePicker/Monthpickerrender.tsx"],"names":[],"mappings":"AAUA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,sCAAsC,CAAC;AAG9C,QAAA,MAAM,iBAAiB,GAAI,qBAGxB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CA+FA,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/FormComponents/DatePicker/Monthpickerrender.js

@@ -0,0 +1,61 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import dayjs from 'dayjs';
+import { useRef, useState } from 'react';
+import { Controller } from 'react-hook-form';
+import { renderLabel, formatDateMonthAndYear } from '../../../lib/Constants/FormConstants.js';
+import FormBottomField from '../FormBottomField/FormBottomField.js';
+
+const Monthpickerrender = ({ props, variant, }) => {
+    const ref = useRef(null);
+    const [open, setOpen] = useState(false);
+    const handleToggle = () => {
+        if (!open) {
+            ref.current?.blur();
+        }
+        setOpen(!open);
+    };
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError && props.fieldError;
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [jsxs(LocalizationProvider, { dateAdapter: AdapterDayjs, children: [renderLabel(variant, props), jsx(DatePicker, { ref: ref, label: variant !== "standard" &&
+                                `${props.item.label}${props.item.required ? " *" : ""}`, views: ["month", "year"], disabled: props.item.disable, value: field.value
+                                ? dayjs(formatDateMonthAndYear(field.value || null))
+                                : null, slotProps: {
+                                textField: {
+                                    onClick: () => handleToggle(),
+                                    inputRef: ref,
+                                    error: isShowBorderError,
+                                },
+                            }, disableOpenPicker: props.item.disable, open: open, onOpen: handleToggle, onClose: handleToggle, defaultValue: field.value, onChange: (date) => {
+                                field.onChange(dayjs(date).format("MM/YYYY"));
+                                props.setValue(dayjs(date).format("MM/YYYY"));
+                            }, sx: {
+                                "& .css-1holvmy,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
+                                    top: "-10px",
+                                },
+                                "& input": {
+                                    paddingRight: "0px !important",
+                                },
+                                "& button": {
+                                    paddingLeft: "0px !important",
+                                    paddingRight: "0px !important",
+                                },
+                                "& .MuiFormLabel-root": {
+                                    top: -10,
+                                },
+                                "& .MuiInputLabel-shrink": {
+                                    top: 0,
+                                },
+                            }, minDate: props.item.minDate
+                                ? dayjs(props.item.minDate, "MM/YYYY")
+                                : undefined, maxDate: props.item.maxDate
+                                ? dayjs(props.item.maxDate, "MM/YYYY")
+                                : undefined })] }), props?.item?.helperText && (jsxs("span", { style: {
+                        fontSize: "11px",
+                        color: "#3651d3",
+                    }, children: ["(", props?.item?.helperText, ")"] })), jsx(FormBottomField, { ...props })] })) }));
+};
+
+export { Monthpickerrender as default };

package/dist/components/FormComponents/FileUpload/FormRenderFileUpload.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 declare const FormRenderFileUpload: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/FileUpload/FormRenderFileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormRenderFileUpload.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FileUpload/FormRenderFileUpload.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,4CAA4C,CAAC;AAI3F,QAAA,MAAM,oBAAoB,GAAI,qBAG3B;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAqHA,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"FormRenderFileUpload.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FileUpload/FormRenderFileUpload.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAIrF,QAAA,MAAM,oBAAoB,GAAI,qBAG3B;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAqHA,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/FormComponents/FileUpload/FormRenderFileUpload.js

@@ -0,0 +1,86 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Box, TextField } from '@mui/material';
+import { useEffect } from 'react';
+import { renderLabel } from '../../../lib/Constants/FormConstants.js';
+import FormBottomField from '../FormBottomField/FormBottomField.js';
+
+const FormRenderFileUpload = ({ props, variant, }) => {
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError && props.fieldError;
+    useEffect(() => {
+        if (props.getValues(props.item.name) === null ||
+            props.getValues(props.item.name) === undefined) {
+            const element = document.getElementById(props.item.name);
+            console.log(element, "elementelement");
+            if (element) {
+                element.value = ""; // Ensure it's an input element
+            }
+        }
+    }, [props.getValues(props.item.name)]);
+    return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: "4px", sx: { ...props.item.sx }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: "10px;" }, children: renderLabel(variant, props, true) })), jsx(TextField, { type: "file", id: props.item.name, error: isShowBorderError, inputProps: {
+                            accept: props.item.fileType === "excel"
+                                ? ".xls, .xlsx"
+                                : props.item.fileType === "pdf"
+                                    ? ".pdf"
+                                    : props.item.fileType === "zip"
+                                        ? ".zip"
+                                        : props.item.fileType === "all"
+                                            ? ".pdf,.jpg,.jpeg,.png,.xls,.xlsx,.doc,.docx,.zip"
+                                            : "",
+                        }, onChange: (event) => {
+                            const file = event.target?.files[0];
+                            console.log(file, "filefile");
+                            const fileName = file ? file.name : null;
+                            const allowedExtensions = {
+                                excel: ["xls", "xlsx"],
+                                pdf: ["pdf"],
+                                zip: ["zip"],
+                                all: [
+                                    "pdf",
+                                    "jpg",
+                                    "jpeg",
+                                    "png",
+                                    "xls",
+                                    "xlsx",
+                                    "doc",
+                                    "docx",
+                                    "zip",
+                                ],
+                                image: ["jpg", "jpeg", "png"],
+                            };
+                            const fileExtension = fileName
+                                ? fileName.split(".").pop().toLowerCase()
+                                : null;
+                            const validExtensions = props.item.fileType === "excel"
+                                ? allowedExtensions.excel
+                                : props.item.fileType === "pdf"
+                                    ? allowedExtensions.pdf
+                                    : allowedExtensions.all;
+                            if (props.item?.fileType &&
+                                fileExtension &&
+                                !validExtensions.includes(fileExtension)) {
+                                props.item?.handleFileError
+                                    ? props.item?.handleFileError(`Please upload ${allowedExtensions[props.item.fileType].join(",")} Files only`)
+                                    : alert(`Please upload ${allowedExtensions[props.item.fileType].join(",")} Files only`);
+                                event.target.value = ""; // Clear the file input\
+                                props.setValue(props.item?.name, null);
+                                props.setValue(props.item?.name + "Name", "");
+                                return;
+                            }
+                            else if (event.target.files[0].size > (props.item.filesize || 20000000)) {
+                                const maxSizeMB = ((props.item.filesize || 20000000) /
+                                    (1024 * 1024)).toFixed(2);
+                                props.item?.handleFileError
+                                    ? props.item?.handleFileError(`File size should be less than ${maxSizeMB}MB`)
+                                    : alert(`File size should be less than ${maxSizeMB}MB`);
+                                event.target.value = ""; // Clear the file input
+                                props.setValue(props.item?.name, null);
+                                props.setValue(props.item?.name + "Name", "");
+                                return;
+                            }
+                            props.setValue(props.item?.name, file);
+                            props.setValue(props.item?.name + "Name", fileName);
+                        }, sx: { width: "100%" } })] }), jsx(FormBottomField, { ...props })] }));
+};
+
+export { FormRenderFileUpload as default };

package/dist/components/FormComponents/FileUpload/FormRenderMultiFileUpload.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 declare const FormRenderMultiFileUpload: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/FileUpload/FormRenderMultiFileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormRenderMultiFileUpload.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FileUpload/FormRenderMultiFileUpload.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,4CAA4C,CAAC;AAGpD,QAAA,MAAM,yBAAyB,GAAI,qBAGhC;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAiIA,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"FormRenderMultiFileUpload.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FileUpload/FormRenderMultiFileUpload.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,sCAAsC,CAAC;AAG9C,QAAA,MAAM,yBAAyB,GAAI,qBAGhC;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAiIA,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/dist/components/FormComponents/FileUpload/FormRenderMultiFileUpload.js

@@ -0,0 +1,96 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Box, TextField } from '@mui/material';
+import { useEffect } from 'react';
+import { renderLabel } from '../../../lib/Constants/FormConstants.js';
+import FormBottomField from '../FormBottomField/FormBottomField.js';
+
+const FormRenderMultiFileUpload = ({ props, variant, }) => {
+    // const getDocument: Document = document;
+    useEffect(() => {
+        if (props.getValues(props.item.name) === null ||
+            props.getValues(props.item.name) === undefined) {
+            const element = document.getElementById(props.item.name);
+            console.log(element, "elementelement");
+            if (element) {
+                element.value = ""; // Ensure it's an input element
+            }
+        }
+    }, [props.getValues(props.item.name)]);
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError && props.fieldError;
+    return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: "4px", sx: { ...props.item.sx }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: "10px;" }, children: renderLabel(variant, props, true) })), jsx(TextField, { type: "file", id: props.item.name, error: isShowBorderError, inputProps: {
+                            multiple: true,
+                            accept: props.item.fileType === "excel"
+                                ? ".xls,.xlsx"
+                                : props.item.fileType === "pdf"
+                                    ? ".pdf"
+                                    : props.item.fileType === "image"
+                                        ? ".jpg,.jpeg,.png"
+                                        : props.item.fileType === "all"
+                                            ? ".pdf,.jpg,.jpeg,.png,.xls,.xlsx,.doc,.docx"
+                                            : "",
+                        }, onChange: (event) => {
+                            const file = event.target.files;
+                            const fileName = file && file.length > 0
+                                ? Array.from(file)
+                                    .map((item) => item.name)
+                                    .join(",")
+                                : null;
+                            console.log(file, "filefile", file.length, fileName);
+                            const allowedExtensions = {
+                                excel: ["xls", "xlsx"],
+                                pdf: ["pdf"],
+                                image: ["jpg", "jpeg", "png"],
+                                all: [
+                                    "pdf",
+                                    "jpg",
+                                    "jpeg",
+                                    "png",
+                                    "xls",
+                                    "xlsx",
+                                    "doc",
+                                    "docx",
+                                    "zip",
+                                ],
+                                zip: ["zip"],
+                            };
+                            let fileExtension = null;
+                            if (fileName) {
+                                const ext = fileName.split(".").pop();
+                                if (ext) {
+                                    fileExtension = ext.toLowerCase();
+                                }
+                            }
+                            const validExtensions = props.item.fileType === "excel"
+                                ? allowedExtensions.excel
+                                : props.item.fileType === "pdf"
+                                    ? allowedExtensions.pdf
+                                    : props.item.fileType === "image"
+                                        ? allowedExtensions.image
+                                        : allowedExtensions.all;
+                            if (props.item?.fileType &&
+                                fileExtension &&
+                                !validExtensions.includes(fileExtension)) {
+                                props.item?.handleFileError &&
+                                    props.item?.handleFileError(`Please upload ${allowedExtensions[props.item.fileType].join(",")} Files only`);
+                                event.target.value = ""; // Clear the file input\
+                                props.setValue(props.item?.name, null);
+                                props.setValue(props.item?.name + "Name", "");
+                                return;
+                            }
+                            else if (event.target.files[event.target.files.length - 1].size > 20000000) {
+                                props.item?.handleFileError &&
+                                    props.item?.handleFileError(`File size should be less than 20MB`);
+                                event.target.files = null; // Clear the file input
+                                props.setValue(props.item?.name, null);
+                                props.setValue(props.item?.name + "File", []);
+                                return;
+                            }
+                            const fileArray = Array.from(file);
+                            console.log(fileArray, "fileArrayfileArray");
+                            props.setValue(props.item?.name, fileName);
+                            props.setValue(props.item?.name + "File", fileArray);
+                        }, sx: { width: "100%" } })] }), jsx(FormBottomField, { ...props })] }));
+};
+
+export { FormRenderMultiFileUpload as default };

package/dist/components/FormComponents/FormBottomField/FormBottomField.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps } from "../../../lib/Interface/FormInterface";
 declare const FormBottomField: (props: FormRenderProps) => import("react/jsx-runtime").JSX.Element;
 export default FormBottomField;
 //# sourceMappingURL=FormBottomField.d.ts.map

package/dist/components/FormComponents/FormBottomField/FormBottomField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormBottomField.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormBottomField/FormBottomField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAI7E,QAAA,MAAM,eAAe,GAAI,OAAO,eAAe,4CAO9C,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"FormBottomField.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormBottomField/FormBottomField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAIvE,QAAA,MAAM,eAAe,GAAI,OAAO,eAAe,4CAO9C,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/FormComponents/FormBottomField/FormBottomField.js

@@ -0,0 +1,9 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import FormErrorField from '../FormErrorField/FormErrorField.js';
+import HelperText from '../HelperText/HelperText.js';
+
+const FormBottomField = (props) => {
+    return (jsxs(Fragment, { children: [jsx(HelperText, { ...props }), jsx(FormErrorField, { ...props })] }));
+};
+
+export { FormBottomField as default };

package/dist/components/FormComponents/FormCheckBox/FormCheckBox.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 declare const FormCheckBox: ({ props, variant: _variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/FormCheckBox/FormCheckBox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormCheckBox.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormCheckBox/FormCheckBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,4CAA4C,CAAC;AAGpD,QAAA,MAAM,YAAY,GAAI,+BAGnB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAsBA,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"FormCheckBox.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormCheckBox/FormCheckBox.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,sCAAsC,CAAC;AAG9C,QAAA,MAAM,YAAY,GAAI,+BAGnB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAsBA,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/FormComponents/FormCheckBox/FormCheckBox.js

@@ -0,0 +1,10 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Checkbox } from '@mui/material';
+import { Controller } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.js';
+
+const FormCheckBox = ({ props, variant: _variant, }) => {
+    return (jsxs(Fragment, { children: [jsxs("span", { className: "formInputlabel", style: { fontSize: "12px" }, children: [props.item.label, " ", props.item.required && jsx("span", { style: { color: "red" }, children: "*" })] }), jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsx(Checkbox, { ...field, checked: !!field.value, onChange: (e) => field.onChange(e.target.checked), sx: { width: "24px", height: "24px", ...props.item.sx } })) }), jsx(FormBottomField, { ...props })] }));
+};
+
+export { FormCheckBox as default };

package/dist/components/FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 declare const FormCheckBoxGroup: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormCheckBoxGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.tsx"],"names":[],"mappings":"AASA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,4CAA4C,CAAC;AAGpD,QAAA,MAAM,iBAAiB,GAAI,qBAGxB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CA8CA,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"FormCheckBoxGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.tsx"],"names":[],"mappings":"AASA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,sCAAsC,CAAC;AAG9C,QAAA,MAAM,iBAAiB,GAAI,qBAGxB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CA8CA,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.js

@@ -0,0 +1,23 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { FormControl, FormGroup, FormControlLabel, Typography, Checkbox } from '@mui/material';
+import { Controller } from 'react-hook-form';
+import { renderLabel } from '../../../lib/Constants/FormConstants.js';
+import FormBottomField from '../FormBottomField/FormBottomField.js';
+
+const FormCheckBoxGroup = ({ props, variant, }) => {
+    return (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(FormControl, { component: "fieldset", children: jsx(FormGroup, { row: true, children: props.item?.settings &&
+                        props.item.settings.map((settings, i) => {
+                            return (jsx(Controller, { name: settings.name, control: props.control, render: ({ field }) => {
+                                    return (jsx(FormControlLabel, { control: jsx(Checkbox, { ...field, checked: field.value }), sx: {
+                                            ".MuiCheckbox-root": {
+                                                padding: "6px 2px 6px 8px",
+                                                ".css-imrjgg-MuiButtonBase-root-MuiCheckbox-root": {
+                                                    color: "rgb(0, 0, 0) !important",
+                                                },
+                                            },
+                                        }, label: jsx(Typography, { variant: "subtitle2", fontSize: "11px", fontWeight: "normal !important", children: settings.label }), labelPlacement: "end" }));
+                                } }, i));
+                        }) }) }), jsx(FormBottomField, { ...props })] }));
+};
+
+export { FormCheckBoxGroup as default };

package/dist/components/FormComponents/FormErrorField/FormErrorField.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps } from "../../../lib/Interface/FormInterface";
 declare const FormErrorField: (props: FormRenderProps) => import("react/jsx-runtime").JSX.Element;
 export default FormErrorField;
 //# sourceMappingURL=FormErrorField.d.ts.map

package/dist/components/FormComponents/FormErrorField/FormErrorField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormErrorField.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormErrorField/FormErrorField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,4CAA4C,CAAC;AAE7E,QAAA,MAAM,cAAc,GAAI,OAAM,eAAe,4CAM5C,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"FormErrorField.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormErrorField/FormErrorField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAC;AAEvE,QAAA,MAAM,cAAc,GAAI,OAAM,eAAe,4CAM5C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/FormComponents/FormErrorField/FormErrorField.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { ErrorMessage } from '@hookform/error-message';
+import { ErrorMessageComponent } from '../../Form/Form.styles.js';
+
+const FormErrorField = (props) => {
+    return (jsx(ErrorMessageComponent, { children: jsx(ErrorMessage, { errors: props.errors, name: props.item.name }) }));
+};
+
+export { FormErrorField as default };

package/dist/components/FormComponents/FormNumberField/FormNumberField.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 declare const FormNumberField: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/FormNumberField/FormNumberField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormNumberField.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormNumberField/FormNumberField.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,4CAA4C,CAAC;AAGpD,QAAA,MAAM,eAAe,GAAI,qBAGtB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAsEA,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"FormNumberField.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormNumberField/FormNumberField.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,sCAAsC,CAAC;AAG9C,QAAA,MAAM,eAAe,GAAI,qBAGtB;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAsEA,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/FormComponents/FormNumberField/FormNumberField.js

@@ -0,0 +1,49 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { TextField } from '@mui/material';
+import { Controller } from 'react-hook-form';
+import { renderLabel } from '../../../lib/Constants/FormConstants.js';
+import FormBottomField from '../FormBottomField/FormBottomField.js';
+
+const FormNumberField = ({ props, variant, }) => {
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError && props.fieldError;
+    const label = variant !== "standard"
+        ? `${props.item.label}${props.item.required ? " *" : ""}`
+        : "";
+    return (jsx(Fragment, { children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => {
+                return (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TextField, { ...field, size: "small", label: label, error: isShowBorderError, value: props.getValues(props.item.name) || "", defaultValue: props.getValues(props.item.name) || null, onInput: (e) => {
+                                e.target.value = e.target.value.replace(/[^0-9]/g, "");
+                                if (e.target.value === "") {
+                                    e.target.value = null;
+                                }
+                                props?.item?.onChangeFn &&
+                                    props?.item?.onChangeFn(e.target.value);
+                                props?.clearErrors && props?.clearErrors(props.item.name);
+                            }, onBlur: (e) => {
+                                props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+                            }, sx: {
+                                "& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root,.css-kichxs-MuiFormLabel-root-MuiInputLabel-root": {
+                                    top: "-10px",
+                                },
+                            }, inputProps: {
+                                pattern: "[0-9]*", // Only allow numbers
+                                maxLength: props.item.maxLength || 20,
+                                onInput: (e) => {
+                                    if (props?.item?.donotAllowSpace) {
+                                        const value = e.target.value;
+                                        e.target.value = value.replace(" ", "");
+                                    }
+                                    if (!props?.item?.allowSpecialChars) {
+                                        const value = e.target.value;
+                                        e.target.value = value.replace(/[^a-zA-Z0-9 ]/g, "");
+                                    } // Allow only alphanumeric and space
+                                    if (e.target.value.length === 1 && e.target.value === " ") {
+                                        e.target.value = "";
+                                    }
+                                    props.item.onInputProps && props.item.onInputProps(e);
+                                },
+                            }, disabled: props.item.disable }), jsx(FormBottomField, { ...props })] }));
+            } }, props.item.name) }));
+};
+
+export { FormNumberField as default };

package/dist/components/FormComponents/FormNumberField/FormNumberFieldDecimal.d.ts

@@ -1,4 +1,4 @@
-import { FormRenderProps, VariantProps } from "../../../Utilities/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
 declare const FormNumberFieldDecimal: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;

package/dist/components/FormComponents/FormNumberField/FormNumberFieldDecimal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormNumberFieldDecimal.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormNumberField/FormNumberFieldDecimal.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,4CAA4C,CAAC;AAGpD,QAAA,MAAM,sBAAsB,GAAI,qBAG7B;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAmEA,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
+{"version":3,"file":"FormNumberFieldDecimal.d.ts","sourceRoot":"","sources":["../../../../src/components/FormComponents/FormNumberField/FormNumberFieldDecimal.tsx"],"names":[],"mappings":"AAGA,OAAO,EACL,eAAe,EACf,YAAY,EACb,MAAM,sCAAsC,CAAC;AAG9C,QAAA,MAAM,sBAAsB,GAAI,qBAG7B;IACD,KAAK,EAAE,eAAe,CAAC;IACvB,OAAO,EAAE,YAAY,CAAC;CACvB,4CAmEA,CAAC;AAEF,eAAe,sBAAsB,CAAC"}