tp-react-elements 1.0.0

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

@@ -0,0 +1,266 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Box, Button, IconButton, Modal, Typography } from '@mui/material';
+import { useRef, useState, 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';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import CloseIcon from '@mui/icons-material/Close';
+import NavigateBeforeIcon from '@mui/icons-material/NavigateBefore';
+import NavigateNextIcon from '@mui/icons-material/NavigateNext';
+import DeleteIcon from '@mui/icons-material/Delete';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
+import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import TableChartIcon from '@mui/icons-material/TableChart';
+import DescriptionIcon from '@mui/icons-material/Description';
+
+const MultiFileWithPreview = ({ props, variant, }) => {
+    const inputRef = useRef(null);
+    const watched = useWatch({ control: props.control, name: props.item.name });
+    const [open, setOpen] = useState(false);
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [currentFileIndex, setCurrentFileIndex] = useState(0);
+    // Clamp preview index when selection changes to avoid undefined access
+    useEffect(() => {
+        if (selectedFiles.length === 0) {
+            setCurrentFileIndex(0);
+            return;
+        }
+        if (currentFileIndex > selectedFiles.length - 1) {
+            setCurrentFileIndex(selectedFiles.length - 1);
+        }
+        else if (currentFileIndex < 0) {
+            setCurrentFileIndex(0);
+        }
+    }, [selectedFiles, currentFileIndex]);
+    // Determine if this is single or multiple file mode
+    const isSingleFileMode = props.item.maxLength === 1;
+    useEffect(() => {
+        if (watched === null || watched === undefined) {
+            if (inputRef.current)
+                inputRef.current.value = '';
+        }
+        const looksLikeUrl = (s) => /^(https?:|blob:|data:|\/)/i.test(s);
+        if (typeof watched === 'string' && watched.trim() !== '') {
+            const str = watched.replace(/\\/g, '/').trim();
+            if (looksLikeUrl(str)) {
+                setSelectedFiles([str]);
+            }
+        }
+        else if (Array.isArray(watched)) {
+            if (typeof watched[0] === 'object') {
+                // ✅ extract URLs from object arrays (image/url/path keys)
+                const urls = watched
+                    .map((item) => {
+                    const possibleKeys = ['image', 'url', 'path', 'filePath'];
+                    const key = possibleKeys.find((k) => item[k]);
+                    return key ? item[key]?.replace(/\\/g, '/').trim() : undefined;
+                })
+                    .filter((f) => f && looksLikeUrl(f));
+                if (urls.length) {
+                    setSelectedFiles(urls);
+                }
+            }
+            else if (typeof watched[0] === 'string') {
+                const normalized = watched
+                    .map((f) => (f || '').toString().replace(/\\/g, '/').trim())
+                    .filter((f) => looksLikeUrl(f));
+                if (normalized.length) {
+                    setSelectedFiles(normalized);
+                }
+            }
+        }
+    }, [watched]);
+    const isError = !!props.errors?.[props.item.name];
+    const handleFileChange = (event) => {
+        const files = event.target.files;
+        if (!files)
+            return;
+        const fileArray = Array.from(files);
+        const allowedExtensions = {
+            excel: ['xls', 'xlsx'],
+            pdf: ['pdf'],
+            image: ['jpg', 'jpeg', 'png'],
+            all: ['pdf', 'jpg', 'jpeg', 'png', 'xls', 'xlsx', 'doc', 'docx', 'zip']};
+        const validExtensions = props.item.fileType === 'excel'
+            ? allowedExtensions.excel
+            : props.item.fileType === 'pdf'
+                ? allowedExtensions.pdf
+                : props.item.fileType === 'image'
+                    ? allowedExtensions.image
+                    : allowedExtensions.all;
+        const invalidFile = fileArray.find((file) => {
+            const ext = file.name.split('.').pop()?.toLowerCase();
+            return !ext || !validExtensions.includes(ext);
+        });
+        if (invalidFile) {
+            props.item?.handleFileError?.(`Please upload ${validExtensions.join(', ')} files only`);
+            event.target.value = '';
+            props.setValue(props.item.name, null);
+            props.setValue(props.item.name + 'File', []);
+            return;
+        }
+        const largeFile = fileArray.find((file) => file.size > 20000000);
+        if (largeFile) {
+            props.item?.handleFileError?.('File size should be less than 20MB');
+            event.target.value = '';
+            props.setValue(props.item.name, null);
+            props.setValue(props.item.name + 'File', []);
+            return;
+        }
+        let combinedFiles = [];
+        if (isSingleFileMode) {
+            // only 1 file allowed → replace
+            combinedFiles = fileArray;
+        }
+        else {
+            // append to existing
+            combinedFiles = [...selectedFiles, ...fileArray];
+            // limit by maxLength
+            if (props.item.maxLength && combinedFiles.length > props.item.maxLength) {
+                props.item?.handleFileError?.(`You can only upload up to ${props.item.maxLength} files`);
+                event.target.value = '';
+                return;
+            }
+        }
+        const combinedFileNames = combinedFiles
+            .map((f) => (f instanceof File ? f.name : (f?.toString?.() || '').split('/').pop()))
+            .filter(Boolean)
+            .join(',');
+        props.setValue(props.item.name, combinedFileNames);
+        props.setValue(props.item.name + 'File', combinedFiles);
+        setSelectedFiles(combinedFiles);
+        setCurrentFileIndex(combinedFiles.length - fileArray.length); // move preview to new
+        props.item.onChangeSetFileFn?.(combinedFiles);
+    };
+    const handlePreviewClick = () => {
+        setCurrentFileIndex(0);
+        setOpen(true);
+    };
+    const handleClose = () => setOpen(false);
+    const handlePrevious = () => {
+        setCurrentFileIndex((prev) => prev > 0 ? prev - 1 : selectedFiles.length - 1);
+    };
+    const handleNext = () => {
+        setCurrentFileIndex((prev) => prev < selectedFiles.length - 1 ? prev + 1 : 0);
+    };
+    const handleDeleteFile = (indexToDelete) => {
+        const updatedFiles = selectedFiles.filter((_, index) => index !== indexToDelete);
+        setSelectedFiles(updatedFiles);
+        if (inputRef.current) {
+            inputRef.current.value = '';
+        }
+        if (updatedFiles.length === 0) {
+            props.setValue(props.item.name, null);
+            props.setValue(props.item.name + 'File', []);
+        }
+        else {
+            const fileNames = updatedFiles
+                .map((f) => (f instanceof File ? f.name : f.split('/').pop()))
+                .join(',');
+            props.setValue(props.item.name, fileNames);
+            props.setValue(props.item.name + 'File', updatedFiles);
+        }
+        if (currentFileIndex >= updatedFiles.length) {
+            setCurrentFileIndex(Math.max(0, updatedFiles.length - 1));
+        }
+        props.item.onChangeSetFileFn &&
+            props.item.onChangeSetFileFn(updatedFiles);
+        if (updatedFiles.length === 0) {
+            setOpen(false);
+        }
+    };
+    const isImageFile = (file) => {
+        if (!file)
+            return false;
+        const ext = typeof file === 'string'
+            ? file.split('.').pop()?.toLowerCase()
+            : file.name?.split('.').pop()?.toLowerCase();
+        return ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'].includes(ext || '');
+    };
+    const isPdfFile = (file) => {
+        if (!file)
+            return false;
+        const name = typeof file === 'string' ? file : (file.name || '');
+        return name.toLowerCase().endsWith('.pdf');
+    };
+    const isExcelFile = (file) => {
+        if (!file)
+            return false;
+        const name = typeof file === 'string' ? file : (file.name || '');
+        return /\.xlsx?$/.test(name.toLowerCase());
+    };
+    const isWordFile = (file) => {
+        if (!file)
+            return false;
+        const name = typeof file === 'string' ? file : (file.name || '');
+        return /\.(doc|docx)$/.test(name.toLowerCase());
+    };
+    const getObjectUrl = (file) => {
+        if (!file)
+            return '';
+        return typeof file === 'string' ? file : URL.createObjectURL(file);
+    };
+    return (jsxs(Fragment, { children: [jsxs(Box, { paddingLeft: "4px", sx: { ...props.item.sx, position: 'relative' }, children: [props.item?.label && (jsx(Box, { sx: { fontSize: '10px' }, children: renderLabel(variant, props, true) })), jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [jsxs(Button, { variant: "outlined", component: "label", startIcon: jsx(UploadFileIcon, {}), sx: { flex: 1, textTransform: 'none' }, color: isError ? 'error' : 'primary', children: [selectedFiles.length > 0
+                                        ? isSingleFileMode
+                                            ? '1 file selected'
+                                            : `${selectedFiles.length} file(s) selected`
+                                        : isSingleFileMode
+                                            ? 'Upload File'
+                                            : 'Upload Files', jsx("input", { type: "file", hidden: true, multiple: !isSingleFileMode, 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'
+                                                        : '', ref: inputRef, onChange: handleFileChange })] }), jsx(Box, { sx: { width: 36, display: 'flex', justifyContent: 'center' }, children: props.item.showFileCarousel && selectedFiles.length > 0 ? (jsx(IconButton, { onClick: handlePreviewClick, color: "primary", size: "small", "aria-label": "preview selected files", children: jsx(VisibilityIcon, {}) })) : null })] })] }), jsx(FormBottomField, { ...props }), jsx(Modal, { open: open, onClose: handleClose, children: jsxs(Box, { sx: {
+                        position: 'absolute',
+                        top: '50%',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                        width: 600,
+                        bgcolor: 'background.paper',
+                        borderRadius: 2,
+                        boxShadow: 24,
+                        p: 3,
+                    }, children: [jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", children: [jsx(Typography, { variant: "h6", children: "File Preview" }), jsxs(Box, { display: "flex", gap: 1, children: [jsx(IconButton, { onClick: () => handleDeleteFile(currentFileIndex), color: "error", title: "Delete current file", children: jsx(DeleteIcon, {}) }), jsx(IconButton, { onClick: handleClose, children: jsx(CloseIcon, {}) })] })] }), jsx(Box, { mt: 2, children: selectedFiles.length > 0 && (jsxs(Fragment, { children: [jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: 2, children: [selectedFiles.length > 1 && !isSingleFileMode ? (jsx(IconButton, { onClick: handlePrevious, children: jsx(NavigateBeforeIcon, {}) })) : null, jsx(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", sx: { p: 2, minHeight: '400px', width: '100%' }, children: (() => {
+                                                    const currentFile = selectedFiles[currentFileIndex];
+                                                    if (!currentFile) {
+                                                        return jsx(Typography, { variant: "body2", color: "text.secondary", children: "No file selected" });
+                                                    }
+                                                    const fileName = typeof currentFile === 'string'
+                                                        ? currentFile.split('/').pop() || currentFile
+                                                        : (currentFile.name || '');
+                                                    // Images
+                                                    if (isImageFile(currentFile)) {
+                                                        return (jsx("img", { alt: "Preview", src: getObjectUrl(currentFile), style: {
+                                                                maxHeight: '400px',
+                                                                maxWidth: '100%',
+                                                                objectFit: 'contain',
+                                                                borderRadius: 8,
+                                                            } }));
+                                                    }
+                                                    // PDF inline viewer
+                                                    if (isPdfFile(currentFile)) {
+                                                        const url = getObjectUrl(currentFile);
+                                                        return (jsx(Box, { width: "100%", height: 420, children: jsx("object", { data: url, type: "application/pdf", width: "100%", height: "100%", children: jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 1, children: [jsx(PictureAsPdfIcon, { color: "error" }), jsx(Typography, { variant: "body2", children: "Preview not available. " }), jsx(Button, { size: "small", variant: "outlined", href: url, target: "_blank", rel: "noreferrer", children: "Open PDF" })] }) }) }));
+                                                    }
+                                                    // Excel preview placeholder with actions
+                                                    if (isExcelFile(currentFile)) {
+                                                        const url = getObjectUrl(currentFile);
+                                                        return (jsxs(Box, { textAlign: "center", children: [jsx(TableChartIcon, { color: "primary", sx: { fontSize: 64, mb: 1 } }), jsx(Typography, { variant: "body1", gutterBottom: true, children: fileName }), jsx(Button, { size: "small", variant: "outlined", href: url, target: "_blank", rel: "noreferrer", children: "Open" })] }));
+                                                    }
+                                                    // Word preview placeholder with actions
+                                                    if (isWordFile(currentFile)) {
+                                                        const url = getObjectUrl(currentFile);
+                                                        return (jsxs(Box, { textAlign: "center", children: [jsx(DescriptionIcon, { color: "primary", sx: { fontSize: 64, mb: 1 } }), jsx(Typography, { variant: "body1", gutterBottom: true, children: fileName }), jsx(Button, { size: "small", variant: "outlined", href: url, target: "_blank", rel: "noreferrer", children: "Open" })] }));
+                                                    }
+                                                    // Fallback: show name
+                                                    return jsx(Typography, { variant: "body1", children: fileName });
+                                                })() }), selectedFiles.length > 1 && !isSingleFileMode ? (jsx(IconButton, { onClick: handleNext, children: jsx(NavigateNextIcon, {}) })) : null] }), selectedFiles.length > 1 && !isSingleFileMode && (jsx(Box, { display: "flex", justifyContent: "center", mt: 2, children: jsxs(Typography, { variant: "body2", color: "text.secondary", children: [currentFileIndex + 1, " of ", selectedFiles.length] }) }))] })) })] }) })] }));
+};
+
+export { MultiFileWithPreview as default };

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

