feat: Merged Zod v3, v4, v4-mini support (#181)

Author: adityacodepublic

apps/docs/components/landing/interactive-demo.tsx

@@ -56,7 +56,7 @@ function InteractiveDemo() {
 
   return (
     <div className="grid md:grid-cols-2 gap-1 w-full">
-      <div className="bg-white rounded-lg md:py-6 md:px-0">
+      <div className="bg-white rounded-lg p-1 md:py-6 md:px-1">
         <Editor
           className="md:h-[500px] md:border-0 h-[310px] border"
           options={editorOptions}

apps/docs/components/landing/sections/alert-banner.tsx

@@ -5,19 +5,19 @@ function AlertBanner() {
   return (
     <Alert
       variant="destructive"
-      className="border-amber-200 bg-amber-50/80 backdrop-blur-sm shadow-lg"
+      className="border-amber-200 bg-amber-50/80 dark:border-amber-800/50 dark:bg-amber-950/30 backdrop-blur-sm shadow-lg dark:shadow-amber-900/20 transition-colors duration-200"
     >
       <AlertDescription className="flex items-start space-x-3">
         <div className="text-xl">🚧</div>
-        <div className="text-amber-800 leading-relaxed ">
-          <span className="font-bold text-amber-900 text-base">
+        <div className="text-amber-800 dark:text-amber-200 leading-relaxed">
+          <span className="font-bold text-amber-900 dark:text-amber-100 text-base">
             Work in Progress{" "}
           </span>
           AutoForm as a standalone package is still work in progress. If you
           want to help out, please check out the{" "}
           <a
             href="https://github.com/vantezzen/auto-form"
-            className="text-blue-600 hover:text-blue-800 decoration-blue-600  underline font-medium transition-colors"
+            className="text-blue-600 hover:text-blue-800 decoration-blue-600 dark:text-blue-400 dark:hover:text-blue-300 underline font-medium transition-colors"
             target="_blank"
             rel="noopener noreferrer"
           >

apps/docs/content/docs/react/custom-integration.mdx

@@ -31,7 +31,6 @@ Create a new file called `src/index.tsx` that will export all the necessary comp
 // src/index.tsx
 export * from "./AutoForm";
 export * from "./types";
-export * from "./utils";
 ```
 
 ## Define custom types

apps/docs/content/docs/react/customization.md

@@ -3,11 +3,11 @@ title: Customization
 description: The customization of the components is done by providing a `fieldConfig` to your schema fields. This allows you to customize the rendering of the field, add additional props, and more.
 ---
 
-With zod, you can use the `superRefine` method to add a `fieldConfig` to your schema field. For more information, see the [Zod documentation](/docs/schema/zod).
+With zod, you can use the `superRefine` method to add a `fieldConfig` to your schema field. For more information, see the [Zod documentation](/docs/schema-providers/zod).
 
-With yup, you can use the `transform` method to add a `fieldConfig` to your schema field. For more information, see the [Yup documentation](/docs/schema/yup).
+With yup, you can use the `transform` method to add a `fieldConfig` to your schema field. For more information, see the [Yup documentation](/docs/schema-providers/yup).
 
-With joi, you can use the `meta` method to add a `fieldConfig` to your schema field. For more information, see the [Joi documentation](/docs/schema/joi).
+With joi, you can use the `meta` method to add a `fieldConfig` to your schema field. For more information, see the [Joi documentation](/docs/schema-providers/joi).
 
 In these examples, we will use Zod.
 

apps/docs/content/docs/react/getting-started.mdx

@@ -270,8 +270,8 @@ All children passed to the `AutoForm` component will be rendered below the form.
 
 ## Next Steps
 
-- [How to define your zod schema](/docs/schema/zod)
-- [How to define your yup schema](/docs/schema/yup)
-- [How to define your joi schema](/docs/schema/joi)
+- [How to define your zod schema](/docs/schema-providers/zod)
+- [How to define your yup schema](/docs/schema-providers/yup)
+- [How to define your joi schema](/docs/schema-providers/joi)
 - [How to customize your form](/docs/react/customization)
 - [How to use AutoForm with other UI libraries](/docs/react/custom-integration)

apps/docs/content/docs/schema-providers/zod.md

@@ -115,9 +115,9 @@ Autoform is able to automatically transform some of zod's validation elements in
 
 Validation methods that are not supported by HTML will automatically be checked when the form is submitted.
 
-#### Descriptions
+#### Labels
 
-You can use the `describe` method to set a label and description for each field. If no label is set, the field name will be used and un-camel-cased.
+You can use the `describe` method to set a label for each field. If no label is set, the field name will be used and un-camel-cased.
 
 ```tsx
 const formSchema = z.object({
@@ -246,14 +246,19 @@ const formSchema = z.object({
 #### Field configuration
 
 You can use the `fieldConfig` function to set additional configuration for how a field should be rendered. This function is independent of the UI library you use so you can provide the FieldTypes that are supported by your UI library.
+It's recommended to create your own `fieldConfig` function. Use the base `buildZodFieldConfig` from `@autoform/react` and extend it with your customizations to ensure full TypeScript support.
 
-**Zod v3:**
+> `ZodProvider` and `fieldConfig` from `@autoform/zod` are fully compatible with all Zod versions including v3, v4, and Zod Mini, allowing you to use them across any Zod version.
 
-For Zod v3, it's recommended that you create your own fieldConfig function that uses the base `buildZodFieldConfig` function from `@autoform/react` and adds your own customizations. You apply this configuration using the `.superRefine()` method.
+#### Zod v3
+
+With Zod v3, you apply this configuration using the `.superRefine()` method.
 
 ```tsx
+import { ZodProvider, fieldConfig } from "@autoform/zod";
 import { buildZodFieldConfig } from "@autoform/react";
 import { FieldTypes } from "@autoform/mui"; // or your UI library's FieldTypes
+import * as z from "zod";
 
 const fieldConfig = buildZodFieldConfig<
   FieldTypes,
@@ -264,6 +269,15 @@ const fieldConfig = buildZodFieldConfig<
 
 // Example usage with Zod v3
 const formSchemaV3 = z.object({
+  username: z
+    .string({
+      required_error: "Username is required.",
+    })
+    .superRefine(
+      fieldConfig({
+        description: "You cannot change this later.",
+      })
+    ),
   password: z.string().superRefine(
     fieldConfig<React.ReactNode, FieldTypes>({
       description: "We recommend to use a strong password.",
@@ -278,16 +292,15 @@ const formSchemaV3 = z.object({
 });
 ```
 
-**Zod v4:**
-
-With Zod v4, the method for applying `fieldConfig` has changed. You now use the `fieldConfig` function directly from `@autoform/zod/v4` and apply it using the `.register()` method provided by Zod v4.
+#### Zod v4
 
+With Zod v4, you apply this configuration using the `.check()` method.
 Here's an example demonstrating the new usage:
 
 ```tsx
+import { ZodProvider, fieldConfig } from "@autoform/zod";
+import { AutoForm, FieldTypes } from "@autoform/mui";
 import * as z from "zod/v4";
-import { ZodProvider, fieldConfig } from "@autoform/zod/v4"; // Import fieldConfig from v4
-import { AutoForm, FieldTypes } from "@autoform/mui"; // or your UI library's FieldTypes
 
 // Define your form schema using zod v4
 const formSchemaV4 = z.object({
@@ -302,8 +315,8 @@ const formSchemaV4 = z.object({
       message: "Password must be at least 8 characters.",
     })
     // Use .register() with the spread operator (...)
-    .register(
-      ...fieldConfig<React.ReactNode, FieldTypes>({
+    .check(
+      fieldConfig<React.ReactNode, FieldTypes>({
         description: "We recommend to use a strong password.",
         inputProps: {
           type: "password",
@@ -318,12 +331,12 @@ const formSchemaV4 = z.object({
   // ... other fields
 });
 
-const schemaProviderV4 = new ZodProvider(formSchemaV4);
+const schemaProvider = new ZodProvider(formSchemaV4);
 
 function AppV4() {
   return (
     <AutoForm
-      schema={schemaProviderV4}
+      schema={schemaProvider}
       onSubmit={(data) => {
         console.log(data);
       }}
@@ -333,16 +346,48 @@ function AppV4() {
 }
 ```
 
-Notice the use of the spread operator (`...`) before `fieldConfig` when calling `.register()`. This is necessary because `register` expects two arguments, and the `fieldConfig` function from `@autoform/zod/v4` returns a tuple `[key, value]`. Also note that you should import `ZodProvider` and `fieldConfig` from `@autoform/zod/v4` when using Zod v4.
+#### Zod Mini
+
+With Zod mini, you apply this configuration using the `.check()` method.
 
 ```tsx
-import { buildZodFieldConfig } from "@autoform/react";
-import { FieldTypes } from "@autoform/mui";
+import { ZodProvider, fieldConfig } from "@autoform/zod";
+import { AutoForm, FieldTypes } from "@autoform/mui";
+import * as z from "zod/v4-mini";
 
-const fieldConfig = buildZodFieldConfig<
-  FieldTypes,
-  {
-    isImportant?: boolean;
-  }
->();
+// Define your form schema using zod mini
+const formSchemaMini = z.object({
+  password: zm
+    .string({
+      error: "Password is required.",
+    })
+    .check(
+      zm.minLength(8, {
+        message: "Password must be at least 8 characters.",
+      })
+    )
+    .check(
+      fieldConfig({
+        // Changed from superRefine to register
+        description: "Always use a secure password!",
+        inputProps: {
+          type: "password",
+        },
+      })
+    ),
+
+  sendMeMails: zm.optional(zm.boolean()).check(
+    fieldConfig({
+      // Changed from superRefine to register
+      fieldWrapper: (props: FieldWrapperProps) => (
+        <>
+          {props.children}
+          <p className="text-muted-foreground text-xs">
+            Don't worry, we only send important emails!
+          </p>
+        </>
+      ),
+    })
+  ),
+});
 ```

apps/web/components/Ant.tsx

@@ -1,11 +1,11 @@
 "use client";
 import { AutoForm } from "@autoform/ant";
-import { joiSchemaProvider } from "./utils";
+import { zodSchemaProvider } from "./utils";
 
 const Ant = () => {
   return (
     <AutoForm
-      schema={joiSchemaProvider}
+      schema={zodSchemaProvider}
       onSubmit={(data) => {
         console.log(JSON.stringify(data, null, 2));
       }}

apps/web/components/Chakra.tsx

@@ -1,4 +1,4 @@
-import { AutoForm, fieldConfig } from "@autoform/chakra";
+import { AutoForm } from "@autoform/chakra";
 import { zodSchemaProvider } from "./utils";
 
 function Chakra() {

apps/web/components/Mantine.tsx

@@ -1,5 +1,5 @@
 import { createTheme, MantineProvider } from "@mantine/core";
-import { AutoForm, fieldConfig } from "@autoform/mantine";
+import { AutoForm } from "@autoform/mantine";
 import { zodSchemaProvider } from "./utils";
 import "@mantine/core/styles.css";