tp-react-elements 1.0.0

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

@@ -0,0 +1,50 @@
+import { jsx, jsxs, Fragment } 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';
+
+const FormNumberFieldDecimal = ({ props, variant, }) => {
+    const fixedLength = props.item.decimalFixedTo || 2;
+    const sanitizeDecimal = (raw) => {
+        let next = (raw ?? '').replace(/[^0-9.-]/g, '');
+        // Collapse multiple '-' to one at start
+        next = next.replace(/(?!^)-/g, '');
+        if (next.includes('.')) {
+            const [intPart, decPart] = next.split('.');
+            const clampedDec = (decPart ?? '').slice(0, fixedLength);
+            next = `${intPart}.${clampedDec}`;
+        }
+        return next;
+    };
+    const label = variant !== 'standard' ? `${props.item.label}${props.item.required ? ' *' : ''}` : '';
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    return (jsx(Controller, { name: props.item.name, control: props.control, disabled: props.item?.disable, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TextField, { type: "text", size: "small", label: label, error: isShowBorderError, ...field, onChange: (e) => {
+                        const sanitized = sanitizeDecimal(e.target.value ?? '');
+                        const value = sanitized === '' ? '' : sanitized;
+                        field.onChange(value);
+                        props?.clearErrors && props?.clearErrors(props.item.name);
+                    }, sx: {
+                        '& input': {
+                            textAlign: 'right',
+                        },
+                        '& .css-16hdwvj,.css-1idq7r3-MuiFormLabel-root-MuiInputLabel-root': {
+                            top: '-5px',
+                        },
+                    }, onBlur: (e) => {
+                        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+                    }, InputProps: {
+                        inputProps: {
+                            // allow digits, one dot and optional leading minus
+                            inputMode: 'decimal',
+                            maxLength: 20,
+                            'aria-labelledby': `${props.item.name}-label`,
+                            'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                            'aria-required': props.item.required ? true : undefined,
+                        },
+                    } }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+};
+
+export { FormNumberFieldDecimal as default };

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

@@ -0,0 +1,25 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+/**
+ * FormRadioGroup Component
+ *
+ * A radio button group component that integrates with react-hook-form for form state management.
+ * Renders multiple radio options 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
+ * <FormRadioGroup props={formRenderProps} variant="outlined" />
+ */
+declare const FormRadioGroup: ({ props, variant }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Export the FormRadioGroup component for use in the form renderer
+ * This component is used for radio group input types
+ */
+export default FormRadioGroup;

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

@@ -0,0 +1,44 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { FormControl, RadioGroup, FormControlLabel, Typography, Radio } 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';
+
+/**
+ * FormRadioGroup Component
+ *
+ * A radio button group component that integrates with react-hook-form for form state management.
+ * Renders multiple radio options 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
+ * <FormRadioGroup props={formRenderProps} variant="outlined" />
+ */
+const FormRadioGroup = ({ props, variant }) => {
+    /**
+     * Renders a group of radio buttons with labels and validation support
+     */
+    return (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(FormControl, { component: "fieldset", children: jsx(Controller, { name: props.item.name, control: props.control, render: ({ field }) => (jsx(RadioGroup, { value: field.value || '', onChange: (e) => {
+                            field.onChange(e.target.value); // update form state
+                            props.item.onChangeFn && props.item.onChangeFn(e.target.value); // optional handler
+                        }, row: true, sx: {
+                            gap: '8px',
+                        }, children: props.item?.settings?.map((option, i) => (jsx(FormControlLabel, { value: option.name, control: jsx(Radio, { sx: {
+                                    padding: '6px 2px 6px 8px',
+                                    color: 'black',
+                                    '&.Mui-checked': {
+                                        color: '#1976d2', // blue when selected
+                                    },
+                                    '& .MuiSvgIcon-root': {
+                                        fontSize: 16, // controls the radio icon size
+                                    },
+                                } }), label: jsx(Typography, { fontSize: '11px', fontWeight: 'normal !important', children: option.label }) }, i))) })) }) }), jsx(FormBottomField, { ...props })] }));
+};
+
+export { FormRadioGroup as default };

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

@@ -0,0 +1,25 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+/**
+ * FormTextAreaField Component
+ *
+ * A multi-line text input field component that integrates with react-hook-form for form state management.
+ * Renders a textarea with validation support and customizable rows.
+ *
+ * @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
+ * <FormTextAreaField props={formRenderProps} variant="outlined" />
+ */
+declare const FormTextAreaField: ({ props, variant, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Export the FormTextAreaField component for use in the form renderer
+ * This component is used for textarea input types
+ */
+export default FormTextAreaField;

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

@@ -0,0 +1,65 @@
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { Controller } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import { TextAreaField } from './FormTextAreaField.styles.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+/**
+ * FormTextAreaField Component
+ *
+ * A multi-line text input field component that integrates with react-hook-form for form state management.
+ * Renders a textarea with validation support and customizable rows.
+ *
+ * @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
+ * <FormTextAreaField props={formRenderProps} variant="outlined" />
+ */
+const FormTextAreaField = ({ props, variant, }) => {
+    /**
+     * Determines if the field has an error based on form validation
+     */
+    const isError = !!props.errors?.[props.item.name];
+    const isShowBorderError = isError;
+    /**
+     * Renders the textarea component with validation support
+     */
+    return (jsx(Fragment, { children: jsx(Controller, { control: props.control, name: props.item.name, render: ({ field }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(TextAreaField, { multiline: true, size: "small", InputProps: {
+                            style: {
+                                border: 'none',
+                            },
+                        }, sx: {
+                            ...props.item.sx,
+                        }, minRows: props.item.minRows || 1, maxRows: props.item.maxRows || 100, placeholder: props.item.placeholder || 'Type Something...', ...field, label: variant !== 'standard'
+                            ? `${props.item.label}${props.item.required ? ' *' : ''}`
+                            : '', error: isShowBorderError, value: field.value || '', disabled: props.item.disable, inputProps: {
+                            /**
+                             * Handles input events with text restrictions
+                             *
+                             * @param {any} e - The input event object
+                             *
+                             * @remarks
+                             * - Removes special characters if allowSpecialChars is false
+                             * - Prevents input that starts with a space
+                             */
+                            onInput: (e) => {
+                                if (!props?.item?.allowSpecialChars) {
+                                    const value = e.target.value;
+                                    e.target.value = value.replace(/[^a-zA-Z0-9 ]/g, '');
+                                } // Allow only alphanumeric and space
+                                if (e.target.value.length === 1 && e.target.value === ' ') {
+                                    e.target.value = '';
+                                }
+                            },
+                            'aria-labelledby': `${props.item.name}-label`,
+                            'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                            'aria-required': props.item.required ? true : undefined,
+                        } }), jsx(FormBottomField, { ...props })] })) }, props.item.name) }));
+};
+
+export { FormTextAreaField as default };

