mui-design-system 0.0.15 → 0.0.17

package/dist/components/custom-mobile-date-picker/CustomMobileDatePicker.js

@@ -35,7 +35,7 @@ const createDateObject = (date, lang) => {
             }),
         });
 };
-const MobileDatePicker = ({ form, name, defaultValue, label, sx, rules, readonly, disabled, placeholder, error, itemProps, props, helperText, variant = 'outlined', withoutHelperText, inputLabelMode, }) => {
+const MobileDatePicker = ({ form, name, defaultValue, label, rules, readonly, disabled, placeholder, error, itemProps, props, helperText, variant = 'outlined', withoutHelperText, inputLabelMode, }) => {
     const lang = document.documentElement.lang;
     const [open, setOpen] = useState(false);
     const defaultValueDate = defaultValue
@@ -80,10 +80,7 @@ const MobileDatePicker = ({ form, name, defaultValue, label, sx, rules, readonly
                         form
                             .register(name, { ...rules })
                             .onBlur({ target: { current: selectedDate.toDate() } });
-                    }, value: selectedDate?.format('YYYY/MM/DD'), defaultValue: selectedDate?.format('YYYY/MM/DD'), variant: variant, fullWidth: true, id: field?.name, error: !!error, onClick: !(disabled || readonly) && handleTextFieldClick, onTouchEnd: !(disabled || readonly) && handleTextFieldClick, placeholder: placeholder, sx: [
-                        ...(Array.isArray(sx) ? sx : [sx]),
-                        { userSelect: disabled || readonly ? 'none' : 'all' },
-                    ], helperText: getHelperText(), "aria-readonly": readonly, disabled: disabled, inputProps: { readOnly: readonly }, InputProps: {
+                    }, value: selectedDate?.format('YYYY/MM/DD'), defaultValue: selectedDate?.format('YYYY/MM/DD'), variant: variant, fullWidth: true, id: field?.name, error: !!error, onClick: !(disabled || readonly) && handleTextFieldClick, onTouchEnd: !(disabled || readonly) && handleTextFieldClick, placeholder: placeholder, helperText: getHelperText(), "aria-readonly": readonly, disabled: disabled, inputProps: { readOnly: readonly }, InputProps: {
                         endAdornment: (_jsx(InputAdornment, { position: 'end', sx: {
                                 '& .MuiInputAdornment-positionStart': {
                                     marginTop: '0 important',

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+export { default as useTable } from './custom-table/components/useTable';
 export declare const CustomTable: import("react").FC<import("./custom-table/CustomTable").ICustomTable & {
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
@@ -176,3 +177,7 @@ export declare const CustomStepper: import("react").FC<import("./custom-stepper/
     skeletonWidth?: string | number | undefined;
     skeletonHeight?: string | number | undefined;
 }>;
+export declare const Form: import("react").FC<import("./input-list/Form").FormProps & {
+    skeletonWidth?: string | number | undefined;
+    skeletonHeight?: string | number | undefined;
+}>;

package/dist/components/index.js

@@ -32,6 +32,8 @@ import CustomPagination1Component from './custom-pagination/custom-pagination-1/
 import CustomPagination2Component from './custom-pagination/custom-pagination-2/CustomPagination2';
 import CustomStepperComponent from './custom-stepper/CustomStepper';
 import withErrorBoundary from './error boundary/withErrorBoundary';
+import FormComponent from './input-list/Form';
+export { default as useTable } from './custom-table/components/useTable';
 export const CustomTable = withErrorBoundary(CustomTableComponent);
 export const UFUploader = withErrorBoundary(UFUploaderComponent);
 export const CustomUploader = withErrorBoundary(CustomUploaderComponent);
@@ -65,3 +67,4 @@ export const OTPInput = withErrorBoundary(OTPInputComponent);
 export const CustomPagination1 = withErrorBoundary(CustomPagination1Component);
 export const CustomPagination2 = withErrorBoundary(CustomPagination2Component);
 export const CustomStepper = withErrorBoundary(CustomStepperComponent);
+export const Form = withErrorBoundary(FormComponent);

package/dist/components/input-list/Form.d.ts

@@ -0,0 +1,21 @@
+import { FC } from "react";
+import { UseFormReturn } from "react-hook-form";
+import { GridProps } from "@mui/material/Grid";
+import { TypographyProps } from "@mui/material/Typography";
+import { TFormSchema, TInputLabelMode } from "./type";
+import { TextFieldProps } from "@mui/material/TextField";
+export interface FormProps {
+    schema: TFormSchema;
+    form: UseFormReturn<any, any, any>;
+    gridContainerProps?: GridProps;
+    gridItemProps?: GridProps;
+    itemProps?: any;
+    labelsProps?: Partial<TypographyProps<"label", {}>> | undefined;
+    hideRequiredStar?: boolean;
+    inputLabelMode?: TInputLabelMode;
+    inputVariants?: TextFieldProps["variant"];
+    withoutHelperText?: boolean;
+    disabled?: boolean;
+}
+declare const Form: FC<FormProps>;
+export default Form;

package/dist/components/input-list/Form.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
+//------------------------------------------------------------------------
+//@Mui
+import Box from "@mui/material/Box";
+import Grid from "@mui/material/Grid";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import UseFormInput from "./UseFormInput";
+import { deepMerge, result } from "../../methods/general";
+const Form = ({ schema, form, gridItemProps, gridContainerProps, labelsProps, itemProps, hideRequiredStar = false, inputLabelMode = "static", inputVariants = "outlined", withoutHelperText, disabled, }) => {
+    return (_jsx(Grid, { container: true, columnSpacing: 4, rowSpacing: 0, rowGap: 2, alignItems: "flex-start", ...gridContainerProps, children: schema?.map((inputProp) => (_jsxs(Grid, { item: true, xs: 4, width: "100%", height: "auto", position: "relative", ...deepMerge(gridItemProps, inputProp.gridItemProp), children: [inputLabelMode === "static" && inputProp.type !== "checkbox" && (_jsx(Box, { display: "flex", children: _jsx(Typography, { flexGrow: 1, width: 0, component: "label", display: "inline-block", mb: 2, htmlFor: inputProp.name, color: result(form?.formState?.errors, `${inputProp.name}`)
+                            ? "error"
+                            : "text.16", noWrap: true, title: !isValidElement(inputProp?.label)
+                            ? inputProp?.label?.toString() || ""
+                            : "", ...deepMerge(labelsProps, inputProp.labelProps), children: _jsxs(Stack, { direction: "row", children: [inputProp.label, inputProp.rules?.required && !hideRequiredStar && (_jsx(Typography, { component: "span", color: "error", fontSize: 12, children: "*" }))] }) }) })), _jsx(UseFormInput, { form: form, itemProps: itemProps, error: result(form?.formState?.errors, `${inputProp.name}`), inputLabelMode: inputLabelMode, inputVariants: inputVariants, withoutHelperText: withoutHelperText, disabled: disabled, ...inputProp })] }, inputProp.name))) }));
+};
+export default Form;

package/dist/components/input-list/UseFormInput.d.ts

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 import { UseFormReturn } from 'react-hook-form';
-import { IUseFormInput } from './type';
+import { TSchema } from './type';
 import { TextFieldProps } from '@mui/material/TextField';
-type IUseFormInputProps = IUseFormInput & {
+type IUseFormInputProps = TSchema & {
     form: UseFormReturn<any>;
     error?: any;
     inputVariants?: TextFieldProps['variant'];

package/dist/components/input-list/checkbox-list/CheckboxList.d.ts

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+import { CheckboxProps, StackProps } from '@mui/material';
+import { FormControlLabelProps } from '@mui/material/FormControlLabel';
+import { IFormOption } from '../type';
+export interface ICheckboxValue {
+    label: string;
+    value: string | number;
+}
+export interface CheckboxListProps {
+    options: IFormOption[];
+    value?: ICheckboxValue[];
+    onChange: (values: ICheckboxValue[]) => void;
+    multiple?: boolean;
+    stackProps?: StackProps;
+    checkboxProps?: CheckboxProps;
+    formControlLabelProps?: Omit<FormControlLabelProps, 'label' | 'control'>;
+}
+declare const CheckboxList: FC<CheckboxListProps>;
+export default CheckboxList;

package/dist/components/input-list/checkbox-list/CheckboxList.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormControlLabel, Stack, } from '@mui/material';
+import Checkbox from '@mui/material/Checkbox';
+const CheckboxList = ({ options = [], value = [], onChange, multiple, checkboxProps, stackProps, formControlLabelProps, }) => {
+    // console.log('values', values)
+    const handleChange = (event, changedValue) => {
+        const newValues = [...value];
+        if (multiple) {
+            if (event.target.checked) {
+                newValues.push(changedValue);
+                onChange(newValues);
+            }
+            else {
+                const index = newValues.findIndex((v) => v.value === changedValue.value);
+                newValues.splice(index, 1);
+                onChange(newValues);
+            }
+        }
+        else {
+            if (event.target.checked) {
+                onChange([changedValue]);
+            }
+            else {
+                onChange([]);
+            }
+        }
+    };
+    return (_jsx(Stack, { ...stackProps, children: options.map((option) => (_jsx(FormControlLabel, { control: _jsx(Checkbox, { ...checkboxProps, checked: value?.findIndex((v) => v.value === option.value) > -1, onChange: (e) => handleChange(e, option) }), label: option.label, slotProps: { typography: option?.labelProp }, ...formControlLabelProps }, option.value))) }));
+};
+export default CheckboxList;

package/dist/components/input-list/components/UFAutoComplete.js

@@ -1,20 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef, useMemo } from 'react';
 import { Controller } from 'react-hook-form';
-import { CustomAutoComplete } from '../../index';
-const UFAutoComplete = ({ form, label, error, placeholder, sx, rules, disabled, name, options, defaultValue, readonly, props, helperText, isLoading = false, onSearch, inputLabelMode, variant, itemProps, onReachEnd, }) => {
-    //Cache result options for search and integration across the pages
-    const cachedOptionsRef = useRef([]);
-    const cachedOptions = useMemo(() => {
-        options?.forEach((option) => {
-            if (!cachedOptionsRef.current.find((opt) => opt.value === option?.value)
-                ?.value) {
-                cachedOptionsRef.current.push(option);
-            }
-        });
-        return cachedOptionsRef.current;
-    }, [options?.length]);
-    //________________________________________________________________
+import CustomAutoComplete from "../../custom-auto-complete/CustomAutoComplete";
+import { deepMerge } from "../../../methods/general";
+import { useFormContext } from "../../../context/FormContext";
+const UFAutoComplete = ({ form, label, error, placeholder, rules, disabled, name, options, defaultValue, readonly, props, helperText, isLoading = false, inputLabelMode, variant, itemProps, onReachEnd }) => {
+    const { theme } = useFormContext();
     // Convert defaultValue if it's an array of strings
     const convertDefaultValue = (defaultValue, options) => {
         // Check if options are undefined or null, return an empty array or default value
@@ -23,30 +13,29 @@ const UFAutoComplete = ({ form, label, error, placeholder, sx, rules, disabled,
         }
         // Convert value to corresponding object with label and value
         if (Array.isArray(defaultValue)) {
-            return defaultValue
-                .map((val) => {
-                const matchedOption = options.find((option) => option.value === val);
+            return defaultValue.map(val => {
+                const matchedOption = options.find(option => option.value === val);
                 return matchedOption ? matchedOption : null;
-            })
-                .filter(Boolean);
+            }).filter(Boolean);
         }
         else {
-            const matchedOption = options.find((option) => option.value === defaultValue);
+            const matchedOption = options.find(option => option.value === defaultValue);
             return matchedOption ? matchedOption : null;
         }
     };
-    //________________________________________________________________
-    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, defaultValue: convertDefaultValue(defaultValue, cachedOptions) || [], render: ({ field }) => (_jsx(CustomAutoComplete, { ...field, label: label, hideLabel: true, placeholder: typeof label === 'string' ? label : placeholder, inputLabelMode: inputLabelMode, helperText: error?.message ?? helperText, options: cachedOptions || [], selectedOptions: field.value, value: convertDefaultValue(field?.value, cachedOptions), sx: sx, validation: { isInvalid: !!error, message: error?.message }, disabled: disabled, id: name, readOnly: readonly, variant: variant, isLoading: isLoading, onReachEnd: onReachEnd, onSearch: onSearch, onChange: (e, newValue) => {
+    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, defaultValue: convertDefaultValue(defaultValue, options), render: ({ field }) => (_jsx(CustomAutoComplete, { ...field, label: label, hideLabel: true, placeholder: typeof label === "string" ? label : placeholder, inputLabelMode: inputLabelMode, helperText: error?.message ?? helperText, options: options || [], selectedOptions: field.value, value: convertDefaultValue(field?.value, options), sx: { width: '100%' }, inputMaxHeight: '120px', limitTags: 2, validation: { isInvalid: !!error, message: error?.message }, disabled: disabled, id: name, readOnly: readonly, variant: variant, isLoading: isLoading, isOptionEqualToValue: (option, value) => {
+                return option?.value === value?.value;
+            }, onReachEnd: onReachEnd, onChange: (_, newValue) => {
                 const isMultiple = Array.isArray(newValue);
                 if (isMultiple) {
                     // Handle multiple selection
-                    const valuesArray = newValue.map((item) => item.value);
+                    const valuesArray = newValue.map(item => item.value);
                     field.onChange(valuesArray);
                 }
                 else {
                     // Handle single selection
-                    field.onChange(newValue ? newValue.value : '');
+                    field.onChange(newValue ? newValue.value : "");
                 }
-            }, ...props, ...itemProps })) }));
+            }, ...deepMerge(theme?.autoComplete?.autoCompleteProps, itemProps, props) })) }));
 };
 export default UFAutoComplete;

package/dist/components/input-list/components/UFCheckbox.d.ts

@@ -1,11 +1,11 @@
-import { FC } from 'react';
-import { ICheckboxForm } from '../type';
-import { CheckboxProps } from '@mui/material';
-import { UseFormReturn } from 'react-hook-form';
-import { SwitchBaseProps } from '@mui/material/internal/SwitchBase';
-import { TypographyProps } from '@mui/material/Typography';
+import { FC } from "react";
+import { ICheckboxForm } from "../type";
+import { CheckboxProps } from "@mui/material";
+import { UseFormReturn } from "react-hook-form";
+import { SwitchBaseProps } from "@mui/material/internal/SwitchBase";
+import { TypographyProps } from "@mui/material/Typography";
 export interface ICustomCheckboxProps {
-    inputProps: SwitchBaseProps['inputProps'];
+    inputProps: SwitchBaseProps["inputProps"];
     slotProps: {
         typography?: TypographyProps;
     };

package/dist/components/input-list/components/UFCheckbox.js

@@ -1,24 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Checkbox from '@mui/material/Checkbox';
-import FormControl from '@mui/material/FormControl';
-import { Controller } from 'react-hook-form';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import Typography from '@mui/material/Typography';
-const UFCheckbox = ({ form, name, label, rules, disabled, sx, error, helperText, withoutHelperText, props, ...otherProps }) => {
-    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, render: ({ field: { onChange, name, value = false } }) => (_jsxs(FormControl, { sx: { display: 'flex', ...(disabled && { filter: 'contrast(0.3)' }) }, children: [_jsx(FormControlLabel, { sx: [
-                        ...(Array.isArray(sx) ? sx : [sx]),
-                        { pointerEvents: otherProps.readonly ? 'none' : 'all' },
-                    ], slotProps: {
+import Checkbox from "@mui/material/Checkbox";
+import FormControl from "@mui/material/FormControl";
+import { Controller } from "react-hook-form";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Typography from "@mui/material/Typography";
+import { useFormContext } from "../../../context/FormContext";
+import { deepMerge } from "../../../methods/general";
+const UFCheckbox = ({ form, name, label, rules, error, helperText, withoutHelperText, props, disabled, itemProps, formControlLabelProps, }) => {
+    const { theme } = useFormContext();
+    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, render: ({ field: { onChange, name, value = false } }) => (_jsxs(FormControl, { sx: { display: "flex", ...(disabled && { filter: "contrast(0.3)" }) }, children: [_jsx(FormControlLabel, { slotProps: {
                         typography: {
-                            variant: 'caption3',
                             ...props?.slotProps?.typography,
                         },
-                    }, control: _jsx(Checkbox, { color: 'primary', checked: value, ...(!otherProps.readonly && {
-                            onChange: onChange,
-                        }), disabled: disabled, name: name, inputProps: props?.inputProps, ...props?.checkBoxProps }), label: label }), !withoutHelperText && (_jsx(Typography, { variant: 'caption3', sx: {
+                    }, control: _jsx(Checkbox, { color: "primary", checked: value, onChange: onChange, disabled: disabled, name: name, ...deepMerge(theme?.checkbox?.checkboxProps, itemProps, props) }), label: label, ...deepMerge(theme?.checkbox?.formControlLabelProps, formControlLabelProps) }), !withoutHelperText && (_jsx(Typography, { sx: {
                         height: 23,
-                        width: 'max-content',
-                        color: error ? 'error.4' : 'text.primary',
-                    }, children: error?.message ?? helperText ?? ' ' }))] })) }));
+                        width: "max-content",
+                        color: error ? "error.4" : "text.primary",
+                    }, children: error?.message ?? helperText ?? " " }))] })) }));
 };
 export default UFCheckbox;

package/dist/components/input-list/components/UFCurrency.d.ts

@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import { UseFormReturn } from 'react-hook-form';
-import { ICurrencyForm } from '../type';
+import { FC } from "react";
+import { UseFormReturn } from "react-hook-form";
+import { ICurrencyForm } from "../type";
 type Props = ICurrencyForm & {
     form: UseFormReturn<any>;
     error: any;

package/dist/components/input-list/components/UFCurrency.js

@@ -1,50 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Controller } from 'react-hook-form';
-import CustomNumericInput from '../../custom-input/CustomNumericInput';
-import { useTheme } from '@mui/material';
-import Typography from '@mui/material/Typography';
-const UfCurrency = ({ form, name, defaultValue, sx, rules, readonly, disabled, placeholder, error, itemProps, props, helperText, withoutHelperText, variant, 
-// currencyIcon = <SvgDollarCircle primarycolor={"inherit"} />,
-currencyIcon = _jsx(Typography, { children: "\u062A\u0648\u0645\u0627\u0646" }), inputLabelMode, label, }) => {
+import { Controller } from "react-hook-form";
+import CustomNumericInput from "../../custom-input/CustomNumericInput";
+import { useTheme } from "@mui/material";
+import Typography from "@mui/material/Typography";
+import { useFormContext } from "../../../context/FormContext";
+import { deepMerge } from "../../../methods/general";
+const UfCurrency = ({ form, name, defaultValue, rules, readonly, disabled, placeholder, error, itemProps, props, helperText, withoutHelperText, variant, currencyIcon = _jsx(Typography, { children: "\u062A\u0648\u0645\u0627\u0646" }), inputLabelMode, label, }) => {
+    const { theme } = useFormContext();
     const { direction } = useTheme();
-    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, defaultValue: defaultValue, render: ({ field: { onChange, name, value, onBlur } }) => {
-            return (_jsx(CustomNumericInput, { value: value, onChange: (value) => {
-                    onChange({
-                        target: { value: value },
-                    });
-                }, onBlur: onBlur, fullWidth: true, id: name, error: !!error, placeholder: placeholder, disabled: disabled, variant: variant, ...(inputLabelMode === 'static' && { hiddenLabel: true }), ...(inputLabelMode === 'relative' && { label: label }), sx: {
-                    ...sx,
-                    '.MuiInputBase-root': {
-                        px: (theme) => theme.spacing(2),
-                    },
-                    ...(direction === 'rtl'
-                        ? {
-                            '.MuiFilledInput-input': {
-                                py: '16px !important',
-                                textAlign: 'right !important',
-                                pr: '3px !important',
-                            },
-                        }
-                        : {
-                            '.MuiFilledInput-input': {
-                                pl: '3px !important',
-                            },
-                        }),
-                    backgroundColor: readonly ? 'background.paper' : 'unset',
-                    borderRadius: '8px',
-                    pointerEvents: readonly ? 'none' : 'unset',
-                    '& .MuiOutlinedInput-input': {
-                        backgroundColor: readonly ? 'background.paper' : 'unset',
-                        color: readonly ? 'text.secondary' : 'unset',
-                    },
-                }, helperText: withoutHelperText
-                    ? undefined
-                    : error?.message ?? helperText ?? ' ', "aria-readonly": readonly, inputProps: { readOnly: readonly }, ...itemProps, ...props, InputProps: {
-                    sx: { gap: 2 },
-                    endAdornment: props?.currencyIcon ?? currencyIcon,
-                    ...itemProps?.InputProps,
-                    ...props?.InputProps,
-                } }));
-        } }));
+    const currencyMergedProps = deepMerge(theme?.currency?.currencyProps, itemProps, props);
+    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, defaultValue: defaultValue, render: ({ field: { onChange, name, value, onBlur } }) => (_jsx(CustomNumericInput, { value: value, onChange: (value) => {
+                onChange({
+                    target: { value: value },
+                });
+            }, onBlur: onBlur, fullWidth: true, id: name, error: !!error, placeholder: placeholder, disabled: disabled, variant: variant, ...(inputLabelMode === "static" && { hiddenLabel: true }), ...(inputLabelMode === "relative" && { label: label }), helperText: withoutHelperText ? undefined : error?.message ?? helperText ?? " ", "aria-readonly": readonly, inputProps: { readOnly: readonly }, ...currencyMergedProps, sx: {
+                ".MuiInputBase-root": {
+                    px: (theme) => theme.spacing(2),
+                },
+                ...(direction === "rtl"
+                    ? {
+                        ".MuiFilledInput-input": {
+                            py: "16px !important",
+                            textAlign: "right !important",
+                            pr: "3px !important",
+                        },
+                    }
+                    : {
+                        ".MuiFilledInput-input": {
+                            pl: "3px !important",
+                        },
+                    }),
+                backgroundColor: readonly ? "background.paper" : "unset",
+                borderRadius: "8px",
+                pointerEvents: readonly ? "none" : "unset",
+                "& .MuiOutlinedInput-input": {
+                    backgroundColor: readonly ? "background.paper" : "unset",
+                    color: readonly ? "text.secondary" : "unset",
+                },
+                ...currencyMergedProps.sx
+            }, InputProps: {
+                sx: { gap: 2 },
+                endAdornment: props?.currencyIcon ?? currencyIcon,
+                ...currencyMergedProps.InputProps
+            } })) }));
 };
 export default UfCurrency;

