{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "auth-password-reset",
  "title": "Auth Password Reset",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/auth-password-reset/AuthPasswordReset.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { ArrowLeft, MailCheck } from 'lucide-vue-next'\nimport { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Label } from '@/components/ui/label'\nimport { Button } from '@/components/ui/button'\n\nwithDefaults(\n  defineProps<{\n    signInHref?: string\n  }>(),\n  { signInHref: '/login' },\n)\n\nconst emit = defineEmits<{\n  (e: 'request', email: string): void\n  (e: 'reset', password: string): void\n}>()\n\ntype Stage = 'request' | 'sent' | 'reset' | 'done'\nconst stage = ref<Stage>('request')\n\nconst email = ref('')\nconst password = ref('')\nconst confirm = ref('')\nconst passwordsMatch = computed(() => !confirm.value || password.value === confirm.value)\n\nfunction submitRequest() {\n  if (!email.value) return\n  emit('request', email.value)\n  stage.value = 'sent'\n}\n\nfunction submitReset() {\n  if (!password.value || !passwordsMatch.value) return\n  emit('reset', password.value)\n  stage.value = 'done'\n}\n</script>\n\n<template>\n  <div class=\"bg-background flex min-h-svh items-center justify-center p-6\">\n    <Card class=\"w-full max-w-sm\">\n      <template v-if=\"stage === 'request'\">\n        <CardHeader class=\"text-center\">\n          <CardTitle class=\"text-2xl\">Forgot password?</CardTitle>\n          <CardDescription>Enter your email and we'll send you a reset link.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form class=\"space-y-4\" @submit.prevent=\"submitRequest\">\n            <div class=\"grid gap-2\">\n              <Label for=\"reset-email\">Email</Label>\n              <Input id=\"reset-email\" v-model=\"email\" type=\"email\" placeholder=\"you@company.com\" required />\n            </div>\n            <Button type=\"submit\" class=\"w-full\">Send reset link</Button>\n          </form>\n        </CardContent>\n        <CardFooter class=\"justify-center\">\n          <a\n            :href=\"signInHref\"\n            class=\"text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-sm\"\n          >\n            <ArrowLeft class=\"size-3\" />Back to sign in\n          </a>\n        </CardFooter>\n      </template>\n\n      <template v-else-if=\"stage === 'sent'\">\n        <CardContent class=\"space-y-4 pt-6 text-center\">\n          <div class=\"bg-primary/10 text-primary mx-auto flex size-12 items-center justify-center rounded-full\">\n            <MailCheck class=\"size-6\" />\n          </div>\n          <div class=\"space-y-1\">\n            <h3 class=\"text-lg font-semibold\">Check your inbox</h3>\n            <p class=\"text-muted-foreground text-sm\">\n              We've sent a reset link to <span class=\"text-foreground font-medium\">{{ email }}</span\n              >.\n            </p>\n          </div>\n          <Button variant=\"outline\" class=\"w-full\" @click=\"stage = 'reset'\">Open reset form (demo)</Button>\n          <button\n            class=\"text-muted-foreground hover:text-foreground text-xs underline-offset-4 hover:underline\"\n            @click=\"stage = 'request'\"\n          >\n            Wrong email?\n          </button>\n        </CardContent>\n      </template>\n\n      <template v-else-if=\"stage === 'reset'\">\n        <CardHeader class=\"text-center\">\n          <CardTitle class=\"text-2xl\">Set new password</CardTitle>\n          <CardDescription>Pick a strong password you haven't used before.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form class=\"space-y-4\" @submit.prevent=\"submitReset\">\n            <div class=\"grid gap-2\">\n              <Label for=\"reset-pw\">New password</Label>\n              <Input id=\"reset-pw\" v-model=\"password\" type=\"password\" autocomplete=\"new-password\" required />\n            </div>\n            <div class=\"grid gap-2\">\n              <Label for=\"reset-confirm\">Confirm password</Label>\n              <Input\n                id=\"reset-confirm\"\n                v-model=\"confirm\"\n                type=\"password\"\n                autocomplete=\"new-password\"\n                :aria-invalid=\"!passwordsMatch\"\n                required\n              />\n              <p v-if=\"!passwordsMatch\" class=\"text-destructive text-xs\">Passwords don't match.</p>\n            </div>\n            <Button type=\"submit\" class=\"w-full\">Reset password</Button>\n          </form>\n        </CardContent>\n      </template>\n\n      <template v-else>\n        <CardContent class=\"space-y-4 pt-6 text-center\">\n          <div class=\"bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full\">\n            <MailCheck class=\"size-6\" />\n          </div>\n          <div class=\"space-y-1\">\n            <h3 class=\"text-lg font-semibold\">All set</h3>\n            <p class=\"text-muted-foreground text-sm\">\n              Your password has been updated. You can now sign in with the new password.\n            </p>\n          </div>\n          <a :href=\"signInHref\"><Button class=\"w-full\">Continue to sign in</Button></a>\n        </CardContent>\n      </template>\n    </Card>\n  </div>\n</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/AuthPasswordReset.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "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/button.json"
  ],
  "description": "Four-stage password reset surface in a single card: request (email form) -> sent (check-your-inbox confirmation with \"Open reset form\" demo button) -> reset (new password + confirm with match validation) -> done (success confirmation linking back to sign-in). Emits `request` (email) when the link is asked for and `reset` (password) when the new password is set; consumer wires the actual mail/db calls.",
  "categories": [
    "auth"
  ]
}