{
  "name": "signup-03",
  "type": "registry:block",
  "dependencies": [
    "@lucide/vue"
  ],
  "registryDependencies": [
    "button",
    "card",
    "field",
    "input"
  ],
  "files": [
    {
      "path": "blocks/signup-03/components/SignupForm.vue",
      "type": "registry:file",
      "target": "blocks/signup-03/components/SignupForm.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from \"vue\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\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  <div :class=\"cn('flex flex-col gap-6', props.class)\">\n    <Card>\n      <CardHeader class=\"text-center\">\n        <CardTitle class=\"text-xl\">\n          Create your account\n        </CardTitle>\n        <CardDescription>\n          Enter your email below to create your account\n        </CardDescription>\n      </CardHeader>\n      <CardContent>\n        <form>\n          <FieldGroup>\n            <Field>\n              <FieldLabel for=\"name\">\n                Full Name\n              </FieldLabel>\n              <Input id=\"name\" type=\"text\" placeholder=\"John Doe\" required />\n            </Field>\n            <Field>\n              <FieldLabel for=\"email\">\n                Email\n              </FieldLabel>\n              <Input\n                id=\"email\"\n                type=\"email\"\n                placeholder=\"m@example.com\"\n                required\n              />\n            </Field>\n            <Field>\n              <Field class=\"grid grid-cols-2 gap-4\">\n                <Field>\n                  <FieldLabel for=\"password\">\n                    Password\n                  </FieldLabel>\n                  <Input id=\"password\" type=\"password\" required />\n                </Field>\n                <Field>\n                  <FieldLabel for=\"confirm-password\">\n                    Confirm Password\n                  </FieldLabel>\n                  <Input id=\"confirm-password\" type=\"password\" required />\n                </Field>\n              </Field>\n              <FieldDescription>\n                Must be at least 8 characters long.\n              </FieldDescription>\n            </Field>\n            <Field>\n              <Button type=\"submit\">\n                Create Account\n              </Button>\n              <FieldDescription class=\"text-center\">\n                Already have an account? <a href=\"#\">Sign in</a>\n              </FieldDescription>\n            </Field>\n          </FieldGroup>\n        </form>\n      </CardContent>\n    </Card>\n    <FieldDescription class=\"px-6 text-center\">\n      By clicking continue, you agree to our <a href=\"#\">Terms of Service</a>\n      and <a href=\"#\">Privacy Policy</a>.\n    </FieldDescription>\n  </div>\n</template>\n"
    },
    {
      "path": "blocks/signup-03/page.vue",
      "type": "registry:file",
      "target": "blocks/signup-03/page.vue",
      "content": "<script setup lang=\"ts\">\nimport { GalleryVerticalEnd } from \"@lucide/vue\"\n\nimport SignupForm from \"./components/SignupForm.vue\"\n</script>\n\n<template>\n  <div class=\"bg-muted flex min-h-svh flex-col items-center justify-center gap-6 p-6 md:p-10\">\n    <div class=\"flex w-full max-w-sm flex-col gap-6\">\n      <a href=\"#\" class=\"flex items-center gap-2 self-center 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      <SignupForm />\n    </div>\n  </div>\n</template>\n"
    }
  ]
}