@aatulwork/customform-renderer 1.0.0 → 1.2.0

package/dist/index.mjs

@@ -123,6 +123,22 @@ var transformFormValues = (data, formSchema) => {
   });
   return transformedData;
 };
+var useFormColors = (customColors) => {
+  const theme = useTheme();
+  return {
+    primary: customColors?.primary || theme.palette.primary.main,
+    secondary: customColors?.secondary || theme.palette.secondary.main,
+    error: customColors?.error || theme.palette.error.main,
+    success: customColors?.success || theme.palette.success.main,
+    warning: customColors?.warning || theme.palette.warning.main,
+    info: customColors?.info || theme.palette.info.main,
+    textPrimary: customColors?.textPrimary || theme.palette.text.primary,
+    textSecondary: customColors?.textSecondary || theme.palette.text.secondary,
+    divider: customColors?.divider || theme.palette.divider,
+    background: customColors?.background || theme.palette.background.default,
+    backgroundPaper: customColors?.backgroundPaper || theme.palette.background.paper
+  };
+};
 var TextField = ({ field, control, defaultValue, rules, errors }) => {
   return /* @__PURE__ */ jsx(
     Controller,
@@ -618,8 +634,9 @@ var useCKEditor = (options = {}) => {
     load
   };
 };
-var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, formSchema, services }) => {
+var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, formSchema, services, colors }) => {
   const theme = useTheme();
+  const formColors = useFormColors(colors);
   const editorContainerRef = useRef(null);
   const fileUploadService = services?.fileUpload || defaultFileUploadService;
   const fileBaseUrl = services?.fileBaseUrl || "";
@@ -671,13 +688,13 @@ var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, fo
   if (isCKEditorLoading) {
     return /* @__PURE__ */ jsxs(Box, { children: [
       /* @__PURE__ */ jsx(FormLabel, { required: field.required, error: !!errors[field.name], children: field.label }),
-      /* @__PURE__ */ jsx(Box, { sx: { p: 2, textAlign: "center", color: "text.secondary" }, children: "Loading editor..." })
+      /* @__PURE__ */ jsx(Box, { sx: { p: 2, textAlign: "center", color: formColors.textSecondary }, children: "Loading editor..." })
     ] });
   }
   if (ckEditorError || !isCKEditorReady) {
     return /* @__PURE__ */ jsxs(Box, { children: [
       /* @__PURE__ */ jsx(FormLabel, { required: field.required, error: !!errors[field.name], children: field.label }),
-      /* @__PURE__ */ jsx(Box, { sx: { p: 2, border: "1px solid", borderColor: "error.main", borderRadius: 1 }, children: /* @__PURE__ */ jsx(FormHelperText, { error: true, children: ckEditorError?.message || "CKEditor failed to load. Please ensure the CKEditor script is loaded." }) })
+      /* @__PURE__ */ jsx(Box, { sx: { p: 2, border: "1px solid", borderColor: formColors.error, borderRadius: 1 }, children: /* @__PURE__ */ jsx(FormHelperText, { error: true, children: ckEditorError?.message || "CKEditor failed to load. Please ensure the CKEditor script is loaded." }) })
     ] });
   }
   return /* @__PURE__ */ jsx(
@@ -723,11 +740,11 @@ var CKEditorField = ({ field, control, defaultValue, rules, errors, setValue, fo
                   minHeight: "100px"
                 },
                 "&:hover": {
-                  borderColor: errors[field.name] ? theme.palette.error.main : theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.87)" : theme.palette.primary.main
+                  borderColor: errors[field.name] ? formColors.error : theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.87)" : formColors.primary
                 },
                 "& .ck-focused": {
-                  border: errors[field.name] ? `1px solid ${theme.palette.error.main} !important` : `1px solid ${theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.23)" : `${theme.palette.primary.main}`} !important`,
-                  boxShadow: errors[field.name] ? `0 0 0 1px ${theme.palette.error.main}` : `0 0 0 1px ${alpha(theme.palette.primary.main, 0.5)} !important`
+                  border: errors[field.name] ? `1px solid ${formColors.error} !important` : `1px solid ${theme.palette.mode === "dark" ? "rgba(255, 255, 255, 0.23)" : formColors.primary} !important`,
+                  boxShadow: errors[field.name] ? `0 0 0 1px ${formColors.error}` : `0 0 0 1px ${alpha(formColors.primary, 0.5)} !important`
                 }
               }
             },
@@ -790,10 +807,12 @@ var FileField = ({
   setUploadingFiles,
   setError,
   clearErrors,
-  services
+  services,
+  colors
 }) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  const formColors = useFormColors(colors);
   const acceptTypes = field.validation?.allowedFileTypes ? field.validation.allowedFileTypes.map((type) => `.${type.replace(".", "")}`).join(",") : void 0;
   const isMultiple = field.allowMultiple || false;
   const fileUploadService = services?.fileUpload || defaultFileUploadService;
