tp-react-elements-dev 1.12.20 → 1.12.22

package/dist/components/DeleteComponent/DeleteField.js

@@ -0,0 +1,24 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Tooltip, Grid, Typography } from '@mui/material';
+import ConfirmationDialog from '../ModalField/ConfirmationDialog.js';
+import { useState } from 'react';
+
+const DeleteField = ({ onClickFn, tooltip = "Delete", text }) => {
+    const [openDialog, setOpenDialog] = useState(false);
+    const handleCancel = () => {
+        setOpenDialog(false);
+    };
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: jsx(Typography, { sx: { fontSize: "8px" }, children: tooltip }), children: jsx(Grid, { sx: { ":hover": { cursor: "pointer" } }, onClick: () => {
+                        setOpenDialog(true);
+                    }, children: jsx("i", { className: "flaticon-trash", style: {
+                            lineHeight: 1,
+                            fontSize: "11px",
+                            color: "red",
+                            marginTop: "10px",
+                        } }) }) }), jsx(ConfirmationDialog, { openConfirmDialog: openDialog, handleCancel: handleCancel, onClickSubmit: () => {
+                    handleCancel();
+                    onClickFn();
+                }, text: text })] }));
+};
+
+export { DeleteField as default };

package/dist/components/Form/Form.styles.js

@@ -0,0 +1,111 @@
+import styled from '@emotion/styled';
+import ArrowDropDownSharpIcon from '@mui/icons-material/ArrowDropDownSharp';
+import { Grid, Box, Button, MenuItem, Typography } from '@mui/material';
+import Container from '@mui/material/Container';
+import { DatePicker } from '@mui/x-date-pickers';
+
+const FormComponent = styled(Grid)(({ theme }) => ({
+    alignItems: "flex-start",
+    flexWrap: "wrap",
+    [theme.breakpoints.down("md")]: {
+        flexDirection: "column",
+    },
+}));
+styled(Box)(() => ({
+    margin: "5px 0px",
+    fontSize: "11px",
+    backgroundColor: "#ffff",
+    padding: "0.5em",
+    border: "0px solid rgba(0, 0, 0, 0.125)",
+    boxShadow: "0 1px 15px rgba(0,0,0,.04), 0 1px 6px rgba(0,0,0,.04)",
+    borderRadius: "0.75rem",
+}));
+const Formitem = styled(Grid, {
+    shouldForwardProp: (prop) => prop !== "isActive" && prop !== "noOfColumn",
+})(({ theme, noOfColumn }) => ({
+    width: `calc(100%/${noOfColumn})`,
+    flexDirection: "column",
+    paddingLeft: "15px",
+    paddingRight: "15px",
+    marginBottom: theme.spacing(1),
+    [theme.breakpoints.down("md")]: {
+        width: "100%",
+    },
+}));
+const ErrorMessageComponent = styled(Box)(() => ({
+    color: "red",
+    marginTop: "4px",
+    fontSize: "11px",
+    fontWeight: 500,
+}));
+styled(Container)(({ theme }) => ({
+    [theme.breakpoints.up("sm")]: {
+        padding: "16px 24px",
+    },
+    [theme.breakpoints.up("lg")]: {
+        paddingLeft: "30px",
+        paddingRight: "30px",
+    },
+}));
+styled(Button)(() => ({
+    color: "#fff",
+    backgroundColor: "#00acc1",
+    BorderColor: "#00acc1",
+}));
+styled(Button)(() => ({
+    color: "#fff",
+    backgroundColor: " #343a40",
+    borderColor: "#343a40",
+}));
+styled(Grid)(() => ({
+    alignItems: "start",
+    gap: "1px",
+}));
+styled("text")(() => ({
+    color: "red",
+}));
+styled(Box)(() => ({
+    margin: "5px 0px",
+    backgroundColor: "#ffff",
+    paddingBlock: "0.5em",
+    border: "0px solid rgba(0, 0, 0, 0.125)",
+    boxShadow: "0 1px 15px rgba(0,0,0,.04), 0 1px 6px rgba(0,0,0,.04)",
+    borderRadius: "0.75rem",
+    overflow: "hidden",
+    fontSize: "11px",
+}));
+styled(DatePicker)(() => ({
+    "& .MuiInputBase-input": {
+        padding: "6.38px 14px",
+    },
+}));
+styled(MenuItem)(() => ({
+    fontSize: "11px",
+}));
+styled(Box)(() => ({
+    maxHeight: "120px",
+    overflow: "auto",
+    position: "absolute",
+    top: "100%",
+    background: "#fff",
+    zIndex: 1000,
+    border: "1px solid #0001",
+}));
+styled(Typography)(() => ({
+    fontSize: "13px",
+    background: "#fff",
+    padding: "5px 13px",
+    zIndex: 1000,
+    "&:hover": {
+        backgroundColor: "#0001",
+        cursor: "pointer",
+    },
+}));
+styled(ArrowDropDownSharpIcon)(() => ({
+    fontSize: "25px",
+    position: "absolute",
+    right: 0,
+    color: "#0009",
+}));
+
+export { ErrorMessageComponent, FormComponent, Formitem };