package/dist/components/FormComponents/FormTextAreaField/FormTextAreaField.styles.d.ts

@@ -0,0 +1,3 @@
+export declare const TextAreaField: import("@emotion/styled").StyledComponent<{
+    variant?: import("@mui/material").TextFieldVariants | undefined;
+} & Omit<import("@mui/material").StandardTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").FilledTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/components/FormComponents/FormTextAreaField/FormTextAreaField.styles.esm.js

@@ -0,0 +1,35 @@
+import { styled } from '@mui/material/styles';
+import { TextField } from '@mui/material';
+
+const TextAreaField = styled(TextField)(() => ({
+    '& .css-1holvmy,.css-lqj8pz-MuiFormLabel-root-MuiInputLabel-root, .css-kichxs-MuiFormLabel-root-MuiInputLabel-root': {
+        top: '-10px',
+    },
+    '& input': {
+        fontSize: '11px',
+    },
+    '& .css-2rul56-MuiFormLabel-root-MuiInputLabel-root': {
+        top: '-10px',
+    },
+    '& .css-12ciryo-MuiFormLabel-root-MuiInputLabel-root ': {},
+    '& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input ': {
+        outline: 'none',
+        border: '1px solid #ced4da', // Add this line to set border to none
+    },
+    '& .css-1gq5vhi-MuiInputBase-root-MuiOutlinedInput-root input:focus ': {
+        outline: 'none',
+        border: 'none', // Set border to none when input is focused
+    },
+    '& .css-1y03twt-MuiInputBase-root-MuiOutlinedInput-root': {
+        padding: '5px 5px', // Set border to none when input is focused
+        fontSize: '11px',
+    },
+    '& textarea': {
+        fontSize: '11px',
+        // textTransform:'uppercase'
+        maxHeight: '500px !important',
+        overflow: 'auto',
+    },
+}));
+
+export { TextAreaField };

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

