{
  "$schema": "https://abackui.com/schema/registry-item.json",
  "name": "sign-in",
  "type": "registry:block",
  "title": "Sign in",
  "description": "A complete sign-in card with email, password, remember me, and account links.",
  "registryDependencies": [
    "https://abackui.com/r/utils.json",
    "https://abackui.com/r/button.json",
    "https://abackui.com/r/card.json",
    "https://abackui.com/r/checkbox.json",
    "https://abackui.com/r/field.json",
    "https://abackui.com/r/input.json",
    "https://abackui.com/r/label.json"
  ],
  "categories": [
    "Authentication"
  ],
  "docs": "https://abackui.com/docs/blocks/sign-in",
  "meta": {
    "status": "beta"
  },
  "files": [
    {
      "path": "components/blocks/sign-in.tsx",
      "content": "\"use client\";\n\nimport { useState, type FormEvent } from \"react\";\n\nimport { Button } from \"@/components/ui/button\";\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\";\nimport { Checkbox } from \"@/components/ui/checkbox\";\nimport { Field } from \"@/components/ui/field\";\nimport { Input } from \"@/components/ui/input\";\nimport { Label } from \"@/components/ui/label\";\n\nexport interface SignInValues {\n  email: string;\n  password: string;\n  remember: boolean;\n}\n\nexport interface SignInBlockProps {\n  onSubmit?: (values: SignInValues) => void;\n  signUpHref?: string;\n  forgotHref?: string;\n  title?: string;\n  description?: string;\n}\n\n/**\n * A complete sign-in card. It owns no authentication: pass `onSubmit` to call\n * your auth client, and swap the anchors for your router's link component.\n */\nexport function SignInBlock({\n  onSubmit,\n  signUpHref = \"#\",\n  forgotHref = \"#\",\n  title = \"Sign in\",\n  description = \"Use the email you signed up with to continue to your workspace.\",\n}: SignInBlockProps) {\n  const [email, setEmail] = useState(\"\");\n  const [password, setPassword] = useState(\"\");\n  const [remember, setRemember] = useState(true);\n\n  function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    onSubmit?.({ email, password, remember });\n  }\n\n  return (\n    <section aria-labelledby=\"sign-in-title\" className=\"mx-auto w-full max-w-sm\">\n      <div\n        aria-hidden=\"true\"\n        className=\"mb-6 flex size-9 items-center justify-center bg-primary text-sm font-bold text-primary-foreground\"\n      >\n        A\n      </div>\n\n      <Card>\n        <CardHeader>\n          <CardTitle as=\"h2\" id=\"sign-in-title\" className=\"text-xl\">\n            {title}\n          </CardTitle>\n          <CardDescription>{description}</CardDescription>\n        </CardHeader>\n\n        <CardContent>\n          <form onSubmit={handleSubmit} className=\"flex flex-col gap-4\">\n            <Field htmlFor=\"sign-in-email\" label=\"Email\" required>\n              <Input\n                id=\"sign-in-email\"\n                name=\"email\"\n                type=\"email\"\n                autoComplete=\"email\"\n                inputMode=\"email\"\n                placeholder=\"you@company.com\"\n                value={email}\n                onChange={(event) => setEmail(event.target.value)}\n                required\n              />\n            </Field>\n\n            <Field htmlFor=\"sign-in-password\" label=\"Password\" required>\n              <Input\n                id=\"sign-in-password\"\n                name=\"password\"\n                type=\"password\"\n                autoComplete=\"current-password\"\n                value={password}\n                onChange={(event) => setPassword(event.target.value)}\n                required\n              />\n            </Field>\n\n            <div className=\"flex flex-wrap items-center justify-between gap-2\">\n              <div className=\"flex items-center gap-2\">\n                <Checkbox\n                  id=\"sign-in-remember\"\n                  name=\"remember\"\n                  checked={remember}\n                  onCheckedChange={(checked) => setRemember(checked === true)}\n                />\n                <Label htmlFor=\"sign-in-remember\" className=\"font-normal\">\n                  Remember me\n                </Label>\n              </div>\n              <a\n                href={forgotHref}\n                className=\"text-xs font-medium text-link underline-offset-4 hover:underline\"\n              >\n                Forgot password?\n              </a>\n            </div>\n\n            <Button type=\"submit\" className=\"w-full\">\n              Sign in\n            </Button>\n          </form>\n        </CardContent>\n\n        <CardFooter className=\"justify-center border-t border-border pt-4 text-sm text-muted-foreground\">\n          New to Aback?{\" \"}\n          <a\n            href={signUpHref}\n            className=\"ml-1 font-medium text-link underline-offset-4 hover:underline\"\n          >\n            Create an account\n          </a>\n        </CardFooter>\n      </Card>\n    </section>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/blocks/sign-in.tsx"
    }
  ]
}