@@ -0,0 +1,3 @@
+export { default as FormRenderFileUpload } from './FormRenderFileUpload';
+export { default as FormRenderMultiFileUpload } from './FormRenderMultiFileUpload';
+export { default as MultiFileWithPreview } from './MultiFileWithPreview';

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

@@ -0,0 +1,3 @@
+export { default as FormRenderFileUpload } from './FormRenderFileUpload.esm.js';
+export { default as FormRenderMultiFileUpload } from './FormRenderMultiFileUpload.esm.js';
+export { default as MultiFileWithPreview } from './MultiFileWithPreview.esm.js';

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

@@ -0,0 +1,17 @@
+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;

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

@@ -0,0 +1,25 @@
+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 }), props?.item?.selectedFileName && (jsxs("span", { id: `${props.item.name}-selectedFileName`, className: "selectedText-v1", style: {
+                    fontSize: '11px',
+                    color: '#3651d3',
+                }, children: ["Selected File:", jsx("span", { className: "selectedFileName-v1", children: props?.item?.selectedFileName })] })), jsx(FormErrorField, { ...props })] }));
+};
+
+export { FormBottomField as default };

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

@@ -0,0 +1,25 @@
+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;

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

@@ -0,0 +1,25 @@
+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;

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

@@ -0,0 +1,16 @@
+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;

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