@@ -0,0 +1,43 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+/**
+ * FormTextField Component
+ *
+ * A text input field component that integrates with react-hook-form for form state management.
+ * This component is used for standard text inputs, email inputs, and multi-email inputs.
+ *
+ * @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
+ * <FormTextField props={formRenderProps} variant="outlined" />
+ *
+ * @example
+ * // Usage with specific configuration
+ * const formItem = {
+ *   name: "email",
+ *   label: "Email Address",
+ *   inputType: "email",
+ *   required: true,
+ *   placeholder: "Enter your email"
+ * };
+ * <FormTextField
+ *   props={{
+ *     item: formItem,
+ *     control: formMethods.control,
+ *     errors: formMethods.formState.errors
+ *   }}
+ *   variant="outlined"
+ * />
+ */
+declare const FormTextField: ({ props, variant }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Export the FormTextField component for use in the form renderer
+ * This component is used for text, email, and multi-email input types
+ */
+export default FormTextField;

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

@@ -0,0 +1,111 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Controller } from 'react-hook-form';
+import { FormTextFieldComponent } from './FormTextField.styles.esm.js';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+
+/**
+ * FormTextField Component
+ *
+ * A text input field component that integrates with react-hook-form for form state management.
+ * This component is used for standard text inputs, email inputs, and multi-email inputs.
+ *
+ * @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
+ * <FormTextField props={formRenderProps} variant="outlined" />
+ *
+ * @example
+ * // Usage with specific configuration
+ * const formItem = {
+ *   name: "email",
+ *   label: "Email Address",
+ *   inputType: "email",
+ *   required: true,
+ *   placeholder: "Enter your email"
+ * };
+ * <FormTextField
+ *   props={{
+ *     item: formItem,
+ *     control: formMethods.control,
+ *     errors: formMethods.formState.errors
+ *   }}
+ *   variant="outlined"
+ * />
+ */
+const FormTextField = ({ props, variant }) => {
+    // Using fieldState.error directly from Controller render; no local isError needed
+    // Removed fieldError gating: error border now shows whenever there is a validation error
+    /**
+     * 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 ? ' *' : ''}` : '';
+    /**
+     * Handles input events with various text restrictions
+     *
+     * @param {any} e - The input event object
+     *
+     * @remarks
+     * - Removes spaces if donotAllowSpace is true
+     * - Removes special characters if allowSpecialChars is false
+     * - Prevents input that starts with a space
+     * - Calls custom onInputProps handler if provided
+     */
+    const onInput = (e) => {
+        if (props?.item?.donotAllowSpace) {
+            const value = e.target.value;
+            e.target.value = value.replace(' ', '');
+        }
+        if (props?.item?.allowSpecialChars === false) {
+            const value = e.target.value;
+            e.target.value = value.replace(/[^a-zA-Z0-9\s]/g, '');
+        }
+        if (props?.item?.allowNumbers === false) {
+            const value = e.target.value;
+            e.target.value = value.replace(/[0-9]/g, '');
+        }
+        if (props?.item?.allowText === false) {
+            const value = e.target.value;
+            e.target.value = value.replace(/[a-zA-Z]/g, '');
+        }
+        if (props?.item?.allowHyphen === false) {
+            const value = e.target.value;
+            e.target.value = value.replace(/-/g, '');
+        }
+        // Allow only alphanumeric and space
+        if (e.target.value.length === 1 && e.target.value === ' ') {
+            e.target.value = '';
+        }
+        props.item.onInputProps && props.item.onInputProps(e);
+    };
+    /**
+     * Renders the text field component using react-hook-form's Controller
+     * for controlled form state management
+     */
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field, fieldState }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsx(FormTextFieldComponent, { ...field, fullWidth: true, autoFocus: props.item.autoFocus, error: !!fieldState.error, label: label, placeholder: props.item.placeholder || '', autoComplete: "off", sx: {
+                        ...props.item.sx,
+                    }, value: field.value || '', size: "small", disabled: props.item.disable, onBlur: (e) => {
+                        // Call custom onBlur handler if provided
+                        props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+                    }, inputProps: {
+                        ...{
+                            maxLength: props.item.maxLength || 100,
+                            onInput: onInput,
+                            onPaste: (e) => {
+                                if (props.item.doNotAllowPaste)
+                                    e.preventDefault();
+                            },
+                        },
+                        'aria-labelledby': `${props.item.name}-label`,
+                        'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                        'aria-required': props.item.required ? true : undefined,
+                    } }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+};
+
+export { FormTextField as default };

