shadcn-ui-react 0.3.8 → 0.4.1

package/README.md

@@ -37,7 +37,9 @@ export default function App() {
   return (
     <div className="p-4">
       <Button variant="default">Click me</Button>
-      <Button loading className="ml-2">Loading</Button>
+      <Button loading className="ml-2">
+        Loading
+      </Button>
     </div>
   );
 }
@@ -174,10 +176,14 @@ import {
 import * as z from "zod";
 
 const formSchema = z.object({
-  email: z.string({error: "Email is required"}).email({ message: "Enter a valid email address" }),
+  email: z.email({
+    pattern:  z.regexes.email,
+    error: 'Email is required'
+  }),
   password: z
     .string()
     .min(8, { message: "Password must be at least 8 characters" }),
+  gender: z.enum(['male', 'female']).optional().nullable(),
 });
 
 type UserFormValue = z.infer<typeof formSchema>;
@@ -201,6 +207,28 @@ export default function UserAuthForm() {
         type="email"
         placeholder="Enter your email"
         label="Email"
+        variant="outline" //outline | soft | ghost | filled | flushed | unstyled | link
+        className="" //your style
+      />
+      <FormField
+          control={form.control}
+          name="password"
+          type="password"
+          placeholder="Enter password"
+          label="Password"
+          variant="outline" //outline | soft | ghost | filled | flushed | unstyled | link
+          className="" //your style
+        />
+      <FormSelect
+        control={form.control}
+        name="gender"
+        label="Gender"
+        variant="outline" //outline | soft | ghost | filled | flushed | unstyled | link
+        className="" //your style
+        items={[
+          { label: "Male", value: "male" },
+          { label: "Female", value: "female" },
+        ]}
       />
       <Button className="ml-auto w-full" type="submit">
         Log In
@@ -290,7 +318,6 @@ const Example = () => {
 export default Example;
 ```
 
-
 ---
 
 ## 💅 Theming & Styling