formaze 1.0.5 → 1.0.6

package/README.md

@@ -27,51 +27,51 @@ import "formaze/dist/style.css";
 
 // create the validation schema
 const formSchema = useFormSchema({
-	email: {
-		type: "email",
-	},
-	password: {
-		type: "password",
-		minLength: {
-			value: 8, // by default 6
-		},
-	},
+ email: {
+  type: "email",
+ },
+ password: {
+  type: "password",
+  minLength: {
+   value: 8, // by default 6
+  },
+ },
 });
 
 // create the form
 const Form = createFormValidator<typeof formSchema>();
 
 export function RegistrationForm() {
-	function handleSubmit(data: z.infer<typeof formSchema>) {
-		const result = formSchema.safeParse(data);
-
-		if (!result.success) throw new Error("Invalid inputs");
-
-		console.log(data);
-	}
-
-	return (
-		<Form schema={formSchema} onSubmit={handleSubmit}>
-			<Form.Input
-				label="Email"
-				type="email"
-				name="email"
-				placeholder="Enter your email"
-			/>
-			<Form.Input
-				label="Password"
-				type="password"
-				name="password"
-				placeholder="Enter your password"
-			/>
-			<button
-				className="rounded-md bg-blue-500 py-1 px-3 text-white hover:bg-blue-600"
-				type="submit"
-			>
-				Submit
-			</button>
-		</Form>
-	);
+ function handleSubmit(data: z.infer<typeof formSchema>) {
+	const result = formSchema.safeParse(data);
+
+  if (!result.success) throw new Error("Invalid inputs");
+
+  console.log(data);
+ }
+
+ return (
+  <Form schema={formSchema} onSubmit={handleSubmit}>
+   <Form.Input
+    label="Email"
+    type="email"
+    name="email"
+    placeholder="Enter your email"
+  />
+  <Form.Input
+    label="Password"
+    type="password"
+    name="password"
+    placeholder="Enter your password"
+  />
+  <button
+    className="rounded-md bg-blue-500 py-1 px-3 text-white hover:bg-blue-600"
+    type="submit"
+  >
+    Submit
+   </button>
+  </Form>
+ );
 }
 ```
 
@@ -81,33 +81,33 @@ The useFormSchema hook allows you to define validation rules for each field in t
 
 ```js
 const formSchema = useFormSchema({
-	email: {
-		type: "email",
-		customMessage: "A valid email is required",
-	},
-	password: {
-		type: "password",
-		minLength: {
-			value: 8,
-			message: "Password must be at least 8 characters",
-		},
-		maxLength: {
-			value: 16,
-			message: "Password must be less than 16 characters",
-		},
-	},
-	username: {
-		type: "string",
-		maxLength: {
-			value: 12,
-			message: "Username must be less than 12 characters",
-		},
-		customMessage: "Username must not be empty",
-	},
-	terms: {
-		type: "boolean",
-		customMessage: "You must accept the terms to continue",
+email: {
+ type: "email",
+  customMessage: "A valid email is required",
+ },
+ password: {
+  type: "password",
+	minLength: {
+	 value: 8,
+   message: "Password must be at least 8 characters",
 	},
+  maxLength: {
+   value: 16,
+   message: "Password must be less than 16 characters",
+  },
+ },
+ username: {
+  type: "string",
+  maxLength: {
+   value: 12,
+   message: "Username must be less than 12 characters",
+  },
+  customMessage: "Username must not be empty",
+ },
+ terms: {
+  type: "boolean",
+  customMessage: "You must accept the terms to continue",
+ },
 });
 ```
 
@@ -150,39 +150,39 @@ import "formaze/dist/style.css";
 
 ```css
 .form-control {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	gap: 1rem;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 1rem;
 }
 
 .form-control .form-field {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
 }
 
 .form-control .form-field .form-input {
-	padding: 10px 1rem;
-	border-radius: 10px;
-	border-width: 1px;
-	border-color: rgb(209 213 219);
+ padding: 10px 1rem;
+ border-radius: 10px;
+ border-width: 1px;
+ border-color: rgb(209 213 219);
 }
 
 .form-control .form-field .form-input:focus {
-	border-color: rgb(59 130 246);
-	outline: none;
+ border-color: rgb(59 130 246);
+ outline: none;
 }
 
 .form-control .form-field-error-text {
-	color: rgb(220, 38, 38);
-	font-size: 0.875rem;
+ color: rgb(220, 38, 38);
+ font-size: 0.875rem;
 }
 
 /* or */
 
 .form-control .form-field-error {
-	color: rgb(220, 38, 38);
+ color: rgb(220, 38, 38);
 }
 ```
 
@@ -214,8 +214,8 @@ The createFormValidator function returns a Form component with built-in form val
 
 ```tsx
 const schema = useFormSchema({
-	email: { type: "email" },
-	password: { type: "string", minLength: { value: 8 } },
+ email: { type: "email" },
+ password: { type: "string", minLength: { value: 8 } },
 });
 
 const Form = createFormValidator<typeof schema>();
@@ -234,12 +234,12 @@ const Form = createFormValidator<typeof schema>();
 
 ```tsx
 const schema = useFormSchema({
-	email: { type: "email" },
-	password: { type: "string" },
+ email: { type: "email" },
+ password: { type: "string" },
 });
 
 const onSubmit = (data: z.infer<typeof schema>) => {
-	console.log(data); // { email: "test@example.com", password: "securePassword" }
+ console.log(data); // { email: "test@example.com", password: "securePassword" }
 };
 
 <Form schema={schema} onSubmit={onSubmit} />;
@@ -256,13 +256,13 @@ const onSubmit = (data: z.infer<typeof schema>) => {
 
 ```tsx
 const schema = useFormSchema({
-	email: { type: "email" },
-	password: { type: "string" },
+ email: { type: "email" },
+ password: { type: "string" },
 });
 
 const defaultValues = {
-	email: "example@example.com",
-	password: "",
+ email: "example@example.com",
+ password: "",
 };
 
 <Form schema={schema} defaultValues={defaultValues} onSubmit={onSubmit} />;
@@ -281,9 +281,9 @@ You can include Form.Input for each form field, along with any other elements li
 
 ```tsx
 <Form schema={schema} onSubmit={onSubmit} defaultValues={defaultValues}>
-	<Form.Input name="email" placeholder="Email" />
-	<Form.Input type="password" name="password" placeholder="Password" />
-	<button type="submit">Submit</button>
+ <Form.Input name="email" placeholder="Email" />
+ <Form.Input type="password" name="password" placeholder="Password" />
+ <button type="submit">Submit</button>
 </Form>
 ```
 
@@ -321,14 +321,14 @@ useFormSchema is a utility function that generates a Zod schema based on the pro
 
 ```tsx
 const schema = useFormSchema({
-	email: { type: "email" },
-	password: {
-		type: "string",
-		minLength: {
-			value: 8,
-			message: "Password must be at least 8 characters long",
-		},
+ email: { type: "email" },
+ password: {
+	type: "string",
+	minLength: {
+ 	 value: 8,
+	 message: "Password must be at least 8 characters long",
 	},
+ },
 });
 ```
 

package/dist/index.d.ts

@@ -10,7 +10,7 @@ interface FormProps<T extends z.ZodSchema>
 }
 
 interface InputProps<T extends z.ZodSchema>
