mui-custom-form 1.1.7 → 1.1.9

package/README.md

@@ -63,44 +63,34 @@ npm install mui-custom-form
 | `span`       | Grid span for the field (1-12).             | **No**           |
 | `component`  | Custom React component for the field.       | *Conditional*    |
 
-> **Notes**: 
+> **Notes**:
 > - The `list` prop is **required** when the `type` is `single-select`, `multi-select`, `checkbox-group`, or `radio-group`.
 > - The `component` prop is **required** when the `type` is `custom`.
+> - The `fileInputComponent` prop is **optional** when the `type` is `file`. It allows you to provide a custom React component or element to serve as the clickable area for the file input. If not provided, a default clickable area will be rendered.
 
-### 🧩 Custom Components
-
-To integrate custom components into your forms, ensure they adhere to the `CustomComponentProps` interface, which requires `value` and `onChange` props.
-
-```typescript
-export interface CustomComponentProps {
-  value: any;
-  onChange: (value: any) => void;
-  [key: string]: any; // Allow additional props
-}
-```
-
-**Example of a Custom Component:**
+**Example of `fileInputComponent` usage:**
 
 ```tsx
-// CustomComponents.tsx
-import React from "react";
-import { TextField } from "@mui/material";
-import { CustomComponentProps } from "./types";
-
-export const CustomTextComponent: React.FC<CustomComponentProps> = ({
-  value,
-  onChange,
-  placeholder,
-}) => {
-  return (
-    <TextField
-      value={value || ""}
-      onChange={(e) => onChange(e.target.value)}
-      placeholder={placeholder}
-      fullWidth
-    />
-  );
-};
+import { Button } from "@mui/material";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+
+// ... inside your fieldsGroups configuration
+{
+  label: "Upload Document",
+  name: "document",
+  type: "file",
+  fileInputComponent: (
+    <Button
+      variant="contained"
+      component="span" // Important: This makes the Button act as a span, allowing the hidden input to be clicked
+      startIcon={<CloudUploadIcon />}
+    >
+      Upload File
+    </Button>
+  ),
+  required: false,
+  span: 6,
+}
 ```
 
 ## 📖 Examples