package/dist/components/input-list/components/UFDatePicker.js

@@ -1,14 +1,17 @@
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { Controller } from 'react-hook-form';
-import { CustomDatePicker } from '../../index';
-const UFDatePicker = ({ form, rules, disabled, defaultValue, name, label, error, readonly, helperText, withoutHelperText, variant, inputLabelMode = 'static', props, sx, itemProps, }) => {
+import CustomDatePicker from "../../custom-date-picker/CustomDatePicker";
+import { useFormContext } from "../../../context/FormContext";
+import { deepMerge } from "../../../methods/general";
+const UFDatePicker = ({ form, rules, disabled, defaultValue, name, label, error, withoutHelperText, variant, inputLabelMode = 'static', props, itemProps, readonly }) => {
+    const { theme } = useFormContext();
     return (
     //ToDo date picker issue on grid should be resolved
     _jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, defaultValue: defaultValue, render: ({ field: { onChange, name, value } }) => (_jsx(_Fragment, { children: _jsx(CustomDatePicker, { readOnly: readonly, textFieldProps: {
                     id: name,
                     variant: variant,
                     ...itemProps,
-                    sx: { width: '100%', ...sx },
-                }, error: error, disabled: disabled, value: value, onChange: onChange, inputLabelMode: inputLabelMode, withoutHelperText: withoutHelperText, label: label, ...props }) })) }));
+                    sx: { width: '100%' },
+                }, error: error, disabled: disabled, value: value, onChange: onChange, inputLabelMode: inputLabelMode, withoutHelperText: withoutHelperText, label: label, ...deepMerge(theme?.datePicker?.datePickerProps, props) }) })) }));
 };
 export default UFDatePicker;

