{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "auth-7",
  "title": "Set New Password With Rules",
  "description": "Reset-password card with new and confirm fields plus live requirement checks for length, uppercase, number, and match, ending in a success state.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "button",
    "card",
    "field",
    "input"
  ],
  "files": [
    {
      "path": "registry/blocks/auth/7/auth-block.tsx",
      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\nimport { Field, FieldLabel } from \"@/components/ui/field\"\nimport { Input } from \"@/components/ui/input\"\nimport { IconPlaceholder } from \"@/components/icons/icon-placeholder\"\n\nfunction Rule({ ok, label }: { ok: boolean; label: string }) {\n  return (\n    <li className=\"flex items-center gap-2 text-xs\">\n      {ok ? (\n        <IconPlaceholder\n          lucide=\"Check\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"Check\"\n          remixicon=\"RiCheckLine\"\n          className=\"size-3.5 text-foreground\"\n          aria-hidden=\"true\"\n        />\n      ) : (\n        <IconPlaceholder\n          lucide=\"X\"\n          tabler=\"IconX\"\n          hugeicons=\"Cancel01Icon\"\n          phosphor=\"X\"\n          remixicon=\"RiCloseLine\"\n          className=\"size-3.5 text-muted-foreground/50\"\n          aria-hidden=\"true\"\n        />\n      )}\n      <span className={ok ? \"text-foreground\" : \"text-muted-foreground\"}>\n        {label}\n      </span>\n    </li>\n  )\n}\n\nexport default function AuthBlock() {\n  const [password, setPassword] = useState(\"\")\n  const [confirm, setConfirm] = useState(\"\")\n  const [done, setDone] = useState(false)\n\n  const hasLength = password.length >= 8\n  const hasNumber = /\\d/.test(password)\n  const hasUpper = /[A-Z]/.test(password)\n  const matches = confirm.length > 0 && password === confirm\n  const valid = hasLength && hasNumber && hasUpper && matches\n\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-12 text-foreground\">\n      <Card className=\"w-full max-w-sm\">\n        <CardHeader className=\"text-center\">\n          <CardTitle className=\"text-xl font-bold tracking-tight\">\n            {done ? \"Password updated\" : \"Set a new password\"}\n          </CardTitle>\n          <CardDescription className=\"text-sm\">\n            {done\n              ? \"Your password has been changed. You can sign in with it now.\"\n              : \"Choose a strong password you don't use anywhere else.\"}\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          {done ? (\n            <Button\n              className=\"w-full\"\n              render={<a href=\"#\" />}\n              nativeButton={false}\n            >\n              Continue to sign in\n            </Button>\n          ) : (\n            <form\n              onSubmit={(event) => {\n                event.preventDefault()\n                if (valid) setDone(true)\n              }}\n              noValidate\n              className=\"flex flex-col gap-4\"\n            >\n              <Field>\n                <FieldLabel htmlFor=\"password\">New password</FieldLabel>\n                <Input\n                  id=\"password\"\n                  name=\"password\"\n                  type=\"password\"\n                  placeholder=\"••••••••\"\n                  value={password}\n                  onChange={(event) => setPassword(event.target.value)}\n                />\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"confirm\">Confirm password</FieldLabel>\n                <Input\n                  id=\"confirm\"\n                  name=\"confirm\"\n                  type=\"password\"\n                  placeholder=\"••••••••\"\n                  value={confirm}\n                  aria-invalid={confirm.length > 0 && !matches}\n                  onChange={(event) => setConfirm(event.target.value)}\n                />\n              </Field>\n              <ul className=\"flex flex-col gap-1.5\">\n                <Rule ok={hasLength} label=\"At least 8 characters\" />\n                <Rule ok={hasUpper} label=\"One uppercase letter\" />\n                <Rule ok={hasNumber} label=\"One number\" />\n                <Rule ok={matches} label=\"Passwords match\" />\n              </ul>\n              <Button\n                type=\"submit\"\n                className={cn(\"w-full\", !valid && \"opacity-60\")}\n                disabled={!valid}\n              >\n                Update password\n              </Button>\n            </form>\n          )}\n        </CardContent>\n      </Card>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "490px",
    "tier": "free"
  },
  "docs": "Requires a `base-*` style in components.json (the `shadcn init` default). Legacy `new-york`/`radix-*` styles install Radix primitives, which reject the `render` prop this block uses.",
  "categories": [
    "auth"
  ],
  "type": "registry:block"
}