{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "auth-password-reset",
  "title": "Auth Password Reset",
  "type": "registry:page",
  "files": [
    {
      "path": "packages/registry-svelte/blocks/auth-password-reset/AuthPasswordReset.svelte",
      "content": "<script lang=\"ts\">\n  import { ArrowLeft, MailCheck } from '@lucide/svelte'\n  import { Button } from '$lib/components/ui/button'\n  import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '$lib/components/ui/card'\n  import { Input } from '$lib/components/ui/input'\n  import { Label } from '$lib/components/ui/label'\n\n  interface Props {\n    signInHref?: string\n    /** Fired with the email when the reset link is requested. Wire your mail call here. */\n    onRequest?: (email: string) => void\n    /** Fired with the new password when it is set. Wire your db call here. */\n    onReset?: (password: string) => void\n  }\n\n  let { signInHref = '/login', onRequest, onReset }: Props = $props()\n\n  type Stage = 'request' | 'sent' | 'reset' | 'done'\n  let stage: Stage = $state('request')\n\n  let email = $state('')\n  let password = $state('')\n  let confirm = $state('')\n  const passwordsMatch = $derived(!confirm || password === confirm)\n\n  function submitRequest(e: SubmitEvent) {\n    e.preventDefault()\n    if (!email) return\n    onRequest?.(email)\n    stage = 'sent'\n  }\n\n  function submitReset(e: SubmitEvent) {\n    e.preventDefault()\n    if (!password || !passwordsMatch) return\n    onReset?.(password)\n    stage = 'done'\n  }\n</script>\n\n<div data-slot=\"auth-password-reset\" class=\"bg-background flex min-h-svh items-center justify-center p-6\">\n  <Card class=\"w-full max-w-sm\">\n    {#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\" onsubmit={submitRequest}>\n          <div class=\"grid gap-2\">\n            <Label for=\"reset-email\">Email</Label>\n            <Input id=\"reset-email\" bind:value={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    {: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          </p>\n        </div>\n        <Button variant=\"outline\" class=\"w-full\" onclick={() => (stage = 'reset')}>Open reset form (demo)</Button>\n        <button\n          type=\"button\"\n          class=\"text-muted-foreground hover:text-foreground text-xs underline-offset-4 hover:underline\"\n          onclick={() => (stage = 'request')}\n        >\n          Wrong email?\n        </button>\n      </CardContent>\n    {: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\" onsubmit={submitReset}>\n          <div class=\"grid gap-2\">\n            <Label for=\"reset-pw\">New password</Label>\n            <Input id=\"reset-pw\" bind:value={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              bind:value={confirm}\n              type=\"password\"\n              autocomplete=\"new-password\"\n              aria-invalid={!passwordsMatch}\n              required\n            />\n            {#if !passwordsMatch}\n              <p class=\"text-destructive text-xs\">Passwords don't match.</p>\n            {/if}\n          </div>\n          <Button type=\"submit\" class=\"w-full\">Reset password</Button>\n        </form>\n      </CardContent>\n    {: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    {/if}\n  </Card>\n</div>\n",
      "type": "registry:page",
      "target": "~/src/lib/components/blocks/auth-password-reset/AuthPasswordReset.svelte"
    }
  ],
  "dependencies": [
    "@lucide/svelte"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/card.json",
    "https://uipkge.dev/r/svelte/input.json",
    "https://uipkge.dev/r/svelte/label.json",
    "https://uipkge.dev/r/svelte/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). Pass `onRequest` (email) and `onReset` (password) callbacks; consumer wires the actual mail/db calls.",
  "categories": [
    "auth"
  ]
}