tp-react-elements-dev 1.12.24 → 1.12.25

package/dist/components/Form/index.esm.js

@@ -0,0 +1,5 @@
+export { default as FormActiveSwitch } from './FormActiveSwitch.esm.js';
+export { default as useFormValidatingContext } from './FormConstants.esm.js';
+export { default as FormContainer } from './FormContainer.esm.js';
+export { default as RenderForm } from './FormRenderWrapper.esm.js';
+export { default as FormRender } from './FormRender.esm.js';

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

@@ -1,7 +1,6 @@
-import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from '../../../utils';
 declare const DatepickerWrapperV2: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;
 }) => import("react/jsx-runtime").JSX.Element;
 export default DatepickerWrapperV2;
-//# sourceMappingURL=DatepickerWrapperV2.d.ts.map

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

@@ -0,0 +1,72 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { getDatePicker } from '../../../utils/Constants/date-pickers.esm.js';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs from 'dayjs';
+import { Controller } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+const DatepickerWrapperV2 = ({ props, variant, }) => {
+    const inputTextRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [DatePicker, setDatePicker] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+        const loadComponents = async () => {
+            setIsLoading(true);
+            const [datePicker] = await Promise.all([getDatePicker()]);
+            setDatePicker(datePicker);
+            setIsLoading(false);
+        };
+        loadComponents();
+    }, []);
+    const handleToggle = () => {
+        if (!open) {
+            inputTextRef.current?.blur();
+        }
+        setOpen(!open);
+    };
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    if (isLoading) {
+        return jsx("div", { style: { minHeight: '36px' }, children: "Loading..." });
+    }
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [DatePicker && (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' },
+                                        'aria-labelledby': `${props.item.name}-label`,
+                                        'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                                        'aria-required': props.item.required ? true : undefined,
+                                    },
+                                    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.d.ts

@@ -1,3 +1,2 @@
 declare const MonthPicker: ({ props }: any) => import("react/jsx-runtime").JSX.Element;
 export default MonthPicker;
-//# sourceMappingURL=MonthPicker.d.ts.map

package/dist/components/FormComponents/DatePicker/{MonthPicker.js → MonthPicker.esm.js}

@@ -32,16 +32,16 @@ const MonthPicker = ({ props }) => {
                         }, slotProps: {
                             textField: {
                                 sx: {
-                                    "& .MuiFormLabel-root": {
+                                    '& .MuiFormLabel-root': {
                                         top: -10,
                                     },
-                                    "& .MuiInputLabel-shrink": {
+                                    '& .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",
+                            month: 'short',
                         }) }, index))) })] })) }));
 };
 

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

@@ -1,7 +1,6 @@
-import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from '../../../utils';
 declare const Monthpickerrender: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;
 }) => import("react/jsx-runtime").JSX.Element;
 export default Monthpickerrender;
-//# sourceMappingURL=Monthpickerrender.d.ts.map

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