@@ -278,210 +268,6 @@ const FormWithZod = () => {
 export default FormWithZod;
 ```
 
-### Comprehensive Example with All Field Types
-
-An extensive example showcasing all supported field types, customizable input props, and custom components.
-
-```tsx
-// ComprehensiveForm.tsx
-import React from "react";
-import { useForm } from "react-hook-form";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { z } from "zod";
-import { Container, Typography, ButtonProps } from "@mui/material";
-import { CustomForm } from "mui-custom-form";
-import { IFieldGroup } from "mui-custom-form/types";
-import {
-  CustomTextComponent,
-  DateRangePickerComponent,
-} from "./CustomComponents"; // Ensure correct import path
-
-const GENDERS = ["Male", "Female", "Other"] as const;
-const HOBBIES = ["Coding", "Collections", "Hiking"] as const;
-
-const Fields = z.object({
-  username: z.string().min(1, "Username is required"),
-  password: z.string().min(6, "Password must be at least 6 characters"),
-  bio: z.string().optional(),
-  subscribe: z.boolean().optional(),
-  age: z
-    .number({
-      required_error: "Age is required",
-      invalid_type_error: "Age must be a number",
-    })
-    .min(16, "Minimum age is 16")
-    .max(80, "Maximum age is 80"),
-  gender: z.enum(GENDERS, { required_error: "Gender is required" }),
-  hobbies: z
-    .array(z.enum(HOBBIES), { required_error: "Hobbies are required" })
-    .nonempty("Please choose at least one hobby"),
-  birthDate: z.date({ required_error: "Birthdate is required" }),
-  file: z.instanceof(File).optional(),
-  customField: z.string().optional(),
-  eventDates: z
-    .tuple([z.date().nullable(), z.date().nullable()])
-    .optional(),
-});
-
-type FieldTypes = z.infer<typeof Fields>;
-
-const ComprehensiveForm = () => {
-  const formControl = useForm<FieldTypes>({
-    resolver: zodResolver(Fields),
-    defaultValues: {
-      subscribe: false,
-      hobbies: [],
-      eventDates: [null, null],
-    },
-  });
-
-  const fieldsGroups: IFieldGroup<FieldTypes> = [
-    [
-      {
-        label: "Username",
-        name: "username",
-        type: "text",
-        required: true,
-        otherProps: { placeholder: "Enter your username" },
-        span: 6,
-      },
-      {
-        label: "Password",
-        name: "password",
-        type: "password",
-        required: true,
-        otherProps: { placeholder: "Enter your password" },
-        span: 6,
-      },
-    ],
-    [
-      {
-        label: "Bio",
-        name: "bio",
-        type: "textarea",
-        required: false,
-        otherProps: { rows: 5, placeholder: "Tell us about yourself" },
-        span: 12,
-      },
-    ],
-    [
-      {
-        label: "Subscribe to Newsletter",
-        name: "subscribe",
-        type: "switch",
-        required: false,
-        otherProps: { color: "primary" },
-        span: 6,
-      },
-    ],
-    [
-      {
-        label: "Age",
-        name: "age",
-        type: "number",
-        required: true,
-        otherProps: { min: 16, max: 80 },
-        span: 6,
-      },
-      {
-        label: "Gender",
-        name: "gender",
-        type: "radio-group",
-        list: GENDERS.map((gender) => ({
-          label: gender,
-          value: gender,
-        })),
-        required: true,
-        otherProps: { row: true },
-        span: 6,
-      },
-    ],
-    [
-      {
-        label: "Hobbies",
-        name: "hobbies",
-        type: "checkbox-group",
-        list: HOBBIES.map((hobby) => ({ label: hobby, value: hobby })),
-        required: true,
-        span: 6,
-      },
-      {
-        label: "Birthdate",
-        name: "birthDate",
-        type: "date",
-        required: true,
-        span: 6,
-      },
-    ],
-    [
-      {
-        label: "Event Dates",
-        name: "eventDates",
-        type: "custom",
-        component: DateRangePickerComponent,
-        required: false,
-        span: 6,
-      },
-      {
-        label: "Upload Image",
-        name: "file",
-        type: "file",
-        required: false,
-        span: 6,
-      },
-    ],
-    [
-      {
-        label: "Custom Text Field",
-        name: "customField",
-        type: "custom",
-        component: CustomTextComponent,
-        required: false,
-        otherProps: { placeholder: "Custom input here" },
-        span: 12,
-      },
-    ],
-  ];
-
-  const onSubmit = (data: FieldTypes) => {
-    console.log({ success: data });
-  };
-
-  const submitError = (errors: any) => {
-    console.log({ errors });
-  };
-
-  const submitButtonProps: ButtonProps = {
-    variant: "contained",
-    color: "primary",
-  };
-
-  const resetButtonProps: ButtonProps = {
-    variant: "outlined",
-    color: "secondary",
-  };
-
-  return (
-    <Container maxWidth="md" sx={{ mt: 4, mb: 4 }}>
-      <Typography variant="h4" gutterBottom>
-        Comprehensive Form
-      </Typography>
-      <CustomForm
-        fieldsGroups={fieldsGroups}
-        onSubmit={[onSubmit, submitError]}
-        formControl={formControl}
-        submitButton={submitButtonProps}
-        resetButton={resetButtonProps}
-        actionButtonsPlacement="flex-end"
-        otherProps={{ spacing: 2 }}
-      />
-    </Container>
-  );
-};
-
-export default ComprehensiveForm;
-```
-
 ## 🤝 Contribution
 
 Your contributions are always welcome! Whether it's reporting bugs, suggesting features, or submitting pull requests, we appreciate your support in making `CustomForm` better for everyone.

package/dist/CustomForm.d.ts

@@ -2,3 +2,4 @@ import React from "react";
 import { FieldValues } from "react-hook-form";
 import { ICustomForm } from "./types";
 export declare const CustomForm: <T extends FieldValues>({ fieldsGroups, onSubmit, formControl, submitButton, resetButton, actionButtonsPlacement, layout, otherProps, }: ICustomForm<T>) => React.JSX.Element;
+export default CustomForm;

package/dist/CustomForm.js

@@ -1,99 +1,40 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CustomForm = void 0;
-// CustomForm.tsx
-const material_1 = require("@mui/material");
-const x_date_pickers_1 = require("@mui/x-date-pickers");
-const react_1 = __importDefault(require("react"));
-const react_hook_form_1 = require("react-hook-form");
-const CustomForm = ({ fieldsGroups, onSubmit, formControl, submitButton = true, resetButton, actionButtonsPlacement, layout, otherProps, }) => {
-    const { control, setValue, reset } = formControl;
+import { Button, Grid, Stack } from "@mui/material";
+import React from "react";
+// Import modularized field components
+import { TextField } from "./components/fields/TextField";
+import { TextareaField } from "./components/fields/TextareaField";
+import { SelectField } from "./components/fields/SelectField";
+import { DateField } from "./components/fields/DateField";
+import { FileField } from "./components/fields/FileField";
+import { SwitchField } from "./components/fields/SwitchField";
+import { CheckboxGroupField } from "./components/fields/CheckboxGroupField";
+import { RadioGroupField } from "./components/fields/RadioGroupField";
+import { CustomField as CustomComponentField } from "./components/fields/CustomField";
+export const CustomForm = ({ fieldsGroups, onSubmit, formControl, submitButton = true, resetButton, actionButtonsPlacement, layout, otherProps, }) => {
+    const { control, reset } = formControl;
     const renderField = (field) => {
         switch (field.type) {
             case "text":
             case "number":
             case "password":
-                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => (react_1.default.createElement(material_1.TextField, Object.assign({}, controlField, { value: controlField.value || "" }, field.otherProps, { label: field.label, type: field.type, fullWidth: true, required: field.required, error: !!error, helperText: error === null || error === void 0 ? void 0 : error.message, onChange: (e) => {
-                            if (!e.target.value)
-                                return controlField.onChange(undefined);
-                            controlField.onChange(field.type === "number"
-                                ? parseFloat(e.target.value)
-                                : e.target.value);
-                        } }))) }));
+                return React.createElement(TextField, { field: field, formControl: formControl });
             case "textarea":
-                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => {
-                        var _a;
-                        return (react_1.default.createElement(material_1.TextField, Object.assign({}, controlField, { value: controlField.value || "" }, field.otherProps, { label: field.label, type: "text", fullWidth: true, required: field.required, multiline: true, rows: ((_a = field.otherProps) === null || _a === void 0 ? void 0 : _a.rows) || 4, error: !!error, helperText: error === null || error === void 0 ? void 0 : error.message, onChange: controlField.onChange })));
-                    } }));
+                return React.createElement(TextareaField, { field: field, formControl: formControl });
             case "single-select":
             case "multi-select":
-                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => {
-                        var _a;
-                        return (react_1.default.createElement(material_1.FormControl, { fullWidth: true, error: !!error },
-                            react_1.default.createElement(material_1.InputLabel, { required: field.required }, field.label),
-                            react_1.default.createElement(material_1.Select, Object.assign({ label: field.label }, controlField, { value: controlField.value ||
-                                    (field.type === "multi-select" ? [] : "") }, field.otherProps, { multiple: field.type === "multi-select" }), (_a = field.list) === null || _a === void 0 ? void 0 : _a.map((item) => (react_1.default.createElement(material_1.MenuItem, { key: item.value, value: item.value }, item.label)))),
-                            error && react_1.default.createElement(material_1.FormHelperText, null, error.message)));
-                    } }));
+                return React.createElement(SelectField, { field: field, formControl: formControl });
             case "date":
-                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => (react_1.default.createElement(x_date_pickers_1.DatePicker, Object.assign({}, controlField, { value: controlField.value || null }, field.otherProps, { label: field.label, onChange: (date) => controlField.onChange(date), renderInput: (params) => (react_1.default.createElement(material_1.TextField, Object.assign({}, params, { required: field.required, error: !!error, helperText: error === null || error === void 0 ? void 0 : error.message, fullWidth: true }))) }))) }));
+                return React.createElement(DateField, { field: field, formControl: formControl });
             case "file":
-                return (react_1.default.createElement(material_1.FormControl, { fullWidth: true, error: !!field.required },
-                    react_1.default.createElement(material_1.FormLabel, { component: "legend", required: field.required }, field.label),
-                    react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(material_1.Box, Object.assign({ component: "label" }, field.otherProps),
-                            field.component,
-                            react_1.default.createElement("input", { type: "file", hidden: true, onChange: (e) => {
-                                    const fileValue = e.target.files && e.target.files.length > 0
-                                        ? e.target.files
-                                        : undefined;
-                                    setValue(field.name, fileValue);
-                                } })))));
+                return React.createElement(FileField, { field: field, formControl: formControl });
             case "switch":
-                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => (react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.Switch, Object.assign({}, controlField, { checked: !!controlField.value, onChange: (e) => controlField.onChange(e.target.checked) }, field.otherProps)), label: field.label })) }));
+                return React.createElement(SwitchField, { field: field, formControl: formControl });
             case "checkbox-group":
-                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => {
-                        var _a;
-                        return (react_1.default.createElement(material_1.FormControl, { component: "fieldset", error: !!error },
-                            react_1.default.createElement(material_1.FormLabel, { component: "legend", required: field.required }, field.label),
-                            react_1.default.createElement(material_1.Stack, { direction: "row", spacing: 2 }, (_a = field.list) === null || _a === void 0 ? void 0 : _a.map((option) => {
-                                var _a;
-                                return (react_1.default.createElement(material_1.FormControlLabel, { key: option.value, control: react_1.default.createElement(material_1.Checkbox, Object.assign({ checked: ((_a = controlField.value) === null || _a === void 0 ? void 0 : _a.includes(option.value)) || false, onChange: (e) => {
-                                            const checked = e.target.checked;
-                                            const value = option.value;
-                                            if (checked) {
-                                                controlField.onChange([
-                                                    ...(controlField.value || []),
-                                                    value,
-                                                ]);
-                                            }
-                                            else {
-                                                controlField.onChange((controlField.value || []).filter((v) => v !== value));
-                                            }
-                                        } }, field.otherProps)), label: option.label }));
-                            })),
-                            error && react_1.default.createElement(material_1.FormHelperText, null, error.message)));
-                    } }));
+                return React.createElement(CheckboxGroupField, { field: field, formControl: formControl });
             case "radio-group":
-                return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => {
-                        var _a, _b;
-                        return (react_1.default.createElement(material_1.FormControl, { component: "fieldset", error: !!error },
-                            react_1.default.createElement(material_1.FormLabel, { component: "legend", required: field.required }, field.label),
-                            react_1.default.createElement(material_1.RadioGroup, Object.assign({}, controlField, { value: controlField.value || "", onChange: (e) => controlField.onChange(e.target.value), row: ((_a = field.otherProps) === null || _a === void 0 ? void 0 : _a.row) || false }), (_b = field.list) === null || _b === void 0 ? void 0 : _b.map((option) => (react_1.default.createElement(material_1.FormControlLabel, { key: option.value, value: option.value, control: react_1.default.createElement(material_1.Radio, Object.assign({}, field.otherProps)), label: option.label })))),
-                            error && react_1.default.createElement(material_1.FormHelperText, null, error.message)));
-                    } }));
+                return React.createElement(RadioGroupField, { field: field, formControl: formControl });
             case "custom":
-                if (field.component) {
-                    const CustomComponent = field.component;
-                    return (react_1.default.createElement(react_hook_form_1.Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => (react_1.default.createElement(material_1.FormControl, { fullWidth: true, error: !!error },
-                            react_1.default.createElement(material_1.FormLabel, { component: "legend", required: field.required }, field.label),
-                            react_1.default.createElement(CustomComponent, Object.assign({ value: controlField.value, onChange: controlField.onChange }, field.otherProps)),
-                            error && react_1.default.createElement(material_1.FormHelperText, null, error.message))) }));
-                }
-                return null;
+                return React.createElement(CustomComponentField, { field: field, formControl: formControl });
             default:
                 return null;
         }
@@ -108,18 +49,18 @@ const CustomForm = ({ fieldsGroups, onSubmit, formControl, submitButton = true,
         const calculatedSpan = autoSpanFields > 0 ? Math.floor(remainingSpan / autoSpanFields) : 12;
         return { calculatedSpan, autoSpanFields };
     };
-    return (react_1.default.createElement(material_1.Stack, Object.assign({ component: "form", onSubmit: formControl.handleSubmit(onSubmit[0], onSubmit[1]), noValidate: true, direction: layout }, otherProps, { spacing: 3 }),
+    return (React.createElement(Stack, { component: "form", onSubmit: formControl.handleSubmit(onSubmit[0], onSubmit[1]), noValidate: true, direction: layout, ...otherProps, spacing: 3 },
         fieldsGroups.map((fields, rowIndex) => {
             const { calculatedSpan, autoSpanFields } = calculateSpan(fields);
-            return (react_1.default.createElement(material_1.Grid, { container: true, key: rowIndex, spacing: 2 }, fields.map((field, fieldIndex) => (react_1.default.createElement(material_1.Grid, { key: fieldIndex, size: field.span
+            return (React.createElement(Grid, { container: true, key: rowIndex, spacing: 2 }, fields.map((field, fieldIndex) => (React.createElement(Grid, { key: fieldIndex, size: field.span
                     ? field.span
                     : autoSpanFields > 0
                         ? calculatedSpan
                         : 12 }, renderField(field))))));
         }),
-        react_1.default.createElement(material_1.Stack, { direction: "row", justifyContent: actionButtonsPlacement || "flex-end", spacing: 2 },
-            resetButton && (react_1.default.createElement(material_1.Button, Object.assign({ type: "reset", variant: "contained", onClick: () => reset() }, resetButtonProps), "Reset")),
-            submitButton && (react_1.default.createElement(material_1.Button, Object.assign({ type: "submit", variant: "contained" }, submitButtonProps), "Submit")))));
+        React.createElement(Stack, { direction: "row", justifyContent: actionButtonsPlacement || "flex-end", spacing: 2 },
+            resetButton && (React.createElement(Button, { type: "reset", variant: "contained", onClick: () => reset(), ...resetButtonProps }, "Reset")),
+            submitButton && (React.createElement(Button, { type: "submit", variant: "contained", ...submitButtonProps }, "Submit")))));
 };
-exports.CustomForm = CustomForm;
+export default CustomForm;
 //# sourceMappingURL=CustomForm.js.map

package/dist/components/fields/CheckboxGroupField.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FieldValues, Path, UseFormReturn } from "react-hook-form";
+import { ICheckboxGroupField } from "../../types";
+interface CheckboxGroupFieldProps<T extends FieldValues> {
+    field: ICheckboxGroupField<Path<T>>;
+    formControl: UseFormReturn<T>;
+}
+export declare const CheckboxGroupField: <T extends FieldValues>({ field, formControl, }: CheckboxGroupFieldProps<T>) => React.JSX.Element;
+export {};

package/dist/components/fields/CheckboxGroupField.js

@@ -0,0 +1,23 @@
+import { Checkbox, FormControl, FormControlLabel, FormHelperText, FormLabel, Stack, } from "@mui/material";
+import React from "react";
+import { Controller } from "react-hook-form";
+export const CheckboxGroupField = ({ field, formControl, }) => {
+    const { control } = formControl;
+    return (React.createElement(Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => (React.createElement(FormControl, { component: "fieldset", error: !!error },
+            React.createElement(FormLabel, { component: "legend", required: field.required }, field.label),
+            React.createElement(Stack, { direction: "row", spacing: 2 }, field.list?.map((option) => (React.createElement(FormControlLabel, { key: option.value, control: React.createElement(Checkbox, { checked: controlField.value?.includes(option.value) || false, onChange: (e) => {
+                        const checked = e.target.checked;
+                        const value = option.value;
+                        if (checked) {
+                            controlField.onChange([
+                                ...(controlField.value || []),
+                                value,
+                            ]);
+                        }
+                        else {
+                            controlField.onChange((controlField.value || []).filter((v) => v !== value));
+                        }
+                    }, ...field.otherProps }), label: option.label })))),
+            error && React.createElement(FormHelperText, null, error.message))) }));
+};
+//# sourceMappingURL=CheckboxGroupField.js.map

package/dist/components/fields/CheckboxGroupField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxGroupField.js","sourceRoot":"","sources":["../../../src/components/fields/CheckboxGroupField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,KAAK,GACN,MAAM,eAAe,CAAA;AACtB,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAoC,MAAM,iBAAiB,CAAA;AAQ9E,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAwB,EACxD,KAAK,EACL,WAAW,GACgB,EAAE,EAAE;IAC/B,MAAM,EAAE,OAAO,EAAE,GAAG,WAAW,CAAA;IAE/B,OAAO,CACL,oBAAC,UAAU,IACT,IAAI,EAAE,KAAK,CAAC,IAAe,EAC3B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EACnC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,CAC1D,oBAAC,WAAW,IAAC,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,CAAC,CAAC,KAAK;YAC9C,oBAAC,SAAS,IAAC,SAAS,EAAC,QAAQ,EAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACnD,KAAK,CAAC,KAAK,CACF;YACZ,oBAAC,KAAK,IAAC,SAAS,EAAC,KAAK,EAAC,OAAO,EAAE,CAAC,IAC9B,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC3B,oBAAC,gBAAgB,IACf,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,OAAO,EACL,oBAAC,QAAQ,IACP,OAAO,EACL,YAAY,CAAC,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,KAAK,EAErD,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;wBACd,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAA;wBAChC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;wBAC1B,IAAI,OAAO,EAAE,CAAC;4BACZ,YAAY,CAAC,QAAQ,CAAC;gCACpB,GAAG,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE,CAAC;gCAC7B,KAAK;6BACN,CAAC,CAAA;wBACJ,CAAC;6BAAM,CAAC;4BACN,YAAY,CAAC,QAAQ,CACnB,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,MAAM,CAC/B,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,KAAK,KAAK,CACxB,CACF,CAAA;wBACH,CAAC;oBACH,CAAC,KACG,KAAK,CAAC,UAAU,GACpB,EAEJ,KAAK,EAAE,MAAM,CAAC,KAAK,GACnB,CACH,CAAC,CACI;YACP,KAAK,IAAI,oBAAC,cAAc,QAAE,KAAK,CAAC,OAAO,CAAkB,CAC9C,CACf,GACD,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/components/fields/CustomField.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FieldValues, Path, UseFormReturn } from "react-hook-form";
+import { ICustomComponentField } from "../../types";
+interface CustomFieldProps<T extends FieldValues> {
+    field: ICustomComponentField<Path<T>>;
+    formControl: UseFormReturn<T>;
+}
+export declare const CustomField: <T extends FieldValues>({ field, formControl, }: CustomFieldProps<T>) => React.JSX.Element;
+export {};

package/dist/components/fields/CustomField.js

@@ -0,0 +1,12 @@
+import { FormControl, FormHelperText, FormLabel } from "@mui/material";
+import React from "react";
+import { Controller } from "react-hook-form";
+export const CustomField = ({ field, formControl, }) => {
+    const { control } = formControl;
+    const CustomComponent = field.component;
+    return (React.createElement(Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => (React.createElement(FormControl, { fullWidth: true, error: !!error },
+            React.createElement(FormLabel, { component: "legend", required: field.required }, field.label),
+            React.createElement(CustomComponent, { value: controlField.value, onChange: controlField.onChange, ...field.otherProps }),
+            error && React.createElement(FormHelperText, null, error.message))) }));
+};
+//# sourceMappingURL=CustomField.js.map

package/dist/components/fields/CustomField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomField.js","sourceRoot":"","sources":["../../../src/components/fields/CustomField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACtE,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAoC,MAAM,iBAAiB,CAAA;AAQ9E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAwB,EACjD,KAAK,EACL,WAAW,GACS,EAAE,EAAE;IACxB,MAAM,EAAE,OAAO,EAAE,GAAG,WAAW,CAAA;IAC/B,MAAM,eAAe,GAAG,KAAK,CAAC,SAAS,CAAA;IAEvC,OAAO,CACL,oBAAC,UAAU,IACT,IAAI,EAAE,KAAK,CAAC,IAAe,EAC3B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EACnC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,CAC1D,oBAAC,WAAW,IAAC,SAAS,QAAC,KAAK,EAAE,CAAC,CAAC,KAAK;YACnC,oBAAC,SAAS,IAAC,SAAS,EAAC,QAAQ,EAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACnD,KAAK,CAAC,KAAK,CACF;YACZ,oBAAC,eAAe,IACd,KAAK,EAAE,YAAY,CAAC,KAAK,EACzB,QAAQ,EAAE,YAAY,CAAC,QAAQ,KAC3B,KAAK,CAAC,UAAU,GACpB;YACD,KAAK,IAAI,oBAAC,cAAc,QAAE,KAAK,CAAC,OAAO,CAAkB,CAC9C,CACf,GACD,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/components/fields/DateField.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FieldValues, Path, UseFormReturn } from "react-hook-form";
+import { IDateField } from "../../types";
+interface DateFieldProps<T extends FieldValues> {
+    field: IDateField<Path<T>>;
+    formControl: UseFormReturn<T>;
+}
+export declare const DateField: <T extends FieldValues>({ field, formControl, }: DateFieldProps<T>) => React.JSX.Element;
+export {};

package/dist/components/fields/DateField.js

@@ -0,0 +1,9 @@
+import { TextField as MuiTextField } from "@mui/material";
+import { DatePicker } from "@mui/x-date-pickers";
+import React from "react";
+import { Controller } from "react-hook-form";
+export const DateField = ({ field, formControl, }) => {
+    const { control } = formControl;
+    return (React.createElement(Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => (React.createElement(DatePicker, { ...controlField, value: controlField.value || null, ...field.otherProps, label: field.label, onChange: (date) => controlField.onChange(date), renderInput: (params) => (React.createElement(MuiTextField, { ...params, required: field.required, error: !!error, helperText: error?.message, fullWidth: true })) })) }));
+};
+//# sourceMappingURL=DateField.js.map

package/dist/components/fields/DateField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateField.js","sourceRoot":"","sources":["../../../src/components/fields/DateField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,YAAY,EAAkB,MAAM,eAAe,CAAA;AACzE,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAChD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAoC,MAAM,iBAAiB,CAAA;AAQ9E,MAAM,CAAC,MAAM,SAAS,GAAG,CAAwB,EAC/C,KAAK,EACL,WAAW,GACO,EAAE,EAAE;IACtB,MAAM,EAAE,OAAO,EAAE,GAAG,WAAW,CAAA;IAE/B,OAAO,CACL,oBAAC,UAAU,IACT,IAAI,EAAE,KAAK,CAAC,IAAe,EAC3B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EACnC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,CAC1D,oBAAC,UAAU,OACL,YAAY,EAChB,KAAK,EAAE,YAAY,CAAC,KAAK,IAAI,IAAI,KAC7B,KAAK,CAAC,UAAU,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,CAAC,EAC/C,WAAW,EAAE,CAAC,MAAsB,EAAE,EAAE,CAAC,CACvC,oBAAC,YAAY,OACP,MAAM,EACV,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,UAAU,EAAE,KAAK,EAAE,OAAO,EAC1B,SAAS,SACT,CACH,GACD,CACH,GACD,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/components/fields/FileField.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FieldValues, Path, UseFormReturn } from "react-hook-form";
+import { IFileField } from "../../types";
+interface FileFieldProps<T extends FieldValues> {
+    field: IFileField<Path<T>>;
+    formControl: UseFormReturn<T>;
+}
+export declare const FileField: <T extends FieldValues>({ field, formControl, }: FileFieldProps<T>) => React.JSX.Element;
+export {};

package/dist/components/fields/FileField.js

@@ -0,0 +1,44 @@
+import { Box, Button, FormControl, FormHelperText, FormLabel, IconButton, Stack, Typography, } from "@mui/material";
+import { Close, InsertDriveFile } from "@mui/icons-material";
+import React, { useRef } from "react";
+import { Controller } from "react-hook-form";
+export const FileField = ({ field, formControl, }) => {
+    const { control } = formControl;
+    const fileInputRef = useRef(null);
+    return (React.createElement(Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => {
+            const selectedFile = controlField.value?.[0];
+            const previewUrl = selectedFile
+                ? URL.createObjectURL(selectedFile)
+                : null;
+            return (React.createElement(FormControl, { fullWidth: true, error: !!error },
+                React.createElement(FormLabel, { component: "legend", required: field.required }, field.label),
+                React.createElement(Stack, { direction: "row", alignItems: "center", spacing: 2 },
+                    React.createElement(Box, { onClick: () => fileInputRef.current?.click(), sx: { cursor: "pointer" }, ...field.otherProps },
+                        field.fileInputComponent ? (typeof field.fileInputComponent === "function" ? (React.createElement(field.fileInputComponent)) : (field.fileInputComponent)) : (React.createElement(Button, { variant: "contained", component: "span" }, "Upload File")),
+                        React.createElement("input", { type: "file", hidden: true, ref: fileInputRef, onChange: (e) => {
+                                const fileValue = e.target.files && e.target.files.length > 0
+                                    ? e.target.files
+                                    : undefined;
+                                controlField.onChange(fileValue);
+                            } })),
+                    selectedFile && (React.createElement(Stack, { direction: "row", alignItems: "center", spacing: 1 },
+                        selectedFile.type.startsWith("image/") && previewUrl ? (React.createElement("img", { src: previewUrl, alt: "Preview", style: {
+                                maxWidth: "50px",
+                                maxHeight: "50px",
+                                objectFit: "contain",
+                            } })) : (React.createElement(InsertDriveFile, { sx: { fontSize: 50 } })),
+                        React.createElement(Typography, { variant: "body2" }, selectedFile.name),
+                        React.createElement(IconButton, { size: "small", onClick: () => {
+                                controlField.onChange(undefined);
+                                if (fileInputRef.current) {
+                                    fileInputRef.current.value = ""; // Clear the input element
+                                }
+                                if (previewUrl) {
+                                    URL.revokeObjectURL(previewUrl); // Clean up the object URL
+                                }
+                            } },
+                            React.createElement(Close, { fontSize: "small" }))))),
+                error && React.createElement(FormHelperText, null, error.message)));
+        } }));
+};
+//# sourceMappingURL=FileField.js.map

package/dist/components/fields/FileField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileField.js","sourceRoot":"","sources":["../../../src/components/fields/FileField.tsx"],"names":[],"mappings":"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"}

package/dist/components/fields/RadioGroupField.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FieldValues, Path, UseFormReturn } from "react-hook-form";
+import { IRadioGroupField } from "../../types";
+interface RadioGroupFieldProps<T extends FieldValues> {
+    field: IRadioGroupField<Path<T>>;
+    formControl: UseFormReturn<T>;
+}
+export declare const RadioGroupField: <T extends FieldValues>({ field, formControl, }: RadioGroupFieldProps<T>) => React.JSX.Element;
+export {};

package/dist/components/fields/RadioGroupField.js

@@ -0,0 +1,11 @@
+import { FormControl, FormControlLabel, FormHelperText, FormLabel, Radio, RadioGroup, } from "@mui/material";
+import React from "react";
+import { Controller } from "react-hook-form";
+export const RadioGroupField = ({ field, formControl, }) => {
+    const { control } = formControl;
+    return (React.createElement(Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => (React.createElement(FormControl, { component: "fieldset", error: !!error },
+            React.createElement(FormLabel, { component: "legend", required: field.required }, field.label),
+            React.createElement(RadioGroup, { ...controlField, value: controlField.value || "", onChange: (e) => controlField.onChange(e.target.value), row: field.otherProps?.row || false }, field.list?.map((option) => (React.createElement(FormControlLabel, { key: option.value, value: option.value, control: React.createElement(Radio, { ...field.otherProps }), label: option.label })))),
+            error && React.createElement(FormHelperText, null, error.message))) }));
+};
+//# sourceMappingURL=RadioGroupField.js.map

package/dist/components/fields/RadioGroupField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroupField.js","sourceRoot":"","sources":["../../../src/components/fields/RadioGroupField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,SAAS,EACT,KAAK,EACL,UAAU,GACX,MAAM,eAAe,CAAA;AACtB,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAoC,MAAM,iBAAiB,CAAA;AAQ9E,MAAM,CAAC,MAAM,eAAe,GAAG,CAAwB,EACrD,KAAK,EACL,WAAW,GACa,EAAE,EAAE;IAC5B,MAAM,EAAE,OAAO,EAAE,GAAG,WAAW,CAAA;IAE/B,OAAO,CACL,oBAAC,UAAU,IACT,IAAI,EAAE,KAAK,CAAC,IAAe,EAC3B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EACnC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,CAC1D,oBAAC,WAAW,IAAC,SAAS,EAAC,UAAU,EAAC,KAAK,EAAE,CAAC,CAAC,KAAK;YAC9C,oBAAC,SAAS,IAAC,SAAS,EAAC,QAAQ,EAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACnD,KAAK,CAAC,KAAK,CACF;YACZ,oBAAC,UAAU,OACL,YAAY,EAChB,KAAK,EAAE,YAAY,CAAC,KAAK,IAAI,EAAE,EAC/B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACtD,GAAG,EAAE,KAAK,CAAC,UAAU,EAAE,GAAG,IAAI,KAAK,IAClC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC3B,oBAAC,gBAAgB,IACf,GAAG,EAAE,MAAM,CAAC,KAAK,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,OAAO,EAAE,oBAAC,KAAK,OAAK,KAAK,CAAC,UAAU,GAAI,EACxC,KAAK,EAAE,MAAM,CAAC,KAAK,GACnB,CACH,CAAC,CACS;YACZ,KAAK,IAAI,oBAAC,cAAc,QAAE,KAAK,CAAC,OAAO,CAAkB,CAC9C,CACf,GACD,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/components/fields/SelectField.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FieldValues, Path, UseFormReturn } from "react-hook-form";
+import { ISelectField } from "../../types";
+interface SelectFieldProps<T extends FieldValues> {
+    field: ISelectField<Path<T>>;
+    formControl: UseFormReturn<T>;
+}
+export declare const SelectField: <T extends FieldValues>({ field, formControl, }: SelectFieldProps<T>) => React.JSX.Element;
+export {};

package/dist/components/fields/SelectField.js

@@ -0,0 +1,11 @@
+import { FormControl, InputLabel, MenuItem, Select as MuiSelect, FormHelperText, } from "@mui/material";
+import React from "react";
+import { Controller } from "react-hook-form";
+export const SelectField = ({ field, formControl, }) => {
+    const { control } = formControl;
+    return (React.createElement(Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => (React.createElement(FormControl, { fullWidth: true, error: !!error },
+            React.createElement(InputLabel, { required: field.required }, field.label),
+            React.createElement(MuiSelect, { label: field.label, ...controlField, value: controlField.value || (field.type === "multi-select" ? [] : ""), ...field.otherProps, multiple: field.type === "multi-select" }, field.list?.map((item) => (React.createElement(MenuItem, { key: item.value, value: item.value }, item.label)))),
+            error && React.createElement(FormHelperText, null, error.message))) }));
+};
+//# sourceMappingURL=SelectField.js.map

package/dist/components/fields/SelectField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../../../src/components/fields/SelectField.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,MAAM,IAAI,SAAS,EACnB,cAAc,GACf,MAAM,eAAe,CAAA;AACtB,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAoC,MAAM,iBAAiB,CAAA;AAQ9E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAwB,EACjD,KAAK,EACL,WAAW,GACS,EAAE,EAAE;IACxB,MAAM,EAAE,OAAO,EAAE,GAAG,WAAW,CAAA;IAE/B,OAAO,CACL,oBAAC,UAAU,IACT,IAAI,EAAE,KAAK,CAAC,IAAe,EAC3B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EACnC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,CAC1D,oBAAC,WAAW,IAAC,SAAS,QAAC,KAAK,EAAE,CAAC,CAAC,KAAK;YACnC,oBAAC,UAAU,IAAC,QAAQ,EAAE,KAAK,CAAC,QAAQ,IAAG,KAAK,CAAC,KAAK,CAAc;YAChE,oBAAC,SAAS,IACR,KAAK,EAAE,KAAK,CAAC,KAAK,KACd,YAAY,EAChB,KAAK,EACH,YAAY,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,IAAI,KAAK,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAE7D,KAAK,CAAC,UAAU,EACpB,QAAQ,EAAE,KAAK,CAAC,IAAI,KAAK,cAAc,IACtC,KAAK,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACzB,oBAAC,QAAQ,IAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,IACzC,IAAI,CAAC,KAAK,CACF,CACZ,CAAC,CACQ;YACX,KAAK,IAAI,oBAAC,cAAc,QAAE,KAAK,CAAC,OAAO,CAAkB,CAC9C,CACf,GACD,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/components/fields/SwitchField.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FieldValues, Path, UseFormReturn } from "react-hook-form";
+import { ISwitchField } from "../../types";
+interface SwitchFieldProps<T extends FieldValues> {
+    field: ISwitchField<Path<T>>;
+    formControl: UseFormReturn<T>;
+}
+export declare const SwitchField: <T extends FieldValues>({ field, formControl, }: SwitchFieldProps<T>) => React.JSX.Element;
+export {};

package/dist/components/fields/SwitchField.js

@@ -0,0 +1,8 @@
+import { FormControlLabel, Switch as MuiSwitch } from "@mui/material";
+import React from "react";
+import { Controller } from "react-hook-form";
+export const SwitchField = ({ field, formControl, }) => {
+    const { control } = formControl;
+    return (React.createElement(Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => (React.createElement(FormControlLabel, { control: React.createElement(MuiSwitch, { ...controlField, checked: !!controlField.value, onChange: (e) => controlField.onChange(e.target.checked), ...field.otherProps }), label: field.label })) }));
+};
+//# sourceMappingURL=SwitchField.js.map

package/dist/components/fields/SwitchField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitchField.js","sourceRoot":"","sources":["../../../src/components/fields/SwitchField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,eAAe,CAAA;AACrE,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAoC,MAAM,iBAAiB,CAAA;AAQ9E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAwB,EACjD,KAAK,EACL,WAAW,GACS,EAAE,EAAE;IACxB,MAAM,EAAE,OAAO,EAAE,GAAG,WAAW,CAAA;IAE/B,OAAO,CACL,oBAAC,UAAU,IACT,IAAI,EAAE,KAAK,CAAC,IAAe,EAC3B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EACnC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,CAC1D,oBAAC,gBAAgB,IACf,OAAO,EACL,oBAAC,SAAS,OACJ,YAAY,EAChB,OAAO,EAAE,CAAC,CAAC,YAAY,CAAC,KAAK,EAC7B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,KACpD,KAAK,CAAC,UAAU,GACpB,EAEJ,KAAK,EAAE,KAAK,CAAC,KAAK,GAClB,CACH,GACD,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/components/fields/TextField.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FieldValues, Path, UseFormReturn } from "react-hook-form";
+import { ICustomField } from "../../types";
+interface TextFieldProps<T extends FieldValues> {
+    field: ICustomField<Path<T>>;
+    formControl: UseFormReturn<T>;
+}
+export declare const TextField: <T extends FieldValues>({ field, formControl, }: TextFieldProps<T>) => React.JSX.Element;
+export {};

package/dist/components/fields/TextField.js

@@ -0,0 +1,14 @@
+import { TextField as MuiTextField } from "@mui/material";
+import React from "react";
+import { Controller } from "react-hook-form";
+export const TextField = ({ field, formControl, }) => {
+    const { control } = formControl;
+    return (React.createElement(Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => (React.createElement(MuiTextField, { ...controlField, value: controlField.value || "", ...field.otherProps, label: field.label, type: field.type, fullWidth: true, required: field.required, error: !!error, helperText: error?.message, onChange: (e) => {
+                if (!e.target.value)
+                    return controlField.onChange(undefined);
+                controlField.onChange(field.type === "number"
+                    ? parseFloat(e.target.value)
+                    : e.target.value);
+            } })) }));
+};
+//# sourceMappingURL=TextField.js.map

package/dist/components/fields/TextField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.js","sourceRoot":"","sources":["../../../src/components/fields/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAoC,MAAM,iBAAiB,CAAA;AAQ9E,MAAM,CAAC,MAAM,SAAS,GAAG,CAAwB,EAC/C,KAAK,EACL,WAAW,GACO,EAAE,EAAE;IACtB,MAAM,EAAE,OAAO,EAAE,GAAG,WAAW,CAAA;IAE/B,OAAO,CACL,oBAAC,UAAU,IACT,IAAI,EAAE,KAAK,CAAC,IAAe,EAC3B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EACnC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,CAC1D,oBAAC,YAAY,OACP,YAAY,EAChB,KAAK,EAAE,YAAY,CAAC,KAAK,IAAI,EAAE,KAC3B,KAAK,CAAC,UAAU,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,QACT,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,UAAU,EAAE,KAAK,EAAE,OAAO,EAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACd,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK;oBAAE,OAAO,YAAY,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;gBAC5D,YAAY,CAAC,QAAQ,CACnB,KAAK,CAAC,IAAI,KAAK,QAAQ;oBACrB,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC;oBAC5B,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CACnB,CAAA;YACH,CAAC,GACD,CACH,GACD,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/components/fields/TextareaField.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { FieldValues, Path, UseFormReturn } from "react-hook-form";
+import { ICustomField } from "../../types";
+interface TextareaFieldProps<T extends FieldValues> {
+    field: ICustomField<Path<T>>;
+    formControl: UseFormReturn<T>;
+}
+export declare const TextareaField: <T extends FieldValues>({ field, formControl, }: TextareaFieldProps<T>) => React.JSX.Element;
+export {};

package/dist/components/fields/TextareaField.js

@@ -0,0 +1,8 @@
+import { TextField as MuiTextField } from "@mui/material";
+import React from "react";
+import { Controller } from "react-hook-form";
+export const TextareaField = ({ field, formControl, }) => {
+    const { control } = formControl;
+    return (React.createElement(Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => (React.createElement(MuiTextField, { ...controlField, value: controlField.value || "", ...field.otherProps, label: field.label, type: "text", fullWidth: true, multiline: true, rows: field.otherProps?.rows || 4, required: field.required, error: !!error, helperText: error?.message, onChange: controlField.onChange })) }));
+};
+//# sourceMappingURL=TextareaField.js.map

package/dist/components/fields/TextareaField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaField.js","sourceRoot":"","sources":["../../../src/components/fields/TextareaField.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,YAAY,EAAE,MAAM,eAAe,CAAA;AACzD,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,UAAU,EAAoC,MAAM,iBAAiB,CAAA;AAQ9E,MAAM,CAAC,MAAM,aAAa,GAAG,CAAwB,EACnD,KAAK,EACL,WAAW,GACW,EAAE,EAAE;IAC1B,MAAM,EAAE,OAAO,EAAE,GAAG,WAAW,CAAA;IAE/B,OAAO,CACL,oBAAC,UAAU,IACT,IAAI,EAAE,KAAK,CAAC,IAAe,EAC3B,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EACnC,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,CAC1D,oBAAC,YAAY,OACP,YAAY,EAChB,KAAK,EAAE,YAAY,CAAC,KAAK,IAAI,EAAE,KAC3B,KAAK,CAAC,UAAU,EACpB,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,IAAI,EAAC,MAAM,EACX,SAAS,QACT,SAAS,QACT,IAAI,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,IAAI,CAAC,EACjC,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,KAAK,EAAE,CAAC,CAAC,KAAK,EACd,UAAU,EAAE,KAAK,EAAE,OAAO,EAC1B,QAAQ,EAAE,YAAY,CAAC,QAAQ,GAC/B,CACH,GACD,CACH,CAAA;AACH,CAAC,CAAA"}

package/dist/types.d.ts

@@ -1,42 +1,57 @@
 import { ButtonProps, StackProps } from "@mui/material";
-import { CSSProperties } from "react";
 import { FieldPath, FieldValues, SubmitErrorHandler, SubmitHandler, UseFormReturn } from "react-hook-form";
-type SelectTypes = "single-select" | "multi-select";
-type BaseTypes = "text" | "number" | "date" | "file" | "password" | "textarea" | "switch" | "checkbox-group" | "radio-group" | "custom";
-export interface ISelectField {
-    type: SelectTypes;
-    list: TOption[];
-}
-export interface IOtherField {
-    type: BaseTypes;
-    list?: TOption[];
-    component?: React.ComponentType<CustomComponentProps>;
-}
-export type ICustomField<T extends string> = {
+export type TOption<T = any> = {
+    icon?: React.ReactNode;
+    label: string;
+    value: T;
+};
+type FileInputComponent = React.ReactNode | React.ElementType;
+export interface ICustomFieldBase<T extends string> {
     label: string;
     name: T;
     required?: boolean;
     otherProps?: any;
     span?: number;
-} & ({
-    type: SelectTypes;
+}
+export interface ITextField<T extends string> extends ICustomFieldBase<T> {
+    type: "text" | "number" | "password";
+}
+export interface ITextareaField<T extends string> extends ICustomFieldBase<T> {
+    type: "textarea";
+}
+export interface ISelectField<T extends string> extends ICustomFieldBase<T> {
+    type: "single-select" | "multi-select";
     list: TOption[];
-} | {
-    type: BaseTypes;
-    list?: TOption[];
-    component?: React.ComponentType<CustomComponentProps>;
-});
-export type TOption<T = any> = {
-    icon?: React.ReactNode;
-    label: string;
-    value: T;
-};
+}
+export interface IDateField<T extends string> extends ICustomFieldBase<T> {
+    type: "date";
+}
+export interface IFileField<T extends string> extends ICustomFieldBase<T> {
+    type: "file";
+    fileInputComponent?: FileInputComponent;
+}
+export interface ISwitchField<T extends string> extends ICustomFieldBase<T> {
+    type: "switch";
+}
+export interface ICheckboxGroupField<T extends string> extends ICustomFieldBase<T> {
+    type: "checkbox-group";
+    list: TOption[];
+}
+export interface IRadioGroupField<T extends string> extends ICustomFieldBase<T> {
+    type: "radio-group";
+    list: TOption[];
+}
+export interface ICustomComponentField<T extends string> extends ICustomFieldBase<T> {
+    type: "custom";
+    component: React.ComponentType<CustomComponentProps>;
+}
+export type ICustomField<T extends string> = ITextField<T> | ITextareaField<T> | ISelectField<T> | IDateField<T> | IFileField<T> | ISwitchField<T> | ICheckboxGroupField<T> | IRadioGroupField<T> | ICustomComponentField<T>;
 export type IFieldGroup<TFormValues extends FieldValues = FieldValues> = ICustomField<FieldPath<TFormValues>>[][];
 export interface ICustomForm<T extends FieldValues> {
     fieldsGroups: IFieldGroup<T>;
     onSubmit: [SubmitHandler<T>, SubmitErrorHandler<T>?];
     formControl: UseFormReturn<T>;
-    actionButtonsPlacement?: CSSProperties["justifyContent"];
+    actionButtonsPlacement?: StackProps["justifyContent"];
     submitButton?: ButtonProps | boolean;
     resetButton?: ButtonProps | boolean;
     layout?: StackProps["direction"];

package/dist/types.js

@@ -1,3 +1,2 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};
 //# sourceMappingURL=types.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-custom-form",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "description": "A versatile React form component utilizing MUI components and react-hook-form.",
   "main": "dist/CustomForm.js",
   "types": "dist/CustomForm.d.ts",
@@ -12,6 +12,12 @@
     "type": "git",
     "url": "git+https://github.com/DevOsamaIslam/mui-custom-form.git"
   },
+  "author": "DevOsamaIslam",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/DevOsamaIslam/mui-custom-form/issues"
+  },
+  "homepage": "https://github.com/DevOsamaIslam/mui-custom-form#readme",
   "keywords": [
     "react",
     "form",
@@ -19,15 +25,10 @@
     "react-hook-form",
     "customizable"
   ],
-  "author": "Your Name",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/DevOsamaIslam/mui-custom-form/issues"
-  },
-  "homepage": "https://github.com/DevOsamaIslam/mui-custom-form#readme",
   "peerDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
+    "@mui/x-date-pickers": "^8.3.1",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.13",
     "moment": "^2.30.1",
@@ -42,8 +43,8 @@
     "typescript": "^5.8.3"
   },
   "dependencies": {
+    "@mui/icons-material": "^7.1.0",
     "@mui/material": "^7.1.0",
-    "@mui/x-date-pickers": "^8.3.1",
     "react-hook-form": "^7.56.3"
   }
 }