shadcn-zod-formkit 1.0.4 → 1.1.0

package/README.md

@@ -4,7 +4,7 @@
 
 
 
-📦 A React library for creating **dynamic forms** with **Zod validations**, supporting multiple input types: text, number, email, switch, color, date, select, file, and OTP.
+📦 A React library for creating **dynamic forms** with **Zod validations**, supporting multiple input types: text, number, email, switch, color, date, select, file, OTP and others.
 
 ---
 
@@ -26,7 +26,7 @@ yarn add shadcn-zod-formkit
  You need installa shadcn basic components
  ```typescript 
  # Add Shadcn Basics
- npx shadcn@latest add  accordion alert badge button calendar card checkbox dialog popover form input label select sonner tooltip switch textarea input-otp collapsible input-group radio-group slider
+ npx shadcn@latest add  accordion alert badge button calendar card checkbox dialog popover form input label select sonner tooltip switch textarea input-otp collapsible input-group radio-group slider button-group
  ```
 
 
@@ -44,6 +44,8 @@ import {
   TextInputType
 } from "shadcn-zod-formkit";
 
+import { Mail, User } from 'lucide-react';
+
 export default function Home() {
   // Record From DB example (User),
   // record is used for define default values
@@ -58,6 +60,7 @@ export default function Home() {
 
   return (
     <DynamicForm
+      formTitle="Title Form"
       fields={mockFields}
       record={record}
       onSubmit={(data) => console.log("📤 Resultado final:", data)}
@@ -68,14 +71,26 @@ export default function Home() {
 const mockFields: Array<FieldProps |FieldProps[]> = [
   {
     name: "username",
-    label: "Nombre de usuario",
-    inputType: InputTypes.TEXT,
-    ZodTypeAny: z .string().min(3).max(20),
+    label: "Username",
+    inputType: InputTypes.TEXT_GROUP,
+    inputGroupConfig:{
+      autoValidIcons: true,
+      iconsLeft: [User]
+    },
+    zodType: z.string().min(3).max(20),
   },
   {
     name: "email",
-    label: "Correo electrónico",
-    inputType: InputTypes.TEXT,
+    label: "Email",
+    inputType: InputTypes.TEXT_GROUP,
+    inputGroupConfig:{
+      autoValidIcons: true,
+      iconsLeft: [Mail],
+    },
+    zodType: z
+      .string()
+      .email("Invalid Email")
+      .optional(),
   },
 ]
 ```
@@ -96,11 +111,16 @@ const mockFields: Array<FieldProps |FieldProps[]> = [
   | **Switch List**          |  `InputTypes.GROUPED_SWITCH_LIST`  | 
   | **Radio Group**          |  `InputTypes.RADIO_GROUP`          | 
   | **Tags**                 |  `InputTypes.TAGS`                 | 
+  | **Input Date Time**      |  `InputTypes.DATE_TIME`            | 
+  | **Input Time**           |  `InputTypes.TIME`                 | 
+  | **Upload Multi File**    |  `InputTypes.FILE_MULTI_UPLOAD`    | 
+  | **Button Group**         |  `InputTypes.BUTTON_GROUP`         | 
+
 
 
 ## ✅ Features
   - Fully dynamic fields array support.
-  - Multiple input types (text, email, number, color, date, select, switch, file, OTP).
+  - Multiple input types (text, email, number, color, date, select, switch, file, OTP, and others).
   - Zod validation integration for robust form validation.
   - Supports default values via record prop.
   - Works seamlessly with React 18+ and TypeScript.
@@ -108,4 +128,11 @@ const mockFields: Array<FieldProps |FieldProps[]> = [
 ## 💡 Tips
   - Use peerDependencies for React to avoid version conflicts.
   - Wrap your forms inside a "use client" component if using Next.js App Router.
-- Combine multiple FieldProps in arrays for grouped fields (like age + color).
+  - Combine multiple FieldProps in arrays for grouped fields (like age + color).
+
+## 🧠 Acknowledgements
+  - React - A JavaScript library for building user interfaces.
+  - Next.js - The React framework for production.
+  - Tailwind CSS - A utility-first CSS framework for creating custom designs.
+  - Zod - TypeScript-first schema declaration and validation.
+