@@ -0,0 +1,70 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useRef, useState, useEffect } from 'react';
+import { getDatePicker } from '../../../utils/Constants/date-pickers.esm.js';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import dayjs from 'dayjs';
+import { Controller } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import { renderLabel, formatDateMonthAndYear } from '../../../utils/Constants/FormConstants.esm.js';
+
+const Monthpickerrender = ({ props, variant, }) => {
+    const ref = useRef(null);
+    const [open, setOpen] = useState(false);
+    const [DatePicker, setDatePicker] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+    useEffect(() => {
+        const loadComponents = async () => {
+            setIsLoading(true);
+            const [datePicker] = await Promise.all([getDatePicker()]);
+            setDatePicker(datePicker);
+            setIsLoading(false);
+        };
+        loadComponents();
+    }, []);
+    const handleToggle = () => {
+        if (!open) {
+            ref.current?.blur();
+        }
+        setOpen(!open);
+    };
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    if (isLoading) {
+        return jsx("div", { style: { minHeight: '36px' }, children: "Loading..." });
+    }
+    return (jsx(Fragment, { children: DatePicker && (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) => {
+                                    const formatted = dayjs(date).format('MM/YYYY');
+                                    field.onChange(formatted);
+                                    props.setValue(props.item.name, formatted);
+                                }, 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,7 +1,6 @@
-import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from '../../../utils';
 declare const FormRenderFileUpload: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;
 }) => import("react/jsx-runtime").JSX.Element;
 export default FormRenderFileUpload;
-//# sourceMappingURL=FormRenderFileUpload.d.ts.map

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

@@ -0,0 +1,71 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Box, TextField } from '@mui/material';
+import { useRef, useEffect } from 'react';
+import { useWatch } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+const FormRenderFileUpload = ({ props, variant, }) => {
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    const inputRef = useRef(null);
+    const watched = useWatch({ control: props.control, name: props.item.name });
+    useEffect(() => {
+        if (watched === null || watched === undefined) {
+            if (inputRef.current)
+                inputRef.current.value = '';
+        }
+    }, [watched]);
+    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, inputRef: inputRef, 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'
+                                            : '',
+                            'aria-labelledby': `${props.item.name}-label`,
+                            'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                            'aria-required': props.item.required ? true : undefined,
+                        }, onChange: (event) => {
+                            const file = event.target?.files[0];
+                            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`);
+                                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`);
+                                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,7 +1,6 @@
-import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from '../../../utils';
 declare const FormRenderMultiFileUpload: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;
 }) => import("react/jsx-runtime").JSX.Element;
 export default FormRenderMultiFileUpload;
-//# sourceMappingURL=FormRenderMultiFileUpload.d.ts.map

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