@@ -833,15 +852,15 @@ var FileField = ({
                 alignItems: "center",
                 justifyContent: "center",
                 border: "1px dashed",
-                borderColor: errors[field.name] ? "error.main" : isUploading ? "primary.main" : hasFiles ? "primary.main" : "divider",
+                borderColor: errors[field.name] ? formColors.error : isUploading ? formColors.primary : hasFiles ? formColors.primary : formColors.divider,
                 p: 1,
                 cursor: isUploading ? "wait" : "pointer",
                 transition: "all 0.2s ease-in-out",
-                backgroundColor: isUploading || hasFiles ? "action.hover" : "background.paper",
+                backgroundColor: isUploading || hasFiles ? "action.hover" : formColors.backgroundPaper,
                 opacity: isUploading ? 0.7 : 1,
                 pointerEvents: isUploading ? "none" : "auto",
                 "&:hover": {
-                  borderColor: isUploading ? "primary.main" : "primary.main",
+                  borderColor: isUploading ? formColors.primary : formColors.primary,
                   backgroundColor: "action.hover"
                 }
               },
@@ -910,19 +929,19 @@ var FileField = ({
                 ),
                 isUploading ? /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 1, py: 3, width: "100%" }, children: [
                   /* @__PURE__ */ jsx(CircularProgress, { size: 40 }),
-                  /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "primary.main", sx: { fontWeight: 500 }, children: "Uploading files..." }),
-                  /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: "Please wait while files are being uploaded" })
+                  /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 500, color: formColors.primary }, children: "Uploading files..." }),
+                  /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: formColors.textSecondary }, children: "Please wait while files are being uploaded" })
                 ] }) : !hasFiles ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(CloudUploadIcon, { sx: { fontSize: 40, color: "text.secondary", mb: 1 } }),
-                  /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", children: [
+                  /* @__PURE__ */ jsx(CloudUploadIcon, { sx: { fontSize: 40, color: formColors.textSecondary, mb: 1 } }),
+                  /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: { color: formColors.textSecondary }, children: [
                     "Click to upload or drag and drop",
                     isMultiple && " (multiple files allowed)"
                   ] }),
-                  field.validation?.allowedFileTypes && field.validation.allowedFileTypes.length > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { mt: 0.5 }, children: [
+                  field.validation?.allowedFileTypes && field.validation.allowedFileTypes.length > 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: { mt: 0.5, color: formColors.textSecondary }, children: [
                     "Allowed: ",
                     field.validation.allowedFileTypes.join(", ")
                   ] }),
-                  field.validation?.maxFileSize && /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "text.secondary", sx: { mt: 0.5 }, children: [
+                  field.validation?.maxFileSize && /* @__PURE__ */ jsxs(Typography, { variant: "caption", sx: { mt: 0.5, color: formColors.textSecondary }, children: [
                     "Max size: ",
                     formatFileSize(field.validation.maxFileSize),
                     " per file"
@@ -935,10 +954,10 @@ var FileField = ({
                     " uploaded"
                   ] }),
                   files.length === 1 && !isMultiple ? /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 2, width: "100%" }, children: [
-                    /* @__PURE__ */ jsx(InsertDriveFileIcon, { sx: { fontSize: 40, color: "primary.main" } }),
+                    /* @__PURE__ */ jsx(InsertDriveFileIcon, { sx: { fontSize: 40, color: formColors.primary } }),
                     /* @__PURE__ */ jsxs(Box, { sx: { flexGrow: 1, minWidth: 0 }, children: [
                       /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", maxWidth: isMobile ? "200px" : "300px" }, children: files[0] instanceof File ? files[0].name : files[0].originalName || files[0].fileName }),
-                      /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: formatFileSize(files[0].size || 0) })
+                      /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: formColors.textSecondary }, children: formatFileSize(files[0].size || 0) })
                     ] }),
                     /* @__PURE__ */ jsx(Tooltip, { title: "Remove file", placement: "bottom", arrow: true, children: /* @__PURE__ */ jsx(
                       IconButton,
@@ -953,7 +972,7 @@ var FileField = ({
                             fileInput.value = "";
                           }
                         },
-                        sx: { color: "error.main" },
+                        sx: { color: formColors.error },
                         children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
                       }
                     ) })