package/dist/components/FormComponents/FormTextField/FormTextField.styles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Styled TextField component with custom styling for form inputs
+ *
+ * This component extends Material-UI's TextField with custom styling to match
+ * the design system requirements. It includes specific CSS overrides for various
+ * Material-UI classes to ensure consistent appearance across the application.
+ *
+ * @component
+ */
+export declare const FormTextFieldComponent: import("@emotion/styled").StyledComponent<{
+    variant?: import("@mui/material").TextFieldVariants | undefined;
+} & Omit<import("@mui/material").StandardTextFieldProps | import("@mui/material").OutlinedTextFieldProps | import("@mui/material").FilledTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/components/FormComponents/FormTextField/FormTextField.styles.esm.js

@@ -0,0 +1,27 @@
+import { styled } from '@mui/material/styles';
+import { TextField } from '@mui/material';
+
+/**
+ * Styled TextField component with custom styling for form inputs
+ *
+ * This component extends Material-UI's TextField with custom styling to match
+ * the design system requirements. It includes specific CSS overrides for various
+ * Material-UI classes to ensure consistent appearance across the application.
+ *
+ * @component
+ */
+const FormTextFieldComponent = styled(TextField)(() => ({
+// '& .MuiFormLabel-root': {
+//   top: '-10px',
+// },
+// '& .MuiInputBase-root.MuiOutlinedInput-root input': {
+//   outline: 'none',
+//   border: '1px solid #ced4da',
+// },
+// '& .MuiInputBase-root.MuiOutlinedInput-root input:focus': {
+//   outline: 'none',
+//   border: 'none',
+// },
+}));
+
+export { FormTextFieldComponent };

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