package/dist/components/Form/FormActiveSwitch.js

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback } from 'react';
+
+const FormActiveSwitch = ({ props }) => {
+    const [active, setActive] = useState(true);
+    const { getValues, setValue, item } = props;
+    const defaultValue1 = item.value1 ?? "A";
+    const defaultValue2 = item.value2 ?? "I";
+    useEffect(() => {
+        const currentValue = getValues(item.name);
+        setActive(currentValue === defaultValue1);
+    }, [getValues, item.name, defaultValue1]);
+    const handleSwitchChange = useCallback(() => {
+        setActive((prevActive) => {
+            const newValue = !prevActive ? defaultValue1 : defaultValue2;
+            setValue(item.name, newValue);
+            return !prevActive;
+        });
+    }, [setValue, item.name, defaultValue1, defaultValue2]);
+    return (jsxs("div", { className: "m-form__input", children: [item.label && (jsx("span", { style: {
+                    fontSize: "12px",
+                    fontWeight: 400,
+                    paddingRight: 10,
+                }, children: item.label })), jsxs("span", { className: "switch prestashop-switch fixed-width-lg", children: [jsx("input", { checked: active, id: `${item.name}_on`, name: item.name, type: "radio", value: "Active", onChange: handleSwitchChange }), jsx("label", { htmlFor: `${item.name}_on`, style: { textTransform: "none" }, children: item.label1 ?? "Active" }), jsx("input", { checked: !active, id: `${item.name}_off`, name: item.name, type: "radio", value: "In Active", onChange: handleSwitchChange }), jsx("label", { htmlFor: `${item.name}_off`, style: { textTransform: "none" }, children: item.label2 ?? "In Active" }), jsx("a", { className: "slide-button btn" })] })] }));
+};
+
+export { FormActiveSwitch as default };

package/dist/components/Form/FormConstants.d.ts

@@ -1,5 +1,5 @@
 import * as Yup from "yup";
-import { FormSectionPropsItem } from "@/Utilities/Interface/FormInterface";
+import { FormSectionPropsItem } from "@/lib/Interface/FormInterface";
 export interface InitialValues {
     [key: string]: string | number | null | boolean;
 }

package/dist/components/Form/FormConstants.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormConstants.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormConstants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAE3E,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC;CACjD;AACD,MAAM,WAAW,eAAe;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;CAChC;AAED,QAAA,MAAM,wBAAwB,GAAI,WAAW,oBAAoB,EAAE;;;CAkXlE,CAAC;AAEF,eAAe,wBAAwB,CAAC"}
+{"version":3,"file":"FormConstants.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormConstants.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,oBAAoB,EAAE,MAAM,+BAA+B,CAAC;AAErE,MAAM,WAAW,aAAa;IAC5B,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC;CACjD;AACD,MAAM,WAAW,eAAe;IAC9B,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;CAChC;AAED,QAAA,MAAM,wBAAwB,GAAI,WAAW,oBAAoB,EAAE;;;CAkXlE,CAAC;AAEF,eAAe,wBAAwB,CAAC"}

package/dist/components/Form/FormConstants.js