@@ -968,15 +987,15 @@ var FileField = ({
                           gap: 1.5,
                           p: 1,
                           borderRadius: 1,
-                          backgroundColor: "background.default",
+                          backgroundColor: formColors.background,
                           border: "1px solid",
-                          borderColor: "divider"
+                          borderColor: formColors.divider
                         },
                         children: [
-                          /* @__PURE__ */ jsx(InsertDriveFileIcon, { sx: { fontSize: 32, color: "primary.main" } }),
+                          /* @__PURE__ */ jsx(InsertDriveFileIcon, { sx: { fontSize: 32, color: formColors.primary } }),
                           /* @__PURE__ */ jsxs(Box, { sx: { flexGrow: 1, minWidth: 0 }, children: [
                             /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: fileName }),
-                            /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", children: formatFileSize(file.size || 0) })
+                            /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { color: formColors.textSecondary }, children: formatFileSize(file.size || 0) })
                           ] }),
                           /* @__PURE__ */ jsx(Tooltip, { title: "Remove file", placement: "bottom", arrow: true, children: /* @__PURE__ */ jsx(
                             IconButton,
@@ -992,7 +1011,7 @@ var FileField = ({
                                   formField.onChange(null);
                                 }
                               },
-                              sx: { color: "error.main" },
+                              sx: { color: formColors.error },
                               children: /* @__PURE__ */ jsx(CloseIcon, { fontSize: "small" })
                             }
                           ) })
@@ -1005,7 +1024,7 @@ var FileField = ({
               ]
             }
           ),
-          errors[field.name] && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "error", sx: { mt: 1, display: "block" }, children: errors[field.name]?.message })
+          errors[field.name] && /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { mt: 1, display: "block", color: formColors.error }, children: errors[field.name]?.message })
         ] });
       }
     },
@@ -1207,7 +1226,8 @@ var FieldRenderer = (props) => {
     errors: props.errors,
     setValue: props.setValue,
     formSchema,
-    services
+    services,
+    colors: props.colors
   };
   switch (field.type) {
     case "text":
@@ -1439,10 +1459,11 @@ var formatFieldValue = (field, value, dateFormatter, services) => {
       return String(value);
   }
 };
