{
  "name": "login-02",
  "type": "registry:block",
  "dependencies": [
    "@lucide/vue"
  ],
  "registryDependencies": [
    "button",
    "field",
    "input"
  ],
  "files": [
    {
      "path": "blocks/login-02/components/LoginForm.vue",
      "type": "registry:file",
      "target": "blocks/login-02/components/LoginForm.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldSeparator,\n} from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\n\nconst props = defineProps<{\n  class?: HTMLAttributes[\"class\"]\n}>()\n</script>\n\n<template>\n  <form :class=\"cn('flex flex-col gap-6', props.class)\">\n    <FieldGroup>\n      <div class=\"flex flex-col items-center gap-1 text-center\">\n        <h1 class=\"text-2xl font-bold\">\n          Login to your account\n        </h1>\n        <p class=\"text-muted-foreground text-sm text-balance\">\n          Enter your email below to login to your account\n        </p>\n      </div>\n      <Field>\n        <FieldLabel for=\"email\">\n          Email\n        </FieldLabel>\n        <Input id=\"email\" type=\"email\" placeholder=\"m@example.com\" required />\n      </Field>\n      <Field>\n        <div class=\"flex items-center\">\n          <FieldLabel for=\"password\">\n            Password\n          </FieldLabel>\n          <a\n            href=\"#\"\n            class=\"ml-auto text-sm underline-offset-4 hover:underline\"\n          >\n            Forgot your password?\n          </a>\n        </div>\n        <Input id=\"password\" type=\"password\" required />\n      </Field>\n      <Field>\n        <Button type=\"submit\">\n          Login\n        </Button>\n      </Field>\n      <FieldSeparator>Or continue with</FieldSeparator>\n      <Field>\n        <Button variant=\"outline\" type=\"button\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n            <path\n              d=\"M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\n              fill=\"currentColor\"\n            />\n          </svg>\n          Login with GitHub\n        </Button>\n        <FieldDescription class=\"text-center\">\n          Don't have an account?\n          <a href=\"#\">Sign up</a>\n        </FieldDescription>\n      </Field>\n    </FieldGroup>\n  </form>\n</template>\n"
    },
    {
      "path": "blocks/login-02/page.vue",
      "type": "registry:file",
      "target": "blocks/login-02/page.vue",
      "content": "<script lang=\"ts\">\nexport const description = \"A two column login page with a cover image.\"\n</script>\n\n<script setup lang=\"ts\">\nimport { GalleryVerticalEnd } from \"@lucide/vue\"\nimport LoginForm from \"./components/LoginForm.vue\"\n</script>\n\n<template>\n  <div class=\"grid min-h-svh lg:grid-cols-2\">\n    <div class=\"flex flex-col gap-4 p-6 md:p-10\">\n      <div class=\"flex justify-center gap-2 md:justify-start\">\n        <a href=\"#\" class=\"flex items-center gap-2 font-medium\">\n          <div class=\"bg-primary text-primary-foreground flex size-6 items-center justify-center rounded-md\">\n            <GalleryVerticalEnd class=\"size-4\" />\n          </div>\n          Acme Inc.\n        </a>\n      </div>\n      <div class=\"flex flex-1 items-center justify-center\">\n        <div class=\"w-full max-w-xs\">\n          <LoginForm />\n        </div>\n      </div>\n    </div>\n    <div class=\"bg-muted relative hidden lg:block\">\n      <img\n        src=\"/placeholder.svg\"\n        alt=\"Image\"\n        class=\"absolute inset-0 h-full w-full object-cover dark:brightness-[0.2] dark:grayscale\"\n      >\n    </div>\n  </div>\n</template>\n"
    }
  ]
}