package/dist/components/input-list/components/UFMultiCheckbox.d.ts

@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import { UseFormReturn } from 'react-hook-form';
-import { IMultiCheckboxForm } from '../type';
+import { FC } from "react";
+import { UseFormReturn } from "react-hook-form";
+import { IMultiCheckboxForm } from "../type";
 type UFMultiCheckboxProps = IMultiCheckboxForm & {
     form: UseFormReturn<any>;
     error: any;

package/dist/components/input-list/components/UFMultiCheckbox.js

@@ -1,13 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import FormControl from '@mui/material/FormControl';
-import Typography from '@mui/material/Typography';
-import { Controller } from 'react-hook-form';
-import CheckboxList from '../../checkbox-list/CheckboxList';
-const UFMultiCheckbox = ({ form, error, rules, disabled, withoutHelperText, helperText, name, options, multiple, props, itemProps, readonly, }) => {
-    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, render: ({ field }) => (_jsxs(FormControl, { sx: { display: 'flex', ...(disabled && { filter: 'contrast(0.3)' }) }, children: [_jsx(CheckboxList, { readonly: readonly, multiple: multiple, options: options, ...itemProps, ...props, ...field }), !withoutHelperText && (_jsx(Typography, { variant: 'caption3', sx: {
+import FormControl from "@mui/material/FormControl";
+import Typography from "@mui/material/Typography";
+import { Controller } from "react-hook-form";
+import CheckboxList from "../checkbox-list/CheckboxList";
+import { useFormContext } from "../../../context/FormContext";
+import { deepMerge } from "../../../methods/general";
+const UFMultiCheckbox = ({ form, error, rules, disabled, withoutHelperText, helperText, name, options, multiple, props, itemProps, }) => {
+    const { theme } = useFormContext();
+    const multiCheckboxMergedProps = deepMerge(theme?.multiCheckbox?.multiCheckboxProps, itemProps, props);
+    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, render: ({ field }) => (_jsxs(FormControl, { sx: { display: "flex", ...(disabled && { filter: "contrast(0.3)" }) }, children: [_jsx(CheckboxList, { multiple: multiple, options: options, ...field, ...multiCheckboxMergedProps }), !withoutHelperText && (_jsx(Typography, { sx: {
                         height: 23,
-                        width: 'max-content',
-                        color: error ? 'error.4' : 'text.primary',
-                    }, children: error?.message ?? helperText ?? ' ' }))] })) }));
+                        width: "max-content",
+                        color: error ? "error.4" : "text.primary",
+                    }, children: error?.message ?? helperText ?? " " }))] })) }));
 };
 export default UFMultiCheckbox;