-	extends React.HTMLAttributes<HTMLInputElement> {
+	extends React.InputHTMLAttributes<HTMLInputElement> {
 	name: keyof z.infer<T>;
 	label?: string;
 }
@@ -120,20 +120,19 @@ type SchemaKeyValuePair<T extends SchemaConfig<Record<string, FieldConfig>>> = {
  * @param {keyof z.infer<T>} name - The name of the form field, matching the key of the schema.
  * @param {string} label - Label for the form input.
  * @param {string} [className] - Optional class for the input element.
- * @param {...any} props - Additional input attributes like `type`, `placeholder`, etc.
  *
  * @example
- * // Create a Zod schema
+ * // Create a form schema
  * const schema = useFormSchema({
  *   email: { type: "email" },
  *   password: { type: "string", minLength: { value: 8 } },
  * });
  *
- * // Use the generated Form component
+ * // Generate the Form component
  * const MyForm = createFormValidator<typeof schema>();
  *
- * <MyForm schema={schema} onSubmit={handleSubmit}>
- *   <MyForm.Input name="email" label="Email" />
+ * <MyForm schema={schema} onSubmit={(data) => {}}>
+ *   <MyForm.Input name="email" label="Email" type="email" />
  *   <MyForm.Input name="password" label="Password" type="password" />
  *   <button type="submit">Submit</button>
  * </MyForm>;

package/package.json

@@ -3,7 +3,7 @@
 	"description": "An easy form validation package for react, built by using React hook form and zod library",
 	"main": "dist/formaze.js",
 	"types": "dist/index.d.ts",
-	"version": "1.0.5",
+	"version": "1.0.6",
 	"type": "module",
 	"keywords": [
 		"react",