{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-password-reset",
  "title": "Auth Password Reset",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/auth-password-reset/AuthPasswordReset.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { ArrowLeft, MailCheck } from 'lucide-react'\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\ntype Stage = 'request' | 'sent' | 'reset' | 'done'\n\nexport interface AuthPasswordResetProps {\n  signInHref?: string\n  onRequest?: (email: string) => void\n  onReset?: (password: string) => void\n}\n\nexport function AuthPasswordReset({\n  signInHref = '/login',\n  onRequest,\n  onReset,\n}: AuthPasswordResetProps) {\n  const [stage, setStage] = React.useState<Stage>('request')\n\n  const [email, setEmail] = React.useState('')\n  const [password, setPassword] = React.useState('')\n  const [confirm, setConfirm] = React.useState('')\n  const passwordsMatch = !confirm || password === confirm\n\n  function submitRequest(e: React.FormEvent) {\n    e.preventDefault()\n    if (!email) return\n    onRequest?.(email)\n    setStage('sent')\n  }\n\n  function submitReset(e: React.FormEvent) {\n    e.preventDefault()\n    if (!password || !passwordsMatch) return\n    onReset?.(password)\n    setStage('done')\n  }\n\n  return (\n    <div className=\"bg-background flex min-h-svh items-center justify-center p-6\">\n      <Card className=\"w-full max-w-sm\">\n        {stage === 'request' && (\n          <>\n            <CardHeader className=\"text-center\">\n              <CardTitle className=\"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 className=\"space-y-4\" onSubmit={submitRequest}>\n                <div className=\"grid gap-2\">\n                  <Label htmlFor=\"reset-email\">Email</Label>\n                  <Input\n                    id=\"reset-email\"\n                    value={email}\n                    onChange={(e) => setEmail(e.target.value)}\n                    type=\"email\"\n                    placeholder=\"you@company.com\"\n                    required\n                  />\n                </div>\n                <Button type=\"submit\" className=\"w-full\">\n                  Send reset link\n                </Button>\n              </form>\n            </CardContent>\n            <CardFooter className=\"justify-center\">\n              <a\n                href={signInHref}\n                className=\"text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-sm\"\n              >\n                <ArrowLeft className=\"size-3\" />Back to sign in\n              </a>\n            </CardFooter>\n          </>\n        )}\n\n        {stage === 'sent' && (\n          <CardContent className=\"space-y-4 pt-6 text-center\">\n            <div className=\"bg-primary/10 text-primary mx-auto flex size-12 items-center justify-center rounded-full\">\n              <MailCheck className=\"size-6\" />\n            </div>\n            <div className=\"space-y-1\">\n              <h3 className=\"text-lg font-semibold\">Check your inbox</h3>\n              <p className=\"text-muted-foreground text-sm\">\n                We've sent a reset link to <span className=\"text-foreground font-medium\">{email}</span>.\n              </p>\n            </div>\n            <Button variant=\"outline\" className=\"w-full\" onClick={() => setStage('reset')}>\n              Open reset form (demo)\n            </Button>\n            <button\n              className=\"text-muted-foreground hover:text-foreground text-xs underline-offset-4 hover:underline\"\n              onClick={() => setStage('request')}\n            >\n              Wrong email?\n            </button>\n          </CardContent>\n        )}\n\n        {stage === 'reset' && (\n          <>\n            <CardHeader className=\"text-center\">\n              <CardTitle className=\"text-2xl\">Set new password</CardTitle>\n              <CardDescription>Pick a strong password you haven't used before.</CardDescription>\n            </CardHeader>\n            <CardContent>\n              <form className=\"space-y-4\" onSubmit={submitReset}>\n                <div className=\"grid gap-2\">\n                  <Label htmlFor=\"reset-pw\">New password</Label>\n                  <Input\n                    id=\"reset-pw\"\n                    value={password}\n                    onChange={(e) => setPassword(e.target.value)}\n                    type=\"password\"\n                    autoComplete=\"new-password\"\n                    required\n                  />\n                </div>\n                <div className=\"grid gap-2\">\n                  <Label htmlFor=\"reset-confirm\">Confirm password</Label>\n                  <Input\n                    id=\"reset-confirm\"\n                    value={confirm}\n                    onChange={(e) => setConfirm(e.target.value)}\n                    type=\"password\"\n                    autoComplete=\"new-password\"\n                    aria-invalid={!passwordsMatch}\n                    required\n                  />\n                  {!passwordsMatch && <p className=\"text-destructive text-xs\">Passwords don't match.</p>}\n                </div>\n                <Button type=\"submit\" className=\"w-full\">\n                  Reset password\n                </Button>\n              </form>\n            </CardContent>\n          </>\n        )}\n\n        {stage === 'done' && (\n          <CardContent className=\"space-y-4 pt-6 text-center\">\n            <div className=\"bg-success/10 text-success mx-auto flex size-12 items-center justify-center rounded-full\">\n              <MailCheck className=\"size-6\" />\n            </div>\n            <div className=\"space-y-1\">\n              <h3 className=\"text-lg font-semibold\">All set</h3>\n              <p className=\"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}>\n              <Button className=\"w-full\">Continue to sign in</Button>\n            </a>\n          </CardContent>\n        )}\n      </Card>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/AuthPasswordReset.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/card.json",
    "https://uipkge.dev/r/react/input.json",
    "https://uipkge.dev/r/react/label.json",
    "https://uipkge.dev/r/react/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"
  ]
}