package/dist/components/input-list/components/UFMultiSelect.d.ts

@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import { UseFormReturn } from 'react-hook-form';
-import { IMultiSelectForm } from '../type';
+import { FC } from "react";
+import { UseFormReturn } from "react-hook-form";
+import { IMultiSelectForm } from "../type";
 type Props = IMultiSelectForm & {
     form: UseFormReturn<any>;
     error: any;

package/dist/components/input-list/components/UFMultiSelect.js

@@ -1,43 +1,56 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
 //@3rd Party
-import { Controller } from 'react-hook-form';
+import { Controller } from "react-hook-form";
 //----------------------------------------------------------------------------------
 //@Mui
-import Stack from '@mui/material/Stack';
-import MenuItem from '@mui/material/MenuItem';
-import InputLabel from '@mui/material/InputLabel';
-import ListItemText from '@mui/material/ListItemText';
-import FormControl from '@mui/material/FormControl';
-import Typography from '@mui/material/Typography';
-import TextField from '@mui/material/TextField';
-const UFMultiSelect = ({ form, error, placeholder, sx, rules, disabled, name, options, defaultValue = [], readonly, props, itemProps, helperText, variant = 'outlined', withoutHelperText, inputLabelMode, label, }) => {
+import Stack from "@mui/material/Stack";
+import MenuItem from "@mui/material/MenuItem";
+import InputLabel from "@mui/material/InputLabel";
+import ListItemText from "@mui/material/ListItemText";
+import FormControl from "@mui/material/FormControl";
+import Typography from "@mui/material/Typography";
+import TextField from "@mui/material/TextField";
+import { useFormContext } from "../../../context/FormContext";
+import { deepMerge } from "../../../methods/general";
+const UFMultiSelect = ({ form, error, placeholder, rules, disabled, name, options, defaultValue, readonly, props, itemProps, helperText, variant = "outlined", withoutHelperText, inputLabelMode, label, }) => {
+    const { theme } = useFormContext();
+    const [optionValues, setOptionValues] = useState([]);
     const selectedItems = (value) => options?.find((option) => option?.value === value)?.label;
-    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, render: ({ field }) => (_jsx(_Fragment, { children: _jsxs(FormControl, { fullWidth: true, children: [placeholder && (_jsx(InputLabel, { id: 'simple-select-label', sx: {
-                            '&.MuiInputLabel-root[data-shrink=true]': { opacity: '0%' },
-                            '&.MuiInputLabel-root[data-shrink=false]': {
-                                opacity: '100%',
+    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, defaultValue: defaultValue, render: ({ field }) => (_jsx(_Fragment, { children: _jsxs(FormControl, { fullWidth: true, children: [placeholder && (_jsx(InputLabel, { id: "simple-select-label", sx: {
+                            "&.MuiInputLabel-root[data-shrink=true]": { opacity: "0%" },
+                            "&.MuiInputLabel-root[data-shrink=false]": {
+                                opacity: "100%",
                             },
-                        }, children: placeholder })), _jsx(TextField, { select: true, ...(inputLabelMode === 'static' && { hiddenLabel: true }), ...(inputLabelMode === 'relative' && { label: label }), ...field, fullWidth: true, id: name, disabled: disabled, variant: variant, error: !!error, SelectProps: {
+                        }, children: placeholder })), _jsx(TextField, { select: true, ...(inputLabelMode === "static" && { hiddenLabel: true }), ...(inputLabelMode === "relative" && { label: label }), ...field, fullWidth: true, value: optionValues, id: name, disabled: disabled, defaultValue: defaultValue, variant: variant, error: !!error, SelectProps: {
                             multiple: true,
-                            defaultValue: [defaultValue].flat(),
-                            renderValue: (selected) => (_jsx(Stack, { gap: 1, height: '100%', alignItems: 'center', direction: 'row', flexWrap: 'wrap', children: _jsx(Typography, { variant: 'caption3', children: selected
+                            value: optionValues,
+                            renderValue: (selected) => (_jsx(Stack, { gap: 1, height: "100%", alignItems: "center", direction: "row", flexWrap: "wrap", sx: {
+                                    ...(optionValues.includes(selected) && {
+                                        backgroundColor: "background.main",
+                                    }),
+                                }, children: _jsx(Typography, { children: selected
                                         .map((value) => selectedItems(value))
-                                        .join(' , ') }) })),
+                                        .join(",") }) })),
                         }, inputProps: { readOnly: readonly }, helperText: withoutHelperText
                             ? undefined
-                            : error?.message ?? helperText ?? ' ', sx: {
-                            '.MuiInputBase-root': {
+                            : error?.message ?? helperText ?? " ", sx: {
+                            ".MuiInputBase-root": {
                                 paddingRight: (theme) => theme.spacing(2),
                             },
-                            ...sx,
-                            pointerEvents: readonly ? 'none' : 'unset',
-                            backgroundColor: readonly ? 'background.paper' : 'unset',
-                            '& .MuiOutlinedInput-input.MuiSelect-select': {
-                                backgroundColor: readonly ? 'background.paper' : 'unset',
-                                color: readonly ? 'text.5' : 'unset',
-                            },
-                        }, ...props, ...itemProps, children: options?.map(({ label, value }) => {
-                            return (_jsx(MenuItem, { value: value, id: label, sx: { transition: 'all 0.2s' }, children: _jsx(ListItemText, { primary: label, color: 'red', sx: { flex: 'none', mx: '4px' }, disableTypography: true }) }, value));
+                            // ...sx,
+                            // pointerEvents: readonly ? "none" : "unset",
+                            // backgroundColor: readonly ? "background.paper" : "unset",
+                            // "& .MuiOutlinedInput-input.MuiSelect-select": {
+                            //   backgroundColor: readonly ? "background.paper" : "unset",
+                            //   color: readonly ? "text.5" : "unset",
+                            // },
+                        }, ...deepMerge(theme?.multiSelect?.multiSelectProps, itemProps, props), children: options?.map(({ label, value }) => {
+                            return (_jsx(MenuItem, { value: value, id: label, sx: { transition: "all 0.2s" }, onClick: () => {
+                                    !optionValues.includes(value)
+                                        ? setOptionValues([value, ...optionValues])
+                                        : setOptionValues(optionValues.filter((optionValue) => optionValue !== value));
+                                }, children: _jsx(ListItemText, { primary: label, color: "red", sx: { flex: "none", mx: "4px" }, disableTypography: true }) }, value));
                         }) })] }) })) }));
 };
 export default UFMultiSelect;

package/dist/components/input-list/components/UFRadio.d.ts

@@ -1,9 +1,9 @@
-import { FC } from 'react';
-import { IRadioForm } from '../type';
-import { UseFormReturn } from 'react-hook-form';
-type Props = IRadioForm & {
+import { FC } from "react";
+import { IRadioForm } from "../type";
+import { UseFormReturn } from "react-hook-form";
+type TRadioProps = IRadioForm & {
     form: UseFormReturn<any>;
     error: any;
 };
-declare const UFRadio: FC<Props>;
+declare const UFRadio: FC<TRadioProps>;
 export default UFRadio;

package/dist/components/input-list/components/UFRadio.js

@@ -1,16 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Controller } from 'react-hook-form';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-import Typography from '@mui/material/Typography';
-import RadioGroup from '@mui/material/RadioGroup';
-import Radio from '@mui/material/Radio';
-const UFRadio = ({ form, name, rules, disabled, sx, defaultValue, options, error, helperText, withoutHelperText, props, label, labelProps, inputLabelMode, }) => {
-    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, defaultValue: defaultValue, render: ({ field: { onChange, name, value } }) => (_jsxs(FormControl, { sx: { display: 'block' }, children: [inputLabelMode === 'relative' && (_jsx(Typography, { ...labelProps, children: label })), _jsx(RadioGroup, { row: true, "aria-labelledby": 'demo-row-radio-buttons-group-label', name: 'row-radio-buttons-group', onChange: onChange, value: value, sx: { gap: 5 }, children: options?.map((option) => (_jsx(FormControlLabel, { disabled: disabled, value: option.value, sx: sx, control: _jsx(Radio, { ...props, checked: value === option.value }), label: _jsx(Typography, { fontWeight: 400, fontSize: 12, ...option.labelProp, children: option.label }) }, option.value))) }), !withoutHelperText && (_jsx(Typography, { variant: 'caption3', sx: {
-                        display: 'block',
+import { Controller } from "react-hook-form";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import FormControl from "@mui/material/FormControl";
+import Typography from "@mui/material/Typography";
+import RadioGroup from "@mui/material/RadioGroup";
+import Radio from "@mui/material/Radio";
+import { useFormContext } from "../../../context/FormContext";
+import { deepMerge } from "../../../methods/general";
+const UFRadio = ({ form, name, rules, disabled, defaultValue, options, error, helperText, withoutHelperText, label, labelProps, inputLabelMode, formControlLabelProps, radioProps, itemProps, radioGroupProps }) => {
+    const { theme } = useFormContext();
+    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, defaultValue: defaultValue, render: ({ field: { onChange, value } }) => (_jsxs(FormControl, { sx: { display: "block" }, children: [inputLabelMode === "relative" && (_jsx(Typography, { ...labelProps, children: label })), _jsx(RadioGroup, { row: true, "aria-labelledby": "demo-row-radio-buttons-group-label", name: "row-radio-buttons-group", onChange: onChange, value: value, sx: { gap: 5 }, ...deepMerge(theme?.radio?.radioGroupProps, radioGroupProps), children: options?.map((option) => (_jsx(FormControlLabel, { disabled: disabled, value: option.value, control: _jsx(Radio, { ...deepMerge(theme?.radio?.radioProps, itemProps, radioProps), checked: value === option.value }), label: _jsx(Typography, { fontWeight: 400, fontSize: 12, ...option.labelProp, children: option.label }), ...deepMerge(theme?.radio?.formControlLabelProps, formControlLabelProps) }, option.value))) }), !withoutHelperText && (_jsx(Typography, { sx: {
+                        display: "block",
                         height: 23,
-                        width: 'max-content',
-                        color: error ? 'error.4' : 'text.primary',
-                    }, children: error?.message ?? helperText ?? ' ' }))] })) }));
+                        width: "max-content",
+                        color: error ? "error.4" : "text.primary",
+                    }, children: error?.message ?? helperText ?? " " }))] })) }));
 };
 export default UFRadio;

package/dist/components/input-list/components/UFSelect.d.ts

@@ -1,9 +1,9 @@
-import { FC } from 'react';
-import { UseFormReturn } from 'react-hook-form';
-import { ISelectForm } from '../type';
-type Props = ISelectForm & {
+import { FC } from "react";
+import { UseFormReturn } from "react-hook-form";
+import { ISelectForm } from "../type";
+type TSelectProps = ISelectForm & {
     form: UseFormReturn<any>;
     error: any;
 };
-declare const UFSelect: FC<Props>;
+declare const UFSelect: FC<TSelectProps>;
 export default UFSelect;

package/dist/components/input-list/components/UFSelect.js

@@ -1,27 +1,19 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import FormControl from '@mui/material/FormControl';
-import { InputLabel, TextField } from '@mui/material';
-import MenuItem from '@mui/material/MenuItem';
-import { Controller } from 'react-hook-form';
-const UFSelect = ({ form, error, sx, rules, disabled, name, options, defaultValue = '', readonly, props, itemProps, helperText, variant = 'outlined', withoutHelperText, inputLabelMode, label, placeholder, }) => {
-    const [open, setOpen] = useState(false);
-    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, defaultValue: defaultValue, render: ({ field }) => (_jsx(_Fragment, { children: _jsxs(FormControl, { fullWidth: true, variant: variant, children: [inputLabelMode === 'static' && !!placeholder && !field.value && (_jsx(InputLabel, { id: 'simple-select-label', error: !!error, sx: {
-                            top: itemProps?.size === 'small' || props?.size === 'small'
-                                ? '-6px'
-                                : 0,
-                            color: '#d3d1d1',
-                            fontSize: 14,
-                            fontWeight: 400,
-                        }, children: placeholder })), _jsx(TextField, { SelectProps: {
-                            open,
-                        }, select: true, ...field, error: !!error, value: field.value, id: name, fullWidth: true, ...(inputLabelMode === 'static' && { hiddenLabel: true }), ...(inputLabelMode === 'relative' && { label: label }), disabled: disabled, defaultValue: defaultValue, variant: variant, placeholder: 'saasdlasd', helperText: withoutHelperText
-                            ? undefined
-                            : error?.message ?? helperText ?? ' ', onClick: () => setOpen((prev) => !prev), InputProps: { readOnly: readonly }, sx: {
-                            '.MuiInputBase-root': {
-                                paddingRight: (theme) => theme.spacing(2),
-                            },
-                            ...sx,
-                        }, ...itemProps, ...props, children: options?.map((option) => (_jsx(MenuItem, { value: option.value, id: option.value, children: option.label }, option.value))) })] }) })) }));
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import FormControl from "@mui/material/FormControl";
+import { TextField } from "@mui/material";
+import MenuItem from "@mui/material/MenuItem";
+import { Controller } from "react-hook-form";
+import { useFormContext } from "../../../context/FormContext";
+import { deepMerge } from "../../../methods/general";
+const UFSelect = ({ form, error, rules, disabled, name, options, defaultValue = "", readonly, props, itemProps, helperText, variant = "outlined", withoutHelperText, inputLabelMode, label, }) => {
+    const { theme } = useFormContext() || {};
+    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, defaultValue: defaultValue, render: ({ field }) => (_jsx(_Fragment, { children: _jsx(FormControl, { fullWidth: true, variant: variant, children: _jsx(TextField, { select: true, ...field, error: !!error, value: field.value, id: name, fullWidth: true, ...inputLabelMode === "static" && { hiddenLabel: true }, ...inputLabelMode === "relative" && { label: label }, disabled: disabled, defaultValue: defaultValue, variant: variant, helperText: withoutHelperText
+                        ? undefined
+                        : error?.message ?? helperText ?? " ", InputProps: { readOnly: readonly
+                    }, sx: {
+                        ".MuiInputBase-root": {
+                            paddingRight: (theme) => theme.spacing(2),
+                        },
+                    }, ...deepMerge(theme?.select?.selectProps, itemProps, props), children: options?.map((option) => (_jsx(MenuItem, { value: option.value, id: option.value, children: option.label }, option.value))) }) }) })) }));
 };
 export default UFSelect;

package/dist/components/input-list/components/UFSwitch.js

@@ -4,11 +4,11 @@ import { Controller } from 'react-hook-form';
 import FormControl from '@mui/material/FormControl';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Typography from '@mui/material/Typography';
-const UFSwitch = ({ form, name, label, rules, disabled, sx, error, defaultValue, helperText, withoutHelperText, props, }) => {
+const UFSwitch = ({ form, name, label, rules, disabled, error, defaultValue, helperText, withoutHelperText, props, }) => {
     return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, defaultValue: defaultValue, render: ({ field: { onChange, name, value = false } }) => (_jsxs(FormControl, { sx: {
                 display: 'flex',
                 ...(disabled && { filter: 'contrast(0.3)' }),
-            }, children: [_jsx(FormControlLabel, { sx: { gap: 2, ...sx }, slotProps: {
+            }, children: [_jsx(FormControlLabel, { slotProps: {
                         typography: {
                             variant: 'caption3',
                             ...props?.slotProps?.typography,

package/dist/components/input-list/components/UFTextArea.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Controller } from 'react-hook-form';
 import TextField from '@mui/material/TextField';
-const UFTextArea = ({ form, name, type, defaultValue, sx, rules, readonly, disabled, placeholder, error, props, helperText, variant = 'outlined', withoutHelperText, inputLabelMode, label, }) => {
+import { useFormContext } from "../../../context/FormContext";
+import { deepMerge } from "../../../methods/general";
+const UFTextArea = ({ form, name, type, defaultValue, rules, readonly, disabled, placeholder, error, props, helperText, variant = 'outlined', withoutHelperText, inputLabelMode, label, }) => {
+    const { theme } = useFormContext() || {};
     return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, defaultValue: defaultValue || '', render: ({ field: { name, value } }) => (_jsx(TextField, { ...form?.register(name, {
                 ...rules,
-            }), type: type, value: value, ...(inputLabelMode === 'static' && { hiddenLabel: true }), ...(inputLabelMode === 'relative' && { label: label }), fullWidth: true, multiline: true, rows: 3, id: name, error: !!error, placeholder: placeholder, helperText: withoutHelperText ? undefined : error?.message ?? helperText ?? ' ', sx: sx, "aria-readonly": readonly, disabled: disabled, variant: variant, inputProps: { readOnly: readonly }, ...props })) }));
+            }), type: type, value: value, ...(inputLabelMode === 'static' && { hiddenLabel: true }), ...(inputLabelMode === 'relative' && { label: label }), fullWidth: true, multiline: true, rows: 3, id: name, error: !!error, placeholder: placeholder, helperText: withoutHelperText ? undefined : error?.message ?? helperText ?? ' ', "aria-readonly": readonly, disabled: disabled, variant: variant, inputProps: { readOnly: readonly }, ...deepMerge(theme?.textArea?.textAreaProps, props) })) }));
 };
 export default UFTextArea;

package/dist/components/input-list/components/UFTextField.d.ts

@@ -1,9 +1,11 @@
-import { FC } from 'react';
-import { UseFormReturn } from 'react-hook-form';
-import { ITextFieldForm } from '../type';
+import { FC } from "react";
+import { UseFormReturn } from "react-hook-form";
+import { ITextFieldForm } from "../type";
 type Props = ITextFieldForm & {
     form: UseFormReturn<any>;
     error: any;
 };
+export declare const p2e: (s: string) => boolean;
+export declare const checkIfNumber: (value: string) => boolean;
 declare const UFTextField: FC<Props>;
 export default UFTextField;

package/dist/components/input-list/components/UFTextField.js

@@ -1,52 +1,29 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Controller } from 'react-hook-form';
-import TextField from '@mui/material/TextField';
-import SvgEye from '../../../icons/Eye';
-import SvgEyeSlash from '../../../icons/EyeSlash';
-import IconButton from '@mui/material/IconButton';
-const UFTextField = ({ form, name, type, defaultValue, label, sx, rules, readonly, disabled, placeholder, error, itemProps, props, helperText, variant = 'outlined', withoutHelperText, inputLabelMode, }) => {
+import { Controller } from "react-hook-form";
+import TextField from "@mui/material/TextField";
+import { useFormContext } from '../../../context/FormContext';
+import { deepMerge } from '../../../methods/general';
+export const p2e = (s) => /^[0-9 | \u06F0-\u06F9\s][.\d | \u06F0-\u06F9\s]*(,\d+)?$/g.test(s);
+export const checkIfNumber = (value) => {
+    const charLength = value.length;
+    return !charLength || p2e(value);
+};
+const UFTextField = ({ form, name, type = 'text', defaultValue, label, rules, readonly, disabled, placeholder, error, itemProps, props, helperText, variant = "outlined", withoutHelperText, inputLabelMode, }) => {
+    const { theme } = useFormContext();
+    const themeProp = theme?.[type];
+    const textFieldMergedProps = deepMerge(themeProp, itemProps, props);
     const handleKeyDown = (e, onChange) => {
         const value = e?.target?.value;
-        const checkFirstLetter = value === '';
-        const numberTypeValidation = type === 'number' && !checkFirstLetter && !/^-?\d*\.?\d*$/.test(value);
-        const emailTypeValidation = type === 'email' && !checkFirstLetter && !/^[a-zA-Z0-9.@-]*$/.test(value);
-        if (numberTypeValidation || emailTypeValidation) {
+        if (type === "number" &&
+            !checkIfNumber(value)) {
             e.preventDefault();
         }
         else {
             onChange(value);
         }
     };
-    const [inputType, setInputType] = useState(type);
-    const toggleInputMode = () => {
-        if (inputType === 'password') {
-            setInputType('text');
-        }
-        else {
-            setInputType('password');
-        }
-    };
-    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, defaultValue: defaultValue || '', render: ({ field }) => (_jsx(TextField, { ...form?.register(name, {
+    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, defaultValue: defaultValue || "", render: ({ field }) => (_jsx(TextField, { ...form?.register(name, {
                 ...rules,
-            }), ...(inputLabelMode === 'static' && { hiddenLabel: true }), ...(inputLabelMode === 'relative' && { label: label }), value: field.value, variant: variant, type: inputType === 'number' ? 'text' : inputType, fullWidth: true, id: name, error: !!error, placeholder: placeholder, onChange: (e) => handleKeyDown(e, field.onChange), sx: [...(Array.isArray(sx) ? sx : [sx]), {}], helperText: withoutHelperText ? undefined : error?.message ?? helperText ?? ' ', ...(type === 'email' && {
-                InputProps: {
-                    sx: {
-                        input: {
-                            direction: (theme) => theme.direction === 'rtl'
-                                ? 'rtl !important'
-                                : 'ltr !important',
-                            // textAlign: (theme) =>
-                            //   theme.direction === 'rtl'
-                            //     ? 'right !important'
-                            //     : 'left !important',
-                        },
-                    },
-                },
-            }), ...(type === 'password' && {
-                InputProps: {
-                    endAdornment: (_jsx(IconButton, { onClick: toggleInputMode, sx: { mr: -2 }, children: inputType === 'password' ? (_jsx(SvgEye, { primarycolor: 'inherit' })) : (_jsx(SvgEyeSlash, { primarycolor: 'inherit' })) })),
-                },
-            }), "aria-readonly": readonly, disabled: disabled, inputProps: { readOnly: readonly }, ...itemProps, ...props })) }));
+            }), ...(inputLabelMode === "static" && { hiddenLabel: true }), ...(inputLabelMode === "relative" && { label: label }), value: field.value, variant: variant, type: type === "number" ? "text" : type, fullWidth: true, id: name, error: !!error, placeholder: placeholder, onChange: (e) => handleKeyDown(e, field.onChange), helperText: withoutHelperText ? undefined : error?.message ?? helperText ?? " ", "aria-readonly": readonly, disabled: disabled, inputProps: { readOnly: readonly }, ...textFieldMergedProps })) }));
 };
 export default UFTextField;

