@rachelallyson/hero-hook-form 1.0.1 → 1.2.0

package/dist/react/index.js

@@ -1,5 +1,5 @@
 // src/components/Form.tsx
-import React12 from "react";
+import React13 from "react";
 import { Button as Button2 } from "@heroui/react";
 
 // src/hooks/useFormHelper.ts
@@ -68,7 +68,7 @@ function useFormHelper({
 }
 
 // src/components/FormField.tsx
-import React11 from "react";
+import React12 from "react";
 import { useWatch } from "react-hook-form";
 
 // src/fields/CheckboxField.tsx
@@ -349,13 +349,122 @@ function FileField(props) {
   );
 }
 
-// src/fields/InputField.tsx
+// src/fields/FontPickerField.tsx
 import React5 from "react";
 import { Controller as Controller4 } from "react-hook-form";
+var FontPickerComponent = null;
+var fontPickerLoaded = false;
+var fontPickerLoading = false;
+var loadingCallbacks = [];
+function FontPickerField(props) {
+  const {
+    className,
+    control,
+    description,
+    fontPickerProps,
+    isDisabled,
+    label,
+    name,
+    rules
+  } = props;
+  const [fontPickerState, setFontPickerState] = React5.useState({
+    component: FontPickerComponent,
+    loading: false,
+    error: null
+  });
+  React5.useEffect(() => {
+    if (fontPickerLoaded && FontPickerComponent) {
+      setFontPickerState({
+        component: FontPickerComponent,
+        loading: false,
+        error: null
+      });
+      return;
+    }
+    if (fontPickerLoading) {
+      setFontPickerState((prev) => ({ ...prev, loading: true }));
+      const callback = () => {
+        if (fontPickerLoaded && FontPickerComponent) {
+          setFontPickerState({
+            component: FontPickerComponent,
+            loading: false,
+            error: null
+          });
+        } else {
+          setFontPickerState({
+            component: null,
+            loading: false,
+            error: "Font picker package not found"
+          });
+        }
+      };
+      loadingCallbacks.push(callback);
+      return;
+    }
+    const loadFontPicker = async () => {
+      fontPickerLoading = true;
+      setFontPickerState((prev) => ({ ...prev, loading: true }));
+      try {
+        const fontPickerModule = await import("@rachelallyson/heroui-font-picker");
+        FontPickerComponent = fontPickerModule.FontPicker || fontPickerModule.default;
+        fontPickerLoaded = true;
+        fontPickerLoading = false;
+        setFontPickerState({
+          component: FontPickerComponent,
+          loading: false,
+          error: null
+        });
+        loadingCallbacks.forEach((callback) => callback());
+        loadingCallbacks.length = 0;
+      } catch (error) {
+        fontPickerLoading = false;
+        setFontPickerState({
+          component: null,
+          loading: false,
+          error: "Font picker package not found"
+        });
+        loadingCallbacks.forEach((callback) => callback());
+        loadingCallbacks.length = 0;
+      }
+    };
+    void loadFontPicker();
+  }, []);
+  if (fontPickerState.loading) {
+    return /* @__PURE__ */ React5.createElement("div", { className }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React5.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React5.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React5.createElement("div", { className: "p-4 border border-default-200 bg-default-50 rounded-medium" }, /* @__PURE__ */ React5.createElement("p", { className: "text-default-600 text-sm" }, "Loading font picker..."))));
+  }
+  if (!fontPickerState.component) {
+    return /* @__PURE__ */ React5.createElement("div", { className }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-2" }, label && /* @__PURE__ */ React5.createElement("label", { className: "block text-sm font-medium text-foreground" }, label), description && /* @__PURE__ */ React5.createElement("p", { className: "text-sm text-muted-foreground" }, description), /* @__PURE__ */ React5.createElement("div", { className: "p-4 border border-warning-200 bg-warning-50 rounded-medium" }, /* @__PURE__ */ React5.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__ */ React5.createElement(
+    Controller4,
+    {
+      control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ React5.createElement(
+        fontPickerState.component,
+        {
+          label,
+          description,
+          value: field.value ?? "",
+          onSelectionChange: (value) => field.onChange(value),
+          errorMessage: fieldState.error?.message,
+          isDisabled,
+          className,
+          ...fontPickerProps
+        }
+      ),
+      rules
+    }
+  );
+}
+
+// src/fields/InputField.tsx
+import React6 from "react";
+import { Controller as Controller5 } from "react-hook-form";
 function CoercedInput(props) {
   const { description, disabled, errorMessage, field, inputProps, label } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React6.createElement(
     Input,
     {
       ...defaults.input,
@@ -383,12 +492,12 @@ function InputField(props) {
     rules,
     transform
   } = props;
-  return /* @__PURE__ */ React5.createElement(
-    Controller4,
+  return /* @__PURE__ */ React6.createElement(
+    Controller5,
     {
       control,
       name,
-      render: ({ field, fieldState }) => /* @__PURE__ */ React5.createElement("div", { className }, /* @__PURE__ */ React5.createElement(
+      render: ({ field, fieldState }) => /* @__PURE__ */ React6.createElement("div", { className }, /* @__PURE__ */ React6.createElement(
         CoercedInput,
         {
           description,
@@ -417,8 +526,8 @@ function InputField(props) {
 }
 
 // src/fields/RadioGroupField.tsx
-import React6 from "react";
-import { Controller as Controller5 } from "react-hook-form";
+import React7 from "react";
+import { Controller as Controller6 } from "react-hook-form";
 function RadioGroupField(props) {
   const {
     className,
@@ -432,12 +541,12 @@ function RadioGroupField(props) {
     rules
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React6.createElement(
-    Controller5,
+  return /* @__PURE__ */ React7.createElement(
+    Controller6,
     {
       control,
       name,
-      render: ({ field, fieldState }) => /* @__PURE__ */ React6.createElement("div", { className }, /* @__PURE__ */ React6.createElement(
+      render: ({ field, fieldState }) => /* @__PURE__ */ React7.createElement("div", { className }, /* @__PURE__ */ React7.createElement(
         RadioGroup,
         {
           ...defaults.radioGroup,
@@ -450,7 +559,7 @@ function RadioGroupField(props) {
           onBlur: field.onBlur,
           onValueChange: (val) => field.onChange(val)
         },
-        options.map((opt) => /* @__PURE__ */ React6.createElement(
+        options.map((opt) => /* @__PURE__ */ React7.createElement(
           Radio,
           {
             key: String(opt.value),
@@ -459,15 +568,15 @@ function RadioGroupField(props) {
           },
           opt.label
         ))
-      ), fieldState.error?.message ? /* @__PURE__ */ React6.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
+      ), fieldState.error?.message ? /* @__PURE__ */ React7.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
       rules
     }
   );
 }
 
 // src/fields/SelectField.tsx
-import React7 from "react";
-import { Controller as Controller6 } from "react-hook-form";
+import React8 from "react";
+import { Controller as Controller7 } from "react-hook-form";
 function SelectField(props) {
   const {
     className,
@@ -482,14 +591,14 @@ function SelectField(props) {
     selectProps
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React7.createElement(
-    Controller6,
+  return /* @__PURE__ */ React8.createElement(
+    Controller7,
     {
       control,
       name,
       render: ({ field, fieldState }) => {
         const selectedKey = field.value;
-        return /* @__PURE__ */ React7.createElement("div", { className }, /* @__PURE__ */ React7.createElement(
+        return /* @__PURE__ */ React8.createElement("div", { className }, /* @__PURE__ */ React8.createElement(
           Select,
           {
             ...defaults.select,
@@ -507,7 +616,7 @@ function SelectField(props) {
               field.onChange(next);
             }
           },
-          options.map((opt) => /* @__PURE__ */ React7.createElement(
+          options.map((opt) => /* @__PURE__ */ React8.createElement(
             SelectItem,
             {
               key: String(opt.value),
@@ -524,12 +633,12 @@ function SelectField(props) {
 }
 
 // src/fields/SliderField.tsx
-import React8 from "react";
-import { Controller as Controller7 } from "react-hook-form";
+import React9 from "react";
+import { Controller as Controller8 } from "react-hook-form";
 function CoercedSlider(props) {
   const { description, disabled, errorMessage, field, label, sliderProps } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(
     Slider,
     {
       ...defaults.slider,
@@ -557,12 +666,12 @@ function SliderField(props) {
     sliderProps,
     transform
   } = props;
-  return /* @__PURE__ */ React8.createElement(
-    Controller7,
+  return /* @__PURE__ */ React9.createElement(
+    Controller8,
     {
       control,
       name,
-      render: ({ field, fieldState }) => /* @__PURE__ */ React8.createElement("div", { className }, /* @__PURE__ */ React8.createElement(
+      render: ({ field, fieldState }) => /* @__PURE__ */ React9.createElement("div", { className }, /* @__PURE__ */ React9.createElement(
         CoercedSlider,
         {
           description,
@@ -582,8 +691,8 @@ function SliderField(props) {
 }
 
 // src/fields/SwitchField.tsx
-import React9 from "react";
-import { Controller as Controller8 } from "react-hook-form";
+import React10 from "react";
+import { Controller as Controller9 } from "react-hook-form";
 function SwitchField(props) {
   const {
     className,
@@ -596,12 +705,12 @@ function SwitchField(props) {
     switchProps
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React9.createElement(
-    Controller8,
+  return /* @__PURE__ */ React10.createElement(
+    Controller9,
     {
       control,
       name,
-      render: ({ field, fieldState }) => /* @__PURE__ */ React9.createElement("div", { className }, /* @__PURE__ */ React9.createElement(
+      render: ({ field, fieldState }) => /* @__PURE__ */ React10.createElement("div", { className }, /* @__PURE__ */ React10.createElement(
         Switch,
         {
           ...defaults.switch,
@@ -612,15 +721,15 @@ function SwitchField(props) {
           onValueChange: (val) => field.onChange(val)
         },
         label
-      ), description ? /* @__PURE__ */ React9.createElement("p", { className: "text-small text-default-400" }, description) : null, fieldState.error?.message ? /* @__PURE__ */ React9.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
+      ), description ? /* @__PURE__ */ React10.createElement("p", { className: "text-small text-default-400" }, description) : null, fieldState.error?.message ? /* @__PURE__ */ React10.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
       rules
     }
   );
 }
 
 // src/fields/TextareaField.tsx
-import React10 from "react";
-import { Controller as Controller9 } from "react-hook-form";
+import React11 from "react";
+import { Controller as Controller10 } from "react-hook-form";
 function TextareaField(props) {
   const {
     className,
@@ -633,12 +742,12 @@ function TextareaField(props) {
     textareaProps
   } = props;
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React10.createElement(
-    Controller9,
+  return /* @__PURE__ */ React11.createElement(
+    Controller10,
     {
       control,
       name,
-      render: ({ field, fieldState }) => /* @__PURE__ */ React10.createElement("div", { className }, /* @__PURE__ */ React10.createElement(
+      render: ({ field, fieldState }) => /* @__PURE__ */ React11.createElement("div", { className }, /* @__PURE__ */ React11.createElement(
         Textarea,
         {
           ...defaults.textarea,
@@ -687,7 +796,7 @@ function FormField({
   };
   switch (config.type) {
     case "input":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         InputField,
         {
           ...baseProps,
@@ -697,7 +806,7 @@ function FormField({
         }
       );
     case "textarea":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         TextareaField,
         {
           ...baseProps,
@@ -707,7 +816,7 @@ function FormField({
         }
       );
     case "select":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         SelectField,
         {
           ...baseProps,
@@ -721,7 +830,7 @@ function FormField({
         }
       );
     case "checkbox":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         CheckboxField,
         {
           ...baseProps,
@@ -731,7 +840,7 @@ function FormField({
         }
       );
     case "radio":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         RadioGroupField,
         {
           ...baseProps,
@@ -745,7 +854,7 @@ function FormField({
         }
       );
     case "switch":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         SwitchField,
         {
           ...baseProps,
@@ -755,7 +864,7 @@ function FormField({
         }
       );
     case "slider":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         SliderField,
         {
           ...baseProps,
@@ -765,7 +874,7 @@ function FormField({
         }
       );
     case "date":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         DateField,
         {
           ...baseProps,
@@ -775,7 +884,7 @@ function FormField({
         }
       );
     case "file":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         FileField,
         {
           ...baseProps,
@@ -786,6 +895,16 @@ function FormField({
           multiple: config.multiple
         }
       );
+    case "fontPicker":
+      return /* @__PURE__ */ React12.createElement(
+        FontPickerField,
+        {
+          ...baseProps,
+          control,
+          defaultValue: config.defaultValue,
+          fontPickerProps: config.fontPickerProps
+        }
+      );
     case "custom":
       return config.render({
         control,
@@ -837,12 +956,12 @@ function ConfigurableForm({
   });
   const renderFields = () => {
     if (layout === "grid") {
-      return /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React13.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((field) => /* @__PURE__ */ React12.createElement(
+        fields.map((field) => /* @__PURE__ */ React13.createElement(
           FormField,
           {
             key: field.name,
@@ -854,7 +973,7 @@ function ConfigurableForm({
       );
     }
     if (layout === "horizontal") {
-      return /* @__PURE__ */ React12.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field) => /* @__PURE__ */ React12.createElement(
+      return /* @__PURE__ */ React13.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field) => /* @__PURE__ */ React13.createElement(
         FormField,
         {
           key: field.name,
@@ -864,7 +983,7 @@ function ConfigurableForm({
         }
       )));
     }
-    return /* @__PURE__ */ React12.createElement("div", { className: `space-y-${spacing}` }, fields.map((field) => /* @__PURE__ */ React12.createElement(
+    return /* @__PURE__ */ React13.createElement("div", { className: `space-y-${spacing}` }, fields.map((field) => /* @__PURE__ */ React13.createElement(
       FormField,
       {
         key: field.name,
@@ -878,23 +997,23 @@ function ConfigurableForm({
     e.preventDefault();
     void handleSubmit();
   };
-  return /* @__PURE__ */ React12.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React12.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React12.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React12.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), isSubmitted && isSuccess && /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React13.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React13.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React13.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React13.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), isSubmitted && isSuccess && /* @__PURE__ */ React13.createElement(
     "div",
     {
       className: "mb-6 p-4 bg-success-50 border border-success-200 rounded-lg",
       "data-testid": "success-message"
     },
-    /* @__PURE__ */ React12.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
-    /* @__PURE__ */ React12.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
-  ), error && /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
+    /* @__PURE__ */ React13.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
+  ), error && /* @__PURE__ */ React13.createElement(
     "div",
     {
       className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
       "data-testid": "error-message"
     },
-    /* @__PURE__ */ React12.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
-    /* @__PURE__ */ React12.createElement("p", { className: "text-danger-700 text-sm mt-1" }, error)
-  ), renderFields(), /* @__PURE__ */ React12.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React12.createElement(
+    /* @__PURE__ */ React13.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
+    /* @__PURE__ */ React13.createElement("p", { className: "text-danger-700 text-sm mt-1" }, error)
+  ), renderFields(), /* @__PURE__ */ React13.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React13.createElement(
     Button2,
     {
       color: "primary",
@@ -904,7 +1023,7 @@ function ConfigurableForm({
       ...submitButtonProps
     },
     submitButtonText
-  ), showResetButton && /* @__PURE__ */ React12.createElement(
+  ), showResetButton && /* @__PURE__ */ React13.createElement(
     Button2,
     {
       isDisabled: isSubmitting,
@@ -916,11 +1035,24 @@ function ConfigurableForm({
   )));
 }
 
+// src/hooks/useHeroForm.ts
+import { useFormContext } from "react-hook-form";
+function useHeroForm() {
+  const form = useFormContext();
+  const defaults = useHeroHookFormDefaults();
+  return {
+    // All React Hook Form methods and state
+    ...form,
+    // Hero Hook Form styling defaults
+    defaults
+  };
+}
+
 // src/providers/FormProvider.tsx
-import React13 from "react";
+import React14 from "react";
 import { FormProvider as RHFProvider } from "react-hook-form";
 function FormProvider(props) {
-  return /* @__PURE__ */ React13.createElement(RHFProvider, { ...props.methods }, /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(RHFProvider, { ...props.methods }, /* @__PURE__ */ React14.createElement(
     "form",
     {
       className: props.className,
@@ -933,15 +1065,14 @@ function FormProvider(props) {
 }
 
 // src/submit/SubmitButton.tsx
-import React14 from "react";
-import { useFormContext } from "react-hook-form";
+import React15 from "react";
 function SubmitButton(props) {
-  const ctx = useFormContext();
+  const ctx = useFormContext2();
   const loading = props.isLoading ?? ctx.formState.isSubmitting;
   const isDisabledFromProps = props.buttonProps?.isDisabled ?? false;
   const isDisabled = Boolean(isDisabledFromProps) || Boolean(loading);
   const defaults = useHeroHookFormDefaults();
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(
     Button,
     {
       type: "submit",
@@ -949,7 +1080,7 @@ function SubmitButton(props) {
       ...props.buttonProps,
       isDisabled
     },
-    loading ? /* @__PURE__ */ React14.createElement("span", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ React14.createElement(Spinner, { size: "sm" }), "Submitting\u2026") : props.children
+    loading ? /* @__PURE__ */ React15.createElement("span", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ React15.createElement(Spinner, { size: "sm" }), "Submitting\u2026") : props.children
   );
 }
 
@@ -1141,8 +1272,11 @@ var commonValidations = {
   url: createUrlSchema()
 };
 
+// src/index.ts
+import { useFormContext as useFormContext2 } from "react-hook-form";
+
 // src/components/ZodForm.tsx
-import React15 from "react";
+import React16 from "react";
 import { Button as Button3 } from "@heroui/react";
 
 // src/zod-integration.ts
@@ -1178,6 +1312,13 @@ function useZodForm(config) {
   }
   return useForm2(config);
 }
+function createZodFormConfig(schema, fields, defaultValues) {
+  return {
+    schema,
+    fields,
+    ...defaultValues && { defaultValues }
+  };
+}
 
 // src/components/ZodForm.tsx
 function ZodForm({
@@ -1199,7 +1340,7 @@ function ZodForm({
   title
 }) {
   const form = useZodForm(config);
-  const [submissionState, setSubmissionState] = React15.useState({
+  const [submissionState, setSubmissionState] = React16.useState({
     error: void 0,
     isSubmitted: false,
     isSubmitting: false,
@@ -1256,12 +1397,12 @@ function ZodForm({
   };
   const renderFields = () => {
     if (layout === "grid") {
-      return /* @__PURE__ */ React15.createElement(
+      return /* @__PURE__ */ React16.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((field) => /* @__PURE__ */ React15.createElement(
+        config.fields.map((field) => /* @__PURE__ */ React16.createElement(
           FormField,
           {
             key: field.name,
@@ -1273,7 +1414,7 @@ function ZodForm({
       );
     }
     if (layout === "horizontal") {
-      return /* @__PURE__ */ React15.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, config.fields.map((field) => /* @__PURE__ */ React15.createElement(
+      return /* @__PURE__ */ React16.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, config.fields.map((field) => /* @__PURE__ */ React16.createElement(
         FormField,
         {
           key: field.name,
@@ -1283,7 +1424,7 @@ function ZodForm({
         }
       )));
     }
-    return /* @__PURE__ */ React15.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field) => /* @__PURE__ */ React15.createElement(
+    return /* @__PURE__ */ React16.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field) => /* @__PURE__ */ React16.createElement(
       FormField,
       {
         key: field.name,
@@ -1297,7 +1438,7 @@ function ZodForm({
     e.preventDefault();
     void handleSubmit();
   };
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (config.onError && Object.keys(form.formState.errors).length > 0) {
       config.onError(form.formState.errors);
     }
@@ -1312,23 +1453,23 @@ function ZodForm({
       values: form.getValues()
     });
   }
-  return /* @__PURE__ */ React15.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ React15.createElement("div", { className: "mb-6" }, /* @__PURE__ */ React15.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ React15.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), submissionState.isSubmitted && submissionState.isSuccess && /* @__PURE__ */ React15.createElement(
+  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)), submissionState.isSubmitted && submissionState.isSuccess && /* @__PURE__ */ React16.createElement(
     "div",
     {
       className: "mb-6 p-4 bg-success-50 border border-success-200 rounded-lg",
       "data-testid": "success-message"
     },
-    /* @__PURE__ */ React15.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
-    /* @__PURE__ */ React15.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
-  ), submissionState.error && errorDisplay !== "none" && /* @__PURE__ */ React15.createElement(
+    /* @__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.")
+  ), submissionState.error && errorDisplay !== "none" && /* @__PURE__ */ React16.createElement(
     "div",
     {
       className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
       "data-testid": "error-message"
     },
-    /* @__PURE__ */ React15.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
-    /* @__PURE__ */ React15.createElement("p", { className: "text-danger-700 text-sm mt-1" }, submissionState.error)
-  ), renderFields(), /* @__PURE__ */ React15.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React15.createElement(
+    /* @__PURE__ */ React16.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
+    /* @__PURE__ */ React16.createElement("p", { className: "text-danger-700 text-sm mt-1" }, submissionState.error)
+  ), renderFields(), /* @__PURE__ */ React16.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React16.createElement(
     Button3,
     {
       color: "primary",
@@ -1338,7 +1479,7 @@ function ZodForm({
       ...submitButtonProps
     },
     submitButtonText
-  ), showResetButton && /* @__PURE__ */ React15.createElement(
+  ), showResetButton && /* @__PURE__ */ React16.createElement(
     Button3,
     {
       isDisabled: submissionState.isSubmitting,
@@ -1354,6 +1495,7 @@ export {
   ConfigurableForm,
   DateField,
   FileField,
+  FontPickerField,
   FormField,
   FormProvider,
   HeroHookFormProvider,
@@ -1385,13 +1527,16 @@ export {
   createRequiredCheckboxSchema,
   createRequiredSchema,
   createUrlSchema,
+  createZodFormConfig,
   getFieldError,
   getFormErrors,
   hasFieldError,
   hasFormErrors,
   simulateFieldInput,
   simulateFormSubmission,
+  useFormContext2 as useFormContext,
   useFormHelper,
+  useHeroForm,
   useHeroHookFormDefaults,
   useZodForm,
   waitForFormState