@rachelallyson/hero-hook-form 2.1.0 → 2.1.2

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 All notable changes to this project will be documented in this file.
 
+## [2.1.2] - 2025-01-28
+
+### Added
+
+- **Date field helper**: Added `FormFieldHelpers.date()` method for creating date fields in forms
+- Supports optional `dateProps` parameter for customizing the date input component
+- Comprehensive test coverage for date field functionality
+
+### Fixed
+
+- **ZodForm FormProvider**: Wrapped ZodForm component with FormProvider to ensure form context is properly available
+- Fixes issues with form context not being accessible in nested components
+
+## [2.1.1] - 2025-01-28
+
+### Fixed
+
+- **ServerActionForm imports**: Use `#ui` alias for HeroUI imports to support both `@heroui/react` and individual package imports
+- Ensures compatibility across different HeroUI installation patterns
+
 ## [2.1.0] - 2025-01-28
 
 ### Added

package/dist/cypress/index.js

@@ -293,48 +293,72 @@ function expectNoValidationErrors() {
   return cy.get("body").should("not.contain", "error").and("not.contain", "invalid");
 }
 function expectFieldError(fieldLabel, errorMessage) {
-  return cy.contains("label", fieldLabel).closest("div").should("contain", errorMessage);
+  const fieldContainer = cy.contains("label", fieldLabel).closest("div");
+  if (errorMessage) {
+    return fieldContainer.should("contain", errorMessage);
+  }
+  return fieldContainer.should(($div) => {
+    const text = $div.text();
+    const hasError = text.includes("error") || text.includes("invalid") || text.includes("required") || $div.find('[class*="error"], [class*="invalid"], [class*="danger"]').length > 0;
+    expect(hasError, "Field should have an error").to.be.true;
+  });
 }
 function expectFieldValid(fieldLabel) {
   return cy.contains("label", fieldLabel).closest("div").should("not.contain", "error").and("not.contain", "invalid");
 }
 function triggerValidation(submitButton = false) {
   if (submitButton) {
-    return cy.get(HERO_UI_SELECTORS.button.submit).first().click();
+    return withRetry(() => {
+      cy.get("form").should("exist");
+      cy.get(HERO_UI_SELECTORS.button.submit).first().should("be.visible").should("not.be.disabled").click();
+      return cy.get("form");
+    }, DEFAULT_CONFIG);
   }
   return cy.get("input").first().blur();
 }
 function submitForm() {
-  return cy.get(HERO_UI_SELECTORS.button.submit).first().click();
+  return withRetry(() => {
+    cy.get("form").should("exist");
+    cy.get(HERO_UI_SELECTORS.button.submit).first().should("be.visible").should("not.be.disabled").click();
+    return cy.get("form");
+  }, DEFAULT_CONFIG);
 }
 function submitAndExpectSuccess(successIndicator) {
-  cy.get(HERO_UI_SELECTORS.button.submit).first().click();
-  if (successIndicator) {
-    return cy.contains(successIndicator).should("be.visible");
-  }
-  return cy.get("body").should("contain.one.of", ["success", "submitted", "complete", "thank you"]);
+  return withRetry(() => {
+    cy.get("form").should("exist");
+    cy.get(HERO_UI_SELECTORS.button.submit).first().should("be.visible").should("not.be.disabled").click();
+    if (successIndicator) {
+      cy.contains(successIndicator).should("be.visible");
+    } else {
+      cy.get("body").should("contain.one.of", ["success", "submitted", "complete", "thank you"]);
+    }
+    return cy.get("form");
+  }, DEFAULT_CONFIG);
 }
 function submitAndExpectErrors(errorMessage, formIndex = 0) {
-  cy.get(HERO_UI_SELECTORS.button.submit).eq(formIndex).click();
-  cy.get("form").should("exist");
-  cy.wait(500);
-  if (errorMessage) {
-    cy.get("body").then(($body) => {
-      if ($body.text().includes(errorMessage)) {
-        cy.contains(errorMessage).should("be.visible");
-      } else {
-        cy.log("Expected error message not found:", errorMessage);
-        cy.get('[class*="text-danger"], [class*="text-red"], [class*="error"]').then(($errors) => {
-          cy.log("Found validation errors:", $errors.length);
-          $errors.each((index, error) => {
-            cy.log(`Error ${index}:`, error.textContent);
+  return withRetry(() => {
+    cy.get("form").should("exist");
+    cy.get(HERO_UI_SELECTORS.button.submit).eq(formIndex).should("be.visible").should("not.be.disabled").click();
+    cy.get("form").should("exist");
+    cy.wait(500);
+    if (errorMessage) {
+      cy.get("body").then(($body) => {
+        if ($body.text().includes(errorMessage)) {
+          cy.contains(errorMessage).should("be.visible");
+        } else {
+          cy.log("Expected error message not found:", errorMessage);
+          cy.get('[class*="text-danger"], [class*="text-red"], [class*="error"]').then(($errors) => {
+            cy.log("Found validation errors:", $errors.length);
+            $errors.each((index, error) => {
+              cy.log(`Error ${index}:`, error.textContent);
+            });
           });
-        });
-        cy.contains(errorMessage).should("be.visible");
-      }
-    });
-  }
-  return cy.get("form");
+          cy.contains(errorMessage).should("be.visible");
+        }
+      });
+    }
+    return cy.get("form");
+  }, DEFAULT_CONFIG);
 }
 function resetForm() {
   return cy.get("body").then(($body) => {
@@ -348,7 +372,11 @@ function resetForm() {
 }
 function interceptFormSubmission(method, url, alias) {
   cy.intercept(method, url).as(alias);
-  return cy.get(HERO_UI_SELECTORS.button.submit).first().click();
+  return withRetry(() => {
+    cy.get("form").should("exist");
+    cy.get(HERO_UI_SELECTORS.button.submit).first().should("be.visible").should("not.be.disabled").click();
+    return cy.get("form");
+  }, DEFAULT_CONFIG);
 }
 function verifyFormExists() {
   return cy.get("form").should("exist");
@@ -365,7 +393,7 @@ function verifyFieldCount(selector, count) {
   return cy.get(selector).filter(":visible").not('[type="hidden"]').should("have.length", count);
 }
 function getFormData() {
-  return extractFormData();
+  return extractFormData().then((data) => data);
 }
 function fillCompleteForm(formData) {
   return cy.then(() => {

package/dist/index.d.ts

@@ -12,9 +12,9 @@ import { Input, Textarea } from '@heroui/input';
 import { RadioGroup } from '@heroui/radio';
 import { Select } from '@heroui/select';
 import { Switch } from '@heroui/switch';
+import { Button as Button$1 } from '@heroui/button';
 import { DateInput } from '@heroui/date-input';
 import { Slider } from '@heroui/slider';
-import { Button as Button$1 } from '@heroui/button';
 
 interface FieldBaseProps<TFieldValues extends FieldValues, TValue> {
     name: Path<TFieldValues>;
@@ -271,7 +271,7 @@ interface ServerActionFormProps<T extends FieldValues> {
     resetButtonText?: string;
     showResetButton?: boolean;
     spacing?: "2" | "4" | "6" | "8" | "lg";
-    submitButtonProps?: Partial<React$1.ComponentProps<typeof Button>>;
+    submitButtonProps?: Partial<React$1.ComponentProps<typeof Button$1>>;
     submitButtonText?: string;
     subtitle?: string;
     title?: string;
@@ -724,7 +724,7 @@ interface ZodFormProps<T extends FieldValues> {
         values: T;
     }) => React$1.ReactNode;
 }
-declare function ZodForm<T extends FieldValues>({ className, columns, config, layout, onError, onSubmit, onSuccess, render, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ZodFormProps<T>): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | React$1.JSX.Element | null | undefined;
+declare function ZodForm<T extends FieldValues>({ className, columns, config, layout, onError, onSubmit, onSuccess, render, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ZodFormProps<T>): React$1.JSX.Element;
 
 /**
  * Hook for using Zod validation with React Hook Form
@@ -781,6 +781,10 @@ declare const FormFieldHelpers: {
      * Create a checkbox field
      */
     checkbox: <T extends FieldValues>(name: Path<T>, label: string) => ZodFormFieldConfig<T>;
+    /**
+     * Create a date field
+     */
+    date: <T extends FieldValues>(name: Path<T>, label: string, dateProps?: Record<string, string | number | boolean>) => ZodFormFieldConfig<T>;
     /**
      * Create an input field
      */

package/dist/index.js

@@ -1238,14 +1238,6 @@ function ConfigurableForm({
 
 // src/components/ServerActionForm.tsx
 import React17 from "react";
-import {
-  Button as Button4,
-  Checkbox as Checkbox2,
-  Input as Input2,
-  Select as Select2,
-  SelectItem as SelectItem2,
-  Textarea as Textarea2
-} from "@heroui/react";
 import { useActionState } from "react";
 function ServerActionForm({
   action,
@@ -1393,7 +1385,7 @@ function ServerActionForm({
     ),
     renderFields(),
     /* @__PURE__ */ React17.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React17.createElement(
-      Button4,
+      Button,
       {
         color: "primary",
         isDisabled: pending,
@@ -1403,7 +1395,7 @@ function ServerActionForm({
       },
       submitButtonText
     ), showResetButton && /* @__PURE__ */ React17.createElement(
-      Button4,
+      Button,
       {
         isDisabled: pending,
         type: "button",
@@ -1478,7 +1470,7 @@ function ServerActionField({
     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(
-        Input2,
+        Input,
         {
           ...field2.inputProps,
           "data-field-name": fieldName,
@@ -1495,7 +1487,7 @@ function ServerActionField({
     }
     case "textarea": {
       return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React17.createElement(
-        Textarea2,
+        Textarea,
         {
           ...field2.textareaProps,
           "data-field-name": fieldName,
@@ -1511,7 +1503,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(
-        Checkbox2,
+        Checkbox,
         {
           ...field2.checkboxProps,
           "data-field-name": fieldName,
@@ -1527,7 +1519,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(
-        Select2,
+        Select,
         {
           ...field2.selectProps,
           "data-field-name": fieldName,
@@ -1543,13 +1535,13 @@ function ServerActionField({
           }
         },
         options.map(
-          (option) => /* @__PURE__ */ React17.createElement(SelectItem2, { key: String(option.value) }, option.label)
+          (option) => /* @__PURE__ */ React17.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(
-        Input2,
+        Input,
         {
           "data-field-name": fieldName,
           label: field2.label,
@@ -1862,7 +1854,10 @@ import { useFormContext as useFormContext5 } from "react-hook-form";
 
 // src/components/ZodForm.tsx
 import React21 from "react";
-import { Button as Button6 } from "@heroui/react";
+import { Button as Button5 } from "@heroui/react";
+import {
+  FormProvider as FormProvider2
+} from "react-hook-form";
 
 // src/zod-integration.ts
 import { useForm as useForm2 } from "react-hook-form";
@@ -1982,7 +1977,7 @@ function useEnhancedFormState(form, options = {}) {
 
 // src/components/FormStatus.tsx
 import React20 from "react";
-import { Button as Button5 } from "@heroui/react";
+import { Button as Button4 } from "@heroui/react";
 function FormStatus({
   className = "",
   onDismiss,
@@ -2013,7 +2008,7 @@ function FormStatus({
       /* @__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(
-        Button5,
+        Button4,
         {
           size: "sm",
           variant: "light",
@@ -2035,7 +2030,7 @@ function FormStatus({
       /* @__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(
-        Button5,
+        Button4,
         {
           size: "sm",
           variant: "light",
@@ -2190,16 +2185,16 @@ function ZodForm({
     }
   }, [form.formState.errors, config.onError]);
   if (render) {
-    return render({
+    return /* @__PURE__ */ React21.createElement(FormProvider2, { ...form }, render({
       errors: form.formState.errors,
       form,
       isSubmitted: enhancedState.status !== "idle",
       isSubmitting: enhancedState.isSubmitting,
       isSuccess: enhancedState.isSuccess,
       values: form.getValues()
-    });
+    }));
   }
-  return /* @__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__ */ 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(
     FormStatus,
     {
       state: enhancedState,
@@ -2207,7 +2202,7 @@ function ZodForm({
       showDetails: true
     }
   ), renderFields(), /* @__PURE__ */ React21.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React21.createElement(
-    Button6,
+    Button5,
     {
       color: "primary",
       isDisabled: enhancedState.isSubmitting,
@@ -2217,7 +2212,7 @@ function ZodForm({
     },
     enhancedState.isSuccess ? "Success!" : submitButtonText
   ), showResetButton && /* @__PURE__ */ React21.createElement(
-    Button6,
+    Button5,
     {
       isDisabled: enhancedState.isSubmitting,
       type: "button",
@@ -2225,7 +2220,7 @@ function ZodForm({
       onPress: resetForm
     },
     resetButtonText
-  )));
+  ))));
 }
 
 // src/builders/BasicFormBuilder.ts
@@ -2310,6 +2305,15 @@ var FormFieldHelpers = {
     name,
     type: "checkbox"
   }),
+  /**
+   * Create a date field
+   */
+  date: (name, label, dateProps) => ({
+    dateProps,
+    label,
+    name,
+    type: "date"
+  }),
   /**
    * Create an input field
    */

package/dist/react/index.d.ts

@@ -716,7 +716,7 @@ interface ZodFormProps<T extends FieldValues> {
         values: T;
     }) => React$1.ReactNode;
 }
-declare function ZodForm<T extends FieldValues>({ className, columns, config, layout, onError, onSubmit, onSuccess, render, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ZodFormProps<T>): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | React$1.JSX.Element | null | undefined;
+declare function ZodForm<T extends FieldValues>({ className, columns, config, layout, onError, onSubmit, onSuccess, render, resetButtonText, showResetButton, spacing, submitButtonProps, submitButtonText, subtitle, title, }: ZodFormProps<T>): React$1.JSX.Element;
 
 /**
  * Hook for using Zod validation with React Hook Form
@@ -773,6 +773,10 @@ declare const FormFieldHelpers: {
      * Create a checkbox field
      */
     checkbox: <T extends FieldValues>(name: Path<T>, label: string) => ZodFormFieldConfig<T>;
+    /**
+     * Create a date field
+     */
+    date: <T extends FieldValues>(name: Path<T>, label: string, dateProps?: Record<string, string | number | boolean>) => ZodFormFieldConfig<T>;
     /**
      * Create an input field
      */

package/dist/react/index.js

@@ -1243,14 +1243,6 @@ function ConfigurableForm({
 
 // src/components/ServerActionForm.tsx
 import React17 from "react";
-import {
-  Button as Button4,
-  Checkbox as Checkbox2,
-  Input as Input2,
-  Select as Select2,
-  SelectItem as SelectItem2,
-  Textarea as Textarea2
-} from "@heroui/react";
 import { useActionState } from "react";
 function ServerActionForm({
   action,
@@ -1398,7 +1390,7 @@ function ServerActionForm({
     ),
     renderFields(),
     /* @__PURE__ */ React17.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React17.createElement(
-      Button4,
+      Button,
       {
         color: "primary",
         isDisabled: pending,
@@ -1408,7 +1400,7 @@ function ServerActionForm({
       },
       submitButtonText
     ), showResetButton && /* @__PURE__ */ React17.createElement(
-      Button4,
+      Button,
       {
         isDisabled: pending,
         type: "button",
@@ -1483,7 +1475,7 @@ function ServerActionField({
     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(
-        Input2,
+        Input,
         {
           ...field2.inputProps,
           "data-field-name": fieldName,
@@ -1500,7 +1492,7 @@ function ServerActionField({
     }
     case "textarea": {
       return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement("input", { type: "hidden", name: fieldName, value }), /* @__PURE__ */ React17.createElement(
-        Textarea2,
+        Textarea,
         {
           ...field2.textareaProps,
           "data-field-name": fieldName,
@@ -1516,7 +1508,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(
-        Checkbox2,
+        Checkbox,
         {
           ...field2.checkboxProps,
           "data-field-name": fieldName,
@@ -1532,7 +1524,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(
-        Select2,
+        Select,
         {
           ...field2.selectProps,
           "data-field-name": fieldName,
@@ -1548,13 +1540,13 @@ function ServerActionField({
           }
         },
         options.map(
-          (option) => /* @__PURE__ */ React17.createElement(SelectItem2, { key: String(option.value) }, option.label)
+          (option) => /* @__PURE__ */ React17.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(
-        Input2,
+        Input,
         {
           "data-field-name": fieldName,
           label: field2.label,
@@ -1867,7 +1859,10 @@ import { useFormContext as useFormContext5 } from "react-hook-form";
 
 // src/components/ZodForm.tsx
 import React21 from "react";
-import { Button as Button6 } from "@heroui/react";
+import { Button as Button5 } from "@heroui/react";
+import {
+  FormProvider as FormProvider2
+} from "react-hook-form";
 
 // src/zod-integration.ts
 import { useForm as useForm2 } from "react-hook-form";
@@ -1987,7 +1982,7 @@ function useEnhancedFormState(form, options = {}) {
 
 // src/components/FormStatus.tsx
 import React20 from "react";
-import { Button as Button5 } from "@heroui/react";
+import { Button as Button4 } from "@heroui/react";
 function FormStatus({
   className = "",
   onDismiss,
@@ -2018,7 +2013,7 @@ function FormStatus({
       /* @__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(
-        Button5,
+        Button4,
         {
           size: "sm",
           variant: "light",
@@ -2040,7 +2035,7 @@ function FormStatus({
       /* @__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(
-        Button5,
+        Button4,
         {
           size: "sm",
           variant: "light",
@@ -2195,16 +2190,16 @@ function ZodForm({
     }
   }, [form.formState.errors, config.onError]);
   if (render) {
-    return render({
+    return /* @__PURE__ */ React21.createElement(FormProvider2, { ...form }, render({
       errors: form.formState.errors,
       form,
       isSubmitted: enhancedState.status !== "idle",
       isSubmitting: enhancedState.isSubmitting,
       isSuccess: enhancedState.isSuccess,
       values: form.getValues()
-    });
+    }));
   }
-  return /* @__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__ */ 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(
     FormStatus,
     {
       state: enhancedState,
@@ -2212,7 +2207,7 @@ function ZodForm({
       showDetails: true
     }
   ), renderFields(), /* @__PURE__ */ React21.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ React21.createElement(
-    Button6,
+    Button5,
     {
       color: "primary",
       isDisabled: enhancedState.isSubmitting,
@@ -2222,7 +2217,7 @@ function ZodForm({
     },
     enhancedState.isSuccess ? "Success!" : submitButtonText
   ), showResetButton && /* @__PURE__ */ React21.createElement(
-    Button6,
+    Button5,
     {
       isDisabled: enhancedState.isSubmitting,
       type: "button",
@@ -2230,7 +2225,7 @@ function ZodForm({
       onPress: resetForm
     },
     resetButtonText
-  )));
+  ))));
 }
 
 // src/builders/BasicFormBuilder.ts
@@ -2315,6 +2310,15 @@ var FormFieldHelpers = {
     name,
     type: "checkbox"
   }),
+  /**
+   * Create a date field
+   */
+  date: (name, label, dateProps) => ({
+    dateProps,
+    label,
+    name,
+    type: "date"
+  }),
   /**
    * Create an input field
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rachelallyson/hero-hook-form",
-  "version": "2.1.0",
+  "version": "2.1.2",
   "description": "Typed form helpers that combine React Hook Form and HeroUI components.",
   "author": "Rachel Higley",
   "homepage": "https://rachelallyson.github.io/hero-hook-form/",