@@ -0,0 +1,336 @@
+import * as Yup from 'yup';
+
+const useFormValidatingContext = (formArray) => {
+    const initialValues = {};
+    const validationShape = {};
+    const renderCustomError = (field) => {
+        if (field.customValidation) {
+            validationShape[field.name] = validationShape[field.name].test("custom-check", field.customErrorMessage || "Invalid value", (value) => {
+                // Call the custom validation function if provided
+                return field.customValidation ? field.customValidation(value) : true;
+            });
+        }
+    };
+    formArray.forEach((field) => {
+        switch (field.inputType) {
+            case "text":
+                initialValues[field.name] = "";
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = Yup.string()
+                        .typeError(field.errorMessage)
+                        .required(field.errorMessage);
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            case "rich-text-editor":
+                initialValues[field.name] = "";
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = Yup.string()
+                        .typeError(field.errorMessage)
+                        .required(field.errorMessage);
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            case "password":
+                initialValues[field.name] = "";
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = Yup.string()
+                        .typeError(field.errorMessage)
+                        .required(field.errorMessage);
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            case "email":
+                initialValues[field.name] = "";
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = Yup.string()
+                        .typeError(`Please enter ${field.label}`)
+                        .required(field.errorMessage)
+                        .test("valid-email", `Please enter valid Email`, (value) => {
+                        return /\@.*\..+/.test(value);
+                    });
+                    renderCustomError(field);
+                }
+                else {
+                    validationShape[field.name] = Yup.string()
+                        .typeError(`Please enter ${field.label}`)
+                        .test("valid-email", `Please enter valid Email`, (value) => {
+                        // Custom validation to check for at least one period after '@'
+                        return !value || /\@.*\..+/.test(value);
+                    });
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            case "multiEmail":
+                initialValues[field.name] = "";
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = Yup.string()
+                        .typeError(`Please enter ${field.label}`)
+                        .required(field.errorMessage)
+                        .test("valid-email", `Please enter valid Email`, (value) => {
+                        if (!value)
+                            return false;
+                        const emails = value.split(";");
+                        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                        return emails.every((email) => emailRegex.test(email.trim()));
+                    });
+                    renderCustomError(field);
+                }
+                else {
+                    validationShape[field.name] = Yup.string()
+                        .typeError(`Please enter ${field.label}`)
+                        .test("custom", `Please enter valid Email`, (value) => {
+                        // Custom validation to check for at least one period after '@'
+                        if (!value || value === "") {
+                            return true;
+                        }
+                        else {
+                            const emails = value.split(";");
+                            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+                            return emails.every((email) => emailRegex.test(email.trim()));
+                        }
+                    });
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            case "file":
+                initialValues[field.name] = null;
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = Yup.mixed()
+                        .test("fileOrString", field?.errorMessage, (value) => {
+                        return (value instanceof File ||
+                            (typeof value === "string" && value.trim() !== ""));
+                    })
+                        .required(field.errorMessage);
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            case "multifile":
+                initialValues[field.name] = null;
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = Yup.string()
+                        .test("hasAtLeastOneFile", field.errorMessage, (value) => {
+                        if (!value)
+                            return false;
+                        // Split by comma, trim, and filter out empty values
+                        const files = value
+                            .split(",")
+                            .map((f) => f.trim())
+                            .filter((f) => f !== "");
+                        return files.length > 0;
+                    })
+                        .required(field.errorMessage);
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            case "number":
+                initialValues[field.name] = null;
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = Yup.number()
+                        .nullable()
+                        .typeError(field.errorMessage)
+                        .required(field.errorMessage);
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            case "checkbox":
+                initialValues[field.name] = false;
+                break;
+            case "pincode":
+                initialValues[field.name] = null;
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = Yup.number()
+                        .nullable()
+                        .typeError(`Please enter PinCode`)
+                        .required(field.errorMessage)
+                        .test("is-six-digits", `Please enter a 6-digit PinCode`, (value) => {
+                        if (value) {
+                            const stringValue = value.toString();
+                            return stringValue.length === 6;
+                        }
+                        return false;
+                    });
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            // case "phoneNumber":
+            //   initialValues[field.name] = null;
+            //   if (field.required && field.errorMessage) {
+            //     validationShape[field.name] = Yup.number()
+            //       .nullable()
+            //       .typeError(`Please enter Mobile Number`)
+            //       .required(field.errorMessage)
+            //       .test(
+            //         "is-two-digits",
+            //         `Please enter a 10-digit Mobile Number`,
+            //         (value) => {
+            //           if (value) {
+            //             const stringValue = value.toString();
+            //             return stringValue.length === 2;
+            //           }
+            //           return false;
+            //         }
+            //       );
+            //       renderCustomError(field)
+            //   } else {
+            //     validationShape[field.name] = Yup.number()
+            //       .nullable()
+            //       // .typeError(`Please enter Mobile Number`)
+            //       .test(
+            //         "is-two-digits",
+            //         `Please enter a 10-digit Mobile Number`,
+            //         (value: any) => {
+            //           return !value || value?.toString().length === 2;
+            //         }
+            //       );
+            //       renderCustomError(field)
+            //   }
+            //   break;
+            case "phoneNumber":
+                initialValues[field.name] = null;
+                if (field.required) {
+                    validationShape[field.name] = Yup.number()
+                        .nullable()
+                        .typeError(`Please enter Mobile Number`)
+                        .required(field.errorMessage)
+                        .test("is-two-digits", `Please enter a 10-digit Mobile Number`, (value) => {
+                        if (value) {
+                            const stringValue = value.toString();
+                            return stringValue.length === 10;
+                        }
+                        return false;
+                    });
+                    renderCustomError(field);
+                }
+                else {
+                    validationShape[field.name] = Yup.string()
+                        .nullable()
+                        .typeError(``)
+                        .test("is-two-digits", `Please enter a 10-digit Mobile Number`, (value) => {
+                        if (value) {
+                            // Custom validation to check for at least one period after '@'
+                            const stringValue = value.toString();
+                            return stringValue.length === 10;
+                        }
+                        return true; // Skip validation if no value is present
+                    });
+                    renderCustomError(field);
+                }
+                break;
+            case "select":
+                initialValues[field.name] = "";
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = Yup.string()
+                        .typeError(`Select ${field.label}`)
+                        .required(field.errorMessage);
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            case "checkbox-group":
+            case "radio-group":
+                initialValues[field.name] = "";
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = Yup.string()
+                        .typeError(`Select ${field.label}`)
+                        .required(field.errorMessage);
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            case "multiselect":
+                initialValues[field.name] = null;
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = validationShape[field.name] =
+                        Yup.string()
+                            .typeError(`Select atleast one ${field.label}`)
+                            .required(field.errorMessage);
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            case "datepicker":
+            case "timepicker":
+                initialValues[field.name] = null;
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = validationShape[field.name] =
+                        Yup.string()
+                            .typeError(`Select ${field.label}`)
+                            .required(field.errorMessage);
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            case "yearpicker":
+                initialValues[field.name] = null;
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = validationShape[field.name] =
+                        Yup.string()
+                            .typeError(`Select ${field.label}`)
+                            .required(field.errorMessage);
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            case "monthpicker":
+                initialValues[field.name] = null;
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = validationShape[field.name] =
+                        Yup.string()
+                            .typeError(`Select ${field.label}`)
+                            .required(field.errorMessage);
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            case "toggleSwitch":
+                initialValues[field.name] = true;
+                renderCustomError(field);
+                break;
+            case "dateRangePicker":
+                const today = new Date();
+                const day = String(today.getDate()).padStart(2, "0");
+                const month = String(today.getMonth() + 1).padStart(2, "0"); // January is 0!
+                const year = today.getFullYear();
+                const formattedDate = `${day}/${month}/${year}`;
+                const threeMonthsAgo = new Date(today);
+                threeMonthsAgo.setMonth(today.getMonth() - (field.monthSpan ?? 3));
+                const dayBeforeThreeMonths = String(threeMonthsAgo.getDate()).padStart(2, "0");
+                const monthBeforeThreeMonths = String(threeMonthsAgo.getMonth() + 1).padStart(2, "0"); // January is 0!
+                const yearBeforeThreeMonths = threeMonthsAgo.getFullYear();
+                const formattedDateForThreeMonths = `${dayBeforeThreeMonths}/${monthBeforeThreeMonths}/${yearBeforeThreeMonths}`;
+                initialValues["FromDate"] = formattedDateForThreeMonths;
+                initialValues["ToDate"] = formattedDate;
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = validationShape[field.name] =
+                        Yup.string()
+                            .typeError(`Select ${field.label}`)
+                            .required(field.errorMessage);
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+            default:
+                initialValues[field.name] = null; // default value if inputType is not recognized
+                if (field.required && field.errorMessage) {
+                    validationShape[field.name] = Yup.mixed().required(field.errorMessage);
+                    renderCustomError(field);
+                }
+                renderCustomError(field);
+                break;
+        }
+    });
+    const validationSchema = Yup.object().shape(validationShape);
+    return { validationSchema, initialValues };
+};
+
+export { useFormValidatingContext as default };