@@ -0,0 +1,85 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Box, TextField } from '@mui/material';
+import { useRef, useEffect } from 'react';
+import { useWatch } from 'react-hook-form';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+
+const FormRenderMultiFileUpload = ({ props, variant, }) => {
+    // const getDocument: Document = document;
+    const inputRef = useRef(null);
+    const watched = useWatch({ control: props.control, name: props.item.name });
+    useEffect(() => {
+        if (watched === null || watched === undefined) {
+            if (inputRef.current)
+                inputRef.current.value = '';
+        }
+    }, [watched]);
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    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, inputRef: inputRef, 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'
+                                            : '',
+                            'aria-labelledby': `${props.item.name}-label`,
+                            'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                            'aria-required': props.item.required ? true : undefined,
+                        }, onChange: (event) => {
+                            const file = event.target.files;
+                            const fileName = file && file.length > 0
+                                ? Array.from(file)
+                                    .map((item) => item.name)
+                                    .join(',')
+                                : null;
+                            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);
+                            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,17 @@
-import { FormRenderProps } from "../../../lib/Interface/FormInterface";
+import { FormRenderProps } from '../../../utils';
+/**
+ * FormBottomField Component
+ *
+ * A utility component that renders helper text and error messages below form fields.
+ * This component is used by various form field components to maintain consistent
+ * presentation of helper text and validation errors.
+ *
+ * @component
+ * @param {FormRenderProps} props - Form rendering properties from parent form
+ */
 declare const FormBottomField: (props: FormRenderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Export the FormBottomField component for use in form field components
+ * This component handles the consistent display of helper text and error messages
+ */
 export default FormBottomField;
-//# sourceMappingURL=FormBottomField.d.ts.map

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

@@ -0,0 +1,22 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import FormErrorField from '../FormErrorField/FormErrorField.esm.js';
+import HelperText from '../HelperText/HelperText.esm.js';
+
+/**
+ * FormBottomField Component
+ *
+ * A utility component that renders helper text and error messages below form fields.
+ * This component is used by various form field components to maintain consistent
+ * presentation of helper text and validation errors.
+ *
+ * @component
+ * @param {FormRenderProps} props - Form rendering properties from parent form
+ */
+const FormBottomField = (props) => {
+    /**
+     * Renders helper text and error messages in a consistent layout
+     */
+    return (jsxs(Fragment, { children: [jsx(HelperText, { ...props }), jsx(FormErrorField, { ...props })] }));
+};
+
+export { FormBottomField as default };

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

@@ -1,7 +1,25 @@
-import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from '../../../utils';
+/**
+ * FormCheckBox Component
+ *
+ * A checkbox input field component that integrates with react-hook-form for form state management.
+ * Renders a standard checkbox with label and validation support.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {FormRenderProps} props.props - Form rendering properties from parent form
+ * @param {VariantProps} props.variant - UI variant style ('standard', 'outlined', etc.)
+ *
+ * @example
+ * // Basic usage in FormRender
+ * <FormCheckBox props={formRenderProps} variant="outlined" />
+ */
 declare const FormCheckBox: ({ props, variant: _variant, }: {
     props: FormRenderProps;
     variant: VariantProps;
 }) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Export the FormCheckBox component for use in the form renderer
+ * This component is used for checkbox input types
+ */
 export default FormCheckBox;
-//# sourceMappingURL=FormCheckBox.d.ts.map

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

@@ -0,0 +1,32 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { FormControlLabel, Checkbox } from '@mui/material';
+import { Controller } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+
+/**
+ * FormCheckBox Component
+ *
+ * A checkbox input field component that integrates with react-hook-form for form state management.
+ * Renders a standard checkbox with label and validation support.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {FormRenderProps} props.props - Form rendering properties from parent form
+ * @param {VariantProps} props.variant - UI variant style ('standard', 'outlined', etc.)
+ *
+ * @example
+ * // Basic usage in FormRender
+ * <FormCheckBox props={formRenderProps} variant="outlined" />
+ */
+const FormCheckBox = ({ props, variant: _variant, }) => {
+    /**
+     * Renders the checkbox component with label and validation support
+     */
+    return (jsxs(Fragment, { children: [jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsx(FormControlLabel, { control: jsx(Checkbox, { ...field, checked: !!field.value, onChange: (e) => field.onChange(e.target.checked), sx: { width: '24px', height: '24px' }, inputProps: {
+                            'aria-labelledby': `${props.item.name}-label`,
+                            'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                            'aria-required': props.item.required ? true : undefined,
+                        } }), label: jsxs("span", { id: `${props.item.name}-label`, style: { fontSize: '12px' }, children: [props.item.label, ' ', props.item.required && (jsx("span", { "aria-hidden": "true", style: { color: 'var(--mui-palette-error-main, #B3261E)' }, children: "*" }))] }), sx: { ...props.item.sx } })) }), jsx(FormBottomField, { ...props })] }));
+};
+
+export { FormCheckBox as default };

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

@@ -1,7 +1,25 @@
-import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
+import { FormRenderProps, VariantProps } from '../../../utils';
+/**
+ * FormCheckBoxGroup Component
+ *
+ * A group of checkbox input fields that integrates with react-hook-form for form state management.
+ * Renders multiple checkboxes in a row with labels and validation support.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {FormRenderProps} props.props - Form rendering properties from parent form
+ * @param {VariantProps} props.variant - UI variant style ('standard', 'outlined', etc.)
+ *
+ * @example
+ * // Basic usage in FormRender with settings array
+ * <FormCheckBoxGroup props={formRenderProps} variant="outlined" />
+ */
 declare const FormCheckBoxGroup: ({ props, variant, }: {
     props: FormRenderProps;
     variant: VariantProps;
 }) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Export the FormCheckBoxGroup component for use in the form renderer
+ * This component is used for checkbox group input types
+ */
 export default FormCheckBoxGroup;
-//# sourceMappingURL=FormCheckBoxGroup.d.ts.map

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

