@rachelallyson/hero-hook-form 1.0.0 → 1.1.0

package/dist/react/index.js

@@ -1,5 +1,12 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
 // 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 +75,8 @@ function useFormHelper({
 }
 
 // src/components/FormField.tsx
-import React11 from "react";
+import React12 from "react";
+import { useWatch } from "react-hook-form";
 
 // src/fields/CheckboxField.tsx
 import React2 from "react";
@@ -301,8 +309,8 @@ function CoercedFileInput(props) {
       type: "file",
       value: field.value ? "" : "",
       onBlur: field.onBlur,
-      onChange: (e2) => {
-        const target = e2.target;
+      onChange: (e) => {
+        const target = e.target;
         field.onChange(target.files);
       }
     }
@@ -348,13 +356,60 @@ 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;
+try {
+  const fontPickerModule = __require("@rachelallyson/heroui-font-picker");
+  FontPickerComponent = fontPickerModule.FontPicker;
+} catch (e) {
+  console.debug("Font picker package not available - FontPickerField will show fallback UI");
+}
+function FontPickerField(props) {
+  const {
+    className,
+    control,
+    description,
+    fontPickerProps,
+    isDisabled,
+    label,
+    name,
+    rules
+  } = props;
+  if (!FontPickerComponent) {
+    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(
+        FontPickerComponent,
+        {
+          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,
@@ -382,12 +437,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,
@@ -416,8 +471,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,
@@ -431,12 +486,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,
@@ -449,7 +504,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),
@@ -458,15 +513,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,
@@ -481,14 +536,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,
@@ -506,7 +561,7 @@ function SelectField(props) {
               field.onChange(next);
             }
           },
-          options.map((opt) => /* @__PURE__ */ React7.createElement(
+          options.map((opt) => /* @__PURE__ */ React8.createElement(
             SelectItem,
             {
               key: String(opt.value),
@@ -523,12 +578,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,
@@ -556,12 +611,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,
@@ -581,8 +636,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,
@@ -595,12 +650,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,
@@ -611,15 +666,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,
@@ -632,12 +687,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,
@@ -664,7 +719,19 @@ function FormField({
   submissionState
 }) {
   const { control } = form;
+  const watchedValues = useWatch({ control });
+  if (config.condition && !config.condition(watchedValues)) {
+    return null;
+  }
+  if (config.dependsOn) {
+    const dependentValue = watchedValues[config.dependsOn];
+    if (config.dependsOnValue !== void 0 && dependentValue !== config.dependsOnValue) {
+      return null;
+    }
+  }
   const baseProps = {
+    ariaDescribedBy: config.ariaDescribedBy,
+    ariaLabel: config.ariaLabel,
     className: config.className,
     description: config.description,
     isDisabled: config.isDisabled ?? submissionState.isSubmitting,
@@ -674,7 +741,7 @@ function FormField({
   };
   switch (config.type) {
     case "input":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         InputField,
         {
           ...baseProps,
@@ -684,7 +751,7 @@ function FormField({
         }
       );
     case "textarea":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         TextareaField,
         {
           ...baseProps,
@@ -694,7 +761,7 @@ function FormField({
         }
       );
     case "select":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         SelectField,
         {
           ...baseProps,
@@ -708,7 +775,7 @@ function FormField({
         }
       );
     case "checkbox":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         CheckboxField,
         {
           ...baseProps,
@@ -718,7 +785,7 @@ function FormField({
         }
       );
     case "radio":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         RadioGroupField,
         {
           ...baseProps,
@@ -732,7 +799,7 @@ function FormField({
         }
       );
     case "switch":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         SwitchField,
         {
           ...baseProps,
@@ -742,7 +809,7 @@ function FormField({
         }
       );
     case "slider":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         SliderField,
         {
           ...baseProps,
@@ -752,7 +819,7 @@ function FormField({
         }
       );
     case "date":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         DateField,
         {
           ...baseProps,
@@ -762,7 +829,7 @@ function FormField({
         }
       );
     case "file":
-      return /* @__PURE__ */ React11.createElement(
+      return /* @__PURE__ */ React12.createElement(
         FileField,
         {
           ...baseProps,
@@ -773,6 +840,24 @@ 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,
+        errors: form.formState.errors,
+        form,
+        isSubmitting: submissionState.isSubmitting,
+        name: config.name
+      });
     default: {
       const fieldType = config.type;
       console.warn(`Unknown field type: ${fieldType}`);
@@ -816,12 +901,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,
@@ -833,7 +918,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,
@@ -843,7 +928,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,
@@ -853,27 +938,27 @@ function ConfigurableForm({
       }
     )));
   };
-  const handleFormSubmit = (e2) => {
-    e2.preventDefault();
+  const handleFormSubmit = (e) => {
+    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",
@@ -883,7 +968,7 @@ function ConfigurableForm({
       ...submitButtonProps
     },
     submitButtonText
-  ), showResetButton && /* @__PURE__ */ React12.createElement(
+  ), showResetButton && /* @__PURE__ */ React13.createElement(
     Button2,
     {
       isDisabled: isSubmitting,
@@ -895,11 +980,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,
@@ -912,15 +1010,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",
@@ -928,7 +1025,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
   );
 }
 
@@ -940,144 +1037,232 @@ function applyServerErrors(setError, serverError) {
   }
 }
 
-// src/components/ZodForm.tsx
-import React15 from "react";
-import { Button as Button3 } from "@heroui/react";
+// src/utils/testing.ts
+function createFormTestUtils(form) {
+  return {
+    /**
+     * Get a field by name
+     */
+    getField: (name) => {
+      return {
+        error: form.formState.errors[name],
+        isDirty: !!form.formState.dirtyFields[name],
+        isTouched: !!form.formState.touchedFields[name],
+        value: form.getValues(name)
+      };
+    },
+    /**
+     * Get the current form state
+     */
+    getFormState: () => ({
+      errors: form.formState.errors,
+      isSubmitted: form.formState.isSubmitted,
+      isSubmitting: form.formState.isSubmitting,
+      isSuccess: form.formState.isSubmitSuccessful,
+      values: form.getValues()
+    }),
+    /**
+     * Reset the form
+     */
+    resetForm: () => {
+      form.reset();
+    },
+    /**
+     * Set a field value
+     */
+    setFieldValue: (name, value) => {
+      form.setValue(name, value, { shouldValidate: true });
+    },
+    /**
+     * Submit the form
+     */
+    submitForm: async () => {
+      const isValid = await form.trigger();
+      if (isValid) {
+        await form.handleSubmit(() => {
+        })();
+      }
+    },
+    /**
+     * Trigger validation for a field or all fields
+     */
+    triggerValidation: async (name) => {
+      if (name) {
+        return await form.trigger(name);
+      }
+      return await form.trigger();
+    }
+  };
+}
+function createMockFormData(overrides = {}) {
+  return {
+    agreeToTerms: true,
+    confirmPassword: "password123",
+    email: "test@example.com",
+    firstName: "John",
+    lastName: "Doe",
+    password: "password123",
+    phone: "123-456-7890",
+    ...overrides
+  };
+}
+function createMockFormErrors(overrides = {}) {
+  return {
+    email: { message: "Invalid email address", type: "pattern" },
+    password: { message: "Password is too short", type: "minLength" },
+    ...overrides
+  };
+}
+function waitForFormState(form, condition, timeout = 5e3) {
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+    const checkState = () => {
+      if (condition(form.formState)) {
+        resolve();
+        return;
+      }
+      if (Date.now() - startTime > timeout) {
+        reject(new Error("Timeout waiting for form state"));
+        return;
+      }
+      setTimeout(checkState, 100);
+    };
+    checkState();
+  });
+}
+function simulateFieldInput(form, name, value) {
+  form.setValue(name, value);
+  void form.trigger(name);
+}
+function simulateFormSubmission(form, onSubmit) {
+  return form.handleSubmit(onSubmit)();
+}
+function hasFormErrors(form) {
+  return Object.keys(form.formState.errors).length > 0;
+}
+function getFormErrors(form) {
+  return Object.values(form.formState.errors).map(
+    (error) => error.message
+  );
+}
+function hasFieldError(form, name) {
+  return !!form.formState.errors[name];
+}
+function getFieldError(form, name) {
+  const error = form.formState.errors[name];
+  return error?.message;
+}
 
-// node_modules/@hookform/resolvers/dist/resolvers.mjs
-import { get as e, set as t } from "react-hook-form";
-var r = (t3, r2, o3) => {
-  if (t3 && "reportValidity" in t3) {
-    const s3 = e(o3, r2);
-    t3.setCustomValidity(s3 && s3.message || ""), t3.reportValidity();
+// src/utils/validation.ts
+import { z } from "zod";
+var createMinLengthSchema = (min, fieldName) => z.string().min(min, `${fieldName} must be at least ${min} characters`);
+var createMaxLengthSchema = (max, fieldName) => z.string().max(max, `${fieldName} must be no more than ${max} characters`);
+var createEmailSchema = () => z.email("Please enter a valid email address");
+var createRequiredSchema = (fieldName) => z.string().min(1, `${fieldName} is required`);
+var createUrlSchema = () => z.string().url("Please enter a valid URL");
+var createPhoneSchema = () => z.string().regex(/^[+]?[1-9][\d]{0,15}$/, "Please enter a valid phone number");
+var createPasswordSchema = (minLength = 8) => z.string().min(minLength, `Password must be at least ${minLength} characters`).regex(
+  /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/,
+  "Password must contain at least one uppercase letter, one lowercase letter, and one number"
+);
+var createConfirmPasswordSchema = (passwordField) => z.string().refine(
+  (val) => {
+    return true;
+  },
+  {
+    message: "Passwords do not match"
   }
-};
-var o = (e2, t3) => {
-  for (const o3 in t3.fields) {
-    const s3 = t3.fields[o3];
-    s3 && s3.ref && "reportValidity" in s3.ref ? r(s3.ref, o3, e2) : s3 && s3.refs && s3.refs.forEach((t4) => r(t4, o3, e2));
+);
+var createNumberRangeSchema = (min, max, fieldName) => z.number().min(min, `${fieldName} must be at least ${min}`).max(max, `${fieldName} must be no more than ${max}`);
+var createDateSchema = (fieldName) => z.date({ message: `${fieldName} is required` });
+var createFutureDateSchema = (fieldName) => z.date({ message: `${fieldName} is required` }).refine((date) => date > /* @__PURE__ */ new Date(), {
+  message: `${fieldName} must be in the future`
+});
+var createPastDateSchema = (fieldName) => z.date({ message: `${fieldName} is required` }).refine((date) => date < /* @__PURE__ */ new Date(), {
+  message: `${fieldName} must be in the past`
+});
+var createFileSchema = (maxSizeInMB = 5, allowedTypes = ["image/jpeg", "image/png", "image/gif"]) => z.instanceof(File).refine(
+  (file) => file.size <= maxSizeInMB * 1024 * 1024,
+  `File size must be less than ${maxSizeInMB}MB`
+).refine(
+  (file) => allowedTypes.includes(file.type),
+  `File type must be one of: ${allowedTypes.join(", ")}`
+);
+var createRequiredCheckboxSchema = (fieldName) => z.boolean().refine((val) => val === true, {
+  message: `You must agree to ${fieldName}`
+});
+var createConditionalSchema = (condition, schema, errorMessage = "This field is required") => z.any().refine(
+  (val) => {
+    return true;
+  },
+  {
+    message: errorMessage
   }
+);
+var commonValidations = {
+  conditional: (condition, schema, errorMessage) => createConditionalSchema(condition, schema, errorMessage),
+  confirmPassword: (passwordField) => createConfirmPasswordSchema(passwordField),
+  date: (fieldName) => createDateSchema(fieldName),
+  email: createEmailSchema(),
+  file: (maxSizeInMB, allowedTypes) => createFileSchema(maxSizeInMB, allowedTypes),
+  futureDate: (fieldName) => createFutureDateSchema(fieldName),
+  maxLength: (max, fieldName) => createMaxLengthSchema(max, fieldName),
+  minLength: (min, fieldName) => createMinLengthSchema(min, fieldName),
+  numberRange: (min, max, fieldName) => createNumberRangeSchema(min, max, fieldName),
+  password: (minLength) => createPasswordSchema(minLength),
+  pastDate: (fieldName) => createPastDateSchema(fieldName),
+  phone: createPhoneSchema(),
+  required: (fieldName) => createRequiredSchema(fieldName),
+  requiredCheckbox: (fieldName) => createRequiredCheckboxSchema(fieldName),
+  url: createUrlSchema()
 };
-var s = (r2, s3) => {
-  s3.shouldUseNativeValidation && o(r2, s3);
-  const n3 = {};
-  for (const o3 in r2) {
-    const f = e(s3.fields, o3), c = Object.assign(r2[o3] || {}, { ref: f && f.ref });
-    if (i(s3.names || Object.keys(r2), o3)) {
-      const r3 = Object.assign({}, e(n3, o3));
-      t(r3, "root", c), t(n3, o3, r3);
-    } else t(n3, o3, c);
-  }
-  return n3;
-};
-var i = (e2, t3) => {
-  const r2 = n(t3);
-  return e2.some((e3) => n(e3).match(`^${r2}\\.\\d+`));
-};
-function n(e2) {
-  return e2.replace(/\]|\[/g, "");
-}
 
-// node_modules/@hookform/resolvers/zod/dist/zod.mjs
-import { appendErrors as o2 } from "react-hook-form";
-import * as n2 from "zod/v4/core";
-function t2(r2, e2) {
-  try {
-    var o3 = r2();
-  } catch (r3) {
-    return e2(r3);
-  }
-  return o3 && o3.then ? o3.then(void 0, e2) : o3;
-}
-function s2(r2, e2) {
-  for (var n3 = {}; r2.length; ) {
-    var t3 = r2[0], s3 = t3.code, i3 = t3.message, a2 = t3.path.join(".");
-    if (!n3[a2]) if ("unionErrors" in t3) {
-      var u = t3.unionErrors[0].errors[0];
-      n3[a2] = { message: u.message, type: u.code };
-    } else n3[a2] = { message: i3, type: s3 };
-    if ("unionErrors" in t3 && t3.unionErrors.forEach(function(e3) {
-      return e3.errors.forEach(function(e4) {
-        return r2.push(e4);
-      });
-    }), e2) {
-      var c = n3[a2].types, f = c && c[t3.code];
-      n3[a2] = o2(a2, e2, n3, s3, f ? [].concat(f, t3.message) : t3.message);
-    }
-    r2.shift();
-  }
-  return n3;
-}
-function i2(r2, e2) {
-  for (var n3 = {}; r2.length; ) {
-    var t3 = r2[0], s3 = t3.code, i3 = t3.message, a2 = t3.path.join(".");
-    if (!n3[a2]) if ("invalid_union" === t3.code && t3.errors.length > 0) {
-      var u = t3.errors[0][0];
-      n3[a2] = { message: u.message, type: u.code };
-    } else n3[a2] = { message: i3, type: s3 };
-    if ("invalid_union" === t3.code && t3.errors.forEach(function(e3) {
-      return e3.forEach(function(e4) {
-        return r2.push(e4);
-      });
-    }), e2) {
-      var c = n3[a2].types, f = c && c[t3.code];
-      n3[a2] = o2(a2, e2, n3, s3, f ? [].concat(f, t3.message) : t3.message);
-    }
-    r2.shift();
-  }
-  return n3;
-}
-function a(o3, a2, u) {
-  if (void 0 === u && (u = {}), (function(r2) {
-    return "_def" in r2 && "object" == typeof r2._def && "typeName" in r2._def;
-  })(o3)) return function(n3, i3, c) {
-    try {
-      return Promise.resolve(t2(function() {
-        return Promise.resolve(o3["sync" === u.mode ? "parse" : "parseAsync"](n3, a2)).then(function(e2) {
-          return c.shouldUseNativeValidation && o({}, c), { errors: {}, values: u.raw ? Object.assign({}, n3) : e2 };
-        });
-      }, function(r2) {
-        if ((function(r3) {
-          return Array.isArray(null == r3 ? void 0 : r3.issues);
-        })(r2)) return { values: {}, errors: s(s2(r2.errors, !c.shouldUseNativeValidation && "all" === c.criteriaMode), c) };
-        throw r2;
-      }));
-    } catch (r2) {
-      return Promise.reject(r2);
-    }
-  };
-  if ((function(r2) {
-    return "_zod" in r2 && "object" == typeof r2._zod;
-  })(o3)) return function(s3, c, f) {
+// src/index.ts
+import { useFormContext as useFormContext2 } from "react-hook-form";
+
+// src/components/ZodForm.tsx
+import React16 from "react";
+import { Button as Button3 } from "@heroui/react";
+
+// src/zod-integration.ts
+import { useForm as useForm2 } from "react-hook-form";
+import { z as z2 } from "zod";
+function createZodResolver(schema) {
+  return async (values, context) => {
     try {
-      return Promise.resolve(t2(function() {
-        return Promise.resolve(("sync" === u.mode ? n2.parse : n2.parseAsync)(o3, s3, a2)).then(function(e2) {
-          return f.shouldUseNativeValidation && o({}, f), { errors: {}, values: u.raw ? Object.assign({}, s3) : e2 };
+      const result = await schema.parseAsync(values);
+      return {
+        errors: {},
+        values: result
+      };
+    } catch (error) {
+      if (error instanceof z2.ZodError) {
+        const errors = {};
+        error.issues.forEach((err) => {
+          const path = err.path.join(".");
+          errors[path] = { message: err.message };
         });
-      }, function(r2) {
-        if ((function(r3) {
-          return r3 instanceof n2.$ZodError;
-        })(r2)) return { values: {}, errors: s(i2(r2.issues, !f.shouldUseNativeValidation && "all" === f.criteriaMode), f) };
-        throw r2;
-      }));
-    } catch (r2) {
-      return Promise.reject(r2);
+        return {
+          errors,
+          values: {}
+        };
+      }
+      throw error;
     }
   };
-  throw new Error("Invalid input: not a Zod schema");
 }
-
-// src/zod-integration.ts
-import { useForm as useForm2 } from "react-hook-form";
 function useZodForm(config) {
   if (!config.resolver && config.schema) {
-    const resolver = a(config.schema);
-    config.resolver = resolver;
+    config.resolver = createZodResolver(config.schema);
   }
-  const formConfig = {
-    ...config
+  return useForm2(config);
+}
+function createZodFormConfig(schema, fields, defaultValues) {
+  return {
+    schema,
+    fields,
+    ...defaultValues && { defaultValues }
   };
-  return useForm2(formConfig);
 }
 
 // src/components/ZodForm.tsx
@@ -1085,10 +1270,12 @@ function ZodForm({
   className,
   columns = 1,
   config,
+  errorDisplay = "inline",
   layout = "vertical",
   onError,
   onSubmit,
   onSuccess,
+  render,
   resetButtonText = "Reset",
   showResetButton = false,
   spacing = "4",
@@ -1098,7 +1285,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,
@@ -1155,12 +1342,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,
@@ -1172,7 +1359,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,
@@ -1182,7 +1369,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,
@@ -1192,27 +1379,42 @@ function ZodForm({
       }
     )));
   };
-  const handleFormSubmit = (e2) => {
-    e2.preventDefault();
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
     void handleSubmit();
   };
-  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(
+  React16.useEffect(() => {
+    if (config.onError && Object.keys(form.formState.errors).length > 0) {
+      config.onError(form.formState.errors);
+    }
+  }, [form.formState.errors, config.onError]);
+  if (render) {
+    return render({
+      errors: form.formState.errors,
+      form,
+      isSubmitted: submissionState.isSubmitted,
+      isSubmitting: submissionState.isSubmitting,
+      isSuccess: submissionState.isSuccess,
+      values: form.getValues()
+    });
+  }
+  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 && /* @__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",
@@ -1222,7 +1424,7 @@ function ZodForm({
       ...submitButtonProps
     },
     submitButtonText
-  ), showResetButton && /* @__PURE__ */ React15.createElement(
+  ), showResetButton && /* @__PURE__ */ React16.createElement(
     Button3,
     {
       isDisabled: submissionState.isSubmitting,
@@ -1238,6 +1440,7 @@ export {
   ConfigurableForm,
   DateField,
   FileField,
+  FontPickerField,
   FormField,
   FormProvider,
   HeroHookFormProvider,
@@ -1250,7 +1453,36 @@ export {
   TextareaField,
   ZodForm,
   applyServerErrors,
+  commonValidations,
+  createConditionalSchema,
+  createConfirmPasswordSchema,
+  createDateSchema,
+  createEmailSchema,
+  createFileSchema,
+  createFormTestUtils,
+  createFutureDateSchema,
+  createMaxLengthSchema,
+  createMinLengthSchema,
+  createMockFormData,
+  createMockFormErrors,
+  createNumberRangeSchema,
+  createPasswordSchema,
+  createPastDateSchema,
+  createPhoneSchema,
+  createRequiredCheckboxSchema,
+  createRequiredSchema,
+  createUrlSchema,
+  createZodFormConfig,
+  getFieldError,
+  getFormErrors,
+  hasFieldError,
+  hasFormErrors,
+  simulateFieldInput,
+  simulateFormSubmission,
+  useFormContext2 as useFormContext,
   useFormHelper,
+  useHeroForm,
   useHeroHookFormDefaults,
-  useZodForm
+  useZodForm,
+  waitForFormState
 };