package/dist/components/Form/FormRender.d.ts

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

package/dist/components/Form/FormRender.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormRender.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormRender.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAsB1E,QAAA,MAAM,UAAU,GAAI,OAAO,eAAe,4CA2FzC,CAAC;AAGF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FormRender.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormRender.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAsBpE,QAAA,MAAM,UAAU,GAAI,OAAO,eAAe,4CA2FzC,CAAC;AAGF,eAAe,UAAU,CAAC"}

package/dist/components/Form/FormRender.js

@@ -0,0 +1,96 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import DatepickerWrapperV2 from '../FormComponents/DatePicker/DatepickerWrapperV2.js';
+import Monthpickerrender from '../FormComponents/DatePicker/Monthpickerrender.js';
+import FormRenderFileUpload from '../FormComponents/FileUpload/FormRenderFileUpload.js';
+import FormRenderMultiFileUpload from '../FormComponents/FileUpload/FormRenderMultiFileUpload.js';
+import FormCheckBox from '../FormComponents/FormCheckBox/FormCheckBox.js';
+import FormCheckBoxGroup from '../FormComponents/FormCheckBoxGroup/FormCheckBoxGroup.js';
+import FormNumberField from '../FormComponents/FormNumberField/FormNumberField.js';
+import FormNumberFieldDecimal from '../FormComponents/FormNumberField/FormNumberFieldDecimal.js';
+import FormRadioGroup from '../FormComponents/FormRadioGroup/FormRadioGroup.js';
+import FormTextAreaField from '../FormComponents/FormTextAreaField/FormTextAreaField.js';
+import FormTextField from '../FormComponents/FormTextField/FormTextField.js';
+import PasswordField from '../FormComponents/PasswordField/PasswordField.js';
+import RichTextEditorWrapper from '../FormComponents/RichTextEditor/RichTextEditorWrapper.js';
+import MultiSelectV1 from '../FormComponents/Select/MultiSelectv1.js';
+import SingleSelect from '../FormComponents/Select/SingleSelect.js';
+import SingleSelectNonAutoComplete from '../FormComponents/Select/SingleSelectNonAutoComplete.js';
+import TimePickerFieldWrapper from '../FormComponents/TimePicker/TimePicker.js';
+import FormActiveSwitch from './FormActiveSwitch.js';
+
+// Main renderer function: decides which form field component to render
+// based on the `inputType` defined in `props.item`
+const RenderForm = (props) => {
+    // Variant is an optional property that controls UI style differences
+    const variant = props.variant || "";
+    // Switch between different input types and render the corresponding component
+    switch (props.item?.inputType) {
+        // Common text-based inputs
+        case "text":
+        case "multiEmail":
+        case "email":
+            return jsx(FormTextField, { props: props, variant: variant });
+        // Rich text editor
+        case "rich-text-editor":
+            return jsx(RichTextEditorWrapper, { props: props, variant: variant });
+        // Password field
+        case "password":
+            return jsx(PasswordField, { props: props, variant: variant });
+        // Dropdown select (auto-complete)
+        case "select":
+            return jsx(SingleSelect, { props: props, variant: variant });
+        // Dropdown select (non auto-complete)
+        case "select-v2":
+            return jsx(SingleSelectNonAutoComplete, { props: props, variant: variant });
+        // Numeric inputs (integer, pincode, phone)
+        case "number":
+        case "pincode":
+        case "phoneNumber":
+            return jsx(FormNumberField, { props: props, variant: variant });
+        // Decimal input
+        case "decimal":
+            return jsx(FormNumberFieldDecimal, { props: props, variant: variant });
+        // Checkbox group (multiple options)
+        case "checkbox-group":
+            return jsx(FormCheckBoxGroup, { props: props, variant: variant });
+        // Radio group (single option)
+        case "radio-group":
+            return jsx(FormRadioGroup, { props: props, variant: variant });
+        // Date picker
+        case "datepicker":
+            return jsx(DatepickerWrapperV2, { props: props, variant: variant });
+        // Time picker
+        case "timepicker":
+            return jsx(TimePickerFieldWrapper, { props: props, variant: variant });
+        // Date range picker - TEMPORARILY DISABLED
+        case "dateRangePicker":
+            return jsx("div", {});
+        // return <DateRangePickerComponent props={props} variant={variant} />;
+        // Month picker
+        case "monthpicker":
+            return jsx(Monthpickerrender, { props: props, variant: variant });
+        // Multi-select dropdown
+        case "multiselect":
+            return jsx(MultiSelectV1, { props: props, variant: variant });
+        // Single file upload
+        case "file":
+            return jsx(FormRenderFileUpload, { props: props, variant: variant });
+        // Multi file upload
+        case "multifile":
+            return jsx(FormRenderMultiFileUpload, { props: props, variant: variant });
+        // Single checkbox
+        case "checkbox":
+            return jsx(FormCheckBox, { props: props, variant: variant });
+        // Multi-line text input
+        case "textarea":
+            return jsx(FormTextAreaField, { props: props, variant: variant });
+        // Toggle switch (active/inactive)
+        case "toggleSwitch":
+            return jsx(FormActiveSwitch, { props: props }, props.item.name);
+        // Default case: if input type is not found, return nothing
+        default:
+            return jsx(Fragment, {});
+    }
+};
+
+export { RenderForm as default };

