{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "simple-signin",
  "type": "registry:block",
  "title": "Simple Signin",
  "description": "A simple sign-in form with email and password inputs",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "form",
    "button",
    "input"
  ],
  "files": [
    {
      "path": "registry/default/blocks/signin-signup/simple-signin.tsx",
      "content": "'use client'\r\n\r\nimport { z } from 'zod'\r\nimport { Button } from '@/registry/default/ui/button'\r\nimport {\r\n    Form,\r\n    FormControl,\r\n    FormField,\r\n    FormItem,\r\n    FormLabel,\r\n    FormMessage,\r\n} from '@/registry/default/ui/form'\r\nimport { Input } from '@/registry/default/ui/input'\r\nimport { useForm } from 'react-hook-form'\r\nimport { zodResolver } from '@hookform/resolvers/zod'\r\nimport { EyeIcon, EyeOffIcon, LockIcon, MailIcon } from 'lucide-react'\r\nimport React from 'react'\r\n\r\nconst formSchema = z.object({\r\n    email: z\r\n        .string()\r\n        .email({\r\n            message: 'Invalid email address',\r\n        })\r\n        .min(1, {\r\n            message: 'Email is required',\r\n        }),\r\n    password: z\r\n        .string()\r\n        .min(8, {\r\n            message: 'Password must be at least 8 characters long',\r\n        })\r\n        .refine((val) => /[A-Z]/.test(val), {\r\n            message: 'Password must contain at least one uppercase letter',\r\n        })\r\n        .refine((val) => /[a-z]/.test(val), {\r\n            message: 'Password must contain at least one lowercase letter',\r\n        })\r\n        .refine((val) => /\\d/.test(val), {\r\n            message: 'Password must contain at least one number',\r\n        }),\r\n})\r\n\r\nexport default function Signin() {\r\n    const [show, setShow] = React.useState(false)\r\n\r\n    const form = useForm<z.infer<typeof formSchema>>({\r\n        resolver: zodResolver(formSchema),\r\n        defaultValues: {\r\n            email: '',\r\n            password: '',\r\n        },\r\n    })\r\n\r\n    const onSubmit = async (data: z.infer<typeof formSchema>) => {\r\n        console.log('Form submitted:', data)\r\n        // Handle form submission logic here\r\n    }\r\n\r\n    return (\r\n        <section className=\"flex w-full flex-col items-center justify-center p-4 py-28 xl:px-6\">\r\n            <div className=\"flex w-full max-w-sm flex-col items-center\">\r\n                <svg\r\n                    viewBox=\"0 0 40 40\"\r\n                    fill=\"none\"\r\n                    xmlns=\"http://www.w3.org/2000/svg\"\r\n                    className=\"text-foreground mb-4 h-12 w-12 opacity-90\"\r\n                >\r\n                    <path\r\n                        d=\"M11.7699 21.8258L7.42207 20.485C5 19.9996 5 20 6.6277 17.875L9.77497 13.9892C10.4003 13.2172 11.3407 12.7687 12.3342 12.7687L19.2668 13.0726M11.7699 21.8258C11.7699 21.8258 12.8773 24.5436 14.1667 25.833C15.4561 27.1223 18.1738 28.2296 18.1738 28.2296M18.1738 28.2296L19.0938 32.0266C19.5 34.5 19.5 34.5 21.6117 33.0063L25.7725 30.2146C26.684 29.603 27.2308 28.5775 27.2308 27.4798L26.927 20.733M26.927 20.733C31.5822 16.4657 34.5802 12.4926 34.9962 6.59335C35.1164 4.8888 35.1377 4.88137 33.4062 5.00345C27.507 5.41937 23.534 8.4174 19.2668 13.0726M11.7699 31.6146C11.7699 33.4841 10.2544 34.9996 8.38495 34.9996H5V31.6146C5 29.7453 6.5155 28.2298 8.38495 28.2298C10.2544 28.2298 11.7699 29.7453 11.7699 31.6146Z\"\r\n                        fill=\"currentColor\"\r\n                    />\r\n                    <path\r\n                        d=\"M12.5 22.9996L11 20.4996C11 20.0996 16 12.9996 20 12.9996C22.1667 14.8329 26.1172 16.4682 27 19.9996C27.5 21.9996 21.5 26.1663 18.5 28.4996L12.5 22.9996Z\"\r\n                        fill=\"currentColor\"\r\n                    />\r\n                </svg>\r\n                <h1 className=\"w-full text-center text-xl font-semibold text-balance\">\r\n                    Welcome to Launch MVP Fast\r\n                </h1>\r\n                <p className=\"text-muted-foreground mt-1 w-full text-center text-sm\">\r\n                    Want to create an account?{' '}\r\n                    <a href=\"#\" className=\"underline underline-offset-2\">\r\n                        Register\r\n                    </a>\r\n                </p>\r\n\r\n                <Form {...form}>\r\n                    <form\r\n                        onSubmit={form.handleSubmit(onSubmit)}\r\n                        className=\"mt-8 w-full space-y-4\"\r\n                    >\r\n                        <FormField\r\n                            control={form.control}\r\n                            name=\"email\"\r\n                            render={({ field, fieldState }) => (\r\n                                <FormItem>\r\n                                    <FormLabel>Email Address</FormLabel>\r\n                                    <FormControl>\r\n                                        <div className=\"relative w-full\">\r\n                                            <MailIcon className=\"text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2\" />\r\n                                            <Input\r\n                                                placeholder=\"ali@example.com\"\r\n                                                className=\"ps-8\"\r\n                                                aria-invalid={\r\n                                                    !!fieldState.invalid\r\n                                                }\r\n                                                {...field}\r\n                                            />\r\n                                        </div>\r\n                                    </FormControl>\r\n\r\n                                    <FormMessage />\r\n                                </FormItem>\r\n                            )}\r\n                        />\r\n\r\n                        <FormField\r\n                            control={form.control}\r\n                            name=\"password\"\r\n                            render={({ field, fieldState }) => (\r\n                                <FormItem>\r\n                                    <div className=\"flex items-center justify-between\">\r\n                                        <FormLabel>Password</FormLabel>\r\n                                        <a\r\n                                            href=\"#\"\r\n                                            className=\"text-sm font-medium hover:underline hover:underline-offset-4\"\r\n                                        >\r\n                                            Forgot password?\r\n                                        </a>\r\n                                    </div>\r\n                                    <FormControl>\r\n                                        <div className=\"relative w-full\">\r\n                                            <LockIcon className=\"text-muted-foreground pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2\" />\r\n                                            <Input\r\n                                                placeholder=\"Password\"\r\n                                                type={\r\n                                                    show ? 'text' : 'password'\r\n                                                }\r\n                                                className=\"ps-8 pe-9\"\r\n                                                aria-invalid={\r\n                                                    !!fieldState.invalid\r\n                                                }\r\n                                                {...field}\r\n                                            />\r\n\r\n                                            <Button\r\n                                                size=\"icon\"\r\n                                                variant=\"ghost\"\r\n                                                type=\"button\"\r\n                                                className=\"absolute top-1/2 right-0.5 h-8 w-8 -translate-y-1/2 cursor-pointer\"\r\n                                                onClick={() => setShow(!show)}\r\n                                            >\r\n                                                {show ? (\r\n                                                    <EyeOffIcon />\r\n                                                ) : (\r\n                                                    <EyeIcon />\r\n                                                )}\r\n                                            </Button>\r\n                                        </div>\r\n                                    </FormControl>\r\n\r\n                                    <FormMessage />\r\n                                </FormItem>\r\n                            )}\r\n                        />\r\n                        <Button type=\"submit\" className=\"w-full cursor-pointer\">\r\n                            Continue with Email\r\n                        </Button>\r\n                    </form>\r\n                </Form>\r\n\r\n                <div className=\"after:border-border relative w-full py-4 text-center text-sm after:absolute after:inset-0 after:top-1/2 after:z-0 after:flex after:items-center after:border-t\">\r\n                    <span className=\"bg-background text-muted-foreground relative z-10 px-2\">\r\n                        Or\r\n                    </span>\r\n                </div>\r\n\r\n                <div className=\"grid w-full grid-cols-1 gap-2\">\r\n                    <Button\r\n                        type=\"button\"\r\n                        variant=\"secondary\"\r\n                        className=\"cursor-pointer\"\r\n                    >\r\n                        <svg\r\n                            viewBox=\"0 0 256 262\"\r\n                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                            preserveAspectRatio=\"xMidYMid\"\r\n                        >\r\n                            <path\r\n                                d=\"M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027\"\r\n                                fill=\"#4285F4\"\r\n                            />\r\n                            <path\r\n                                d=\"M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1\"\r\n                                fill=\"#34A853\"\r\n                            />\r\n                            <path\r\n                                d=\"M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782\"\r\n                                fill=\"#FBBC05\"\r\n                            />\r\n                            <path\r\n                                d=\"M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251\"\r\n                                fill=\"#EB4335\"\r\n                            />\r\n                        </svg>\r\n                        Continue with Google\r\n                    </Button>\r\n                    <Button\r\n                        type=\"button\"\r\n                        variant=\"secondary\"\r\n                        className=\"cursor-pointer\"\r\n                    >\r\n                        <svg\r\n                            viewBox=\"0 0 1024 1024\"\r\n                            fill=\"none\"\r\n                            xmlns=\"http://www.w3.org/2000/svg\"\r\n                        >\r\n                            <path\r\n                                fillRule=\"evenodd\"\r\n                                clipRule=\"evenodd\"\r\n                                d=\"M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z\"\r\n                                transform=\"scale(64)\"\r\n                                fill=\"currentColor\"\r\n                            />\r\n                        </svg>\r\n                        Continue with Github\r\n                    </Button>\r\n                </div>\r\n\r\n                <p className=\"text-muted-foreground mt-8 max-w-md text-center text-sm text-balance\">\r\n                    By clicking continue, you agree to our{' '}\r\n                    <a href=\"#\" className=\"underline underline-offset-2\">\r\n                        Terms of Service\r\n                    </a>{' '}\r\n                    and{' '}\r\n                    <a href=\"#\" className=\"underline underline-offset-2\">\r\n                        Privacy Policy\r\n                    </a>\r\n                    .\r\n                </p>\r\n            </div>\r\n        </section>\r\n    )\r\n}\r\n",
      "type": "registry:block",
      "target": "components/auth/signin.tsx"
    }
  ]
}