{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "login-01",
  "title": "Login 01",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/login-01/Login01.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Github } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Separator } from '@/components/ui/separator'\n\nconst email = ref('')\nconst password = ref('')\n\nconst emit = defineEmits<{\n  (e: 'submit', payload: { email: string; password: string }): void\n  (e: 'forgot-password'): void\n  (e: 'sign-up'): void\n  (e: 'oauth', provider: 'github' | 'google'): void\n}>()\n\nfunction onSubmit() {\n  emit('submit', { email: email.value, password: password.value })\n}\n\n// ----- Optional: zod validation -----\n// HTML5 `type=\"email\"` + `required` already block obviously bad input,\n// but for typed parsing + custom rules drop in zod. Add `zod` to your\n// project, uncomment, and route `onSubmit` through `loginSchema.parse`.\n//\n// import { z } from 'zod'\n// const loginSchema = z.object({\n//   email: z.string().email('Enter a valid email'),\n//   password: z.string().min(1, 'Password is required'),\n// })\n// function onSubmit() {\n//   const parsed = loginSchema.safeParse({\n//     email: email.value, password: password.value,\n//   })\n//   if (!parsed.success) {\n//     // surface parsed.error.flatten().fieldErrors however you want\n//     return\n//   }\n//   emit('submit', parsed.data)\n// }\n</script>\n\n<template>\n  <div class=\"bg-muted/30 flex min-h-svh items-center justify-center p-6\">\n    <Card class=\"w-full max-w-sm\">\n      <CardHeader class=\"text-center\">\n        <CardTitle class=\"text-2xl\">Welcome back</CardTitle>\n        <CardDescription>Sign in to your account to continue.</CardDescription>\n      </CardHeader>\n      <CardContent class=\"space-y-4\">\n        <form class=\"space-y-4\" @submit.prevent=\"onSubmit\">\n          <div class=\"space-y-2\">\n            <Label for=\"email\">Email</Label>\n            <Input\n              id=\"email\"\n              v-model=\"email\"\n              type=\"email\"\n              placeholder=\"you@example.com\"\n              autocomplete=\"email\"\n              required\n            />\n          </div>\n          <div class=\"space-y-2\">\n            <div class=\"flex items-center justify-between\">\n              <Label for=\"password\">Password</Label>\n              <button\n                type=\"button\"\n                class=\"text-muted-foreground hover:text-foreground text-xs transition-colors\"\n                @click=\"emit('forgot-password')\"\n              >\n                Forgot password?\n              </button>\n            </div>\n            <Input id=\"password\" v-model=\"password\" type=\"password\" autocomplete=\"current-password\" required />\n          </div>\n          <Button type=\"submit\" class=\"w-full\">Sign in</Button>\n        </form>\n\n        <div class=\"relative\">\n          <Separator />\n          <span\n            class=\"bg-card text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-2 text-[11px] tracking-wider uppercase\"\n          >\n            Or continue with\n          </span>\n        </div>\n\n        <div class=\"grid grid-cols-2 gap-2\">\n          <Button type=\"button\" variant=\"outline\" @click=\"emit('oauth', 'google')\">\n            <svg viewBox=\"0 0 24 24\" class=\"size-4\" aria-hidden=\"true\">\n              <path\n                fill=\"#4285F4\"\n                d=\"M22.5 12.27c0-.79-.07-1.54-.2-2.27H12v4.51h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.32z\"\n              />\n              <path\n                fill=\"#34A853\"\n                d=\"M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.99.66-2.25 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z\"\n              />\n              <path\n                fill=\"#FBBC05\"\n                d=\"M5.84 14.1c-.22-.66-.35-1.36-.35-2.1s.13-1.44.35-2.1V7.07H2.18A10.97 10.97 0 0 0 1 12c0 1.77.42 3.45 1.18 4.93l3.66-2.84z\"\n              />\n              <path\n                fill=\"#EA4335\"\n                d=\"M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.83C6.71 7.31 9.14 5.38 12 5.38z\"\n              />\n            </svg>\n            Google\n          </Button>\n          <Button type=\"button\" variant=\"outline\" @click=\"emit('oauth', 'github')\">\n            <Github class=\"size-4\" />\n            GitHub\n          </Button>\n        </div>\n      </CardContent>\n      <CardFooter class=\"justify-center\">\n        <p class=\"text-muted-foreground text-xs\">\n          Don't have an account?\n          <button type=\"button\" class=\"text-foreground ml-1 font-medium hover:underline\" @click=\"emit('sign-up')\">\n            Sign up\n          </button>\n        </p>\n      </CardFooter>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/Login01.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/card.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/label.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Centered login card. Email + password fields with a \"Forgot password?\" link, primary submit, then a divider and a 2-button SSO row (Google + GitHub). Footer links to sign-up. Emits submit, forgot-password, sign-up, and oauth events for the consuming app to wire.",
  "categories": [
    "auth"
  ]
}