-var FormViewMode = ({ formSchema, initialValues, hideTitle = false, services }) => {
+var FormViewMode = ({ formSchema, initialValues, hideTitle = false, services, colors }) => {
   const fieldsToRender = getAllFields(formSchema);
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  const formColors = useFormColors(colors);
   return /* @__PURE__ */ jsxs(Box, { sx: { maxWidth: 600, mx: "auto", width: "100%" }, children: [
     !hideTitle && /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, sx: { mb: 2, fontWeight: 600 }, children: formSchema.title }),
     formSchema.sections && formSchema.sections.length > 0 ? /* @__PURE__ */ jsx(Box, { sx: { display: "flex", flexDirection: "column", gap: 1.5 }, children: formSchema.sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs(Accordion, { defaultExpanded: sectionIndex === 0, children: [
@@ -1453,13 +1474,13 @@ var FormViewMode = ({ formSchema, initialValues, hideTitle = false, services })
           "aria-controls": `panel-${section.id}-content`,
           id: `panel-${section.id}-header`,
           children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-            /* @__PURE__ */ jsx(DoubleArrowOutlinedIcon, { fontSize: "small", color: "primary" }),
-            /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", sx: { fontWeight: 600 }, color: "primary", children: section.title })
+            /* @__PURE__ */ jsx(DoubleArrowOutlinedIcon, { fontSize: "small", sx: { color: formColors.primary } }),
+            /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", sx: { fontWeight: 600, color: formColors.primary }, children: section.title })
           ] })
         }
       ),
       /* @__PURE__ */ jsxs(AccordionDetails, { children: [
-        section.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: section.description }),
+        section.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { mb: 1.5, display: "block", color: formColors.textSecondary }, children: section.description }),
         /* @__PURE__ */ jsx(
           Box,
           {
@@ -1495,8 +1516,10 @@ var FormRenderer = ({
   hideTitle = false,
   allowResetOnValuesChange = false,
   mode = "edit",
-  services
+  services,
+  colors
 }) => {
+  const formColors = useFormColors(colors);
   const {
     control,
     handleSubmit,
@@ -1577,7 +1600,7 @@ var FormRenderer = ({
     }
   };
   if (mode === "view") {
-    return /* @__PURE__ */ jsx(FormViewMode, { formSchema, initialValues, hideTitle, services });
+    return /* @__PURE__ */ jsx(FormViewMode, { formSchema, initialValues, hideTitle, services, colors });
   }
   return /* @__PURE__ */ jsxs(Box, { component: "form", onSubmit: handleSubmit(handleFormSubmit), sx: { mx: "auto", width: "100%" }, children: [
     !hideTitle && /* @__PURE__ */ jsx(Typography, { variant: "h6", gutterBottom: true, sx: { mb: 2, fontWeight: 600 }, children: formSchema.title }),
@@ -1621,7 +1644,8 @@ var FormRenderer = ({
                     setUploadingFiles,
                     setError,
                     clearErrors,
-                    services
+                    services,
+                    colors
                   }
                 )
               },
@@ -1631,7 +1655,7 @@ var FormRenderer = ({
         }
       );
       if (sectionDisplayMode === "stepper") {
-        return /* @__PURE__ */ jsxs(Box, { sx: { border: "1px solid", borderColor: "divider", p: 5, backgroundColor: "background.paper" }, children: [
+        return /* @__PURE__ */ jsxs(Box, { sx: { border: "1px solid", borderColor: formColors.divider, p: 5, backgroundColor: formColors.backgroundPaper }, children: [
           /* @__PURE__ */ jsx(Stepper, { activeStep, orientation: "horizontal", children: formSchema.sections.map((section) => /* @__PURE__ */ jsx(Step, { children: /* @__PURE__ */ jsx(StepLabel, { children: /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", sx: { fontWeight: 600 }, children: section.title }) }) }, section.id)) }),
           /* @__PURE__ */ jsx(Box, { sx: { mt: 5 }, children: formSchema.sections.map((section, sectionIndex) => {
             const sectionsLength = formSchema.sections?.length || 0;
@@ -1642,15 +1666,15 @@ var FormRenderer = ({
                   display: activeStep === sectionIndex ? "block" : "none"
                 },
                 children: [
-                  section.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: section.description }),
+                  section.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { mb: 1.5, display: "block", color: formColors.textSecondary }, children: section.description }),
                   renderFieldsGrid(section),
-                  /* @__PURE__ */ jsxs(Box, { sx: { mt: 2, display: "flex", gap: 1, borderTop: "1px solid", pt: 2, borderColor: "divider", justifyContent: "center" }, children: [
+                  /* @__PURE__ */ jsxs(Box, { sx: { mt: 2, display: "flex", gap: 1, borderTop: "1px solid", pt: 2, borderColor: formColors.divider, justifyContent: "center" }, children: [
                     sectionIndex > 0 && /* @__PURE__ */ jsx(
                       Button,
                       {
                         size: "small",
                         variant: "outlined",
-                        color: "success",
+                        sx: { borderColor: formColors.success, color: formColors.success, "&:hover": { borderColor: formColors.success, backgroundColor: `${formColors.success}15` } },
                         startIcon: /* @__PURE__ */ jsx(ArrowBackIcon, {}),
                         onClick: () => setActiveStep(sectionIndex - 1),
                         children: "Previous"
@@ -1661,7 +1685,7 @@ var FormRenderer = ({
                       {
                         variant: "outlined",
                         size: "small",
-                        color: "warning",
+                        sx: { borderColor: formColors.warning, color: formColors.warning, "&:hover": { borderColor: formColors.warning, backgroundColor: `${formColors.warning}15` } },
                         endIcon: /* @__PURE__ */ jsx(ArrowForwardIcon, {}),
                         onClick: () => {
                           if (sectionIndex < sectionsLength - 1) {
@@ -1687,13 +1711,13 @@ var FormRenderer = ({
             "aria-controls": `panel-${section.id}-content`,
             id: `panel-${section.id}-header`,
             children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-              /* @__PURE__ */ jsx(DoubleArrowOutlinedIcon, { fontSize: "small", color: "primary" }),
-              /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", color: "primary", sx: { fontWeight: 600 }, children: section.title })
+              /* @__PURE__ */ jsx(DoubleArrowOutlinedIcon, { fontSize: "small", sx: { color: formColors.primary } }),
+              /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", sx: { fontWeight: 600, color: formColors.primary }, children: section.title })
             ] })
           }
         ),
         /* @__PURE__ */ jsxs(AccordionDetails, { children: [
-          section.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { mb: 1.5, display: "block" }, children: section.description }),
+          section.description && /* @__PURE__ */ jsx(Typography, { variant: "caption", sx: { mb: 1.5, display: "block", color: formColors.textSecondary }, children: section.description }),
           renderFieldsGrid(section)
         ] })
       ] }, section.id)) });
@@ -1735,7 +1759,8 @@ var FormRenderer = ({
                     setUploadingFiles,
                     setError,
                     clearErrors,
-                    services
+                    services,
+                    colors
                   }
                 )
               },
@@ -1752,7 +1777,7 @@ var FormRenderer = ({
           type: "submit",
           variant: "contained",
           size: "small",
-          sx: { minWidth: 120 },
+          sx: { minWidth: 120, backgroundColor: formColors.primary, "&:hover": { backgroundColor: formColors.primary } },
           disabled: isLoading,
           children: isLoading ? "Submitting..." : "Submit"
         }