{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "change-email",
  "title": "Change Email",
  "description": "A form component for changing the user's email address with verification.",
  "dependencies": [
    "@better-auth-ui/react@latest",
    "@better-auth-ui/core@latest",
    "better-auth"
  ],
  "registryDependencies": [
    "button",
    "card",
    "field",
    "input",
    "skeleton",
    "sonner",
    "spinner"
  ],
  "files": [
    {
      "path": "src/components/auth/settings/account/change-email.tsx",
      "content": "\"use client\"\n\nimport { getViewURL } from \"@better-auth-ui/core\"\nimport { useAuth, useChangeEmail, useSession } from \"@better-auth-ui/react\"\nimport { type SyntheticEvent, useState } from \"react\"\nimport { toast } from \"sonner\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/components/ui/card\"\nimport { Field, FieldError, FieldLabel } from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { Spinner } from \"@/components/ui/spinner\"\nimport { cn } from \"@/lib/utils\"\n\nexport type ChangeEmailProps = {\n  className?: string\n}\n\n/**\n * Render a card containing a form to view and update the authenticated user's email.\n *\n * Shows a loading skeleton until session data is available, displays the current\n * email as the form's default value, and sends a verification email to the\n * new address upon successful submission.\n *\n * @returns A JSX element rendering the change-email card and form\n */\nexport function ChangeEmail({ className }: ChangeEmailProps) {\n  const { authClient, basePaths, baseURL, localization, viewPaths } = useAuth()\n  const { data: session } = useSession(authClient)\n\n  const { mutate: changeEmail, isPending } = useChangeEmail(authClient, {\n    onSuccess: () => toast.success(localization.settings.changeEmailSuccess)\n  })\n\n  const [fieldErrors, setFieldErrors] = useState<{\n    email?: string\n  }>({})\n\n  function handleSubmit(e: SyntheticEvent<HTMLFormElement>) {\n    e.preventDefault()\n\n    const formData = new FormData(e.currentTarget)\n    changeEmail({\n      newEmail: formData.get(\"email\") as string,\n      callbackURL: getViewURL(\n        baseURL,\n        basePaths.settings,\n        viewPaths.settings.account\n      )\n    })\n  }\n\n  return (\n    <div>\n      <h2 className=\"text-sm font-semibold mb-3\">\n        {localization.settings.changeEmail}\n      </h2>\n\n      <form onSubmit={handleSubmit}>\n        <Card className={cn(className)}>\n          <CardContent className=\"flex flex-col gap-6\">\n            <Field data-invalid={!!fieldErrors.email}>\n              <FieldLabel htmlFor=\"email\">{localization.auth.email}</FieldLabel>\n\n              {session ? (\n                <Input\n                  key={session?.user.email}\n                  id=\"email\"\n                  name=\"email\"\n                  type=\"email\"\n                  autoComplete=\"email\"\n                  defaultValue={session?.user.email}\n                  placeholder={localization.auth.emailPlaceholder}\n                  disabled={isPending}\n                  required\n                  onChange={() => {\n                    setFieldErrors((prev) => ({\n                      ...prev,\n                      email: undefined\n                    }))\n                  }}\n                  onInvalid={(e) => {\n                    e.preventDefault()\n                    setFieldErrors((prev) => ({\n                      ...prev,\n                      email: (e.target as HTMLInputElement).validationMessage\n                    }))\n                  }}\n                  aria-invalid={!!fieldErrors.email}\n                />\n              ) : (\n                <Skeleton>\n                  <Input className=\"invisible\" />\n                </Skeleton>\n              )}\n\n              <FieldError>{fieldErrors.email}</FieldError>\n            </Field>\n          </CardContent>\n\n          <CardFooter>\n            <Button type=\"submit\" size=\"sm\" disabled={isPending || !session}>\n              {isPending && <Spinner />}\n\n              {localization.settings.updateEmail}\n            </Button>\n          </CardFooter>\n        </Card>\n      </form>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "@components/auth/settings/account/change-email.tsx"
    }
  ],
  "type": "registry:component"
}