@rachelallyson/hero-hook-form 1.0.0 → 1.0.1

package/dist/react/index.js

@@ -69,6 +69,7 @@ function useFormHelper({
 
 // src/components/FormField.tsx
 import React11 from "react";
+import { useWatch } from "react-hook-form";
 
 // src/fields/CheckboxField.tsx
 import React2 from "react";
@@ -301,8 +302,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);
       }
     }
@@ -664,7 +665,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,
@@ -773,6 +786,14 @@ function FormField({
           multiple: config.multiple
         }
       );
+    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}`);
@@ -853,8 +874,8 @@ 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(
@@ -940,144 +961,222 @@ 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/components/ZodForm.tsx
+import React15 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(formConfig);
+  return useForm2(config);
 }
 
 // src/components/ZodForm.tsx
@@ -1085,10 +1184,12 @@ function ZodForm({
   className,
   columns = 1,
   config,
+  errorDisplay = "inline",
   layout = "vertical",
   onError,
   onSubmit,
   onSuccess,
+  render,
   resetButtonText = "Reset",
   showResetButton = false,
   spacing = "4",
@@ -1192,10 +1293,25 @@ function ZodForm({
       }
     )));
   };
-  const handleFormSubmit = (e2) => {
-    e2.preventDefault();
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
     void handleSubmit();
   };
+  React15.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__ */ 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(
     "div",
     {
@@ -1204,7 +1320,7 @@ function ZodForm({
     },
     /* @__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(
+  ), submissionState.error && errorDisplay !== "none" && /* @__PURE__ */ React15.createElement(
     "div",
     {
       className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
@@ -1250,7 +1366,33 @@ export {
   TextareaField,
   ZodForm,
   applyServerErrors,
+  commonValidations,
+  createConditionalSchema,
+  createConfirmPasswordSchema,
+  createDateSchema,
+  createEmailSchema,
+  createFileSchema,
+  createFormTestUtils,
+  createFutureDateSchema,
+  createMaxLengthSchema,
+  createMinLengthSchema,
+  createMockFormData,
+  createMockFormErrors,
+  createNumberRangeSchema,
+  createPasswordSchema,
+  createPastDateSchema,
+  createPhoneSchema,
+  createRequiredCheckboxSchema,
+  createRequiredSchema,
+  createUrlSchema,
+  getFieldError,
+  getFormErrors,
+  hasFieldError,
+  hasFormErrors,
+  simulateFieldInput,
+  simulateFormSubmission,
   useFormHelper,
   useHeroHookFormDefaults,
-  useZodForm
+  useZodForm,
+  waitForFormState
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rachelallyson/hero-hook-form",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Typed form helpers that combine React Hook Form and HeroUI components.",
   "author": "Rachel Higley",
   "homepage": "https://github.com/rachelallyson/hero-hook-form#readme",
@@ -32,19 +32,17 @@
   "license": "ISC",
   "sideEffects": false,
   "type": "module",
-  "main": "./dist/index.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.js"
     },
     "./react": {
       "types": "./dist/react/index.d.ts",
-      "import": "./dist/react/index.js",
-      "require": "./dist/react/index.cjs"
+      "import": "./dist/react/index.js"
     }
   },
   "files": [
@@ -57,8 +55,8 @@
     "node": ">=18.0.0"
   },
   "scripts": {
-    "build": "tsup src/index.ts --format esm,cjs --dts --clean && tsup src/index.ts --format esm,cjs --dts --env.NODE_ENV=production --tsconfig tsconfig.react.json --out-dir dist/react",
-    "dev:build": "tsup src/index.ts --format esm,cjs --dts --watch",
+    "build": "tsup src/index.ts --format esm --dts --clean && tsup src/index.ts --format esm --dts --env.NODE_ENV=production --tsconfig tsconfig.react.json --out-dir dist/react",
+    "dev:build": "tsup src/index.ts --format esm --dts --watch",
     "lint": "eslint src",
     "typecheck": "tsc --noEmit",
     "cy:open": "cypress open --component",
@@ -72,14 +70,16 @@
     "@eslint/js": "^9.34.0",
     "@heroui/button": "^2.2.25",
     "@heroui/checkbox": "^2.3.25",
+    "@heroui/date-input": "^2.3.25",
+    "@heroui/date-picker": "^2.3.26",
     "@heroui/input": "^2.4.26",
     "@heroui/radio": "^2.3.25",
     "@heroui/react": "^2.8.3",
     "@heroui/select": "^2.4.26",
+    "@heroui/slider": "^2.4.22",
     "@heroui/spinner": "^2.2.22",
     "@heroui/switch": "^2.2.23",
-    "@hookform/resolvers": "^5.2.1",
-    "@kuzu-media/eslint-config-nextjs": "^0.0.20",
+    "@heroui/system": "^2.2.25",
     "@types/node": "^24.3.0",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
@@ -87,7 +87,7 @@
     "cypress": "^15.1.0",
     "cypress-terminal-report": "^7.2.1",
     "eslint": "^9.34.0",
-    "graphql": "^16.11.0",
+    "jsdom": "^26.1.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-hook-form": "^7.62.0",
@@ -100,12 +100,16 @@
   "peerDependencies": {
     "@heroui/button": ">=2 <3",
     "@heroui/checkbox": ">=2 <3",
+    "@heroui/date-input": ">=2 <3",
+    "@heroui/date-picker": ">=2 <3",
     "@heroui/input": ">=2 <3",
     "@heroui/radio": ">=2 <3",
     "@heroui/react": ">=2 <3",
     "@heroui/select": ">=2 <3",
+    "@heroui/slider": ">=2 <3",
     "@heroui/spinner": ">=2 <3",
     "@heroui/switch": ">=2 <3",
+    "@heroui/system": ">=2 <3",
     "react": ">=18.2.0 <20",
     "react-dom": ">=18.2.0 <20",
     "react-hook-form": ">=7 <8",
@@ -118,6 +122,12 @@
     "@heroui/checkbox": {
       "optional": true
     },
+    "@heroui/date-input": {
+      "optional": true
+    },
+    "@heroui/date-picker": {
+      "optional": true
+    },
     "@heroui/input": {
       "optional": true
     },
@@ -130,19 +140,18 @@
     "@heroui/select": {
       "optional": true
     },
+    "@heroui/slider": {
+      "optional": true
+    },
     "@heroui/spinner": {
       "optional": true
     },
     "@heroui/switch": {
       "optional": true
+    },
+    "@heroui/system": {
+      "optional": true
     }
   },
-  "dependencies": {
-    "@tailwindcss/postcss": "^4.1.12",
-    "framer-motion": "^12.23.12",
-    "jsdom": "^26.1.0",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.12",
-    "zod": ">=4"
-  }
-}
+  "dependencies": {}
+}

package/dist/dist-ICUU7SXF.js

@@ -1,8 +0,0 @@
-"use client";
-
-// node_modules/@heroui/dom-animation/dist/index.mjs
-import { domAnimation } from "framer-motion";
-var index_default = domAnimation;
-export {
-  index_default as default
-};