@@ -0,0 +1,42 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { FormControl, FormGroup, FormControlLabel, Typography, Checkbox } from '@mui/material';
+import { Controller } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+/**
+ * FormCheckBoxGroup Component
+ *
+ * A group of checkbox input fields that integrates with react-hook-form for form state management.
+ * Renders multiple checkboxes in a row with labels and validation support.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {FormRenderProps} props.props - Form rendering properties from parent form
+ * @param {VariantProps} props.variant - UI variant style ('standard', 'outlined', etc.)
+ *
+ * @example
+ * // Basic usage in FormRender with settings array
+ * <FormCheckBoxGroup props={formRenderProps} variant="outlined" />
+ */
+const FormCheckBoxGroup = ({ props, variant, }) => {
+    /**
+     * Renders a group of checkboxes with labels and validation support
+     */
+    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,16 @@
-import { FormRenderProps } from "../../../lib/Interface/FormInterface";
+import { FormRenderProps } from '../../../utils';
+/**
+ * FormErrorField Component
+ *
+ * Displays validation error messages for form fields.
+ * Uses @hookform/error-message to render errors from react-hook-form.
+ *
+ * @component
+ * @param {FormRenderProps} props - Form rendering properties from parent form
+ */
 declare const FormErrorField: (props: FormRenderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Export the FormErrorField component for use in form field components
+ * This component handles the display of validation error messages
+ */
 export default FormErrorField;
-//# sourceMappingURL=FormErrorField.d.ts.map

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

@@ -0,0 +1,21 @@
+import { jsx } from 'react/jsx-runtime';
+import { ErrorMessage } from '@hookform/error-message';
+import { ErrorMessageComponent } from '../../Form/Form.styles.esm.js';
+
+/**
+ * FormErrorField Component
+ *
+ * Displays validation error messages for form fields.
+ * Uses @hookform/error-message to render errors from react-hook-form.
+ *
+ * @component
+ * @param {FormRenderProps} props - Form rendering properties from parent form
+ */
+const FormErrorField = (props) => {
+    /**
+     * Renders the error message inside a styled container
+     */
+    return (jsx(ErrorMessageComponent, { id: `${props.item.name}-error`, children: jsx(ErrorMessage, { errors: props.errors, name: props.item.name }) }));
+};
+
+export { FormErrorField as default };

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

@@ -1,7 +1,44 @@
-import { FormRenderProps, VariantProps } from "../../../lib/Interface/FormInterface";
-declare const FormNumberField: ({ props, variant, }: {
+import { FormRenderProps, VariantProps } from '../../../utils';
+/**
+ * FormNumberField Component
+ *
+ * A numeric input field component that integrates with react-hook-form.
+ * This component is used for integer inputs, phone numbers, and pincodes.
+ * It restricts input to numeric characters only.
+ *
+ * @component
+ * @param {Object} props - The component props
+ * @param {FormRenderProps} props.props - Form rendering properties from parent form
+ * @param {VariantProps} props.variant - UI variant style ('standard', 'outlined', etc.)
+ *
+ * @example
+ * // Basic usage in FormRender
+ * <FormNumberField props={formRenderProps} variant="outlined" />
+ *
+ * @example
+ * // Usage with specific configuration
+ * const formItem = {
+ *   name: "phoneNumber",
+ *   label: "Phone Number",
+ *   inputType: "number",
+ *   required: true,
+ *   maxLength: 10
+ * };
+ * <FormNumberField
+ *   props={{
+ *     item: formItem,
+ *     control: formMethods.control,
+ *     errors: formMethods.formState.errors
+ *   }}
+ *   variant="outlined"
+ * />
+ */
+declare const FormNumberField: ({ props, variant }: {
     props: FormRenderProps;
     variant: VariantProps;
 }) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Export the FormNumberField component for use in the form renderer
+ * This component is used for number, pincode, and phoneNumber input types
+ */
 export default FormNumberField;
-//# sourceMappingURL=FormNumberField.d.ts.map