@@ -0,0 +1,44 @@
+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;

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

@@ -0,0 +1,106 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { TextField } 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';
+
+/**
+ * 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"
+ * />
+ */
+const FormNumberField = ({ props, variant }) => {
+    /**
+     * Determines if the field has an error based on form validation
+     */
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    /**
+     * Generates the field label based on variant type
+     * For non-standard variants, appends an asterisk if the field is required
+     */
+    const label = variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '';
+    /**
+     * Renders the numeric field component using react-hook-form's Controller
+     * for controlled form state management
+     */
+    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: field.value ?? '', 
+                            /**
+                             * Handles input events with numeric restrictions
+                             * - Removes non-numeric characters
+                             * - Sets empty value to null
+                             * - Calls custom onChange handler if provided
+                             * - Clears validation errors when value changes
+                             *
+                             * @param {any} e - The input event object
+                             */
+                            onChange: (e) => {
+                                const sanitized = String(e.target.value || '').replace(/[^0-9]/g, '');
+                                const nextValue = sanitized === '' ? null : sanitized;
+                                field.onChange(nextValue);
+                                props?.item?.onChangeFn && props?.item?.onChangeFn(nextValue);
+                                props?.clearErrors && props?.clearErrors(props.item.name);
+                                if (nextValue && props.item.maxValue && parseInt(nextValue) > props.item.maxValue) {
+                                    field.onChange(props.item.maxValue);
+                                }
+                            }, 
+                            /**
+                             * Handles blur events
+                             * Calls custom onBlur handler if provided
+                             *
+                             * @param {any} e - The blur event object
+                             */
+                            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',
+                                },
+                            }, 
+                            /**
+                             * Additional input properties for the TextField
+                             * Controls input pattern, length restrictions, and additional input handling
+                             */
+                            inputProps: {
+                                pattern: '[0-9]*',
+                                maxLength: props.item.maxLength || 20,
+                                maxValue: props.item.maxValue || 9999999999,
+                                'aria-labelledby': `${props.item.name}-label`,
+                                'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                                'aria-required': props.item.required ? true : undefined,
+                            }, disabled: props.item.disable }), jsx(FormBottomField, { ...props })] }));
+            } }, props.item.name) }));
+};
+
+export { FormNumberField as default };

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

@@ -0,0 +1,6 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+declare const FormNumberFieldDecimal: ({ props, variant, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export default FormNumberFieldDecimal;