@@ -0,0 +1,43 @@
+import { FormRenderProps, VariantProps } from '../../../utils';
+/**
+ * FormTextField Component
+ *
+ * A text input field component that integrates with react-hook-form for form state management.
+ * This component is used for standard text inputs, email inputs, and multi-email inputs.
+ *
+ * @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
+ * <FormTextField props={formRenderProps} variant="outlined" />
+ *
+ * @example
+ * // Usage with specific configuration
+ * const formItem = {
+ *   name: "email",
+ *   label: "Email Address",
+ *   inputType: "email",
+ *   required: true,
+ *   placeholder: "Enter your email"
+ * };
+ * <FormTextField
+ *   props={{
+ *     item: formItem,
+ *     control: formMethods.control,
+ *     errors: formMethods.formState.errors
+ *   }}
+ *   variant="outlined"
+ * />
+ */
+declare const FormTextFieldWithSelect: ({ props, variant, }: {
+    props: FormRenderProps;
+    variant: VariantProps;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Export the FormTextField component for use in the form renderer
+ * This component is used for text, email, and multi-email input types
+ */
+export default FormTextFieldWithSelect;

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

@@ -0,0 +1,102 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Controller } from 'react-hook-form';
+import FormBottomField from '../FormBottomField/FormBottomField.esm.js';
+import 'dayjs';
+import { renderLabel } from '../../../utils/Constants/FormConstants.esm.js';
+import { Box, TextField, Select, MenuItem } from '@mui/material';
+
+/**
+ * FormTextField Component
+ *
+ * A text input field component that integrates with react-hook-form for form state management.
+ * This component is used for standard text inputs, email inputs, and multi-email inputs.
+ *
+ * @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
+ * <FormTextField props={formRenderProps} variant="outlined" />
+ *
+ * @example
+ * // Usage with specific configuration
+ * const formItem = {
+ *   name: "email",
+ *   label: "Email Address",
+ *   inputType: "email",
+ *   required: true,
+ *   placeholder: "Enter your email"
+ * };
+ * <FormTextField
+ *   props={{
+ *     item: formItem,
+ *     control: formMethods.control,
+ *     errors: formMethods.formState.errors
+ *   }}
+ *   variant="outlined"
+ * />
+ */
+const FormTextFieldWithSelect = ({ props, variant, }) => {
+    // Using fieldState.error directly from Controller render; no local isError needed
+    // Removed fieldError gating: error border now shows whenever there is a validation error
+    /**
+     * 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 ? ' *' : ''}` : '';
+    /**
+     * Handles input events with various text restrictions
+     *
+     * @param {React.ChangeEvent<HTMLInputElement>} e - The input event object
+     *
+     * @remarks
+     * - Removes spaces if donotAllowSpace is true
+     * - Removes special characters if allowSpecialChars is false
+     * - Prevents input that starts with a space
+     * - Calls custom onInputProps handler if provided
+     */
+    const onInput = (e) => {
+        props.item.onInputProps && props.item.onInputProps(e);
+        const filteredValue = e.target.value.replace(/[^a-zA-Z0-9._]/g, '');
+        e.target.value = filteredValue;
+    };
+    /**
+     * Renders the text field component using react-hook-form's Controller
+     * for controlled form state management
+     */
+    return (jsx(Controller, { control: props.control, name: props.item.name, render: ({ field, fieldState }) => (jsxs(Fragment, { children: [renderLabel(variant, props), jsxs(Box, { sx: { display: 'flex', width: '100%' }, children: [jsx(TextField, { ...field, fullWidth: true, autoFocus: props.item.autoFocus, error: !!fieldState.error, label: label, placeholder: props.item.placeholder || '', autoComplete: "off", sx: {
+                                ...props.item.sx,
+                                '& .MuiOutlinedInput-root': {
+                                    borderTopRightRadius: 0,
+                                    borderBottomRightRadius: 0,
+                                    borderRight: 'none',
+                                },
+                            }, value: field.value || '', size: "small", disabled: props.item.disable, onBlur: (e) => {
+                                props?.item?.onBlurFn && props?.item?.onBlurFn(e);
+                            }, inputProps: {
+                                ...{
+                                    maxLength: props.item.maxLength || 100,
+                                    onInput: onInput,
+                                    onPaste: (e) => {
+                                        if (props.item.doNotAllowPaste)
+                                            e.preventDefault();
+                                    },
+                                },
+                                'aria-labelledby': `${props.item.name}-label`,
+                                'aria-describedby': `${props.item.name}-helper ${props.item.name}-error`,
+                                'aria-required': props.item.required ? true : undefined,
+                            } }), jsx(Controller, { control: props.control, name: `${props.item.name}SelectValue`, render: ({ field: selectField }) => (jsx(Select, { ...selectField, value: selectField.value || '', size: "small", sx: {
+                                    // '& .MuiOutlinedInput-root': {
+                                    borderTopLeftRadius: 0,
+                                    borderBottomLeftRadius: 0,
+                                    minWidth: '120px',
+                                    borderLeft: 'none',
+                                    // },
+                                }, disabled: props.item.disable, error: !!fieldState.error, children: props?.item?.options?.map((item) => {
+                                    return (jsx(MenuItem, { value: item.value, children: item.label }, item.value));
+                                }) })) })] }), jsx(FormBottomField, { ...props })] })) }, props.item.name));
+};
+
+export { FormTextFieldWithSelect as default };

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

@@ -0,0 +1,16 @@
+import { FormRenderProps } from '../../../utils';
+/**
+ * HelperText Component
+ *
+ * Displays helper text below form fields when provided.
+ * Helper text provides additional guidance to users about the field.
+ *
+ * @component
+ * @param {FormRenderProps} props - Form rendering properties from parent form
+ */
+declare const HelperText: (props: FormRenderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Export the HelperText component for use in form field components
+ * This component handles the display of helper text for form fields
+ */
+export default HelperText;

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

@@ -0,0 +1,23 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+/**
+ * HelperText Component
+ *
+ * Displays helper text below form fields when provided.
+ * Helper text provides additional guidance to users about the field.
+ *
+ * @component
+ * @param {FormRenderProps} props - Form rendering properties from parent form
+ */
+const HelperText = (props) => {
+    /**
+     * Conditionally renders helper text if it exists in the form item props
+     * Returns an empty fragment if no helper text is provided
+     */
+    return props?.item?.helperText ? (jsx("span", { id: `${props.item.name}-helper`, className: "helperText-v1", style: {
+            fontSize: '11px',
+            color: '#3651d3',
+        }, children: props?.item?.helperText })) : (jsx(Fragment, {}));
+};
+
+export { HelperText as default };