{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "login-02",
  "title": "Login 02",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/login-02/Login02.vue",
      "content": "<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { Github, ShieldCheck, Sparkles, Zap } from 'lucide-vue-next'\nimport { Button } from '@/components/ui/button'\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=\"grid min-h-svh lg:grid-cols-2\">\n    <!-- Brand / marketing panel -->\n    <aside\n      class=\"border-border relative hidden flex-col justify-between overflow-hidden border-r p-12 lg:flex\"\n      style=\"background: color-mix(in oklch, var(--primary) 6%, var(--card))\"\n    >\n      <div class=\"text-foreground relative z-[1] flex items-center gap-2.5\">\n        <div\n          class=\"text-background font-display grid size-8 place-items-center rounded-md font-bold\"\n          style=\"background: var(--primary)\"\n        >\n          U\n        </div>\n        <span class=\"font-display text-base font-semibold\">Your Product</span>\n      </div>\n\n      <div class=\"relative z-[1] max-w-md\">\n        <p class=\"text-muted-foreground/80 mb-3 text-[11px] font-medium tracking-[0.14em] uppercase\">\n          Why teams switch\n        </p>\n        <h2 class=\"font-display text-3xl leading-tight font-semibold tracking-tight text-balance\">\n          Ship features in\n          <em class=\"font-display font-semibold not-italic\" style=\"color: var(--primary)\">hours</em>, not sprints.\n        </h2>\n        <p class=\"text-muted-foreground mt-4 text-sm leading-relaxed\">\n          Reusable components, opinionated defaults, and a registry that keeps your team writing product code instead of\n          reinventing the same UI.\n        </p>\n\n        <ul class=\"mt-8 space-y-3 text-sm\">\n          <li class=\"flex items-start gap-3\">\n            <Zap class=\"mt-0.5 size-4 shrink-0\" style=\"color: var(--primary)\" />\n            <span class=\"text-foreground\">One-command install, full source ownership</span>\n          </li>\n          <li class=\"flex items-start gap-3\">\n            <ShieldCheck class=\"mt-0.5 size-4 shrink-0\" style=\"color: var(--primary)\" />\n            <span class=\"text-foreground\">SOC 2 compliant, SSO out of the box</span>\n          </li>\n          <li class=\"flex items-start gap-3\">\n            <Sparkles class=\"mt-0.5 size-4 shrink-0\" style=\"color: var(--primary)\" />\n            <span class=\"text-foreground\">Themeable tokens, dark mode, RTL ready</span>\n          </li>\n        </ul>\n      </div>\n\n      <p class=\"text-muted-foreground/70 relative z-[1] text-xs\">© {{ new Date().getFullYear() }} Your Product, Inc.</p>\n    </aside>\n\n    <!-- Form panel -->\n    <div class=\"flex items-center justify-center p-6 sm:p-12\">\n      <div class=\"w-full max-w-sm space-y-6\">\n        <div class=\"space-y-1.5 text-center lg:text-left\">\n          <h1 class=\"font-display text-3xl font-semibold tracking-tight\">Welcome back</h1>\n          <p class=\"text-muted-foreground text-sm\">Sign in to continue to your workspace.</p>\n        </div>\n\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?\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-background text-muted-foreground absolute -top-2.5 left-1/2 -translate-x-1/2 px-2 text-[11px] tracking-wider uppercase\"\n          >\n            Or\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\n        <p class=\"text-muted-foreground text-center 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      </div>\n    </div>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/Login02.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/input.json",
    "https://uipkge.dev/r/vue/label.json",
    "https://uipkge.dev/r/vue/separator.json"
  ],
  "description": "Split-layout login. Brand/marketing panel on the left (logo, headline, value-prop bullets, copyright) and the form on the right (email + password, SSO row, sign-up link). Collapses to single-column form-only on small screens. Edit the brand panel inline to swap product copy + bullet icons.",
  "categories": [
    "auth"
  ]
}