package/dist/components/input-list/components/UFUploader.d.ts

@@ -1,6 +1,6 @@
-import { FC } from 'react';
-import { IUploaderForm } from '../type';
-import { UseFormReturn } from 'react-hook-form';
+import { FC } from "react";
+import { IUploaderForm } from "../type";
+import { UseFormReturn } from "react-hook-form";
 type UFUploaderProps = IUploaderForm & {
     form: UseFormReturn<any>;
     error: any;

package/dist/components/input-list/components/UFUploader.js

@@ -1,16 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Controller } from 'react-hook-form';
-import FormControl from '@mui/material/FormControl';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import CustomUploader from '../../custom-uploader/CustomUploader';
-const UFUploader = ({ form, error, itemProps, props, rules, disabled, multiple, name, withoutHelperText, helperText, onDelete, wrapperProps, }) => {
-    const handleChange = (addedFiles, addedPreview) => {
+import { Controller } from "react-hook-form";
+import FormControl from "@mui/material/FormControl";
+import Typography from "@mui/material/Typography";
+import CustomUploader from "../../custom-uploader/CustomUploader";
+import Box from "@mui/material/Box";
+import { useFormContext } from '../../../context/FormContext';
+import { deepMerge } from '../../../methods/general';
+const UFUploader = ({ form, error, itemProps, props, rules, disabled, multiple, name, withoutHelperText, helperText, onDelete, }) => {
+    const { theme } = useFormContext();
+    const uploaderMergedProps = deepMerge(theme?.uploader?.uploaderProps, itemProps, props);
+    const handleChange = (addedFiles) => {
         const files = form.getValues(name)?.files || [];
         const previews = form.getValues(name)?.preview || [];
         for (let i = 0; i < addedFiles.length; i++) {
             const file = addedFiles[i];
-            if (!files || files?.findIndex((f) => f.name === file.name) < 0) {
+            if (!files || files?.findIndex(f => f.name === file.name) < 0) {
                 files?.push(file);
                 previews.push(URL.createObjectURL(file));
             }
@@ -21,19 +25,17 @@ const UFUploader = ({ form, error, itemProps, props, rules, disabled, multiple,
         });
     };
     const handleDelete = (index) => {
+        console.log('index', index);
         const files = form.getValues(name)?.files;
         const preview = form.getValues(name)?.preview;
         const newFiles = files?.filter((_, i) => i !== index);
         const newPreview = preview?.filter((_, i) => i !== index);
-        form.setValue(name, !!newPreview?.length
-            ? { files: newFiles, preview: newPreview }
-            : null);
+        form.setValue(name, { files: newFiles, preview: newPreview });
     };
-    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, render: ({ field: { name, value, onBlur } }) => (_jsxs(FormControl, { sx: { display: 'flex', ...(disabled && { filter: 'contrast(0.3)' }) }, children: [_jsxs(Box, { display: 'flex', gap: 2, ...wrapperProps, children: [_jsx(CustomUploader, { multiple: multiple, link: !multiple ? value?.preview?.[0] : undefined, ...props, ...itemProps, inputProps: { name, disabled, onBlur }, onChange: handleChange, onDeleteDocument: onDelete ? () => onDelete(0) : () => handleDelete(0) }), multiple &&
-                            value?.preview?.map((preview, i) => (_jsx(CustomUploader, { multiple: multiple, ...props, ...itemProps, link: preview, inputProps: { name, disabled, onBlur }, onChange: handleChange, onDeleteDocument: onDelete ? () => onDelete(i) : () => handleDelete(i) })))] }), !withoutHelperText && (_jsx(Typography, { sx: {
+    return (_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, render: ({ field: { name, value, onBlur } }) => (_jsxs(FormControl, { sx: { display: "flex", ...(disabled && { filter: "contrast(0.3)" }) }, children: [_jsxs(Box, { display: "flex", gap: 2, children: [(multiple || !value?.files?.length) && (_jsx(CustomUploader, { multiple: multiple, ...uploaderMergedProps, inputProps: { name, disabled, onBlur }, onChange: handleChange })), value?.preview?.map((preview, i) => (_jsx(CustomUploader, { multiple: multiple, ...uploaderMergedProps, link: preview, inputProps: { name, disabled, onBlur }, onChange: handleChange, onDeleteDocument: onDelete ? () => onDelete(i) : () => handleDelete(i) })))] }), !withoutHelperText && (_jsx(Typography, { sx: {
                         height: 23,
-                        width: 'max-content',
-                        color: error ? 'error.4' : 'text.primary',
-                    }, children: error?.message ?? helperText ?? ' ' }))] })) }));
+                        width: "max-content",
+                        color: error ? "error.4" : "text.primary",
+                    }, children: error?.message ?? helperText ?? " " }))] })) }));
 };
 export default UFUploader;

package/dist/context/FormContext.d.ts

@@ -0,0 +1,16 @@
+import { FC, ReactNode } from "react";
+import { TFormTheme } from "../components/input-list/type";
+export interface ICustomInputs {
+}
+interface InputContextType {
+    customInputs?: ICustomInputs[];
+    theme?: TFormTheme;
+}
+export interface IFormProvider {
+    children: ReactNode;
+    customInputs?: ICustomInputs[];
+    theme?: TFormTheme;
+}
+declare const FormProvider: FC<IFormProvider>;
+export declare const useFormContext: () => InputContextType;
+export default FormProvider;

package/dist/context/FormContext.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const FormContext = createContext(undefined);
+const FormProvider = ({ children, customInputs, theme, }) => {
+    return (_jsx(FormContext.Provider, { value: { customInputs, theme }, children: children }));
+};
+export const useFormContext = () => useContext(FormContext) || {};
+export default FormProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-design-system",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.js",