@rachelallyson/hero-hook-form 2.1.2 → 2.2.0

package/dist/index.js

@@ -6,7 +6,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 });
 
 // src/components/Form.tsx
-import React16 from "react";
+import React17 from "react";
 import { Button as Button3 } from "@heroui/react";
 
 // src/hooks/useFormHelper.ts
@@ -75,7 +75,7 @@ function useFormHelper({
 }
 
 // src/components/FormField.tsx
-import React15 from "react";
+import React16 from "react";
 import { useWatch as useWatch3 } from "react-hook-form";
 
 // src/fields/CheckboxField.tsx
@@ -246,13 +246,30 @@ function ConditionalField({
   ));
 }
 
-// src/fields/DateField.tsx
+// src/fields/ContentField.tsx
 import React4 from "react";
+function ContentField({
+  config,
+  form,
+  submissionState
+}) {
+  if (config.render) {
+    return /* @__PURE__ */ React4.createElement("div", { className: config.className }, config.render({
+      errors: form.formState.errors,
+      form,
+      isSubmitting: submissionState.isSubmitting
+    }));
+  }
+  return /* @__PURE__ */ React4.createElement("div", { className: config.className }, config.title && /* @__PURE__ */ React4.createElement("h3", { className: "text-lg font-semibold text-foreground mb-2" }, config.title), config.description && /* @__PURE__ */ React4.createElement("p", { className: "text-sm text-muted-foreground" }, config.description));
+}
+
+// src/fields/DateField.tsx
+import React5 from "react";
 import { Controller as Controller2 } from "react-hook-form";
 function CoercedDateInput(props) {
   const { dateProps, description, disabled, errorMessage, field: field2, label } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(
     DateInput,
     {
       ...defaults.dateInput,
@@ -280,12 +297,12 @@ function DateField(props) {
     rules,
     transform
   } = props;
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(
     Controller2,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React4.createElement("div", { className }, /* @__PURE__ */ React4.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React5.createElement("div", { className }, /* @__PURE__ */ React5.createElement(
         CoercedDateInput,
         {
           dateProps,
@@ -305,7 +322,7 @@ function DateField(props) {
 }
 
 // src/fields/DynamicSectionField.tsx
-import React5 from "react";
+import React6 from "react";
 import { useWatch as useWatch2, useFormContext as useFormContext2 } from "react-hook-form";
 function DynamicSectionField({
   className,
@@ -319,7 +336,7 @@ function DynamicSectionField({
   if (!shouldShow) {
     return null;
   }
-  return /* @__PURE__ */ React5.createElement("div", { className }, (title || description) && /* @__PURE__ */ React5.createElement("div", { className: "mb-6" }, title && /* @__PURE__ */ React5.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-2" }, title), description && /* @__PURE__ */ React5.createElement("p", { className: "text-sm text-gray-600" }, description)), /* @__PURE__ */ React5.createElement("div", { className: "space-y-4" }, fields.map((fieldConfig, index) => /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement("div", { className }, (title || description) && /* @__PURE__ */ React6.createElement("div", { className: "mb-6" }, title && /* @__PURE__ */ React6.createElement("h3", { className: "text-lg font-semibold text-gray-900 mb-2" }, title), description && /* @__PURE__ */ React6.createElement("p", { className: "text-sm text-gray-600" }, description)), /* @__PURE__ */ React6.createElement("div", { className: "space-y-4" }, fields.map((fieldConfig, index) => /* @__PURE__ */ React6.createElement(
     FormField,
     {
       key: `${fieldConfig.name}-${index}`,
@@ -336,7 +353,7 @@ function DynamicSectionField({
 }
 
 // src/fields/FieldArrayField.tsx
-import React6 from "react";
+import React7 from "react";
 import { useFieldArray, useFormContext as useFormContext3 } from "react-hook-form";
 import { Button as Button2 } from "@heroui/react";
 function FieldArrayField({
@@ -384,13 +401,13 @@ function FieldArrayField({
       remove(index);
     }
   };
-  return /* @__PURE__ */ React6.createElement("div", { className }, /* @__PURE__ */ React6.createElement("div", { className: "space-y-4" }, fields.map((field2, index) => /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { className }, /* @__PURE__ */ React7.createElement("div", { className: "space-y-4" }, fields.map((field2, index) => /* @__PURE__ */ React7.createElement(
     "div",
     {
       key: field2.id,
       className: "border border-gray-200 rounded-lg p-4 space-y-4"
     },
-    /* @__PURE__ */ React6.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React6.createElement("h4", { className: "text-sm font-medium text-gray-700" }, config.label, " #", index + 1), canRemove && /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement("div", { className: "flex justify-between items-center" }, /* @__PURE__ */ React7.createElement("h4", { className: "text-sm font-medium text-gray-700" }, config.label, " #", index + 1), canRemove && /* @__PURE__ */ React7.createElement(
       Button2,
       {
         size: "sm",
@@ -402,7 +419,7 @@ function FieldArrayField({
       },
       removeButtonText
     )),
-    /* @__PURE__ */ React6.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, fieldConfigs.map((fieldConfig) => /* @__PURE__ */ React6.createElement(
+    /* @__PURE__ */ React7.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4" }, fieldConfigs.map((fieldConfig) => /* @__PURE__ */ React7.createElement(
       FormField,
       {
         key: `${fieldConfig.name}-${index}`,
@@ -419,7 +436,7 @@ function FieldArrayField({
         }
       }
     )))
-  )), canAdd && /* @__PURE__ */ React6.createElement(
+  )), canAdd && /* @__PURE__ */ React7.createElement(
     Button2,
     {
       variant: "bordered",
@@ -428,7 +445,7 @@ function FieldArrayField({
       className: "w-full"
     },
     addButtonText
-  ), fields.length === 0 && /* @__PURE__ */ React6.createElement("div", { className: "text-center py-8 text-gray-500" }, /* @__PURE__ */ React6.createElement("p", null, "No ", config.label?.toLowerCase(), " added yet."), /* @__PURE__ */ React6.createElement(
+  ), fields.length === 0 && /* @__PURE__ */ React7.createElement("div", { className: "text-center py-8 text-gray-500" }, /* @__PURE__ */ React7.createElement("p", null, "No ", config.label?.toLowerCase(), " added yet."), /* @__PURE__ */ React7.createElement(
     Button2,
     {
       variant: "bordered",
@@ -441,7 +458,7 @@ function FieldArrayField({
 }
 
 // src/fields/FileField.tsx
-import React7 from "react";
+import React8 from "react";
 import { Controller as Controller3 } from "react-hook-form";
 function CoercedFileInput(props) {
   const {
@@ -455,7 +472,7 @@ function CoercedFileInput(props) {
     multiple
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     Input,
     {
       ...defaults.input,
@@ -491,12 +508,12 @@ function FileField(props) {
     rules,
     transform
   } = props;
-  return /* @__PURE__ */ React7.createElement(
+  return /* @__PURE__ */ React8.createElement(
     Controller3,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React7.createElement("div", { className }, /* @__PURE__ */ React7.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React8.createElement("div", { className }, /* @__PURE__ */ React8.createElement(
         CoercedFileInput,
         {
           accept,
@@ -518,7 +535,7 @@ function FileField(props) {
 }
 
 // src/fields/FontPickerField.tsx
-import React8 from "react";
+import React9 from "react";
 import { Controller as Controller4 } from "react-hook-form";
 var FontPickerComponent = null;
 var fontPickerLoaded = false;
@@ -535,12 +552,12 @@ function FontPickerField(props) {
     name,
     rules
   } = props;
-  const [fontPickerState, setFontPickerState] = React8.useState({
+  const [fontPickerState, setFontPickerState] = React9.useState({
     component: FontPickerComponent,
     error: null,
     loading: false
   });
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (fontPickerLoaded && FontPickerComponent) {
       setFontPickerState({
         component: FontPickerComponent,
@@ -598,17 +615,17 @@ function FontPickerField(props) {
     void loadFontPicker();
   }, []);
   if (fontPickerState.loading) {
-    return /* @__PURE__ */ React8.createElement("div", { className }, /* @__PURE__ */ React8.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React8.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React8.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React8.createElement("div", { className: "p-4 border border-default-200 bg-default-50 rounded-medium" }, /* @__PURE__ */ React8.createElement("p", { className: "text-default-600 text-sm" }, "Loading font picker..."))));
+    return /* @__PURE__ */ React9.createElement("div", { className }, /* @__PURE__ */ React9.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React9.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React9.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React9.createElement("div", { className: "p-4 border border-default-200 bg-default-50 rounded-medium" }, /* @__PURE__ */ React9.createElement("p", { className: "text-default-600 text-sm" }, "Loading font picker..."))));
   }
   if (!fontPickerState.component) {
-    return /* @__PURE__ */ React8.createElement("div", { className }, /* @__PURE__ */ React8.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React8.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React8.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React8.createElement("div", { className: "p-4 border border-warning-200 bg-warning-50 rounded-medium" }, /* @__PURE__ */ React8.createElement("p", { className: "text-warning-800 text-sm" }, "Font picker requires the @rachelallyson/heroui-font-picker package. Please install it as a peer dependency for advanced font selection features."))));
+    return /* @__PURE__ */ React9.createElement("div", { className }, /* @__PURE__ */ React9.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React9.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React9.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React9.createElement("div", { className: "p-4 border border-warning-200 bg-warning-50 rounded-medium" }, /* @__PURE__ */ React9.createElement("p", { className: "text-warning-800 text-sm" }, "Font picker requires the @rachelallyson/heroui-font-picker package. Please install it as a peer dependency for advanced font selection features."))));
   }
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     Controller4,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React8.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React9.createElement(
         fontPickerState.component,
         {
           label,
@@ -627,12 +644,12 @@ function FontPickerField(props) {
 }
 
 // src/fields/InputField.tsx
-import React9 from "react";
+import React10 from "react";
 import { Controller as Controller5 } from "react-hook-form";
 function CoercedInput(props) {
   const { description, disabled, errorMessage, field: field2, inputProps, label } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(
     Input,
     {
       ...defaults.input,
@@ -648,7 +665,7 @@ function CoercedInput(props) {
     }
   );
 }
-var InputField = React9.memo(
+var InputField = React10.memo(
   (props) => {
     const {
       className,
@@ -661,12 +678,12 @@ var InputField = React9.memo(
       rules,
       transform
     } = props;
-    return /* @__PURE__ */ React9.createElement(
+    return /* @__PURE__ */ React10.createElement(
       Controller5,
       {
         control,
         name,
-        render: ({ field: field2, fieldState }) => /* @__PURE__ */ React9.createElement("div", { className }, /* @__PURE__ */ React9.createElement(
+        render: ({ field: field2, fieldState }) => /* @__PURE__ */ React10.createElement("div", { className }, /* @__PURE__ */ React10.createElement(
           CoercedInput,
           {
             description,
@@ -696,7 +713,7 @@ var InputField = React9.memo(
 );
 
 // src/fields/RadioGroupField.tsx
-import React10 from "react";
+import React11 from "react";
 import { Controller as Controller6 } from "react-hook-form";
 function RadioGroupField(props) {
   const {
@@ -711,12 +728,12 @@ function RadioGroupField(props) {
     rules
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React11.createElement(
     Controller6,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React10.createElement("div", { className }, /* @__PURE__ */ React10.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React11.createElement("div", { className }, /* @__PURE__ */ React11.createElement(
         RadioGroup,
         {
           ...defaults.radioGroup,
@@ -729,7 +746,7 @@ function RadioGroupField(props) {
           onBlur: field2.onBlur,
           onValueChange: (val) => field2.onChange(val)
         },
-        options.map((opt) => /* @__PURE__ */ React10.createElement(
+        options.map((opt) => /* @__PURE__ */ React11.createElement(
           Radio,
           {
             key: String(opt.value),
@@ -738,14 +755,14 @@ function RadioGroupField(props) {
           },
           opt.label
         ))
-      ), fieldState.error?.message ? /* @__PURE__ */ React10.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
+      ), fieldState.error?.message ? /* @__PURE__ */ React11.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
       rules
     }
   );
 }
 
 // src/fields/SelectField.tsx
-import React11 from "react";
+import React12 from "react";
 import { Controller as Controller7 } from "react-hook-form";
 function SelectField(props) {
   const {
@@ -761,14 +778,14 @@ function SelectField(props) {
     selectProps
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React12.createElement(
     Controller7,
     {
       control,
       name,
       render: ({ field: field2, fieldState }) => {
         const selectedKey = field2.value;
-        return /* @__PURE__ */ React11.createElement("div", { className }, /* @__PURE__ */ React11.createElement(
+        return /* @__PURE__ */ React12.createElement("div", { className }, /* @__PURE__ */ React12.createElement(
           Select,
           {
             ...defaults.select,
@@ -786,7 +803,7 @@ function SelectField(props) {
               field2.onChange(next);
             }
           },
-          options.map((opt) => /* @__PURE__ */ React11.createElement(
+          options.map((opt) => /* @__PURE__ */ React12.createElement(
             SelectItem,
             {
               key: String(opt.value),
@@ -803,12 +820,12 @@ function SelectField(props) {
 }
 
 // src/fields/SliderField.tsx
-import React12 from "react";
+import React13 from "react";
 import { Controller as Controller8 } from "react-hook-form";
 function CoercedSlider(props) {
   const { description, disabled, errorMessage, field: field2, label, sliderProps } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Slider,
     {
       ...defaults.slider,
@@ -836,12 +853,12 @@ function SliderField(props) {
     sliderProps,
     transform
   } = props;
-  return /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Controller8,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React12.createElement("div", { className }, /* @__PURE__ */ React12.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React13.createElement("div", { className }, /* @__PURE__ */ React13.createElement(
         CoercedSlider,
         {
           description,
@@ -861,7 +878,7 @@ function SliderField(props) {
 }
 
 // src/fields/SwitchField.tsx
-import React13 from "react";
+import React14 from "react";
 import { Controller as Controller9 } from "react-hook-form";
 function SwitchField(props) {
   const {
@@ -875,12 +892,12 @@ function SwitchField(props) {
     switchProps
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     Controller9,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React13.createElement("div", { className }, /* @__PURE__ */ React13.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React14.createElement("div", { className }, /* @__PURE__ */ React14.createElement(
         Switch,
         {
           ...defaults.switch,
@@ -891,14 +908,14 @@ function SwitchField(props) {
           onValueChange: (val) => field2.onChange(val)
         },
         label
-      ), description ? /* @__PURE__ */ React13.createElement("p", { className: "text-small text-default-400" }, description) : null, fieldState.error?.message ? /* @__PURE__ */ React13.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
+      ), description ? /* @__PURE__ */ React14.createElement("p", { className: "text-small text-default-400" }, description) : null, fieldState.error?.message ? /* @__PURE__ */ React14.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
       rules
     }
   );
 }
 
 // src/fields/TextareaField.tsx
-import React14 from "react";
+import React15 from "react";
 import { Controller as Controller10 } from "react-hook-form";
 function TextareaField(props) {
   const {
@@ -912,12 +929,12 @@ function TextareaField(props) {
     textareaProps
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     Controller10,
     {
       control,
       name,
-      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React14.createElement("div", { className }, /* @__PURE__ */ React14.createElement(
+      render: ({ field: field2, fieldState }) => /* @__PURE__ */ React15.createElement("div", { className }, /* @__PURE__ */ React15.createElement(
         Textarea,
         {
           ...defaults.textarea,
@@ -938,7 +955,7 @@ function TextareaField(props) {
 }
 
 // src/components/FormField.tsx
-var FormField = React15.memo(
+var FormField = React16.memo(
   ({
     config,
     form,
@@ -949,6 +966,16 @@ var FormField = React15.memo(
     }
     const { control } = form;
     const watchedValues = useWatch3({ control });
+    if (config.type === "content") {
+      return /* @__PURE__ */ React16.createElement(
+        ContentField,
+        {
+          config,
+          form,
+          submissionState
+        }
+      );
+    }
     if (config.condition && !config.condition(watchedValues)) {
       return null;
     }
@@ -970,7 +997,7 @@ var FormField = React15.memo(
     };
     switch (config.type) {
       case "input":
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React16.createElement(
           InputField,
           {
             ...baseProps,
@@ -980,7 +1007,7 @@ var FormField = React15.memo(
           }
         );
       case "textarea":
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React16.createElement(
           TextareaField,
           {
             ...baseProps,
@@ -990,7 +1017,7 @@ var FormField = React15.memo(
           }
         );
       case "select":
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React16.createElement(
           SelectField,
           {
             ...baseProps,
@@ -1004,7 +1031,7 @@ var FormField = React15.memo(
           }
         );
       case "checkbox":
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React16.createElement(
           CheckboxField,
           {
             ...baseProps,
@@ -1014,7 +1041,7 @@ var FormField = React15.memo(
           }
         );
       case "radio":
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React16.createElement(
           RadioGroupField,
           {
             ...baseProps,
@@ -1028,7 +1055,7 @@ var FormField = React15.memo(
           }
         );
       case "switch":
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React16.createElement(
           SwitchField,
           {
             ...baseProps,
@@ -1038,7 +1065,7 @@ var FormField = React15.memo(
           }
         );
       case "slider":
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React16.createElement(
           SliderField,
           {
             ...baseProps,
@@ -1048,7 +1075,7 @@ var FormField = React15.memo(
           }
         );
       case "date":
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React16.createElement(
           DateField,
           {
             ...baseProps,
@@ -1058,7 +1085,7 @@ var FormField = React15.memo(
           }
         );
       case "file":
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React16.createElement(
           FileField,
           {
             ...baseProps,
@@ -1070,7 +1097,7 @@ var FormField = React15.memo(
           }
         );
       case "fontPicker":
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React16.createElement(
           FontPickerField,
           {
             ...baseProps,
@@ -1088,7 +1115,7 @@ var FormField = React15.memo(
           name: config.name
         });
       case "conditional":
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React16.createElement(
           ConditionalField,
           {
             config,
@@ -1097,7 +1124,7 @@ var FormField = React15.memo(
           }
         );
       case "fieldArray":
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React16.createElement(
           FieldArrayField,
           {
             config,
@@ -1105,7 +1132,7 @@ var FormField = React15.memo(
           }
         );
       case "dynamicSection":
-        return /* @__PURE__ */ React15.createElement(
+        return /* @__PURE__ */ React16.createElement(
           DynamicSectionField,
           {
             config,
@@ -1157,12 +1184,12 @@ function ConfigurableForm({
   });
   const renderFields = () => {
     if (layout === "grid") {
-      return /* @__PURE__ */ React16.createElement(
+      return /* @__PURE__ */ React17.createElement(
         "div",
         {
           className: `grid gap-${spacing} ${columns === 1 ? "grid-cols-1" : columns === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"}`
         },
-        fields.map((field2) => /* @__PURE__ */ React16.createElement(
+        fields.map((field2) => /* @__PURE__ */ React17.createElement(
           FormField,
           {
             key: field2.name,
@@ -1174,7 +1201,7 @@ function ConfigurableForm({
       );
     }
     if (layout === "horizontal") {
-      return /* @__PURE__ */ React16.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field2) => /* @__PURE__ */ React16.createElement(
+      return /* @__PURE__ */ React17.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field2) => /* @__PURE__ */ React17.createElement(
         FormField,
         {
           key: field2.name,
@@ -1184,7 +1211,7 @@ function ConfigurableForm({
         }
       )));
     }
-    return /* @__PURE__ */ React16.createElement("div", { className: `space-y-${spacing}` }, fields.map((field2) => /* @__PURE__ */ React16.createElement(
+    return /* @__PURE__ */ React17.createElement("div", { className: `space-y-${spacing}` }, fields.map((field2) => /* @__PURE__ */ React17.createElement(
       FormField,
       {
         key: field2.name,
@@ -1198,23 +1225,23 @@ function ConfigurableForm({
     e.preventDefault();
     void handleSubmit();
   };
-  return /* @__PURE__ */ React16.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React16.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React16.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React16.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), isSubmitted && isSuccess && /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React17.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React17.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React17.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), isSubmitted && isSuccess && /* @__PURE__ */ React17.createElement(
     "div",
     {
       className: "mb-6 p-4 bg-success-50 border border-success-200 rounded-lg",
       "data-testid": "success-message"
     },
-    /* @__PURE__ */ React16.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
-    /* @__PURE__ */ React16.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
-  ), error && /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React17.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
+    /* @__PURE__ */ React17.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
+  ), error && /* @__PURE__ */ React17.createElement(
     "div",
     {
       className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
       "data-testid": "error-message"
     },
-    /* @__PURE__ */ React16.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
-    /* @__PURE__ */ React16.createElement("p", { className: "text-danger-700 text-sm mt-1" }, error)
-  ), renderFields(), /* @__PURE__ */ React16.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React16.createElement(
+    /* @__PURE__ */ React17.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
+    /* @__PURE__ */ React17.createElement("p", { className: "text-danger-700 text-sm mt-1" }, error)
+  ), renderFields(), /* @__PURE__ */ React17.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React17.createElement(
     Button3,
     {
       color: "primary",
@@ -1224,7 +1251,7 @@ function ConfigurableForm({
       ...submitButtonProps
     },
     submitButtonText
-  ), showResetButton && /* @__PURE__ */ React16.createElement(
+  ), showResetButton && /* @__PURE__ */ React17.createElement(
     Button3,
     {
       isDisabled: isSubmitting,
@@ -1237,7 +1264,7 @@ function ConfigurableForm({
 }
 
 // src/components/ServerActionForm.tsx
-import React17 from "react";
+import React18 from "react";
 import { useActionState } from "react";
 function ServerActionForm({
   action,
@@ -1262,10 +1289,10 @@ function ServerActionForm({
     action,
     initialState ?? { errors: void 0, message: void 0, success: false }
   );
-  const formRef = React17.useRef(null);
-  const [clientErrors, setClientErrors] = React17.useState({});
-  const lastSubmittedFormData = React17.useRef(null);
-  React17.useEffect(() => {
+  const formRef = React18.useRef(null);
+  const [clientErrors, setClientErrors] = React18.useState({});
+  const lastSubmittedFormData = React18.useRef(null);
+  React18.useEffect(() => {
     if (state && (state.errors || state.message && !state.success)) {
       onError?.({
         errors: state.errors,
@@ -1273,7 +1300,7 @@ function ServerActionForm({
       });
     }
   }, [state, onError]);
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     if (state?.success && lastSubmittedFormData.current) {
       onSuccess?.(lastSubmittedFormData.current);
     }
@@ -1316,12 +1343,12 @@ function ServerActionForm({
   };
   const renderFields = () => {
     if (layout === "grid") {
-      return /* @__PURE__ */ React17.createElement(
+      return /* @__PURE__ */ React18.createElement(
         "div",
         {
           className: `grid gap-${spacing} ${columns === 1 ? "grid-cols-1" : columns === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"}`
         },
-        fields.map((field2) => /* @__PURE__ */ React17.createElement(
+        fields.map((field2) => /* @__PURE__ */ React18.createElement(
           ServerActionField,
           {
             key: field2.name,
@@ -1334,7 +1361,7 @@ function ServerActionForm({
       );
     }
     if (layout === "horizontal") {
-      return /* @__PURE__ */ React17.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field2) => /* @__PURE__ */ React17.createElement(
+      return /* @__PURE__ */ React18.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field2) => /* @__PURE__ */ React18.createElement(
         ServerActionField,
         {
           key: field2.name,
@@ -1345,7 +1372,7 @@ function ServerActionForm({
         }
       )));
     }
-    return /* @__PURE__ */ React17.createElement("div", { className: `space-y-${spacing}` }, fields.map((field2) => /* @__PURE__ */ React17.createElement(
+    return /* @__PURE__ */ React18.createElement("div", { className: `space-y-${spacing}` }, fields.map((field2) => /* @__PURE__ */ React18.createElement(
       ServerActionField,
       {
         key: field2.name,
@@ -1356,7 +1383,7 @@ function ServerActionForm({
       }
     )));
   };
-  return /* @__PURE__ */ React17.createElement(
+  return /* @__PURE__ */ React18.createElement(
     "form",
     {
       ref: formRef,
@@ -1364,27 +1391,27 @@ function ServerActionForm({
       role: "form",
       onSubmit: handleSubmit
     },
-    title && /* @__PURE__ */ React17.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React17.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React17.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)),
-    state?.success && !pending && /* @__PURE__ */ React17.createElement(
+    title && /* @__PURE__ */ React18.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React18.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React18.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)),
+    state?.success && !pending && /* @__PURE__ */ React18.createElement(
       "div",
       {
         className: "mb-6 p-4 bg-success-50 border border-success-200 rounded-lg",
         "data-testid": "success-message"
       },
-      /* @__PURE__ */ React17.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
-      state.message && /* @__PURE__ */ React17.createElement("p", { className: "text-success-700 text-sm mt-1" }, state.message)
+      /* @__PURE__ */ React18.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
+      state.message && /* @__PURE__ */ React18.createElement("p", { className: "text-success-700 text-sm mt-1" }, state.message)
     ),
-    state?.message && !state.success && /* @__PURE__ */ React17.createElement(
+    state?.message && !state.success && /* @__PURE__ */ React18.createElement(
       "div",
       {
         className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
         "data-testid": "error-message"
       },
-      /* @__PURE__ */ React17.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
-      /* @__PURE__ */ React17.createElement("p", { className: "text-danger-700 text-sm mt-1" }, state.message)
+      /* @__PURE__ */ React18.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
+      /* @__PURE__ */ React18.createElement("p", { className: "text-danger-700 text-sm mt-1" }, state.message)
     ),
     renderFields(),
-    /* @__PURE__ */ React17.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React17.createElement(
+    /* @__PURE__ */ React18.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React18.createElement(
       Button,
       {
         color: "primary",
@@ -1394,7 +1421,7 @@ function ServerActionForm({
         ...submitButtonProps
       },
       submitButtonText
-    ), showResetButton && /* @__PURE__ */ React17.createElement(
+    ), showResetButton && /* @__PURE__ */ React18.createElement(
       Button,
       {
         isDisabled: pending,
@@ -1412,6 +1439,17 @@ function ServerActionField({
   errors,
   field: field2
 }) {
+  if (field2.type === "content") {
+    const contentField2 = field2;
+    if (contentField2.render) {
+      return /* @__PURE__ */ React18.createElement("div", { className: contentField2.className }, contentField2.render({
+        errors: {},
+        form: null,
+        isSubmitting: false
+      }));
+    }
+    return /* @__PURE__ */ React18.createElement("div", { className: contentField2.className }, contentField2.title && /* @__PURE__ */ React18.createElement("h3", { className: "text-lg font-semibold text-foreground mb-2" }, contentField2.title), contentField2.description && /* @__PURE__ */ React18.createElement("p", { className: "text-sm text-muted-foreground" }, contentField2.description));
+  }
   const fieldName = field2.name;
   const fieldErrors = errors?.[fieldName];
   const clientError = clientErrors?.[fieldName];
@@ -1438,9 +1476,9 @@ function ServerActionField({
     }
     return false;
   };
-  const [value, setValue] = React17.useState(getDefaultValue);
-  const [checked, setChecked] = React17.useState(getDefaultChecked);
-  React17.useEffect(() => {
+  const [value, setValue] = React18.useState(getDefaultValue);
+  const [checked, setChecked] = React18.useState(getDefaultChecked);
+  React18.useEffect(() => {
     const newDefaultValue = defaultValues?.[fieldName];
     if (newDefaultValue !== void 0 && newDefaultValue !== null) {
       if (field2.type === "checkbox") {
@@ -1454,7 +1492,7 @@ function ServerActionField({
       }
     }
   }, [defaultValues, fieldName, field2.type]);
-  React17.useEffect(() => {
+  React18.useEffect(() => {
     const hiddenInput = document.querySelector(
       `input[type="hidden"][name="${fieldName}"]`
     );
@@ -1469,7 +1507,7 @@ function ServerActionField({
   switch (field2.type) {
     case "input": {
       const inputType = field2.inputProps?.type || "text";
-      return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React17.createElement(
+      return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React18.createElement(
         Input,
         {
           ...field2.inputProps,
@@ -1486,7 +1524,7 @@ function ServerActionField({
       ));
     }
     case "textarea": {
-      return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React17.createElement(
+      return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React18.createElement(
         Textarea,
         {
           ...field2.textareaProps,
@@ -1502,7 +1540,7 @@ function ServerActionField({
       ));
     }
     case "checkbox": {
-      return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("input", { type: "hidden", name: fieldName, value: checked ? "on" : "" }), /* @__PURE__ */ React17.createElement(
+      return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("input", { type: "hidden", name: fieldName, value: checked ? "on" : "" }), /* @__PURE__ */ React18.createElement(
         Checkbox,
         {
           ...field2.checkboxProps,
@@ -1518,7 +1556,7 @@ function ServerActionField({
     }
     case "select": {
       const options = field2.options || [];
-      return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React17.createElement(
+      return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React18.createElement(
         Select,
         {
           ...field2.selectProps,
@@ -1535,12 +1573,12 @@ function ServerActionField({
           }
         },
         options.map(
-          (option) => /* @__PURE__ */ React17.createElement(SelectItem, { key: String(option.value) }, option.label)
+          (option) => /* @__PURE__ */ React18.createElement(SelectItem, { key: String(option.value) }, option.label)
         )
       ));
     }
     default:
-      return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React17.createElement(
+      return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React18.createElement(
         Input,
         {
           "data-field-name": fieldName,
@@ -1570,10 +1608,10 @@ function useHeroForm() {
 }
 
 // src/providers/FormProvider.tsx
-import React18 from "react";
+import React19 from "react";
 import { FormProvider as RHFProvider } from "react-hook-form";
 function FormProvider(props) {
-  return /* @__PURE__ */ React18.createElement(RHFProvider, { ...props.methods }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(RHFProvider, { ...props.methods }, /* @__PURE__ */ React19.createElement(
     "form",
     {
       className: props.className,
@@ -1586,7 +1624,7 @@ function FormProvider(props) {
 }
 
 // src/submit/SubmitButton.tsx
-import React19 from "react";
+import React20 from "react";
 function SubmitButton(props) {
   const ctx = useFormContext5();
   const loading = props.isLoading ?? ctx.formState.isSubmitting;
@@ -1596,10 +1634,10 @@ function SubmitButton(props) {
   const defaults = useHeroHookFormDefaults();
   const getButtonContent = () => {
     if (enhancedState?.isSuccess) {
-      return /* @__PURE__ */ React19.createElement("span", { className: "inline-flex items-center gap-2" }, "\u2705", props.successText || "Success!");
+      return /* @__PURE__ */ React20.createElement("span", { className: "inline-flex items-center gap-2" }, "\u2705", props.successText || "Success!");
     }
     if (loading) {
-      return /* @__PURE__ */ React19.createElement("span", { className: "inline-flex items-center gap-2" }, "\u23F3", props.loadingText || "Submitting...");
+      return /* @__PURE__ */ React20.createElement("span", { className: "inline-flex items-center gap-2" }, "\u23F3", props.loadingText || "Submitting...");
     }
     return props.children;
   };
@@ -1612,7 +1650,7 @@ function SubmitButton(props) {
     }
     return props.buttonProps?.color || defaults.submitButton.color;
   };
-  return /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(
     Button,
     {
       type: "submit",
@@ -1853,7 +1891,7 @@ var commonValidations = {
 import { useFormContext as useFormContext5 } from "react-hook-form";
 
 // src/components/ZodForm.tsx
-import React21 from "react";
+import React22 from "react";
 import { Button as Button5 } from "@heroui/react";
 import {
   FormProvider as FormProvider2
@@ -1976,7 +2014,7 @@ function useEnhancedFormState(form, options = {}) {
 }
 
 // src/components/FormStatus.tsx
-import React20 from "react";
+import React21 from "react";
 import { Button as Button4 } from "@heroui/react";
 function FormStatus({
   className = "",
@@ -1989,25 +2027,25 @@ function FormStatus({
     return null;
   }
   if (isSubmitting) {
-    return /* @__PURE__ */ React20.createElement(
+    return /* @__PURE__ */ React21.createElement(
       "div",
       {
         className: `flex items-center gap-3 p-4 bg-blue-50 border border-blue-200 rounded-lg ${className}`
       },
-      /* @__PURE__ */ React20.createElement("span", { className: "text-blue-600" }, "\u23F3"),
-      /* @__PURE__ */ React20.createElement("div", null, /* @__PURE__ */ React20.createElement("p", { className: "text-sm font-medium text-blue-900" }, "Submitting form..."), showDetails && /* @__PURE__ */ React20.createElement("p", { className: "text-xs text-blue-700" }, "Please wait while we process your request."))
+      /* @__PURE__ */ React21.createElement("span", { className: "text-blue-600" }, "\u23F3"),
+      /* @__PURE__ */ React21.createElement("div", null, /* @__PURE__ */ React21.createElement("p", { className: "text-sm font-medium text-blue-900" }, "Submitting form..."), showDetails && /* @__PURE__ */ React21.createElement("p", { className: "text-xs text-blue-700" }, "Please wait while we process your request."))
     );
   }
   if (isSuccess) {
-    return /* @__PURE__ */ React20.createElement(
+    return /* @__PURE__ */ React21.createElement(
       "div",
       {
         className: `flex items-center gap-3 p-4 bg-green-50 border border-green-200 rounded-lg ${className}`,
         "data-testid": "success-message"
       },
-      /* @__PURE__ */ React20.createElement("span", { className: "text-green-600" }, "\u2705"),
-      /* @__PURE__ */ React20.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React20.createElement("p", { className: "text-sm font-medium text-green-900" }, "Form submitted successfully!"), showDetails && submittedData && /* @__PURE__ */ React20.createElement("p", { className: "text-xs text-green-700" }, "Your data has been saved. Thank you for your submission.")),
-      onDismiss && /* @__PURE__ */ React20.createElement(
+      /* @__PURE__ */ React21.createElement("span", { className: "text-green-600" }, "\u2705"),
+      /* @__PURE__ */ React21.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React21.createElement("p", { className: "text-sm font-medium text-green-900" }, "Form submitted successfully!"), showDetails && submittedData && /* @__PURE__ */ React21.createElement("p", { className: "text-xs text-green-700" }, "Your data has been saved. Thank you for your submission.")),
+      onDismiss && /* @__PURE__ */ React21.createElement(
         Button4,
         {
           size: "sm",
@@ -2021,15 +2059,15 @@ function FormStatus({
     );
   }
   if (isError && error) {
-    return /* @__PURE__ */ React20.createElement(
+    return /* @__PURE__ */ React21.createElement(
       "div",
       {
         className: `flex items-center gap-3 p-4 bg-red-50 border border-red-200 rounded-lg ${className}`,
         "data-testid": "error-message"
       },
-      /* @__PURE__ */ React20.createElement("span", { className: "text-red-600" }, "\u26A0\uFE0F"),
-      /* @__PURE__ */ React20.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React20.createElement("p", { className: "text-sm font-medium text-red-900" }, "Error submitting form"), /* @__PURE__ */ React20.createElement("p", { className: "text-xs text-red-700" }, error)),
-      onDismiss && /* @__PURE__ */ React20.createElement(
+      /* @__PURE__ */ React21.createElement("span", { className: "text-red-600" }, "\u26A0\uFE0F"),
+      /* @__PURE__ */ React21.createElement("div", { className: "flex-1" }, /* @__PURE__ */ React21.createElement("p", { className: "text-sm font-medium text-red-900" }, "Error submitting form"), /* @__PURE__ */ React21.createElement("p", { className: "text-xs text-red-700" }, error)),
+      onDismiss && /* @__PURE__ */ React21.createElement(
         Button4,
         {
           size: "sm",
@@ -2050,8 +2088,8 @@ function FormToast({
   position = "top-right",
   state
 }) {
-  const [isVisible, setIsVisible] = React20.useState(false);
-  React20.useEffect(() => {
+  const [isVisible, setIsVisible] = React21.useState(false);
+  React21.useEffect(() => {
     if (state.isSuccess || state.isError) {
       setIsVisible(true);
       if (duration > 0) {
@@ -2072,7 +2110,7 @@ function FormToast({
     "top-left": "top-4 left-4",
     "top-right": "top-4 right-4"
   };
-  return /* @__PURE__ */ React20.createElement("div", { className: `fixed z-50 ${positionClasses[position]}` }, /* @__PURE__ */ React20.createElement(FormStatus, { state, onDismiss }));
+  return /* @__PURE__ */ React21.createElement("div", { className: `fixed z-50 ${positionClasses[position]}` }, /* @__PURE__ */ React21.createElement(FormStatus, { state, onDismiss }));
 }
 
 // src/components/ZodForm.tsx
@@ -2123,12 +2161,12 @@ function ZodForm({
   };
   const renderFields = () => {
     if (layout === "grid") {
-      return /* @__PURE__ */ React21.createElement(
+      return /* @__PURE__ */ React22.createElement(
         "div",
         {
           className: `grid gap-${spacing} ${columns === 1 ? "grid-cols-1" : columns === 2 ? "grid-cols-1 md:grid-cols-2" : "grid-cols-1 md:grid-cols-2 lg:grid-cols-3"}`
         },
-        config.fields.map((field2) => /* @__PURE__ */ React21.createElement(
+        config.fields.map((field2) => /* @__PURE__ */ React22.createElement(
           FormField,
           {
             key: field2.name,
@@ -2145,7 +2183,7 @@ function ZodForm({
       );
     }
     if (layout === "horizontal") {
-      return /* @__PURE__ */ React21.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, config.fields.map((field2) => /* @__PURE__ */ React21.createElement(
+      return /* @__PURE__ */ React22.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, config.fields.map((field2) => /* @__PURE__ */ React22.createElement(
         FormField,
         {
           key: field2.name,
@@ -2160,7 +2198,7 @@ function ZodForm({
         }
       )));
     }
-    return /* @__PURE__ */ React21.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field2) => /* @__PURE__ */ React21.createElement(
+    return /* @__PURE__ */ React22.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field2) => /* @__PURE__ */ React22.createElement(
       FormField,
       {
         key: field2.name,
@@ -2179,13 +2217,13 @@ function ZodForm({
     e.preventDefault();
     void handleSubmit();
   };
-  React21.useEffect(() => {
+  React22.useEffect(() => {
     if (config.onError && Object.keys(form.formState.errors).length > 0) {
       config.onError(form.formState.errors);
     }
   }, [form.formState.errors, config.onError]);
   if (render) {
-    return /* @__PURE__ */ React21.createElement(FormProvider2, { ...form }, render({
+    return /* @__PURE__ */ React22.createElement(FormProvider2, { ...form }, render({
       errors: form.formState.errors,
       form,
       isSubmitted: enhancedState.status !== "idle",
@@ -2194,14 +2232,14 @@ function ZodForm({
       values: form.getValues()
     }));
   }
-  return /* @__PURE__ */ React21.createElement(FormProvider2, { ...form }, /* @__PURE__ */ React21.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React21.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React21.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React21.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React22.createElement(FormProvider2, { ...form }, /* @__PURE__ */ React22.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React22.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React22.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React22.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), /* @__PURE__ */ React22.createElement(
     FormStatus,
     {
       state: enhancedState,
       onDismiss: () => enhancedState.reset(),
       showDetails: true
     }
-  ), renderFields(), /* @__PURE__ */ React21.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React21.createElement(
+  ), renderFields(), /* @__PURE__ */ React22.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React22.createElement(
     Button5,
     {
       color: "primary",
@@ -2211,7 +2249,7 @@ function ZodForm({
       ...submitButtonProps
     },
     enhancedState.isSuccess ? "Success!" : submitButtonText
-  ), showResetButton && /* @__PURE__ */ React21.createElement(
+  ), showResetButton && /* @__PURE__ */ React22.createElement(
     Button5,
     {
       isDisabled: enhancedState.isSubmitting,
@@ -2275,6 +2313,20 @@ var BasicFormBuilder = class {
     });
     return this;
   }
+  /**
+   * Add a content field for headers, questions, or custom content between fields
+   */
+  content(title, description, options) {
+    this.fields.push({
+      className: options?.className,
+      description: description || void 0,
+      name: options?.name,
+      render: options?.render,
+      title: title || void 0,
+      type: "content"
+    });
+    return this;
+  }
   /**
    * Add a switch field
    */
@@ -2305,6 +2357,28 @@ var FormFieldHelpers = {
     name,
     type: "checkbox"
   }),
+  /**
+   * Create a content field for headers, questions, or custom content between fields
+   *
+   * @example
+   * ```tsx
+   * // Simple header
+   * FormFieldHelpers.content("Personal Information", "Please provide your details")
+   *
+   * // Custom render
+   * FormFieldHelpers.content(null, null, {
+   *   render: () => <div>Custom content</div>
+   * })
+   * ```
+   */
+  content: (title, description, options) => ({
+    className: options?.className,
+    description: description || void 0,
+    name: options?.name,
+    render: options?.render,
+    title: title || void 0,
+    type: "content"
+  }),
   /**
    * Create a date field
    */
@@ -2537,6 +2611,16 @@ function fontPickerField(name, label, props) {
     }
   };
 }
+function contentField(title, description, options) {
+  return {
+    className: options?.className,
+    description: description || void 0,
+    name: options?.name,
+    render: options?.render,
+    title: title || void 0,
+    type: "content"
+  };
+}
 function createField(type, name, label, optionsOrProps, props) {
   switch (type) {
     case "input":
@@ -2559,6 +2643,22 @@ function createField(type, name, label, optionsOrProps, props) {
       return fileField(name, label, optionsOrProps);
     case "fontPicker":
       return fontPickerField(name, label, optionsOrProps);
+    case "content":
+      if (typeof optionsOrProps === "string" || optionsOrProps === null) {
+        return contentField(optionsOrProps, props);
+      }
+      if (typeof optionsOrProps === "object" && optionsOrProps !== null) {
+        return contentField(
+          optionsOrProps.title,
+          optionsOrProps.description,
+          optionsOrProps
+        );
+      }
+      return contentField(
+        name,
+        label,
+        optionsOrProps
+      );
     default:
       throw new Error(`Unknown field type: ${type}`);
   }
@@ -3449,6 +3549,7 @@ export {
   CommonFields,
   ConditionalField,
   ConfigurableForm,
+  ContentField,
   DateField,
   DynamicSectionField,
   FieldArrayBuilder,