package/dist/components/Form/FormRenderWrapper.d.ts

@@ -1,4 +1,4 @@
-import { FormSectionPropsItem, VariantProps } from "@/Utilities/Interface/FormInterface";
+import { FormSectionPropsItem, VariantProps } from "@/lib/Interface/FormInterface";
 import { UseFormReturn } from "react-hook-form";
 export interface FormRenderWrapperProps {
     formArray: FormSectionPropsItem[];

package/dist/components/Form/FormRenderWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormRenderWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormRenderWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,oBAAoB,EACpB,YAAY,EACb,MAAM,qCAAqC,CAAC;AAE7C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIhD,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,oBAAoB,EAAE,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,EAAE,aAAa,CACjB;QACE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;QAC9C,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;KAC/C,EACD,GAAG,EACH;QACE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;QAC9C,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;KAC/C,CACF,CAAC;IACF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD,QAAA,MAAM,iBAAiB,GAAI,kEAOxB,sBAAsB,4CA+BxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"FormRenderWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/Form/FormRenderWrapper.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,oBAAoB,EACpB,YAAY,EACb,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAIhD,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,oBAAoB,EAAE,CAAC;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,EAAE,aAAa,CACjB;QACE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;QAC9C,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;KAC/C,EACD,GAAG,EACH;QACE,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;QAC9C,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;KAC/C,CACF,CAAC;IACF,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD,QAAA,MAAM,iBAAiB,GAAI,kEAOxB,sBAAsB,4CA+BxB,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/Form/FormRenderWrapper.js

@@ -0,0 +1,13 @@
+import { jsx } from 'react/jsx-runtime';
+import { customTheme } from '../../theme/index.js';
+import { ThemeProvider } from '@emotion/react';
+import { FormComponent, Formitem } from './Form.styles.js';
+import RenderForm from './FormRender.js';
+
+const FormRenderWrapper = ({ formArray, name = "", numberOfColumns = 3, form, variant = "", fieldError, }) => {
+    return (jsx(ThemeProvider, { theme: customTheme, children: jsx(FormComponent, { container: true, margin: "auto", children: formArray.map((item, i) => {
+                return (item.inputType && (jsx(Formitem, { container: true, sx: item.CustomProps, noOfColumn: item.numberOfColumns || numberOfColumns, children: jsx(RenderForm, { item: item, register: form.register, control: form.control, errors: form.formState.errors, getValues: form.getValues, clearErrors: form.clearErrors, setValue: form.setValue, variant: variant, fieldError: fieldError }) }, `${name}_${i}`)));
+            }) }) }));
+};
+
+export { FormRenderWrapper as default };

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

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