@rachelallyson/hero-hook-form 1.0.0

package/dist/react/index.cjs

@@ -0,0 +1,1297 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CheckboxField: () => CheckboxField,
+  ConfigurableForm: () => ConfigurableForm,
+  DateField: () => DateField,
+  FileField: () => FileField,
+  FormField: () => FormField,
+  FormProvider: () => FormProvider,
+  HeroHookFormProvider: () => HeroHookFormProvider,
+  InputField: () => InputField,
+  RadioGroupField: () => RadioGroupField,
+  SelectField: () => SelectField,
+  SliderField: () => SliderField,
+  SubmitButton: () => SubmitButton,
+  SwitchField: () => SwitchField,
+  TextareaField: () => TextareaField,
+  ZodForm: () => ZodForm,
+  applyServerErrors: () => applyServerErrors,
+  useFormHelper: () => useFormHelper,
+  useHeroHookFormDefaults: () => useHeroHookFormDefaults,
+  useZodForm: () => useZodForm
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Form.tsx
+var import_react14 = __toESM(require("react"), 1);
+var import_react15 = require("@heroui/react");
+
+// src/hooks/useFormHelper.ts
+var import_react = require("react");
+var import_react_hook_form = require("react-hook-form");
+function useFormHelper({
+  defaultValues,
+  methods,
+  onError,
+  onSubmit,
+  onSuccess
+}) {
+  const [submissionState, setSubmissionState] = (0, import_react.useState)({
+    isSubmitted: false,
+    isSubmitting: false,
+    isSuccess: false
+  });
+  const form = methods ?? (0, import_react_hook_form.useForm)({ defaultValues });
+  const handleSubmit = async () => {
+    setSubmissionState((prev) => ({
+      ...prev,
+      error: void 0,
+      isSubmitting: true
+    }));
+    try {
+      await form.handleSubmit(async (formData) => {
+        await onSubmit(formData);
+      })();
+      setSubmissionState({
+        isSubmitted: true,
+        isSubmitting: false,
+        isSuccess: true
+      });
+      onSuccess?.(form.getValues());
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "An error occurred";
+      setSubmissionState({
+        error: errorMessage,
+        isSubmitted: true,
+        isSubmitting: false,
+        isSuccess: false
+      });
+      onError?.({
+        message: errorMessage
+      });
+    }
+  };
+  const resetForm = () => {
+    form.reset();
+    setSubmissionState({
+      isSubmitted: false,
+      isSubmitting: false,
+      isSuccess: false
+    });
+  };
+  return {
+    error: submissionState.error,
+    form,
+    handleSubmit,
+    isSubmitted: submissionState.isSubmitted,
+    isSubmitting: submissionState.isSubmitting,
+    isSuccess: submissionState.isSuccess,
+    resetForm,
+    submissionState
+  };
+}
+
+// src/components/FormField.tsx
+var import_react13 = __toESM(require("react"), 1);
+
+// src/fields/CheckboxField.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_react_hook_form2 = require("react-hook-form");
+
+// src/providers/ConfigProvider.tsx
+var import_react2 = __toESM(require("react"), 1);
+var DefaultsContext = (0, import_react2.createContext)(null);
+function HeroHookFormProvider(props) {
+  const value = (0, import_react2.useMemo)(() => props.defaults ?? {}, [props.defaults]);
+  return /* @__PURE__ */ import_react2.default.createElement(DefaultsContext.Provider, { value }, props.children);
+}
+function useHeroHookFormDefaults() {
+  const cfg = (0, import_react2.useContext)(DefaultsContext) ?? {};
+  const common = cfg.common ?? {};
+  const commonInput = {
+    ...common.color !== void 0 ? { color: common.color } : {},
+    ...common.size !== void 0 ? { size: common.size } : {},
+    ...common.variant !== void 0 ? { variant: common.variant } : {},
+    ...common.radius !== void 0 ? { radius: common.radius } : {},
+    ...common.labelPlacement !== void 0 ? {
+      labelPlacement: common.labelPlacement
+    } : {}
+  };
+  const commonTextarea = {
+    ...common.color !== void 0 ? { color: common.color } : {},
+    ...common.size !== void 0 ? { size: common.size } : {},
+    ...common.variant !== void 0 ? { variant: common.variant } : {},
+    ...common.radius !== void 0 ? { radius: common.radius } : {},
+    ...common.labelPlacement !== void 0 ? {
+      labelPlacement: common.labelPlacement
+    } : {}
+  };
+  const commonSelect = {
+    ...common.color !== void 0 ? { color: common.color } : {},
+    ...common.size !== void 0 ? { size: common.size } : {},
+    ...common.variant !== void 0 ? { variant: common.variant } : {},
+    ...common.radius !== void 0 ? { radius: common.radius } : {},
+    ...common.labelPlacement !== void 0 ? {
+      labelPlacement: common.labelPlacement
+    } : {}
+  };
+  const commonCheckbox = {
+    ...common.color !== void 0 ? {
+      color: common.color
+    } : {},
+    ...common.size !== void 0 ? { size: common.size } : {}
+  };
+  const commonRadioGroup = {
+    ...common.color !== void 0 ? {
+      color: common.color
+    } : {},
+    ...common.size !== void 0 ? { size: common.size } : {}
+  };
+  const commonDateInput = {
+    ...common.color !== void 0 ? {
+      color: common.color
+    } : {},
+    ...common.size !== void 0 ? { size: common.size } : {},
+    ...common.variant !== void 0 ? {
+      variant: common.variant
+    } : {},
+    ...common.radius !== void 0 ? {
+      radius: common.radius
+    } : {}
+  };
+  const commonSlider = {
+    ...common.color !== void 0 ? { color: common.color } : {},
+    ...common.size !== void 0 ? { size: common.size } : {}
+  };
+  const commonSwitch = {
+    ...common.color !== void 0 ? { color: common.color } : {},
+    ...common.size !== void 0 ? { size: common.size } : {}
+  };
+  const commonButton = {
+    ...common.color !== void 0 ? { color: common.color } : {},
+    ...common.size !== void 0 ? { size: common.size } : {}
+  };
+  return {
+    checkbox: { ...commonCheckbox, ...cfg.checkbox ?? {} },
+    dateInput: { ...commonDateInput, ...cfg.dateInput ?? {} },
+    input: { ...commonInput, ...cfg.input ?? {} },
+    radioGroup: { ...commonRadioGroup, ...cfg.radioGroup ?? {} },
+    select: { ...commonSelect, ...cfg.select ?? {} },
+    slider: { ...commonSlider, ...cfg.slider ?? {} },
+    submitButton: { ...commonButton, ...cfg.submitButton ?? {} },
+    switch: { ...commonSwitch, ...cfg.switch ?? {} },
+    textarea: { ...commonTextarea, ...cfg.textarea ?? {} }
+  };
+}
+
+// src/ui/react.ts
+var import_react3 = require("@heroui/react");
+
+// src/fields/CheckboxField.tsx
+function CheckboxField(props) {
+  const {
+    checkboxProps,
+    className,
+    control,
+    description,
+    isDisabled,
+    label,
+    name,
+    rules
+  } = props;
+  const defaults = useHeroHookFormDefaults();
+  return /* @__PURE__ */ import_react4.default.createElement(
+    import_react_hook_form2.Controller,
+    {
+      control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ import_react4.default.createElement("div", { className }, /* @__PURE__ */ import_react4.default.createElement(
+        import_react3.Checkbox,
+        {
+          ...defaults.checkbox,
+          ...checkboxProps,
+          isDisabled,
+          isInvalid: Boolean(fieldState.error),
+          isSelected: Boolean(field.value),
+          onBlur: field.onBlur,
+          onValueChange: (val) => field.onChange(val)
+        },
+        label
+      ), description ? /* @__PURE__ */ import_react4.default.createElement("p", { className: "text-small text-default-400" }, description) : null, fieldState.error?.message ? /* @__PURE__ */ import_react4.default.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
+      rules
+    }
+  );
+}
+
+// src/fields/DateField.tsx
+var import_react5 = __toESM(require("react"), 1);
+var import_react_hook_form3 = require("react-hook-form");
+function CoercedDateInput(props) {
+  const { dateProps, description, disabled, errorMessage, field, label } = props;
+  const defaults = useHeroHookFormDefaults();
+  return /* @__PURE__ */ import_react5.default.createElement(
+    import_react3.DateInput,
+    {
+      ...defaults.dateInput,
+      ...dateProps,
+      description,
+      errorMessage,
+      isDisabled: disabled,
+      isInvalid: Boolean(errorMessage),
+      label,
+      value: field.value ?? null,
+      onBlur: field.onBlur,
+      onChange: field.onChange
+    }
+  );
+}
+function DateField(props) {
+  const {
+    className,
+    control,
+    dateProps,
+    description,
+    isDisabled,
+    label,
+    name,
+    rules,
+    transform
+  } = props;
+  return /* @__PURE__ */ import_react5.default.createElement(
+    import_react_hook_form3.Controller,
+    {
+      control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ import_react5.default.createElement("div", { className }, /* @__PURE__ */ import_react5.default.createElement(
+        CoercedDateInput,
+        {
+          dateProps,
+          description,
+          disabled: isDisabled,
+          errorMessage: fieldState.error?.message,
+          field: {
+            ...field,
+            onChange: (value) => field.onChange(transform ? transform(value) : value)
+          },
+          label
+        }
+      )),
+      rules
+    }
+  );
+}
+
+// src/fields/FileField.tsx
+var import_react6 = __toESM(require("react"), 1);
+var import_react_hook_form4 = require("react-hook-form");
+function CoercedFileInput(props) {
+  const {
+    accept,
+    description,
+    disabled,
+    errorMessage,
+    field,
+    fileProps,
+    label,
+    multiple
+  } = props;
+  const defaults = useHeroHookFormDefaults();
+  return /* @__PURE__ */ import_react6.default.createElement(
+    import_react3.Input,
+    {
+      ...defaults.input,
+      ...fileProps,
+      accept,
+      description,
+      errorMessage,
+      isDisabled: disabled,
+      isInvalid: Boolean(errorMessage),
+      label,
+      multiple,
+      type: "file",
+      value: field.value ? "" : "",
+      onBlur: field.onBlur,
+      onChange: (e2) => {
+        const target = e2.target;
+        field.onChange(target.files);
+      }
+    }
+  );
+}
+function FileField(props) {
+  const {
+    accept,
+    className,
+    control,
+    description,
+    fileProps,
+    isDisabled,
+    label,
+    multiple = false,
+    name,
+    rules,
+    transform
+  } = props;
+  return /* @__PURE__ */ import_react6.default.createElement(
+    import_react_hook_form4.Controller,
+    {
+      control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ import_react6.default.createElement("div", { className }, /* @__PURE__ */ import_react6.default.createElement(
+        CoercedFileInput,
+        {
+          accept,
+          description,
+          disabled: isDisabled,
+          errorMessage: fieldState.error?.message,
+          field: {
+            ...field,
+            onChange: (value) => field.onChange(transform ? transform(value) : value)
+          },
+          fileProps,
+          label,
+          multiple
+        }
+      )),
+      rules
+    }
+  );
+}
+
+// src/fields/InputField.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_react_hook_form5 = require("react-hook-form");
+function CoercedInput(props) {
+  const { description, disabled, errorMessage, field, inputProps, label } = props;
+  const defaults = useHeroHookFormDefaults();
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_react3.Input,
+    {
+      ...defaults.input,
+      ...inputProps,
+      description,
+      errorMessage,
+      isDisabled: disabled,
+      isInvalid: Boolean(errorMessage),
+      label,
+      value: field.value ?? "",
+      onBlur: field.onBlur,
+      onValueChange: field.onChange
+    }
+  );
+}
+function InputField(props) {
+  const {
+    className,
+    control,
+    description,
+    inputProps,
+    isDisabled,
+    label,
+    name,
+    rules,
+    transform
+  } = props;
+  return /* @__PURE__ */ import_react7.default.createElement(
+    import_react_hook_form5.Controller,
+    {
+      control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ import_react7.default.createElement("div", { className }, /* @__PURE__ */ import_react7.default.createElement(
+        CoercedInput,
+        {
+          description,
+          disabled: isDisabled,
+          errorMessage: fieldState.error?.message,
+          field: {
+            ...field,
+            onChange: (value) => {
+              if (inputProps?.type === "number") {
+                const numValue = value === "" ? void 0 : Number(value);
+                field.onChange(
+                  transform ? transform(String(numValue)) : numValue
+                );
+              } else {
+                field.onChange(transform ? transform(value) : value);
+              }
+            }
+          },
+          inputProps,
+          label
+        }
+      )),
+      rules
+    }
+  );
+}
+
+// src/fields/RadioGroupField.tsx
+var import_react8 = __toESM(require("react"), 1);
+var import_react_hook_form6 = require("react-hook-form");
+function RadioGroupField(props) {
+  const {
+    className,
+    control,
+    description,
+    isDisabled,
+    label,
+    name,
+    options,
+    radioGroupProps,
+    rules
+  } = props;
+  const defaults = useHeroHookFormDefaults();
+  return /* @__PURE__ */ import_react8.default.createElement(
+    import_react_hook_form6.Controller,
+    {
+      control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ import_react8.default.createElement("div", { className }, /* @__PURE__ */ import_react8.default.createElement(
+        import_react3.RadioGroup,
+        {
+          ...defaults.radioGroup,
+          ...radioGroupProps,
+          description,
+          isDisabled,
+          isInvalid: Boolean(fieldState.error),
+          label,
+          value: String(field.value ?? ""),
+          onBlur: field.onBlur,
+          onValueChange: (val) => field.onChange(val)
+        },
+        options.map((opt) => /* @__PURE__ */ import_react8.default.createElement(
+          import_react3.Radio,
+          {
+            key: String(opt.value),
+            isDisabled: opt.disabled,
+            value: String(opt.value)
+          },
+          opt.label
+        ))
+      ), fieldState.error?.message ? /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
+      rules
+    }
+  );
+}
+
+// src/fields/SelectField.tsx
+var import_react9 = __toESM(require("react"), 1);
+var import_react_hook_form7 = require("react-hook-form");
+function SelectField(props) {
+  const {
+    className,
+    control,
+    description,
+    isDisabled,
+    label,
+    name,
+    options,
+    placeholder,
+    rules,
+    selectProps
+  } = props;
+  const defaults = useHeroHookFormDefaults();
+  return /* @__PURE__ */ import_react9.default.createElement(
+    import_react_hook_form7.Controller,
+    {
+      control,
+      name,
+      render: ({ field, fieldState }) => {
+        const selectedKey = field.value;
+        return /* @__PURE__ */ import_react9.default.createElement("div", { className }, /* @__PURE__ */ import_react9.default.createElement(
+          import_react3.Select,
+          {
+            ...defaults.select,
+            ...selectProps,
+            description,
+            errorMessage: fieldState.error?.message,
+            isDisabled,
+            isInvalid: Boolean(fieldState.error),
+            label,
+            placeholder,
+            selectedKeys: selectedKey != null ? /* @__PURE__ */ new Set([String(selectedKey)]) : /* @__PURE__ */ new Set(),
+            onSelectionChange: (keys) => {
+              const keyArray = Array.from(keys);
+              const next = keyArray[0] ?? "";
+              field.onChange(next);
+            }
+          },
+          options.map((opt) => /* @__PURE__ */ import_react9.default.createElement(
+            import_react3.SelectItem,
+            {
+              key: String(opt.value),
+              isDisabled: opt.disabled,
+              textValue: String(opt.value)
+            },
+            opt.label
+          ))
+        ));
+      },
+      rules
+    }
+  );
+}
+
+// src/fields/SliderField.tsx
+var import_react10 = __toESM(require("react"), 1);
+var import_react_hook_form8 = require("react-hook-form");
+function CoercedSlider(props) {
+  const { description, disabled, errorMessage, field, label, sliderProps } = props;
+  const defaults = useHeroHookFormDefaults();
+  return /* @__PURE__ */ import_react10.default.createElement(
+    import_react3.Slider,
+    {
+      ...defaults.slider,
+      ...sliderProps,
+      description,
+      errorMessage,
+      isDisabled: disabled,
+      isInvalid: Boolean(errorMessage),
+      label,
+      value: field.value ?? 0,
+      onBlur: field.onBlur,
+      onValueChange: field.onChange
+    }
+  );
+}
+function SliderField(props) {
+  const {
+    className,
+    control,
+    description,
+    isDisabled,
+    label,
+    name,
+    rules,
+    sliderProps,
+    transform
+  } = props;
+  return /* @__PURE__ */ import_react10.default.createElement(
+    import_react_hook_form8.Controller,
+    {
+      control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ import_react10.default.createElement("div", { className }, /* @__PURE__ */ import_react10.default.createElement(
+        CoercedSlider,
+        {
+          description,
+          disabled: isDisabled,
+          errorMessage: fieldState.error?.message,
+          field: {
+            ...field,
+            onChange: (value) => field.onChange(transform ? transform(value) : value)
+          },
+          label,
+          sliderProps
+        }
+      )),
+      rules
+    }
+  );
+}
+
+// src/fields/SwitchField.tsx
+var import_react11 = __toESM(require("react"), 1);
+var import_react_hook_form9 = require("react-hook-form");
+function SwitchField(props) {
+  const {
+    className,
+    control,
+    description,
+    isDisabled,
+    label,
+    name,
+    rules,
+    switchProps
+  } = props;
+  const defaults = useHeroHookFormDefaults();
+  return /* @__PURE__ */ import_react11.default.createElement(
+    import_react_hook_form9.Controller,
+    {
+      control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ import_react11.default.createElement("div", { className }, /* @__PURE__ */ import_react11.default.createElement(
+        import_react3.Switch,
+        {
+          ...defaults.switch,
+          ...switchProps,
+          isDisabled,
+          isSelected: Boolean(field.value),
+          onBlur: field.onBlur,
+          onValueChange: (val) => field.onChange(val)
+        },
+        label
+      ), description ? /* @__PURE__ */ import_react11.default.createElement("p", { className: "text-small text-default-400" }, description) : null, fieldState.error?.message ? /* @__PURE__ */ import_react11.default.createElement("p", { className: "text-tiny text-danger mt-1" }, fieldState.error.message) : null),
+      rules
+    }
+  );
+}
+
+// src/fields/TextareaField.tsx
+var import_react12 = __toESM(require("react"), 1);
+var import_react_hook_form10 = require("react-hook-form");
+function TextareaField(props) {
+  const {
+    className,
+    control,
+    description,
+    isDisabled,
+    label,
+    name,
+    rules,
+    textareaProps
+  } = props;
+  const defaults = useHeroHookFormDefaults();
+  return /* @__PURE__ */ import_react12.default.createElement(
+    import_react_hook_form10.Controller,
+    {
+      control,
+      name,
+      render: ({ field, fieldState }) => /* @__PURE__ */ import_react12.default.createElement("div", { className }, /* @__PURE__ */ import_react12.default.createElement(
+        import_react3.Textarea,
+        {
+          ...defaults.textarea,
+          ...textareaProps,
+          description,
+          errorMessage: fieldState.error?.message,
+          isDisabled,
+          isInvalid: Boolean(fieldState.error),
+          label,
+          value: field.value ?? "",
+          onBlur: field.onBlur,
+          onValueChange: field.onChange
+        }
+      )),
+      rules
+    }
+  );
+}
+
+// src/components/FormField.tsx
+function FormField({
+  config,
+  form,
+  submissionState
+}) {
+  const { control } = form;
+  const baseProps = {
+    className: config.className,
+    description: config.description,
+    isDisabled: config.isDisabled ?? submissionState.isSubmitting,
+    label: config.label,
+    name: config.name,
+    rules: config.rules
+  };
+  switch (config.type) {
+    case "input":
+      return /* @__PURE__ */ import_react13.default.createElement(
+        InputField,
+        {
+          ...baseProps,
+          control,
+          defaultValue: config.defaultValue,
+          inputProps: config.inputProps
+        }
+      );
+    case "textarea":
+      return /* @__PURE__ */ import_react13.default.createElement(
+        TextareaField,
+        {
+          ...baseProps,
+          control,
+          defaultValue: config.defaultValue,
+          textareaProps: config.textareaProps
+        }
+      );
+    case "select":
+      return /* @__PURE__ */ import_react13.default.createElement(
+        SelectField,
+        {
+          ...baseProps,
+          control,
+          defaultValue: config.defaultValue,
+          options: (config.options ?? []).map((opt) => ({
+            label: opt.label,
+            value: String(opt.value)
+          })),
+          selectProps: config.selectProps
+        }
+      );
+    case "checkbox":
+      return /* @__PURE__ */ import_react13.default.createElement(
+        CheckboxField,
+        {
+          ...baseProps,
+          checkboxProps: config.checkboxProps,
+          control,
+          defaultValue: config.defaultValue
+        }
+      );
+    case "radio":
+      return /* @__PURE__ */ import_react13.default.createElement(
+        RadioGroupField,
+        {
+          ...baseProps,
+          control,
+          defaultValue: config.defaultValue,
+          options: (config.radioOptions ?? []).map((opt) => ({
+            label: opt.label,
+            value: String(opt.value)
+          })),
+          radioGroupProps: config.radioProps
+        }
+      );
+    case "switch":
+      return /* @__PURE__ */ import_react13.default.createElement(
+        SwitchField,
+        {
+          ...baseProps,
+          control,
+          defaultValue: config.defaultValue,
+          switchProps: config.switchProps
+        }
+      );
+    case "slider":
+      return /* @__PURE__ */ import_react13.default.createElement(
+        SliderField,
+        {
+          ...baseProps,
+          control,
+          defaultValue: config.defaultValue,
+          sliderProps: config.sliderProps
+        }
+      );
+    case "date":
+      return /* @__PURE__ */ import_react13.default.createElement(
+        DateField,
+        {
+          ...baseProps,
+          control,
+          dateProps: config.dateProps,
+          defaultValue: config.defaultValue
+        }
+      );
+    case "file":
+      return /* @__PURE__ */ import_react13.default.createElement(
+        FileField,
+        {
+          ...baseProps,
+          accept: config.accept,
+          control,
+          defaultValue: config.defaultValue,
+          fileProps: config.fileProps,
+          multiple: config.multiple
+        }
+      );
+    default: {
+      const fieldType = config.type;
+      console.warn(`Unknown field type: ${fieldType}`);
+      return null;
+    }
+  }
+}
+
+// src/components/Form.tsx
+function ConfigurableForm({
+  className,
+  columns = 1,
+  defaultValues,
+  fields,
+  layout = "vertical",
+  onError,
+  onSubmit,
+  onSuccess,
+  resetButtonText = "Reset",
+  showResetButton = false,
+  spacing = "4",
+  submitButtonProps = {},
+  submitButtonText = "Submit",
+  subtitle,
+  title
+}) {
+  const {
+    error,
+    form,
+    handleSubmit,
+    isSubmitted,
+    isSubmitting,
+    isSuccess,
+    resetForm,
+    submissionState
+  } = useFormHelper({
+    defaultValues,
+    onError,
+    onSubmit,
+    onSuccess
+  });
+  const renderFields = () => {
+    if (layout === "grid") {
+      return /* @__PURE__ */ import_react14.default.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__ */ import_react14.default.createElement(
+          FormField,
+          {
+            key: field.name,
+            config: field,
+            form,
+            submissionState
+          }
+        ))
+      );
+    }
+    if (layout === "horizontal") {
+      return /* @__PURE__ */ import_react14.default.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, fields.map((field) => /* @__PURE__ */ import_react14.default.createElement(
+        FormField,
+        {
+          key: field.name,
+          config: field,
+          form,
+          submissionState
+        }
+      )));
+    }
+    return /* @__PURE__ */ import_react14.default.createElement("div", { className: `space-y-${spacing}` }, fields.map((field) => /* @__PURE__ */ import_react14.default.createElement(
+      FormField,
+      {
+        key: field.name,
+        config: field,
+        form,
+        submissionState
+      }
+    )));
+  };
+  const handleFormSubmit = (e2) => {
+    e2.preventDefault();
+    void handleSubmit();
+  };
+  return /* @__PURE__ */ import_react14.default.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ import_react14.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ import_react14.default.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ import_react14.default.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), isSubmitted && isSuccess && /* @__PURE__ */ import_react14.default.createElement(
+    "div",
+    {
+      className: "mb-6 p-4 bg-success-50 border border-success-200 rounded-lg",
+      "data-testid": "success-message"
+    },
+    /* @__PURE__ */ import_react14.default.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
+    /* @__PURE__ */ import_react14.default.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
+  ), error && /* @__PURE__ */ import_react14.default.createElement(
+    "div",
+    {
+      className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
+      "data-testid": "error-message"
+    },
+    /* @__PURE__ */ import_react14.default.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
+    /* @__PURE__ */ import_react14.default.createElement("p", { className: "text-danger-700 text-sm mt-1" }, error)
+  ), renderFields(), /* @__PURE__ */ import_react14.default.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ import_react14.default.createElement(
+    import_react15.Button,
+    {
+      color: "primary",
+      isDisabled: isSubmitting,
+      isLoading: isSubmitting,
+      type: "submit",
+      ...submitButtonProps
+    },
+    submitButtonText
+  ), showResetButton && /* @__PURE__ */ import_react14.default.createElement(
+    import_react15.Button,
+    {
+      isDisabled: isSubmitting,
+      type: "button",
+      variant: "bordered",
+      onPress: resetForm
+    },
+    resetButtonText
+  )));
+}
+
+// src/providers/FormProvider.tsx
+var import_react16 = __toESM(require("react"), 1);
+var import_react_hook_form11 = require("react-hook-form");
+function FormProvider(props) {
+  return /* @__PURE__ */ import_react16.default.createElement(import_react_hook_form11.FormProvider, { ...props.methods }, /* @__PURE__ */ import_react16.default.createElement(
+    "form",
+    {
+      className: props.className,
+      id: props.id,
+      noValidate: props.noValidate,
+      onSubmit: (event) => void props.methods.handleSubmit(props.onSubmit)(event)
+    },
+    props.children
+  ));
+}
+
+// src/submit/SubmitButton.tsx
+var import_react17 = __toESM(require("react"), 1);
+var import_react_hook_form12 = require("react-hook-form");
+function SubmitButton(props) {
+  const ctx = (0, import_react_hook_form12.useFormContext)();
+  const loading = props.isLoading ?? ctx.formState.isSubmitting;
+  const isDisabledFromProps = props.buttonProps?.isDisabled ?? false;
+  const isDisabled = Boolean(isDisabledFromProps) || Boolean(loading);
+  const defaults = useHeroHookFormDefaults();
+  return /* @__PURE__ */ import_react17.default.createElement(
+    import_react3.Button,
+    {
+      type: "submit",
+      ...defaults.submitButton,
+      ...props.buttonProps,
+      isDisabled
+    },
+    loading ? /* @__PURE__ */ import_react17.default.createElement("span", { className: "inline-flex items-center gap-2" }, /* @__PURE__ */ import_react17.default.createElement(import_react3.Spinner, { size: "sm" }), "Submitting\u2026") : props.children
+  );
+}
+
+// src/utils/applyServerErrors.ts
+function applyServerErrors(setError, serverError) {
+  if (!serverError.fieldErrors?.length) return;
+  for (const err of serverError.fieldErrors) {
+    setError(err.path, { message: err.message, type: err.type });
+  }
+}
+
+// src/components/ZodForm.tsx
+var import_react18 = __toESM(require("react"), 1);
+var import_react19 = require("@heroui/react");
+
+// node_modules/@hookform/resolvers/dist/resolvers.mjs
+var import_react_hook_form13 = require("react-hook-form");
+var r = (t3, r2, o3) => {
+  if (t3 && "reportValidity" in t3) {
+    const s3 = (0, import_react_hook_form13.get)(o3, r2);
+    t3.setCustomValidity(s3 && s3.message || ""), t3.reportValidity();
+  }
+};
+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 s = (r2, s3) => {
+  s3.shouldUseNativeValidation && o(r2, s3);
+  const n3 = {};
+  for (const o3 in r2) {
+    const f = (0, import_react_hook_form13.get)(s3.fields, o3), c = Object.assign(r2[o3] || {}, { ref: f && f.ref });
+    if (i(s3.names || Object.keys(r2), o3)) {
+      const r3 = Object.assign({}, (0, import_react_hook_form13.get)(n3, o3));
+      (0, import_react_hook_form13.set)(r3, "root", c), (0, import_react_hook_form13.set)(n3, o3, r3);
+    } else (0, import_react_hook_form13.set)(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
+var import_react_hook_form14 = require("react-hook-form");
+var n2 = __toESM(require("zod/v4/core"), 1);
+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] = (0, import_react_hook_form14.appendErrors)(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] = (0, import_react_hook_form14.appendErrors)(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) {
+    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 };
+        });
+      }, 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);
+    }
+  };
+  throw new Error("Invalid input: not a Zod schema");
+}
+
+// src/zod-integration.ts
+var import_react_hook_form15 = require("react-hook-form");
+function useZodForm(config) {
+  if (!config.resolver && config.schema) {
+    const resolver = a(config.schema);
+    config.resolver = resolver;
+  }
+  const formConfig = {
+    ...config
+  };
+  return (0, import_react_hook_form15.useForm)(formConfig);
+}
+
+// src/components/ZodForm.tsx
+function ZodForm({
+  className,
+  columns = 1,
+  config,
+  layout = "vertical",
+  onError,
+  onSubmit,
+  onSuccess,
+  resetButtonText = "Reset",
+  showResetButton = false,
+  spacing = "4",
+  submitButtonProps = {},
+  submitButtonText = "Submit",
+  subtitle,
+  title
+}) {
+  const form = useZodForm(config);
+  const [submissionState, setSubmissionState] = import_react18.default.useState({
+    error: void 0,
+    isSubmitted: false,
+    isSubmitting: false,
+    isSuccess: false
+  });
+  const handleSubmit = async () => {
+    setSubmissionState((prev) => ({
+      ...prev,
+      error: void 0,
+      isSubmitting: true
+    }));
+    const isValid = await form.trigger();
+    if (!isValid) {
+      setSubmissionState({
+        error: "Please fix the validation errors above",
+        isSubmitted: true,
+        isSubmitting: false,
+        isSuccess: false
+      });
+      return;
+    }
+    try {
+      await form.handleSubmit(async (formData) => {
+        await onSubmit(formData);
+      })();
+      setSubmissionState({
+        error: void 0,
+        isSubmitted: true,
+        isSubmitting: false,
+        isSuccess: true
+      });
+      onSuccess?.(form.getValues());
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : "An error occurred";
+      setSubmissionState({
+        error: errorMessage,
+        isSubmitted: true,
+        isSubmitting: false,
+        isSuccess: false
+      });
+      onError?.({
+        message: errorMessage
+      });
+    }
+  };
+  const resetForm = () => {
+    form.reset();
+    setSubmissionState({
+      error: void 0,
+      isSubmitted: false,
+      isSubmitting: false,
+      isSuccess: false
+    });
+  };
+  const renderFields = () => {
+    if (layout === "grid") {
+      return /* @__PURE__ */ import_react18.default.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__ */ import_react18.default.createElement(
+          FormField,
+          {
+            key: field.name,
+            config: field,
+            form,
+            submissionState
+          }
+        ))
+      );
+    }
+    if (layout === "horizontal") {
+      return /* @__PURE__ */ import_react18.default.createElement("div", { className: `grid gap-${spacing} grid-cols-1 md:grid-cols-2` }, config.fields.map((field) => /* @__PURE__ */ import_react18.default.createElement(
+        FormField,
+        {
+          key: field.name,
+          config: field,
+          form,
+          submissionState
+        }
+      )));
+    }
+    return /* @__PURE__ */ import_react18.default.createElement("div", { className: `space-y-${spacing}` }, config.fields.map((field) => /* @__PURE__ */ import_react18.default.createElement(
+      FormField,
+      {
+        key: field.name,
+        config: field,
+        form,
+        submissionState
+      }
+    )));
+  };
+  const handleFormSubmit = (e2) => {
+    e2.preventDefault();
+    void handleSubmit();
+  };
+  return /* @__PURE__ */ import_react18.default.createElement("form", { className, role: "form", onSubmit: handleFormSubmit }, title && /* @__PURE__ */ import_react18.default.createElement("div", { className: "mb-6" }, /* @__PURE__ */ import_react18.default.createElement("h2", { className: "text-xl font-semibold text-foreground mb-2" }, title), subtitle && /* @__PURE__ */ import_react18.default.createElement("p", { className: "text-sm text-muted-foreground" }, subtitle)), submissionState.isSubmitted && submissionState.isSuccess && /* @__PURE__ */ import_react18.default.createElement(
+    "div",
+    {
+      className: "mb-6 p-4 bg-success-50 border border-success-200 rounded-lg",
+      "data-testid": "success-message"
+    },
+    /* @__PURE__ */ import_react18.default.createElement("p", { className: "text-success-800 font-medium" }, "Success!"),
+    /* @__PURE__ */ import_react18.default.createElement("p", { className: "text-success-700 text-sm mt-1" }, "Your request has been processed successfully.")
+  ), submissionState.error && /* @__PURE__ */ import_react18.default.createElement(
+    "div",
+    {
+      className: "mb-6 p-4 bg-danger-50 border border-danger-200 rounded-lg",
+      "data-testid": "error-message"
+    },
+    /* @__PURE__ */ import_react18.default.createElement("p", { className: "text-danger-800 font-medium" }, "Error"),
+    /* @__PURE__ */ import_react18.default.createElement("p", { className: "text-danger-700 text-sm mt-1" }, submissionState.error)
+  ), renderFields(), /* @__PURE__ */ import_react18.default.createElement("div", { className: "mt-6 flex gap-3 justify-end" }, /* @__PURE__ */ import_react18.default.createElement(
+    import_react19.Button,
+    {
+      color: "primary",
+      isDisabled: submissionState.isSubmitting,
+      isLoading: submissionState.isSubmitting,
+      type: "submit",
+      ...submitButtonProps
+    },
+    submitButtonText
+  ), showResetButton && /* @__PURE__ */ import_react18.default.createElement(
+    import_react19.Button,
+    {
+      isDisabled: submissionState.isSubmitting,
+      type: "button",
+      variant: "bordered",
+      onPress: resetForm
+    },
+    resetButtonText
+  )));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CheckboxField,
+  ConfigurableForm,
+  DateField,
+  FileField,
+  FormField,
+  FormProvider,
+  HeroHookFormProvider,
+  InputField,
+  RadioGroupField,
+  SelectField,
+  SliderField,
+  SubmitButton,
+  SwitchField,
+  TextareaField,
+  ZodForm,
+  applyServerErrors,
+  useFormHelper,
+  useHeroHookFormDefaults,
+  useZodForm
+});